/* * socle-dense.css — v3.28.0 §D · Affichage dense, lisible et sans débordement. * — v3.29.0 §A · Hotfix : les cellules ne s'empilent plus, la densité s'applique. * * POURQUOI UN FICHIER STATIQUE, ET PAS UN THÈME FILAMENT. * Les deux installations tournent sur du cPanel mutualisé : ni Node, ni Vite, ni chaîne de * compilation. Un thème Filament devrait être construit sur le serveur — impossible. Ce fichier est * donc livré tel quel dans `public/`, injecté par un render hook du panneau (voir * App\Filament\Support\TablesDenses et AdminPanelProvider), et l'archive de mise à jour ne * transporte qu'un `.css`. Retirer le render hook et ce fichier suffit à revenir en arrière. * * CE QUE LE GÉRANT DEMANDAIT, DANS L'ORDRE : * 1. voir le maximum d'infos sans glisser à droite ; * 2. le maximum de lignes en une page ; * 3. une écriture plus petite ; * 4. moins d'espace entre le menu de gauche et le tableau ; * 5. les libellés de colonnes figés en haut ; * 6. plus jamais de boutons coupés à droite. * * RÈGLES DE TENUE : additif (aucune règle ne masque un contenu), jamais d'`overflow: hidden` sur * une barre d'actions, et le mode sombre traité partout où une couleur est posée — Filament pose * la classe `.dark` sur ``, une entête figée qui ne connaîtrait que le thème clair ferait * une bande blanche sur fond noir. * * Les sélecteurs sont ceux des vues de Filament v5 (`fi-ta-*`, `fi-in-*`, `fi-header-*`, `fi-ac`), * relevés dans les vues de Filament, sous `vendor/filament` : une classe inventée serait une * règle morte. * * ⚠️ v4.4.1 §1 — AUCUNE SÉQUENCE « étoile puis barre oblique » DANS UN COMMENTAIRE DE CE FICHIER * AVANT SA VRAIE FIN. Ce commentaire-ci portait le glob `vendor/filament/<étoile>/resources/views` : * la séquence de ce glob FERMAIT le commentaire trois lignes trop tôt, le reste de la ligne * devenait un jeton invalide, et le parseur CSS jetait tout jusqu'à la première accolade fermante * — c'est-à-dire le bloc `:root` ci-dessous en entier. `--socle-dense-gouttiere` n'existait donc * pas, `padding-inline: var(--socle-dense-gouttiere)` était invalide au calcul, et le contenu de * TOUTES les pages de l'admin collait au menu de gauche et au bord droit. Le défaut datait de la * v3.28.0 (commit 541e1f6) et a vécu jusqu'à la v4.4.0. Un test le garde désormais * (tests/Feature/Ui/FeuilleDenseTest.php). */ :root { /* Les repères du lot, en un endroit : les ajuster ne demande pas de relire la feuille. */ --socle-dense-texte: 0.8125rem; /* 13 px — lisible, nettement plus compact que 14 px */ --socle-dense-cellule-y: 0.375rem; --socle-dense-cellule-x: 0.625rem; --socle-dense-gouttiere: 1rem; --socle-dense-entete-fond: #ffffff; --socle-dense-entete-bordure: rgba(0, 0, 0, 0.08); } .dark { --socle-dense-entete-fond: rgb(24 24 27); /* le fond des panneaux Filament en sombre */ --socle-dense-entete-bordure: rgba(255, 255, 255, 0.1); } /* --- 1 & 3. Des tables denses : police plus petite, cellules moins hautes ------------------- */ /* * v3.29.0 §A2 — LA DENSITÉ DOIT VRAIMENT S'APPLIQUER. Mesuré en prod : la v3.28.0 ciblait la * table et la cellule (`.fi-ta-cell`), mais Filament peint la police sur l'ÉLÉMENT DE TEXTE * (`.fi-ta-text-item.fi-size-sm` → 14 px, interligne FIXE de 1,5 rem) et le padding sur le * CONTENEUR DE COLONNE (`.fi-ta-text:not(.fi-inline)` et `.fi-ta-icon:not(.fi-inline)` → 12 px / * 16 px). La cellule, elle, est à `p-0` : nos règles gagnaient… sur un élément qui ne peint rien. * On cible donc l'élément peint, avec une spécificité qui l'emporte sur la feuille de Filament. */ .fi-ta-table { font-size: var(--socle-dense-texte); } .fi-ta-table .fi-ta-cell, .fi-ta-table .fi-ta-header-cell { padding: var(--socle-dense-cellule-y) var(--socle-dense-cellule-x); } .fi-ta-table .fi-ta-cell .fi-ta-text, .fi-ta-table .fi-ta-cell .fi-ta-text .fi-ta-text-item, .fi-ta-table .fi-ta-cell .fi-ta-placeholder, .fi-ta-table thead .fi-ta-header-cell { font-size: var(--socle-dense-texte); line-height: 1.3; } /* Le padding peint : le conteneur de colonne, pas la cellule. C'est LUI qui faisait 16 px de haut et de bas — le plancher de hauteur des lignes, colonnes d'icônes (favori/vu) et date comprises. */ .fi-ta-table .fi-ta-cell .fi-ta-text:not(.fi-inline), .fi-ta-table .fi-ta-cell .fi-ta-icon:not(.fi-inline), .fi-ta-table .fi-ta-cell .fi-ta-color:not(.fi-inline), .fi-ta-table .fi-ta-cell .fi-ta-image:not(.fi-inline) { padding: var(--socle-dense-cellule-y) var(--socle-dense-cellule-x); } /* Les cellules d'actions et de sélection portent, elles, leur propre padding vertical. */ .fi-ta-table .fi-ta-cell:has(.fi-ta-actions), .fi-ta-table .fi-ta-cell.fi-ta-selection-cell { padding-top: var(--socle-dense-cellule-y); padding-bottom: var(--socle-dense-cellule-y); } /* La description sous une valeur (« vu », « dans 12 jours ») : présente, jamais encombrante. */ .fi-ta-table .fi-ta-text-description { font-size: 0.6875rem; } /* --- 2. Zéro débordement horizontal --------------------------------------------------------- */ /* * Le conteneur de la table peut défiler s'il le faut — mais il ne coupe rien. La différence est * capitale : `overflow: hidden` amputerait la dernière colonne et le menu d'actions, ce qui est * exactement le reproche fait à l'écran d'avant. */ .fi-ta-ctn { overflow-x: auto; } /* * v3.29.0 §A1 — UNE LIGNE PAR CELLULE, tronquée net. La règle d'avant (`overflow-wrap: anywhere`) * a produit l'inverse de « dense » : elle autorisait la colonne Acheteur à s'effondrer à ~86 px, * et un nom d'organisme long s'empilait alors sur ~10 lignes — une ligne d'AO de 215 px, quatre * AO par écran. Plus AUCUNE cellule ne s'empile : le texte tient sur une ligne, coupé par une * ellipse, et le texte complet reste lisible au survol (tooltip posé par les colonnes). */ .fi-ta-table .fi-ta-cell .fi-ta-text-item { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; } /* --- 4. Moins d'espace entre le menu de gauche et le tableau -------------------------------- */ .fi-main { padding-inline: var(--socle-dense-gouttiere); max-width: 100%; } /* --- 5. Les libellés de colonnes restent visibles au défilement ----------------------------- */ .fi-ta-table thead { position: sticky; top: 0; z-index: 10; } .fi-ta-table thead .fi-ta-header-cell, .fi-ta-table thead .fi-ta-empty-header-cell, .fi-ta-table thead .fi-ta-actions-header-cell, .fi-ta-table thead .fi-ta-selection-cell { position: sticky; top: 0; z-index: 10; /* Fond OPAQUE, dans les deux thèmes : sans lui, les lignes défileraient en transparence derrière les libellés et l'entête deviendrait illisible. */ background-color: var(--socle-dense-entete-fond); box-shadow: inset 0 -1px 0 var(--socle-dense-entete-bordure); } /* --- 6. Des boutons entiers : ils passent à la ligne, ils ne sont jamais coupés -------------- */ .fi-ac, .fi-header-actions-ctn, .fi-ta-header-toolbar { flex-wrap: wrap; row-gap: 0.5rem; } /* Une barre d'actions de fiche ne se laisse pas rogner par son conteneur. */ .fi-header, .fi-header-actions-ctn, .fi-ta-header, .fi-ta-header-toolbar { overflow: visible; } /* * v4.4.1 §5 — L'EN-TÊTE D'UNE FICHE À HUIT ACTIONS. Mesuré dans le navigateur sur une fiche * marché, à 1 728 px : `.fi-header` est un `flex` en ligne, `nowrap` ; son premier enfant — fil * d'Ariane et titre — est en `flex: 0 1 auto` et se laisse écraser jusqu'à 115 px, tandis que la * barre d'actions, en `flex: 0 0 auto`, occupe 1 314 px et sort de la fenêtre. Son `.fi-ac` a beau * être `flex-wrap: wrap`, son CONTENEUR ne peut pas rétrécir : rien n'y passe jamais à la ligne. * C'est la disposition par défaut de Filament, pensée pour un titre court et deux actions. * * Trois règles, et le titre reprend sa place : l'en-tête s'autorise à passer à la ligne, le bloc * du titre a le droit de grandir et un plancher de largeur (jamais plus que la place disponible), * et la barre d'actions accepte enfin de rétrécir. Les actions se rangent donc à droite du titre * quand elles tiennent, et passent SOUS le titre, repliées, quand elles ne tiennent pas. Aucune * action n'est retirée ni repliée dans un menu : elles sont toutes visibles, c'est le but. * * Le bloc du titre n'a pas de classe dans la vue de Filament (`components/header/index.blade.php`) * : c'est le premier enfant de l'en-tête, et il n'y en a que deux. */ .fi-header { flex-wrap: wrap; align-items: flex-start; row-gap: 0.75rem; } .fi-header > div:first-child { flex: 1 1 auto; min-width: min(28rem, 100%); } .fi-header-actions-ctn { flex: 0 1 auto; min-width: 0; max-width: 100%; } /* --- 7. Les fiches détail suivent la même mesure -------------------------------------------- */ .fi-in-entry-label, .fi-in-text { font-size: var(--socle-dense-texte); } /* Les tableaux HTML que les sections IA rendent elles-mêmes (dossier, exigences, vigilance) : ils défilent dans leur propre cadre plutôt que d'élargir la page. */ .fi-in-text table { font-size: var(--socle-dense-texte); } .fi-in-text { overflow-x: auto; } /* --- 8. v3.29.0 §B — Le texte intégral du dossier : lisible en entier, jamais un mur ---------- */ /* * La section « Texte intégral du dossier (portail / OCR) » rend le texte brut rangé dans les * notes (bloc source, avis océrisé, CPS). Elle est repliée par défaut côté PHP ; même dépliée, * elle ne doit pas faire une fiche de 9 000 px : son corps est borné et défile dans son cadre. * Mesuré en prod (v3.28.0) : ce bloc atteignait 4 709 px à lui seul. */ .socle-texte-integral .fi-section-content-ctn { max-height: 60vh; overflow-y: auto; } /* --- 9. v3.30.0 §E — Mobile : des cartes empilées COMPACTES ---------------------------------- */ /* * En dessous de `md`, la table se rend en cartes empilées et une carte de veille faisait 637 px : * un AO par écran. Les colonnes secondaires ne se rendent plus du tout en empilé * (`visibleFrom('md')` posé côté PHP) ; ici, on resserre ce qui reste — l'objectif est ≤ 180 px * par carte, quatre à cinq AO par écran. Additif : rien n'est masqué, tout est resserré. */ @media (max-width: 767px) { .fi-ta-table .fi-ta-cell .fi-ta-text:not(.fi-inline), .fi-ta-table .fi-ta-cell .fi-ta-icon:not(.fi-inline), .fi-ta-table .fi-ta-cell .fi-ta-color:not(.fi-inline), .fi-ta-table .fi-ta-cell .fi-ta-image:not(.fi-inline) { padding-top: 0.15rem; padding-bottom: 0.15rem; } .fi-ta-table .fi-ta-record { padding-block: 0.35rem; } /* Une cellule empilée ne déborde jamais de l'écran : coupée net, le reste au survol/fiche. */ .fi-ta-table .fi-ta-cell .fi-ta-text-item { max-width: 100%; } } /* --- 10. v3.32.0 §A — La fiche AO refaite (classes `fao-*`) --------------------------------- */ /* * Le HTML de la fiche est produit par App\Support\FicheAoHtml (le même que la vue imprimable) ; * ces règles l'habillent DANS le panneau, en clair comme en sombre — Filament pose `.dark` sur * ``, chaque couleur posée ici a donc sa contrepartie sombre. La typo reste celle du thème. */ :root { --fao-muted: #6b7280; --fao-line: rgba(0, 0, 0, 0.08); --fao-accent: #b45309; --fao-accent-soft: #fdf3e3; --fao-accent-ink: #8a3f06; --fao-ok: #15803d; --fao-ok-soft: #e9f6ec; --fao-chip: #eef1f4; --fao-chip-ink: #3d4650; } .dark { --fao-muted: #9ca3af; --fao-line: rgba(255, 255, 255, 0.10); --fao-accent: #f0a63a; --fao-accent-soft: #2a2113; --fao-accent-ink: #f5bc66; --fao-ok: #4ade80; --fao-ok-soft: #12291a; --fao-chip: #222a33; --fao-chip-ink: #c3cad2; } /* En-tête : qui, quoi, quand. */ .fao-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; } .fao-ref { font-family: ui-monospace, Menlo, monospace; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; } .fao-sep, .fao-acheteur { color: var(--fao-muted); font-size: 0.82rem; font-weight: 500; } .fao-badge { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--fao-chip); color: var(--fao-chip-ink); white-space: nowrap; } .fao-badge--ok { background: var(--fao-ok-soft); color: var(--fao-ok); } .fao-badge--warn { background: var(--fao-accent-soft); color: var(--fao-accent-ink); } .fao-objet { font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin: 0 0 0.7rem; max-width: 46em; } .fao-l2 { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; } .fao-fams { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; flex: 1 1 16rem; } .fao-fam { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--fao-chip); color: var(--fao-chip-ink); } .fao-fam--p1 { background: var(--fao-accent-soft); color: var(--fao-accent-ink); } .fao-part { font-family: ui-monospace, Menlo, monospace; color: inherit; opacity: 0.8; } /* v3.37.0 §D3 — Le métier d'un marché montré sous sa nature : présent, jamais concurrent. */ .fao-fam--metier { background: transparent; color: var(--fao-muted); font-weight: 500; box-shadow: inset 0 0 0 1px var(--fao-line); } .fao-compte { margin-left: auto; text-align: right; } .fao-quand { font-family: ui-monospace, Menlo, monospace; font-weight: 600; font-size: 0.95rem; } .fao-dans { display: inline-block; font-size: 0.75rem; color: var(--fao-accent-ink); background: var(--fao-accent-soft); border-radius: 0.4rem; padding: 0.1rem 0.5rem; font-weight: 600; margin-top: 0.2rem; } .fao-echeances { font-size: 0.7rem; color: var(--fao-muted); margin-top: 0.25rem; } /* La grille des 12 champs clés : 4 colonnes desktop, 2 en mobile. */ /* Pas d'`overflow: hidden` (règle de tenue de cette feuille) : le rayon du cadre reste doux sans jamais risquer de rogner un contenu. */ .fao-grille { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--fao-line); border-radius: 0.5rem; margin-top: 0.9rem; } .fao-champ { padding: 0.6rem 0.8rem 0.55rem; border-right: 1px solid var(--fao-line); border-bottom: 1px solid var(--fao-line); } .fao-champ:nth-child(4n) { border-right: 0; } .fao-champ:nth-last-child(-n+4) { border-bottom: 0; } .fao-champ-l { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fao-muted); margin-bottom: 0.15rem; } .fao-champ-v { font-size: 0.83rem; font-weight: 600; } .fao-mono { font-family: ui-monospace, Menlo, monospace; font-weight: 500; } .fao-vide { color: var(--fao-muted); font-weight: 500; } .fao-ecart { display: inline-block; font-size: 0.62rem; font-weight: 700; color: var(--fao-accent-ink); background: var(--fao-accent-soft); border-radius: 999px; padding: 0 0.4rem; margin-left: 0.3rem; cursor: help; } /* Le travail à faire. */ .fao-resume { font-size: 0.88rem; max-width: 64em; margin: 0; border-left: 3px solid var(--fao-accent); padding-left: 0.85rem; } /* Bordereau & tableaux : le cadre défile, jamais la page. */ .fao-tbl-wrap { overflow-x: auto; } .fao-tbl { border-collapse: collapse; width: 100%; font-size: 0.82rem; } .fao-tbl th { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fao-muted); text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--fao-line); } .fao-tbl td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--fao-line); vertical-align: top; } .fao-tbl tr:last-child td { border-bottom: 0; } .fao-n { width: 2.1rem; color: var(--fao-muted); font-family: ui-monospace, Menlo, monospace; } .fao-u { width: 4.4rem; font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; } .fao-mt { text-align: right; font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; width: 8rem; } .fao-fmini { font-size: 0.66rem; color: var(--fao-muted); margin-top: 1px; } .fao-tbl-note, .fao-res-note { font-size: 0.72rem; color: var(--fao-muted); margin: 0.5rem 0 0; } /* Le bordereau que personne n'a su découper (v3.33.0 §A2) : rendu TEL QUEL — sa mise en page tient dans les espaces, la reflow la détruirait. Il défile dans son cadre, jamais la page. Pas d'`overflow-wrap` ici : la règle de la v3.29.0 §A1 tient pour toute la feuille — une ligne trop longue défile, elle ne se casse pas au milieu d'un mot. */ .fao-brut { font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; line-height: 1.5; white-space: pre-wrap; overflow-x: auto; max-height: 28rem; overflow-y: auto; margin: 0; padding: 0.6rem 0.7rem; border: 1px solid var(--fao-line); border-radius: 0.5rem; } /* Exigences & conditions : deux colonnes, une seule en mobile. */ .fao-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } .fao-h { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fao-muted); margin: 0 0 0.5rem; } .fao-item { display: flex; gap: 0.6rem; padding: 0.3rem 0; font-size: 0.83rem; border-bottom: 1px solid var(--fao-line); } .fao-item:last-child { border-bottom: 0; } .fao-il { flex: 0 0 46%; color: var(--fao-muted); font-size: 0.76rem; padding-top: 1px; } .fao-iv { font-weight: 600; } ul.fao-liste { margin: 0; padding: 0; list-style: none; } ul.fao-liste li { padding: 0.28rem 0 0.28rem 1rem; position: relative; font-size: 0.83rem; border-bottom: 1px solid var(--fao-line); } ul.fao-liste li:last-child { border-bottom: 0; } ul.fao-liste li::before { content: ""; position: absolute; left: 0.1rem; top: 0.72rem; width: 0.3rem; height: 0.3rem; border-radius: 999px; background: var(--fao-accent); } /* Résultat & concurrence. */ .fao-res-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-bottom: 0.8rem; } .fao-res-v { font-size: 0.88rem; font-weight: 700; } .fao-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--fao-chip); color: var(--fao-chip-ink); } .fao-tag--ok { background: var(--fao-ok-soft); color: var(--fao-ok); } .fao-tag--off { background: transparent; border: 1px solid var(--fao-line); color: var(--fao-muted); font-weight: 500; } .fao-gagnant td { font-weight: 700; } .fao-lien { color: inherit; text-decoration: underline; text-decoration-color: var(--fao-line); text-underline-offset: 2px; } .fao-lien:hover { text-decoration-color: currentColor; } /* --- 11. v4.0.0 §D — La typologie sur la fiche (badges, lots, articles, compte rendu) -------- Les couleurs sont celles de la maquette MAQUETTE-VEILLE-V4.html, ramenées aux variables `--fao-*` pour qu'elles suivent le thème clair ET sombre comme le reste de la fiche. */ /* Les badges de l'en-tête : source · type · forme de prix · « N lots ». */ .fao-typo { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--fao-chip); color: var(--fao-chip-ink); white-space: nowrap; } .fao-typo--marche { background: #dbeafe; color: #1e40af; } .fao-typo--bdc { background: #fef3c7; color: #92400e; } .fao-typo--type { background: #ccfbf1; color: #115e59; } .fao-typo--prix { background: var(--fao-chip); color: var(--fao-chip-ink); } .fao-typo--lots { background: #ede9fe; color: #5b21b6; } :root.dark .fao-typo--marche { background: #17263f; color: #93c5fd; } :root.dark .fao-typo--bdc { background: #2a2113; color: #fcd34d; } :root.dark .fao-typo--type { background: #0f2b28; color: #5eead4; } :root.dark .fao-typo--lots { background: #241a3d; color: #c4b5fd; } /* Le bandeau d'annulation : la première chose à savoir, il n'y a plus rien à préparer. */ .fao-annule { margin: 0 0 0.6rem; padding: 0.35rem 0.7rem; border-left: 3px solid #dc2626; background: rgba(220, 38, 38, 0.08); color: #b91c1c; font-size: 0.8rem; font-weight: 600; border-radius: 0 0.35rem 0.35rem 0; } :root.dark .fao-annule { color: #fca5a5; } /* « Sans objet pour ce type » — jamais un vide silencieux (§D2). */ .fao-sans-objet { margin: 0; padding: 0.5rem 0.75rem; border: 1px dashed var(--fao-line); border-radius: 0.5rem; color: var(--fao-muted); font-size: 0.83rem; } /* La raison classée d'un bordereau manquant : c'est ce que le gérant vient chercher. */ .fao-raison { margin: 0 0 0.7rem; padding: 0.4rem 0.7rem; border-left: 3px solid var(--fao-accent); background: var(--fao-accent-soft); color: var(--fao-accent-ink); font-size: 0.82rem; font-weight: 600; border-radius: 0 0.35rem 0.35rem 0; } /* Une pièce que le lecteur n'a pas su exploiter : elle porte sa raison, en orange. */ .fao-piece-ko td { color: var(--fao-accent-ink); } /* Les lots : la table, le sélecteur de décision, et un bordereau par lot. */ .fao-decision { font-size: 0.78rem; padding: 0.15rem 0.4rem; border: 1px solid var(--fao-line); border-radius: 0.4rem; background: transparent; color: inherit; max-width: 9rem; } .fao-lot { margin-top: 0.8rem; border: 1px solid var(--fao-line); border-radius: 0.5rem; padding: 0.5rem 0.7rem; } .fao-lot-t { cursor: pointer; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; color: var(--fao-muted); text-transform: uppercase; } .fao-lot-n { font-weight: 500; text-transform: none; letter-spacing: 0; } .fao-lot[open] .fao-lot-t { margin-bottom: 0.5rem; } /* Les spécifications d'un article de bon de commande : repliées, dépliables. */ .fao-specs { margin-top: 0.2rem; } .fao-specs summary { cursor: pointer; font-size: 0.7rem; color: var(--fao-muted); } .fao-specs div { margin-top: 0.25rem; font-size: 0.78rem; color: var(--fao-muted); white-space: pre-wrap; } @media (max-width: 767px) { .fao-grille { grid-template-columns: 1fr 1fr; } .fao-champ:nth-child(4n) { border-right: 1px solid var(--fao-line); } .fao-champ:nth-child(2n) { border-right: 0; } .fao-champ:nth-last-child(-n+4) { border-bottom: 1px solid var(--fao-line); } .fao-champ:nth-last-child(-n+2) { border-bottom: 0; } .fao-deux { grid-template-columns: 1fr; } .fao-compte { margin-left: 0; text-align: left; } .fao-res-grille { grid-template-columns: 1fr; } }