/* hdz-para — feuille de style autonome (aucun build, aucune dépendance CDN). */ :root { --bg: #f6f7f9; --surface: #ffffff; --border: #e3e6ea; --text: #1f2933; --muted: #6b7684; /* Charte du parc Hakim-DZ (reprise de hdz-pro : barre turquoise #3fbbc0, survol #2fa3a0). */ --primary: #3fbbc0; --primary-dark: #2fa3a0; --success: #2f855a; --warning: #b7791f; --danger: #c53030; --radius: 8px; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------------------------------------------------------------- layout */ .topbar { position: relative; /* ancre le nom du cabinet centré */ background: var(--primary); color: #fff; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .25); padding: 0 24px; display: flex; align-items: center; gap: 24px; height: 56px; } .topbar .brand { display: flex; align-items: center; } .topbar .brand img { height: 31px; width: auto; display: block; } .topbar nav { display: flex; gap: 8px; } .topbar nav a { color: rgba(255, 255, 255, .85); font-weight: 500; padding: 6px 12px; border-radius: 5px; } .topbar nav a.active, .topbar nav a:hover { color: #fff; background: var(--primary-dark); text-decoration: none; } /* Nom du cabinet : pastille translucide reprise de hdz-pro. ⚠️ Il était centré sur la PAGE en position absolue, protégé par un seuil fixe (masqué sous 1100 px). Or le chevauchement ne dépend pas que de la largeur d'écran : il dépend de la LONGUEUR DU NOM et du NOMBRE D'ENTRÉES de menu. À 1366 px — la résolution de portable la plus courante — « Centre Démo Paramédical » recouvrait « Patients » et « Administration » du directeur. Aucun seuil fixe ne pouvait l'anticiper. Il est désormais DANS LE FLUX, entre le menu et les boutons de droite : il occupe la place restante et se tronque avec « … » s'il n'y tient pas. Il ne peut donc plus rien recouvrir, quels que soient le nom et l'écran. Le prix : il est centré dans l'espace libre plutôt que sur la page — un décalage de quelques pixels, contre un menu illisible. */ .topbar .brand, .topbar nav, .topbar .topnav-right { flex-shrink: 0; } .topbar .cabinet { flex: 1 1 auto; min-width: 0; /* prend la place libre, peut rétrécir */ display: flex; justify-content: center; } .topbar .cabinet > span { font-size: 22px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; background: rgba(17, 101, 104, .18); border-radius: 5px; padding: 1px 12px; } /* En dessous, la place manque même pour un nom tronqué : on le retire. */ @media (max-width: 900px) { .topbar .cabinet { display: none; } } /* ------------------------------------------- topbar : menus déroulants */ .topbar .topnav-right { display: flex; align-items: center; gap: 4px; margin-left: auto; } html[dir="rtl"] .topbar .topnav-right { margin-left: 0; margin-right: auto; } .topbar .navitem { position: relative; display: flex; align-items: center; gap: 5px; color: #fff; font-size: 14px; font-weight: 600; padding: 7px 10px; border-radius: 5px; cursor: pointer; user-select: none; } .topbar .navitem:hover, .topbar .navitem.open, .topbar .navitem.current { background: var(--primary-dark); } .topbar .navitem > i.icon { margin: 0; } .topbar .navitem > i.dropdown.icon { font-size: 11px; opacity: .8; } /* Le menu est ancré au bord droit de son déclencheur : ancré à gauche il déborderait de la fenêtre (les deux menus sont collés au bord de l'écran). */ .topbar .navmenu { display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 100; min-width: 170px; padding: 4px 0; background: #fff; color: var(--text); border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); font-weight: 500; text-align: left; } html[dir="rtl"] .topbar .navmenu { right: auto; left: 0; text-align: right; } .topbar .navitem.open > .navmenu { display: block; } .topbar .navmenu a { display: flex; align-items: center; gap: 8px; padding: 9px 14px; color: var(--text); text-decoration: none; white-space: nowrap; } .topbar .navmenu a:hover { background: #f0f2f4; text-decoration: none; } .topbar .navmenu .sep { height: 1px; background: var(--border); margin: 4px 0; } /* Menu de langue : fond turquoise comme hdz-pro, donc texte en blanc. */ .topbar .navmenu.lang { background: var(--primary); } .topbar .navmenu.lang a { color: #fff; } .topbar .navmenu.lang a:hover { background: var(--primary-dark); } /* Pleine largeur (agenda + prises en charge) ; padding latéral pour l'aération. */ .container { max-width: none; margin: 24px 0; padding: 0 24px; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .page-head h1 { font-size: 22px; margin: 0; } /* ---------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; } .card > h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin: 0 0 12px; } .grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; } @media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- tables */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; } tbody tr:hover { background: #fafbfc; } td.num, th.num { text-align: right; } /* ---------------------------------------------------------------- forms */ label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; } /* `password`, `tel`, `search` et `url` manquaient : ces champs retombaient sur la largeur par défaut du navigateur (~150 px). Visible dès la connexion, où « Mot de passe » était plus étroit que « E-mail », et sur l'activation de compte et le changement de mot de passe. */ input[type=text], input[type=number], input[type=date], input[type=time], input[type=email], input[type=password], input[type=tel], input[type=search], input[type=url], select, textarea { width: 100%; padding: 8px 10px; font: inherit; font-size: 14px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); } textarea { min-height: 70px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(63,187,192,.18); } .field { margin-bottom: 12px; } .fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .fields .full { grid-column: 1 / -1; } @media (max-width: 640px) { .fields { grid-template-columns: 1fr; } } .hint { color: var(--muted); font-size: 12px; margin-top: 3px; } .check { display: flex; align-items: center; gap: 8px; } .check input { width: auto; } .check label { margin: 0; font-weight: 500; } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 1px solid transparent; background: var(--primary); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--primary-dark); text-decoration: none; } .btn.secondary { background: #fff; color: var(--text); border-color: var(--border); } .btn.secondary:hover { background: #f2f4f7; } .btn.danger { background: var(--danger); } .btn.sm { padding: 5px 10px; font-size: 13px; } /* Barre d'actions des modales : un seul groupe centré. Les boutons du parc portent un padding:4px inline ; on l'applique aussi à ceux du slot `actions`, sinon ils n'ont pas la même hauteur. Semantic met déjà une marge droite à chaque .ui.button, d'où le seul écart à ajouter : celui qui sépare les actions secondaires de la paire Annuler/Enregistrer. */ .form-actions .ui.button { padding: 4px 10px; } /* align-items:center, sinon le conteneur flex ÉTIRE ses enfants à la hauteur du plus grand : un ainsi étiré garde son texte collé en haut de la boîte, alors qu'un