/* * Nouvelle interface Socosapar — socle CSS de l'aperçu. * * Tout est préfixé « m- » pour cohabiter avec l'ancien CSS sans collision. * Les couleurs, rayons et espacements passent par les variables ci-dessous : * c'est là, et seulement là, qu'on ajuste la direction visuelle. * * Fin de fichier : une couche de compatibilité qui réimplémente les classes * de grille de Foundation (row, columns, small/medium/large-N…) en flexbox, * conformément à la décision 4 du plan de migration. */ :root { --m-police: "Inter var", Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --m-police-chiffres: "Inter var", Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; /* Sapin : la couleur de marque, du plus sombre au plus clair. */ --m-sapin-950: #0d2a1f; --m-sapin-900: #123627; --m-sapin-800: #174532; --m-sapin-700: #1d5a40; --m-sapin-600: #23704f; --m-sapin-500: #2c8a61; --m-sapin-100: #e3f1e9; --m-sapin-50: #f1f8f4; --m-fond: #f4f5f1; --m-surface: #ffffff; --m-surface-2: #f8f9f6; --m-bord: #e2e5de; --m-bord-fort: #c9cfc4; --m-texte: #18211c; --m-texte-2: #55615a; --m-texte-3: #667168; /* 5,09:1 sur blanc, 4,63:1 sur --m-fond */ --m-succes: #1e7a4c; --m-succes-fond: #e6f4ec; --m-succes-bord: #b9dfc9; --m-alerte: #8f5b00; --m-alerte-fond: #fdf4e3; --m-alerte-bord: #f0d49b; --m-danger: #b42318; --m-danger-fond: #fdeceb; --m-danger-bord: #f5c2bd; --m-info: #1b5aa6; --m-info-fond: #e9f1fb; --m-info-bord: #bcd3f0; --m-or: #b9852a; --m-rayon: 12px; --m-rayon-sm: 8px; --m-rayon-xs: 6px; --m-ombre: 0 1px 2px rgba(16, 32, 24, .05), 0 1px 3px rgba(16, 32, 24, .07); --m-ombre-haute: 0 10px 30px -12px rgba(16, 32, 24, .25), 0 2px 6px rgba(16, 32, 24, .06); --m-anneau: 0 0 0 2px #fff, 0 0 0 4px var(--m-sapin-600); /* blanc puis sapin : visible sur les fonds clairs et sur le menu sombre */ --m-barre: 264px; --m-entete: 60px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.m-corps { margin: 0; background: var(--m-fond); color: var(--m-texte); font-family: var(--m-police); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .m-corps a { color: var(--m-sapin-600); text-decoration: none; } .m-corps a:hover { color: var(--m-sapin-800); text-decoration: underline; text-underline-offset: 2px; } .m-corps :focus-visible { outline: none; box-shadow: var(--m-anneau); border-radius: var(--m-rayon-xs); } /* Lien d'évitement : hors écran jusqu'au premier Tab. */ .m-evitement { position: fixed; top: 8px; left: 8px; z-index: 1100; padding: 10px 14px; border-radius: var(--m-rayon-sm); background: var(--m-surface); color: var(--m-sapin-700) !important; font-weight: 600; transform: translateY(-200%); } .m-evitement:focus { transform: none; } .m-corps h1, .m-corps h2, .m-corps h3, .m-corps h4 { margin: 0; color: var(--m-texte); font-weight: 650; letter-spacing: -.01em; line-height: 1.25; } .m-corps h1 { font-size: 24px; } .m-corps h2 { font-size: 17px; } .m-corps h3 { font-size: 15px; } .m-corps p { margin: 0 0 .75em; } .m-corps hr { border: 0; border-top: 1px solid var(--m-bord); margin: 16px 0; } .m-corps small { font-size: 12px; } .m-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .m-muet { color: var(--m-texte-2); } .m-discret { color: var(--m-texte-3); } .m-fort { font-weight: 600; } .m-nowrap { white-space: nowrap; } .m-visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Coque : barre latérale + zone principale ---------- */ .m-app { display: grid; grid-template-columns: var(--m-barre) minmax(0, 1fr); min-height: 100vh; } .m-barre { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--m-sapin-950); background-image: linear-gradient(180deg, var(--m-sapin-900) 0%, var(--m-sapin-950) 60%); color: #d5e4db; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; } .m-marque { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; color: #fff !important; text-decoration: none !important; } .m-marque-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, var(--m-sapin-500), var(--m-sapin-700)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } .m-marque-nom { font-weight: 700; font-size: 16px; letter-spacing: .01em; line-height: 1.1; } .m-marque-sous { display: block; font-size: 11px; font-weight: 500; color: #9fbcac; letter-spacing: .04em; text-transform: uppercase; } .m-nav { padding: 6px 10px 20px; flex: 1; } .m-nav-titre { margin: 16px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7fa190; } .m-nav ul { list-style: none; margin: 0; padding: 0; } .m-nav-lien, .m-nav summary { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border-radius: var(--m-rayon-sm); color: #d5e4db !important; font-size: 13.5px; font-weight: 500; text-decoration: none !important; cursor: pointer; list-style: none; transition: background-color .12s ease, color .12s ease; } .m-nav summary::-webkit-details-marker { display: none; } .m-nav-lien:hover, .m-nav summary:hover { background: rgba(255,255,255,.07); color: #fff !important; } .m-nav-lien.est-actif { background: rgba(255,255,255,.12); color: #fff !important; box-shadow: inset 3px 0 0 #7fd3a6; } .m-nav-icone { width: 18px; text-align: center; font-size: 16px; opacity: .85; flex: none; } .m-nav-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-nav summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: .6; transition: transform .15s ease; flex: none; } .m-nav details[open] > summary::after { transform: rotate(45deg); } .m-nav details > ul { margin: 2px 0 6px 21px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.1); } .m-nav details > ul .m-nav-lien { padding: 5px 10px; font-size: 13px; color: #b9cfc2 !important; } .m-nav details > ul .m-nav-lien:hover { color: #fff !important; } .m-nav-pastille { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #c2410c; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .m-barre-pied { padding: 14px 20px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: #8fae9e; } .m-barre-pied a { color: #cfe3d7 !important; } .m-principal { min-width: 0; display: flex; flex-direction: column; } .m-entete { position: sticky; top: 0; z-index: 30; height: var(--m-entete); display: flex; align-items: center; gap: 16px; padding: 0 28px; background: rgba(244, 245, 241, .86); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--m-bord); } .m-entete-espace { flex: 1; } .m-fil { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--m-texte-2); min-width: 0; overflow: hidden; } .m-fil li { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; white-space: nowrap; } .m-fil li > a, .m-fil li:last-child { overflow: hidden; text-overflow: ellipsis; } .m-fil li > a { max-width: 28ch; } /* Le fil situe, il n'agit pas : pas d'icône, qui se lirait comme un bouton. */ .m-fil [class*="fi-"]::before { display: none; } /* Mesure (script du layout), puis réduction : le premier et les deux derniers éléments, « … » pour le reste. */ .m-fil.est-mesure li { flex: none; } .m-fil.est-serre li:not(:first-child):not(:nth-last-child(-n+2)) { display: none; } .m-fil.est-serre li:nth-last-child(2):not(:nth-child(2))::before { content: "… /"; } .m-fil li:first-child { flex-shrink: 0; } .m-fil li + li::before { content: "/"; color: var(--m-bord-fort); } .m-fil a { color: var(--m-texte-2) !important; } .m-fil a:hover { color: var(--m-texte) !important; } .m-fil li:last-child, .m-fil li:last-child a { color: var(--m-texte) !important; font-weight: 550; } .m-utilisateur { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; color: var(--m-texte) !important; text-decoration: none !important; font-weight: 550; font-size: 13px; } .m-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--m-sapin-100); color: var(--m-sapin-800); font-size: 12px; font-weight: 700; letter-spacing: .02em; } .m-btn.m-menu-mobile { display: none; } .m-voile { display: none; } .m-contenu { padding: 24px 28px 48px; width: 100%; max-width: 1480px; } .m-pied { margin-top: auto; padding: 16px 190px 24px 28px; color: var(--m-texte-3); font-size: 12px; display: flex; justify-content: space-between; gap: 16px; } .m-pied a { color: var(--m-texte-2) !important; } /* ---------- En-tête de page ---------- */ .m-page-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; } .m-page-tete-texte { min-width: 0; } .m-surtitre { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--m-texte-3); } .m-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; color: var(--m-texte-2); font-size: 13px; } .m-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; } /* ---------- Boutons ---------- */ .m-btn { --fond: var(--m-surface); --texte: var(--m-texte); --bord: var(--m-bord-fort); display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--bord); border-radius: var(--m-rayon-sm); background: var(--fond); color: var(--texte) !important; font: inherit; font-size: 13.5px; font-weight: 550; line-height: 1; white-space: nowrap; text-decoration: none !important; cursor: pointer; box-shadow: 0 1px 1px rgba(16,32,24,.04); transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .05s ease; } .m-btn:hover { background: var(--m-surface-2); border-color: var(--m-texte-3); } .m-btn:active { transform: translateY(1px); } .m-btn [class*="fi-"]::before { font-size: 15px; } .m-btn--primaire { --fond: var(--m-sapin-600); --texte: #fff; --bord: var(--m-sapin-700); } .m-btn--primaire:hover { background: var(--m-sapin-700); border-color: var(--m-sapin-800); } .m-btn--danger { --texte: var(--m-danger); --bord: var(--m-danger-bord); } .m-btn--danger:hover { background: var(--m-danger-fond); border-color: var(--m-danger); } .m-btn--alerte { --texte: var(--m-alerte); --bord: var(--m-alerte-bord); } .m-btn--alerte:hover { background: var(--m-alerte-fond); border-color: var(--m-alerte); } .m-btn--fantome { --fond: transparent; --bord: transparent; box-shadow: none; color: var(--m-texte-2) !important; } .m-btn--fantome:hover { background: rgba(16,32,24,.06); border-color: transparent; color: var(--m-texte) !important; } .m-btn--sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; gap: 6px; } .m-btn--icone { width: 32px; min-height: 32px; padding: 0; } .m-btn--icone.m-btn--sm { width: 28px; min-height: 28px; } .m-btn[disabled], .m-btn.est-inactif { opacity: .5; pointer-events: none; } .m-groupe { display: inline-flex; align-items: center; gap: 4px; } /* Menu déroulant natif (details/summary), pour ranger les actions secondaires. */ .m-deroulant { position: relative; } .m-deroulant > summary { list-style: none; } .m-deroulant > summary::-webkit-details-marker { display: none; } .m-deroulant-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; padding: 6px; background: var(--m-surface); border: 1px solid var(--m-bord); border-radius: var(--m-rayon); box-shadow: var(--m-ombre-haute); } .m-deroulant-menu a, .m-deroulant-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--m-rayon-xs); background: none; color: var(--m-texte) !important; font: inherit; font-size: 13.5px; text-align: left; text-decoration: none !important; cursor: pointer; } .m-deroulant-menu a:hover, .m-deroulant-menu button:hover { background: var(--m-surface-2); } .m-deroulant-menu [class*="fi-"]::before { width: 16px; text-align: center; color: var(--m-texte-2); } .m-deroulant-menu .est-danger { color: var(--m-danger) !important; } .m-deroulant-menu .est-alerte { color: var(--m-alerte) !important; } .m-deroulant-menu form { display: none; } .m-deroulant-menu hr { margin: 6px 4px; } /* ---------- Cartes ---------- */ .m-carte { background: var(--m-surface); border: 1px solid var(--m-bord); border-radius: var(--m-rayon); box-shadow: var(--m-ombre); min-width: 0; } .m-carte + .m-carte { margin-top: 16px; } .m-grille > .m-carte + .m-carte { margin-top: 0; } /* l'écart vient alors de la grille */ .m-carte-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 18px; border-bottom: 1px solid var(--m-bord); } .m-carte-tete h2, .m-carte-tete h3 { display: flex; align-items: center; gap: 8px; } .m-carte-tete .m-muet { font-size: 13px; } .m-carte-corps { padding: 16px 18px; } .m-carte-corps--flush { padding: 0; } .m-carte-pied { padding: 12px 18px; border-top: 1px solid var(--m-bord); background: var(--m-surface-2); border-radius: 0 0 var(--m-rayon) var(--m-rayon); } /* Carte repliable :
… */ .m-repli > summary { cursor: pointer; list-style: none; } .m-repli > summary::-webkit-details-marker { display: none; } .m-repli > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid var(--m-texte-3); border-bottom: 1.5px solid var(--m-texte-3); transform: rotate(45deg); transition: transform .15s ease; } .m-repli[open] > summary::after { transform: rotate(-135deg); } .m-repli:not([open]) > summary { border-bottom: 0; } /* ---------- Grilles de mise en page ---------- */ .m-grille { display: grid; gap: 16px; } .m-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .m-grille--principale { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .m-pile > * + * { margin-top: 16px; } /* ---------- Indicateurs ---------- */ .m-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; } .m-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 1440px) { .m-kpis--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 560px) { .m-kpis--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .m-kpi { display: block; padding: 14px 16px; background: var(--m-surface); border: 1px solid var(--m-bord); border-radius: var(--m-rayon); box-shadow: var(--m-ombre); color: inherit !important; text-decoration: none !important; } a.m-kpi { transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } a.m-kpi:hover { border-color: var(--m-sapin-500); box-shadow: var(--m-ombre-haute); transform: translateY(-1px); } .m-kpi-libelle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; color: var(--m-texte-2); } .m-kpi-valeur { display: block; margin-top: 6px; font-family: var(--m-police-chiffres); font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .m-kpi-aide { display: block; margin-top: 4px; font-size: 12px; color: var(--m-texte-3); } .m-kpi--alerte { border-color: var(--m-alerte-bord); background: linear-gradient(180deg, #fff 0%, var(--m-alerte-fond) 140%); } .m-kpi--alerte .m-kpi-valeur { color: var(--m-alerte); } .m-kpi--calme .m-kpi-valeur { color: var(--m-texte-3); } /* ---------- Pastilles d'état ---------- */ .m-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--m-bord); background: var(--m-surface-2); color: var(--m-texte-2); font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; } .m-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; } .m-badge--nu::before { display: none; } .m-badge--succes { background: var(--m-succes-fond); border-color: var(--m-succes-bord); color: var(--m-succes); } .m-badge--alerte { background: var(--m-alerte-fond); border-color: var(--m-alerte-bord); color: var(--m-alerte); } .m-badge--danger { background: var(--m-danger-fond); border-color: var(--m-danger-bord); color: var(--m-danger); } .m-badge--info { background: var(--m-info-fond); border-color: var(--m-info-bord); color: var(--m-info); } .m-badge--sapin { background: var(--m-sapin-50); border-color: var(--m-sapin-100); color: var(--m-sapin-700); } /* Pastille de couleur d'étiquette (lots). */ .m-pastille-couleur { display: inline-block; width: 12px; height: 12px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); vertical-align: -1px; flex: none; } /* ---------- Messages ---------- */ .m-alerte { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--m-info-bord); border-radius: var(--m-rayon); background: var(--m-info-fond); color: var(--m-texte); font-size: 13.5px; } .m-alerte + .m-alerte { margin-top: 10px; } .m-alerte-icone { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; background: var(--m-info); } .m-alerte-titre { display: block; font-weight: 650; margin-bottom: 2px; } .m-alerte--alerte { border-color: var(--m-alerte-bord); background: var(--m-alerte-fond); } .m-alerte--alerte .m-alerte-icone { background: #c98a12; } .m-alerte--danger { border-color: var(--m-danger-bord); background: var(--m-danger-fond); } .m-alerte--danger .m-alerte-icone { background: var(--m-danger); } .m-alerte--succes { border-color: var(--m-succes-bord); background: var(--m-succes-fond); } .m-alerte--succes .m-alerte-icone { background: var(--m-succes); } /* Messages flash : les éléments Flash/* existants produisent .alert-box. */ .m-flash { display: grid; gap: 10px; margin-bottom: 16px; } .m-flash .alert-box { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 40px 12px 14px; border: 1px solid var(--m-info-bord); border-radius: var(--m-rayon); background: var(--m-info-fond); color: var(--m-texte); font-size: 14px; text-align: left !important; box-shadow: var(--m-ombre); } .m-flash .alert-box br { display: none; } .m-flash .alert-box [class*="fi-"] { font-size: 20px !important; } .m-flash .alert-box .size-24 { font-size: 14px !important; font-weight: 550; } .m-flash .alert-box.success { border-color: var(--m-succes-bord); background: var(--m-succes-fond); } .m-flash .alert-box.success [class*="fi-"] { color: var(--m-succes); } .m-flash .alert-box.error, .m-flash .alert-box.alert { border-color: var(--m-danger-bord); background: var(--m-danger-fond); } .m-flash .alert-box.error [class*="fi-"], .m-flash .alert-box.alert [class*="fi-"] { color: var(--m-danger); } .m-flash .alert-box.warning { border-color: var(--m-alerte-bord); background: var(--m-alerte-fond); } .m-flash .alert-box .close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--m-texte-3) !important; font-size: 20px; text-decoration: none !important; } /* ---------- Tableaux ---------- */ .m-tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; } .m-tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } .m-tableau th { position: sticky; top: 0; padding: 9px 12px; background: var(--m-surface-2); border-bottom: 1px solid var(--m-bord); color: var(--m-texte-2); font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; text-align: left; white-space: nowrap; } .m-tableau td { position: relative; padding: 10px 12px; border-bottom: 1px solid var(--m-bord); vertical-align: middle; } /* position: relative garde les libellés .m-visuellement-cache (position absolue) des boutons-icônes dans la cellule : sinon ils échappent au défilement du tableau et élargissent toute la page. */ .m-tableau tbody tr:last-child td { border-bottom: 0; } .m-tableau tbody tr { transition: background-color .1s ease; } .m-tableau tbody tr:hover { background: var(--m-sapin-50); } .m-tableau tr[data-href], .m-tableau tr.est-cliquable { cursor: pointer; } /* Tableau qui tient dans sa largeur (classe posée par le layout) : le cadre ne retient plus le collage, l'en-tête reste sous la barre du haut au défilement de la page. overflow: clip ne crée pas de zone de défilement. */ .m-tableau-defile.est-sans-defilement { overflow-x: clip; overflow-clip-margin: 8px; } .m-tableau-defile.est-sans-defilement > .m-tableau > thead > tr > th, .m-tableau-defile.est-sans-defilement > .m-tableau > thead > tr > th.m-cellule-actions { top: var(--m-entete); z-index: 5; } .m-tableau tfoot td { background: var(--m-surface-2); font-weight: 600; border-top: 1px solid var(--m-bord); border-bottom: 0; } .m-tableau .m-num { text-align: right; } .m-tableau th.m-num { text-align: right; } .m-tableau .m-cellule-actions { width: 1%; white-space: nowrap; text-align: right; } .m-tableau .m-sous-ligne { display: block; margin-top: 2px; font-size: 12px; color: var(--m-texte-3); } .m-tableau tr.est-alerte td { background: var(--m-alerte-fond); } .m-tableau tr.est-alerte:hover td { background: #fbecd0; } .m-tableau tr.est-inactif td { color: var(--m-texte-3); } .m-tableau--compact td { padding: 7px 12px; } .m-carte-corps--flush .m-tableau th:first-child, .m-carte-corps--flush .m-tableau td:first-child { padding-left: 18px; } .m-carte-corps--flush .m-tableau th:last-child, .m-carte-corps--flush .m-tableau td:last-child { padding-right: 18px; } /* Poignée de déplacement des lignes (tri manuel). */ .m-poignee { cursor: grab; color: var(--m-texte-3); } .m-poignee:hover { color: var(--m-texte); } /* ---------- Listes de propriétés ---------- */ .m-proprietes { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 13.5px; } .m-proprietes dt { color: var(--m-texte-2); } .m-proprietes dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* Totaux (facture). */ .m-totaux { display: grid; gap: 6px; margin: 0; font-size: 14px; } .m-totaux > div { display: flex; justify-content: space-between; gap: 16px; } .m-totaux dt { color: var(--m-texte-2); } .m-totaux dd { margin: 0; font-variant-numeric: tabular-nums; } .m-totaux .m-total-final { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--m-bord); font-size: 18px; font-weight: 700; } .m-totaux .m-total-final dt { color: var(--m-texte); } /* Frise d'étapes (cycle de vie d'un document). */ .m-etapes { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: etape; } .m-etapes li { flex: 1; position: relative; padding-top: 22px; font-size: 12.5px; color: var(--m-texte-3); text-align: center; } .m-etapes li::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--m-surface); border: 2px solid var(--m-bord-fort); z-index: 1; } .m-etapes li::after { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--m-bord); } .m-etapes li:first-child::after { display: none; } .m-etapes li.est-fait { color: var(--m-texte); } .m-etapes li.est-fait::before { background: var(--m-sapin-600); border-color: var(--m-sapin-600); } .m-etapes li.est-fait::after { background: var(--m-sapin-600); } .m-etapes li.est-courant::before { border-color: var(--m-sapin-600); box-shadow: 0 0 0 4px var(--m-sapin-100); } .m-etapes strong { display: block; font-weight: 600; } .m-etapes span { display: block; font-size: 11.5px; color: var(--m-texte-3); } /* Barre de progression. */ .m-jauge { height: 8px; border-radius: 999px; background: var(--m-bord); overflow: hidden; } .m-jauge > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--m-sapin-500), var(--m-sapin-600)); } /* Lanceur d'applications (accueil). */ .m-lanceur { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .m-tuile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--m-bord); border-radius: var(--m-rayon); background: var(--m-surface); color: var(--m-texte) !important; font-weight: 550; font-size: 13.5px; line-height: 1.3; text-decoration: none !important; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } .m-tuile:hover { border-color: var(--m-sapin-500); box-shadow: var(--m-ombre-haute); transform: translateY(-1px); } .m-tuile-icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--m-sapin-50); color: var(--m-sapin-700); font-size: 18px; } .m-tuile:hover .m-tuile-icone { background: var(--m-sapin-600); color: #fff; } /* État vide. */ .m-vide { padding: 28px 18px; text-align: center; color: var(--m-texte-3); } .m-vide [class*="fi-"] { display: block; margin-bottom: 6px; font-size: 26px; color: var(--m-bord-fort); } /* ---------- Initialisation de Foundation JS ---------- * $(document).foundation() (site.min.js) lit son espace de noms data-* et ses requêtes * média dans la police des balises qu'il crée. Sans ces * règles, reprises telles quelles de site.min.css (Foundation 5.5.3), l'espace de noms * vaut « "Times New Roman" », l'initialisation échoue et les modales ne s'ouvrent plus. */ meta.foundation-version { font-family: "/5.5.3/"; } meta.foundation-mq-small { font-family: "/only screen/"; width: 0; } meta.foundation-mq-small-only { font-family: "/only screen and (max-width: 40em)/"; width: 0; } meta.foundation-mq-medium { font-family: "/only screen and (min-width:40.0625em)/"; width: 40.0625em; } meta.foundation-mq-medium-only { font-family: "/only screen and (min-width:40.0625em) and (max-width:64em)/"; width: 40.0625em; } meta.foundation-mq-large { font-family: "/only screen and (min-width:64.0625em)/"; width: 64.0625em; } meta.foundation-mq-large-only { font-family: "/only screen and (min-width:64.0625em) and (max-width:90em)/"; width: 64.0625em; } meta.foundation-mq-xlarge { font-family: "/only screen and (min-width:90.0625em)/"; width: 90.0625em; } meta.foundation-mq-xlarge-only { font-family: "/only screen and (min-width:90.0625em) and (max-width:120em)/"; width: 90.0625em; } meta.foundation-mq-xxlarge { font-family: "/only screen and (min-width:120.0625em)/"; width: 120.0625em; } meta.foundation-data-attribute-namespace { font-family: false; } meta.foundation-mq-topbar { font-family: "/only screen and (min-width:40.0625em)/"; width: 40.0625em; } /* ---------- Modales Foundation Reveal (#myModal, data-reveal-id) ---------- */ .m-corps .reveal-modal-bg { position: fixed; inset: 0; z-index: 1004; display: none; background: rgba(13, 42, 31, .45); } .m-corps .reveal-modal { position: absolute; left: 0; right: 0; top: 80px; z-index: 1005; display: none; visibility: hidden; width: min(760px, calc(100vw - 32px)); margin: 0 auto; padding: 24px; background: var(--m-surface); border: 1px solid var(--m-bord); border-radius: var(--m-rayon); box-shadow: var(--m-ombre-haute); } .m-corps .reveal-modal .close-reveal-modal { position: absolute; top: 10px; right: 14px; color: var(--m-texte-3) !important; font-size: 26px; line-height: 1; text-decoration: none !important; cursor: pointer; } .m-corps .reveal-modal .close-reveal-modal:hover { color: var(--m-texte) !important; } /* ---------- Formulaires ---------- */ .m-corps input[type="text"], .m-corps input[type="number"], .m-corps input[type="email"], .m-corps input[type="date"], .m-corps input[type="search"], .m-corps input[type="password"], .m-corps input[type="tel"], .m-corps input[type="url"], .m-corps input[type="time"], .m-corps input[type="datetime-local"], .m-corps input[type="month"], .m-corps input[type="week"], .m-corps input:not([type]), .m-corps select, .m-corps textarea { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--m-bord-fort); border-radius: var(--m-rayon-sm); background: var(--m-surface); color: var(--m-texte); font: inherit; font-size: 14px; transition: border-color .12s ease, box-shadow .12s ease; } .m-corps input:focus, .m-corps select:focus, .m-corps textarea:focus { outline: none; border-color: var(--m-sapin-500); box-shadow: var(--m-anneau); } .m-corps form label, .m-champ > label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 550; color: var(--m-texte-2); } .m-champ + .m-champ { margin-top: 12px; } .m-ligne-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .m-ligne-form > * { flex: 1 1 180px; } .m-ligne-form > .m-btn { flex: none; } /* Listes natives : même chevron que les listes Chosen, au lieu de la flèche du navigateur. */ .m-corps select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2355615a' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } /* ---------- Écrans étroits ---------- */ @media (max-width: 1180px) { .m-grille--principale { grid-template-columns: minmax(0, 1fr); } .m-entete-nom { display: none; } } @media (max-width: 960px) { .m-app { grid-template-columns: minmax(0, 1fr); } .m-barre { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(86vw, var(--m-barre)); transform: translateX(-100%); /* Fermée, la barre est aussi hors du parcours clavier : sinon le Tab entre dans des liens hors écran. visibility bascule après le glissement à la fermeture, tout de suite à l'ouverture. */ visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; } /* L'ombre n'apparaît qu'avec le menu ouvert : fermé, elle débordait sur la page. */ #m-nav-bascule:checked ~ .m-app .m-barre { transform: none; box-shadow: var(--m-ombre-haute); visibility: visible; transition: transform .2s ease, visibility 0s; } .m-voile { position: fixed; inset: 0; z-index: 55; background: rgba(13, 42, 31, .45); } #m-nav-bascule:checked ~ .m-app .m-voile { display: block; } /* « Une remarque ? » (z-index 900) passe sous le voile tant que le menu est ouvert : il en couvrait les entrées. */ #m-nav-bascule:checked ~ #scs-retour, #m-nav-bascule:checked ~ .scs-retour-bulle { z-index: 50; } .m-btn.m-menu-mobile { display: inline-flex; } .m-entete, .m-contenu, .m-pied { padding-left: 16px; padding-right: 16px; } .m-entete-nom { display: none; } } @media (max-width: 720px) { .m-grille--2, .m-grille--3 { grid-template-columns: minmax(0, 1fr); } .m-corps h1 { font-size: 20px; } .m-page-actions { width: 100%; position: relative; justify-content: flex-start; margin-left: 0; } /* Les boutons passent à la ligne : on ancre les menus sous toute la barre d'actions. */ .m-page-actions .m-deroulant { position: static; } .m-page-actions .m-deroulant-menu { left: 0; right: 0; min-width: 0; } /* Téléphone : le fil devient un lien de retour (repère posé par le layout). */ .m-fil li { display: none; } .m-fil li.m-fil-retour, .m-fil li.m-fil-seul { display: flex; flex: 0 1 auto; } .m-fil li.m-fil-retour::before, .m-fil li.m-fil-seul::before { display: none; } .m-fil li.m-fil-retour > a { max-width: none; color: var(--m-texte) !important; font-weight: 550; } .m-fil li.m-fil-retour > a::before { display: inline; content: "← "; } .m-masque-mobile { display: none; } .m-etapes span { display: none; } } @media print { .m-barre, .m-entete, .m-pied, .m-page-actions, .m-cellule-actions, .m-onglets { display: none !important; } .m-app { display: block; } body.m-corps { background: #fff; } .m-carte { box-shadow: none; } .m-contenu { padding: 0; max-width: none; } /* Sur papier rien ne défile : ce qui dépasse du cadre serait perdu, et sa barre de défilement imprimée. */ .m-tableau-defile { overflow: visible !important; } .m-tableau th { position: static !important; } .m-tableau { font-size: 12px; } .m-tableau th, .m-tableau td { padding: 6px 8px; } } /* ---------- Compatibilité : grille Foundation (décision 4) ---------- */ .m-corps .row { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; } .m-corps .row .row { margin-left: -8px; margin-right: -8px; } .m-corps .column, .m-corps .columns { flex: 0 0 100%; max-width: 100%; padding-left: 8px; padding-right: 8px; min-width: 0; } .m-corps .row.collapse { margin-left: 0; margin-right: 0; } .m-corps .row.collapse > .column, .m-corps .row.collapse > .columns { padding-left: 0; padding-right: 0; } .m-corps .small-1 { flex-basis: 8.3333%; max-width: 8.3333%; } .m-corps .small-2 { flex-basis: 16.6667%; max-width: 16.6667%; } .m-corps .small-3 { flex-basis: 25%; max-width: 25%; } .m-corps .small-4 { flex-basis: 33.3333%; max-width: 33.3333%; } .m-corps .small-5 { flex-basis: 41.6667%; max-width: 41.6667%; } .m-corps .small-6 { flex-basis: 50%; max-width: 50%; } .m-corps .small-7 { flex-basis: 58.3333%; max-width: 58.3333%; } .m-corps .small-8 { flex-basis: 66.6667%; max-width: 66.6667%; } .m-corps .small-9 { flex-basis: 75%; max-width: 75%; } .m-corps .small-10 { flex-basis: 83.3333%; max-width: 83.3333%; } .m-corps .small-11 { flex-basis: 91.6667%; max-width: 91.6667%; } .m-corps .small-12 { flex-basis: 100%; max-width: 100%; } @media (min-width: 40em) { .m-corps .medium-1 { flex-basis: 8.3333%; max-width: 8.3333%; } .m-corps .medium-2 { flex-basis: 16.6667%; max-width: 16.6667%; } .m-corps .medium-3 { flex-basis: 25%; max-width: 25%; } .m-corps .medium-4 { flex-basis: 33.3333%; max-width: 33.3333%; } .m-corps .medium-5 { flex-basis: 41.6667%; max-width: 41.6667%; } .m-corps .medium-6 { flex-basis: 50%; max-width: 50%; } .m-corps .medium-7 { flex-basis: 58.3333%; max-width: 58.3333%; } .m-corps .medium-8 { flex-basis: 66.6667%; max-width: 66.6667%; } .m-corps .medium-9 { flex-basis: 75%; max-width: 75%; } .m-corps .medium-10 { flex-basis: 83.3333%; max-width: 83.3333%; } .m-corps .medium-11 { flex-basis: 91.6667%; max-width: 91.6667%; } .m-corps .medium-12 { flex-basis: 100%; max-width: 100%; } } @media (min-width: 64em) { .m-corps .large-1 { flex-basis: 8.3333%; max-width: 8.3333%; } .m-corps .large-2 { flex-basis: 16.6667%; max-width: 16.6667%; } .m-corps .large-3 { flex-basis: 25%; max-width: 25%; } .m-corps .large-4 { flex-basis: 33.3333%; max-width: 33.3333%; } .m-corps .large-5 { flex-basis: 41.6667%; max-width: 41.6667%; } .m-corps .large-6 { flex-basis: 50%; max-width: 50%; } .m-corps .large-7 { flex-basis: 58.3333%; max-width: 58.3333%; } .m-corps .large-8 { flex-basis: 66.6667%; max-width: 66.6667%; } .m-corps .large-9 { flex-basis: 75%; max-width: 75%; } .m-corps .large-10 { flex-basis: 83.3333%; max-width: 83.3333%; } .m-corps .large-11 { flex-basis: 91.6667%; max-width: 91.6667%; } .m-corps .large-12 { flex-basis: 100%; max-width: 100%; } } .m-corps .right { float: none; margin-left: auto; } .m-corps .clearfix::after { content: ""; display: table; clear: both; } /* ===================================================================== * Socle du 30/10 : composants communs des écrans refaits. * Mode d'emploi : guide de la nouvelle interface, section « Socle du 30/10 ». * ===================================================================== */ /* ---------- Pagination (élément Moderne/pagination) ---------- * Balisage du PaginatorHelper : li.prev / .next / .current / .disabled / .ellipsis. */ .m-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .m-pagination li { margin: 0; } .m-pagination a { position: relative; /* garde les libellés masqués visuellement dans le bouton */ display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; height: 32px; padding: 0 10px; border: 1px solid var(--m-bord); border-radius: var(--m-rayon-sm); background: var(--m-surface); color: var(--m-texte) !important; font-size: 13px; font-weight: 550; font-variant-numeric: tabular-nums; text-decoration: none !important; transition: background-color .12s ease, border-color .12s ease; } .m-pagination a:hover { border-color: var(--m-sapin-500); background: var(--m-sapin-50); } .m-pagination .current a, .m-pagination .active a { background: var(--m-sapin-600); border-color: var(--m-sapin-700); color: #fff !important; } .m-pagination .disabled a { opacity: .45; pointer-events: none; } .m-pagination .ellipsis { padding: 0 4px; color: var(--m-texte-3); } .m-pagination [class*="fi-"]::before { font-size: 13px; } .m-liste-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } @media (max-width: 720px) { .m-pagination-texte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .m-liste-pied { justify-content: center; padding-left: 12px; padding-right: 12px; } .m-liste-pied .m-pagination { justify-content: center; gap: 2px; } .m-liste-pied .m-pagination a { min-width: 30px; height: 36px; padding: 0 6px; } .m-liste-pied > .m-muet { width: 100%; text-align: center; } } /* Téléphone : numbers() émet jusqu'à 9 numéros, qui ne tiennent pas sur une ligne avec les deux flèches. Précédente et Suivante prennent leur propre rangée, avec leur texte ; les numéros passent dessous. */ @media (max-width: 480px) { .m-liste-pied > nav { width: 100%; } .m-liste-pied .m-pagination a { padding: 0 1px; } .m-liste-pied .m-pagination li.prev, .m-liste-pied .m-pagination li.next { flex: 1 1 calc(50% - 1px); } .m-liste-pied .m-pagination li.prev { order: -2; } .m-liste-pied .m-pagination li.next { order: -1; } .m-liste-pied .m-pagination li.prev a, .m-liste-pied .m-pagination li.next a { width: 100%; } .m-liste-pied .m-pagination-texte { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } } /* ---------- Barre de liste et filtre replié (éléments liste_barre et filtre) ---------- */ /* Le filtre et le résumé partagent la première rangée ; le filtre ouvert s'étale dessous sur toute la largeur, sans déplacer le résumé. */ .m-liste-barre { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--m-bord); } .m-liste-barre > * { grid-row: 1; min-width: 0; } .m-liste-barre > .m-filtre { grid-column: 1 / -1; } .m-liste-barre > .m-liste-resume { grid-column: 2; align-self: start; } .m-liste-resume { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 13px; } /* Carte étroite : la superposition ferait passer le résumé sur le bouton Filtrer. Le résumé reste à droite si les deux tiennent, sinon il passe à la ligne ; le filtre ouvert prend toute sa rangée. */ @container m-liste (max-width: 519px) { .m-liste-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .m-liste-barre > .m-filtre[open] { flex: 1 1 100%; } .m-liste-barre > .m-liste-resume { margin-left: auto; } } .m-filtre > summary { width: fit-content; list-style: none; } .m-filtre > summary::-webkit-details-marker { display: none; } .m-filtre[open] > summary { background: var(--m-surface-2); } .m-filtre-pastille { padding: 0 6px; border-radius: 999px; background: var(--m-sapin-600); color: #fff; font-size: 11px; font-weight: 600; line-height: 16px; } .m-corps .m-filtre-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); align-items: end; gap: 12px; margin: 12px 0 2px; } .m-filtre-form .m-champ { margin: 0; min-width: 0; } .m-filtre-boutons { display: flex; flex-wrap: wrap; gap: 6px; } .m-filtre-boutons .m-btn--primaire { flex: 1 1 auto; } /* ---------- Liste : tableau large, fiches sur carte étroite ---------- *
… . * Le passage en fiches suit la largeur de la carte (requête de conteneur) : la barre * latérale fait varier la place disponible sans que la fenêtre change. * Seuils : carte < 640 px par défaut ; < 880 px avec .m-liste-carte--large (tableaux de 6 colonnes et plus). * À 1280 px de fenêtre, la carte fait 958 px : les listes larges y restent en tableau. */ .m-liste-carte { container: m-liste / inline-size; } .m-liste-carte .m-tableau-defile { position: relative; } /* Le tableau finit la carte : ses cellules opaques ne débordent pas de l'arrondi. */ .m-liste-carte > .m-carte-corps--flush:last-child > .m-tableau-defile { border-radius: 0 0 var(--m-rayon) var(--m-rayon); } .m-liste th a { display: inline-flex; align-items: center; gap: 4px; color: inherit !important; text-decoration: none !important; } .m-liste th a:hover { color: var(--m-texte) !important; } .m-liste th a::after, .m-liste-tris a::after { content: "↕"; font-size: 11px; opacity: .35; } .m-liste th a.asc, .m-liste th a.desc { color: var(--m-sapin-700) !important; } .m-liste th a.asc::after, .m-liste-tris a.asc::after { content: "↑"; opacity: 1; } .m-liste th a.desc::after, .m-liste-tris a.desc::after { content: "↓"; opacity: 1; } .m-liste .m-liste-id { width: 1%; color: var(--m-texte-3); font-variant-numeric: tabular-nums; } .m-liste .m-liste-titre { font-weight: 600; } .m-liste .m-liste-titre a { color: var(--m-texte) !important; } .m-liste .m-liste-titre a:hover { color: var(--m-sapin-700) !important; } /* Si le tableau défile, Éditer et Supprimer restent au bord droit, sur fond opaque. */ .m-liste td.m-cellule-actions, .m-liste th.m-cellule-actions { position: sticky; right: 0; z-index: 1; } .m-liste td.m-cellule-actions { background: var(--m-surface); } .m-liste th.m-cellule-actions { z-index: 2; } .m-liste tbody tr:not(.est-alerte):hover td.m-cellule-actions { background: var(--m-sapin-50); } .m-liste tr.est-alerte td.m-cellule-actions { background: var(--m-alerte-fond); } .m-liste tbody tr.m-liste-ligne-vide:hover { background: none; } .m-carte-corps--flush .m-tableau.m-liste .m-liste-ligne-vide td { padding: 0; } .m-vide-actions { margin-top: 12px; } /* « Trier par » : seulement en fiches, où les en-têtes de colonnes sont masqués. */ .m-liste-tris { display: none; } @container m-liste (max-width: 639px) { .m-liste-tris { display: flex; align-items: center; gap: 6px; padding: 10px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 1px solid var(--m-bord); background: var(--m-surface-2); white-space: nowrap; } .m-liste-tris-libelle { flex: none; font-size: 12px; font-weight: 600; color: var(--m-texte-3); text-transform: uppercase; letter-spacing: .04em; } .m-liste-tris a { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--m-bord-fort); border-radius: 999px; background: var(--m-surface); color: var(--m-texte-2) !important; font-size: 12.5px; font-weight: 550; text-decoration: none !important; } .m-liste-tris a.asc, .m-liste-tris a.desc { background: var(--m-sapin-600); border-color: var(--m-sapin-700); color: #fff !important; } .m-liste-barre { padding: 10px 16px; } .m-liste thead { display: none; } .m-liste, .m-liste tbody { display: block; width: 100%; } .m-liste tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--m-bord); } .m-liste tbody tr:last-child { border-bottom: 0; } .m-carte-corps--flush .m-tableau.m-liste td, .m-carte-corps--flush .m-tableau.m-liste td:first-child, .m-carte-corps--flush .m-tableau.m-liste td:last-child { display: block; grid-column: 1 / -1; width: auto; padding: 0; border: 0; text-align: left; font-size: 13px; color: var(--m-texte-2); overflow-wrap: anywhere; } .m-liste td[data-libelle]::before { content: attr(data-libelle) " : "; color: var(--m-texte-3); } .m-liste td.est-vide { display: none !important; } .m-carte-corps--flush .m-tableau.m-liste td.m-liste-titre { grid-column: 1; grid-row: 1; align-self: center; font-size: 15px; color: var(--m-texte); } .m-liste td.m-liste-titre::before { display: none; } .m-carte-corps--flush .m-tableau.m-liste td.m-cellule-actions { grid-column: 2; grid-row: 1; align-self: start; position: relative; background: none; animation: none; box-shadow: none; } .m-carte-corps--flush .m-tableau.m-liste td.m-liste-id { order: 90; margin-top: 2px; font-size: 12px; color: var(--m-texte-3); } /* Boutons assez grands pour le doigt. */ .m-liste .m-btn--icone.m-btn--sm { width: 38px; min-height: 38px; } .m-liste tbody tr.m-liste-ligne-vide { display: block; padding: 0; } /* Ligne en alerte : le fond va sur la fiche entière, pas sur chaque cellule (bandes séparées). */ .m-liste tbody tr.est-alerte { background: var(--m-alerte-fond); } .m-liste tbody tr.est-alerte:hover { background: #fbecd0; } .m-tableau.m-liste tr.est-alerte td, .m-tableau.m-liste tr.est-alerte:hover td { background: none; } .m-carte-corps--flush .m-tableau.m-liste tr.est-inactif td { color: var(--m-texte-3); } /* Totaux : libellé à gauche, valeur à droite ; une cellule vide (colspan sans effet ici) disparaît. */ .m-liste tfoot { display: block; border-top: 1px solid var(--m-bord); background: var(--m-surface-2); } .m-liste tfoot tr { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 10px 16px; } .m-carte-corps--flush .m-tableau.m-liste tfoot td, .m-carte-corps--flush .m-tableau.m-liste tfoot td:first-child, .m-carte-corps--flush .m-tableau.m-liste tfoot td:last-child { background: none; font-size: 14px; color: var(--m-texte); } .m-carte-corps--flush .m-tableau.m-liste tfoot td:empty { display: none; } } @container m-liste (max-width: 879px) { .m-liste-carte--large .m-liste-tris { display: flex; align-items: center; gap: 6px; padding: 10px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 1px solid var(--m-bord); background: var(--m-surface-2); white-space: nowrap; } .m-liste-carte--large .m-liste-tris-libelle { flex: none; font-size: 12px; font-weight: 600; color: var(--m-texte-3); text-transform: uppercase; letter-spacing: .04em; } .m-liste-carte--large .m-liste-tris a { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--m-bord-fort); border-radius: 999px; background: var(--m-surface); color: var(--m-texte-2) !important; font-size: 12.5px; font-weight: 550; text-decoration: none !important; } .m-liste-carte--large .m-liste-tris a.asc, .m-liste-carte--large .m-liste-tris a.desc { background: var(--m-sapin-600); border-color: var(--m-sapin-700); color: #fff !important; } .m-liste-carte--large .m-liste-barre { padding: 10px 16px; } .m-liste-carte--large .m-liste thead { display: none; } .m-liste-carte--large .m-liste, .m-liste-carte--large .m-liste tbody { display: block; width: 100%; } .m-liste-carte--large .m-liste tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--m-bord); } .m-liste-carte--large .m-liste tbody tr:last-child { border-bottom: 0; } .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste td, .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste td:first-child, .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste td:last-child { display: block; grid-column: 1 / -1; width: auto; padding: 0; border: 0; text-align: left; font-size: 13px; color: var(--m-texte-2); overflow-wrap: anywhere; } .m-liste-carte--large .m-liste td[data-libelle]::before { content: attr(data-libelle) " : "; color: var(--m-texte-3); } .m-liste-carte--large .m-liste td.est-vide { display: none !important; } .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste td.m-liste-titre { grid-column: 1; grid-row: 1; align-self: center; font-size: 15px; color: var(--m-texte); } .m-liste-carte--large .m-liste td.m-liste-titre::before { display: none; } .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste td.m-cellule-actions { grid-column: 2; grid-row: 1; align-self: start; position: relative; background: none; animation: none; box-shadow: none; } .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste td.m-liste-id { order: 90; margin-top: 2px; font-size: 12px; color: var(--m-texte-3); } .m-liste-carte--large .m-liste .m-btn--icone.m-btn--sm { width: 38px; min-height: 38px; } .m-liste-carte--large .m-liste tbody tr.m-liste-ligne-vide { display: block; padding: 0; } .m-liste-carte--large .m-liste tbody tr.est-alerte { background: var(--m-alerte-fond); } .m-liste-carte--large .m-liste tbody tr.est-alerte:hover { background: #fbecd0; } .m-liste-carte--large .m-tableau.m-liste tr.est-alerte td, .m-liste-carte--large .m-tableau.m-liste tr.est-alerte:hover td { background: none; } .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste tr.est-inactif td { color: var(--m-texte-3); } .m-liste-carte--large .m-liste tfoot { display: block; border-top: 1px solid var(--m-bord); background: var(--m-surface-2); } .m-liste-carte--large .m-liste tfoot tr { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 10px 16px; } .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste tfoot td, .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste tfoot td:first-child, .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste tfoot td:last-child { background: none; font-size: 14px; color: var(--m-texte); } .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste tfoot td:empty { display: none; } } /* Tableau large à l'étroit (fenêtre de 1280 px, carte de 958 px) : colonnes resserrées plutôt qu'un tableau qui défile. */ @container m-liste (min-width: 880px) and (max-width: 1040px) { .m-liste-carte--large .m-tableau.m-liste th, .m-liste-carte--large .m-tableau.m-liste td { padding-left: 8px; padding-right: 8px; } .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste th:first-child, .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste td:first-child { padding-left: 14px; } .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste th:last-child, .m-liste-carte--large .m-carte-corps--flush .m-tableau.m-liste td:last-child { padding-right: 14px; } } /* ---------- Formulaires (form_ouvrir, form_groupe, champs, form_actions) ---------- */ .m-formulaire { margin: 0; min-width: 0; max-width: 920px; } .m-formulaire--etroit { max-width: 600px; } .m-formulaire--large { max-width: none; } /* Grille de champs : le nombre de colonnes demandé, moins si la place manque, jamais plus. Le minimum de chaque colonne vaut sa part de la largeur (gouttières de 16 px déduites, et un peu plus pour les arrondis) : c'est lui qui plafonne auto-fit, sinon la grille crée autant de colonnes que la place en permet. */ .m-champs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 16px; } .m-champs--2 { grid-template-columns: repeat(auto-fit, minmax(min(max(260px, calc(50% - 9px)), 100%), 1fr)); } .m-champs--3 { grid-template-columns: repeat(auto-fit, minmax(min(max(180px, calc(33.33% - 11px)), 100%), 1fr)); } .m-champs > .m-champ { margin: 0; min-width: 0; } .m-champs > .m-champ--large, .m-champs > .m-champ--textarea { grid-column: 1 / -1; } .m-champ.required > label::after { content: " *"; color: var(--m-danger); } .m-champ-aide { display: block; margin-top: 4px; font-size: 12.5px; color: var(--m-texte-3); } .m-champ-erreur { margin-top: 4px; font-size: 13px; font-weight: 550; color: var(--m-danger); } .m-champ-erreur ul { margin: 0; padding-left: 18px; } .m-corps .m-champ.est-erreur input:not([type="checkbox"]):not([type="radio"]), .m-corps .m-champ.est-erreur select, .m-corps .m-champ.est-erreur textarea, .m-corps .m-champ.est-erreur .chosen-container .chosen-single, .m-corps .m-champ.est-erreur .chosen-container .chosen-choices { border-color: var(--m-danger); background: var(--m-danger-fond); } /* Chosen cache la liste et dessine la sienne : seule cette partie visible passe en rouge, pas sa recherche. */ .m-corps .m-champ.est-erreur .chosen-container .chosen-search input[type="text"] { border-color: var(--m-bord-fort); background: var(--m-surface); } .m-corps .m-champ.est-erreur .chosen-container .chosen-choices input[type="text"] { background: transparent; } .m-formulaire textarea { min-height: 96px; resize: vertical; } .m-formulaire input[type="file"] { width: 100%; max-width: 100%; font-size: 13px; } .m-formulaire select[multiple] { min-height: 140px; } /* Cases et boutons radio : la case est dans le libellé, le tout se touche facilement. */ .m-corps form .m-case > label { display: flex; align-items: center; gap: 9px; min-height: 34px; margin: 0; color: var(--m-texte); font-size: 14px; font-weight: 450; cursor: pointer; } .m-case input[type="checkbox"], .m-case input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--m-sapin-600); } .m-case input.m-bascule-case { width: 38px; height: 22px; } /* Date et heure : les listes de Cake sur une ligne, qui passe à la ligne si besoin. */ .m-champ-date { display: flex; flex-wrap: wrap; gap: 6px; } .m-corps .m-champ-date select { flex: 1 1 72px; width: auto; min-width: 0; } .m-corps .m-champ-date select[name$="[month]"] { flex: 2 1 110px; } .m-corps .m-champ-date select[name$="[year]"] { flex: 1 1 86px; } /* Listes Chosen : couleurs et hauteur dans moderne-ancien.css (.m-corps .chosen-*). Ici : la largeur suit la colonne (Chosen fige une largeur en pixels, nulle dans un filtre replié), et flèche et croix sont dessinées, car chosen-sprite.png n'existe pas sur le site. */ .m-formulaire .chosen-container, .m-filtre-form .chosen-container { display: block; width: 100% !important; max-width: 100%; } .m-formulaire .chosen-container .chosen-drop, .m-filtre-form .chosen-container .chosen-drop { z-index: 45; } .m-formulaire .chosen-container-single .chosen-single div b, .m-filtre-form .chosen-container-single .chosen-single div b { position: relative; background: none !important; } .m-formulaire .chosen-container-single .chosen-single div b::before, .m-filtre-form .chosen-container-single .chosen-single div b::before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -6px 0 0 -6px; border-right: 1.5px solid var(--m-texte-2); border-bottom: 1.5px solid var(--m-texte-2); transform: rotate(45deg); } .m-formulaire .chosen-container-single .chosen-search input[type="text"], .m-filtre-form .chosen-container-single .chosen-search input[type="text"] { background: var(--m-surface) !important; } .m-formulaire .chosen-container-multi .chosen-choices li.search-choice, .m-filtre-form .chosen-container-multi .chosen-choices li.search-choice { padding-right: 26px; } .m-formulaire .chosen-container-multi .chosen-choices li.search-choice .search-choice-close, .m-filtre-form .chosen-container-multi .chosen-choices li.search-choice .search-choice-close { top: 50%; right: 4px; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: none !important; color: var(--m-sapin-800) !important; font-size: 0; text-align: center; text-decoration: none !important; } .m-formulaire .chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before, .m-filtre-form .chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before { content: "×"; display: block; font-size: 16px; line-height: 18px; } /* Barre d'actions : reste atteignable pendant la saisie d'un long formulaire, au-dessus du bouton flottant « Une remarque ? » (62 px), qui masquerait sinon le bouton d'envoi. */ .m-form-actions { position: sticky; bottom: 62px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; padding: 12px 18px; background: var(--m-surface); border: 1px solid var(--m-bord); border-radius: var(--m-rayon); box-shadow: var(--m-ombre); } /* Grande fenêtre : le formulaire s'arrête avant le bouton flottant, la barre peut descendre. */ @media (min-width: 1400px) { .m-formulaire:not(.m-formulaire--large) .m-form-actions { bottom: 12px; } } /* Téléphone : 16 px sinon iOS zoome à chaque champ ; champs et boutons hauts pour le doigt. */ @media (max-width: 480px) { .m-corps .m-formulaire input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .m-corps .m-formulaire select, .m-corps .m-formulaire textarea, .m-corps .m-filtre-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .m-corps .m-filtre-form select, .m-corps .m-filtre-form textarea { min-height: 44px; font-size: 16px; } .m-corps .m-formulaire .chosen-container, .m-corps .m-filtre-form .chosen-container { font-size: 16px; } .m-corps .m-formulaire .chosen-container-single .chosen-single, .m-corps .m-filtre-form .chosen-container-single .chosen-single { height: 44px; line-height: 42px; } .m-corps .m-formulaire .chosen-container-multi .chosen-choices, .m-corps .m-filtre-form .chosen-container-multi .chosen-choices { min-height: 44px; } .m-corps form .m-case > label { min-height: 44px; font-size: 16px; } .m-form-actions { padding: 10px 12px; } .m-form-actions .m-btn { flex: 1 1 auto; min-height: 44px; } .m-form-actions .m-btn--primaire { flex: 2 1 auto; font-size: 15px; } .m-filtre-boutons .m-btn { min-height: 44px; } } /* ---------- Interrupteur (élément bascule) ---------- */ .m-bascule { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; } .m-bascule input, input.m-bascule-case { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 38px; height: 22px; margin: 0; border-radius: 999px; background: var(--m-bord-fort); cursor: pointer; transition: background-color .15s ease; } .m-bascule input::before, input.m-bascule-case::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 24, .3); transition: transform .15s ease; } .m-bascule input:checked, input.m-bascule-case:checked { background: var(--m-sapin-600); } .m-bascule input:checked::before, input.m-bascule-case:checked::before { transform: translateX(16px); } .m-bascule input:focus-visible, input.m-bascule-case:focus-visible { outline: none; box-shadow: var(--m-anneau); } .m-bascule label { margin: 0; font-size: 13.5px; color: var(--m-texte); cursor: pointer; } /* ---------- Fiche (fiche_proprietes, fiche_liee) ---------- */ .m-proprietes--2 { grid-template-columns: repeat(2, minmax(110px, max-content) minmax(0, 1fr)); } @media (max-width: 720px) { .m-proprietes--2 { grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); } } .m-fiche-liee > summary::after { margin-left: 4px; } .m-fiche-liee .m-fiche-liee-titre { margin-right: auto; } /* ===================================================================== * Alignement du 31/10 : composants recréés par plusieurs écrans, remontés ici. * ===================================================================== */ /* Garde les libellés masqués (position absolue) dans la zone qui défile : sinon ils élargissent toute la page. */ .m-corps .m-tableau-defile { position: relative; } /* ---------- Colonne d'actions figée ---------- *
hors .m-liste (qui fige déjà la sienne) : si le tableau déborde de * son cadre, Éditer et Supprimer restent au bord droit, sur fond opaque, et les colonnes passent dessous. * position: sticky remplace le position: relative du socle et contient toujours les libellés masqués. * Un écran qui passe ses lignes en fiches annule position, background, box-shadow et animation. */ .m-actions-figees th.m-cellule-actions, .m-actions-figees td.m-cellule-actions { position: sticky; right: 0; z-index: 1; background: var(--m-surface); } .m-actions-figees th.m-cellule-actions { z-index: 2; background: var(--m-surface-2); } .m-actions-figees tbody tr:hover > td.m-cellule-actions { background: var(--m-sapin-50); } .m-actions-figees tfoot td.m-cellule-actions { background: var(--m-surface-2); } /* Au clavier, un lien qui reçoit le focus est amené à gauche de la colonne, pas dessous. */ .m-tableau-defile:has(> .m-actions-figees) { scroll-padding-right: 96px; } /* Ombre seulement s'il reste du contenu caché sous la colonne : animation pilotée par le défilement du cadre, inactive quand rien ne défile. Sans cette prise en charge, un simple filet sépare toujours la colonne. */ @supports (animation-timeline: scroll()) { .m-actions-figees th.m-cellule-actions, .m-actions-figees td.m-cellule-actions, .m-liste th.m-cellule-actions, .m-liste td.m-cellule-actions { animation: m-ombre-actions linear both; animation-timeline: scroll(nearest inline); } } @supports not (animation-timeline: scroll()) { .m-actions-figees th.m-cellule-actions, .m-actions-figees td.m-cellule-actions { box-shadow: inset 1px 0 0 var(--m-bord); } } @keyframes m-ombre-actions { 0%, 96% { box-shadow: inset 1px 0 0 var(--m-bord), -10px 0 12px -10px rgba(16, 32, 24, .35); } 100% { box-shadow: inset 1px 0 0 var(--m-bord); } } /* ---------- Formulaires : libellé hors