/* ============================================================ HC SAV — Portail support Hotel Care Feuille de style unique, transposée de la maquette Claude Design (« HC SAV.dc.html ») : verre dépoli discret, vert soin en accent, deux apparences (clair / sombre) pilotées par l'attribut data-theme posé sur . Aucune dépendance externe : pile de polices système. ============================================================ */ /* ----- 1. Variables de design — sombre par défaut (sans JavaScript, on retombe sur le thème par défaut du portail) ----- */ :root { --fond: #0D1311; --halo: rgba(86, 186, 143, 0.06); --halo-2: rgba(140, 166, 182, 0.04); /* Verre « chrome » (barres) et feuilles (cartes) */ --chrome-a: rgba(31, 40, 35, 0.82); --chrome-b: rgba(23, 31, 27, 0.66); --feuille: rgba(255, 255, 255, 0.043); --champ: rgba(7, 11, 9, 0.52); /* Liserés, reflets, creux */ --lisere: rgba(255, 255, 255, 0.075); --lisere-fort: rgba(255, 255, 255, 0.16); --reflet: rgba(255, 255, 255, 0.075); --reflet-2: rgba(255, 255, 255, 0.05); --creux: rgba(0, 0, 0, 0.18); /* Encres */ --encre: #E6EDE8; --encre-2: #9BAAA1; --encre-3: #68756D; /* Vert soin — accent principal */ --soin: #4EAD84; --soin-vif: #54B58B; --soin-profond: #2F8261; --soin-fort: #7ECDA8; --soin-pale: rgba(78, 173, 132, 0.11); --soin-pale-2: rgba(78, 173, 132, 0.2); --soin-lueur: rgba(78, 173, 132, 0.24); --sur-soin: #06130C; /* Couleurs de rôle et sémantiques */ --bleu: #8CA6B4; --bleu-encre: #A9C2CF; --bleu-pale: rgba(140, 166, 180, 0.12); --ambre: #D3A057; --ambre-pale: rgba(211, 160, 87, 0.11); --corail: #DD7468; --corail-pale: rgba(221, 116, 104, 0.11); --or: #D3AE63; --or-pale: rgba(211, 174, 99, 0.13); /* Surfaces utilitaires */ --survol-ligne: rgba(255, 255, 255, 0.035); --segment: rgba(255, 255, 255, 0.07); --segment-actif: #2B352F; --tete-tableau: rgba(23, 31, 27, 0.95); --bouton-2: rgba(255, 255, 255, 0.055); /* Ombres */ --ombre-chrome: 0 1px 1px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.5); --ombre-feuille: 0 1px 1px rgba(0, 0, 0, 0.22), 0 10px 28px -20px rgba(0, 0, 0, 0.4); --ombre-levee: 0 2px 6px rgba(0, 0, 0, 0.3), 0 22px 48px -18px rgba(0, 0, 0, 0.55); --ombre-segment: 0 1px 3px rgba(0, 0, 0, 0.35); /* Verre — avec parcimonie : barres et carte de connexion seulement */ --flou-chrome: blur(26px) saturate(1.85); /* Géométrie et rythme */ --rayon-grand: 18px; --rayon: 13px; --rayon-petit: 10px; --transition: 0.14s ease; --transition-champ: 0.16s ease; } :root[data-theme="clair"] { --fond: #F2F4F3; --halo: rgba(61, 138, 104, 0.075); --halo-2: rgba(94, 126, 143, 0.05); --chrome-a: rgba(252, 253, 253, 0.78); --chrome-b: rgba(249, 251, 250, 0.6); --feuille: rgba(255, 255, 255, 0.72); --champ: rgba(252, 253, 253, 0.85); --lisere: rgba(13, 34, 24, 0.07); --lisere-fort: rgba(13, 34, 24, 0.14); --reflet: rgba(255, 255, 255, 0.6); --reflet-2: rgba(255, 255, 255, 0.35); --creux: rgba(13, 34, 24, 0.025); --encre: #181F1B; --encre-2: #4F5B55; --encre-3: #87928B; --soin: #3D8B69; --soin-vif: #44976F; --soin-profond: #256349; --soin-fort: #26684D; --soin-pale: rgba(61, 139, 105, 0.09); --soin-pale-2: rgba(61, 139, 105, 0.16); --soin-lueur: rgba(61, 139, 105, 0.3); --sur-soin: #FCFEFD; --bleu: #5C7D8E; --bleu-encre: #42627A; --bleu-pale: rgba(92, 125, 142, 0.11); --ambre: #A2701E; --ambre-pale: rgba(170, 118, 42, 0.11); --corail: #BE5248; --corail-pale: rgba(190, 82, 72, 0.09); --or: #8E6F1D; --or-pale: rgba(150, 120, 40, 0.13); --survol-ligne: rgba(13, 34, 24, 0.032); --segment: rgba(13, 34, 24, 0.052); --segment-actif: #FFFFFF; --tete-tableau: rgba(251, 252, 252, 0.92); --bouton-2: rgba(255, 255, 255, 0.55); --ombre-chrome: 0 1px 1px rgba(9, 24, 17, 0.035), 0 14px 36px -16px rgba(9, 24, 17, 0.18); --ombre-feuille: 0 1px 1px rgba(9, 24, 17, 0.028), 0 10px 28px -20px rgba(9, 24, 17, 0.14); --ombre-levee: 0 2px 4px rgba(9, 24, 17, 0.04), 0 20px 44px -18px rgba(9, 24, 17, 0.2); --ombre-segment: 0 1px 2.5px rgba(9, 24, 17, 0.16); } /* ----- 2. Base ----- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; font-family: -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 0.4s ease, color 0.4s ease; } h1, h2, h3, p, dl, dd, figure { margin: 0; } a { color: var(--soin-fort); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-align: left; } input { font: inherit; color: inherit; } input::placeholder { color: var(--encre-3); } ::selection { background: rgba(61, 139, 105, 0.25); } :focus-visible { outline: 2px solid color-mix(in srgb, var(--soin) 75%, transparent); outline-offset: 2px; border-radius: 9px; } :focus:not(:focus-visible) { outline: none; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--lisere-fort); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } /* Halos d'ambiance, fixes derrière tout le portail */ .halos { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(90rem 44rem at 50% -18%, var(--halo), transparent 60%), radial-gradient(44rem 30rem at 92% 114%, var(--halo-2), transparent 65%), radial-gradient(30rem 24rem at -6% 82%, var(--halo), transparent 68%); } /* Texte présent pour les lecteurs d'écran uniquement */ .visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ----- 3. Coquille de l'application ----- */ .hc-app { position: relative; z-index: 2; display: flex; align-items: stretch; min-height: 100vh; } .hc-colonne { flex: 1; min-width: 0; display: flex; flex-direction: column; } .hc-contenu { flex: 1; padding: 26px 28px 72px; width: 100%; max-width: 1240px; margin: 0 auto; } /* ----- 4. Barre latérale (verre) ----- */ .hc-lateral { position: sticky; top: 12px; align-self: flex-start; height: calc(100vh - 24px); margin: 12px 0 12px 12px; flex: none; width: 230px; display: flex; flex-direction: column; border-radius: var(--rayon-grand); background: linear-gradient(180deg, var(--chrome-a), var(--chrome-b)); backdrop-filter: var(--flou-chrome); -webkit-backdrop-filter: var(--flou-chrome); border: 1px solid var(--lisere); box-shadow: var(--ombre-chrome), inset 0 1px 0 var(--reflet), inset 0 -1px 0 var(--creux); overflow: hidden; transition: width 0.32s cubic-bezier(0.25, 0.9, 0.3, 1); } .hc-lateral[data-repliee="1"] { width: 64px; } .hc-lateral [data-lbl] { transition: opacity 0.16s ease, transform 0.26s ease; white-space: nowrap; } .hc-lateral[data-repliee="1"] [data-lbl] { opacity: 0; transform: translateX(-6px); pointer-events: none; } .hc-lateral-entete { display: flex; align-items: center; gap: 10px; padding: 15px 13px 13px; } .marque { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--encre); text-decoration: none; } .marque:hover { text-decoration: none; } .logo { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(155deg, var(--soin-vif), var(--soin-profond)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px -3px var(--soin-lueur); color: #FCFEFD; font-weight: 700; font-size: 11.5px; } .marque-nom { display: block; font-weight: 650; font-size: 13.5px; letter-spacing: 0.04em; line-height: 1.2; } .marque-sous { display: block; font-size: 10.5px; color: var(--encre-3); } .replier-nav { margin-left: auto; flex: none; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: var(--encre-3); transition: background var(--transition), color var(--transition), transform 0.32s cubic-bezier(0.25, 0.9, 0.3, 1); } .replier-nav:hover { background: var(--segment); color: var(--encre); } .hc-lateral[data-repliee="1"] .replier-nav { transform: rotate(180deg); } .hc-nav { padding: 4px 8px; display: flex; flex-direction: column; gap: 3px; } .lien-nav { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border-radius: var(--rayon-petit); color: var(--encre-2); font-weight: 500; font-size: 13px; text-decoration: none; transition: background var(--transition), color var(--transition); } .lien-nav:hover { background: var(--segment); color: var(--encre); text-decoration: none; } .lien-nav:active { transform: translateY(0.5px); } .lien-nav .picto-nav { flex: none; display: grid; place-items: center; width: 19px; } .lien-nav [data-lbl] { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Entrée active : capsule vert soin */ .lien-nav-actif, .lien-nav-actif:hover { background: var(--soin-pale-2); box-shadow: inset 0 1px 0 var(--reflet-2), inset 0 0 0 1px color-mix(in srgb, var(--soin) 16%, transparent); color: var(--soin-fort); font-weight: 650; } /* Entrée future : présente mais désactivée, badge « À venir » */ .lien-nav-inactif, .lien-nav-inactif:hover { background: none; color: var(--encre-3); cursor: default; } .lien-nav-inactif:active { transform: none; } .etiquette-avenir { margin-left: auto; flex: none; font-size: 9px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-3); } .hc-lateral-pied { margin-top: auto; padding: 8px; border-top: 1px solid var(--lisere); display: flex; flex-direction: column; gap: 2px; } .bascule-theme { display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: var(--rayon-petit); color: var(--encre-2); font-size: 12.5px; font-weight: 500; transition: background var(--transition), color var(--transition); } .bascule-theme:hover { background: var(--segment); color: var(--encre); } .bascule-theme .picto-nav { flex: none; display: grid; place-items: center; width: 19px; } /* Un seul pictogramme visible à la fois : lune en clair, soleil en sombre */ .picto-soleil { display: none; } :root[data-theme="clair"] .picto-lune { display: block; } :root:not([data-theme="clair"]) .picto-lune { display: none; } :root:not([data-theme="clair"]) .picto-soleil { display: block; } .libelle-theme-clair { display: none; } :root:not([data-theme="clair"]) .libelle-theme-clair { display: inline; } :root:not([data-theme="clair"]) .libelle-theme-sombre { display: none; } .hc-version { padding: 4px 11px 3px; font-size: 10.5px; color: var(--encre-3); } /* ----- 5. Barre supérieure (verre) ----- */ .hc-top { position: sticky; top: 12px; z-index: 40; margin: 12px 16px 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 16px; border-radius: 15px; background: linear-gradient(180deg, var(--chrome-a), var(--chrome-b)); backdrop-filter: var(--flou-chrome); -webkit-backdrop-filter: var(--flou-chrome); border: 1px solid var(--lisere); box-shadow: var(--ombre-chrome), inset 0 1px 0 var(--reflet); } .hc-fil { display: flex; align-items: center; gap: 7px; font-size: 12.5px; min-width: 0; white-space: nowrap; overflow: hidden; } .hc-fil .fil-racine { color: var(--encre-3); } .hc-fil .fil-chevron { color: var(--encre-3); opacity: 0.55; flex: none; } .hc-fil .fil-page { color: var(--encre); font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .hc-top-espace { flex: 1; } .separateur-vertical { flex: none; width: 1px; height: 20px; background: var(--lisere); } .bouton-accueil { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--rayon-petit); color: var(--encre-2); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background var(--transition), color var(--transition); } .bouton-accueil:hover { background: var(--segment); color: var(--encre); text-decoration: none; } .bouton-accueil:active { transform: translateY(0.5px); } /* Zone compte : bouton avatar + menu déroulant */ .hc-compte { position: relative; flex: none; } .compte-bouton { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 4px; border-radius: 11px; transition: background var(--transition); } .compte-bouton:hover { background: var(--segment); } .hc-avatar { width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; background: var(--soin-pale-2); color: var(--soin-fort); font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; } .nom-utilisateur { font-size: 12.5px; font-weight: 600; } .menu-compte { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 232px; border-radius: 15px; background: linear-gradient(180deg, var(--chrome-a), var(--chrome-b)); backdrop-filter: var(--flou-chrome); -webkit-backdrop-filter: var(--flou-chrome); border: 1px solid var(--lisere); box-shadow: var(--ombre-levee), inset 0 1px 0 var(--reflet); padding: 6px; animation: hc-pop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; } .menu-compte[hidden] { display: none; } .menu-compte-entete { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--lisere); margin-bottom: 5px; } .menu-compte-entete .hc-avatar { width: 30px; height: 30px; } .menu-compte-nom { font-size: 13px; font-weight: 600; } .menu-compte-detail { font-size: 11px; color: var(--encre-3); } .menu-compte-lien { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; color: var(--encre); text-decoration: none; transition: background var(--transition); } .menu-compte-lien:hover { background: var(--survol-ligne); text-decoration: none; } .menu-compte-lien.lien-deconnexion { color: var(--corail); } .menu-compte-lien.lien-deconnexion:hover { background: var(--corail-pale); } /* ----- 6. Badges ----- */ .badge-role { white-space: nowrap; font-size: 9px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 2.5px 7px; border-radius: 99px; background: var(--segment); color: var(--encre-2); } .badge-role.role-admin { background: var(--or-pale); color: var(--or); } .badge-role.role-hotelcare { background: var(--soin-pale-2); color: var(--soin-fort); } .badge-role.role-canal { background: var(--bleu-pale); color: var(--bleu-encre); } /* Badge de provenance d'une fiche : CRS ou Hotel Care */ .badge-type { flex: none; white-space: nowrap; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3.5px 10px; border-radius: 99px; } .badge-type.type-crs { background: var(--bleu-pale); color: var(--bleu-encre); } .badge-type.type-hotel_care { background: var(--soin-pale-2); color: var(--soin-fort); } /* Badge d'alerte corail (Black List, maintenance 7/7…) — jamais la couleur seule : le point et le libellé portent la même information */ .badge-alerte { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 3.5px 10px; border-radius: 99px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--corail); background: var(--corail-pale); border: 1px solid color-mix(in srgb, var(--corail) 26%, transparent); } .badge-alerte::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: var(--corail); } .badge-jamf { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; padding: 2.5px 8px; border-radius: 99px; background: var(--soin-pale-2); color: var(--soin-fort); } /* Cycle de vie CRS (tableau « Projet Canal ») : badge de STATUT en tons sémantiques sobres. Le ton alerte (Pb Technique, Bloqué) reprend le point du badge-alerte : jamais la couleur seule. */ .badge-statut { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 3.5px 10px; border-radius: 99px; } .badge-statut.ton-succes { background: var(--soin-pale-2); color: var(--soin-fort); } .badge-statut.ton-attention { background: var(--ambre-pale); color: var(--ambre); } .badge-statut.ton-info { background: var(--bleu-pale); color: var(--bleu-encre); } .badge-statut.ton-neutre { background: var(--segment); color: var(--encre-2); } .badge-statut.ton-alerte { background: var(--corail-pale); color: var(--corail); border: 1px solid color-mix(in srgb, var(--corail) 26%, transparent); } .badge-statut.ton-alerte::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: var(--corail); } /* Badge de GROUPE (fiche client) : neutre et cerclé ; version signalée (Démo, Site ne peut être déployé) un cran plus affirmée, sans crier. */ .badge-groupe { flex: none; white-space: nowrap; font-size: 9.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; color: var(--encre-2); border: 1px solid var(--lisere-fort); background: transparent; } .badge-groupe.badge-groupe-signale { color: var(--encre); border-color: color-mix(in srgb, var(--ambre) 55%, transparent); background: var(--ambre-pale); } /* Étiquette de groupe dans les résultats de recherche : discrète dans la ligne de détail, version signalée légèrement soulignée. */ .etiquette-groupe { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 7px; margin-left: 4px; border-radius: 99px; color: var(--encre-3); border: 1px solid var(--lisere); } .etiquette-groupe.etiquette-groupe-signale { color: var(--ambre); border-color: color-mix(in srgb, var(--ambre) 45%, transparent); background: var(--ambre-pale); } /* Compteur CRS du tableau de bord : la répartition par groupe est dans l'infobulle — le pointillé signale qu'il y a plus à voir au survol. */ .info-repartition { text-decoration: underline dotted color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: 3px; cursor: help; } /* ----- 7. Feuilles (cartes de contenu) ----- */ .feuille { border-radius: var(--rayon-grand); background: var(--feuille); border: 1px solid var(--lisere); box-shadow: var(--ombre-feuille), inset 0 1px 0 var(--reflet-2); overflow: hidden; } .titre-carte { font-size: 10.5px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-3); } .texte-secondaire { color: var(--encre-2); } .texte-attenue { color: var(--encre-3); } .valeur-vide { color: var(--encre-3); } /* État vide honnête : aucune donnée réelle à afficher */ .etat-vide { padding: 40px 20px; text-align: center; color: var(--encre-3); font-size: 13px; } /* ----- 8. Boutons ----- */ .bouton { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: none; border-radius: 11px; background: linear-gradient(180deg, var(--soin-vif), var(--soin-profond)); color: var(--sur-soin); font-weight: 650; font-size: 14px; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 6px 16px -5px var(--soin-lueur); transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.2s ease; } .bouton:hover { filter: brightness(1.055); color: var(--sur-soin); text-decoration: none; } .bouton:active { transform: translateY(1px); filter: brightness(0.97); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 8px -4px var(--soin-lueur); } .bouton-secondaire { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 15px; border-radius: var(--rayon-petit); border: 1px solid var(--lisere-fort); background: var(--bouton-2); font-size: 12.5px; font-weight: 600; color: var(--encre); text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 var(--reflet-2); transition: border-color var(--transition), color var(--transition); } .bouton-secondaire:hover { border-color: color-mix(in srgb, var(--soin) 45%, transparent); color: var(--soin-fort); text-decoration: none; } .bouton-secondaire:active { transform: translateY(1px); } .bouton-compact { height: 30px; padding: 0 11px; font-size: 11.5px; } .bouton:disabled, .bouton-secondaire:disabled { opacity: 0.55; cursor: not-allowed; } /* ----- 9. Champs ----- */ input[type="text"], input[type="password"], input[type="search"], input[type="email"], select, textarea { width: 100%; height: 43px; padding: 0 13px; border-radius: 11px; border: 1px solid var(--lisere-fort); background: var(--champ); color: var(--encre); font-size: 14px; box-shadow: inset 0 1px 2px var(--creux); transition: border-color var(--transition-champ), box-shadow var(--transition-champ); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--soin); box-shadow: 0 0 0 3px var(--soin-pale-2), inset 0 1px 2px var(--creux); } /* Champ de recherche avec loupe intégrée */ .champ-recherche { position: relative; flex: 1; min-width: 0; } .champ-recherche .picto-loupe { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--encre-3); pointer-events: none; } .champ-recherche input { height: 50px; padding: 0 18px 0 44px; border-radius: var(--rayon); font-size: 14.5px; box-shadow: inset 0 1px 3px var(--creux); } .champ-recherche input:focus { box-shadow: 0 0 0 3.5px var(--soin-pale-2), inset 0 1px 3px var(--creux); } /* ----- 10. Messages flash et bandeau dégradé ----- */ .message-erreur, .message-succes, .message-info { display: flex; align-items: center; gap: 10px; padding: 9px 13px; margin: 0 0 14px; border-radius: var(--rayon-petit); font-size: 12.5px; font-weight: 500; animation: hc-pop 0.2s ease both; } .message-erreur::before, .message-succes::before, .message-info::before { flex: none; width: 16px; height: 16px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; } .message-erreur { background: var(--corail-pale); border: 1px solid color-mix(in srgb, var(--corail) 26%, transparent); color: var(--corail); } .message-erreur::before { content: "!"; background: var(--corail); color: #FCFEFD; } .message-succes { background: var(--soin-pale); border: 1px solid color-mix(in srgb, var(--soin) 30%, transparent); color: var(--soin-fort); } .message-succes::before { content: "✓"; background: var(--soin); color: var(--sur-soin); } .message-info { background: var(--bleu-pale); border: 1px solid color-mix(in srgb, var(--bleu) 32%, transparent); color: var(--bleu-encre); } .message-info::before { content: "i"; background: var(--bleu); color: #FCFEFD; font-style: italic; } /* Bandeau ambre : mode dégradé Monday (miroir local toujours consultable) */ .bandeau-degrade { display: flex; align-items: center; gap: 10px; padding: 9px 15px; margin: 0 0 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ambre) 22%, transparent); background: linear-gradient(95deg, var(--ambre-pale), transparent 70%), var(--feuille); box-shadow: var(--ombre-feuille); font-size: 12.5px; animation: hc-in 0.35s ease both; } .bandeau-degrade .picto-degrade { flex: none; color: var(--ambre); } .bandeau-degrade strong { font-weight: 600; } .bandeau-degrade .degrade-detail { color: var(--encre-2); } /* Ligne de synchro sous la recherche : point coloré + texte + bouton */ .ligne-synchro { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 13px; font-size: 12px; color: var(--encre-3); } .ligne-synchro form { margin-left: auto; } .point-synchro { flex: none; width: 6px; height: 6px; border-radius: 99px; background: var(--soin); animation: hc-pulse 3.6s ease-in-out infinite; } .point-synchro-degrade { background: var(--ambre); } .info-synchro { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; } /* ----- 11. Écran de connexion ----- */ .page-connexion { position: relative; z-index: 2; min-height: 100vh; display: grid; place-items: center; padding: 26px; } .bascule-theme-flottante { position: fixed; top: 18px; right: 18px; z-index: 10; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(180deg, var(--chrome-a), var(--chrome-b)); backdrop-filter: var(--flou-chrome); -webkit-backdrop-filter: var(--flou-chrome); border: 1px solid var(--lisere); box-shadow: var(--ombre-feuille), inset 0 1px 0 var(--reflet); color: var(--encre-2); transition: color var(--transition), transform 0.12s ease; } .bascule-theme-flottante:hover { color: var(--encre); background: linear-gradient(180deg, var(--chrome-a), var(--chrome-b)); } .bascule-theme-flottante:active { transform: scale(0.96); } .cadre-connexion { width: 100%; max-width: 392px; animation: hc-in 0.5s cubic-bezier(0.2, 0.7, 0.25, 1) both; } .carte-connexion { background: linear-gradient(180deg, var(--chrome-a), var(--chrome-b)); backdrop-filter: var(--flou-chrome); -webkit-backdrop-filter: var(--flou-chrome); border: 1px solid var(--lisere); border-radius: 22px; box-shadow: var(--ombre-levee), inset 0 1px 0 var(--reflet), inset 0 -1px 0 var(--creux); padding: 38px 34px 30px; } .connexion-entete { display: flex; flex-direction: column; align-items: center; gap: 13px; margin-bottom: 28px; text-align: center; } .connexion-logo { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(155deg, var(--soin-vif), var(--soin-profond)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 20px -6px var(--soin-lueur); color: #FCFEFD; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; } .connexion-entete h1 { font-size: 20px; font-weight: 650; letter-spacing: 0.045em; } .connexion-entete .sous-titre { font-size: 12.5px; color: var(--encre-2); margin-top: 3px; } .carte-connexion label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--encre-2); margin: 15px 0 6px; } .carte-connexion label:first-child { margin-top: 0; } .carte-connexion .bouton { width: 100%; height: 44px; margin-top: 22px; } .connexion-note { margin: 18px 0 0; text-align: center; font-size: 11.5px; color: var(--encre-3); } .connexion-version { margin: 16px 0 0; text-align: center; font-size: 11px; color: var(--encre-3); } /* ----- 12. Tableau de bord ----- */ .hc-salutation { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 2px 22px; } .hc-salutation h1 { font-size: 25px; font-weight: 650; letter-spacing: -0.022em; line-height: 1.2; } .hc-salutation .sous-salutation { margin-top: 4px; font-size: 13.5px; color: var(--encre-2); } .hc-date { font-size: 12px; color: var(--encre-3); padding-bottom: 5px; } /* Héros recherche : seule feuille au verre léger (halo vert interne) */ .hero-recherche { position: relative; overflow: hidden; border-radius: var(--rayon-grand); background: linear-gradient(180deg, var(--chrome-a), var(--chrome-b)); border: 1px solid var(--lisere); box-shadow: var(--ombre-feuille), inset 0 1px 0 var(--reflet), inset 0 -1px 0 var(--creux); padding: 24px 26px 18px; } .hero-recherche::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(34rem 13rem at 6% -35%, var(--soin-pale), transparent 60%); } .hero-recherche > * { position: relative; } .hero-titre { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .hero-titre h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; } .hero-titre .hero-sous { font-size: 12.5px; color: var(--encre-3); } .hero-ligne { display: flex; gap: 9px; } .hero-ligne .bouton { flex: none; height: 50px; padding: 0 22px; border-radius: var(--rayon); } /* Bande d'indicateurs : cellules séparées par des liserés */ .bande-indicateurs { display: grid; grid-template-columns: 1.18fr 1fr; margin-top: 16px; } .cellule-bande { padding: 20px 24px 18px; border-left: 1px solid var(--lisere); } .cellule-bande:first-child { border-left: none; } .chiffre-grand { font-size: 32px; font-weight: 650; letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; } .ligne-chiffre { display: flex; align-items: baseline; gap: 9px; margin-top: 9px; } .ligne-chiffre .legende-chiffre { font-size: 12.5px; color: var(--encre-2); } .barre-repartition { display: flex; height: 6px; border-radius: 99px; overflow: hidden; margin-top: 15px; background: var(--segment); } .barre-repartition .part-hotel-care { background: var(--soin); } .barre-repartition .part-crs { background: color-mix(in srgb, var(--bleu) 42%, transparent); } .legende-repartition { display: flex; flex-wrap: wrap; gap: 5px 20px; margin-top: 11px; font-size: 12.5px; color: var(--encre-2); } .legende-repartition .puce { display: inline-flex; align-items: center; gap: 7px; } .legende-repartition .carre { width: 7px; height: 7px; border-radius: 2.5px; } .legende-repartition .carre-hotel-care { background: var(--soin); } .legende-repartition .carre-crs { background: color-mix(in srgb, var(--bleu) 55%, transparent); } .legende-repartition strong { font-weight: 650; color: var(--encre); font-variant-numeric: tabular-nums; } .cellule-synchro { display: flex; flex-direction: column; } .cellule-synchro-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cellule-synchro-etat { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .cellule-synchro-etat .point-synchro { width: 8px; height: 8px; } .cellule-synchro-pied { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--encre-3); } /* Deux colonnes : activité récente + plateformes */ .rangee-deux { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; margin-top: 28px; align-items: start; } .entete-section { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 4px; } .entete-section h2 { font-size: 10.5px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-3); } .entete-section .note-section { font-size: 11.5px; color: var(--encre-3); } .liste-activite { list-style: none; margin: 0; padding: 0; } .liste-activite li { display: flex; align-items: baseline; gap: 16px; padding: 10px 2px; font-size: 13px; } .liste-activite li + li { border-top: 1px solid var(--lisere); } .activite-heure { flex: none; width: 80px; font-variant-numeric: tabular-nums; color: var(--encre-3); font-size: 12px; } .activite-texte { min-width: 0; line-height: 1.5; color: var(--encre-2); } .activite-qui { font-weight: 600; color: var(--encre); } .activite-vide { padding: 18px 2px; color: var(--encre-3); font-size: 13px; } /* Plateformes : liste dans une feuille, badges « À venir » */ .feuille-plateformes h2 { padding: 14px 18px 10px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-3); } .ligne-plateforme { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--lisere); } .plateforme-picto { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--segment); color: var(--encre-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; } .plateforme-texte { min-width: 0; flex: 1; } .plateforme-nom { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--encre-2); } .plateforme-desc { display: block; font-size: 11.5px; color: var(--encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .etiquette-apercu { flex: none; font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--encre-3); } /* ----- 13. Page de recherche ----- */ .page-etroite { max-width: 880px; margin: 0 auto; } .page-etroite h1 { margin: 4px 2px 3px; font-size: 22px; font-weight: 650; letter-spacing: -0.02em; } .page-etroite .sous-titre-page { margin: 0 2px 18px; font-size: 13px; color: var(--encre-2); } .recherche-ligne { display: flex; gap: 9px; } .recherche-ligne .bouton { flex: none; height: 50px; padding: 0 22px; border-radius: var(--rayon); } .page-etroite .champ-recherche input { box-shadow: var(--ombre-feuille), inset 0 1px 3px var(--creux); } .nb-resultats { margin: 20px 4px 8px; font-size: 11.5px; color: var(--encre-3); } .liste-resultats { border-radius: 15px; } .carte-resultat { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 18px; color: var(--encre); text-decoration: none; transition: background 0.12s ease; } .carte-resultat + .carte-resultat { border-top: 1px solid var(--lisere); } .carte-resultat:hover { background: var(--survol-ligne); text-decoration: none; } .carte-resultat:active { background: var(--segment); } .resultat-texte { min-width: 0; flex: 1; } .resultat-nom { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; } .resultat-detail { display: block; font-size: 12px; color: var(--encre-3); margin-top: 1px; } .resultat-badges { display: flex; align-items: center; gap: 8px; flex: none; } .carte-resultat .picto-chevron { color: var(--encre-3); flex: none; } .etat-vide-recherche { padding: 56px 20px; text-align: center; animation: hc-in 0.3s ease both; } .etat-vide-recherche .vide-titre { font-size: 14px; font-weight: 600; } .etat-vide-recherche .vide-detail { margin-top: 6px; font-size: 12.5px; color: var(--encre-3); } .etat-vide-recherche p:only-child { font-size: 13px; color: var(--encre-3); } /* ----- 14. Fiche client ----- */ .entete-fiche { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 2px 2px 20px; } .entete-fiche-titre { min-width: 0; margin-right: auto; } .entete-fiche-nom { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .entete-fiche-nom h1 { font-size: 23px; font-weight: 650; letter-spacing: -0.022em; line-height: 1.25; } .entete-fiche .sous-titre-fiche { margin-top: 4px; font-size: 13px; color: var(--encre-2); } /* Grille d'informations : cellules séparées par des liserés, 3 colonnes */ .grille-infos { display: grid; grid-template-columns: repeat(3, 1fr); } .cellule-infos { padding: 18px 22px; border-left: 1px solid var(--lisere); } .cellule-infos:nth-child(3n + 1) { border-left: none; } .cellule-infos:nth-child(n + 4) { border-top: 1px solid var(--lisere); } .cellule-infos-large { grid-column: 1 / -1; border-left: none !important; border-top: 1px solid var(--lisere) !important; } .cellule-infos h2 { margin: 0 0 12px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-3); } .liste-infos { display: grid; grid-template-columns: 96px 1fr; gap: 8px 14px; font-size: 13px; } .liste-infos dt { color: var(--encre-3); align-self: baseline; } .liste-infos-espacee { margin-top: 12px; } .liste-infos dd { margin: 0; align-self: baseline; overflow-wrap: anywhere; } .liste-infos-colonnes { grid-template-columns: repeat(auto-fit, minmax(132px, max-content) minmax(80px, 1fr)); gap: 8px 18px; } .valeur-mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-size: 12px; letter-spacing: 0.035em; } .valeur-nombre { font-weight: 600; font-variant-numeric: tabular-nums; } .numero-client { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-size: 19px; font-weight: 500; letter-spacing: 0.045em; font-variant-numeric: tabular-nums; } .cellule-numero { display: flex; flex-direction: column; } .pied-cellule { margin-top: auto; padding-top: 12px; font-size: 11px; color: var(--encre-3); } .pied-infos { margin-top: 14px; font-size: 11px; color: var(--encre-3); } .vignettes { display: flex; flex-wrap: wrap; gap: 6px; } .vignette { padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--soin-fort); background: var(--soin-pale); } .vignette-config { font-weight: 500; color: var(--encre-2); background: var(--segment); } .vignettes-vide { font-size: 13px; color: var(--encre-3); } /* ----- 15. Bloc « Équipements (JAMF) » ----- */ .bloc-jamf { margin-top: 16px; } .jamf-entete { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 15px 22px; border-bottom: 1px solid var(--lisere); } .jamf-titre { min-width: 0; margin-right: auto; } .jamf-titre-ligne { display: flex; align-items: center; gap: 9px; } .jamf-titre-ligne h2 { font-size: 13.5px; font-weight: 650; letter-spacing: -0.005em; } .jamf-direct { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--encre-3); } .jamf-direct::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: var(--soin); animation: hc-pulse 3.6s ease-in-out infinite; } .jamf-meta { font-size: 12.5px; color: var(--encre-2); margin-top: 4px; } .jamf-filtre { position: relative; flex: none; } .jamf-filtre .picto-loupe { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--encre-3); pointer-events: none; } .jamf-filtre input { width: 196px; height: 31px; padding: 0 10px 0 28px; border-radius: 9px; border: 1px solid var(--lisere); background: var(--champ); font-size: 12px; box-shadow: none; } .jamf-filtre input:focus { box-shadow: 0 0 0 3px var(--soin-pale-2); } .jamf-filtre[hidden] { display: none; } /* Bouton « Actualiser » : la seule action du bloc — demande aux appareils de remonter leur inventaire, les dates se rafraîchissent ensuite au fil de l'eau. L'animation de la roue pendant la demande est neutralisée par la règle globale prefers-reduced-motion. */ .jamf-outils { display: flex; align-items: center; gap: 9px; flex: none; } .bouton-actualiser { height: 31px; padding: 0 12px; font-size: 12px; border-radius: 9px; /* chiffres à chasse fixe : le compte à rebours « Actualiser (1 min 12) » ne fait pas trembler la largeur du bouton */ font-variant-numeric: tabular-nums; } .bouton-actualiser[hidden] { display: none; } .bouton-actualiser.actualisation-en-cours .picto-actualiser { animation: hc-spin 1.4s linear infinite; } .jamf-note-actualisation { font-size: 12.5px; color: var(--encre-2); padding: 10px 22px 0; animation: hc-in 0.3s ease both; } .jamf-note-actualisation[hidden] { display: none; } /* État de chargement : petite roue + rangées squelettes scintillantes */ .jamf-chargement { animation: hc-in 0.3s ease both; } .jamf-chargement-ligne { display: flex; align-items: center; gap: 10px; padding: 14px 22px 2px; flex-wrap: wrap; font-size: 12.5px; } .roue { flex: none; width: 14px; height: 14px; border-radius: 99px; border: 2px solid var(--soin-pale-2); border-top-color: var(--soin); animation: hc-spin 0.9s linear infinite; } .jamf-chargement-ligne .note-attente { color: var(--encre-3); font-size: 12px; } .squelettes { padding: 10px 0 6px; } .squelette-ligne { display: grid; grid-template-columns: 88px 200px 1fr 130px; gap: 20px; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--lisere); } .squelette-barre { height: 10px; border-radius: 5px; background: linear-gradient(100deg, var(--segment) 36%, var(--soin-pale) 50%, var(--segment) 64%); background-size: 280% 100%; animation: hc-shimmer 1.6s ease-in-out infinite; } .squelette-ligne .squelette-barre:last-child { justify-self: end; } /* États pleine largeur : indisponible / sans bâtiment */ .jamf-etat { padding: 44px 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; animation: hc-in 0.3s ease both; } .jamf-etat-picto { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 99px; margin-bottom: 8px; background: var(--segment); color: var(--encre-3); } .jamf-etat-picto-ambre { background: var(--ambre-pale); color: var(--ambre); } .jamf-etat-titre { font-size: 14px; font-weight: 600; } .jamf-etat-detail { font-size: 12.5px; color: var(--encre-2); max-width: 48ch; line-height: 1.55; } .jamf-etat .bouton-secondaire { margin-top: 14px; } /* Tableau des appareils : entête figée, 50 lignes fluides */ .jamf-tableau-cadre { max-height: 432px; overflow-y: auto; animation: hc-in 0.3s ease both; } .tableau { width: 100%; border-collapse: collapse; font-size: 13px; } .tableau th { position: sticky; top: 0; z-index: 2; text-align: left; padding: 9px 22px; font-size: 10px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--encre-3); background: var(--tete-tableau); border-bottom: 1px solid var(--lisere-fort); } .tableau th.colonne-droite, .tableau td.colonne-droite { text-align: right; } .tableau td { padding: 8px 22px; border-bottom: 1px solid var(--lisere); } .tableau tbody tr { transition: background 0.12s ease; } .tableau tbody tr:hover { background: var(--survol-ligne); } .cellule-chambre { font-weight: 600; font-variant-numeric: tabular-nums; } .cellule-serie { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-size: 12px; letter-spacing: 0.035em; color: var(--encre-2); } .cellule-modele { color: var(--encre-2); } .cellule-contact { color: var(--encre-2); font-variant-numeric: tabular-nums; } /* Actions par chambre : boutons compacts et états d'action en cours. */ .cellule-actions > * { margin-right: 8px; vertical-align: middle; } .cellule-actions > *:last-child { margin-right: 0; } .bouton-chambre { font-size: 11.5px; padding: 4px 10px; } .bouton-chambre[disabled] { opacity: 0.5; cursor: not-allowed; } .etat-hors-kiosque { color: var(--encre-1); font-weight: 600; font-size: 12px; } .etat-cycle-canal { color: var(--encre-2); font-size: 12px; font-style: italic; } .note-retour-auto { color: var(--encre-3); font-size: 11px; font-variant-numeric: tabular-nums; } .jamf-filtre-vide { padding: 36px 22px; text-align: center; font-size: 12.5px; color: var(--encre-3); } .jamf-pied { display: flex; align-items: center; gap: 8px; padding: 10px 22px; border-top: 1px solid var(--lisere); font-size: 11px; color: var(--encre-3); flex-wrap: wrap; } .jamf-pied .pied-releve { margin-left: auto; font-variant-numeric: tabular-nums; } /* ----- 16. Page d'erreur ----- */ .carte-erreur { max-width: 560px; margin: 56px auto 0; text-align: center; animation: hc-in 0.36s cubic-bezier(0.2, 0.7, 0.25, 1) both; } .carte-erreur .erreur-picto { width: 48px; height: 48px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 99px; background: var(--segment); color: var(--encre-3); } .carte-erreur h1 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; } .carte-erreur .texte-secondaire { margin: 8px 0 0; font-size: 13px; line-height: 1.6; } .carte-erreur .bouton-secondaire { margin-top: 20px; } /* ----- 17. Barre d'onglets mobile ----- */ .hc-tabbar { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; height: 60px; align-items: stretch; gap: 2px; padding: 5px; border-radius: 17px; background: linear-gradient(180deg, var(--chrome-a), var(--chrome-b)); backdrop-filter: var(--flou-chrome); -webkit-backdrop-filter: var(--flou-chrome); border: 1px solid var(--lisere); box-shadow: var(--ombre-levee), inset 0 1px 0 var(--reflet); } .onglet-mobile { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; color: var(--encre-3); font-size: 9.5px; font-weight: 600; text-decoration: none; transition: background var(--transition-champ), color var(--transition-champ); } .onglet-mobile:hover { text-decoration: none; } .onglet-mobile-actif { color: var(--soin-fort); background: var(--soin-pale-2); } /* ----- 18. Animations — coupées si le poste les refuse ----- */ @keyframes hc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes hc-pop { from { opacity: 0; transform: scale(0.97) translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes hc-shimmer { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } } @keyframes hc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes hc-spin { to { transform: rotate(360deg); } } .apparition { animation: hc-in 0.36s cubic-bezier(0.2, 0.7, 0.25, 1) both; } .apparition-2 { animation: hc-in 0.4s 0.05s cubic-bezier(0.2, 0.7, 0.25, 1) both; } .apparition-3 { animation: hc-in 0.4s 0.1s cubic-bezier(0.2, 0.7, 0.25, 1) both; } .apparition-4 { animation: hc-in 0.4s 0.15s cubic-bezier(0.2, 0.7, 0.25, 1) both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ----- 19. Écrans intermédiaires et étroits ----- */ @media (max-width: 1240px) { .bande-indicateurs { grid-template-columns: 1fr 1fr; } .rangee-deux { grid-template-columns: 1fr; } .grille-infos { grid-template-columns: 1fr 1fr; } .cellule-infos { border-left: 1px solid var(--lisere); } .cellule-infos:nth-child(2n + 1) { border-left: none; } .cellule-infos:nth-child(n + 3) { border-top: 1px solid var(--lisere); } } @media (max-width: 960px) { .hc-lateral { display: none; } .hc-tabbar { display: flex; } .hc-contenu { padding: 18px 16px 118px; } .hc-top { margin: 10px 10px 0; } .hc-fil { display: none; } .nom-utilisateur { display: none; } .compte-bouton .badge-role { display: none; } .bande-indicateurs { grid-template-columns: 1fr; } .cellule-bande { border-left: none; } .cellule-bande + .cellule-bande { border-top: 1px solid var(--lisere); } .grille-infos { grid-template-columns: 1fr; } .cellule-infos { border-left: none; } .cellule-infos + .cellule-infos { border-top: 1px solid var(--lisere); } .hero-recherche { padding: 20px 18px; } .hero-ligne, .recherche-ligne { flex-direction: column; } .hero-ligne .bouton, .recherche-ligne .bouton { width: 100%; } .hc-salutation { flex-direction: column; align-items: flex-start; gap: 4px; } .jamf-entete { flex-direction: column; align-items: flex-start; } .jamf-outils { width: 100%; flex-wrap: wrap; } .jamf-filtre { flex: 1; } .jamf-filtre input { width: 100%; } .carte-connexion { padding: 30px 22px 26px; } }