/* ── Design tokens (source unique de la charte) ────────────────────── DOIT rester en tête : les règles @import doivent précéder toute autre règle CSS. tokens.css définit primitives + tokens sémantiques (light) ; le dark mode reste plus bas dans ce fichier (body.dark-theme). */ @import url('tokens.css?v=3'); /* ?v= requis : la règle network-first du SW ne vise que les .css versionnés */ /* ── DM Sans (police de marque Mediboard) ──────────────────────────── Chargée ici (et pas dans chaque ) pour qu'une modif de poids ou d'option ne nécessite pas de toucher 12+ fichiers HTML. Le @import reste compatible avec preconnect car les navigateurs récents font la préco automatiquement sur le domaine Google Fonts. ─────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap'); /* ── Section Photos (onglet Documents) ──────────────────────────────── */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 12px; } .photo-tile { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: all .15s; } .photo-tile:hover { border-color: var(--brand-primary); box-shadow: 0 4px 12px rgba(76, 29, 149, .1); transform: translateY(-1px); } .photo-thumb { position: relative; width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, #ede9fe 0%, var(--brand-primary-light) 100%); cursor: zoom-in; overflow: hidden; display: flex; align-items: center; justify-content: center; } .photo-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; } .photo-tile:hover .photo-thumb img { transform: scale(1.05); } .photo-thumb img:not([src]), .photo-thumb img[src=""] { visibility: hidden; } .photo-thumb::before { content: "📷"; position: absolute; font-size: 28px; opacity: .35; z-index: 0; } .photo-thumb img { position: relative; z-index: 1; } .photo-overlay { position: absolute; inset: auto 0 0 0; padding: 8px 10px; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 100%); color: #fff; font-size: 11px; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.4); z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .photo-meta { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; font-size: 11px; color: var(--text-secondary); gap: 4px; } .photo-meta button { padding: 2px 6px; font-size: 12px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); } .photo-meta button:hover { color: var(--brand-primary); } .photo-meta button.btn-icon-danger:hover { color: #dc2626; } /* Sélecteur de classement de photo (Avant / Après / numéro) */ .photo-label-select { font-size: 11px; padding: 2px 4px; border: 1px solid var(--border, #d1d5db); border-radius: 6px; background: var(--bg-card, #fff); color: var(--text-secondary); cursor: pointer; max-width: 92px; } .photo-label-select:hover { border-color: var(--brand-primary); } /* Badge de libellé affiché en haut à gauche de la vignette */ .photo-label-badge { position: absolute; top: 6px; left: 6px; z-index: 3; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); letter-spacing: .2px; } .photo-label-badge.plabel-before { background: #2563eb; } /* Avant — bleu */ .photo-label-badge.plabel-after { background: #16a34a; } /* Après — vert */ .photo-label-badge.plabel-num { background: var(--brand-primary, #6D28D9); } /* n° */ @media (max-width: 600px) { .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* ── Onglet "Historique importé" (archives) ─────────────────────────── */ .archive-filter { padding: 7px 14px; border: 1.5px solid var(--border); background: #fff; border-radius: 100px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; color: var(--text-primary); } .archive-filter:hover { border-color: var(--c, var(--brand-primary)); } .archive-filter.active { background: var(--c, var(--brand-primary)); color: #fff !important; border-color: var(--c, var(--brand-primary)); } /* ──────────────────────────────────────────────────────────────────────────── Affichage standardisé d'un acte (catégorie + label). Règle métier : un acte n'est jamais affiché seul, toujours "Catégorie / Acte". `actLabelHtml(item)` (api.js) génère ce markup partout dans l'app. ──────────────────────────────────────────────────────────────────────────── */ .act-cat { display: inline-block; font-size: 10px; color: var(--brand-primary); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; margin-right: 8px; padding: 1px 6px; background: var(--brand-primary-light); border-radius: 4px; vertical-align: middle; } .act-cat + .act-name { font-weight: 500; } /* Variante "stack" : catégorie au-dessus du label, comme dans les cartes plan */ .act-stack .act-cat { display: block; margin-right: 0; margin-bottom: 2px; } /* ──────────────────────────────────────────────────────────────────────────── Règle de garde — TOUT élément avec un fond violet plein doit avoir le texte blanc. On couvre 3 vecteurs : 1. Styles inline en hexa : style="background:#4C1D95" 2. Styles inline en var() : style="background:var(--brand-primary)" 3. Classes brand connues : .btn-primary, .btn-add--consult, etc. Évite les régressions visuelles — règle déclarée tôt dans la cascade pour qu'elle reste surchargeable, mais avec !important sur les classes brand pour battre les styles inline qui pourraient redéfinir color. ──────────────────────────────────────────────────────────────────────────── */ [style*="background:#4C1D95"], [style*="background: #4C1D95"], [style*="background:#6D28D9"], [style*="background: #6D28D9"], [style*="background:#5B21B6"], [style*="background:#7C3AED"], [style*="background:#8B5CF6"], [style*="background-color:#4C1D95"], [style*="background:var(--brand-primary)"], [style*="background: var(--brand-primary)"], [style*="background:var(--accent)"], [style*="background: var(--accent)"], [style*="background:var(--lp-violet)"], [style*="background: var(--lp-violet)"] { color: #fff !important; } /* Classes brand qui ont déjà un fond violet → on s'assure que leur texte est blanc. Ces sélecteurs sont redondants avec les règles individuelles plus bas dans le fichier, mais ils garantissent l'invariant en cas de surcharge accidentelle dans un module CSS ou un theme. */ .btn-primary, .btn-add--consult, .btn-add--act, .lp-btn--primary, .lp-toggle.active, .lp-mockup-pill, .lp-mockup-badge:not(.lp-mockup-badge--soft), .lp-mockup-phone-cta, .lp-plan--featured .lp-btn--primary, .lp-plan-ribbon, .aest-q-badge--converted:not(.aest-q-badge--soft), .notif-ack-btn, .booking-form .btn-book, .slot-btn.selected, .doctor-card.selected .doctor-card-btn, .aest-bar-fill { color: #fff !important; } .btn-primary:hover, .btn-add--consult:hover, .lp-btn--primary:hover, .notif-ack-btn:hover, .booking-form .btn-book:hover { color: #fff !important; } /* ── Reset & Base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Force le rendu en light mode pour éviter que les navigateurs en `prefers-color-scheme: dark` n'appliquent leurs styles système (fond noir, scrollbars sombres, etc.) sur des pages qui n'ont pas de fond explicite. Le dark mode applicatif passe par `body.dark-theme`. */ :root, body { color-scheme: light; } html { background: var(--bg-page); } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; color: var(--text-primary); background: var(--bg-page); line-height: 1.5; } /* ── Auth page ────────────────────────────────────────────────────────────── */ .auth-bg { min-height: 100vh; background: var(--bg-auth); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 20px; } .auth-card { background: var(--bg-card); border-radius: 12px; padding: 40px; width: 100%; max-width: 420px; box-shadow: var(--shadow-md); } .auth-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; } .auth-logo span { font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: -.5px; } .auth-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; } .auth-subtitle { color: #64748b; margin-bottom: 28px; font-size: 13px; } .mfa-hint { background: var(--bg-green-light); border: 1px solid var(--accent-light); border-radius: 8px; padding: 12px 14px; color: var(--accent); font-size: 13px; margin-bottom: 20px; } /* ── App layout ───────────────────────────────────────────────────────────── */ .app-bg { min-height: 100vh; background: var(--bg-page); } .navbar { background: var(--navbar-bg, var(--bg-card)); /* Fusion visuelle avec la tab-bar : pas de séparateur, fond uni */ border-bottom: none; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 10; } .navbar-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--accent); letter-spacing: -.5px; } .navbar-logo-img { height: 48px; width: auto; display: block; } @media (max-width: 700px) { .navbar-logo-img { height: 36px; } } .app-layout { display: grid; grid-template-columns: 440px 1fr; gap: 24px; padding: 24px; max-width: 1280px; margin: 0 auto; } @media (max-width: 900px) { .app-layout { grid-template-columns: 1fr; } } /* ── Panels ───────────────────────────────────────────────────────────────── */ .panel { background: var(--bg-card); border-radius: 12px; padding: 28px; border: 1px solid var(--border); align-self: start; } .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .panel-title { font-size: 16px; font-weight: 700; color: var(--text-heading); margin-bottom: 20px; } .panel-header .panel-title { margin-bottom: 0; } .badge { background: var(--bg-green-light); color: var(--accent); border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; } /* ── Forms ────────────────────────────────────────────────────────────────── */ .form-group { border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; } .form-group legend { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); padding: 0 6px; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .row-2 > .field { margin-top: 0; } .field { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; } .field:first-child { margin-top: 0; } label { font-size: 12px; font-weight: 600; color: var(--text-label); } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"], input[type="number"], input[type="search"] { border: 1px solid var(--border-input); border-radius: 7px; padding: 8px 11px; font-size: 14px; font-family: inherit; color: var(--text-primary); background: var(--bg-input); transition: border-color .15s, box-shadow .15s; width: 100%; } input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } input::placeholder { color: var(--text-muted); } .radio-group { display: flex; gap: 16px; padding-top: 4px; } .radio-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; cursor: pointer; color: var(--text-label); } input[type="radio"] { accent-color: var(--accent); } .required { color: #ef4444; } .field-hint { font-size: 11px; color: #94a3b8; } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn-primary { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } .btn-primary:disabled { opacity: .6; cursor: not-allowed; } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s; } .btn-ghost:hover { border-color: var(--text-muted); color: var(--text-label); } .btn-full { width: 100%; margin-top: 20px; } /* ── Messages ─────────────────────────────────────────────────────────────── */ .error-msg { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; border-radius: 7px; padding: 10px 12px; font-size: 13px; margin-top: 12px; } .success-msg { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; border-radius: 7px; padding: 10px 12px; font-size: 13px; margin-top: 12px; } .hidden { display: none !important; } /* ── Patient list ─────────────────────────────────────────────────────────── */ .search-bar { margin-bottom: 16px; } .search-bar input { background: var(--bg-card-alt); } .patient-list { display: flex; flex-direction: column; gap: 8px; } .patient-card { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; transition: border-color .15s, box-shadow .15s; cursor: default; background: var(--bg-card); } .patient-card:hover { border-color: var(--accent-light); box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 8%, transparent); } .patient-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-green-light); color: var(--accent); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .patient-info { flex: 1; min-width: 0; } .patient-name { font-weight: 600; font-size: 14px; color: var(--text-primary); } .patient-meta { color: var(--text-secondary); font-size: 12px; margin-top: 2px; } .patient-contact { color: var(--text-secondary); font-size: 12px; margin-top: 1px; } .patient-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; flex-shrink: 0; } .patient-badge.active { background: #f0fdf4; color: #16a34a; } .patient-badge.inactive { background: #f8fafc; color: #94a3b8; } .loading, .empty-state { text-align: center; padding: 32px; color: var(--text-muted); font-size: 13px; } /* ── Fiche patient ────────────────────────────────────────────────────────── */ /* Aligné à GAUCHE (et non centré) : le contenu démarre juste après la sidebar, sans le grand vide à gauche sur écran large (bug Slack « espace trop grand entre le bandeau et le début des affichages »). */ .fiche-layout { max-width: 1320px; margin: 0; padding: 34px 36px 110px; } .fiche-topbar { margin-bottom: 0; } /* ── Sticky patient identity bar ─────────────────────────────────────────── */ .patient-sticky-bar { position: sticky; top: 93px; z-index: 8; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); } .patient-sticky-top { display: flex; align-items: center; gap: 12px; } .patient-sticky-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-green-light); color: var(--accent); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .patient-sticky-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .patient-sticky-name { font-weight: 700; font-size: 15px; color: var(--text-heading); } .patient-sticky-dob { font-size: 13px; color: var(--text-secondary); } .btn-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13px; font-weight: 500; text-decoration: none; padding: 6px 12px 6px 8px; border-radius: 7px; transition: background .15s, color .15s; } .btn-back:hover { background: var(--bg-hover); color: var(--text-label); } /* ── Mini-hub permanent sur la fiche patient (3 boutons d'accès) ─────── */ .fiche-hub-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .fiche-hub-btn:hover { background: var(--brand-primary-light, rgba(76, 29, 149, 0.06)); color: var(--brand-primary, #4C1D95); border-color: var(--brand-primary, #4C1D95); } .fiche-content { display: flex; flex-direction: column; gap: 16px; } .fiche-header { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 28px; display: flex; align-items: flex-start; gap: 20px; } /* Bandeau Admin : colonne gauche (identité patient + bouton) + colonne droite (notes cliniques) */ .fiche-header--with-notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: stretch; } .fiche-header--with-notes .fiche-header-main { display: flex; align-items: flex-start; gap: 20px; } .fiche-header--with-notes .fiche-header-notes { margin: 0; } /* Post-it unique (zone Notes rapide sur la fiche patient) */ .aest-postit { background: #FFF9C4; color: #3B3B3B; border-radius: 10px; padding: 14px 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); height: 100%; display: flex; flex-direction: column; min-height: 140px; border: 1px solid #F0E68C; } .aest-postit-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; color: inherit; opacity: .85; } .aest-postit-textarea { flex: 1; resize: vertical; border: none; background: transparent; color: inherit; font-family: inherit; font-size: 14px; line-height: 1.5; outline: none; padding: 0; min-height: 100px; width: 100%; } .aest-postit-textarea::placeholder { color: inherit; opacity: .55; } .aest-postit-status { font-size: 11px; margin-top: 6px; min-height: 14px; opacity: .7; } .aest-postit-status.saving { color: #B7791F; } .aest-postit-status.saved { color: #2F855A; } .aest-postit-status.error { color: #C53030; } @media (max-width: 900px) { .fiche-header--with-notes { grid-template-columns: 1fr; } .fiche-header--with-notes .fiche-header-notes { max-height: 260px; } } /* Zone extras sous la 2col admin (Ségur masqué, notes admin, méta) */ .fiche-admin-extras { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .fiche-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--bg-green-light); color: var(--accent); font-weight: 700; font-size: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fiche-name { font-size: 22px; font-weight: 700; color: var(--text-heading); line-height: 1.2; } .fiche-subtitle { color: var(--text-secondary); font-size: 14px; margin-top: 4px; } .fiche-sections { display: flex; flex-direction: column; gap: 12px; } /* ── Layout 2 colonnes administratif (50% | 50%) ─────────────────────────── */ .fiche-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .fiche-admin-left, .fiche-admin-right, .fiche-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } @media (max-width: 900px) { .fiche-2col { grid-template-columns: 1fr; } } /* ── Layout 3 colonnes desktop (25% | 25% | 50%) ─────────────────────────── */ .fiche-3col { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 20px; align-items: start; } .fiche-sidebar { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .fiche-col2 { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .fiche-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .fiche-sidebar .fiche-label { width: 130px; } /* Header vertical dans la sidebar */ .fiche-sidebar .fiche-header { flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; gap: 10px; } .fiche-sidebar .fiche-name { font-size: 16px; word-break: break-word; } .fiche-sidebar .fiche-subtitle { font-size: 12px; } .fiche-sidebar #editBtn { width: 100%; margin-top: 4px; } @media (max-width: 1100px) { .fiche-3col { grid-template-columns: 1fr 1fr; } .fiche-main { grid-column: 1 / -1; } } @media (max-width: 700px) { .fiche-3col { grid-template-columns: 1fr; } .fiche-main { grid-column: auto; } .fiche-sidebar .fiche-label { width: 160px; } } /* ── Activité unifiée (cartes uniformes, couleurs distinctes) ───────────────── */ .activity-card { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 8px; margin-bottom: 6px; border: 1px solid transparent; } .activity-card:last-child { margin-bottom: 0; } /* Consultation : fond bleu très clair, bordure bleue */ .activity-card--consult { background: var(--brand-primary-light); border-color: #a7d9b8; } /* Acte : fond orange très clair, bordure orange */ .activity-card--act { background: #fff7ed; border-color: #fed7aa; } .activity-card__left { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 88px; flex-shrink: 0; } .activity-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; border-radius: 4px; padding: 2px 7px; white-space: nowrap; width: 100%; text-align: center; } .activity-badge--consult { background: var(--brand-primary); color: #fff; } .activity-badge--act { background: #d97706; color: #fff; } .activity-date { font-size: 11px; font-weight: 600; color: #64748b; white-space: nowrap; } .activity-card__body { flex: 1; min-width: 0; } .activity-title { font-size: 13px; font-weight: 600; color: #0f172a; line-height: 1.4; margin-bottom: 3px; } .activity-doctor { font-size: 11px; color: #64748b; margin-bottom: 2px; } .activity-act-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; } .activity-amount { font-size: 12px; font-weight: 700; color: #15803d; white-space: nowrap; } .activity-sub { font-size: 12px; color: #475569; line-height: 1.5; margin-top: 2px; } .activity-sub-label { font-weight: 600; color: #374151; } .activity-sub--notes { font-style: italic; color: #64748b; } /* Boutons d'ajout colorés */ .btn-add--consult { background: var(--brand-primary); color: #fff; border: none; } .btn-add--consult:hover { background: var(--brand-primary-dark); } .btn-add--act { background: #d97706; color: #fff; border: none; } .btn-add--act:hover { background: #b45309; } /* ── Notes cliniques par date ───────────────────────────────────────────────── */ .note-block { border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; margin-bottom: 10px; } .note-block:last-child { margin-bottom: 0; } .note-block-header { display: flex; align-items: center; justify-content: space-between; background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 8px 12px; } .note-block-date { font-size: 13px; font-weight: 700; color: #1e293b; } .note-add-btn { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--brand-primary); background: #fff; color: var(--brand-primary); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .note-add-btn:hover { background: var(--brand-primary); color: #fff; } .note-entry { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; } .note-entry:last-child { border-bottom: none; } .note-entry-textarea { flex: 1; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: #1e293b; line-height: 1.6; resize: vertical; background: #fff; transition: border-color .15s; min-height: 60px; } .note-entry-textarea:focus { outline: none; border-color: #93c5fd; } .note-entry-del { flex-shrink: 0; margin-top: 4px; } /* ── Actes réalisés ────────────────────────────────────────────────────────── */ .act-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; } .act-card:last-child { border-bottom: none; } .act-code { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--brand-primary); background: var(--brand-primary-light); border: 1px solid #a7d9b8; border-radius: 5px; padding: 2px 7px; white-space: nowrap; } .act-official { font-size: 11px; color: #6b7280; font-style: italic; } .act-label { font-size: 13px; color: #1e293b; flex: 1; min-width: 0; line-height: 1.4; } .act-date { font-size: 12px; font-weight: 700; color: #64748b; white-space: nowrap; } .act-meta { font-size: 12px; color: #64748b; margin-top: 3px; } /* ── Combobox CCAM ─────────────────────────────────────────────────────────── */ .ccam-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 200; max-height: 260px; overflow-y: auto; } .ccam-option { padding: 8px 12px; cursor: pointer; transition: background .1s; border-bottom: 1px solid #f8fafc; } .ccam-option:last-child { border-bottom: none; } .ccam-option:hover, .ccam-option.active { background: var(--brand-primary-light); } .ccam-option-code { font-family: monospace; font-size: 11px; font-weight: 700; color: var(--brand-primary); margin-right: 8px; } .ccam-option-label { font-size: 12px; color: #374151; } .ccam-option-spec { font-size: 11px; color: #94a3b8; margin-top: 1px; } .ccam-option-meta { display: block; font-size: 11px; color: #94a3b8; margin-top: 1px; } /* ── CCAM Favoris ─────────────────────────────────────────────────────────── */ .ccam-section-header { padding: 6px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; background: #f8fafc; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; } .ccam-option--fav { background: #fffbeb; } .ccam-option--fav:hover { background: #fef3c7; } .fiche-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; } .fiche-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 14px; } .fiche-grid { display: flex; flex-direction: column; gap: 0; } .fiche-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-light); overflow: hidden; min-width: 0; } .fiche-row:last-child { border-bottom: none; } .fiche-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); width: 160px; flex-shrink: 0; } .fiche-value { font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .fiche-value.empty { color: var(--text-muted); } .fiche-value a { color: var(--accent); text-decoration: none; } .fiche-value a:hover { text-decoration: underline; } .fiche-section-meta { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: #f8fafc; border-color: #e2e8f0; color: #94a3b8; font-size: 12px; } .fiche-id { font-family: monospace; font-size: 11px; } /* Carte cliquable */ .patient-card { cursor: pointer; } .patient-card:hover .patient-name { color: var(--brand-primary); } /* ── Combobox ─────────────────────────────────────────────────────────────── */ .combobox { position: relative; } .combobox-input { border: 1px solid #d1d5db; border-radius: 7px; padding: 8px 11px; font-size: 14px; font-family: inherit; color: #1e293b; background: #fff; transition: border-color .15s, box-shadow .15s; width: 100%; } .combobox-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px #dcf5e7; } .combobox-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.1); z-index: 50; max-height: 200px; overflow-y: auto; } .combobox-option { padding: 9px 12px; font-size: 13px; color: #1e293b; cursor: pointer; transition: background .1s; } .combobox-option:hover { background: var(--brand-primary-light); color: var(--brand-primary); } .combobox-clear { color: #94a3b8; } .combobox-clear:hover { background: #f8fafc; color: #64748b; } /* ── Notes administratives ────────────────────────────────────────────────── */ .fiche-notes { font-size: 14px; color: #374151; line-height: 1.6; white-space: pre-wrap; margin: 0; } /* ── Édition fiche ────────────────────────────────────────────────────────── */ .edit-textarea { border: 1px solid var(--border-input); border-radius: 7px; padding: 8px 11px; font-size: 14px; font-family: inherit; color: var(--text-primary); background: var(--bg-input); width: 100%; resize: vertical; transition: border-color .15s, box-shadow .15s; } .edit-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .edit-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 4px 0 8px; } /* ── select dans les formulaires ──────────────────────────────────────────── */ select, .modal-select { border: 1px solid var(--border-input); border-radius: 7px; padding: 8px 11px; font-size: 14px; font-family: inherit; color: var(--text-primary); background: var(--bg-input); width: 100%; transition: border-color .15s, box-shadow .15s; appearance: auto; } select:focus, .modal-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } /* ── Bannière allergies critiques ─────────────────────────────────────────── */ .allergy-banner { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 10px; padding: 12px 18px; color: #b91c1c; font-size: 13px; } /* ── Section header row (titre + bouton ajouter) ─────────────────────────── */ .section-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .section-header-row .fiche-section-title { margin-bottom: 0; } /* ── Bouton ajouter ───────────────────────────────────────────────────────── */ .btn-add { background: transparent; color: var(--accent); border: 1px solid var(--accent-light); border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; } .btn-add:hover { background: var(--bg-green-light); border-color: #93c5fd; } /* ── Item card (allergies, antécédents, traitements) ──────────────────────── */ .item-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-light); } .item-card:last-child { border-bottom: none; } .item-card.item-inactive { opacity: .6; } .item-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; min-width: 0; } .item-title { font-size: 14px; font-weight: 600; color: var(--text-heading); } .item-sub { font-size: 12px; color: var(--text-secondary); width: 100%; } .item-sub-muted { color: var(--text-muted); font-style: italic; } .item-actions { display: flex; gap: 4px; flex-shrink: 0; } .btn-icon { background: transparent; border: none; cursor: pointer; padding: 4px 7px; border-radius: 6px; font-size: 13px; color: var(--text-secondary); transition: background .1s, color .1s; } .btn-icon:hover { background: var(--bg-hover); color: var(--text-label); } .btn-icon-danger:hover { background: #fef2f2; color: #dc2626; } /* ── Badges de couleur ────────────────────────────────────────────────────── */ .badge-danger { background: #fef2f2; color: #dc2626; } .badge-warning { background: #fffbeb; color: #d97706; } .badge-success { background: #f0fdf4; color: #16a34a; } .badge-neutral { background: #f8fafc; color: #64748b; } .badge-blue { background: var(--brand-primary-light); color: var(--brand-primary); } .badge-purple { background: #f5f3ff; color: #7c3aed; } .badge-pink { background: #fdf2f8; color: #be185d; } .badge-green { background: #f0fdf4; color: #16a34a; } /* ── Antécédents groupés ──────────────────────────────────────────────────── */ .history-group { margin-bottom: 8px; } .history-group:last-child { margin-bottom: 0; } /* ── Checkbox group ───────────────────────────────────────────────────────── */ .checkbox-group { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 4px; } /* ── Timeline consultations ───────────────────────────────────────────────── */ .timeline { position: relative; padding-left: 20px; } .timeline::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: #e2e8f0; } .timeline-item { position: relative; display: flex; gap: 16px; padding-bottom: 20px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-dot { position: absolute; left: -17px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-primary); border: 2px solid #fff; box-shadow: 0 0 0 2px #a7d9b8; flex-shrink: 0; } .timeline-content { flex: 1; min-width: 0; } .timeline-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .timeline-date { font-weight: 700; font-size: 13px; color: #0f172a; white-space: nowrap; } .timeline-doctor { font-size: 12px; color: #64748b; } .timeline-reason { font-size: 14px; color: #1e293b; margin-bottom: 3px; } .timeline-diag { font-size: 13px; color: #374151; margin-bottom: 3px; } .timeline-notes { font-size: 12px; color: #64748b; font-style: italic; } /* ── Modal ────────────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: var(--modal-overlay); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; } .modal-box { background: var(--bg-card); border-radius: 14px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); } /* Modal confortablement plus large (formulaires riches : upload biblio, import catalogue…) — garde le padding du body, contrairement à .modal-wide. */ .modal-box.modal-lg { max-width: 760px; } /* ── Modal large pour l'aperçu WYSIWYG d'ordonnance ───────────────────── Passe à 80% du viewport (consigne utilisateur "quasi tout l'écran") avec un layout 2 colonnes : aperçu PDF live + formulaire de saisie. ─────────────────────────────────────────────────────────────────── */ .modal-box.modal-wide { max-width: 80vw; width: 80vw; max-height: 92vh; } .modal-box.modal-wide .modal-body { padding: 0; } .rx-wysiwyg { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; gap: 0; } .rx-wysiwyg-preview { background: #f8f9fb; padding: 28px 32px; overflow-y: auto; border-right: 1px solid var(--border); font-family: 'EB Garamond', Garamond, 'Times New Roman', serif; color: #000; font-size: 10pt; line-height: 1.45; } .rx-wysiwyg-preview .rxp-paper { background: #fff; padding: 22mm 18mm 22mm 18mm; border: 1px solid #e2e8f0; box-shadow: 0 4px 16px rgba(0,0,0,.06); border-radius: 4px; min-height: 250mm; } .rx-wysiwyg-preview .rxp-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14mm; } .rx-wysiwyg-preview .rxp-doctor { max-width: 90mm; font-size: 9pt; } .rx-wysiwyg-preview .rxp-doctor .name { font-family: Helvetica, Arial, sans-serif; font-size: 11pt; font-weight: 700; margin-bottom: 2mm; } .rx-wysiwyg-preview .rxp-doctor p { margin: 0; font-size: 8.5pt; line-height: 1.4; } .rx-wysiwyg-preview .rxp-patient { min-width: 60mm; max-width: 75mm; margin-top: 22mm; padding: 3mm 4mm; border: 0.5pt solid #888; border-radius: 2px; font-size: 8.5pt; } .rx-wysiwyg-preview .rxp-patient .lbl { font-family: Helvetica, Arial, sans-serif; font-size: 7pt; text-transform: uppercase; letter-spacing: 0.5px; color: #444; } .rx-wysiwyg-preview .rxp-patient .pname { font-weight: 700; font-size: 10pt; margin: 1mm 0; } .rx-wysiwyg-preview .rxp-banner { display: flex; justify-content: space-between; border-top: 0.6pt solid #000; border-bottom: 0.6pt solid #000; padding: 2mm 0; margin-bottom: 6mm; font-family: Helvetica, Arial, sans-serif; } .rx-wysiwyg-preview .rxp-banner .lbl { font-size: 13pt; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .rx-wysiwyg-preview .rxp-banner .meta { font-size: 8.5pt; text-align: right; line-height: 1.4; } .rx-wysiwyg-preview .rxp-med { margin-bottom: 4mm; padding-left: 3mm; border-left: 0.4pt solid #555; } .rx-wysiwyg-preview .rxp-med .name { font-family: Helvetica, Arial, sans-serif; font-size: 10pt; font-weight: 700; margin-bottom: 1mm; } .rx-wysiwyg-preview .rxp-med .detail { font-size: 9pt; margin: 0.5mm 0; } .rx-wysiwyg-preview .rxp-med.placeholder { border-left-color: #ccc; color: #999; font-style: italic; } .rx-wysiwyg-preview .rxp-notes { margin-top: 6mm; padding-top: 2mm; border-top: 0.4pt solid #ccc; font-size: 9pt; color: #444; font-style: italic; } .rx-wysiwyg-preview .rxp-signature { margin-top: 10mm; text-align: right; font-size: 9pt; } .rx-wysiwyg-preview .rxp-signature .line { border-top: 0.4pt solid #888; display: inline-block; min-width: 55mm; padding-top: 1mm; font-family: Helvetica, Arial, sans-serif; font-size: 8pt; color: #555; } .rx-wysiwyg-form { padding: 22px 26px; overflow-y: auto; background: var(--bg-card); } .rx-wysiwyg-form h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin: 16px 0 8px 0; } .rx-wysiwyg-form h4:first-child { margin-top: 0; } .rx-wysiwyg-form .rx-line-item { background: var(--bg-hover, #f8fafc); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 10px; position: relative; } .rx-wysiwyg-form .rx-line-remove { position: absolute; top: 8px; right: 8px; background: transparent; border: 0; font-size: 16px; cursor: pointer; color: #dc2626; opacity: 0.7; } .rx-wysiwyg-form .rx-line-remove:hover { opacity: 1; } @media (max-width: 1100px) { .modal-box.modal-wide { max-width: 96vw; width: 96vw; } .rx-wysiwyg { grid-template-columns: 1fr; } .rx-wysiwyg-preview { display: none; } } /* ═════════════════════════════════════════════════════════════════════════ Devis WYSIWYG (création/édition avec aperçu live) — 02/06/2026 Même principe que l'ordonnance : gauche = aperçu papier, droite = formulaire. ═════════════════════════════════════════════════════════════════════════ */ .q-wysiwyg { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; gap: 0; } .q-wysiwyg-preview { background: #f8f9fb; padding: 28px 32px; overflow-y: auto; border-right: 1px solid var(--border); } .q-wysiwyg-form { padding: 18px 24px; overflow-y: auto; background: var(--bg-card); } .q-form-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; } .q-reset-btn { font-size: 12px; } /* Reproduit la charte du PDF (quote.html + _pdf_base.html) : noir & blanc strict, corps sérif (EB Garamond), titres/labels Helvetica. Seule touche de couleur : le pétale violet du logo. */ .qp-paper { background: #fff; color: #000; font-family: 'EB Garamond', Garamond, 'Times New Roman', serif; font-size: 13px; line-height: 1.45; padding: 30px 30px 40px; border: 1px solid #e2e8f0; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.08); min-height: 230mm; } /* En-tête : cabinet/logo à gauche, patient encadré à droite (décalé bas). */ .qp-doc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 26px; } .qp-cabinet { max-width: 58%; } .qp-logo svg { width: 42px; height: 42px; display: block; margin-bottom: 8px; } .qp-cab-name { font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 4px; } .qp-cab-meta p { margin: 0; font-size: 12px; line-height: 1.4; color: #000; } .qp-patient { min-width: 38%; max-width: 46%; margin-top: 34px; padding: 8px 10px; border: 1px solid #888; border-radius: 3px; font-size: 12px; } .qp-patient .qp-lbl { font-family: Helvetica, Arial, sans-serif; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: #444; margin-bottom: 2px; } .qp-patient .qp-pname { font-weight: 700; font-size: 14px; margin-bottom: 2px; } .qp-patient p { margin: 0; line-height: 1.35; } /* Bannière document */ .qp-banner { display: flex; justify-content: space-between; align-items: baseline; border-top: 1.5px solid #000; border-bottom: 1.5px solid #000; padding: 5px 0; margin-bottom: 14px; } .qp-doc-label { font-family: Helvetica, Arial, sans-serif; font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; } .qp-doc-meta { text-align: right; font-family: Helvetica, Arial, sans-serif; font-size: 11px; } .qp-doc-meta p { margin: 0; line-height: 1.4; } .qp-notes-line { font-size: 12px; color: #333; margin-bottom: 8px; } /* Tableau (doc-table) */ .qp-table { width: 100%; border-collapse: collapse; margin: 6px 0 8px; font-size: 13px; } .qp-table th, .qp-table td { padding: 6px 8px; text-align: left; border-bottom: 0.5px solid #ccc; } .qp-table thead th { font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; border-top: 1.5px solid #000; border-bottom: 1.5px solid #000; } .qp-table .num { text-align: right; white-space: nowrap; } .qp-tiny { font-size: 10.5px; color: #555; } .qp-empty td { color: #999; font-style: italic; text-align: center; padding: 26px 0; } .qp-table tfoot td { border-bottom: none; border-top: 1px solid #000; font-weight: 700; } .qp-table tfoot .qp-muted { color: #555; font-weight: 400; border-top: none; } .qp-table tfoot .qp-s { font-size: 11px; } .qp-table tfoot .qp-due { font-family: Helvetica, Arial, sans-serif; font-size: 13px; } .qp-validity { font-size: 11px; color: #555; margin-top: 12px; } /* Signature « Bon pour accord » */ .qp-sign { margin-top: 28px; } .qp-sign-lbl { font-family: Helvetica, Arial, sans-serif; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: #444; margin-bottom: 4px; } .qp-bon { font-style: italic; font-size: 12px; margin: 0 0 6px; } .qp-sign-box { height: 70px; max-width: 75%; border: 0.5px solid #888; } @media (max-width: 1100px) { .q-wysiwyg { grid-template-columns: 1fr; } .q-wysiwyg-preview { display: none; } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--border-light); } .modal-title { font-size: 16px; font-weight: 700; color: var(--text-heading); } .modal-close { background: transparent; border: none; font-size: 22px; color: var(--text-muted); cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px; } .modal-close:hover { background: var(--bg-hover); color: var(--text-label); } .modal-body { padding: 20px 24px 4px; } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 20px; border-top: 1px solid var(--border-light); /* #32 : toujours visible (collé en bas de la modal) sans devoir scroller. */ position: sticky; bottom: 0; background: var(--bg-card); z-index: 2; } /* #6 : gros boutons Entrée (vert) / Sortie (rouge) dans le tableau de stock */ .stock-btn { border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; margin-right: 6px; white-space: nowrap; } .stock-btn-in { background: #16a34a; } .stock-btn-in:hover { background: #15803d; } .stock-btn-out { background: #dc2626; } .stock-btn-out:hover { background: #b91c1c; } /* #3 : espacement régulier (équidistant) des sections du formulaire patient */ .form-group { margin-bottom: 24px; } .form-group:last-of-type { margin-bottom: 12px; } /* #7 : bandeau « interrogatoire documenté » (preuve anamnèse) */ .anamnese-proof { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fef9c3; border: 1px solid #fde68a; color: #854d0e; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; } .anamnese-proof--done { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } /* ── Tab Navigation ──────────────────────────────────────────────────────── */ .tab-bar { background: var(--navbar-bg, var(--bg-card)); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; /* #34 : un peu d'air pour les badges rouges */ padding: 0 24px; position: sticky; top: 64px; z-index: 9; } /* Tablette/mobile : la tab-bar ne crée JAMAIS d'overflow de page (garde e2e 09-responsive). Avec Agenda + Relances, 8 onglets ne tiennent plus en portrait 820px → défilement horizontal INTERNE de la barre. */ @media (max-width: 1100px) { .tab-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .tab-bar .tab-btn { white-space: nowrap; flex: 0 0 auto; } } /* #28 : onglet « Patients » épinglé à gauche, le reste centré, « Réglages » à droite. Deux marges auto égales (sur Catalogue et Réglages) centrent le groupe du milieu entre Patients (gauche) et Réglages (droite). Signale visuellement que la fiche patient est un contexte distinct des outils globaux. */ .tab-bar a[href="catalogue.html"] { margin-left: auto; } .tab-bar a[href="patients.html"] { padding-right: 22px; border-right: 1px solid var(--border); } .tab-btn { display: inline-block; padding: 11px 20px; font-size: 13px; font-weight: 500; color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .tab-btn:hover { color: var(--text-primary); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } /* ── Sub-tab bar (pill toggle) ───────────────────────────────────────────── */ .sub-tab-bar { display: inline-flex; align-items: center; gap: 10px; /* #34 : évite que le badge rouge déborde sur l'onglet voisin */ padding: 3px 6px; background: var(--bg-hover); border-radius: 10px; } .sub-tab-btn { position: relative; background: transparent; border: none; border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all .15s; } .sub-tab-btn:hover { color: var(--text-label); } .sub-tab-btn.active { background: var(--bg-card); color: var(--accent); font-weight: 600; box-shadow: var(--shadow-sm); } /* ── Dashboard ───────────────────────────────────────────────────────────── */ .dashboard-layout { max-width: 1320px; margin: 0; padding: 34px 36px 110px; } /* ── Dashboard filters ────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════ Home v2 — page d'accueil repensée (gros boutons + search centrée) ═══════════════════════════════════════════════════════════════════ */ .home-v2-body { min-height: 100vh; background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--bg-base) 50%); } .home-v2 { max-width: 960px; margin: 0 auto; padding: 5vh 24px 40px; display: flex; flex-direction: column; align-items: center; } .home-v2-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 36px; } .home-v2-brand-name { font-size: 28px; font-weight: 800; color: var(--brand-primary); letter-spacing: -0.5px; margin-top: 4px; } .home-v2-brand-greeting { font-size: 15px; color: var(--text-secondary); } .home-v2-search-wrap { position: relative; width: 100%; max-width: 640px; margin-bottom: 48px; } .home-v2-search { width: 100%; padding: 18px 24px; font-size: 17px; border: 2px solid var(--border); border-radius: 14px; background: var(--bg-card); color: var(--text-primary); box-shadow: 0 4px 18px color-mix(in srgb, var(--brand-primary) 8%, transparent); transition: border-color .15s, box-shadow .15s; outline: none; } .home-v2-search:focus { border-color: var(--brand-primary); box-shadow: 0 6px 24px color-mix(in srgb, var(--brand-primary) 18%, transparent); } .home-v2-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.12); max-height: 400px; overflow-y: auto; z-index: 100; } .home-v2-search-cat { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg-hover); } .home-v2-search-item { display: block; padding: 10px 14px; border-top: 1px solid var(--border); text-decoration: none; color: var(--text-primary); transition: background .1s; } .home-v2-search-item:hover { background: var(--brand-primary-light); } .hv2si-title { font-size: 14px; font-weight: 600; } .hv2si-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .home-v2-search-empty { padding: 16px; text-align: center; color: var(--text-secondary); font-size: 14px; } .home-v2-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; max-width: 720px; margin-bottom: 36px; } .home-v2-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px 16px; background: var(--bg-card); border: 2px solid var(--border); border-radius: 16px; text-decoration: none; color: var(--text-primary); font-size: 16px; font-weight: 600; transition: all .15s; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .home-v2-tile:hover { border-color: var(--brand-primary); background: var(--brand-primary); color: white; transform: translateY(-3px); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary) 25%, transparent); } .home-v2-tile svg { width: 40px; height: 40px; color: var(--brand-primary); transition: color .15s; } .home-v2-tile:hover svg { color: white; } /* Réserve 2 lignes de libellé pour que les icônes restent alignées d'une tuile à l'autre, même quand le texte passe sur deux lignes (ex. « Bibliothèque de documents »). */ .home-v2-tile span { min-height: 3em; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.5; } .home-v2-footer { margin-top: auto; padding-top: 20px; text-align: center; } @media (max-width: 700px) { .home-v2 { padding: 3vh 16px 32px; } .home-v2-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; } .home-v2-tile { padding: 24px 12px; font-size: 14px; } .home-v2-tile svg { width: 32px; height: 32px; } .home-v2-search { padding: 14px 18px; font-size: 15px; } } /* ── Pagination liste patients ─────────────────────────────────── */ .patient-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 4px; flex-wrap: wrap; margin-top: 12px; } .patient-pag-info { font-size: 13px; color: var(--text-secondary); } .patient-pag-controls { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .patient-pag-btn { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .1s; } .patient-pag-btn:hover:not(:disabled):not(.active) { border-color: var(--brand-primary); color: var(--brand-primary); } .patient-pag-btn.active { background: var(--brand-primary); color: white; border-color: var(--brand-primary); } .patient-pag-btn:disabled { opacity: .4; cursor: not-allowed; } .patient-pag-dots { padding: 0 4px; color: var(--text-secondary); } @media (max-width: 600px) { .patient-pagination { flex-direction: column; } } /* Deep-link highlight (recherche / dashboard → fiche patient item ciblé) */ .aest-deeplink-highlight { animation: aest-highlight-pulse 1.2s ease-out 0s 2; outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 6px; } @keyframes aest-highlight-pulse { 0% { background-color: transparent; } 50% { background-color: var(--brand-primary-light); } 100% { background-color: transparent; } } /* Sous-onglets dashboard */ .dash-subtabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--border); } .dash-subtab { background: none; border: none; padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; } .dash-subtab:hover { color: var(--brand-primary); } .dash-subtab.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); } .dash-filters { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; } .filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 1; } .filter-group label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .3px; } .filter-group select, .filter-group input[type="date"] { padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 7px; font-size: 13px; background: #fff; color: #1e293b; } .filter-actions { display: flex; gap: 8px; align-items: flex-end; } /* Case à cocher de filtre (ex. « envoyés par mail ») — alignée en bas comme le bouton Filtrer, libellé en flux à côté de la case (pas en majuscules). */ .filter-group label.filter-check { display: flex; flex-direction: row; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text-primary, #1e293b); cursor: pointer; padding-bottom: 7px; } .filter-group label.filter-check input { cursor: pointer; } .dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; } .stat-card-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin-bottom: 6px; } .stat-card-value { font-size: 28px; font-weight: 700; color: var(--text-heading); } .stat-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } @media (max-width: 900px) { .dash-charts { grid-template-columns: 1fr; } } .chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; } .chart-card-title { font-size: 14px; font-weight: 700; color: var(--text-heading); margin-bottom: 16px; } .chart-card canvas { width: 100% !important; max-height: 280px; } /* ── Tab btn right (Réglages) ─────────────────────────────────────────── */ .tab-btn--right { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; } .tab-btn--right svg { width: 14px; height: 14px; opacity: .6; } .tab-btn--right.active svg, .tab-btn--right:hover svg { opacity: 1; } /* ── Admin / Réglages ────────────────────────────────────────────────────── */ .admin-layout { max-width: 1100px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; } /* Settings layout (sidebar + content) */ .settings-layout { max-width: 1320px; margin: 0; padding: 34px 36px 110px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; min-height: calc(100vh - 150px); } /* Mode focus : écran dédié (Équipe / Centre / Ordonnances types) ouvert depuis sa propre entrée de sidebar → on masque le menu interne de Réglages. */ body.admin-focus .settings-sidebar { display: none; } body.admin-focus .settings-layout { grid-template-columns: 1fr; } .settings-sidebar { position: sticky; top: 120px; align-self: start; } .settings-nav { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .settings-nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: background .15s, color .15s; border-bottom: 1px solid var(--border-light); } .settings-nav-item:last-child { border-bottom: none; } .settings-nav-item:hover { background: var(--bg-card-alt); color: var(--text-primary); } .settings-nav-item.active { background: var(--bg-green-light); color: var(--accent); font-weight: 600; border-left: 3px solid var(--accent); } .settings-nav-item svg, .settings-nav-item .nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; } .settings-nav-item.active svg, .settings-nav-item.active .nav-icon { opacity: 1; } .settings-content { min-width: 0; } .admin-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 28px 28px 32px; } .admin-section-title { font-size: 16px; font-weight: 700; color: var(--text-heading); margin: 0 0 22px 0; } /* ── Espacement vertical des sections de Réglages ──────────────────────── Le user a signalé que les sous-onglets (Centre, Ordonnances types, Facturation, Rappels, etc.) avaient un rendu trop tassé. On met des marges plus généreuses entre fields, fieldsets, hr, et entre les sous-titres (h3) internes. */ .admin-section > p { margin: 0 0 18px 0; line-height: 1.55; } .admin-section .field { margin: 0 0 16px 0; } .admin-section .field:last-child { margin-bottom: 0; } .admin-section .row-2 { margin-bottom: 16px; } .admin-section .row-2:last-child { margin-bottom: 0; } .admin-section fieldset { margin: 0 0 24px 0; padding: 0; border: 0; } .admin-section fieldset:last-child { margin-bottom: 0; } .admin-section hr { margin: 28px 0 !important; } .admin-section h3 { margin: 0 0 12px 0; } .admin-section h3:not(:first-child) { margin-top: 28px; } /* Espace plus généreux entre 2 sous-formulaires successifs (boutons "Enregistrer" + section "Logo" + section "Signature" qui se suivent dans Centre). */ .admin-section form + h3 { margin-top: 32px; } /* Settings cards grid (for display section) */ .settings-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .settings-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; } .settings-card-title { font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 12px; } .settings-field { margin-bottom: 14px; } .settings-field:last-child { margin-bottom: 0; } .settings-field label { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 4px; } .settings-field input, .settings-field select { width: 100%; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 7px; font-size: 13px; background: #fff; color: #1e293b; } /* Favorite acts list in settings */ .fav-list { display: flex; flex-direction: column; gap: 6px; } .fav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; } .fav-item-code { font-family: monospace; font-size: 12px; font-weight: 700; color: var(--brand-primary); background: var(--brand-primary-light); border: 1px solid #a7d9b8; border-radius: 4px; padding: 1px 6px; } .fav-item-label { flex: 1; font-size: 13px; color: #1e293b; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fav-item-del { flex-shrink: 0; } /* Template items in settings */ .tpl-list { display: flex; flex-direction: column; gap: 8px; } .tpl-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; } .tpl-card-name { font-size: 14px; font-weight: 600; color: #1e293b; } .tpl-card-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; } .tpl-card-actions { display: flex; gap: 4px; } @media (max-width: 800px) { .settings-layout { grid-template-columns: 1fr; } .settings-sidebar { position: static; } .settings-nav { display: flex; overflow-x: auto; } .settings-nav-item { white-space: nowrap; border-bottom: none; border-right: 1px solid #f1f5f9; } .settings-nav-item.active { border-left: none; border-bottom: 3px solid var(--brand-primary); } } /* Table générique */ .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table thead th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); border-bottom: 2px solid var(--border); background: var(--bg-card-alt); } .data-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .data-table tbody td.cell-wrap { white-space: normal; word-break: break-word; max-width: none; } /* Cellule d'actions : le td générique rogne à max-width:200px + overflow:hidden (utile pour tronquer du texte long), ce qui CLIPPE les boutons en bout de ligne — sur écran étroit le bouton « Sortie de stock » devenait invisible (mais cliquable). La cellule d'actions ne doit jamais rogner ses boutons. */ .data-table tbody td.cell-actions { max-width: none; overflow: visible; white-space: nowrap; } .data-table tbody tr:hover { background: var(--bg-card-alt); } /* ── Scanner code-barre caméra (modal plein écran avec flux vidéo) ───── Utilise navigator.BarcodeDetector (Chrome / Edge / Safari iOS 17+). Overlay sombre, vidéo centrée, réticule pour aligner le code-barres. */ .scan-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; } .scan-box { width: 100%; max-width: 560px; background: #111; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .scan-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #1c1c1c; } .scan-header h3 { margin: 0; color: #fff; font-size: 15px; font-weight: 600; } .scan-close { background: transparent; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 6px; } .scan-close:hover { color: #fca5a5; } .scan-video-wrap { position: relative; background: #000; aspect-ratio: 4 / 3; overflow: hidden; } .scan-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; } .scan-reticle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 78%; height: 32%; border: 2px solid #4C1D95; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); pointer-events: none; } /* Bouton torche (lampe arrière) : superposé en bas-droite du flux vidéo. Visible uniquement si l'appareil supporte la capability `torch`. */ .scan-torch { position: absolute; bottom: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; z-index: 2; } .scan-torch:hover { background: rgba(0, 0, 0, 0.75); } .scan-hint { padding: 14px 16px; background: #1c1c1c; color: #cbd5e1; font-size: 13px; text-align: center; } /* ── Bibliothèque — corrige l'alignement de la table de docs ──────────── Le `

` titre de catégorie doit s'aligner à gauche avec la table en-dessous, et le contenu des cellules doit être aligné en haut (pour que titre + nom de fichier soient cohérents visuellement). */ .lib-cat-title { margin: 18px 0 8px 0; font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; text-align: left; } .lib-table tbody td { vertical-align: top; text-align: left; white-space: normal; max-width: none; } .lib-table .lib-td-title { min-width: 180px; } .lib-table .lib-doc-title { font-weight: 600; color: var(--text-primary); } .lib-table .lib-doc-filename { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; } /* Badge statut */ .badge-active { background: #f0fdf4; color: #16a34a; } .badge-inactive-user { background: #fef2f2; color: #dc2626; } /* ── Prescription section ────────────────────────────────────────────────── */ .rx-list { display: flex; flex-direction: column; gap: 10px; } .rx-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; transition: all .15s ease; background: var(--bg-card); position: relative; } .rx-card:hover { border-color: var(--brand-primary); box-shadow: 0 2px 12px rgba(76, 29, 149, .08); transform: translateY(-1px); } .rx-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rx-date { font-weight: 600; font-size: 14px; color: var(--text-heading); } .rx-doctor { font-size: 12px; color: var(--text-secondary); } .rx-count { display: inline-block; font-size: 11px; font-weight: 600; background: var(--brand-primary-light); color: var(--brand-primary); padding: 2px 8px; border-radius: 100px; width: fit-content; margin-top: 2px; } .rx-actions { display: flex; gap: 4px; flex-shrink: 0; } /* ── Invoice section ─────────────────────────────────────────────────────── */ .invoice-list { display: flex; flex-direction: column; gap: 8px; } .invoice-card { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); } .invoice-card:hover { border-color: var(--accent-light); } .invoice-info { flex: 1; min-width: 0; } .invoice-number { font-weight: 700; font-size: 13px; font-family: monospace; color: #0f172a; } .invoice-amount { font-size: 15px; font-weight: 700; color: #0f172a; } .badge-pending { background: #fffbeb; color: #d97706; } .badge-paid { background: #f0fdf4; color: #16a34a; } .badge-cancelled { background: #f8fafc; color: #64748b; } .badge-partial { background: #fef3c7; color: #92400e; } /* ── Lab Results / Biologie ────────────────────────────────────────────── */ .lab-result-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: var(--bg-card); transition: border-color .15s; } .lab-result-card:hover { border-color: var(--accent-light); } .lab-result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .lab-results-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; } .lab-results-table th { text-align: left; padding: 6px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); border-bottom: 2px solid var(--border); font-weight: 600; } .lab-results-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); } .lab-results-table tr:last-child td { border-bottom: none; } .lab-abnormal { background: rgba(239, 68, 68, .05); } .lab-value-abnormal { color: #dc2626; font-weight: 700; } .tiers-payant-section .row-2 { display: flex; gap: 10px; } .btn-link { background: none; border: none; color: var(--accent); cursor: pointer; text-decoration: underline; padding: 0; font-family: inherit; } .btn-link:hover { opacity: .8; } /* ── PWA Offline Banner ──────────────────────────────────────────────────── */ .offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; text-align: center; padding: 10px 16px; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: transform .3s; } .offline-banner.hidden { transform: translateY(-100%); display: flex; } .offline-icon { font-size: 16px; } body.is-offline .navbar { margin-top: 40px; } body.is-offline.auth-bg .welcome-container { margin-top: 56px; } /* ── Carte Vitale (mock) ─────────────────────────────────────────────────── */ .cv-data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 10px; } .cv-field { display: flex; flex-direction: column; gap: 2px; } .cv-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--text-secondary); } .cv-value { font-size: 14px; font-weight: 500; color: var(--text-heading, #0f172a); } .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; margin-right: 8px; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 600px) { .cv-data-grid { grid-template-columns: 1fr; } } /* ── Ségur du Numérique ────────────────────────────────────────────────── */ .segur-section { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--bg-card); } .segur-actions { display: flex; flex-direction: column; gap: 6px; } .btn-segur { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card-alt); color: var(--text-primary); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; } .btn-segur:hover { background: var(--bg-hover); border-color: var(--accent); } .btn-segur svg { flex-shrink: 0; stroke: var(--accent); } .btn-segur-teleconsult svg { stroke: #8b5cf6; } .btn-segur-teleconsult:hover { border-color: #8b5cf6; } .segur-status { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; margin-top: 10px; font-size: 12px; line-height: 1.5; } .segur-status strong { display: block; font-size: 13px; margin-bottom: 2px; } .segur-loading { background: var(--bg-card-alt); color: var(--text-secondary); align-items: center; } .segur-success { background: #f0fdf4; border: 1px solid #bbf7d0; } .segur-warning { background: #fffbeb; border: 1px solid #fde68a; } .segur-error { background: #fef2f2; border: 1px solid #fecaca; } .segur-detail { font-size: 11px; color: var(--text-secondary); } .segur-timestamp { font-style: italic; margin-top: 4px; } .badge-success { display: inline-block; padding: 1px 8px; border-radius: 6px; background: #dcfce7; color: #16a34a; font-size: 11px; font-weight: 600; } .badge-warning { display: inline-block; padding: 1px 8px; border-radius: 6px; background: #fef3c7; color: #d97706; font-size: 11px; font-weight: 600; } /* DMP modal */ .segur-dmp-placeholder { text-align: center; padding: 10px 0; } .segur-dmp-icon { margin-bottom: 4px; } .segur-dmp-info { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin: 12px auto; max-width: 320px; text-align: left; } .segur-dmp-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; } .segur-dmp-row + .segur-dmp-row { border-top: 1px solid var(--border-light); } .segur-dmp-label { color: var(--text-secondary); font-size: 12px; } .segur-dmp-note { display: flex; align-items: flex-start; gap: 8px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; margin-top: 16px; font-size: 12px; color: #1d4ed8; text-align: left; line-height: 1.5; } .segur-dmp-note svg { flex-shrink: 0; margin-top: 1px; stroke: #3b82f6; } /* MSSanté */ .btn-mssante { color: #2563eb !important; } .btn-mssante:hover { background: #eff6ff !important; } .segur-info-banner { display: flex; align-items: center; gap: 8px; background: var(--bg-green-light); border: 1px solid var(--accent-ring); border-radius: 8px; padding: 8px 12px; } .segur-mssante-preview { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; flex-wrap: wrap; } .segur-mssante-options { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; } /* ── Stock section ───────────────────────────────────────────────────────── */ .stock-alert-banner { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 12px 18px; color: #92400e; font-size: 13px; margin-bottom: 16px; } .stock-scanner { display: flex; gap: 10px; margin-bottom: 16px; } .stock-scanner input { flex: 1; font-family: monospace; font-size: 16px; letter-spacing: 1px; } /* ── BDPM combobox (prescription search) ─────────────────────────────────── */ .bdpm-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 200; max-height: 260px; overflow-y: auto; } .bdpm-option { padding: 8px 12px; cursor: pointer; transition: background .1s; border-bottom: 1px solid #f8fafc; font-size: 12px; } .bdpm-option:last-child { border-bottom: none; } .bdpm-option:hover { background: var(--brand-primary-light); } .bdpm-option-name { color: #374151; font-weight: 500; } .bdpm-option-meta { color: #94a3b8; font-size: 11px; margin-top: 1px; } /* ── Prescription line items ─────────────────────────────────────────────── */ .rx-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; align-items: start; } .rx-line:last-child { border-bottom: none; } .rx-line-fields { display: flex; flex-direction: column; gap: 8px; } .rx-line-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } /* ── Empty module placeholder ────────────────────────────────────────────── */ .module-placeholder { text-align: center; padding: 60px 24px; color: #94a3b8; } .module-placeholder-icon { font-size: 48px; margin-bottom: 16px; opacity: .5; } /* ── Sub-tab badge (factures impayées) ──────────────────────────────────── */ .sub-tab-badge { position: absolute; top: -4px; right: -8px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; } /* ── Speech-to-text mic button ──────────────────────────────────────────── */ .textarea-with-mic { position: relative; } .textarea-with-mic textarea { width: 100%; padding-right: 44px; } /* .btn-mic inside textarea: positioned absolutely */ .textarea-with-mic .btn-mic { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; background: var(--accent); color: #fff; border: none; z-index: 2; } .textarea-with-mic .btn-mic:hover { background: var(--accent-hover); transform: scale(1.05); } .btn-mic-unsupported { font-size: 11px; color: #94a3b8; margin-top: 4px; } /* ── Agenda ────────────────────────────────────────────────────────── */ .agenda-layout { max-width: 1400px; margin: 0 auto; padding: 20px 24px; } .agenda-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; } .agenda-toolbar-left, .agenda-toolbar-right { display: flex; align-items: center; gap: 10px; } .agenda-toolbar-center { display: flex; align-items: center; gap: 8px; } .agenda-week-label { font-weight: 600; font-size: 15px; min-width: 220px; text-align: center; } .agenda-grid-wrapper { overflow-x: auto; } .agenda-grid { display: flex; min-width: 700px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; } .agenda-hours { width: 56px; flex-shrink: 0; border-right: 1px solid #e2e8f0; } .agenda-hour-header { height: 36px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; } .agenda-hour-label { font-size: 11px; color: #64748b; text-align: right; padding-right: 8px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: flex-start; padding-top: 2px; } .agenda-col { flex: 1; min-width: 120px; border-right: 1px solid #e2e8f0; } .agenda-col:last-child { border-right: none; } .agenda-col--today { background: #f0fdf4; } .agenda-day-header { height: 36px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #1e293b; border-bottom: 1px solid #e2e8f0; background: #f8fafc; text-transform: capitalize; } .agenda-day-body { position: relative; } .agenda-slot-line { position: absolute; left: 0; right: 0; height: 40px; border-bottom: 1px solid #f1f5f9; cursor: pointer; } .agenda-slot-line:hover { background: color-mix(in srgb, var(--brand-primary) 5%, transparent); } .agenda-slot-half { border-bottom: 1px dashed #f1f5f9; } .agenda-event { position: absolute; left: 3px; right: 3px; border-radius: 4px; padding: 3px 6px; cursor: pointer; overflow: hidden; font-size: 11px; z-index: 2; transition: box-shadow .15s; } .agenda-event:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); z-index: 3; } .agenda-event.completed { opacity: 0.6; } .agenda-event.noshow { opacity: 0.4; text-decoration: line-through; } .agenda-event-time { font-weight: 600; font-size: 10px; } .agenda-event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1e293b; } .agenda-event-patient { font-size: 10px; color: inherit; opacity: 0.75; text-decoration: none; font-weight: 500; } .agenda-event-patient:hover { text-decoration: underline; opacity: 1; } .agenda-event-type-badge { position: absolute; top: 2px; right: 3px; font-size: 8px; font-weight: 800; color: #fff; border-radius: 3px; padding: 1px 3px; line-height: 1; opacity: 0.85; } .agenda-color-opt { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .1s; } .agenda-color-opt:hover { transform: scale(1.15); } .agenda-color-opt.active { border-color: #1e293b; } @media (max-width: 700px) { .agenda-toolbar { flex-direction: column; align-items: stretch; } .agenda-toolbar-center { justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════════ RÉSERVATION EN LIGNE (rdv.html) — style Doctolib ═══════════════════════════════════════════════════════════════════════ */ .booking-page { min-height: 100vh; background: linear-gradient(135deg, var(--brand-primary-light) 0%, #f8fafc 100%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1e293b; } /* Header cabinet */ .booking-header { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 20px 0; } .booking-header-inner { max-width: 800px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 16px; } .booking-logo { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .booking-logo svg { display: block; } .booking-cabinet-name { font-size: 18px; font-weight: 700; color: #1e293b; } .booking-cabinet-info { font-size: 13px; color: #64748b; margin-top: 2px; } /* Container principal */ .booking-container { max-width: 800px; margin: 0 auto; padding: 32px 20px 60px; } /* Stepper */ .booking-stepper { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 36px; } .booking-stepper-item { display: flex; align-items: center; gap: 8px; } .booking-stepper-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; background: #e2e8f0; color: #94a3b8; transition: all .2s; } .booking-stepper-item.active .booking-stepper-circle { background: var(--brand-primary); color: #fff; } .booking-stepper-item.done .booking-stepper-circle { background: var(--brand-primary); color: #fff; } .booking-stepper-label { font-size: 13px; color: #94a3b8; font-weight: 500; } .booking-stepper-item.active .booking-stepper-label { color: #1e293b; } .booking-stepper-item.done .booking-stepper-label { color: var(--brand-primary); } .booking-stepper-line { width: 40px; height: 2px; background: #e2e8f0; margin: 0 8px; } .booking-stepper-item.done + .booking-stepper-line { background: var(--brand-primary); } /* Steps */ .booking-step { display: none; } .booking-step.active { display: block; } /* Step 1 — Praticien */ .booking-step h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; text-align: center; } .booking-step .step-subtitle { font-size: 14px; color: #64748b; text-align: center; margin-bottom: 28px; } .doctor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .doctor-card { background: #fff; border: 2px solid #e2e8f0; border-radius: 12px; padding: 24px 20px; text-align: center; cursor: pointer; transition: all .2s; } .doctor-card:hover { border-color: var(--brand-primary); box-shadow: 0 2px 12px color-mix(in srgb, var(--brand-primary) 12%, transparent); } .doctor-card.selected { border-color: var(--brand-primary); background: var(--brand-primary-light); } .doctor-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; margin: 0 auto 12px; } .doctor-card-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .doctor-card-speciality { font-size: 13px; color: #64748b; } /* Step 2 — Créneaux */ .slot-date-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px; } .slot-date-nav button { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 16px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all .15s; } .slot-date-nav button:hover { border-color: var(--brand-primary); color: var(--brand-primary); } .slot-date-label { font-size: 16px; font-weight: 600; min-width: 200px; text-align: center; } .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; max-width: 600px; margin: 0 auto; } .slot-btn { padding: 12px 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; font-size: 15px; font-weight: 500; cursor: pointer; text-align: center; transition: all .15s; color: #1e293b; } .slot-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); } .slot-btn.selected { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); } .slot-empty { text-align: center; color: #94a3b8; padding: 40px 20px; font-size: 15px; } /* Step 3 — Formulaire patient */ .booking-form { max-width: 500px; margin: 0 auto; background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; padding: 28px 24px; } .booking-form .field { margin-bottom: 16px; } .booking-form label { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 5px; } .booking-form input, .booking-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; font-family: inherit; transition: border-color .15s; box-sizing: border-box; } .booking-form input:focus, .booking-form textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent); } .booking-form .btn-book { width: 100%; padding: 14px; background: var(--brand-primary); color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .15s; margin-top: 8px; } .booking-form .btn-book:hover { background: var(--brand-primary-dark); } .booking-form .btn-book:disabled { opacity: .6; cursor: not-allowed; } /* Step 4 — Confirmation */ .booking-confirmation { text-align: center; max-width: 500px; margin: 0 auto; background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; padding: 40px 28px; } .booking-confirmation .check-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-primary-light); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 20px; } .booking-confirmation h2 { color: var(--brand-primary); margin-bottom: 16px; } .booking-confirmation .summary-table { text-align: left; width: 100%; max-width: 360px; margin: 20px auto; font-size: 14px; } .booking-confirmation .summary-table td { padding: 6px 0; } .booking-confirmation .summary-table td:first-child { color: #64748b; padding-right: 16px; } .booking-confirmation .summary-table td:last-child { font-weight: 600; } .booking-btn-back { display: inline-block; margin-top: 24px; padding: 10px 24px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; color: #64748b; text-decoration: none; transition: all .15s; background: #fff; cursor: pointer; } .booking-btn-back:hover { border-color: var(--brand-primary); color: var(--brand-primary); } /* Responsive */ @media (max-width: 600px) { .booking-container { padding: 20px 16px 40px; } .doctor-grid { grid-template-columns: 1fr; } .slot-grid { grid-template-columns: repeat(3, 1fr); } .booking-stepper-label { display: none; } .booking-stepper-line { width: 24px; } } /* ── Booking : recherche médecin ──────────────────────────────────── */ .search-bar-booking { margin-bottom: 1.5rem; } .search-bar-booking input { width: 100%; padding: 14px 18px; font-size: 1rem; border: 2px solid #e2e8f0; border-radius: 12px; outline: none; transition: border-color .2s; box-sizing: border-box; } .search-bar-booking input:focus { border-color: var(--brand-primary); } .no-results { color: #94a3b8; text-align: center; padding: 2rem 0; } .step-subtitle { color: #64748b; margin-bottom: 1.5rem; } .doctor-info { display: flex; flex-direction: column; gap: 2px; } .doctor-spec { color: var(--brand-primary); font-size: .88rem; font-weight: 500; } .doctor-city { font-size: .82rem; color: #64748b; } .doctor-fee { font-size: .82rem; color: #94a3b8; font-weight: 600; } .booking-badge-success { display: inline-block; background: #dcfce7; color: #16a34a; font-size: .72rem; padding: 2px 8px; border-radius: 6px; font-weight: 500; margin-top: 2px; width: fit-content; } .motif-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .motif-tag { font-size: .72rem; padding: 1px 7px; border: 1px solid; border-radius: 10px; font-weight: 500; } /* ── Booking : sélection motif ────────────────────────────────────── */ .motif-select-wrapper { margin-bottom: 1.5rem; } .motif-select-wrapper label { display: block; font-weight: 600; margin-bottom: .5rem; color: #1e293b; } .motif-select-wrapper select { width: 100%; padding: 12px 14px; font-size: .95rem; border: 2px solid #e2e8f0; border-radius: 10px; outline: none; background: white; cursor: pointer; transition: border-color .2s; } .motif-select-wrapper select:focus { border-color: var(--brand-primary); } /* ── Booking : header patient ─────────────────────────────────────── */ .booking-user { display: flex; align-items: center; gap: .75rem; } .booking-user span { font-weight: 500; color: #1e293b; font-size: .9rem; } .booking-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.1rem; color: #1e293b; } .booking-summary-card { background: #f8fafc; border-radius: 12px; padding: 1.5rem; border: 1px solid #e2e8f0; } /* ── Page profil médecin ──────────────────────────────────────────── */ .profil-page { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; } .profil-section { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); } .profil-section h2 { font-size: 1.25rem; color: var(--text-heading); margin-bottom: 1rem; } .profil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .profil-form input, .profil-form select, .profil-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: .9rem; resize: vertical; box-sizing: border-box; background: var(--bg-card); color: var(--text-primary); } .profil-form input:disabled { background: var(--bg-hover); color: var(--text-secondary); cursor: not-allowed; } .profil-form label { color: var(--text-primary); font-size: .88rem; font-weight: 500; margin-bottom: 4px; display: inline-block; } .text-muted { color: var(--text-secondary); font-size: .88rem; } /* ── Motifs list (profil page) ────────────────────────────────────── */ .motifs-list { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; } .motif-item { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; background: var(--bg-hover); border-radius: 10px; border: 1px solid var(--border); color: var(--text-primary); } .motif-item.inactive { opacity: .5; } .motif-color { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } .motif-details { flex: 1; display: flex; flex-direction: column; } .motif-details span { font-size: .82rem; color: var(--text-secondary); } .motif-actions { display: flex; gap: .5rem; } .btn-danger { color: #dc2626 !important; } /* ── Responsive profil ────────────────────────────────────────────── */ @media (max-width: 600px) { .profil-grid { grid-template-columns: 1fr; } } /* ── Page d'accueil (welcome) ────────────────────────────────────── */ .welcome-container { text-align: center; max-width: 600px; width: 100%; } .welcome-subtitle { color: #64748b; font-size: 1.05rem; margin-bottom: 2.5rem; } .welcome-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; } .welcome-card { background: #fff; border-radius: 16px; padding: 2.5rem 1.5rem; box-shadow: 0 4px 24px rgba(0,0,0,.07); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; align-items: center; gap: .75rem; border: 2px solid transparent; flex: 0 1 240px; text-align: center; } .welcome-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.12); border-color: var(--brand-primary); } .welcome-icon { margin-bottom: .25rem; } .welcome-card h2 { font-size: 1.15rem; font-weight: 700; color: #1e293b; } .welcome-card p { font-size: .85rem; color: #64748b; line-height: 1.4; } @media (max-width: 700px) { .welcome-card { flex: 1 1 100%; } } /* ── Success message ─────────────────────────────────────────────── */ .success-msg { color: #16a34a; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-top: 8px; } /* ══════════════════════════════════════════════════════════════════════ Page d'accueil médecin (home.html) ══════════════════════════════════════════════════════════════════════ */ .home-layout { max-width: 1200px; margin: 0 auto; padding: 24px; } /* Greeting */ .home-greeting { margin-bottom: 24px; } .home-greeting-title { font-size: 24px; font-weight: 700; color: #0f172a; margin-bottom: 4px; } .home-greeting-date { font-size: 14px; color: #64748b; } /* Quick stats row */ .home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .home-stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; display: flex; align-items: center; gap: 14px; } .home-stat-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .home-stat-value { font-size: 24px; font-weight: 700; color: #0f172a; line-height: 1; } .home-stat-label { font-size: 12px; color: #64748b; margin-top: 2px; } /* Main content row */ .home-main-row { display: grid; grid-template-columns: 1fr 360px; gap: 24px; } .home-main-left { display: flex; flex-direction: column; gap: 20px; } .home-main-right { display: flex; flex-direction: column; gap: 20px; } /* Sections */ .home-section { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; } .home-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .home-section-title { font-size: 15px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 6px; } .home-section-count { background: var(--brand-primary-light); color: var(--brand-primary); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 10px; } .home-empty { text-align: center; color: #94a3b8; font-size: 13px; padding: 24px 0; } /* Appointment list */ .home-appt-list { display: flex; flex-direction: column; gap: 0; } .home-appt-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; transition: background .1s; } .home-appt-item:last-child { border-bottom: none; } .home-appt-item:hover { background: #f8fafc; border-radius: 8px; margin: 0 -8px; padding: 12px 8px; } .home-appt-time { font-size: 14px; font-weight: 700; color: #0f172a; white-space: nowrap; min-width: 80px; } .home-appt-end { font-weight: 400; color: #94a3b8; font-size: 12px; } .home-appt-info { flex: 1; min-width: 0; } .home-appt-patient { font-size: 14px; font-weight: 600; color: #1e293b; } .home-appt-title { font-size: 12px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Reminder list */ .home-reminder-list { display: flex; flex-direction: column; gap: 0; } .home-reminder-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; } .home-reminder-item:last-child { border-bottom: none; } .home-reminder-info { flex: 1; min-width: 0; } .home-reminder-patient { font-size: 13px; font-weight: 600; color: #1e293b; } .home-reminder-type { font-size: 12px; color: #64748b; } .home-reminder-date { font-size: 11px; color: #94a3b8; margin-top: 2px; } /* Quick access widgets */ .home-widgets { display: flex; flex-direction: column; gap: 8px; } .home-widget-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .1s; } .home-widget-card:hover { border-color: var(--brand-primary); box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 10%, transparent); transform: translateX(4px); } .home-widget-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .home-widget-title { font-size: 14px; font-weight: 600; color: #1e293b; } .home-widget-desc { font-size: 12px; color: #94a3b8; margin-top: 1px; } /* ── Chatbot IA ────────────────────────────────────────────────── */ .home-chatbot { margin-top: 24px; } .chatbot-messages { max-height: 420px; overflow-y: auto; padding: 16px 0; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; } .chatbot-message { display: flex; gap: 10px; align-items: flex-start; } .chatbot-message--user { justify-content: flex-end; } .chatbot-avatar { width: 32px; height: 32px; border-radius: 8px; background: #f5f3ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .chatbot-bubble { background: var(--bg-card-alt); border: 1px solid var(--border-light); border-radius: 12px; border-top-left-radius: 4px; padding: 12px 16px; max-width: 85%; font-size: 13px; line-height: 1.6; color: var(--text-primary); word-wrap: break-word; } .chatbot-bubble--user { background: #8b5cf6; color: white; border-color: #8b5cf6; border-radius: 12px; border-top-right-radius: 4px; } .chatbot-bubble h3, .chatbot-bubble h4 { color: var(--text-heading); } .chatbot-bubble li { list-style: disc; } .chatbot-typing { display: flex; gap: 4px; padding: 4px 0; } .chatbot-typing span { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: chatbot-dot 1.4s infinite ease-in-out; } .chatbot-typing span:nth-child(2) { animation-delay: 0.2s; } .chatbot-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes chatbot-dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } .chatbot-input-row { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-light); } .chatbot-input { flex: 1; padding: 10px 14px; border: 1px solid var(--border-input); border-radius: 10px; background: var(--bg-input); color: var(--text-primary); font-size: 13px; outline: none; transition: border-color 0.2s; } .chatbot-input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); } .chatbot-input:disabled { opacity: 0.5; cursor: not-allowed; } .chatbot-send { width: 40px; height: 40px; border: none; border-radius: 10px; background: #8b5cf6; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; flex-shrink: 0; } .chatbot-send:hover:not(:disabled) { background: #7c3aed; } .chatbot-send:disabled { opacity: 0.5; cursor: not-allowed; } /* Responsive */ @media (max-width: 900px) { .home-stats { grid-template-columns: repeat(2, 1fr); } .home-main-row { grid-template-columns: 1fr; } } @media (max-width: 500px) { .home-stats { grid-template-columns: 1fr; } .chatbot-messages { max-height: 320px; } .chatbot-bubble { max-width: 92%; } } /* ── Constantes vitales ──────────────────────────────────────────────── */ .vitals-banner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; } .vitals-banner-date { margin-left: auto; font-size: 11px; color: #64748b; font-style: italic; } .vital-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; } .vital-chip--bp { background: #fef3c7; color: #92400e; } .vital-chip--hr { background: #fce7f3; color: #9d174d; } .vital-chip--temp { background: #fee2e2; color: #991b1b; } .vital-chip--spo2 { background: #dbeafe; color: #1e40af; } .vital-chip--weight { background: #e0e7ff; color: #3730a3; } .vital-chip--bmi { background: #d1fae5; color: #065f46; } .vital-chip--glucose { background: #fef9c3; color: #854d0e; } .vitals-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid #e2e8f0; } .vitals-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; } .vitals-table th { background: #f8fafc; color: #475569; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; padding: 8px 10px; text-align: left; border-bottom: 2px solid #e2e8f0; } .vitals-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; color: #334155; } .vitals-table tbody tr:hover { background: #f8fafc; } .vitals-table tbody tr:last-child td { border-bottom: none; } .vitals-table td .item-actions { display: flex; gap: 2px; } @media (max-width: 700px) { .vitals-banner { padding: 8px 10px; gap: 4px; } .vital-chip { font-size: 11px; padding: 2px 8px; } } /* ── Notifications (cloche) ──────────────────────────────────────────── */ .notif-container { position: relative; display: inline-flex; align-items: center; margin-right: 8px; } .notif-bell { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: 8px; position: relative; transition: background 0.15s; line-height: 1; } .notif-bell:hover { background: rgba(0,0,0,0.06); } .notif-badge { position: absolute; top: -2px; right: 0; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.2); animation: notif-pulse 2s ease-in-out infinite; } @keyframes notif-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* Pastille d'alerte sur un onglet de navigation (ex. « Stocks ») — calquée sur la cloche, mais en flux (inline) à côté du libellé de l'onglet. */ .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px; border-radius: 8px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; vertical-align: middle; } .nav-badge.hidden { display: none; } .notif-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-height: 420px; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.18); border: 1px solid #e2e8f0; z-index: 9999; overflow: hidden; display: flex; flex-direction: column; } .notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; font-weight: 600; font-size: 14px; color: #1e293b; } .notif-mark-all { background: none; border: none; font-size: 12px; color: var(--brand-primary); cursor: pointer; font-weight: 600; padding: 4px 8px; border-radius: 6px; } .notif-mark-all:hover { background: #f0fdf4; } .notif-dropdown-body { overflow-y: auto; max-height: 360px; padding: 8px; } .notif-empty { text-align: center; color: #94a3b8; font-size: 13px; padding: 24px 16px; } .notif-section-header { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; padding: 8px 4px 4px; margin-top: 4px; } .notif-section-header:first-child { margin-top: 0; } /* Alertes stock : fond rosé pour distinguer des rappels patient. */ .notif-item-stock { background: #fef2f2; border-color: #fecaca; } .notif-item-stock:hover { background: #fee2e2; border-color: #fca5a5; } .notif-item-stock-count { font-size: 11px; } .notif-item { padding: 10px 12px; border-radius: 8px; margin-bottom: 4px; background: #f8fafc; border: 1px solid #f1f5f9; transition: background 0.15s; } .notif-item:hover { background: #f0fdf4; border-color: #bbf7d0; } .notif-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .notif-item-type { font-size: 11px; font-weight: 600; color: #475569; } .notif-item-date { font-size: 11px; color: #94a3b8; } .notif-item-patient { font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 2px; } .notif-item-message { font-size: 12px; color: #64748b; line-height: 1.4; margin-bottom: 6px; } .notif-item-actions { display: flex; gap: 8px; align-items: center; } .notif-ack-btn { background: var(--brand-primary); color: #fff; border: none; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; } .notif-ack-btn:hover { background: var(--brand-primary-dark); } .notif-view-btn { font-size: 11px; color: var(--brand-primary); text-decoration: none; font-weight: 600; } .notif-view-btn:hover { text-decoration: underline; } @media (max-width: 500px) { .notif-dropdown { width: 300px; right: -40px; } } /* ── Global Search Bar ──────────────────────────────────────────────────── */ .global-search-container { position: relative; flex: 1; max-width: 420px; margin: 0 20px; } .global-search-input-wrap { position: relative; display: flex; align-items: center; } .global-search-icon { position: absolute; left: 10px; font-size: 14px; pointer-events: none; z-index: 1; } .global-search-input { width: 100%; padding: 7px 60px 7px 32px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; font-size: 13px !important; background: var(--bg-card-alt) !important; color: var(--text-primary) !important; transition: border-color .15s, box-shadow .15s, background .15s; } .global-search-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-ring) !important; background: var(--bg-card) !important; } .global-search-kbd { position: absolute; right: 8px; font-size: 10px; font-weight: 600; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; pointer-events: none; font-family: inherit; } /* Search dropdown */ .global-search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-dropdown); z-index: 200; max-height: 420px; overflow-y: auto; } .gs-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; } .gs-category { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 4px; border-top: 1px solid var(--border-light); } .gs-category:first-child { border-top: none; } .gs-category-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .gs-category-count { font-size: 10px; font-weight: 700; background: var(--bg-card-alt); color: var(--text-muted); border-radius: 10px; padding: 1px 7px; } .gs-item { display: block; padding: 8px 14px; text-decoration: none; transition: background .1s; cursor: pointer; } .gs-item:hover { background: var(--bg-green-light); } .gs-item-title { font-size: 13px; font-weight: 600; color: var(--text-heading); line-height: 1.3; } .gs-item-sub { font-size: 12px; color: var(--text-secondary); margin-top: 1px; } .gs-item-date { font-size: 11px; color: var(--text-muted); margin-top: 1px; } @media (max-width: 700px) { .global-search-container { max-width: none; margin: 0 8px; } .global-search-kbd { display: none; } } @media (max-width: 500px) { .global-search-container { display: none; } } /* ── Dark Mode Toggle ───────────────────────────────────────────────────── */ .dark-toggle-btn { background: transparent; border: 1px solid var(--border); border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: background .15s, border-color .15s; margin-right: 8px; flex-shrink: 0; } .dark-toggle-btn:hover { background: var(--bg-hover); border-color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════════════════════ */ /* 6A — RESPONSIVE MOBILE */ /* ═══════════════════════════════════════════════════════════════════════════ */ /* ── Hamburger button (hidden on desktop) ─────────────────────────────────── */ .hamburger-btn { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-primary); padding: 6px 10px; border-radius: 8px; line-height: 1; } .hamburger-btn:hover { background: var(--bg-hover); } .hamburger-btn.active { color: var(--accent); } /* ── Mobile breakpoint ≤768px ─────────────────────────────────────────────── */ @media (max-width: 768px) { /* Show hamburger */ .hamburger-btn { display: block; } /* Navbar: plus haute sur mobile/tablette (#1 — était trop compacte). flex-wrap : si les contrôles (IA, langue, nuit, déconnexion) dépassent sur un téléphone étroit, ils passent à la ligne au lieu de déborder hors écran (bug André : « EN ne fonctionne pas sur téléphone » = sélecteur de langue poussé hors de l'écran). Ne wrap QUE si nécessaire → tablette inchangée. */ .navbar { padding: 0 16px; min-height: 64px; height: auto; flex-wrap: wrap; row-gap: 4px; } .navbar-brand span { font-size: 16px; } .navbar-logo-img { height: 44px; } /* Tab bar: slide-down mobile menu */ .tab-bar { display: none; flex-direction: column; position: fixed; top: 64px; left: 0; right: 0; background: var(--bg-card); border-bottom: 2px solid var(--accent); box-shadow: var(--shadow-md); z-index: 9999; padding: 8px 0; max-height: calc(100vh - 64px); overflow-y: auto; } .tab-bar.mobile-open { display: flex; } /* #12 : pop-ups et tableaux ne débordent plus à droite — ils tiennent dans l'écran et défilent horizontalement si nécessaire (glissement gauche/droite). */ .modal-box { max-width: calc(100vw - 16px) !important; } .modal-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } .modal-body table, .data-table, .lab-results-table, .vitals-table { min-width: max-content; } .modal-body, .admin-section, .fiche-section, .aest-cat-table-wrap, .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* #4 : catalogue de soins — tableau défilable horizontalement sur mobile/tablette */ .aest-cat-table { min-width: 560px; } .tab-btn { padding: 14px 24px; font-size: 15px; border-bottom: none; border-left: 3px solid transparent; min-height: 44px; display: flex; align-items: center; gap: 8px; } .tab-btn.active { border-bottom: none; border-left-color: var(--accent); background: var(--bg-green-light); } .tab-btn--right { margin-left: 0 !important; border-top: 1px solid var(--border); } /* Sub-tab bar (patient tabs) — horizontal scroll */ .sub-tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; flex-wrap: nowrap; max-width: 100%; gap: 0; } .sub-tab-bar::-webkit-scrollbar { display: none; } .sub-tab-btn { padding: 8px 12px; font-size: 12px; min-width: fit-content; flex-shrink: 0; } /* App layout: single column with less padding */ .app-layout { padding: 12px; gap: 12px; } /* Dashboard layout */ .dashboard-layout { padding: 12px; } .dash-filters { flex-direction: column; gap: 8px; } .dash-filters .filter-group { min-width: 100%; } .dash-stats { grid-template-columns: 1fr 1fr; gap: 8px; } .dash-charts { grid-template-columns: 1fr; } .stat-card { padding: 14px; } /* Patient layout: stack */ .patient-layout { padding: 12px; } /* Home layout */ .home-layout { padding: 12px; } .home-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .home-columns { grid-template-columns: 1fr; } /* Settings layout */ .settings-layout { grid-template-columns: 1fr !important; padding: 12px; } .settings-nav { flex-direction: row !important; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 4px; padding: 8px !important; white-space: nowrap; } .settings-nav-item { padding: 8px 12px !important; font-size: 12px !important; white-space: nowrap; min-width: fit-content; } /* Forms: stack fields */ .row-2 { grid-template-columns: 1fr !important; } .row-3 { grid-template-columns: 1fr !important; } .row-4 { grid-template-columns: 1fr 1fr !important; } /* Modal full-width on mobile */ .modal-box { width: 95% !important; max-width: 100% !important; margin: 10px; max-height: 90vh; } /* Buttons: touch-friendly min size */ button, .btn-primary, .btn-ghost, .btn-danger { min-height: 44px; } /* Global search in navbar */ .global-search-container { max-width: 160px; } .global-search-input { font-size: 13px; padding: 6px 10px 6px 30px; } /* Dark toggle compact */ .dark-toggle-btn { padding: 6px !important; font-size: 16px !important; } /* Data tables: horizontal scroll */ .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { min-width: 600px; } /* Cards: compact */ .panel { padding: 14px; border-radius: 12px; } /* Agenda: force day view on mobile */ .agenda-week-header { font-size: 13px; } } /* ── Extra small ≤480px ───────────────────────────────────────────────────── */ @media (max-width: 480px) { .navbar { padding: 0 8px; } .navbar-brand svg { width: 22px; height: 22px; } .navbar-brand span { font-size: 14px; } .global-search-container { max-width: 120px; } .global-search-input { font-size: 12px; } .dash-stats { grid-template-columns: 1fr; } .home-stats-grid { grid-template-columns: 1fr; } .stat-card-value { font-size: 24px; } .sub-tab-btn { padding: 6px 10px; font-size: 11px; } } /* ═══════════════════════════════════════════════════════════════════════════ */ /* 6B — DICTÉE VOCALE */ /* ═══════════════════════════════════════════════════════════════════════════ */ .btn-mic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card); color: var(--text-secondary); font-size: 16px; cursor: pointer; transition: all .2s; flex-shrink: 0; } .btn-mic:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); } .btn-mic.mic-active { background: #ef4444; border-color: #ef4444; color: #fff; animation: mic-pulse 1.2s ease-in-out infinite; } /* Recording indicator */ .speech-indicator { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #ef4444; font-weight: 600; padding: 4px 0; } .speech-dot { display: inline-block; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; animation: mic-pulse 1.2s ease-in-out infinite; } /* ── Reformulation IA des notes (bouton ✨ + pop-up) ───────────────────── */ .btn-ai-reformulate { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 5px 11px; border: 1px solid #c4b5fd; border-radius: 8px; background: #f5f3ff; color: #6d28d9; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; vertical-align: middle; } .btn-ai-reformulate:hover { background: #ede9fe; border-color: #a78bfa; } .btn-ai-reformulate:disabled { opacity: .5; cursor: not-allowed; } .ai-reform-loading { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 14px; } .ai-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid #ddd6fe; border-top-color: #7c3aed; border-radius: 50%; animation: ai-spin .7s linear infinite; } @keyframes ai-spin { to { transform: rotate(360deg); } } .ai-reform-hint { margin: 0 0 8px; font-size: 12px; color: var(--text-secondary); } .ai-reform-orig { margin-top: 10px; font-size: 12px; } .ai-reform-orig summary { cursor: pointer; color: var(--text-secondary); } .ai-reform-orig-box { margin-top: 6px; padding: 8px 10px; background: var(--bg-hover, #f5f5f7); border-radius: 6px; white-space: pre-wrap; color: var(--text-secondary); } /* Overlay autonome de la reformulation (z-index au-dessus de #modalOverlay) */ .ai-reform-overlay { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .45); padding: 20px; } .ai-reform-box { width: min(640px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: var(--bg-card, #fff); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: hidden; } .ai-reform-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border, #e2e8f0); } .ai-reform-header h3 { margin: 0; font-size: 16px; } .ai-reform-close { border: none; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: var(--text-secondary); padding: 4px 8px; border-radius: 6px; } .ai-reform-close:hover { background: var(--bg-hover, #f1f5f9); } .ai-reform-body { padding: 16px 18px; overflow-y: auto; } .ai-reform-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border, #e2e8f0); } /* ══════════════════════════════════════════════════════════════════════ STOCK CONSUMPTION POPUP ══════════════════════════════════════════════════════════════════════ */ .stock-consumption-list { border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 8px 12px; background: var(--bg-secondary, #f8fafc); } .stock-consumption-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #3b82f6; cursor: pointer; } .stock-consumption-row input[type="number"] { font-size: 0.9rem; background: var(--bg-primary, #fff); } .stock-consumption-row input[type="number"]:disabled, .stock-consumption-row input[type="checkbox"]:disabled { opacity: 0.4; cursor: not-allowed; } .stock-cat-header { padding-bottom: 4px; border-bottom: 1px solid var(--border-color, #e2e8f0); } /* ══════════════════════════════════════════════════════════════════════ SPECIALTY TABS — Modules spécialisés (Dermato, Cardio, Chirurgie) ══════════════════════════════════════════════════════════════════════ */ /* Photo grid */ .specialty-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 12px; } .specialty-photo-card { display: flex; flex-direction: column; gap: 4px; } .specialty-photo-thumb { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; cursor: pointer; border: 1px solid var(--border, #e2e8f0); transition: transform .15s, box-shadow .15s; } .specialty-photo-thumb:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,.12); } .specialty-photo-label { font-size: 11px; color: var(--text-secondary, #64748b); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .specialty-photo-placeholder { width: 100%; aspect-ratio: 1; border-radius: 8px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 28px; border: 1px dashed #cbd5e1; } /* Reference card (ABCDE, etc.) */ .specialty-ref-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; overflow-x: auto; } /* History table */ .specialty-history-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .specialty-history-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid #e2e8f0; font-weight: 600; font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; } .specialty-history-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; } .specialty-history-table tbody tr:hover { background: #f8fafc; } /* Vital sign indicators (Cardio) */ .specialty-vitals-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; } .specialty-vital-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; text-align: center; } .specialty-vital-label { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.3px; } .vital-indicator { display: inline-flex; padding: 4px 12px; border-radius: 20px; font-weight: 600; font-size: 0.85rem; } .vital-indicator--normal { background: #dcfce7; color: #166534; } .vital-indicator--warning { background: #fef3c7; color: #92400e; } .vital-indicator--critical { background: #fecaca; color: #991b1b; } /* ── Responsive ───────────────────────────────────────────────────── */ @media (max-width: 900px) { .specialty-photo-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; } .specialty-vitals-dashboard { grid-template-columns: repeat(2, 1fr); } } /* ══════════════════════════════════════════════════════════════════════ ESTETICAPP — Catalogue d'actes esthétiques (Phase 1) Classes préfixées aest-cat-* pour isolement. ══════════════════════════════════════════════════════════════════════ */ .aest-cat-filters { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin: 16px 0 24px; padding: 12px 16px; background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; } .aest-cat-filters .field { flex: 1; min-width: 180px; margin-bottom: 0; } .aest-cat-filters label { font-size: 12px; font-weight: 600; color: #64748b; display: block; margin-bottom: 4px; } .aest-cat-count-total { margin-left: auto; font-size: 13px; color: #64748b; white-space: nowrap; padding-bottom: 8px; } /* ── Page légale (mentions, CGU, confidentialité, cookies) ────── */ .legal-page { max-width: 960px; margin: 0 auto; padding: 40px 24px 60px; } .legal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .legal-back { color: var(--brand-primary); text-decoration: none; font-size: 14px; font-weight: 600; } .legal-back:hover { text-decoration: underline; } .legal-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 32px; flex-wrap: wrap; position: sticky; top: 0; background: var(--bg-base); z-index: 10; padding-top: 8px; } .legal-tab { padding: 10px 16px; color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; } .legal-tab:hover { color: var(--brand-primary); } .legal-tab.active, .legal-tab:target { color: var(--brand-primary); border-bottom-color: var(--brand-primary); } .legal-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 32px 40px; color: var(--text-primary); } .legal-content section { margin-bottom: 48px; scroll-margin-top: 80px; } .legal-content section:last-child { margin-bottom: 0; } .legal-content h1 { font-size: 26px; color: var(--brand-primary); margin-top: 0; margin-bottom: 4px; } .legal-content h2 { font-size: 18px; color: var(--text-heading); margin-top: 28px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .legal-content h3 { font-size: 15px; color: var(--text-heading); margin-top: 16px; margin-bottom: 8px; } .legal-content p, .legal-content li { font-size: 14px; line-height: 1.6; color: var(--text-primary); } .legal-content ul { padding-left: 22px; } .legal-content li { margin-bottom: 4px; } .legal-content a { color: var(--brand-primary); text-decoration: underline; } .legal-updated { font-size: 12px; color: var(--text-secondary); font-style: italic; margin-bottom: 16px; } .legal-warn { background: #fef3c7; color: #92400e; padding: 12px 16px; border-left: 3px solid #f59e0b; border-radius: 4px; font-size: 13px; } .legal-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; } .legal-table th, .legal-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; } .legal-table th { background: var(--brand-primary-light); color: var(--brand-primary); font-weight: 600; } .legal-content code { background: var(--bg-hover); padding: 2px 6px; border-radius: 3px; font-size: 12px; } .legal-footer { margin-top: 24px; text-align: center; font-size: 12px; color: var(--text-secondary); } .legal-footer a { color: var(--brand-primary); } /* ── Menus dépliables par catégorie ────────────────────────────── */ .aest-cat-group { margin-bottom: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .aest-cat-group > summary { list-style: none; /* retire le triangle natif */ cursor: pointer; user-select: none; padding: 14px 18px; display: flex; align-items: center; gap: 12px; background: var(--bg-hover); border-bottom: 1px solid transparent; transition: background .15s, border-color .15s; } .aest-cat-group > summary::-webkit-details-marker { display: none; } .aest-cat-group > summary:hover { background: var(--brand-primary-light); } .aest-cat-group[open] > summary { border-bottom-color: var(--border); } .aest-cat-heading { font-size: 14px; font-weight: 700; color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.5px; flex: 1; margin: 0; padding: 0; border: none; } .aest-cat-chevron { display: inline-block; font-size: 20px; color: var(--brand-primary); transition: transform .2s; width: 14px; text-align: center; line-height: 1; } .aest-cat-group[open] > summary .aest-cat-chevron { transform: rotate(90deg); } /* Bouton renommer apparaissant au hover du summary catégorie */ .aest-cat-rename { opacity: 0; margin-left: 6px; font-size: 13px; padding: 2px 6px; transition: opacity .15s, background .15s; } .aest-cat-heading:hover .aest-cat-rename, .aest-cat-group[open] > summary .aest-cat-rename { opacity: 0.7; } .aest-cat-rename:hover { opacity: 1 !important; background: rgba(76, 29, 149, 0.08); } .aest-cat-count { font-weight: 600; color: var(--text-secondary); font-size: 12px; background: var(--bg-card); padding: 2px 10px; border-radius: 10px; border: 1px solid var(--border); } .aest-cat-table-wrap { padding: 4px 6px 8px; overflow-x: auto; } .aest-cat-actions-all { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; } /* « Tout déplier / Tout replier » placé EN HAUT (avant la liste des catégories) */ .aest-cat-actions-all.aest-cat-actions-top { margin-top: 0; margin-bottom: 12px; } /* ── Catégorie « Consultations » (par défaut) : fond violet + séparée ──── */ .aest-cat-consultations { border-color: #4C1D95; box-shadow: 0 2px 10px rgba(76, 29, 149, .18); } .aest-cat-consultations > summary, .aest-cat-consultations > summary:hover, .aest-cat-consultations[open] > summary { background: #4C1D95; border-bottom-color: rgba(255, 255, 255, .22); } .aest-cat-consultations > summary .aest-cat-name, .aest-cat-consultations > summary .aest-cat-chevron { color: #fff; } .aest-cat-consultations > summary .aest-cat-count { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .4); } .aest-cat-consultations > summary .aest-cat-rename { color: #fff; } .aest-cat-consultations > summary .aest-cat-rename:hover { background: rgba(255, 255, 255, .2); } /* Séparation visuelle entre « Consultations » et les autres catégories */ .aest-cat-separator { border-top: 1px dashed var(--border); margin: 16px 2px 18px; } .aest-cat-table { margin-bottom: 8px; } .aest-cat-table td { vertical-align: middle; } .aest-cat-desc { font-size: 12px; color: #64748b; margin-top: 3px; line-height: 1.4; } .aest-cat-row-inactive { opacity: 0.5; } .aest-cat-row-inactive strong { text-decoration: line-through; } .aest-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px; } .aest-badge-ok { background: #dcfce7; color: #15803d; } .aest-badge-off { background: #fef3c7; color: #92400e; } .aest-badge-info { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; text-transform: none; font-size: 10px; padding: 2px 7px; margin-left: 6px; } /* ── Édition inline dans le tableau du catalogue ─────────────────────── Les cellules .aest-cell sont des input/select stylés pour ressembler à du texte (pas de bordure) jusqu'à hover/focus. Au save, un flash discret confirme la persistance. */ .aest-cell { width: 100%; border: 1px solid transparent; background: transparent; padding: 4px 6px; font: inherit; color: inherit; border-radius: 5px; transition: border-color .12s, background .12s; } .aest-cell:hover { border-color: var(--border, #e2e8f0); background: var(--bg-hover, #f8fafc); } .aest-cell:focus { outline: none; border-color: var(--brand-primary, #4C1D95); background: #fff; box-shadow: 0 0 0 2px rgba(76, 29, 149, 0.12); } .aest-cell-num { text-align: right; max-width: 110px; } .aest-cell-select { cursor: pointer; max-width: 170px; } .aest-cell-name { font-weight: 600; } .aest-cell-saved { border-color: #10b981 !important; background: #d1fae5 !important; transition: border-color .6s, background .6s; } /* Ligne d'ajout d'un acte inline sous chaque catégorie */ .aest-cat-addrow { padding: 6px 12px 10px; background: var(--bg-card, #fff); border-top: 1px dashed var(--border, #e2e8f0); } .btn-add--inline { font-size: 12px; padding: 4px 10px; background: transparent; border: 1px dashed var(--brand-primary, #4C1D95); color: var(--brand-primary, #4C1D95); } .btn-add--inline:hover { background: var(--brand-primary-light, #f5f3ff); } .aest-cat-row-draft { background: #fffbeb; } .aest-cat-row-draft .aest-cell { background: #fef3c7; } /* ── Forfaits prédéfinis (presets, en tête du catalogue) ─────────────── */ .forfait-presets { margin-bottom: 18px; } .forfait-presets-body { padding: 12px 14px 14px; } .forfait-presets-hint { margin: 0 0 12px; font-size: 13px; color: var(--text-secondary, #64748b); } .forfait-preset-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .forfait-preset-row .fp-name { flex: 1; min-width: 180px; } .forfait-preset-row .fp-sep { font-size: 13px; color: var(--text-secondary, #64748b); } .forfait-presets-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; } .forfait-presets-msg { font-size: 13px; } .forfait-presets-msg.ok { color: #16a34a; } .forfait-presets-msg.err { color: #dc2626; } /* Responsive */ @media (max-width: 700px) { .aest-cat-filters { flex-direction: column; align-items: stretch; } .aest-cat-count-total { margin-left: 0; text-align: right; } .aest-cat-table td:nth-child(3), .aest-cat-table th:nth-child(3), .aest-cat-table td:nth-child(4), .aest-cat-table th:nth-child(4) { display: none; /* Masque durée et consentement sur petit écran */ } } /* Onglets Actes / Forfaits dans catalogue.html (Phase 6) */ .aest-cat-view-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 2px solid var(--border); } .aest-cat-view-tab { background: none; border: none; padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s; } .aest-cat-view-tab:hover { color: var(--brand-primary); } .aest-cat-view-tab.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); } /* ══════════════════════════════════════════════════════════════════════ ESTETICAPP — Plan de traitement (Phase 2) Classes préfixées aest-plan-* pour isolement. ══════════════════════════════════════════════════════════════════════ */ .aest-plan-workflow-hint { background: var(--brand-primary-light); border-left: 4px solid var(--brand-primary); padding: 12px 16px; border-radius: 8px; margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .aest-plan-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0 28px; } .aest-plan-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .aest-plan-kpi--planned { border-left: 4px solid #3b82f6; } .aest-plan-kpi--done { border-left: 4px solid #10b981; } .aest-plan-kpi--total { border-left: 4px solid var(--brand-primary); } .aest-plan-kpi-num { font-size: 1.6rem; font-weight: 700; color: var(--text-heading); } .aest-plan-kpi-lbl { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .aest-plan-section { margin-bottom: 28px; } /* ── Notes & Consultations (onglet Médical) ─────────────────── */ .nc-list { display: flex; flex-direction: column; gap: 10px; } .nc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .nc-card--note { border-left: 3px solid #F59E0B; } .nc-card--consult { border-left: 3px solid var(--brand-primary); } .nc-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; } .nc-badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; } .nc-badge--note { background: #FEF3C7; color: #92400E; } .nc-badge--consult { background: var(--brand-primary-light); color: var(--brand-primary); } .nc-date { color: var(--text-secondary); font-size: 12px; } .nc-title { font-weight: 600; color: var(--text-primary); font-size: 13px; } .nc-content { font-size: 13px; line-height: 1.5; white-space: pre-wrap; color: var(--text-primary); } /* ── Layout 2 colonnes (Actes) : À faire | Fait ───────────────── */ .aest-plan-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } @media (max-width: 900px) { .aest-plan-2col { grid-template-columns: 1fr; } } .aest-plan-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; min-width: 0; } .aest-plan-col-title { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--border); } .aest-plan-col-title--planned { color: #3b82f6; border-bottom-color: #bfdbfe; } .aest-plan-col-title--done { color: #10b981; border-bottom-color: #bbf7d0; } .aest-plan-col-count { background: var(--bg-hover); padding: 2px 8px; border-radius: 10px; font-size: 12px; color: var(--text-secondary); } .aest-plan-section-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--brand-primary-light); } .aest-plan-section-title--muted { color: var(--text-muted); border-bottom-color: var(--border); } .aest-plan-section-count { font-weight: 400; color: var(--text-muted); font-size: 12px; text-transform: none; letter-spacing: 0; } .aest-plan-dot { width: 10px; height: 10px; border-radius: 50%; } .aest-plan-dot--planned { background: #3b82f6; } .aest-plan-dot--done { background: #10b981; } .aest-plan-dot--cancelled { background: #94a3b8; } .aest-plan-list { display: flex; flex-direction: column; gap: 10px; } .aest-plan-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); transition: border-color .15s, box-shadow .15s; } .aest-plan-card:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-sm); } .aest-plan-card--planned { border-left: 4px solid #3b82f6; } .aest-plan-card--done { border-left: 4px solid #10b981; } .aest-plan-card--cancelled { border-left: 4px solid #94a3b8; opacity: 0.65; } .aest-plan-card-main { flex: 1; min-width: 0; } .aest-plan-card-label { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .aest-plan-card-meta { font-size: 13px; color: var(--text-secondary); } .aest-plan-card-notes { margin-top: 8px; font-size: 13px; color: var(--text-secondary); font-style: italic; background: var(--brand-primary-light); padding: 6px 10px; border-radius: 6px; } /* Note de RÉALISATION (clinique) — distincte des notes de planification : liseré teal cohérent avec la pastille « acte » du fil Consultation / Notes. */ .aest-plan-card-notes--real { background: #f0fdfa; border-left: 3px solid #14b8a6; font-style: normal; } /* Réglages → Import : deux cartes (catalogue + stock). */ .import-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .import-card { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 18px; background: var(--surface, #fff); display: flex; flex-direction: column; } .import-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .import-card-ico { font-size: 22px; } .import-card-title { margin: 0; font-size: 16px; font-weight: 700; } .import-card-desc { margin: 0 0 14px; color: var(--text-secondary, #475569); font-size: 13px; flex: 1; } .import-card-actions { display: flex; flex-wrap: wrap; gap: 8px; } .aest-plan-card-pills { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .aest-plan-pill { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 12px; background: var(--brand-primary-light); color: var(--brand-primary); font-weight: 500; } .aest-plan-card-photos { margin-top: 10px; display: flex; gap: 8px; } .aest-plan-photo-link { background: none; border: 1px dashed var(--border-input); border-radius: 6px; padding: 4px 10px; font-size: 12px; color: var(--brand-primary); cursor: pointer; } .aest-plan-photo-link:hover { background: var(--brand-primary-light); } .aest-plan-card-actions { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; } /* Actions du plan dans le TABLEAU : une seule ligne, alignées à droite, SANS retour à la ligne (l'ancienne classe .aest-plan-card-actions, prévue pour les cartes, wrappait → bouton « Marquer réalisé » + icônes empilés et lignes très hautes). Contenu des cellules centré verticalement pour un rendu aligné. */ .aest-plan-acts { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-end; gap: 4px; white-space: nowrap; width: 100%; } .aest-plan-acts .btn-sm { white-space: nowrap; } /* Largeurs de colonnes maîtrisées (table-layout fixed) : DATE étroite, ACTIONS large pour que « Marquer réalisé » + icônes ne soient pas tronqués, ACTE et DÉTAILS peuvent revenir à la ligne → lignes plus hautes. */ .aest-plan-table { table-layout: fixed; width: 100%; } .aest-plan-table col.aest-col-acte { width: 18%; } .aest-plan-table col.aest-col-date { width: 108px; } .aest-plan-table col.aest-col-montant { width: 92px; } .aest-plan-table col.aest-col-statut { width: 84px; } .aest-plan-table col.aest-col-actions { width: 292px; } .aest-plan-table td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; } /* Séparation NETTE entre chaque ligne du plan de soins. */ .aest-plan-table tbody td { border-bottom: 1.5px solid var(--border); } .aest-plan-table tbody tr:last-child td { border-bottom: none; } /* Acte (1re colonne) et Détails (4e) reviennent à la ligne. */ .aest-plan-table td.act-stack, .aest-plan-table td:nth-child(4) { white-space: normal; word-break: break-word; } .aest-plan-photos-hint { margin-top: 12px; padding: 10px 14px; background: var(--brand-primary-light); border-left: 3px solid var(--brand-primary); border-radius: 6px; font-size: 13px; color: var(--text-secondary); } .aest-plan-stock-product { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--bg-hover); border-radius: 8px; margin-bottom: 12px; } /* Multi-sélection produits (marquer réalisé) — #20 */ .md-prod-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px; background: var(--bg-card); } .md-prod-group { margin-bottom: 6px; } .md-prod-lab { position: sticky; top: 0; background: var(--bg-hover); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brand-primary); padding: 6px 10px; border-radius: 6px; z-index: 1; } .md-prod-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; } .md-prod-row:hover { background: var(--bg-hover); } .md-prod-row--on { background: var(--brand-primary-light); } .md-prod-check { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; } .md-prod-name { flex: 1; font-size: 14px; color: var(--text-primary); } .md-prod-stock { font-size: 12px; color: var(--text-muted); white-space: nowrap; } .md-prod-qty { width: 54px; flex-shrink: 0; padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; text-align: center; } .md-prod-qty:disabled { opacity: .4; } .md-prod-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 14px; } /* Responsive */ @media (max-width: 700px) { .aest-plan-summary { grid-template-columns: 1fr; } .aest-plan-card { flex-direction: column; } .aest-plan-card-actions { width: 100%; justify-content: flex-end; } } /* ══════════════════════════════════════════════════════════════════════ ESTETICAPP — Dashboard esthétique (Phase 8) ══════════════════════════════════════════════════════════════════════ */ .aest-dash-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; } .aest-dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .aest-dash-title { font-size: 18px; font-weight: 700; color: var(--brand-primary); margin: 0; } /* Sélecteur de période en toutes lettres (#15) */ .period-picker { display: flex; gap: 8px; flex-wrap: wrap; } .aest-period-label { margin: -8px 0 18px; font-size: 13px; font-weight: 600; color: var(--text-muted); } /* Cartes d'export (#16) */ .export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .export-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; } .export-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); } .export-card-desc { font-size: 13px; color: var(--text-muted); flex: 1; } .export-card .btn-primary { align-self: flex-start; padding: 8px 18px; font-size: 13px; } .aest-dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } .aest-kpi-card { background: var(--bg-hover); border-radius: 12px; padding: 16px; border-left: 4px solid var(--brand-accent); } .aest-kpi-card--ca { border-left-color: var(--brand-primary); background: var(--brand-primary-light); } .aest-kpi-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .aest-kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--text-heading); margin-top: 2px; } .aest-kpi-card--ca .aest-kpi-value { color: var(--brand-primary); } .aest-kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .aest-dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .aest-dash-card { background: var(--bg-hover); border-radius: 10px; padding: 16px 18px; } .aest-dash-card--wide { grid-column: 1 / -1; } .aest-dash-card-title { font-size: 14px; font-weight: 600; color: var(--text-heading); margin: 0 0 12px 0; } /* Top acts — bars horizontales */ .aest-bar-row { display: grid; grid-template-columns: 160px 1fr 140px; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; } .aest-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aest-bar-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; } .aest-bar-fill { height: 100%; background: var(--brand-primary); border-radius: 4px; transition: width 0.3s; } .aest-bar-value { text-align: right; font-weight: 600; color: var(--brand-primary); font-size: 12px; } /* Catégories */ .aest-cat-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .aest-cat-row:last-child { border-bottom: none; } .aest-cat-name { font-weight: 600; color: var(--text-heading); } .aest-cat-count { color: var(--text-muted); font-size: 12px; } .aest-cat-amount { font-weight: 700; color: var(--brand-primary); } /* États des devis (tuiles indépendantes, sans flèches/concept funnel) */ .aest-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .aest-funnel-step { text-align: center; padding: 14px 12px; background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); text-transform: uppercase; } .aest-funnel-step--highlight { border-color: #3b82f6; background: #dbeafe; color: #1e40af; } .aest-funnel-step--success { border-color: #10b981; background: #d1fae5; color: #065f46; } .aest-funnel-step--final { border-color: var(--brand-primary); background: var(--brand-primary-light); color: var(--brand-primary); } .aest-funnel-num { display: block; font-size: 1.4rem; font-weight: 700; margin-bottom: 2px; color: inherit; } @media (max-width: 700px) { .aest-dash-grid { grid-template-columns: 1fr; } .aest-bar-row { grid-template-columns: 1fr; gap: 4px; } .aest-bar-value { text-align: left; } .aest-funnel { grid-template-columns: repeat(2, 1fr); } } /* Contre-indications (Phase 7) */ .aest-ci-banner { margin-top: 8px; padding: 10px 14px; border-radius: 6px; font-size: 13px; line-height: 1.5; } .aest-ci-banner--absolute { background: #fef2f2; border-left: 4px solid #dc2626; color: #991b1b; } .aest-ci-banner--relative { background: #fef3c7; border-left: 4px solid #f59e0b; color: #78350f; margin-top: 6px; } /* ══════════════════════════════════════════════════════════════════════ ESTETICAPP — Devis (Phase 4) — classes aest-q-* ══════════════════════════════════════════════════════════════════════ */ .aest-q-table { margin-top: 8px; } .aest-q-actions { white-space: nowrap; display: flex; gap: 4px; flex-wrap: wrap; } .aest-q-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .aest-q-badge--draft { background: #e0e7ff; color: #3730a3; } .aest-q-badge--sent { background: #dbeafe; color: #1e40af; } .aest-q-badge--viewed { background: #e0f2fe; color: #075985; } .aest-q-badge--signed { background: #d1fae5; color: #065f46; } .aest-q-badge--rejected { background: #fee2e2; color: #991b1b; } .aest-q-badge--expired { background: #f3f4f6; color: #6b7280; } .aest-q-badge--converted { background: #ede9fe; color: #5b21b6; } .aest-q-lines { display: flex; flex-direction: column; gap: 6px; background: var(--bg-hover); border-radius: 8px; padding: 10px; } .aest-q-line { display: flex; flex-direction: column; gap: 6px; background: var(--bg-card); padding: 8px; border-radius: 6px; } .aest-q-line-row { display: flex; gap: 8px; align-items: center; } .aest-q-line-pkg { display: flex; align-items: center; padding-left: 4px; color: var(--text-secondary); } .aest-q-line .qline-label { flex: 1; min-width: 0; } .aest-q-line .qline-total { min-width: 80px; text-align: right; font-weight: 600; color: var(--brand-primary); font-size: 13px; } .aest-q-total { text-align: right; padding: 12px 16px; background: var(--brand-primary-light); border-left: 4px solid var(--brand-primary); border-radius: 8px; margin: 12px 0; font-size: 15px; color: var(--brand-primary); } .aest-q-total strong { font-size: 18px; margin-left: 8px; } .aest-q-send-note { margin-top: 10px; padding: 10px 14px; background: var(--brand-primary-light); border-left: 3px solid var(--brand-primary); border-radius: 6px; font-size: 13px; color: var(--text-secondary); } /* Picker catalogue dans la modal devis (remplace prompt natif) */ .aest-q-catalog-picker { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 340px; display: flex; flex-direction: column; overflow: hidden; } .aest-q-catalog-search { border: none; border-bottom: 1px solid var(--border); padding: 10px 14px; font-size: 13px; outline: none; background: var(--bg-card); color: var(--text-primary); } .aest-q-catalog-search:focus { border-bottom-color: var(--brand-primary); } .aest-q-catalog-list { overflow-y: auto; max-height: 280px; } .aest-q-catalog-item { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; text-align: left; padding: 10px 14px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); } .aest-q-catalog-item:last-child { border-bottom: none; } .aest-q-catalog-item:hover { background: var(--brand-primary-light); } .aest-q-catalog-item-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .aest-q-catalog-cat { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; } .aest-q-catalog-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aest-q-catalog-price { font-weight: 600; color: var(--brand-primary); margin-left: 12px; white-space: nowrap; } .aest-q-catalog-empty { padding: 20px 14px; text-align: center; color: var(--text-muted); font-size: 13px; font-style: italic; } @media (max-width: 700px) { .aest-q-line { flex-wrap: wrap; } .aest-q-line .qline-label { flex-basis: 100%; } } /* ════════════════════════════════════════════════════════════════════════ AJUST-MEDESTH 02/06/2026 — Mise en page de la navbar (page principale) Objectif : logo à gauche · sélecteur de centre à gauche (si présent) · barre de recherche centrée sur l'écran · langue / cloche / plein écran / mode nuit / déconnexion groupés à droite. Tous ces contrôles sont injectés en JS comme enfants directs de .navbar ; on les répartit via `order` + une marge auto, et on centre la recherche en absolu (hors flux). ════════════════════════════════════════════════════════════════════════ */ @media (min-width: 701px) { .navbar { justify-content: flex-start; } /* — Zone gauche : logo, sélecteur de centre, puis sélecteur de lieu — */ .navbar > .navbar-brand { order: 1; } .navbar > .center-switcher { order: 2; } .navbar > .location-switcher { order: 3; } /* Marge auto sur le DERNIER élément de gauche → pousse le reste à droite. Priorité : sélecteur de lieu > sélecteur de centre > logo. */ .navbar > .navbar-brand { margin-right: auto; } .navbar:has(> .center-switcher) > .navbar-brand { margin-right: 0; } .navbar:has(> .center-switcher) > .center-switcher { margin-right: auto; } /* Lieu présent (centre retiré post-#97) : la marge auto doit être portée par le SEUL sélecteur de lieu, sinon le logo conserve aussi `margin-right:auto` (règle ci-dessus) → DOUBLE marge auto → le sélecteur flotte au centre, sous la barre de recherche. On remet donc la marge du logo à 0 dans ce cas. */ .navbar:has(> .location-switcher) > .navbar-brand { margin-right: 0; } .navbar:has(> .location-switcher) > .center-switcher { margin-right: 0; } .navbar:has(> .location-switcher) > .location-switcher { margin-right: auto; } /* — Zone droite, dans l'ordre demandé — */ .navbar > #serveurBtn { order: 20; } /* Mac : espace fichiers */ .navbar > #mailBtn { order: 21; } /* Mac : webmail */ .navbar > .lang-switcher { order: 22; } .navbar > .notif-container { order: 23; } /* cloche */ .navbar > #fullscreenToggle { order: 24; } .navbar > #darkModeToggle { order: 25; } .navbar > #logoutBtn { order: 26; } /* — Recherche : centrée sur l'écran, hors flux — */ .navbar > .global-search-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex: none; width: min(440px, 36vw); max-width: 440px; margin: 0; } } /* AJUST-MEDESTH 02/06/2026 — Recentre le bloc « déconnexion + liens légaux » sur la page d'accueil (le .home-v2-footer du Mac avait perdu text-align). */ .home-v2-footer { display: flex; flex-direction: column; align-items: center; text-align: center; } /* ── Responsive tablette (BACKLOG 2026-06) ────────────────────────────────── Les règles de débordement vivaient sous @media 768px : la tablette portrait (820×1180) passait au travers → tableau stocks coupé, champs catalogue tronqués. On étend le filet jusqu'à 1100px + défilement explicite. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 1100px) { .table-scroll > .data-table { min-width: 760px; } .aest-cat-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .aest-cat-table { min-width: 640px; } .aest-cell-name { min-width: 150px; } } /* Zones tactiles : >= 44 px quand le pointeur est tactile (iPad/téléphone). */ @media (pointer: coarse) { .btn-icon { min-width: 44px; min-height: 44px; } .stock-btn { min-height: 42px; } .sub-tab-btn, .ag-durbtn, .sch-durbtn { min-height: 44px; } } /* ════════════════════════════════════════════════════════════════════════ REFONTE « L'ATELIER » — COUCHE GLOBALE (Lots 0+1, 06/2026) ════════════════════════════════════════════════════════════════════════ Direction REFONTE-UI-ATELIER.md : papier blanc cassé, serif éditoriale, violet Mediboard, sidebar groupée. Cette couche est APPENDIE : à spécificité égale, elle gagne sur l'historique. Le mode nuit a été SUPPRIMÉ du fichier (décision produit — plus aucun body.dark-theme). */ /* ── Polices auto-hébergées (fonts/*.woff2, sous-ensemble latin) ───────── */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/fraunces-400.woff2') format('woff2')} @font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/fraunces-400-italic.woff2') format('woff2')} @font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/fraunces-500.woff2') format('woff2')} @font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/fraunces-600.woff2') format('woff2')} @font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/outfit-400.woff2') format('woff2')} @font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/outfit-500.woff2') format('woff2')} @font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/outfit-600.woff2') format('woff2')} /* ── Typographie de base ──────────────────────────────────────────────── */ body{font-family:var(--font-atelier-sans);font-size:14px} h1,h2,h3, .modal-title,.admin-section-title,.fiche-section-title,.sub-view-title, .hub-card-title,.auth-card h1,.ag-title{ font-family:var(--font-atelier-serif);font-weight:500;letter-spacing:-.01em; color:var(--text-heading); } /* ── Boutons en pilule ────────────────────────────────────────────────── */ .btn-primary,.btn-add,.btn-ghost,.btn-sm{border-radius:99px} /* Boutons pleins violets : TEXTE BLANC (sinon .btn-add gardait le violet de sa règle de base → texte violet sur fond violet, invisible — bug Slack). */ .btn-primary,.btn-add{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff} .btn-primary:hover,.btn-add:hover{background:var(--brand-primary-dark);border-color:var(--brand-primary-dark);color:#fff} .btn-ghost{border:1px solid var(--border);background:transparent;color:var(--text-primary)} .btn-ghost:hover{border-color:var(--brand-primary);background:transparent;color:var(--brand-primary)} /* ── Cartes / sections : coins 14, liseré, ombre douce ────────────────── */ .admin-section,.modal-box,.hub-card,.auth-card,.fiche-section, .stat-card,.dash-card{ border-radius:var(--radius-card); border:1px solid var(--border); box-shadow:var(--shadow-soft); } /* ── Tableaux : en-têtes éditoriaux ───────────────────────────────────── */ .data-table th{ font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);font-weight:600;background:transparent; } .data-table td{border-color:var(--hair-light)} /* ════════ COQUILLE : SIDEBAR + TOPBAR (topnav.js v6) ════════ */ body.has-sidenav{padding-left:248px} .side-nav{ position:fixed;left:0;top:0;bottom:0;width:248px;z-index:60; /* Bandeau SOMBRE (demande utilisateur) : le fond reprend l'encre qui servait au menu sélectionné ; le menu actif passe en blanc cassé = fond du site, avec une languette vers l'écran. overflow:visible pour laisser dépasser la languette (réactivé en scroll sous 1280px, cf. media query). */ /* Pas de bordure droite : elle dessinait un trait sombre entre la section blanc cassé du logo et le topbar. Le bandeau sombre se détache déjà du blanc cassé par le contraste de couleur. */ background:var(--ink);border-right:none; padding:24px 14px 14px;display:flex;flex-direction:column;gap:3px; /* overflow VISIBLE : le menu du sélecteur de lieu (en bas, dans .sn-user) doit pouvoir DÉBORDER de la sidebar — sinon les noms sont coupés et les items non cliquables (le changement de lieu « ne marche pas »). Le défilement des menus est contenu par .sn-scroll (flex:1 + overflow-y), donc .sn-user reste collé en bas SANS que la sidebar clippe le popup. */ overflow:visible; } .side-brand{display:flex;align-items:center;padding:0 10px;margin-bottom:2px;cursor:pointer} .side-brand img{height:30px;width:auto} .side-brand-sub{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);padding:2px 10px 18px} /* Zone défilante des menus : prend la hauteur restante et défile seule pour que .sn-user (bloc cabinet) reste TOUJOURS visible en bas, même menus dépliés. margin/padding-right : on étend la zone jusqu'au bord droit du bandeau pour que le fond de l'item actif (margin-right:-14px) atteigne toujours le bord ; seul le petit ergot ::after qui dépasse dans la page est rogné (compromis assumé). */ .sn-scroll{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-height:0; overflow-y:auto;overflow-x:hidden;margin-right:-14px;padding-right:14px; scrollbar-width:thin;scrollbar-color:rgba(251,247,239,.22) transparent} .sn-scroll::-webkit-scrollbar{width:6px} .sn-scroll::-webkit-scrollbar-thumb{background:rgba(251,247,239,.2);border-radius:3px} .sn-group{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,247,239,.42);padding:16px 10px 6px} /* En-têtes de groupe DÉPLIANTS (Activité / Cabinet) : repli mémorisé pour raccourcir la sidebar et révéler le bloc cabinet (logo + nom) en bas. */ .sn-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%; box-sizing:border-box;font-family:inherit;cursor:pointer;border:none; /* Bien VISIBLE comme un en-tête dépliable : texte plus clair, fond au survol. */ color:rgba(251,247,239,.78);font-size:11.5px;background:rgba(251,247,239,.05); border-radius:8px;transition:background .15s,color .15s} .sn-group-toggle:hover{background:rgba(251,247,239,.12);color:#FBF7EF} /* Chevron = pastille ronde claire qui pivote (▾ ouvert → ▸ replié). */ .sn-group-chev{font-size:11px;font-weight:700;color:#FBF7EF;opacity:.92;flex:none; width:19px;height:19px;display:grid;place-items:center;border-radius:50%; background:rgba(251,247,239,.18);transition:transform .15s ease;margin-left:8px} .sn-group-toggle:hover .sn-group-chev{background:rgba(251,247,239,.3)} .sn-group-toggle[aria-expanded="false"] .sn-group-chev{transform:rotate(-90deg)} .sn-group-items{display:flex;flex-direction:column;gap:3px} .sn-group-toggle[aria-expanded="false"] + .sn-group-items{display:none} .sn-item{ display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px; color:rgba(251,247,239,.74);font-weight:500;font-size:13.5px;text-decoration:none; transition:background .15s,color .15s;position:relative; } .sn-item:hover{background:rgba(251,247,239,.09);color:#FBF7EF} /* Menu ACTIF = blanc cassé (= fond du site global), encre sombre. Il s'étend jusqu'au bord droit du bandeau (margin-right négatif) et pousse une petite languette dans l'écran (::after) → « ce menu est celui affiché ». */ .sn-item.active{ background:var(--paper);color:var(--ink);font-weight:600; margin-right:-14px;padding-right:14px;border-radius:10px 0 0 10px;z-index:1; } .sn-item.active::after{ content:"";position:absolute;right:-9px;top:5px;bottom:5px;width:14px; background:var(--paper);border-radius:0 9px 9px 0; } .sn-item .glyph{width:18px;text-align:center;font-family:var(--font-atelier-serif);font-size:15px;opacity:.85;flex:none} .sn-item.active .glyph{opacity:1} .sn-item .nav-badge{ margin-left:auto;font-size:10.5px;font-weight:700;border-radius:99px; padding:1px 7px;background:var(--alert-soft);color:var(--alert-ink); } .sn-item svg{width:15px;height:15px;flex:none} .sn-user{margin-top:auto;flex-shrink:0;border-top:1px solid rgba(251,247,239,.14);padding-top:12px;display:flex;gap:10px;align-items:center;min-height:48px} .sn-avatar{width:34px;height:34px;border-radius:50%;background:rgba(251,247,239,.16);color:#FBF7EF;display:grid;place-items:center;font:600 13px var(--font-atelier-serif);flex:none} .sn-user-info{min-width:0} .sn-user-info b{display:block;font-size:12.5px;font-weight:600;color:#FBF7EF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sn-user-info span{display:block;font-size:11px;color:rgba(251,247,239,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sn-swap{margin-left:auto;border:1px solid rgba(251,247,239,.25);border-radius:8px;width:28px;height:28px;display:grid;place-items:center;cursor:pointer;color:rgba(251,247,239,.7);background:transparent;flex:none} .sn-swap:hover{border-color:var(--color-violet-300);color:var(--color-violet-300)} /* Topbar (garde la classe .navbar : les satellites s'y montent) */ .navbar{ /* Même blanc cassé que le logo et la zone de travail, aucune séparation. */ background:var(--paper); border-bottom:none;height:60px;padding:0 24px;gap:10px; justify-content:flex-start; } .navbar .navbar-brand{display:none} .tb-btn{border:none;cursor:pointer;font:500 13px var(--font-atelier-sans);border-radius:99px;padding:9px 16px;transition:.15s;white-space:nowrap} .tb-ai{background:var(--brand-soft);color:var(--brand-primary);border:1px solid #DDD2F7} .tb-ai:hover{background:#E3DAFB} .tb-new{background:var(--ink);color:#FBF7EF;position:relative} .tb-new:hover{background:#352E3B} .tb-menu{ position:absolute;top:calc(100% + 6px);right:0;background:var(--bg-card); border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-dropdown); min-width:190px;padding:6px;z-index:80;display:none; } .tb-menu.open{display:block} .tb-menu a{display:flex;gap:9px;align-items:center;padding:9px 12px;border-radius:8px;font-size:13px;color:var(--text-primary);text-decoration:none} .tb-menu a:hover{background:var(--paper-hover)} .sn-burger{display:none;border:1px solid var(--border);background:var(--bg-card);border-radius:9px;width:38px;height:38px;cursor:pointer;font-size:16px;color:var(--text-primary);flex:none} .sn-overlay{display:none;position:fixed;inset:0;background:rgba(34,29,33,.35);z-index:59} /* Recherche globale en pilule */ .global-search-input-wrap{border:1px solid var(--border)!important;background:var(--bg-card)!important;border-radius:99px!important} .global-search-input{background:transparent!important} #logoutBtn{margin-left:0} /* ── Drawer < 1280 px (tablettes ET mobiles) ────────────────────────────── Seuil relevé de 1100 → 1280 : en tablette PAYSAGE (1180px), la sidebar fixe mangeait 248px et les règles responsive internes des pages (calées sur la largeur de FENÊTRE) ne se déclenchaient pas → overflow (E2E 09). */ @media (max-width:1280px){ body.has-sidenav{padding-left:0} .side-nav{transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.18);overflow-y:auto} .side-nav.open{transform:none} .sn-burger{display:grid;place-items:center} .sn-overlay.show{display:block} .navbar{padding:0 12px} /* En drawer/rail le bandeau ne touche pas l'écran : actif = pilule normale, sans languette (qui serait rognée par le scroll). */ .sn-item.active{margin-right:0;padding-right:10px;border-radius:10px} .sn-item.active::after{display:none} } /* ════ Coquille MOBILE (spec Atelier F) : tab-bar 4+1 + FAB ＋ Nouveau ════ Affichée seulement ≤700 px (téléphones). Tablette/desktop inchangés. */ .sn-tabbar{display:none} .sn-tab-create{display:none} @media (max-width:700px){ .sn-tabbar{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:58; background:var(--bg-card);border-top:1px solid var(--hair); height:58px;padding-bottom:env(safe-area-inset-bottom,0); } .sn-tab{ flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; border:none;background:none;cursor:pointer;text-decoration:none; color:var(--ink-2);font:600 9.5px var(--font-atelier-sans);padding:6px 2px; } .sn-tab span:not(.glyph){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .sn-tab .glyph{font-family:var(--font-atelier-serif);font-size:19px;line-height:1;opacity:.9} .sn-tab.active{color:var(--brand-primary)} .sn-tab.active .glyph{opacity:1} /* ＋ CENTRAL surélevé (spec Atelier §3) : rond fond ink, déborde au-dessus. */ .sn-tab-create{ display:grid;place-items:center;flex:0 0 auto;align-self:center; width:48px;height:48px;border-radius:50%;border:none;cursor:pointer; margin:0 6px;transform:translateY(-12px); background:var(--ink,#2B2630);color:#FBF7EF;font-size:26px;line-height:1; box-shadow:0 5px 14px rgba(0,0,0,.28); } /* le contenu ne passe pas sous la barre d'onglets */ body.has-sidenav{padding-bottom:62px} /* burger du haut redondant avec « Plus » → masqué (déclutter la topbar) */ .sn-burger{display:none} /* le bouton ✨ de la topbar ouvre l'assistante → on masque son FAB flottant pour ne pas chevaucher la barre d'onglets. */ body .aia-fab{display:none!important} /* menu « Nouveau » centré au-dessus du ＋ central */ .navbar .tb-menu{position:fixed;left:50%;transform:translateX(-50%);bottom:74px;right:auto;top:auto} } /* ════ Tableaux → CARTES en mobile (spec Atelier §3 : « jamais de tableau ») ════ Opt-in via .cards-mobile ; chaque porte un data-label. Sous 700px chaque ligne devient une carte, la 1re cellule en fait le titre. N'affecte QUE les tableaux préparés → aucun risque pour le desktop ni les autres tableaux. */ @media (max-width:700px){ table.cards-mobile thead{display:none} table.cards-mobile,table.cards-mobile tbody{display:block;width:100%} table.cards-mobile tr{display:block;background:var(--bg-card);border:1px solid var(--border); border-radius:12px;padding:10px 14px;margin-bottom:10px} table.cards-mobile td{display:flex;justify-content:space-between;align-items:center;gap:14px; padding:6px 0;border:none;text-align:right;font-size:13.5px;min-height:32px} table.cards-mobile td::before{content:attr(data-label);font-weight:600;color:var(--text-secondary); text-align:left;flex:none;font-size:12.5px} table.cards-mobile td:not([data-label])::before{content:none} table.cards-mobile td:first-child{justify-content:flex-start;font-weight:700;font-size:15px; border-bottom:1px solid var(--border-light,var(--hair));padding:2px 0 9px;margin-bottom:4px} table.cards-mobile td:first-child::before{content:none} /* le wrapper de défilement n'a plus rien à faire défiler en mode cartes */ .table-scroll:has(table.cards-mobile),.xl-wrap:has(table.cards-mobile){overflow:visible} } /* ════ Coquille TABLETTE (spec Atelier E) : rail d'icônes 68 px (701–1280) ════ Persistant (plus de drawer) : icône + micro-libellé. Reprend la sidebar existante réduite — aucune dépendance JS, navigation E2E inchangée (les liens .side-nav a restent visibles + leur texte intact). */ @media (min-width:701px) and (max-width:1280px){ body.has-sidenav{padding-left:68px} .side-nav{transform:none!important;width:68px;padding:16px 6px 10px;box-shadow:none;gap:2px} .side-brand{justify-content:center;margin:-16px -6px 10px;padding:12px 4px} /* Rail 68px : logo complet masqué, pétale seul (priorité forcée sur la règle de base plus tardive). */ .side-brand .sb-logo{display:none!important} .side-brand .sb-pic{display:block!important;width:30px;height:30px} .side-brand img{height:30px} .sn-group{display:none} /* Rail : pas d'en-tête → on ignore le repli, les icônes restent visibles. */ .sn-group-items{display:flex!important} .sn-item{position:relative;flex-direction:column;gap:3px;padding:8px 2px;text-align:center; font-size:8.5px;line-height:1.1;font-weight:600;border-radius:9px} .sn-item .glyph{width:auto;font-size:18px;opacity:.9} .sn-item span[data-i18n]{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58px} .sn-item .nav-badge{position:absolute;top:3px;right:6px;margin:0;padding:0 5px} .sn-addmod{justify-content:center;padding:8px 2px;font-size:18px} .sn-addmod span{display:none} .sn-user{justify-content:center;padding-top:10px} /* Rail 68px : on neutralise le décalage droit de .sn-scroll (inutile ici). */ .sn-scroll{margin-right:0;padding-right:0} .sn-user-info,.sn-swap,.sn-user .center-switcher,.sn-user .location-switcher{display:none} .sn-burger{display:none!important} .navbar{padding:0 16px} } /* Atelier : la recherche revient dans le FLUX de la topbar (l'ancienne règle la centrait en absolu sur l'écran → chevauchait ✨/＋ avec la sidebar). */ .navbar > .global-search-container{ /* flex-grow dominant (6 vs le spacer flex:1 de la topbar) → la recherche prend l'essentiel de l'espace libre au lieu de le partager à moitié. */ position:static;transform:none;width:auto;flex:6 1 360px; min-width:160px;max-width:680px;margin:0; } @media (max-width:1280px){ .global-search-kbd{display:none} } /* Home hub : sous la coquille, la marque/déconnexion locales sont en double. */ body.has-sidenav .home-v2-brand img{display:none!important} body.has-sidenav .home-v2-logout{display:none} /* Ajustements coquille (11/06 soir) : logo plus grand, centre en bas à gauche avec l'utilisateur (widget center-switcher déplacé dans .sn-user : bouton d'origine masqué — la maison 🏠 déclenche — menu vers le HAUT). */ .side-brand img{height:42px} .sn-user .center-switcher{position:static;margin:0!important;width:0;overflow:visible} .sn-user .center-switcher>#centerSwitchBtn{display:none!important} .sn-user{position:relative} .sn-user .center-switcher-menu{ top:auto!important;bottom:calc(100% + 8px)!important; left:0!important;right:auto!important; } /* Idem pour le changement de LIEU (sélecteur actif depuis la migration centres→lieux) : widget déplacé dans .sn-user, bouton d'origine masqué (la flèche ⇄ déclenche), menu vers le HAUT. */ .sn-user .location-switcher{position:static;margin:0!important;width:0;overflow:visible} .sn-user .location-switcher>#locationSwitchBtn{display:none!important} .sn-user .location-switcher-menu{ top:auto!important;bottom:calc(100% + 8px)!important; left:0!important;right:auto!important; } /* ════════ LOT 2 — ACCUEIL ÉDITORIAL (Atelier) ════════ */ .home-at{max-width:1180px;margin:0 auto;padding:30px 28px 60px} .home-at .hello h1{font:500 40px/1.15 var(--font-atelier-serif);letter-spacing:-.01em;color:var(--text-heading)} .home-at .hello h1 em{font-style:italic;color:var(--brand-primary)} .home-at .hello p{color:var(--text-secondary);margin-top:8px;font-size:15px} .at-kpis{display:grid;grid-template-columns:repeat(4,1fr);margin:28px 0 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .at-kpi{padding:18px 20px;border-left:1px solid var(--border)} .at-kpi:first-child{border-left:none;padding-left:2px} .at-kpi .lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .at-kpi .val{font:500 30px/1.2 var(--font-atelier-serif);margin-top:6px;color:var(--text-heading)} .at-kpi .val small{font-size:15px;color:var(--text-secondary)} .at-kpi .delta{font-size:12px;color:var(--text-secondary);margin-top:3px} .grid-2at{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;align-items:start} .atcol{display:grid;gap:20px} .atcard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);padding-bottom:12px} .atcard-h{display:flex;align-items:baseline;gap:10px;padding:16px 20px 0} .atcard-h h3{font:600 16.5px var(--font-atelier-serif);color:var(--text-heading)} .atcard-h .sub{font-size:12.5px;color:var(--text-secondary)} .atcard-h .link{margin-left:auto;font-size:12.5px;color:var(--brand-primary);font-weight:600;cursor:pointer;text-decoration:none} .at-rdv{display:flex;align-items:center;gap:12px;padding:11px 20px;border-top:1px solid var(--hair-light);font-size:13.5px} .at-rdv:first-of-type{border-top:none} .at-rdv .t{font:500 16px var(--font-atelier-serif);width:50px;color:var(--text-heading)} .at-rdv .who b{font-weight:600;font-size:13.5px;display:block;color:var(--text-primary)} .at-rdv .who span{font-size:12px;color:var(--text-secondary)} .at-rdv .end{margin-left:auto} .at-nowline{display:flex;align-items:center;gap:10px;padding:2px 20px;color:var(--brand-primary);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase} .at-nowline::before,.at-nowline::after{content:"";flex:1;height:1px;background:var(--brand-primary);opacity:.35} .at-row{display:flex;align-items:center;gap:10px;padding:11px 20px;border-top:1px solid var(--hair-light);font-size:13px} .at-row:first-of-type{border-top:none} .at-row .ref{font:500 13.5px var(--font-atelier-serif);min-width:80px} .at-row .amt{margin-left:auto;font-weight:600;white-space:nowrap} .at-row a{color:inherit;text-decoration:none} .at-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;border-radius:99px;padding:2px 9px;white-space:nowrap} .at-c-ok{background:var(--ok-soft);color:var(--ok-ink)} .at-c-wait{background:var(--wait-soft);color:var(--wait-ink)} .at-c-alert{background:var(--alert-soft);color:var(--alert-ink)} .at-c-brand{background:var(--brand-soft);color:var(--brand-primary)} .at-c-neutral{background:var(--paper-hover);color:var(--text-secondary)} @media (max-width:1080px){.grid-2at{grid-template-columns:1fr}.at-kpis{grid-template-columns:1fr 1fr}.at-kpi{border-left:none;padding-left:2px}} /* ── Lot 4 : en-tête patiente éditorial (onglet Synthèse) ─────────────── */ .pat-head-at{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .pat-avatar-at{width:58px;height:58px;border-radius:50%;background:var(--ok-soft);color:var(--ok-ink);display:grid;place-items:center;font:500 22px var(--font-atelier-serif);flex:none} .pat-head-at h2{font:500 28px var(--font-atelier-serif);color:var(--text-heading);margin:0} .pat-meta-at{font-size:13px;color:var(--text-secondary);margin-top:2px} .pat-meta-at b{color:var(--text-primary)} .pat-chips-at{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap} .pat-actions-at{margin-left:auto;display:flex;gap:8px;align-items:center} /* ── Lot 6 : stock — jauges de niveau + matériovigilance ──────────────── */ .lvl-at{width:110px;height:6px;border-radius:99px;background:var(--paper-hover);overflow:hidden;display:inline-block;vertical-align:middle} .lvl-at i{display:block;height:100%;border-radius:99px;background:var(--ok)} .lvl-at.warn i{background:var(--wait)} .lvl-at.low i{background:#C0564A} .lvl-cap{font-size:11.5px;color:var(--text-secondary);margin-left:8px;vertical-align:middle} .trace-at{display:flex;align-items:center;gap:12px;padding:16px 20px;margin-top:18px;flex-wrap:wrap} .trace-at b{font:600 15px var(--font-atelier-serif)} .trace-at input{border:1px solid var(--border-input);border-radius:9px;padding:9px 12px;font:13.5px var(--font-atelier-sans);width:170px;background:var(--paper-alt)} .trace-at .hint{font-size:12px;color:var(--text-secondary);font-style:italic} .trace-at .res{flex-basis:100%;font-size:13px} /* ── Wordmark sidebar (pictogramme + logo TEXTE du site, violet) ── */ /* La SECTION du logo (haut-gauche) est BLANC CASSÉ PLEINE LARGEUR, bord à bord (pas une carte avec du sombre autour — demande utilisateur). Les marges négatives annulent EXACTEMENT le padding de la sidebar (24px haut, 14px côtés) → le blanc va jusqu'aux bords. Le logo violet s'affiche sur son fond natif. */ .side-brand{display:flex;flex-direction:row;align-items:center;gap:10px; margin:-24px -14px 20px;padding:22px 18px;cursor:pointer; background:var(--paper)} /* Mode large : logo CANONIQUE complet (Outfit embarqué) ; pétale réservé au rail 68px (basculé dans la media query tablette). */ .side-brand .sb-logo{display:block;height:40px;width:auto;flex:none} .side-brand .sb-pic{display:none} .side-brand .sb-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0} /* Wordmark sur la carte blanc cassé du logo → violet de marque (rendu natif). */ .sb-word{font:300 27px/1.05 var(--font-atelier-sans);color:var(--brand-primary);letter-spacing:.005em} .sb-word b{font-weight:700} .sb-sub{font-size:11px;font-weight:300;letter-spacing:.3em;text-transform:uppercase; color:var(--brand-primary);opacity:.8;padding-left:2px} /* ── Ordonnance vs Bilan biologique : sélecteur segmenté + badge (partagé fiche patient + ordonnances/bilans types). En mode bilan, .rx-posology est masqué (une ligne = juste l'analyse demandée). ── */ .rx-typeseg{display:flex;gap:8px;margin:0 0 14px} .rx-typebtn{flex:1;padding:10px 14px;border:1.5px solid var(--border,#d1d5db);border-radius:10px; background:var(--bg-card,#fff);font-size:13.5px;font-weight:600;cursor:pointer;color:var(--text-secondary,#475569)} .rx-typebtn:hover{border-color:var(--brand-primary,#6D28D9);color:var(--brand-primary,#6D28D9)} .rx-typebtn.on{background:var(--brand-primary,#6D28D9);border-color:var(--brand-primary,#6D28D9);color:#fff} .rx-bilan .rx-posology{display:none !important} .rx-typebadge{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700; padding:1px 7px;border-radius:99px;background:var(--brand-soft,#ede9fe); color:var(--brand-primary,#6D28D9);vertical-align:middle} /* ── Agenda : interrupteur Jour/Semaine en pilule (sur la ligne de navigation) ── */ .ag-seg{display:flex;border:1px solid var(--border);border-radius:99px;overflow:hidden;background:var(--bg-card)} .ag-seg button{border:none;background:transparent;padding:8px 16px;font:500 13px var(--font-atelier-sans);color:var(--text-secondary);cursor:pointer} .ag-seg button.on{background:var(--ink);color:#FBF7EF} /* ── Tableaux « Excel » (facturation Devis/Factures) ── */ .xl-wrap{overflow-x:auto} table.xl{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--bg-card)} .xl th{position:sticky;top:0;background:var(--bg-card);text-align:left;font-size:10.5px; letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600; padding:11px 12px 7px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;white-space:nowrap} .xl th .arrow{font-size:9px;margin-left:4px;color:var(--brand-primary)} .xl .xl-filters th{padding:4px 8px 8px;cursor:default} .xl .xl-filters input{width:100%;min-width:64px;box-sizing:border-box;border:1px solid var(--hair-light); border-radius:7px;padding:5px 8px;font:12px var(--font-atelier-sans);background:var(--paper-alt)} .xl td{padding:10px 12px;border-bottom:1px solid var(--hair-light);white-space:nowrap} .xl tbody tr{cursor:pointer} .xl tbody tr:hover{background:var(--paper-alt)} .xl .num{text-align:right;font-variant-numeric:tabular-nums} .xl-count{font-size:12px;color:var(--text-secondary);padding:10px 12px} /* ── Fiche patient — fidélité maquette Atelier (11/06 soir) ────────────── En-tête éditorial partagé au-dessus d'onglets FINS soulignés (violet), Synthèse : plan-steps à puces, notes datées, photos 4/5, contre-indic. */ .patient-sticky-bar{position:static;background:transparent;border:none;border-radius:0; padding:0;margin-bottom:4px;box-shadow:none;gap:0} .crumb-at{font-size:12.5px;color:var(--text-secondary);margin:2px 0 16px} .crumb-at a{color:var(--brand-primary);text-decoration:none;font-weight:500} .crumb-at b{color:var(--text-primary)} .pat-avatar-at{width:64px;height:64px;font-size:24px} .pat-head-at h2{font-size:32px} .pat-chips-at{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap} .pat-actions-at{margin-left:auto;display:flex;gap:9px;align-items:center} .btn-ai-sm{background:var(--brand-soft);color:var(--brand-deep);border:1px solid var(--brand-soft); border-radius:99px;padding:8px 13px;cursor:pointer;font-size:14px;line-height:1} .btn-ai-sm:hover{filter:brightness(.97)} /* Onglets fins façon maquette : texte + soulignement, barre hairline. */ /* flex-wrap (et NON overflow-x:auto) : un overflow clippait le menu déroulant « Autres ▾ » qui s'ouvre sous la barre (bug Slack « Autre ouvre un menu invisible »). Sur écran étroit les onglets passent à la ligne. */ .sub-tab-bar{display:flex;flex-wrap:wrap;gap:16px 22px;border:none;border-bottom:1px solid var(--border); border-radius:0;background:transparent;box-shadow:none;padding:0;margin:20px 0 22px; position:sticky;top:0;background:var(--bg-page);z-index:30} .sub-tab-btn{background:transparent;border:none;border-radius:0;box-shadow:none; padding:11px 2px;font:500 13.5px var(--font-atelier-sans);color:var(--text-secondary); border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap} .sub-tab-btn:hover{color:var(--text-primary);background:transparent} .sub-tab-btn.active{color:var(--text-primary);background:transparent; border-bottom-color:var(--brand-primary)} /* position:relative → la pastille rouge (.sub-tab-badge, top:-4px) s'ancre au bouton et n'est plus coupée en haut (bug Slack « bulles rouges coupées »). */ .sub-tab-btn{position:relative} #subTabMoreMenu .sub-tab-btn{border-bottom:none;padding:9px 12px;text-align:left;width:100%} /* Synthèse : étapes du plan de soins (maquette) */ .plan-step{display:flex;gap:14px;padding:14px 20px;border-top:1px solid var(--hair-light)} .plan-step:first-of-type{border-top:none} .ps-dot{width:12px;height:12px;border-radius:50%;margin-top:4px;flex:none} .ps-done{background:var(--ok)} .ps-next{background:var(--wait)} .ps-idea{background:transparent;border:2px solid var(--ink-3)} .plan-step .body{flex:1;min-width:0} .plan-step .body b{font-weight:600;font-size:14px;display:block} .plan-step .when{font-size:12.5px;color:var(--text-secondary);margin-top:1px;display:block} .plan-step .price{font:500 16px var(--font-atelier-serif);margin-left:auto;white-space:nowrap} .renew-note{margin:8px 20px 14px;background:var(--ok-soft);border-radius:10px; padding:10px 13px;font-size:13px;color:var(--ok-ink)} .note-at{padding:13px 20px;border-top:1px solid var(--hair-light)} .note-at:first-of-type{border-top:none} .note-at .d{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3); display:flex;gap:8px;align-items:center} .note-at p{font-size:13.5px;color:var(--text-primary);margin:5px 0 0;line-height:1.5} .photos-at{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 20px 4px} .ph-at{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden; background:var(--paper-hover);display:grid;place-items:center} .ph-at img{width:100%;height:100%;object-fit:cover;display:block} .ph-at .tag{position:absolute;left:8px;bottom:8px;background:rgba(26,21,32,.78); color:#FBF7EF;font-size:10.5px;border-radius:6px;padding:3px 8px;letter-spacing:.06em} .ph-cap-at{padding:6px 20px 10px;font-size:12.5px;color:var(--text-secondary)} .ci-row-at{display:flex;gap:10px;padding:10px 20px;border-top:1px solid var(--hair-light); font-size:13.5px;align-items:center} .ci-row-at:first-of-type{border-top:none} .ci-row-at .st{margin-left:auto} /* ── Stock — fidélité maquette Atelier (table stk, jauges, matériovigilance) */ .stock-alerts{display:flex;gap:9px;margin:0 0 16px;flex-wrap:wrap} table.stk{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--bg-card)} .stk th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);font-weight:600;padding:14px 18px;border-bottom:1px solid var(--border)} .stk td{padding:13px 18px;border-bottom:1px solid var(--hair-light);vertical-align:middle} .stk tr:last-child td{border-bottom:none} .stk .prod b{font-weight:600;display:block} .stk .prod span{font-size:12px;color:var(--text-secondary)} .stk .lot{font-size:12.5px;color:var(--text-secondary)} .stk tr.click{cursor:pointer} .stk tr.click:hover td{background:var(--paper-alt)} .lvl{width:120px;height:6px;border-radius:99px;background:var(--paper-hover);overflow:hidden; display:inline-block;vertical-align:middle} .lvl i{display:block;height:100%;border-radius:99px;background:var(--ok)} .lvl.warn i{background:var(--wait)} .lvl.low i{background:var(--alert,#B4544A)} .lvl-cap2{font-size:12.5px;color:var(--text-secondary);margin-left:8px;vertical-align:middle} .trace-at{display:flex;align-items:center;gap:12px;padding:18px 20px;flex-wrap:wrap} .trace-at b{font:600 15px var(--font-atelier-serif)} .trace-at input{border:1px solid var(--border);border-radius:8px;padding:9px 12px; font:13.5px var(--font-atelier-sans);width:185px;background:var(--bg-card)} .trace-at .hint{font-size:12.5px;color:var(--text-secondary);font-style:italic} /* ── Sidebar : « ⊕ Ajouter un module » (maquette) + notice modules ── */ .sn-addmod{margin:14px 4px 0;border:1.5px dashed rgba(251,247,239,.28);border-radius:10px; padding:9px 10px;color:rgba(251,247,239,.7);font:500 13px var(--font-atelier-sans); display:flex;gap:9px;align-items:center;cursor:pointer;background:transparent;text-align:left} .sn-addmod:hover{border-color:var(--color-violet-300);color:#FBF7EF} .sn-modnotice{position:fixed;inset:0;background:rgba(26,21,32,.45);z-index:1200; display:flex;align-items:center;justify-content:center;padding:20px} .sn-modnotice-card{background:var(--bg-card);border:1px solid var(--border); border-radius:var(--radius-card,14px);box-shadow:var(--shadow-soft);max-width:420px; padding:26px 28px} .sn-modnotice-card h3{font:500 22px var(--font-atelier-serif);margin:0 0 10px} .sn-modnotice-card p{font-size:13.5px;color:var(--text-secondary);line-height:1.55;margin:0 0 16px} /* ── Liste Patients (spec Atelier 1.3) : chips compteurs + avatars + pager ── */ .ov-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:2px 0 14px} .ov-chips{display:flex;gap:8px;flex-wrap:wrap} .ov-chips .at-chip{cursor:pointer;border:1px solid transparent;background-clip:padding-box; padding:6px 13px;font-size:12px} .ov-chips .at-chip.on{border-color:currentColor} .ov-searchrow{margin:0 0 14px} .ov-searchrow input{width:100%;max-width:430px;box-sizing:border-box;border:1px solid var(--border); border-radius:99px;padding:9px 16px;font:13.5px var(--font-atelier-sans);background:var(--bg-card)} .pava{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center; font:600 11px var(--font-atelier-serif);vertical-align:middle;margin-right:10px;flex:none} .pcell{white-space:nowrap} .pcell b{font-weight:600} .pager-at{display:flex;align-items:center;gap:6px;justify-content:flex-end;padding:12px 16px; font-size:12.5px;color:var(--text-secondary);border-top:1px solid var(--hair-light);flex-wrap:wrap} .pager-at button{border:1px solid var(--border);background:var(--bg-card);border-radius:7px; min-width:26px;height:26px;cursor:pointer;color:var(--text-secondary);font:12px var(--font-atelier-sans)} .pager-at button.on{background:var(--ink);color:#FBF7EF;border-color:var(--ink)} .pager-at button:disabled{opacity:.4;cursor:default} /* ── Statistiques (spec Atelier 1.8) : barres, classement, lectures ── */ .brow{display:flex;align-items:center;gap:12px;padding:8px 20px;font-size:13px} .brow .bl{width:130px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .btrack{flex:1;height:8px;border-radius:99px;background:var(--paper-hover);overflow:hidden} .bfill{display:block;height:100%;border-radius:99px} .brow .bv{width:118px;text-align:right;color:var(--text-secondary);font-size:12.5px;white-space:nowrap} .fun-note{padding:6px 20px 12px;font-size:12px;color:var(--ink-3);font-style:italic} .rank-at{font:500 16px var(--font-atelier-serif);color:var(--ink-3);min-width:22px;text-align:center} .alert-row-at{display:flex;gap:11px;padding:11px 20px;border-top:1px solid var(--hair-light); font-size:13.5px;align-items:flex-start} .alert-row-at:first-of-type{border-top:none} .alert-row-at .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center; font-size:13px;flex:none} /* ── Catalogue (spec Atelier 1.9) : étiquettes capitales, méta, prix serif ── */ .aest-cat-name{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600} .aest-cat-consultations .aest-cat-name{color:var(--brand-deep)} .cat-meta-at{font-size:12px;color:var(--text-secondary);margin-top:3px;display:flex;gap:7px;align-items:center;flex-wrap:wrap} .aest-cell-num{font-family:var(--font-atelier-serif);font-size:15px} .aest-cat-addrow .btn-add--inline{border:1.5px dashed var(--ink-3);background:transparent; color:var(--text-secondary);border-radius:10px;width:100%;text-align:center} .aest-cat-addrow .btn-add--inline:hover{border-color:var(--brand-primary);color:var(--text-primary)} /* ── Équipe (spec 1.10) : lignes membre + Modules (spec 1.12) ── */ .mem-at{display:flex;gap:12px;padding:13px 20px;border-top:1px solid var(--hair-light); align-items:center;cursor:pointer;flex-wrap:wrap} .mem-at:first-of-type{border-top:none} .mem-at:hover{background:var(--paper-alt)} .mem-at.off{opacity:.6} .mem-at .who{flex:1;min-width:170px} .mem-at .who b{font-weight:600;display:block;font-size:14px} .mem-at .who span{font-size:12.5px;color:var(--text-secondary)} .mem-at .mem-actions{margin-left:4px} .at-chip.at-c-brand{background:var(--brand-soft);color:var(--brand-deep)} .modgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media (max-width:1080px){.modgrid{grid-template-columns:1fr 1fr}} @media (max-width:640px){.modgrid{grid-template-columns:1fr}} .modc{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card,14px); box-shadow:var(--shadow-soft);padding:16px 18px;display:flex;gap:12px;align-items:flex-start} .modc .g{width:38px;height:38px;border-radius:11px;display:grid;place-items:center; font:500 16px var(--font-atelier-serif);background:var(--paper-hover);flex:none} .modc .tx{flex:1} .modc b{display:block;font-size:14px;font-weight:600} .modc p{font-size:12px;color:var(--text-secondary);margin:2px 0 0;line-height:1.45} .tgl-at{width:34px;height:20px;border-radius:99px;background:var(--hair);position:relative; flex:none;display:inline-block;vertical-align:middle} .tgl-at::after{content:"";position:absolute;top:2.5px;left:2.5px;width:15px;height:15px; border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.15s} .tgl-at.on{background:var(--ok)} .tgl-at.on::after{left:16.5px} .socle-at{background:linear-gradient(120deg,var(--brand-soft),var(--paper-alt)); border:1px solid var(--border);border-radius:var(--radius-card,14px);padding:20px 24px; margin-top:18px;font-size:13.5px;color:var(--text-primary)} .socle-at b{font:600 16px var(--font-atelier-serif);display:block;margin-bottom:4px} .sect-h-at{font:500 21px var(--font-atelier-serif);margin:28px 0 14px;display:flex; align-items:baseline;gap:12px;color:var(--text-heading)} .sect-h-at small{font:13px var(--font-atelier-sans);color:var(--text-secondary)}