:root { /* * Thème clair : c'est le défaut, et il le reste tant que l'utilisateur n'a * rien choisi. `prefers-color-scheme` est volontairement ignoré : le thème * est un choix de la personne, pas de son système. Le thème sombre s'active * par l'attribut data-theme="dark" sur , posé par le script en ligne * de base.html.twig avant le premier rendu. */ color-scheme: light; /* Fonds */ --bg-page: #F5F6F7; --bg-surface: #FFFFFF; --bg-inverse: #0A0A0A; /* Texte */ --text-primary: #111827; --text-secondary: #6B7280; --text-inverse: #FFFFFF; --text-muted-inv: #9CA3AF; /* Marque */ --brand: #3B5BDB; --brand-hover: #2F4BC4; --brand-soft: #C7D2FE; /* La marque en aplat et la marque en texte divergent en sombre : un bleu assez sombre pour porter du blanc n'est pas lisible posé sur du sombre. */ --brand-text: var(--brand); --brand-text-hover: var(--brand-hover); /* États */ --success: #16A34A; --warning: #EA580C; /* Traits */ --border: #E5E7EB; --border-strong: #D1D5DB; /* Séparation d'un panneau inverse d'avec ce qui le jouxte : invisible en clair (le panneau noir se détache déjà du blanc), franche en sombre. */ --border-inverse: var(--bg-inverse); /* Plaque sous un QR code : toujours claire, dans les deux thèmes. Un module clair sur fond sombre ne se scanne pas de façon fiable. */ --qr-plate: var(--bg-page); /* Rayons */ --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; /* Espacement : échelle de 4 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --font-sans: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace; } /* * Thème sombre. On ne redéfinit que des jetons : aucun composant ne connaît * le thème. Les traits restent délibérément clairs — toute la séparation du * projet passe par la bordure, une bordure trop discrète aplatirait l'écran. */ :root[data-theme="dark"] { color-scheme: dark; /* Fonds */ --bg-page: #0B0D10; --bg-surface: #171B21; --bg-inverse: #1F242C; /* panneau : plus clair que la page, pas plus noir */ /* Texte */ --text-primary: #F2F4F7; --text-secondary: #AEB6C2; /* 8,2:1 sur --bg-surface */ --text-inverse: #FFFFFF; --text-muted-inv: #C3CAD5; /* 9,5:1 sur --bg-inverse */ /* Marque */ --brand: #3B5BDB; /* inchangé : porte du texte blanc à 5,7:1 */ --brand-hover: #4864E8; --brand-soft: #2C3A75; --brand-text: #93A9FF; /* 8,4:1 sur --bg-page */ --brand-text-hover: #B6C4FF; /* États */ --success: #3DD68C; --warning: #FB923C; /* Traits */ --border: #545C6B; --border-strong: #737C8C; --border-inverse: #545C6B; --qr-plate: #FFFFFF; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { font-family: var(--font-sans); font-size: 14px; color: var(--text-primary); background: var(--bg-page); } /* Messages flash */ [data-flash] { margin: 0; padding: var(--space-3) var(--space-4); background: var(--bg-surface); border-bottom: 1px solid var(--border); color: var(--text-primary); font-size: 13px; text-align: center; } /* Écran de connexion : deux colonnes plein écran */ .auth-screen { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; } .auth-form-col { display: flex; align-items: center; justify-content: center; background: var(--bg-surface); padding: var(--space-8) var(--space-4); } .auth-form-inner { width: 100%; max-width: 400px; } .auth-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-12); } .auth-brand-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 32px; height: 32px; padding: 5px; background: var(--brand); border-radius: var(--radius-sm); flex-shrink: 0; } .auth-brand-mark span { background: var(--text-inverse); border-radius: 2px; } .auth-brand-name { font-weight: 600; color: var(--text-primary); } .auth-form-inner h1 { font-size: 32px; font-weight: 700; margin: 0 0 var(--space-2); } .auth-subtitle { color: var(--text-secondary); font-size: 14px; margin: 0 0 var(--space-8); } .field-group { margin-bottom: var(--space-4); } .field-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--space-2); } .field-input { display: block; width: 100%; height: 44px; padding: 0 14px; font-size: 14px; font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); } .field-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .btn-primary { display: block; width: 100%; height: 44px; margin-top: var(--space-6); background: var(--brand); color: var(--text-inverse); font-size: 14px; font-weight: 600; font-family: var(--font-sans); text-decoration: none; border: none; border-radius: var(--radius); cursor: pointer; } .btn-primary:hover { background: var(--brand-hover); } .btn-primary:disabled { opacity: .5; cursor: not-allowed; } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 var(--space-4); background: var(--bg-surface); color: var(--text-primary); font-size: 14px; font-weight: 600; font-family: var(--font-sans); text-decoration: none; border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; white-space: nowrap; } .btn-secondary:hover { border-color: var(--text-secondary); } .auth-help { color: var(--text-secondary); font-size: 13px; margin: var(--space-6) 0 0; } /* Colonne de présentation */ .auth-panel { display: flex; flex-direction: column; justify-content: center; background: var(--bg-inverse); color: var(--text-inverse); padding: var(--space-8) var(--space-12); /* En sombre, panneau et colonne de formulaire sont deux tons voisins : c'est ce trait qui les sépare. En clair il est de la couleur du panneau, donc invisible. */ border-left: 1px solid var(--border-inverse); } .auth-panel-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted-inv); margin: 0 0 var(--space-6); } .auth-panel h2 { font-size: 32px; font-weight: 700; line-height: 1.3; color: var(--text-inverse); margin: 0 0 var(--space-8); } .auth-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); } .auth-feature-list li { display: flex; align-items: baseline; gap: var(--space-3); } .auth-feature-num { font-family: var(--font-mono); font-size: 13px; color: var(--brand-text); flex-shrink: 0; } .auth-feature-text { font-size: 14px; color: var(--text-muted-inv); } .auth-feature-text code { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted-inv); } @media (max-width: 900px) { .auth-screen { grid-template-columns: 1fr; } .auth-panel { padding: var(--space-8) var(--space-4); border-left: none; border-top: 1px solid var(--border-inverse); } } /* Vitrine publique */ .home-hero { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--bg-inverse); padding: var(--space-8) var(--space-4); } .home-hero-inner { width: 100%; max-width: 560px; } .home-hero-inner h1 { font-size: 32px; font-weight: 700; line-height: 1.3; color: var(--text-inverse); margin: 0 0 var(--space-8); } .home-cta { display: inline-flex; align-items: center; justify-content: center; width: auto; margin-top: var(--space-8); padding: 0 var(--space-6); text-decoration: none; } /* Interstitiel : destination affichée avant la redirection */ .interstitial-destination { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); overflow-wrap: break-word; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); } .interstitial-continue { display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 0 0 var(--space-4); padding: 0 var(--space-6); text-decoration: none; } /* Formulaire de signalement d'abus */ .public-notice-form { text-align: left; } .public-notice-form h1 { text-align: center; } .public-notice-form .public-notice-muted { text-align: center; } .field-textarea { height: auto; padding: var(--space-3) 14px; resize: vertical; } /* Barre de navigation applicative */ .app-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); background: var(--bg-surface); border-bottom: 1px solid var(--border); } .app-nav-brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .app-nav-brand-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 24px; height: 24px; padding: 4px; background: var(--brand); border-radius: var(--radius-sm); flex-shrink: 0; } .app-nav-brand-mark span { background: var(--text-inverse); border-radius: 1px; } .app-nav-brand-name { font-weight: 600; color: var(--text-primary); } .app-nav-org { font-size: 13px; font-weight: 600; color: var(--text-primary); background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 10px; } .app-nav-org-switcher { position: relative; } .app-nav-org-switcher summary { cursor: pointer; list-style: none; } .app-nav-org-switcher summary::-webkit-details-marker { display: none; } .app-nav-org-menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 10; display: flex; flex-direction: column; min-width: 160px; padding: var(--space-1); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); } .app-nav-org-option { width: 100%; padding: var(--space-2) var(--space-3); background: none; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-primary); text-align: left; cursor: pointer; } .app-nav-org-option:hover { background: var(--bg-page); } /* * Menu bordé arrondi avec chevron : la nouvelle apparence du sélecteur * d'organisation. .app-nav-org reste inchangée à côté (admin/_layout s'en * sert telle quelle, en dehors de ce sélecteur). */ .app-nav-org-select { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 600; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; } .app-nav-org-switcher .app-nav-org-select { cursor: pointer; } .app-nav-org-chevron { width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid var(--text-secondary); border-bottom: 1.5px solid var(--text-secondary); transform: rotate(45deg); } .app-nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); } /* L'action principale de la barre : largeur naturelle, pas le plein-largeur d'un formulaire. */ .app-nav-links .btn-primary { display: inline-flex; align-items: center; justify-content: center; width: auto; margin-top: 0; padding: 0 var(--space-4); } .app-nav-logout { padding: 0; background: none; border: none; font: inherit; color: var(--text-secondary); font-size: 14px; text-decoration: none; cursor: pointer; } .app-nav-logout:hover { color: var(--text-primary); } /* Lien de navigation : texte discret, pastille quand c'est la page courante. */ .app-nav-link { padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 14px; text-decoration: none; } .app-nav-link:hover { color: var(--text-primary); } .app-nav-link-current { background: var(--bg-page); color: var(--text-primary); font-weight: 600; } /* Avatar : mêmes mécaniques
que le sélecteur d'organisation. */ .app-nav-avatar-menu { position: relative; } .app-nav-avatar-menu summary { cursor: pointer; list-style: none; } .app-nav-avatar-menu summary::-webkit-details-marker { display: none; } .app-nav-avatar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font-size: 13px; font-weight: 600; } .app-nav-avatar-panel { position: absolute; top: calc(100% + var(--space-1)); right: 0; z-index: 10; display: flex; flex-direction: column; min-width: 160px; padding: var(--space-1); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); } .app-nav-avatar-link, .app-nav-avatar-panel .app-nav-logout { display: block; width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-primary); text-align: left; text-decoration: none; } .app-nav-avatar-link:hover, .app-nav-avatar-panel .app-nav-logout:hover { background: var(--bg-page); color: var(--text-primary); } .app-nav-avatar-panel .app-nav-logout-form { display: contents; } /* * Bascule de thème. * Sans JavaScript le bouton ne ferait rien : il reste donc caché, et seul le * script en ligne de base.html.twig le révèle en posant .theme-js sur . */ .theme-toggle, .theme-toggle-row { display: none; } :root.theme-js .theme-toggle { display: inline-flex; } :root.theme-js .theme-toggle-row { display: flex; justify-content: flex-end; margin-bottom: var(--space-4); } .theme-toggle { align-items: center; height: 32px; padding: 0 var(--space-3); background: var(--bg-surface); color: var(--text-secondary); font-family: var(--font-sans); font-size: 13px; font-weight: 600; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; } .theme-toggle:hover { color: var(--text-primary); border-color: var(--text-secondary); } .theme-toggle:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } /* Posé sur un fond inverse (vitrine publique) : le trait du thème inverse y serait invisible en clair, on prend donc le gris de ce fond-là. */ .theme-toggle-inverse { background: none; color: var(--text-muted-inv); border-color: var(--text-muted-inv); } .theme-toggle-inverse:hover { color: var(--text-inverse); border-color: var(--text-inverse); } /* Le libellé dit l'action, pas l'état : c'est le thème en cours qui décide lequel des deux s'affiche. Aucune écriture de texte par le script. */ .theme-toggle-to-light { display: none; } :root[data-theme="dark"] .theme-toggle-to-dark { display: none; } :root[data-theme="dark"] .theme-toggle-to-light { display: inline; } /* Emplacements hors barre de navigation. */ .auth-brand .theme-toggle { margin-left: auto; } :root.theme-js .public-notice .theme-toggle-row { justify-content: center; margin: var(--space-6) 0 0; } :root.theme-js .home-hero-inner .theme-toggle-row { justify-content: flex-start; margin: var(--space-8) 0 0; } /* Tableau de bord */ .dashboard-page { max-width: 960px; margin: 0 auto; padding: var(--space-8) var(--space-4); } .dashboard-title { font-size: 32px; font-weight: 700; margin: 0 0 var(--space-6); } .dashboard-empty { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; color: var(--text-secondary); font-size: 14px; } .dashboard-empty a { color: var(--brand-text); } .dashboard-empty a:hover { color: var(--brand-text-hover); } /* Contrôle segmenté (7 j / 30 j / 90 j) : décrit dans docs/design-system.md, construit ici pour la première fois. */ .segmented-control { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 2px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius); } .segmented-control-option { padding: 6px 14px; border-radius: calc(var(--radius) - 2px); font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none; } .segmented-control-option:hover { color: var(--text-primary); } .segmented-control-option-active { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary); } .dashboard-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); } .dashboard-stat-card { flex: 1 1 200px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); } .dashboard-stat-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-2); } .dashboard-stat-value { display: block; font-size: 32px; font-weight: 700; color: var(--text-primary); } /* Écart en pourcentage à côté de la valeur : positif en succès, négatif en alerte. */ .dashboard-stat-delta { margin-left: var(--space-2); font-size: 14px; font-weight: 600; } .dashboard-stat-delta-up { color: var(--success); } .dashboard-stat-delta-down { color: var(--warning); } /* Le total après la barre oblique (« 3 / 4 ») : plus petit, discret. */ .dashboard-stat-value-total { margin-left: 2px; font-size: 16px; font-weight: 600; color: var(--text-secondary); } .dashboard-stat-context { display: block; margin-top: var(--space-2); font-size: 13px; color: var(--text-secondary); } /* Repli en 2 colonnes puis en 1 colonne : les cartes indicateurs ne défilent jamais horizontalement, quelle que soit la largeur. */ @media (max-width: 900px) { .dashboard-stat-card { flex-basis: calc(50% - var(--space-4) / 2); } } @media (max-width: 600px) { .dashboard-stat-card { flex-basis: 100%; } } .dashboard-recent-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .dashboard-recent-header a { font-size: 13px; color: var(--brand-text); text-decoration: none; } .dashboard-recent-header a:hover { color: var(--brand-text-hover); } .dashboard-recent-list { list-style: none; margin: 0; padding: 0; } .dashboard-recent-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); } .dashboard-recent-row:last-child { border-bottom: none; } /* Carte graphique « Ouvertures par jour » */ .dashboard-chart-card { margin-bottom: var(--space-6); } .dashboard-chart-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .dashboard-chart-total { font-size: 13px; color: var(--text-secondary); } .dashboard-chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; margin: var(--space-4) 0; list-style: none; padding: 0; } /* flex: 1 plutôt qu'une largeur fixe : sur 90 jours les barres rétrécissent au lieu de déborder. */ .dashboard-chart-bar { flex: 1 1 0; min-height: 2px; background: var(--brand-soft); border-radius: 2px 2px 0 0; } /* Les trois derniers jours en marque pleine : l'œil tombe sur le présent. */ .dashboard-chart-bar-recent { background: var(--brand); } .dashboard-chart-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); } /* Membres */ .members-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); } .members-list { list-style: none; margin: 0; padding: 0; } .member-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); } .member-row:last-child { border-bottom: none; } .member-name { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; font-size: 14px; } .badge { flex-shrink: 0; font-size: 12px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 10px; } .invite-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-6); } .invite-form .field-group { flex: 1 1 240px; margin-bottom: 0; } .invite-form .btn-primary { width: auto; flex-shrink: 0; margin-top: 0; padding: 0 var(--space-6); } /* Page publique : lien inactif (arrivée après scan, donc mobile d'abord) */ .public-notice-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); } .public-notice { width: 100%; max-width: 420px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center; } .public-notice h1 { font-size: 28px; font-weight: 700; margin: 0 0 var(--space-4); color: var(--text-primary); } .public-notice p { margin: 0 0 var(--space-4); font-size: 14px; color: var(--text-primary); } .public-notice p:last-child { margin-bottom: 0; } .public-notice-muted { color: var(--text-secondary); font-size: 13px; } .public-notice a { color: var(--brand-text); } .public-notice a:hover { color: var(--brand-text-hover); } /* Liste des QR codes */ .qr-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); } .qr-page-header .btn-primary { display: inline-flex; align-items: center; justify-content: center; width: auto; margin-top: 0; padding: 0 var(--space-6); } .qr-page-title { font-size: 32px; font-weight: 700; margin: 0; } .qr-page-sub { color: var(--text-secondary); font-size: 14px; margin: var(--space-1) 0 0; } .qr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .qr-filters .field-input { width: auto; } .qr-filters input[type="search"] { flex: 1 1 280px; } .qr-filters select { flex: 0 1 220px; } .qr-filters-count { display: flex; align-items: center; flex-shrink: 0; font-size: 13px; color: var(--text-secondary); white-space: nowrap; } /* La carte est portée par .qr-panel, qui enveloppe filtres ET tableau. */ .qr-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); } .qr-table { overflow: hidden; } .qr-table-head { display: none; } .qr-list { list-style: none; margin: 0; padding: 0; } .qr-row { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border); } .qr-row:last-child { border-bottom: none; } /* Vignette : rendu réel via la route qr_image. */ .qr-thumb { width: 48px; height: 48px; flex-shrink: 0; background: var(--qr-plate); border: 1px solid var(--border); border-radius: var(--radius); object-fit: contain; } .qr-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .qr-title { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; } .qr-title:hover { text-decoration: underline; } .qr-date { font-size: 13px; color: var(--text-secondary); } .qr-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .qr-cell-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); } .qr-link { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); overflow-wrap: break-word; } .qr-destination { font-size: 14px; color: var(--text-secondary); overflow-wrap: break-word; } .qr-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); } .qr-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); } /* En gras dans le tableau : c'est le chiffre qui compte le plus sur cette ligne. */ .qr-scans { font-size: 13px; font-weight: 600; color: var(--text-primary); } .qr-status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--text-primary); } .qr-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); } .qr-status-active .qr-status-dot { background: var(--success); } .qr-status-archived .qr-status-dot { background: var(--warning); } .qr-status-blocked .qr-status-dot { background: var(--text-secondary); } /* Création d'un QR code */ .qr-new-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-6); } .qr-new-col { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; } .qr-new-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); } .qr-new-card .btn-primary { width: auto; padding: 0 var(--space-6); } .qr-card-title { font-size: 16px; font-weight: 600; margin: 0 0 var(--space-2); } .field-hint { color: var(--text-secondary); font-size: 13px; margin: var(--space-1) 0 0; } .field-prefix-group { display: flex; align-items: stretch; height: 44px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .field-prefix { display: flex; align-items: center; padding-left: 14px; font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); white-space: nowrap; } .field-prefix-input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 var(--space-2); font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); background: none; border: none; } .field-prefix-input:focus { outline: none; } .field-prefix-group .field-prefix-btn { flex-shrink: 0; height: auto; border: none; border-left: 1px solid var(--border); border-radius: 0; } .qr-preview-image { display: block; width: 100%; max-width: 220px; height: auto; margin: var(--space-4) 0; background: var(--qr-plate); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); } .qr-preview-url { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); overflow-wrap: break-word; margin-bottom: var(--space-4); } .qr-color-group { margin-bottom: 0; } .qr-color-options { display: flex; flex-wrap: wrap; gap: var(--space-2); } .qr-color-option { display: flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3) 4px 4px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .qr-color-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-strong); } .qr-color-name { font-size: 12px; color: var(--text-primary); } .qr-print-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } @media (max-width: 900px) { .qr-new-grid { grid-template-columns: 1fr; } } /* Au-delà de 700px : la liste devient un tableau à colonnes. */ @media (min-width: 700px) { .qr-table-head, .qr-row { display: grid; /* Resserré depuis que filtres et tableau partagent une carte : son padding retire 48px de largeur utile, et la somme des minimums précédents dépassait ce qui reste — l'état et le bouton sortaient du champ sans que rien ne le signale. */ grid-template-columns: 48px minmax(110px, 1.1fr) minmax(145px, 1fr) minmax(120px, 1.1fr) minmax(70px, .6fr) 64px 78px auto; align-items: center; column-gap: var(--space-3); row-gap: 0; } .qr-table-head { padding: var(--space-3) var(--space-4); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid var(--border); } .qr-row { padding: var(--space-3) var(--space-4); } .qr-cell-label { display: none; } .qr-footer { display: contents; } } /* Modification d'un QR code */ .field-prefix-static { display: flex; align-items: center; flex: 1 1 auto; padding: 0 var(--space-2); font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); } .qr-pending-banner { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; } /* La panne se signale par la même bordure gauche que la revue en attente : deux causes différentes, mais la même urgence pour qui regarde l'écran. */ .qr-health-banner { border-left-color: var(--warning); } .qr-health-flag { font-size: 13px; color: var(--warning); white-space: nowrap; } .qr-history-card { margin-top: var(--space-6); } .qr-history-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .qr-history-row { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); } .qr-history-row:last-child { padding-bottom: 0; border-bottom: none; } .qr-history-url { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); overflow-wrap: break-word; } .qr-history-meta { font-size: 12px; color: var(--text-secondary); } .qr-archive-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .qr-archive-card .btn-secondary { flex-shrink: 0; } @media (max-width: 600px) { .qr-archive-card { flex-direction: column; align-items: stretch; text-align: center; } }