/* ============================================================================
YCS — app.css (P21 — refonte design "Agendrix-exact")
============================================================================
Architecture cible :
- Sidebar verticale étroite (84px) avec icônes empilées
- Subnav blanche 240px (apparait quand la page la demande)
- Topbar minimaliste avec dropdown profil contenant le switcher de thème
- 3 palettes commutables : ycs / agendrix / agendrix-exact (sample direct)
- Compat préservée des classes legacy : .topbar, .ycs-hat, .sidebar-link,
.ycs-user-menu, .card, .btn-*, .badge-*, .alert-*, .form-*, .res-*, etc.
Convention couleurs : variables théméables au :root, surcharge par
html[data-theme="..."]. Choix mémorisé dans localStorage("ycs-theme").
============================================================================ */
/* ──────────────── PALETTE 1 — YCS (défaut) ──────────────── */
:root {
/* P27 — Palette YCS (défaut historique : sidebar sombre verte) */
--bg: #F4F7F6;
--bg-soft: #ECF2F0;
--surface: #FFFFFF;
--surface-2: #FAFBFB;
--side: #1F2D27;
--side-soft: #2A3A33;
--side-hover: #34453D;
--ink: #1B2A24;
--ink-soft: #475B53;
--ink-mute: #8A998F;
--ink-faint: #B8C2BC;
--ink-side: #C8D2CC;
--ink-side-mute:#7E8C85;
--teal: #1F4D45;
--teal-deep: #143631;
--teal-soft: #E0EDE9;
--coral: #E08B6E;
--coral-deep: #C36F4F;
--coral-soft: #F7E2D6;
--coral-pale: #FDF1E9;
--green: #4D9E6C;
--green-soft: #E5F0E9;
--amber: #D9A455;
--amber-soft: #F8EFDB;
--red: #C9554E;
--red-soft: #F8E3E1;
--line: #E5EAE8;
--line-soft: #EFF3F2;
--shadow-sm: 0 1px 2px rgba(31, 45, 39, 0.04);
--shadow: 0 1px 3px rgba(31, 45, 39, 0.06), 0 2px 8px -2px rgba(31, 45, 39, 0.04);
--shadow-pop: 0 12px 32px -16px rgba(31, 45, 39, 0.18), 0 4px 12px -6px rgba(31, 45, 39, 0.10);
--shadow-modal: 0 24px 60px -20px rgba(31, 45, 39, 0.35), 0 8px 24px -8px rgba(31, 45, 39, 0.20);
--r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 100px;
--accent-active: var(--coral);
/* Compat legacy YCS */
--accent-forest: var(--teal);
--accent-ochre: var(--amber);
--accent-brique: var(--coral-deep);
--accent-sauge: var(--green);
--text-primary: var(--ink);
--text-secondary: var(--ink-soft);
--text-muted: var(--ink-mute);
--bg-primary: var(--surface);
--bg-secondary: var(--bg);
}
/* ──────────────── PALETTE Agendrix EXACT (data-theme="agendrix-exact") ──────────────── */
html[data-theme="agendrix-exact"] {
--bg: #F2F8F8;
--bg-soft: #E5F1F1;
--surface: #FFFFFF;
--surface-2: #F2F8F8;
--side: #F2F8F8;
--side-soft: #E5F1F1;
--side-hover: #DAEAEA;
--ink: #25323A;
--ink-soft: #41525E;
--ink-mute: #7C8C92;
--ink-faint: #B6C3C5;
--ink-side: #478C8D;
--ink-side-mute:#7B9F9F;
--teal: #2F6771;
--teal-deep: #1F4D55;
--teal-soft: #E0EBEB;
--coral: #E9A490;
--coral-deep: #D08A75;
--coral-soft: #F4D0C5;
--coral-pale: #FDF2E6;
--line: #DDE9E9;
--line-soft: #ECF2F2;
--accent-active: #0F6972;
}
/* Overrides spécifiques à agendrix-exact */
html[data-theme="agendrix-exact"] .side-item.active .side-ic {
background: var(--accent-active);
color: #FFFFFF;
box-shadow: 0 1px 3px rgba(15, 105, 114, 0.25);
}
html[data-theme="agendrix-exact"] .side-item.active { color: var(--accent-active); }
html[data-theme="agendrix-exact"] .side-item:not(.active) .side-ic { color: #478C8D; }
html[data-theme="agendrix-exact"] .side-item:not(.active) { color: #478C8D; }
html[data-theme="agendrix-exact"] .subnav { background: var(--bg-soft); border-right: 1px solid var(--line); }
html[data-theme="agendrix-exact"] .subnav-item.active {
background: var(--accent-active);
color: #FFFFFF;
}
html[data-theme="agendrix-exact"] .subnav-item.active .subnav-count {
background: rgba(255,255,255,0.22);
color: #FFFFFF;
}
html[data-theme="agendrix-exact"] .topbar { background: var(--bg); }
html[data-theme="agendrix-exact"] .main { background: var(--bg); }
html[data-theme="agendrix-exact"] .page-content { background: var(--surface); }
/* ──────────────── PALETTE 2 — Agendrix interprété (sombre) ──────────────── */
/* ──────────────── RESET + BASE ──────────────── */
* { box-sizing: border-box; }
*:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 6px; }
html, body {
margin: 0; padding: 0;
background: var(--bg);
color: var(--ink);
font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
transition: background 0.25s, color 0.25s;
}
body.space-team { background: var(--bg); }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
a.no-underline, .sidebar-link, .nav-link, .side-item, .subnav-item { text-decoration: none; }
/* ──────────────── LAYOUT GLOBAL ──────────────── */
.app {
--layout-sidebar-w: 84px;
--layout-subnav-w: 240px;
display: grid;
grid-template-columns: var(--layout-sidebar-w) var(--layout-subnav-w) minmax(0, 1fr);
min-height: 100vh;
transition: grid-template-columns 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.app.no-subnav {
--layout-subnav-w: 0px;
grid-template-columns: var(--layout-sidebar-w) 0 minmax(0, 1fr);
}
.app.subnav-boot {
--layout-subnav-w: 0px;
grid-template-columns: var(--layout-sidebar-w) 0 minmax(0, 1fr);
}
.app.subnav-boot:not(.no-subnav) {
--layout-subnav-w: 240px;
grid-template-columns: var(--layout-sidebar-w) var(--layout-subnav-w) minmax(0, 1fr);
}
/* ──────────────── SIDEBAR VERTICALE 84px ──────────────── */
.sidebar {
background: var(--side);
padding: 14px 0;
position: sticky; top: 0; height: 100vh;
overflow-y: auto; overflow-x: hidden;
display: flex; flex-direction: column; align-items: center;
z-index: 30;
transition: background 0.25s, border-color 0.25s;
}
.sidebar-logo {
width: 64px; height: 64px;
display: flex; align-items: center; justify-content: center;
margin: 4px 0 18px; flex-shrink: 0;
text-decoration: none !important;
padding: 6px;
}
.sidebar-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sidebar-logo img,
.sidebar-logo svg { width: 100%; height: 100%; object-fit: contain; }
.sidebar-logo:hover { text-decoration: none; opacity: 0.92; }
.sidebar-nav {
display: flex; flex-direction: column;
gap: 2px; width: 100%; padding: 0 8px;
}
.side-item {
display: flex; flex-direction: column; align-items: center;
gap: 4px;
padding: 9px 4px 8px;
color: var(--ink-side-mute);
font-size: 10.5px; font-weight: 500;
border-radius: var(--r-sm);
cursor: pointer; text-align: center;
transition: all 0.15s;
position: relative;
background: none; border: none; width: 100%;
text-decoration: none;
}
.side-item:hover { background: var(--side-hover); color: var(--ink-side); text-decoration: none; }
/* P31 — État actif aligné sur le proto v2 :
- label : couleur coral (--coral)
- icône : fond plus clair (--side-soft) + halo subtil (rgba coral 0.3) */
.side-item.active { color: var(--coral); }
.side-item.active .side-ic {
background: var(--side-soft);
color: var(--coral);
box-shadow: 0 0 0 1px rgba(224, 139, 110, 0.3);
}
.side-ic {
width: 38px; height: 38px;
border-radius: var(--r-sm);
display: flex; align-items: center; justify-content: center;
color: var(--ink-side);
transition: all 0.15s;
position: relative;
}
.side-ic svg { width: 20px; height: 20px; stroke-width: 1.5; }
.side-ic i { font-size: 19px; line-height: 1; }
.side-pulse {
position: absolute; top: 4px; right: 4px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--coral);
border: 2px solid var(--side);
animation: ycs-pulse 2.4s infinite;
}
@keyframes ycs-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
.side-count {
position: absolute; top: 3px; right: 3px;
background: var(--coral); color: white;
font-size: 9.5px; font-weight: 700;
padding: 1px 5px; border-radius: 10px;
border: 2px solid var(--side);
min-width: 18px; text-align: center; line-height: 1;
}
.sidebar-foot {
margin-top: auto; width: 100%;
padding: 8px;
display: flex; flex-direction: column; gap: 2px;
}
/* ──────────────── SUBNAV BLANCHE 240px (optionnelle) ──────────────── */
.subnav {
background: var(--surface);
border-right: 1px solid var(--line);
width: var(--layout-subnav-w);
overflow: visible;
transition:
width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.2s ease,
box-shadow 0.25s ease;
opacity: 1;
height: 100vh;
position: sticky; top: 0;
z-index: 20;
box-shadow: 1px 0 0 rgba(31, 45, 39, 0.015);
}
.app.no-subnav .subnav {
border-right-color: transparent;
box-shadow: none;
}
.subnav-inner {
padding: 16px 14px;
min-width: 240px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
position: relative;
transform: translateX(0);
opacity: 1;
transition:
transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.22s ease;
will-change: transform, opacity;
}
.app.no-subnav .subnav-inner {
transform: translateX(-28px);
opacity: 0;
pointer-events: none;
}
.app.subnav-boot .subnav-inner {
transform: translateX(-34px);
opacity: 0;
}
.app.subnav-boot:not(.no-subnav) .subnav-inner {
transform: translateX(0);
opacity: 1;
}
.subnav-head {
padding: 6px 8px 14px;
border-bottom: 1px solid var(--line-soft);
margin-bottom: 10px;
display: flex; align-items: center; justify-content: space-between;
}
.subnav-title {
font-size: 11px; color: var(--ink-mute);
font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase;
}
.subnav-collapse {
width: 24px; height: 24px;
border-radius: 6px;
background: transparent;
border: 1px solid var(--line);
color: var(--ink-mute);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.15s;
}
.subnav-collapse:hover { background: var(--bg-soft); color: var(--ink); }
.subnav-open-tab {
position: absolute;
top: 82px;
right: -18px;
width: 34px;
height: 42px;
border: 1px solid var(--line);
border-left: 0;
border-radius: 0 14px 14px 0;
background: color-mix(in srgb, var(--surface) 96%, transparent);
color: var(--ink-soft);
box-shadow: 8px 12px 28px -20px rgba(31,45,39,.45);
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transform: translateX(-8px);
transition:
opacity 0.18s ease,
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
background 0.15s ease,
color 0.15s ease;
z-index: 4;
}
.subnav-open-tab:hover {
background: var(--surface);
color: var(--teal);
}
.app.no-subnav .subnav-open-tab {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.app.subnav-boot .subnav-open-tab {
opacity: 0;
pointer-events: none;
transform: translateX(-8px);
}
@media (prefers-reduced-motion: reduce) {
.app,
.subnav,
.subnav-inner,
.subnav-open-tab,
.subnav-vertical-mark {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
.subnav-vertical-mark {
position: absolute;
left: 26px;
bottom: 74px;
max-width: calc(100vh - 260px);
opacity: var(--subnav-mark-opacity, .085);
pointer-events: none;
user-select: none;
z-index: 0;
color: var(--teal-deep);
transform: rotate(-90deg) translateY(100%);
transform-origin: left bottom;
white-space: nowrap;
transition: opacity .2s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
}
.subnav-vertical-mark.is-text {
font-size: var(--subnav-mark-size, 72px);
line-height: .86;
font-weight: 800;
letter-spacing: -.055em;
color: var(--teal-deep);
}
.subnav-vertical-mark.is-wordmark img {
display: block;
width: var(--subnav-mark-size, 250px);
max-width: 58vh;
filter: saturate(.55) brightness(.72);
}
.app.no-subnav .subnav-vertical-mark {
opacity: 0;
transform: rotate(-90deg) translateY(100%) translateX(-18px);
}
.subnav-head,
.subnav-search,
.subnav-section,
.subnav-cta {
position: relative;
z-index: 1;
}
.subnav-section { padding: 8px 0; }
.subnav-section-label {
font-size: 11px; color: var(--ink-mute);
font-weight: 600; letter-spacing: 0.04em;
padding: 4px 12px 6px;
text-transform: uppercase;
}
.subnav-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
color: var(--ink-soft);
font-size: 13.5px; font-weight: 500;
border-radius: var(--r-sm);
margin: 1px 0;
cursor: pointer;
transition: all 0.12s;
border: none; background: transparent;
width: 100%; text-align: left;
text-decoration: none;
}
.subnav-item:hover {
background: rgba(71, 140, 141, 0.12);
color: #478c8d;
text-decoration: none;
}
.subnav-item:hover i { color: #478c8d; }
.subnav-item.active {
background: var(--teal);
color: white; font-weight: 600;
}
.subnav-item.active:hover {
background: var(--teal);
color: white;
}
.subnav-item.active .subnav-count { background: rgba(255,255,255,0.18); color: white; }
.subnav-count {
margin-left: auto;
background: var(--line); color: var(--ink-mute);
font-size: 10px; font-weight: 700;
padding: 1px 6px; border-radius: var(--r-pill);
line-height: 1.4;
}
/* ──────────────── TOPBAR (dans .main, à droite de la sidebar) ──────────────── */
.topbar {
display: flex; align-items: center; gap: 16px;
padding: 14px 28px;
background: var(--bg);
position: sticky; top: 0; z-index: 25;
transition: background 0.25s;
min-height: 68px;
}
.main { min-width: 0; background: var(--bg); }
.topbar-brand {
display: flex; align-items: center; gap: 12px;
text-decoration: none;
}
.topbar-brand:hover { text-decoration: none; }
.topbar-logo { height: 28px; width: auto; }
.org-block {
display: flex; align-items: center; gap: 12px;
text-decoration: none;
}
.org-block:hover { text-decoration: none; }
.org-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--teal-soft);
color: var(--teal-deep);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 14px;
box-shadow: 0 1px 3px rgba(31, 45, 39, 0.08);
cursor: pointer;
flex-shrink: 0;
}
.org-name { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.org-sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; font-weight: 500; }
/* Casquettes (compat .ycs-hat) restylées en pills modernes */
.topbar-hats {
display: flex; align-items: center; gap: 6px;
}
.ycs-hat, .ycs-hat-label {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px;
border-radius: var(--r-pill);
font-size: 13px; font-weight: 600;
color: var(--ink-soft);
text-decoration: none;
border: 1px solid transparent;
background: transparent;
transition: all 0.15s;
line-height: 1.3;
}
.ycs-hat:hover {
background: var(--bg-soft);
color: var(--ink);
text-decoration: none;
}
.ycs-hat.active {
background: var(--coral-pale);
color: var(--coral-deep);
box-shadow: inset 0 0 0 1px var(--coral-soft);
}
.ycs-hat-label {
font-family: 'DM Serif Display', Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: 17px;
color: var(--teal);
padding: 6px 4px;
background: transparent;
border: none;
}
.ycs-hat-return {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
margin-left: 14px;
font-size: 13px; font-weight: 500;
color: var(--ink-mute);
text-decoration: none;
border: 1px solid var(--line);
border-radius: var(--r-pill);
transition: all 0.12s;
}
.ycs-hat-return:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--bg-soft); text-decoration: none; }
.tb-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tb-pill {
background: var(--coral-pale);
color: var(--coral-deep);
padding: 6px 14px;
border-radius: var(--r-pill);
font-size: 12.5px; font-weight: 600;
display: inline-flex; align-items: center; gap: 6px;
}
.tb-pill::before {
content: ''; width: 8px; height: 8px;
border-radius: 50%;
background: var(--coral);
box-shadow: 0 0 0 2px var(--coral-pale);
}
.tb-link {
color: var(--ink-soft); font-size: 13px; font-weight: 500;
text-decoration: none; padding: 4px 8px; cursor: pointer;
}
.tb-link:hover { color: var(--ink); text-decoration: none; }
.tb-circle {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
color: var(--ink-soft);
cursor: pointer; transition: all 0.15s;
position: relative;
}
.tb-circle:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--ink-faint); }
.tb-circle svg { width: 16px; height: 16px; }
.tb-circle.has-badge::after {
content: ''; position: absolute;
top: 6px; right: 6px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--coral);
border: 2px solid var(--surface);
}
.tb-avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12.5px;
cursor: pointer;
box-shadow: 0 1px 3px rgba(31, 45, 39, 0.12);
border: none;
}
/* Compat .ycs-user-menu (details/summary) → dropdown moderne */
.ycs-user-menu {
position: relative;
}
.ycs-user-menu > summary {
list-style: none;
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 10px;
border-radius: var(--r-pill);
transition: background 0.15s;
}
.ycs-user-menu > summary::-webkit-details-marker { display: none; }
.ycs-user-menu > summary:hover { background: var(--bg-soft); }
.ycs-user-menu .ycs-user-name {
font-size: 13px; font-weight: 600; color: var(--ink);
}
.ycs-user-menu .ycs-user-caret { font-size: 11px; color: var(--ink-mute); }
.ycs-user-menu[open] > summary { background: var(--bg-soft); }
.ycs-user-dropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 260px;
background: var(--surface);
border-radius: var(--r);
box-shadow: var(--shadow-modal);
border: 1px solid var(--line);
overflow: hidden;
z-index: 100;
padding: 6px 0;
}
.ycs-user-dropdown-header {
padding: 14px 16px 12px;
border-bottom: 1px solid var(--line-soft);
display: flex; flex-direction: column; gap: 2px;
}
.ycs-user-dropdown-header strong {
font-size: 14px; font-weight: 700; color: var(--ink);
}
.ycs-user-dropdown-header span {
font-size: 12px; color: var(--ink-mute);
}
.ycs-user-dropdown-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 16px;
color: var(--ink-soft);
font-size: 13.5px;
cursor: pointer;
transition: background 0.1s;
border: none; background: transparent;
width: 100%; text-align: left;
text-decoration: none;
}
.ycs-user-dropdown-item:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.ycs-user-dropdown-item i { font-size: 14px; color: var(--ink-mute); width: 16px; }
.ycs-user-dropdown-item:hover i { color: var(--ink); }
.ycs-user-dropdown-divider {
height: 1px;
background: var(--line-soft);
margin: 6px 0;
}
.ycs-user-dropdown-section {
padding: 8px 16px 6px;
font-size: 10.5px;
font-weight: 700;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Theme switcher dans le dropdown profil */
.ycs-theme-switch {
padding: 4px 12px 10px;
}
.ycs-theme-switch-options {
display: flex; gap: 4px;
background: var(--bg-soft);
border-radius: var(--r-pill);
padding: 3px;
}
.ycs-theme-opt {
flex: 1;
background: transparent;
border: none;
padding: 6px 8px;
border-radius: var(--r-pill);
font-size: 11.5px; font-weight: 600;
color: var(--ink-mute);
cursor: pointer;
transition: all 0.15s;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
line-height: 1.2;
}
.ycs-theme-opt:hover { color: var(--ink); }
.ycs-theme-opt.active {
background: var(--surface);
color: var(--ink);
box-shadow: 0 1px 3px rgba(31, 45, 39, 0.1);
}
.ycs-theme-opt .swatch {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
border: 1.5px solid currentColor;
}
.ycs-theme-opt[data-theme="ycs"] .swatch { background: #1F4D45; }
.ycs-theme-opt[data-theme="agendrix-exact"] .swatch { background: #2F6771; }
/* P31 : burger mobile retiré du HTML topbar. Règle conservée pour compat
si une autre page injecte encore .ycs-sidebar-toggle. */
.ycs-sidebar-toggle {
display: none;
width: 38px; height: 38px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-soft);
align-items: center; justify-content: center;
cursor: pointer;
}
.ycs-sidebar-toggle i { font-size: 18px; }
/* ──────────────── MAIN + PAGE ──────────────── */
.main {
min-width: 0;
background: var(--bg);
display: flex; flex-direction: column;
min-height: 100vh;
}
.page-header {
display: flex; align-items: flex-end; justify-content: space-between;
padding: 16px 28px 8px;
gap: 16px;
}
.page-header-text { flex: 1; min-width: 0; }
.breadcrumb {
font-size: 11.5px;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-bottom: 6px;
}
.page-header h1 {
font-size: 30px;
font-weight: 700;
color: var(--teal);
margin: 0;
letter-spacing: -0.015em;
line-height: 1.1;
transition: color 0.25s;
}
.page-header-actions {
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
}
.page-content {
padding: 16px 28px 48px;
flex: 1;
background: var(--surface);
margin: 0 16px 16px;
border-radius: var(--r-lg);
box-shadow: 0 1px 2px rgba(31, 45, 39, 0.03);
}
.page-content-open {
background: transparent;
box-shadow: none;
margin: 0;
border-radius: 0;
padding: 16px 28px 64px;
position: relative;
overflow: visible;
}
.page-content-open > *:not(.page-watermark) {
position: relative;
z-index: 1;
}
.page-watermark {
position: fixed;
left: calc(var(--layout-sidebar-w) + var(--layout-subnav-w) + 12px);
bottom: -46px;
width: min(62vw, 860px);
opacity: 0.078;
pointer-events: none;
z-index: 0;
filter: saturate(.72);
mix-blend-mode: multiply;
transform: translateZ(0);
}
.page-watermark img {
display: block;
width: 100%;
height: auto;
}
.workspace {
max-width: 1120px;
}
.workspace-pane {
max-width: 760px;
}
.workspace-pane--wide {
max-width: 980px;
}
.workspace-stack {
display: grid;
gap: 18px;
}
@media (max-width: 980px) {
.page-content-open { padding: 16px 18px 40px; }
.page-watermark {
left: calc(var(--layout-sidebar-w) + 12px);
bottom: -28px;
width: min(78vw, 560px);
opacity: 0.062;
}
}
@media (max-width: 768px) {
.page-watermark { display: none; }
.workspace-pane,
.workspace-pane--wide,
.workspace { max-width: none; }
}
/* ──────────────── BOUTONS ──────────────── */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
border-radius: var(--r-pill);
font-size: 13.5px; font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.15s;
text-decoration: none;
line-height: 1.3;
}
.btn:hover { text-decoration: none; }
.btn-primary {
background: var(--coral);
color: white;
box-shadow: 0 2px 8px rgba(224, 139, 110, 0.35);
}
.btn-primary:hover {
background: var(--coral-deep);
box-shadow: 0 4px 14px rgba(224, 139, 110, 0.45);
transform: translateY(-1px);
color: white;
}
.btn-secondary {
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
}
.btn-secondary:hover { background: var(--bg-soft); border-color: var(--ink-faint); }
.btn-ghost {
background: transparent;
color: var(--ink-soft);
border: 1px solid var(--line);
padding: 9px 16px;
}
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--ink-faint); color: var(--ink); }
.btn-danger {
background: var(--red);
color: white;
}
.btn-danger:hover { background: #B04A43; color: white; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 12px 22px; font-size: 14.5px; }
.btn-block { width: 100%; justify-content: center; }
.btn-group {
display: inline-flex;
background: var(--bg-soft);
border-radius: var(--r-pill);
padding: 3px;
gap: 2px;
}
.btn-group .btn {
padding: 6px 14px;
background: transparent;
color: var(--ink-mute);
font-size: 12.5px;
border-radius: var(--r-pill);
box-shadow: none;
}
.btn-group .btn:hover { background: transparent; color: var(--ink); transform: none; }
.btn-group .btn.active {
background: var(--surface);
color: var(--ink);
box-shadow: 0 1px 2px rgba(31, 45, 39, 0.08);
}
.btn-icon {
width: 34px; height: 34px;
padding: 0; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
color: var(--ink-mute);
border: 1px solid transparent;
}
.btn-icon:hover { background: var(--bg-soft); color: var(--ink); }
.btn-icon i { font-size: 16px; }
/* ──────────────── CARDS ──────────────── */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
margin-bottom: 16px;
}
.card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--line-soft);
gap: 12px;
}
.card-header h2, .card-header h3 {
font-size: 16px; font-weight: 700;
color: var(--teal);
letter-spacing: -0.01em;
margin: 0;
transition: color 0.25s;
}
.card-subtitle {
font-size: 12.5px;
color: var(--ink-mute);
margin-top: 2px;
}
.card-body { padding: 18px; }
.card-foot {
padding: 12px 18px;
border-top: 1px solid var(--line-soft);
background: var(--surface-2);
display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
/* ──────────────── KPI / STATS ──────────────── */
.kpi {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 16px 18px;
transition: all 0.18s;
}
.kpi:hover {
background: var(--surface);
border-color: var(--ink-faint);
box-shadow: var(--shadow);
transform: translateY(-2px);
}
.kpi-label {
display: flex; align-items: center; justify-content: space-between;
font-size: 12px;
color: var(--ink-mute);
font-weight: 600;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.kpi-icon {
width: 26px; height: 26px;
border-radius: var(--r-sm);
background: var(--teal-soft);
color: var(--teal);
display: flex; align-items: center; justify-content: center;
}
.kpi.coral .kpi-icon { background: var(--coral-soft); color: var(--coral-deep); }
.kpi.amber .kpi-icon { background: var(--amber-soft); color: var(--amber); }
.kpi.red .kpi-icon, .ycs-kpi-alert .kpi-icon { background: var(--red-soft); color: var(--red); }
.kpi-icon svg { width: 14px; height: 14px; }
.kpi-icon i { font-size: 14px; }
.kpi-val {
display: flex; align-items: baseline; gap: 10px;
margin-top: 4px;
}
.kpi-num {
font-size: 30px; font-weight: 800;
color: var(--teal);
letter-spacing: -0.025em;
line-height: 1;
transition: color 0.25s;
}
.kpi-num small { font-size: 16px; font-weight: 600; color: var(--ink-mute); margin-left: 2px; }
.kpi-delta {
font-size: 12px; font-weight: 600;
color: var(--green);
display: inline-flex; align-items: center; gap: 3px;
}
.kpi-delta.down { color: var(--red); }
.kpis-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-bottom: 22px;
}
/* ──────────────── BADGES ──────────────── */
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 9px;
border-radius: var(--r-pill);
font-size: 11.5px;
font-weight: 600;
line-height: 1.4;
}
.badge::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
opacity: 0.9;
}
.badge.no-dot::before { display: none; }
.badge-success, .badge-green { background: var(--green-soft); color: var(--green); }
.badge-warning, .badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-danger, .badge-red { background: var(--red-soft); color: var(--red); }
.badge-info, .badge-coral { background: var(--coral-soft); color: var(--coral-deep); }
.badge-secondary, .badge-gray { background: var(--bg-soft); color: var(--ink-soft); }
.badge-teal { background: var(--teal-soft); color: var(--teal-deep); }
.badge-count {
background: var(--coral);
color: white;
font-size: 10.5px; font-weight: 700;
padding: 1px 6px;
border-radius: var(--r-pill);
margin-left: auto;
min-width: 18px; text-align: center;
}
.badge-count::before { display: none; }
.badge-risk {
background: var(--red);
color: white;
font-size: 10.5px; font-weight: 700;
padding: 2px 7px;
border-radius: var(--r-pill);
}
.badge-risk::before { display: none; }
/* ──────────────── ALERTS ──────────────── */
.alert {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px;
border-radius: var(--r);
margin-bottom: 14px;
font-size: 13.5px;
line-height: 1.5;
position: relative;
}
.alert i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.alert div { flex: 1; }
.alert .btn-close {
background: transparent;
border: none;
color: currentColor;
opacity: 0.6;
width: 24px; height: 24px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.alert .btn-close:hover { opacity: 1; background: rgba(0,0,0,0.06); }
.alert-success { background: var(--green-soft); color: var(--green); }
.alert-info { background: var(--coral-pale); color: var(--coral-deep); }
.alert-warning { background: var(--amber-soft); color: var(--amber); }
.alert-danger { background: var(--red-soft); color: var(--red); }
/* ──────────────── FORMS ──────────────── */
.form-group { margin-bottom: 14px; }
.form-group.mb-0 { margin-bottom: 0; }
.form-label {
display: block;
font-size: 11px; font-weight: 600;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
}
.form-control, .form-select, input[type="text"]:not(.no-style),
input[type="email"]:not(.no-style), input[type="password"]:not(.no-style),
input[type="number"]:not(.no-style), input[type="date"]:not(.no-style),
input[type="tel"]:not(.no-style), input[type="search"]:not(.no-style),
input[type="url"]:not(.no-style), textarea:not(.no-style) {
width: 100%;
padding: 11px 14px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-sm);
color: var(--ink);
font-family: inherit;
font-size: 14px;
transition: border-color 0.15s, box-shadow 0.15s;
outline: none;
}
.form-control:focus, .form-select:focus,
input:focus:not(.no-style), textarea:focus:not(.no-style) {
border-color: var(--coral);
box-shadow: 0 0 0 3px var(--coral-pale);
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
color: var(--ink-faint);
}
.form-text {
font-size: 12px;
color: var(--ink-mute);
margin-top: 4px;
}
.form-error {
font-size: 12px;
color: var(--red);
margin-top: 4px;
display: flex; align-items: center; gap: 5px;
}
.form-check {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px;
}
.form-check-input {
width: 16px; height: 16px;
border: 1.5px solid var(--line);
border-radius: 4px;
background: var(--surface);
cursor: pointer;
flex-shrink: 0;
accent-color: var(--coral);
}
.form-check-label {
font-size: 13.5px;
color: var(--ink-soft);
cursor: pointer;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 720px) {
.grid-2, .grid-3 { grid-template-columns: 1fr; }
}
/* ──────────────── TABS ──────────────── */
.tabs, .nav-tabs {
display: flex; align-items: center;
gap: 28px;
border-bottom: 1px solid var(--line);
margin: 0 0 22px;
}
.tab, .nav-tabs .nav-link {
padding: 10px 2px 12px;
font-size: 14px; font-weight: 600;
color: var(--ink-mute);
cursor: pointer;
border: none;
background: transparent;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
display: inline-flex; align-items: center; gap: 7px;
transition: color 0.15s, border-color 0.15s;
text-decoration: none;
}
.tab:hover, .nav-tabs .nav-link:hover { color: var(--ink); text-decoration: none; }
.tab.active, .nav-tabs .nav-link.active {
color: var(--coral);
border-bottom-color: var(--coral);
}
.tab-count {
background: var(--line);
color: var(--ink-mute);
font-size: 11px; font-weight: 700;
padding: 1px 7px; border-radius: var(--r-pill);
line-height: 1.4;
}
.tab.active .tab-count { background: var(--coral-soft); color: var(--coral-deep); }
/* ──────────────── COMPAT — sidebar-link (legacy) ──────────────── */
.sidebar-section { padding: 8px 0; }
.sidebar-section-label {
font-size: 11px; color: var(--ink-mute);
font-weight: 600; letter-spacing: 0.04em;
padding: 6px 12px 4px;
text-transform: uppercase;
}
.sidebar-link {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
color: var(--ink-soft);
font-size: 13.5px;
font-weight: 500;
border-radius: var(--r-sm);
margin: 1px 0;
text-decoration: none;
transition: all 0.12s;
}
.sidebar-link:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.sidebar-link.active {
background: var(--teal);
color: white;
}
.sidebar-link i { width: 16px; font-size: 15px; }
.sidebar-link span { flex: 1; }
.sidebar-link .badge-count {
background: var(--coral);
color: white;
}
/* ──────────────── RÉSA (nouveau format .res-row inspiré prototype v2) ──────────────── */
/* Le format .res-row est la grammaire cible pour reservations.php. Les
classes legacy .res-item / .res-header sont conservées en compat plus bas. */
.res-list {
display: flex;
flex-direction: column;
gap: 0;
}
.res-row {
display: grid;
grid-template-columns: 1fr 150px 150px 110px;
align-items: center;
gap: 16px;
padding: 14px 20px;
border-bottom: 1px solid var(--line-soft);
cursor: pointer;
transition: background 0.1s;
text-decoration: none;
color: inherit;
}
.res-row:hover { background: var(--bg); text-decoration: none; }
.res-row:last-child { border-bottom: none; }
.res-guest-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.res-avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--teal-soft);
color: var(--teal-deep);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12.5px;
flex-shrink: 0;
line-height: 1;
}
.res-avatar.coral { background: var(--coral-soft); color: var(--coral-deep); }
.res-avatar.amber { background: var(--amber-soft); color: var(--amber); }
.res-avatar.green { background: var(--green-soft); color: var(--green); }
.res-avatar.red { background: var(--red-soft); color: var(--red); }
.res-info { min-width: 0; flex: 1; }
.res-guest {
font-size: 14px; color: var(--ink);
font-weight: 600; line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.res-source {
font-size: 11.5px;
color: var(--ink-mute);
margin-top: 2px;
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
line-height: 1.4;
}
.src-tag {
background: var(--bg-soft);
color: var(--ink-soft);
padding: 1px 7px;
border-radius: var(--r-pill);
font-weight: 600;
font-size: 11px;
white-space: nowrap;
}
.res-prop {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--ink-soft); font-weight: 500;
min-width: 0;
}
.res-prop::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: var(--teal);
flex-shrink: 0;
}
.res-prop[data-c="1"]::before { background: var(--teal); }
.res-prop[data-c="2"]::before { background: var(--coral); }
.res-prop[data-c="3"]::before { background: var(--amber); }
.res-prop[data-c="4"]::before { background: var(--green); }
.res-prop[data-c="5"]::before { background: var(--ink-mute); }
.res-dates {
font-size: 12.5px; color: var(--ink);
line-height: 1.4; font-weight: 600;
}
.res-dates small {
display: block;
font-size: 11.5px;
color: var(--ink-mute);
font-weight: 500;
margin-top: 1px;
}
.res-status { text-align: right; }
.res-status .badge { font-size: 11.5px; }
.res-sort-bar {
display: grid;
/* P32 — 7 cols alignées sur .res-header */
grid-template-columns: 200px 70px 1fr 80px 50px 80px 30px;
gap: 14px;
padding: 10px 20px;
font-size: 11px;
font-weight: 700;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--line);
background: var(--surface-2);
}
.res-sort { text-align: left; }
.res-sort.center { text-align: center; }
.res-sort a { color: inherit; text-decoration: none; }
.res-sort a:hover { color: var(--ink); }
/* ──────────────── COMPAT — .res-item / .res-header (legacy) ──────────────── */
/* Pour les pages qui n'ont pas encore migré vers .res-row, on continue de
styler l'ancienne structure proprement. Les pages migrées utilisent .res-row. */
.res-item {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
margin-bottom: 8px;
overflow: hidden;
transition: all 0.18s;
}
.res-item:hover { border-color: var(--ink-faint); box-shadow: var(--shadow); }
.res-item.is-now, .res-item.is-today {
border-color: var(--coral-soft);
box-shadow: inset 3px 0 0 var(--coral);
}
.res-item.open { box-shadow: var(--shadow-pop); border-color: var(--coral); }
.res-header {
display: grid;
/* P32 — 7 cols : Séjour (dates) | Type | Locataire | Pers. | LG | Envois | chevron */
grid-template-columns: 200px 70px 1fr 80px 50px 80px 30px;
align-items: center;
gap: 14px;
padding: 14px 20px;
cursor: pointer;
transition: background 0.1s;
}
.res-header:hover { background: var(--bg); }
.res-header-checkbox { display: flex; align-items: center; justify-content: center; }
.res-header-dates {
font-size: 12.5px; color: var(--ink); font-weight: 600; line-height: 1.4;
}
.res-header-type {
font-size: 11px; color: var(--ink-mute);
text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.res-header-guest { min-width: 0; }
.res-header-guest-name {
font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.res-header-guest-icons {
display: flex; gap: 4px; font-size: 11.5px; color: var(--ink-mute); margin-top: 2px;
}
.res-header-pers, .res-header-lang {
font-size: 12px; color: var(--ink-soft); text-align: center;
}
.res-header-sent { display: flex; gap: 6px; font-size: 13px; justify-content: center; }
.res-header-chevron { color: var(--ink-mute); transition: transform 0.2s; text-align: center; }
.res-item.open .res-header-chevron { transform: rotate(180deg); }
.res-body {
display: none;
background: var(--surface-2);
border-top: 1px solid var(--line-soft);
}
.res-item.open .res-body { display: block; }
.res-body-inner { padding: 18px; }
.res-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px; margin-bottom: 18px;
}
.res-detail-block {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 14px 16px;
}
.res-detail-block h3, .res-detail-block h4 {
font-size: 11px; color: var(--ink-mute);
text-transform: uppercase; letter-spacing: 0.06em;
font-weight: 700; margin: 0 0 8px;
}
.res-detail-block dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px; margin: 0; font-size: 13px;
}
.res-detail-block dt { color: var(--ink-mute); }
.res-detail-block dd { margin: 0; color: var(--ink); font-weight: 500; }
.res-detail-note {
background: var(--coral-pale);
border-left: 3px solid var(--coral);
padding: 10px 14px; border-radius: var(--r-sm);
font-size: 13px; color: var(--ink-soft);
line-height: 1.5; margin-bottom: 12px;
}
.res-actions {
display: flex; gap: 8px; flex-wrap: wrap;
padding-top: 8px; border-top: 1px solid var(--line-soft);
}
/* Détail résa (page reservation_edit.php) */
.res-edit-page { max-width: 1100px; margin: 0 auto; }
.res-edit-header {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 18px 22px;
margin-bottom: 22px;
display: flex; align-items: center; gap: 18px;
flex-wrap: wrap;
}
.res-edit-header-dates { font-size: 15px; font-weight: 600; color: var(--ink); }
.res-edit-header-guest { flex: 1; font-size: 17px; font-weight: 700; color: var(--teal); }
.res-edit-header-ref { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--ink-mute); }
/* ──────────────── MODALE RECHERCHE GLOBALE (cmd+K) ──────────────── */
.search-modal {
max-width: 600px;
padding: 0;
overflow: hidden;
}
.search-modal-input {
display: flex; align-items: center; gap: 14px;
padding: 20px 24px;
border-bottom: 1px solid var(--line);
}
.search-modal-input svg, .search-modal-input i { color: var(--ink-mute); font-size: 18px; flex-shrink: 0; }
.search-modal-input input {
background: transparent; border: none; outline: none;
flex: 1; min-width: 0;
color: var(--ink);
font-family: inherit; font-size: 16px; font-weight: 500;
padding: 0;
}
.search-modal-input input::placeholder { color: var(--ink-faint); }
.search-modal-input kbd {
background: var(--bg-soft);
border: 1px solid var(--line);
padding: 2px 8px;
border-radius: 4px;
font-family: inherit;
font-size: 11px; font-weight: 600;
color: var(--ink-mute);
flex-shrink: 0;
}
.search-results {
padding: 8px 0;
max-height: 60vh;
overflow-y: auto;
}
.search-group { padding: 4px 0; }
.search-group-label {
font-size: 11px; font-weight: 700;
color: var(--ink-mute);
text-transform: uppercase; letter-spacing: 0.08em;
padding: 10px 24px 6px;
}
.search-item {
display: flex; align-items: center; gap: 14px;
padding: 10px 24px;
cursor: pointer;
transition: background 0.08s;
text-decoration: none;
color: inherit;
}
.search-item:hover, .search-item.kb-focus {
background: var(--bg-soft); text-decoration: none;
}
.search-item-ic {
width: 36px; height: 36px;
border-radius: var(--r-sm);
background: var(--teal-soft);
color: var(--teal);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.search-item-ic i { font-size: 16px; }
.search-item-text { flex: 1; min-width: 0; }
.search-item-title {
font-size: 14.5px;
color: var(--ink);
font-weight: 600;
line-height: 1.2;
}
.search-item-sub {
font-size: 12px;
color: var(--ink-mute);
margin-top: 2px;
}
.search-empty {
padding: 50px 24px;
text-align: center;
color: var(--ink-mute);
font-size: 13.5px;
}
/* ──────────────── DROPDOWN NOTIFICATIONS ──────────────── */
.dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 360px;
background: var(--surface);
border-radius: var(--r);
box-shadow: var(--shadow-modal);
border: 1px solid var(--line);
overflow: hidden;
z-index: 100;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: all 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.dropdown-head {
padding: 18px 20px 14px;
border-bottom: 1px solid var(--line-soft);
}
.dropdown-name {
font-size: 18px;
font-weight: 700;
color: var(--teal);
letter-spacing: -0.005em;
}
.dropdown-mail {
font-size: 13px;
color: var(--ink-mute);
margin-top: 4px;
}
.dropdown-section { padding: 4px 0; }
.notif-row {
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
padding: 12px 20px;
border-bottom: 1px solid var(--line-soft);
cursor: pointer;
transition: background 0.1s;
text-decoration: none;
color: inherit;
}
.notif-row:hover { background: var(--bg-soft); text-decoration: none; }
.notif-row:last-of-type { border-bottom: none; }
.notif-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--teal-soft);
color: var(--teal);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.notif-icon.red, .notif-icon.danger { background: var(--red-soft); color: var(--red); }
.notif-icon.coral { background: var(--coral-soft); color: var(--coral-deep); }
.notif-icon.green { background: var(--green-soft); color: var(--green); }
.notif-icon i { font-size: 14px; }
.notif-body { line-height: 1.4; }
.notif-title { font-size: 14px; color: var(--ink); font-weight: 600; }
.notif-meta { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.notif-time { font-size: 11px; color: var(--ink-mute); margin-top: 4px; }
.dropdown-foot {
padding: 14px 20px;
text-align: center;
border-top: 1px solid var(--line-soft);
}
.dropdown-foot a {
color: var(--coral-deep);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
}
.dropdown-foot a:hover { text-decoration: underline; }
.text-mono { font-family: 'DM Mono', 'JetBrains Mono', monospace; }
.text-sm { font-size: 12.5px; }
.text-muted { color: var(--ink-mute); }
.text-forest { color: var(--teal); }
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.col-4 { flex: 0 0 33.333%; padding: 0 8px; }
.col-8 { flex: 0 0 66.667%; padding: 0 8px; }
.col-6 { flex: 0 0 50%; padding: 0 8px; }
.col-12 { flex: 0 0 100%; padding: 0 8px; }
@media (max-width: 900px) { .col-4, .col-8, .col-6 { flex: 0 0 100%; } }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 18px; }
.mt-4 { margin-top: 18px; }
/* ──────────────── POP-OUT au hover sidebar ──────────────── */
.side-popout {
position: fixed;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-modal);
min-width: 220px;
padding: 10px 0;
z-index: 60;
opacity: 0; pointer-events: none;
transform: translateX(-6px);
transition: opacity 0.16s, transform 0.16s;
}
.side-popout.open { opacity: 1; pointer-events: auto; transform: translateX(0); }
.side-popout-title {
padding: 4px 14px 8px;
border-bottom: 1px solid var(--line-soft);
margin-bottom: 6px;
font-size: 13.5px; font-weight: 700;
color: var(--teal);
display: flex; align-items: center; gap: 8px;
}
.side-popout-title i { font-size: 14px; color: var(--teal); }
.side-popout-section-label {
font-size: 10px; font-weight: 700;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 8px 14px 4px;
}
.side-popout-item {
display: flex; align-items: center; gap: 9px;
padding: 7px 14px;
color: var(--ink-soft);
font-size: 13px; font-weight: 500;
cursor: pointer;
transition: background 0.1s;
border: none; background: transparent;
width: 100%; text-align: left;
text-decoration: none;
}
.side-popout-item:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.side-popout-item i { width: 14px; font-size: 13px; color: var(--ink-mute); }
.side-popout-item:hover i { color: var(--teal); }
.side-popout-item-count {
margin-left: auto;
font-size: 10.5px; font-weight: 700;
color: var(--ink-mute);
background: var(--bg-soft);
padding: 1px 7px; border-radius: var(--r-pill);
}
/* ──────────────── ONBOARDING bottom-right ──────────────── */
.onboard {
position: fixed;
bottom: 16px; right: 16px;
width: 320px;
background: var(--surface);
border-radius: var(--r);
box-shadow: var(--shadow-modal);
overflow: hidden;
z-index: 45;
transform: translateY(20px);
opacity: 0;
pointer-events: none;
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.25s;
}
.onboard.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.onboard.minimized .onboard-body { display: none; }
.onboard-head {
background: var(--coral-pale);
padding: 18px 18px 16px;
position: relative;
}
.onboard-head-actions {
position: absolute; top: 10px; right: 10px;
display: flex; gap: 4px;
}
.onboard-icon-btn {
background: transparent; border: none;
color: var(--coral-deep);
width: 24px; height: 24px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
opacity: 0.65;
transition: all 0.15s;
}
.onboard-icon-btn:hover { opacity: 1; background: rgba(195, 111, 79, 0.1); }
.onboard-icon-btn i { font-size: 13px; }
.onboard-title {
font-size: 17px; font-weight: 700;
color: var(--teal);
margin: 6px 0 10px;
}
.onboard-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--surface);
color: var(--coral-deep);
padding: 4px 10px;
border-radius: var(--r-pill);
font-size: 11.5px; font-weight: 600;
}
.onboard-chip i { font-size: 11px; }
.onboard-body { padding: 8px 0 4px; }
.onboard-section { padding: 8px 0; }
.onboard-section-title {
font-size: 11px; color: var(--ink-mute);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 6px 18px 8px;
}
.onboard-row {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 11px;
padding: 9px 18px;
cursor: pointer;
transition: background 0.1s;
border: none; background: transparent;
width: 100%; text-align: left;
}
.onboard-row:hover { background: var(--bg-soft); }
.onboard-row.completed { opacity: 0.55; }
.onboard-row.completed .onboard-row-title { text-decoration: line-through; }
.onboard-row-ic {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--coral-soft);
color: var(--coral-deep);
display: flex; align-items: center; justify-content: center;
}
.onboard-row-ic i { font-size: 12px; }
.onboard-row-ic.done { background: var(--green-soft); color: var(--green); }
.onboard-row-title {
font-size: 13px; font-weight: 600;
color: var(--ink);
line-height: 1.2;
}
.onboard-row-bonus {
font-size: 11px; font-weight: 600;
color: var(--green);
background: var(--green-soft);
padding: 2px 7px;
border-radius: var(--r-pill);
}
.onboard-foot {
border-top: 1px solid var(--line-soft);
padding: 10px 18px;
display: flex; align-items: center; justify-content: space-between;
background: var(--surface-2);
cursor: pointer;
}
.onboard-foot:hover { background: var(--bg-soft); }
.onboard-foot-text {
font-size: 12px; color: var(--ink-mute);
font-weight: 500;
}
.onboard-foot-arrow { color: var(--ink-mute); transition: transform 0.2s; }
.onboard.minimized .onboard-foot-arrow { transform: rotate(180deg); }
.onboard-fab {
position: fixed;
bottom: 16px; right: 16px;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--coral);
color: white;
border: none;
cursor: pointer;
box-shadow: 0 4px 16px rgba(224, 139, 110, 0.4);
display: flex; align-items: center; justify-content: center;
z-index: 40;
transition: all 0.18s;
}
.onboard-fab:hover {
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(224, 139, 110, 0.5);
}
.onboard-fab i { font-size: 18px; }
.onboard-fab.hidden { display: none; }
/* ──────────────── SIDE PANEL (détail réservation) ──────────────── */
.side-panel {
position: fixed;
top: 0; right: 0;
width: 480px; max-width: 92vw;
height: 100vh;
background: var(--surface);
box-shadow: -20px 0 50px -20px rgba(31, 45, 39, 0.18);
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
z-index: 150;
overflow-y: auto;
display: flex; flex-direction: column;
}
.side-panel.open { transform: translateX(0); }
.sp-head {
padding: 20px 24px 16px;
border-bottom: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
}
.sp-title-block { display: flex; align-items: center; gap: 14px; }
.sp-title { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.sp-num { font-size: 12px; color: var(--ink-mute); margin-top: 2px; font-weight: 500; }
.sp-close {
width: 32px; height: 32px;
background: var(--bg-soft); border: none;
border-radius: 50%;
color: var(--ink-soft);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.sp-close:hover { background: var(--bg); color: var(--ink); }
.sp-body { padding: 18px 24px 24px; flex: 1; }
.sp-section { margin-bottom: 22px; }
.sp-section-label {
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-mute);
margin-bottom: 10px;
}
.sp-info-grid {
display: grid;
grid-template-columns: 130px 1fr;
gap: 8px 16px;
font-size: 13.5px;
}
.sp-info-grid dt { color: var(--ink-mute); font-weight: 500; }
.sp-info-grid dd { color: var(--ink); margin: 0; font-weight: 500; }
.sp-info-grid dd strong { font-weight: 700; color: var(--teal); }
.sp-flags {
display: flex; gap: 8px;
margin: -4px 0 14px;
}
.sp-timeline {
list-style: none;
margin: 0; padding: 0;
border-left: 1.5px solid var(--line);
padding-left: 14px;
}
.sp-timeline-item {
position: relative;
padding: 6px 0 14px;
display: flex; flex-direction: column;
gap: 3px;
}
.sp-timeline-item::before {
content: '';
position: absolute;
left: -19.5px; top: 9px;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--surface);
border: 1.5px solid var(--coral);
}
.sp-timeline-item:last-child { padding-bottom: 0; }
.sp-timeline-when {
font-size: 11.5px;
color: var(--ink-mute);
font-weight: 500;
}
.sp-timeline-what {
font-size: 13.5px;
color: var(--ink);
font-weight: 600;
line-height: 1.4;
}
.sp-foot {
padding: 14px 24px;
border-top: 1px solid var(--line);
display: flex; gap: 10px; justify-content: flex-end;
}
.sp-actions {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 10px;
}
.sp-actions .btn-sm { font-size: 12px; padding: 6px 12px; }
.sp-livret-row { margin-top: 4px; }
.sp-livret-input {
width: 100%;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 8px 12px;
font-size: 12px;
font-family: 'DM Mono', monospace;
color: var(--ink-soft);
overflow: hidden;
text-overflow: ellipsis;
}
.sp-note {
background: var(--coral-pale);
border-left: 3px solid var(--coral);
padding: 12px 14px;
border-radius: var(--r-sm);
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
margin-top: 16px;
}
/* ──────────────── MODALES ──────────────── */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(28, 35, 32, 0.45);
backdrop-filter: blur(4px);
z-index: 200;
display: flex; align-items: center; justify-content: center;
padding: 24px;
opacity: 0; pointer-events: none;
transition: opacity 0.25s;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
background: var(--surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow-modal);
width: 100%;
max-width: 540px;
max-height: 88vh;
overflow: auto;
transform: scale(0.96) translateY(8px);
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.modal-backdrop.open .modal { transform: scale(1) translateY(0); }
.modal.lg { max-width: 720px; }
.modal.sm { max-width: 420px; }
.modal-head {
padding: 22px 26px 12px;
display: flex; align-items: center; justify-content: space-between;
}
.modal-title {
font-size: 22px; font-weight: 700;
color: var(--teal);
margin: 0; letter-spacing: -0.01em;
}
.modal-close {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--bg-soft);
border: none;
color: var(--ink-soft);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.modal-close:hover { background: var(--bg); color: var(--ink); }
.modal-body { padding: 0 26px 16px; }
.modal-sub { font-size: 13.5px; color: var(--ink-mute); margin: 0 0 18px; }
.modal-foot {
padding: 14px 26px 22px;
display: flex; align-items: center; justify-content: flex-end; gap: 10px;
border-top: 1px solid var(--line-soft);
margin-top: 14px;
}
/* ──────────────── TOAST ──────────────── */
.toast {
position: fixed;
bottom: 76px; left: 50%;
transform: translate(-50%, 100px);
background: var(--ink);
color: var(--surface);
padding: 12px 20px;
border-radius: var(--r-pill);
font-size: 13px; font-weight: 600;
box-shadow: var(--shadow-pop);
z-index: 300;
opacity: 0; pointer-events: none;
transition: all 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
display: flex; align-items: center; gap: 10px;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast i { color: var(--coral); }
/* ──────────────── TILES KPI (tableau de bord) ──────────────── */
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-bottom: 22px;
}
.tile {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 18px 20px;
transition: all 0.18s;
display: block;
text-decoration: none;
color: inherit;
}
.tile:hover {
border-color: var(--ink-faint);
box-shadow: var(--shadow);
transform: translateY(-2px);
text-decoration: none;
color: inherit;
}
.tile h3 {
font-size: 13px;
font-weight: 700;
color: var(--ink-soft);
margin: 0 0 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.tile-value {
font-size: 32px;
font-weight: 800;
color: var(--teal);
letter-spacing: -0.025em;
line-height: 1;
transition: color 0.25s;
}
.tile-subtle {
font-size: 12.5px;
color: var(--ink-mute);
margin-top: 6px;
}
.tile.has-alert .tile-value { color: var(--coral-deep); }
.tile.has-alert h3::before {
content: '● ';
color: var(--coral);
font-size: 10px;
}
/* ──────────────── AJUSTEMENT COULEURS AGENDRIX EXACT — déplacé en palette P25 ──────────────── */
/* Pour les pages avec plusieurs dropdowns + search (genre reservations.php) */
/* ──────────────── PAGES SEMAINE / CALENDRIER / AGENDA (P26) ──────────────── */
/* Utilitaires manquants */
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.flex-wrap { flex-wrap: wrap; }
.d-inline-flex { display: inline-flex; }
.justify-content-end { justify-content: flex-end; }
.ms-auto { margin-left: auto; }
.text-display { font-family: 'DM Serif Display', Georgia, serif; }
.text-italic { font-style: italic; }
.text-bordeaux { color: var(--coral-deep); }
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .grid-4 { grid-template-columns: 1fr; } }
/* ─── SEMAINE (week.php) ─── */
.week-view {
background: var(--surface);
border-radius: var(--r);
padding: 4px 0;
}
.week-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px 18px;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
flex-wrap: wrap;
gap: 14px;
}
.week-header-title {
font-size: 18px; font-weight: 700;
color: var(--teal);
margin: 0;
}
.week-header-nav { display: flex; gap: 6px; align-items: center; }
.week-day {
display: grid;
grid-template-columns: 130px 1fr;
align-items: center;
gap: 18px;
padding: 12px 18px;
border-bottom: 1px solid var(--line-soft);
min-height: 60px;
}
.week-day:last-child { border-bottom: none; }
.week-day.is-today { background: var(--coral-pale); }
.week-day-label { display: flex; align-items: baseline; gap: 8px; }
.week-day-name {
font-size: 13px; font-weight: 700;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.week-day-num {
font-size: 24px; font-weight: 800;
color: var(--teal);
line-height: 1;
}
.week-day-month {
font-size: 12px;
color: var(--ink-mute);
font-weight: 500;
}
.week-day.is-today .week-day-num { color: var(--coral-deep); }
.week-bar {
position: relative;
background: var(--bg-soft);
border-radius: var(--r-sm);
height: 32px;
overflow: hidden;
/* P39 — RETIRÉ display: flex; les segments sont en position absolute pour
que les valeurs `left: X%` du style inline soient honorées. Sinon le
flex layout ignorait le `left` et plaçait tout au début. */
}
.week-bar-tick {
position: absolute;
top: 0; bottom: 0;
width: 1px;
background: var(--line);
pointer-events: none;
}
.week-bar-tick.tick-75 { display: none; }
.week-bar-empty {
color: var(--ink-faint);
font-size: 12px;
font-style: italic;
padding: 0 14px;
/* P39 — Centrer verticalement le texte "— libre —" maintenant que le
parent .week-bar n'est plus flex */
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
}
.week-bar-segment, .week-bar [class*="segment"] {
/* P39 — Positionnement absolu pour que `left: X%; width: Y%` (style inline
émis par PHP) prenne effet correctement */
position: absolute;
top: 0; bottom: 0;
height: 100%;
display: flex; align-items: center; justify-content: center;
color: white;
font-size: 12px; font-weight: 600;
padding: 0 12px;
cursor: pointer;
transition: opacity 0.15s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Box-sizing pour que le width pourcentage soit cohérent avec le padding */
box-sizing: border-box;
}
.week-bar-segment:hover { opacity: 0.85; }
.week-bar-segment.arrival, .arrival { background: var(--coral); color: white; }
.week-bar-segment.stay, .stay { background: var(--teal); color: white; }
.week-bar-segment.departure, .departure { background: var(--amber); color: white; }
.week-bar-segment.maintenance,.maintenance{ background: var(--ink-mute); color: white; }
.week-legend {
padding: 14px 18px;
display: flex; gap: 18px; flex-wrap: wrap;
border-top: 1px solid var(--line);
margin-top: 10px;
}
.week-legend-item {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12.5px; color: var(--ink-soft);
}
.week-legend-swatch {
width: 14px; height: 14px;
border-radius: 4px;
display: inline-block;
}
.week-legend-swatch.arrival { background: var(--coral); }
.week-legend-swatch.stay { background: var(--teal); }
.week-legend-swatch.departure { background: var(--amber); }
.week-legend-swatch.maintenance { background: var(--ink-mute); }
/* ─── CALENDRIER MENSUEL (calendar.php) ─── */
.calendar-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border-radius: var(--r);
overflow: hidden;
table-layout: fixed;
margin-top: 8px;
}
.calendar-table thead th {
background: var(--bg-soft);
color: var(--ink-mute);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 10px 8px;
text-align: center;
border-bottom: 1px solid var(--line);
}
.calendar-table td {
border: 1px solid var(--line-soft);
padding: 8px 8px;
vertical-align: top;
height: 110px;
width: 14.285%;
background: var(--surface);
}
.calendar-table td.empty {
background: var(--bg-soft);
border-color: var(--line-soft);
}
.calendar-table td.today {
background: var(--coral-pale);
border-color: var(--coral-soft);
}
.calendar-day {
font-size: 14px;
font-weight: 700;
color: var(--ink);
margin-bottom: 6px;
}
.calendar-table td.today .calendar-day { color: var(--coral-deep); }
.calendar-event {
display: block;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
margin-bottom: 3px;
color: white;
text-decoration: none;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.calendar-event:hover { opacity: 0.85; text-decoration: none; color: white; }
.calendar-event.arrival { background: var(--coral); }
.calendar-event.stay { background: var(--teal); }
.calendar-event.departure { background: var(--amber); }
.calendar-event.maintenance { background: var(--ink-mute); }
/* ─── AGENDA 12 MOIS (agenda.php) ─── */
.mini-month {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.mini-month thead th {
font-size: 10px;
color: var(--ink-mute);
font-weight: 700;
padding: 4px 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mini-month td {
padding: 5px 0;
text-align: center;
font-size: 12px;
color: var(--ink-soft);
border-radius: 4px;
cursor: pointer;
line-height: 1;
}
.mini-month td.empty { color: transparent; cursor: default; }
.mini-month td.today {
background: var(--coral);
color: white;
font-weight: 700;
}
.mini-month td.arrival { background: var(--coral-soft); color: var(--coral-deep); font-weight: 600; }
.mini-month td.stay { background: var(--teal-soft); color: var(--teal-deep); font-weight: 500; }
.mini-month td.departure { background: var(--amber-soft); color: var(--amber); font-weight: 600; }
.mini-month td.maintenance { background: var(--bg-soft); color: var(--ink-mute); }
.mini-month td:hover:not(.empty) { background: var(--bg-soft); }
.mini-month td.today:hover { background: var(--coral); }
.btn-icon {
width: 32px; height: 32px;
padding: 0;
border-radius: 50%;
}
/* ──────────────── BARRE DE FILTRES COMPACTE (P24 → refondue P43) ──────────────── */
/* P43 — Refonte visuelle : fond plus subtil, selects custom-stylés avec chevron
SVG, labels mieux contrastés, recherche avec icône intégrée, boutons compacts. */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
align-items: flex-end;
margin-bottom: 18px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.filter-group {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 140px;
position: relative;
}
.filter-group.grow { flex: 1; min-width: 220px; }
.filter-group label {
font-size: 10.5px;
color: var(--ink-soft); /* P43 — plus contrasté qu'avant (--ink-mute) */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1;
user-select: none;
}
/* P43 — Selects : reset du style natif, chevron SVG inline, hauteur cohérente,
couleur du texte sélectionné bien lisible. */
.filter-bar select.form-select,
.filter-bar select.form-select-sm {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 36px;
padding: 0 32px 0 12px; /* room à droite pour le chevron */
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-sm);
color: var(--ink); /* texte sélectionné = ink (pas faint) */
font-family: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
outline: none;
/* Chevron SVG inline — couleur ink-mute (#6B7280 approx light theme) */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 11px 11px;
}
.filter-bar select.form-select:hover,
.filter-bar select.form-select-sm:hover {
border-color: var(--ink-faint);
background-color: var(--bg-soft);
}
.filter-bar select.form-select:focus,
.filter-bar select.form-select-sm:focus {
border-color: var(--coral);
box-shadow: 0 0 0 3px var(--coral-pale);
}
/* P43 — Champ recherche avec icône loupe intégrée à gauche */
.filter-group.grow input.form-control,
.filter-group.grow input.form-control-sm {
width: 100%;
height: 36px;
padding: 0 12px 0 34px; /* room pour l'icône à gauche */
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-sm);
color: var(--ink);
font-family: inherit;
font-size: 13px;
transition: border-color 0.15s, box-shadow 0.15s;
outline: none;
}
.filter-group.grow input.form-control:focus,
.filter-group.grow input.form-control-sm:focus {
border-color: var(--coral);
box-shadow: 0 0 0 3px var(--coral-pale);
}
.filter-group.grow input.form-control::placeholder,
.filter-group.grow input.form-control-sm::placeholder {
color: var(--ink-faint);
}
/* Pseudo-élément pour l'icône loupe (positionnée par rapport au .filter-group.grow) */
.filter-group.grow::after {
content: "";
position: absolute;
left: 12px;
bottom: 12px; /* aligné verticalement avec l'input (centre vertical) */
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
pointer-events: none;
}
/* P43 — Bloc actions à droite (loupe + Réinitialiser). Le label vide
garde l'alignement vertical avec les autres groupes. */
.filter-bar .filter-actions {
display: flex;
align-items: flex-end;
gap: 6px;
min-width: auto;
}
.filter-bar .filter-actions .btn {
height: 36px;
}
.filter-bar .btn-secondary {
/* Bouton loupe : carré gris discret, juste pour soumettre */
width: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-soft);
color: var(--ink-soft);
border: 1px solid var(--line);
}
.filter-bar .btn-secondary:hover {
background: var(--coral-pale);
color: var(--coral-deep);
border-color: var(--coral-soft);
}
.filter-bar .btn-ghost {
padding: 0 14px;
color: var(--ink-mute);
background: transparent;
border: 1px solid transparent;
font-size: 13px;
}
.filter-bar .btn-ghost:hover {
color: var(--ink-soft);
background: var(--bg-soft);
}
/* Responsive : sur mobile, les filtres passent en pleine largeur */
@media (max-width: 640px) {
.filter-bar {
gap: 10px;
padding: 12px;
}
.filter-group { min-width: 100%; }
.filter-group.grow { min-width: 100%; }
.filter-bar .filter-actions { width: 100%; justify-content: flex-end; }
}
/* ──────────────── END BARRE DE FILTRES P43 ──────────────── */
.d-flex { display: flex; }
.d-flex.gap-2 { gap: 8px; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.text-xs { font-size: 11.5px; }
.text-primary { color: var(--teal); }
/* Picots inline dans .res-row */
.res-picots {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 8px;
vertical-align: middle;
font-size: 13px;
}
.res-picots i, .res-picots span { font-size: 12px; line-height: 1; }
.res-picots .badge {
padding: 1px 7px;
font-size: 10.5px;
}
.res-picots .badge i { font-size: 9px; }
.res-sent-icons {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 6px;
color: var(--ink-faint);
}
.res-sent-icons i { font-size: 11.5px; line-height: 1; }
.lang-pill {
background: var(--bg-soft);
color: var(--ink-soft);
padding: 1px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
}
/* Fallback colonne BIEN dans .res-row : si vide, on affiche un placeholder discret */
.res-prop:empty::after, .res-prop > :empty::after {
content: 'Bien non renseigné';
color: var(--ink-faint);
font-style: italic;
font-weight: 400;
}
.tb-picker {
position: relative;
display: inline-flex;
}
.tb-picker-trigger, .tb-picker.tb-picker-empty {
display: inline-flex; align-items: center;
gap: 10px;
padding: 6px 12px 6px 6px;
background: transparent;
border: 1px solid var(--line);
border-radius: var(--r-pill);
cursor: pointer;
transition: all 0.15s;
color: var(--ink);
text-decoration: none;
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
line-height: 1.2;
}
.tb-picker-trigger:hover, .tb-picker.tb-picker-empty:hover {
background: var(--bg-soft);
border-color: var(--ink-faint);
text-decoration: none;
}
.tb-picker.open .tb-picker-trigger {
background: var(--bg-soft);
border-color: var(--ink-faint);
}
.tb-picker-ic {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--teal-soft);
color: var(--teal);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.tb-picker-ic i { font-size: 14px; }
.tb-picker.tb-picker-empty .tb-picker-ic {
background: var(--coral-soft);
color: var(--coral-deep);
}
.tb-picker-name {
color: var(--ink);
max-width: 180px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-picker-chev { color: var(--ink-mute); font-size: 11px; transition: transform 0.2s; }
.tb-picker.open .tb-picker-chev { transform: rotate(180deg); }
.tb-picker-list {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 280px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-modal);
padding: 6px 0;
z-index: 100;
max-height: 60vh;
overflow-y: auto;
}
.tb-picker-opt {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px;
color: var(--ink-soft);
font-size: 13.5px; font-weight: 500;
text-decoration: none;
transition: background 0.1s;
}
.tb-picker-opt:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.tb-picker-opt.active { color: var(--teal); font-weight: 600; }
.tb-picker-opt i { color: var(--ink-mute); font-size: 14px; }
.tb-picker-opt.active i { color: var(--teal); }
.tb-picker-opt-name {
flex: 1; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.tb-picker-dots { display: inline-flex; gap: 3px; flex-shrink: 0; }
.tb-picker-dot {
width: 6px; height: 6px;
border-radius: 50%;
display: inline-block;
}
.tb-picker-check { color: var(--teal); }
.tb-picker-opt-add {
color: var(--coral-deep);
border-top: 1px solid var(--line-soft);
margin-top: 4px;
padding-top: 11px;
}
.tb-picker-opt-add i { color: var(--coral-deep); }
.tb-picker-opt-all {
color: var(--ink-mute);
font-style: italic;
border-top: 1px solid var(--line-soft);
margin-top: 4px;
padding-top: 11px;
}
.tb-picker-opt-all:hover { color: var(--ink); }
/* Ajustement P23 : liseré teal en haut */
body[data-context]::before { height: 3px; opacity: 1; }
html[data-theme="agendrix-exact"] body::before {
content: '';
position: fixed; top: 0; left: 0; right: 0;
height: 3px;
background: var(--teal);
z-index: 1000;
pointer-events: none;
opacity: 0.5;
}
/* Ajustements topbar P23 : layout horizontal des éléments */
.topbar {
padding: 12px 24px;
gap: 14px;
min-height: 64px;
border-bottom: 1px solid var(--line-soft);
}
.topbar-brand { margin-right: 4px; }
.topbar-logo { height: 32px; }
.property-picker {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 10px 12px;
margin-bottom: 14px;
display: flex; align-items: center; gap: 10px;
cursor: pointer;
transition: all 0.15s;
}
.property-picker:hover { border-color: var(--ink-faint); }
.property-picker-img {
width: 38px; height: 38px;
border-radius: var(--r-sm);
background: var(--teal-soft);
color: var(--teal-deep);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-weight: 700;
font-size: 14px;
}
.property-picker-info { flex: 1; min-width: 0; line-height: 1.2; }
.property-picker-name {
font-size: 13.5px; font-weight: 600; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.property-picker-loc { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.property-picker-chev { color: var(--ink-faint); font-size: 12px; }
/* ──────────────── ANIMATIONS ──────────────── */
@keyframes rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.kpi, .card, .res-item {
animation: rise 0.45s cubic-bezier(0.25, 0.8, 0.4, 1) both;
}
/* ──────────────── RESPONSIVE ──────────────── */
@media (max-width: 1100px) {
.res-header { grid-template-columns: 40px 1fr 80px 30px; }
.res-header-type, .res-header-dates, .res-header-lang, .res-header-sent { display: none; }
.res-sort-bar { display: none; }
}
@media (max-width: 768px) {
.app, .app.no-subnav { grid-template-columns: 64px 1fr; }
.subnav { display: none; }
.subnav-open-tab { display: none; }
.topbar { padding: 12px 16px; gap: 8px; }
.page-header { padding: 12px 16px 6px; }
.page-content { padding: 12px 16px 32px; margin: 0 8px 8px; border-radius: 12px; }
.ycs-sidebar-toggle { display: inline-flex; }
.side-popout { display: none; }
.side-panel { width: 100vw; }
.topbar-hats { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════
P29 — Refonte shell aligné sur ycs_prototype_v2.html
════════════════════════════════════════════════════════════════════════ */
/* ─── Casquettes topbar masquées (P29 : la topbar est ép. à org-block + actions
seulement, les casquettes restent valides côté permissions/back) ─── */
.ycs-topbar-hats,
.ycs-hat,
.ycs-hat-biens,
.ycs-hat-return,
.ycs-hat-label,
.tb-picker { display: none !important; }
/* ─── Subnav : champ recherche ─── */
.subnav-search {
display: flex; align-items: center; gap: 8px;
padding: 7px 10px;
background: var(--bg-soft);
border-radius: var(--r-sm);
margin: 0 6px 10px;
}
.subnav-search i { color: var(--ink-mute); font-size: 13px; }
.subnav-search input {
background: transparent; border: none; outline: none;
color: var(--ink); font-family: inherit;
font-size: 13px; font-weight: 500;
flex: 1; min-width: 0;
}
.subnav-search input::placeholder { color: var(--ink-mute); }
/* ─── Subnav : CTA primaire en bas (Nouvelle réservation, etc.) ─── */
.subnav-cta {
display: flex; align-items: center; justify-content: center;
gap: 8px;
margin: 12px 6px 6px;
padding: 10px 14px;
background: var(--coral);
color: white;
border-radius: var(--r-pill);
font-size: 13px; font-weight: 600;
text-decoration: none;
border: none; cursor: pointer;
box-shadow: 0 2px 8px rgba(224, 139, 110, 0.35);
transition: all 0.15s;
}
.subnav-cta:hover {
background: var(--coral-deep);
color: white;
box-shadow: 0 4px 14px rgba(224, 139, 110, 0.45);
transform: translateY(-1px);
text-decoration: none;
}
.subnav-cta i { font-size: 13px; }
/* ─── Subnav-item-icon (wrapper de l'icône) ─── */
.subnav-item-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
color: var(--ink-mute);
flex-shrink: 0;
}
.subnav-item-icon i { font-size: 13px; }
.subnav-item:hover .subnav-item-icon { color: #478c8d; }
.subnav-item.active .subnav-item-icon { color: white; }
/* ─── Tab disabled (P28 conservé) ─── */
.tab-disabled {
color: var(--ink-faint) !important;
cursor: not-allowed;
}
.tab-disabled:hover {
color: var(--ink-faint) !important;
border-bottom-color: transparent !important;
}
/* ─── Page placeholder (modules à venir) ─── */
.page-placeholder {
max-width: 560px;
margin: 40px auto;
text-align: center;
padding: 48px 32px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
}
.page-placeholder-icon {
width: 72px; height: 72px;
border-radius: 50%;
background: var(--teal-soft);
color: var(--teal);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px;
font-size: 32px;
}
.page-placeholder-icon i { font-size: 32px; }
.page-placeholder h2 {
font-size: 22px;
font-weight: 700;
color: var(--teal);
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.page-placeholder p {
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.55;
margin: 0 0 10px;
}
.page-placeholder p.muted {
color: var(--ink-mute);
font-size: 13px;
margin-top: 18px;
}
.page-placeholder a {
color: var(--coral-deep);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════════════
P28 — DASHBOARD (my/index.php) — refonte proto v2 (conservé tel quel)
═══════════════════════════════════════════════════════════════════════ */
/* ─── Bandeau "Nouveau" dismissable ─── */
.dashboard-tip {
display: flex; align-items: center; gap: 14px;
margin-bottom: 22px; padding: 12px 18px;
border-radius: var(--r);
}
.dashboard-tip > i { flex-shrink: 0; color: var(--coral-deep); font-size: 18px; }
.dashboard-tip > div { flex: 1; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.dashboard-tip > div strong { color: var(--coral-deep); }
.dashboard-tip > div a {
color: var(--coral-deep);
text-decoration: underline; text-underline-offset: 2px;
}
.dashboard-tip .btn-close {
flex-shrink: 0;
background: transparent; border: none;
color: var(--ink-mute); cursor: pointer;
padding: 4px 8px; border-radius: var(--r-sm);
font-size: 14px; transition: background 0.15s;
}
.dashboard-tip .btn-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
/* ─── Header de page dashboard ─── */
.dashboard-headline {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; margin-bottom: 18px;
}
.dashboard-headline-text { flex: 1; min-width: 0; }
.dashboard-h1 {
margin: 0 0 4px;
font-size: 32px; font-weight: 700;
color: var(--teal);
letter-spacing: -0.02em; line-height: 1.1;
}
.dashboard-sub { margin: 0; color: var(--ink-mute); font-size: 14px; }
.dashboard-headline-actions { display: flex; gap: 10px; flex-shrink: 0; }
/* ─── Tabs dashboard ─── */
.dashboard-tabs { margin-bottom: 22px; }
.dashboard-tabs .tab i { font-size: 15px; }
/* ─── Grille 2 colonnes ─── */
.dashboard-cols {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 16px; margin-bottom: 30px;
}
.dashboard-col-main, .dashboard-col-side {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
}
.dashboard-col-main .card-header,
.dashboard-col-side .card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--line);
}
.dashboard-col-main .card-header h3,
.dashboard-col-side .card-header h3 {
margin: 0; font-size: 15px; font-weight: 700;
color: var(--ink);
display: flex; align-items: center; gap: 8px;
}
.muted-count {
background: var(--coral-soft); color: var(--coral-deep);
font-size: 11px; font-weight: 700;
padding: 1px 7px; border-radius: var(--r-pill);
line-height: 1.4;
}
.card-header-link {
font-size: 12.5px; font-weight: 600;
color: var(--ink-mute);
text-decoration: none; transition: color 0.15s;
}
.card-header-link:hover { color: var(--coral-deep); }
.card-header-link i { font-size: 11px; }
/* ─── Empty state ─── */
.empty-state {
padding: 40px 18px !important;
text-align: center; color: var(--ink-mute);
}
.empty-state i {
font-size: 32px; display: block; margin-bottom: 8px;
color: var(--ink-faint);
}
.empty-state p { margin: 0; font-size: 13.5px; }
/* ─── .res-row dashboard (col-main plus étroite) ─── */
.dashboard-col-main .res-list { background: var(--surface); }
.dashboard-col-main .res-row {
grid-template-columns: minmax(0, 1fr) 130px 130px 100px;
padding: 12px 18px;
}
.dashboard-col-main .res-dates-block { min-width: 0; }
.dashboard-col-main .res-dates-main {
font-size: 13.5px; color: var(--ink);
font-weight: 600; white-space: nowrap;
}
.dashboard-col-main .res-dates-sub {
font-size: 11.5px; color: var(--ink-mute);
margin-top: 2px;
}
.dashboard-col-main .res-status-block { text-align: right; }
.res-avatar.teal {
background: var(--teal-soft); color: var(--teal-deep);
}
/* ─── Activité récente ─── */
.activity-list { list-style: none; margin: 0; padding: 0; background: var(--surface); }
.activity-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 18px;
border-bottom: 1px solid var(--line-soft);
font-size: 13px;
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
width: 30px; height: 30px;
border-radius: var(--r-sm);
background: var(--teal-soft); color: var(--teal);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 13px;
}
.activity-icon.coral { background: var(--coral-soft); color: var(--coral-deep); }
.activity-icon.amber { background: var(--amber-soft); color: var(--amber); }
.activity-icon.green { background: var(--green-soft); color: var(--green); }
.activity-icon.red { background: var(--red-soft); color: var(--red); }
.activity-icon.teal { background: var(--teal-soft); color: var(--teal); }
.activity-body { flex: 1; min-width: 0; line-height: 1.35; }
.activity-title {
color: var(--ink); font-weight: 600; font-size: 13px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.activity-sub {
color: var(--ink-mute); font-size: 12px; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.activity-ts {
color: var(--ink-mute); font-size: 11.5px;
flex-shrink: 0; white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* ─── Section "Vos biens" ─── */
.dashboard-section { margin-top: 8px; }
.dashboard-section-title {
margin: 0 0 14px;
font-size: 20px; font-weight: 700;
color: var(--teal);
letter-spacing: -0.01em;
}
.properties-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.property-card {
display: flex; flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
text-decoration: none; color: inherit;
transition: all 0.18s;
min-width: 0;
}
.property-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-pop);
border-color: var(--ink-faint);
text-decoration: none;
}
.property-card.is-active {
border-color: var(--coral);
box-shadow: 0 0 0 2px var(--coral-soft);
}
.property-card-cover {
position: relative;
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.property-card-cover::after {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center; background-size: 55%;
opacity: 0.85;
pointer-events: none;
}
.property-card-icon { display: none; } /* Remplacé par le pattern silhouette */
.property-card-status {
position: absolute; top: 12px; left: 12px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(4px);
padding: 3px 10px 3px 8px;
border-radius: var(--r-pill);
font-size: 11.5px; font-weight: 600; color: var(--ink);
display: inline-flex; align-items: center; gap: 5px;
}
.property-card-status::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--green); flex-shrink: 0;
}
.property-card-status.status-amber::before { background: var(--amber); }
.property-card-status.status-mute::before { background: var(--ink-mute); }
.property-card-body { padding: 14px 16px 16px; }
.property-card-name {
margin: 0 0 4px;
font-size: 16px; font-weight: 700;
color: var(--teal);
line-height: 1.2; letter-spacing: -0.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.property-card-meta {
font-size: 12.5px; color: var(--ink-mute);
line-height: 1.35;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.property-card-roles {
margin-top: 6px;
font-size: 11px;
color: var(--ink-faint);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.property-card.tint-forest .property-card-cover { background: linear-gradient(135deg, #547D5B 0%, #2F4A36 100%); }
.property-card.tint-brique .property-card-cover { background: linear-gradient(135deg, #9C8870 0%, #5E4934 100%); }
.property-card.tint-sage .property-card-cover { background: linear-gradient(135deg, #6A8E66 0%, #3E5C42 100%); }
.property-card.tint-ochre .property-card-cover { background: linear-gradient(135deg, #D1A57A 0%, #8E6843 100%); }
.property-card.tint-bark .property-card-cover { background: linear-gradient(135deg, #7C7164 0%, #4E4337 100%); }
/* ─── Responsive dashboard ─── */
@media (max-width: 1100px) {
.dashboard-cols { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.dashboard-headline { flex-direction: column; align-items: stretch; }
.dashboard-headline-actions { justify-content: flex-start; }
.dashboard-h1 { font-size: 26px; }
.dashboard-col-main .res-row {
grid-template-columns: minmax(0, 1fr) 100px;
gap: 10px;
}
.dashboard-col-main .res-prop,
.dashboard-col-main .res-status-block { display: none; }
.properties-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
.dashboard-tabs { gap: 16px; overflow-x: auto; }
.dashboard-tabs .tab { white-space: nowrap; }
}
/* ════════════════════════════════════════════════════════════════════════
P32 — Format .res-item header (colonnes Séjour/Type/Loc/Pers/LG/Envois)
+ side panel : historique enrichi avec séjours passés
════════════════════════════════════════════════════════════════════════ */
/* ─── Badge type de séjour (WE / LWE / WEEK) ─── */
.badge-type {
display: inline-flex; align-items: center;
padding: 3px 10px;
border-radius: var(--r-pill);
background: var(--bg-soft);
color: var(--ink-soft);
font-size: 11px; font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.4;
}
/* ─── Badge langue (FR / NL / EN…) ─── */
.badge-lang {
display: inline-flex; align-items: center;
padding: 3px 10px;
border-radius: var(--r-pill);
background: var(--green-soft);
color: var(--green);
font-size: 11px; font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.4;
}
/* ─── res-header-pers : chiffre gros + label "pers." dessous ─── */
.res-header-pers {
text-align: center;
line-height: 1.1;
}
.res-header-pers strong {
display: block;
font-size: 16px;
font-weight: 700;
color: var(--ink);
}
.res-header-pers .label {
display: block;
font-size: 10px;
color: var(--ink-mute);
font-weight: 600;
text-transform: lowercase;
margin-top: 1px;
}
/* ─── res-header-lang : centré ─── */
.res-header-lang { text-align: center; }
/* ─── res-header-sent : icônes alignées ─── */
.res-header-sent {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
}
/* ─── Chevron à droite (non rotaté, simple indicateur de clic) ─── */
.res-header-chevron {
text-align: center;
color: var(--ink-faint);
font-size: 12px;
transition: color 0.12s, transform 0.12s;
}
.res-item:hover .res-header-chevron {
color: var(--coral);
transform: translateX(2px);
}
/* ─── Sort link (tri actif avec flèche) ─── */
.res-sort .sort-arrow {
display: inline-block;
margin-left: 3px;
font-size: 9px;
}
/* ─── Side panel : historique enrichi (P32) ─── */
.sp-history-summary {
background: var(--coral-pale);
color: var(--coral-deep);
padding: 10px 14px;
border-radius: var(--r-sm);
font-size: 13px;
margin-bottom: 12px;
}
.sp-history-summary strong { font-weight: 700; }
.sp-history-summary small { font-size: 11px; color: var(--ink-mute); font-weight: 600; }
.sp-past-stays {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.sp-past-stay {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r-sm);
text-decoration: none;
color: inherit;
transition: all 0.15s;
}
.sp-past-stay:hover {
border-color: var(--coral);
background: var(--surface);
text-decoration: none;
transform: translateX(2px);
}
.sp-past-dates {
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.sp-past-meta {
font-size: 11px;
color: var(--ink-mute);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
white-space: nowrap;
}
.sp-past-rating {
background: var(--green-soft);
color: var(--green);
padding: 2px 9px;
border-radius: var(--r-pill);
font-size: 12px;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
}
.sp-past-rating small {
font-size: 9.5px;
color: var(--ink-mute);
font-weight: 600;
margin-left: 1px;
}
.sp-past-rating-empty {
background: var(--bg-soft);
color: var(--ink-mute);
}
/* ─── Responsive : sur mobile, on cache les colonnes accessoires ─── */
@media (max-width: 900px) {
.res-header {
grid-template-columns: 1fr 60px 30px;
}
.res-sort-bar {
grid-template-columns: 1fr 60px 30px;
}
.res-header-dates, .res-header-type, .res-header-lang, .res-header-sent { display: none; }
.res-sort:nth-child(1), .res-sort:nth-child(2), .res-sort:nth-child(5), .res-sort:nth-child(6) { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════
P33 — Pages d'authentification (login, forgot, reset)
Anciennement sans styles ciblés → rendu très moche depuis P29
════════════════════════════════════════════════════════════════════════ */
/* ─── Wrapper pleine page : background apaisant, centrage vertical ─── */
.login-wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 100%);
position: relative;
}
/* Décor subtil en arrière-plan (cercles flous, couleurs YCS) */
.login-wrapper::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 12% 18%, var(--teal-soft) 0%, transparent 30%),
radial-gradient(circle at 88% 82%, var(--coral-soft) 0%, transparent 30%);
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
/* ─── Carte de login ─── */
.login-card {
position: relative; z-index: 1;
width: 100%;
max-width: 420px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 36px 32px 28px;
box-shadow: var(--shadow-modal);
}
/* ─── Header de la carte (logo + sous-titre) ─── */
.login-brand {
text-align: center;
margin-bottom: 28px;
}
.login-brand-logo {
display: block;
max-width: 140px;
height: auto;
margin: 0 auto 14px;
}
.login-brand p {
color: var(--ink-mute);
font-size: 13px;
margin: 0;
font-weight: 500;
}
/* ─── Form spacing ─── */
.login-card .form-group { margin-bottom: 16px; }
.login-card .form-group:last-of-type { margin-bottom: 20px; }
.login-card .form-label {
display: block;
font-size: 12px;
color: var(--ink-soft);
font-weight: 600;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.login-card .form-control {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
font-size: 14.5px;
font-family: inherit;
background: var(--surface);
color: var(--ink);
transition: border-color 0.15s, box-shadow 0.15s;
}
.login-card .form-control:focus {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(71, 140, 141, 0.15);
}
/* ─── Bouton plein largeur ─── */
.login-card .btn-lg {
padding: 12px 16px;
font-size: 15px;
font-weight: 600;
}
.login-card .w-100 { width: 100%; }
/* ─── Lien "Mot de passe oublié" ─── */
.login-card .text-center { text-align: center; }
.login-card .mt-3 { margin-top: 14px; }
.login-card .text-muted { color: var(--ink-mute); }
.login-card .text-sm { font-size: 13px; }
.login-card a {
color: var(--ink-mute);
text-decoration: none;
transition: color 0.15s;
}
.login-card a:hover {
color: var(--coral-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ─── Alerte d'erreur ─── */
.login-card .alert {
display: flex; gap: 10px;
padding: 11px 14px;
border-radius: var(--r-sm);
margin-bottom: 16px;
font-size: 13.5px;
align-items: flex-start;
}
.login-card .alert-danger {
background: var(--red-soft);
color: var(--red);
border: 1px solid var(--red-soft);
}
.login-card .alert i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.login-card .mb-4 { margin-bottom: 16px; }
/* ─── Responsive ─── */
@media (max-width: 480px) {
.login-card {
padding: 28px 22px 22px;
max-width: 100%;
}
.login-brand-logo { max-width: 110px; }
}
/* ════════════════════════════════════════════════════════════════════════
P34 — Dashboard personnalisable (widgets drag-and-drop + masquer/afficher)
════════════════════════════════════════════════════════════════════════ */
/* ─── Toolbar avec bouton "Personnaliser" ─── */
.dashboard-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
}
.dashboard-toolbar .btn { gap: 6px; }
#dashboard-edit-toggle {
position: relative;
color: var(--ink-soft);
border: 1px solid var(--line);
background: var(--surface);
}
#dashboard-edit-toggle:hover {
color: var(--coral-deep);
border-color: var(--coral-soft);
background: var(--coral-pale);
}
#dashboard-edit-toggle.active {
color: white;
background: var(--coral);
border-color: var(--coral);
box-shadow: 0 2px 8px rgba(224, 139, 110, 0.4);
}
#dashboard-edit-toggle.active:hover {
background: var(--coral-deep);
color: white;
}
/* ─── Conteneur widgets ─── */
.dashboard-widgets {
display: block;
position: relative;
}
.widget {
position: relative;
margin-bottom: 24px;
transition: opacity 0.18s, transform 0.18s;
}
.widget:last-child { margin-bottom: 0; }
.widget.widget-hidden { display: none; }
/* ─── Overlay d'édition (poignée + label + ✕) — invisible hors mode édition ─── */
.widget-edit-overlay {
display: none;
}
.dashboard-widgets.editing .widget-edit-overlay {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--coral-pale);
border: 1px dashed var(--coral);
border-bottom: none;
border-radius: var(--r) var(--r) 0 0;
margin-bottom: -1px; /* fond du body collé à l'overlay */
}
.dashboard-widgets.editing .widget-body {
border: 1px dashed var(--coral);
border-top: none;
border-radius: 0 0 var(--r) var(--r);
padding: 12px;
background: rgba(255, 250, 247, 0.4);
}
.widget-edit-handle {
width: 28px; height: 28px;
border-radius: var(--r-sm);
background: var(--surface);
color: var(--ink-mute);
display: flex; align-items: center; justify-content: center;
cursor: grab;
user-select: none;
transition: all 0.15s;
}
.widget-edit-handle:hover {
background: var(--coral);
color: white;
}
.widget-edit-handle:active { cursor: grabbing; }
.widget-edit-handle i { font-size: 16px; }
.widget-edit-label {
flex: 1;
font-size: 13px;
font-weight: 700;
color: var(--coral-deep);
letter-spacing: 0.02em;
}
.widget-edit-remove {
width: 28px; height: 28px;
border-radius: var(--r-sm);
background: var(--surface);
color: var(--ink-mute);
border: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.15s;
}
.widget-edit-remove:hover {
background: var(--red);
color: white;
}
.widget-edit-remove i { font-size: 14px; }
/* ─── États SortableJS ─── */
.widget-ghost {
opacity: 0.4;
background: var(--coral-soft);
}
.widget-chosen {
box-shadow: var(--shadow-pop);
}
.widget-drag {
opacity: 0.92;
transform: rotate(0.5deg);
cursor: grabbing;
}
/* ─── Tray des widgets masqués ─── */
.widgets-hidden-tray {
display: none;
margin-top: 24px;
padding: 18px 22px;
background: var(--surface);
border: 2px dashed var(--coral-soft);
border-radius: var(--r);
}
.widgets-hidden-tray.open {
display: block;
animation: ycs-tray-in 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes ycs-tray-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.widgets-tray-head h3 {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
color: var(--coral-deep);
display: flex; align-items: center; gap: 8px;
}
.widgets-tray-head h3 i { font-size: 14px; }
.widgets-tray-head p {
margin: 0 0 14px;
font-size: 13px;
color: var(--ink-mute);
}
.widgets-tray-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.widget-tray-item {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r-pill);
color: var(--ink-soft);
font-size: 13px; font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.widget-tray-item:hover {
background: var(--coral-pale);
border-color: var(--coral);
color: var(--coral-deep);
transform: translateY(-1px);
}
.widget-tray-item i { font-size: 13px; }
.widget-tray-add {
color: var(--coral);
margin-left: 2px;
}
.widgets-tray-empty {
margin: 0;
color: var(--ink-mute);
font-size: 13px;
font-style: italic;
}
/* ─── Responsive ─── */
@media (max-width: 768px) {
.widget-edit-overlay { padding: 6px 10px; gap: 8px; }
.widget-edit-label { font-size: 12px; }
.widget-edit-handle, .widget-edit-remove { width: 26px; height: 26px; }
}
/* ════════════════════════════════════════════════════════════════════════
P35 — Bouton "Personnaliser" plus discret + KPIs individuellement éditables
════════════════════════════════════════════════════════════════════════ */
/* ─── Bouton "Personnaliser" : icône seule, gris discret, en haut à droite ─── */
/* Remplace l'ancien .dashboard-toolbar/btn-ghost-sm de P34. */
/* ─── Bouton "Personnaliser" : icône seule, gris discret, dans la headline ─── */
/* P37 — Le bouton est désormais dans .dashboard-headline-actions, à côté
du bouton "+ Nouvelle réservation". Plus de position: absolute. */
.dashboard-edit-icon-btn {
width: 36px; height: 36px;
border: 1px solid var(--line);
background: var(--surface);
border-radius: 50%;
color: var(--ink-mute);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all 0.15s;
padding: 0;
flex-shrink: 0;
}
.dashboard-edit-icon-btn:hover {
color: var(--ink);
background: var(--bg-soft);
border-color: var(--ink-faint);
}
.dashboard-edit-icon-btn.active {
color: white;
background: var(--coral);
border-color: var(--coral);
box-shadow: 0 2px 6px rgba(224, 139, 110, 0.35);
}
.dashboard-edit-icon-btn.active:hover {
background: var(--coral-deep);
border-color: var(--coral-deep);
}
.dashboard-edit-icon-btn i { font-size: 15px; line-height: 1; }
.dashboard-edit-icon-off { display: inline; }
.dashboard-edit-icon-on { display: none; }
.dashboard-edit-icon-btn.active .dashboard-edit-icon-off { display: none; }
.dashboard-edit-icon-btn.active .dashboard-edit-icon-on { display: inline; }
/* P37 — Headline persistante : actions alignées à droite */
#dashboardHeadline {
margin-bottom: 18px;
}
#dashboardHeadline .dashboard-headline-actions {
display: flex;
align-items: center;
gap: 10px;
}
/* Conteneur widgets : plus besoin de padding-top pour le bouton (extrait en P37) */
.dashboard-widgets {
position: relative;
padding-top: 0;
}
/* ─── KPI overlay (mode édition) ─── */
/* Chaque KPI a son propre overlay mini quand on est en mode édition. */
.kpi {
position: relative;
}
.kpi.kpi-hidden { display: none; }
.kpi-edit-overlay { display: none; }
.dashboard-widgets.editing .kpi-edit-overlay {
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
top: 6px; left: 6px; right: 6px;
z-index: 2;
pointer-events: none; /* Le wrapper laisse passer, ce sont les boutons qui captent */
}
.dashboard-widgets.editing .kpi {
cursor: default;
box-shadow: 0 0 0 1px var(--coral-soft);
}
.kpi-edit-handle, .kpi-edit-remove {
pointer-events: auto; /* Capture le clic/drag */
width: 22px; height: 22px;
border-radius: var(--r-sm);
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(4px);
border: 1px solid var(--line);
color: var(--ink-mute);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
font-size: 11px;
transition: all 0.12s;
padding: 0;
}
.kpi-edit-handle {
cursor: grab;
}
.kpi-edit-handle:active { cursor: grabbing; }
.kpi-edit-handle:hover {
background: var(--coral);
color: white;
border-color: var(--coral);
}
.kpi-edit-remove:hover {
background: var(--red);
color: white;
border-color: var(--red);
}
.kpi-edit-handle i, .kpi-edit-remove i { font-size: 11px; line-height: 1; }
/* États SortableJS pour KPIs */
.kpi-ghost {
opacity: 0.45;
background: var(--coral-soft);
}
.kpi-chosen { box-shadow: var(--shadow-pop); }
.kpi-drag {
opacity: 0.95;
transform: rotate(0.5deg);
}
/* ─── Tray : pill catégorie pour les KPIs ─── */
.widget-tray-cat {
font-size: 10px;
color: var(--ink-mute);
background: var(--bg-soft);
padding: 1px 7px;
border-radius: var(--r-pill);
font-weight: 600;
text-transform: lowercase;
letter-spacing: 0.03em;
margin-left: 2px;
}
.widget-tray-kpi {
/* Mini variation visuelle pour identifier les KPIs dans le tray */
border-style: solid;
}
/* ─── Override : neutraliser l'ancienne .dashboard-toolbar (devenue inutile P35) ─── */
.dashboard-toolbar {
display: none;
}
/* ════════════════════════════════════════════════════════════════════════
P36 — Fix vibration du layout au survol (layout shift de scrollbar)
════════════════════════════════════════════════════════════════════════
Symptôme : au hover des cards/tiles/kpi, toute la zone .main "vibre" de
quelques pixels horizontalement, tandis que la sidebar reste stable.
Cause : combinaison de deux choses :
1. Apparition/disparition de la scrollbar verticale du document au hover
d'éléments qui ont un transform: translateY() qui change l'espace
occupé par leur shadow → scrollbar shift → layout shift global.
2. Les transforms sub-pixel mal arrondis sur certains GPU/écrans.
Fix :
1. scrollbar-gutter: stable sur html → réserve l'espace de la scrollbar
même si elle n'est pas visible. Empêche tout shift horizontal.
2. will-change: transform sur les éléments concernés → promotion en
composite layer GPU, lisse les sub-pixels et isole du flow normal.
════════════════════════════════════════════════════════════════════════ */
html {
/* Réserve l'espace de la scrollbar côté droite, même quand elle n'est
pas visible. Évite que l'apparition/disparition de la scrollbar
au hover d'éléments transformés ne fasse shifter le contenu. */
scrollbar-gutter: stable;
/* Fallback pour Safari < 16 et navigateurs sans scrollbar-gutter :
forcer la scrollbar verticale toujours présente. */
overflow-y: scroll;
}
/* Promotion en composite layer pour les éléments qui scale/translate au hover.
Le navigateur les rend en GPU, ce qui lisse les sub-pixels et empêche
les jitter au moment du hover/unhover. */
.property-card,
.kpi,
.tile,
.widget-tray-item,
.sp-past-stay,
.subnav-cta,
.btn-primary {
will-change: transform;
}
/* Note : si la vibration persiste après ce fix, c'est probablement qu'un
autre élément a une transition: all qui anime aussi des propriétés
layout (padding, margin, width, height). Dans ce cas, remplacer par une
liste explicite des propriétés à animer (transform, opacity, color,
border-color, box-shadow uniquement). */
/* ════════════════════════════════════════════════════════════════════════
P40 — Liseré gauche selon statut temporel + cells hybrides calendriers
════════════════════════════════════════════════════════════════════════ */
/* ─── Liseré gauche sur .res-item (liste réservations) ───────────────────
Trois catégories émises par _res_item_partial.php :
- .is-current → liseré coral (rouge/orange) : résa en cours
- .is-upcoming → liseré teal foncé : résa à venir
- .is-past → liseré teal clair : résa passée
──────────────────────────────────────────────────────────────────────── */
.res-item {
/* On utilise box-shadow inset pour ne pas casser le padding existant
et pour éviter un layout shift à l'apparition du liseré. */
transition: box-shadow 0.15s, background-color 0.15s;
}
/* P40/P41 — Liseré gauche + fond teinté pour les 3 catégories temporelles.
On inclut .is-now comme alias de .is-current pour couvrir le cas où un
partial plus ancien (P32) est encore déployé et émet seulement is-now. */
.res-item.is-current,
.res-item.is-now {
box-shadow: inset 4px 0 0 0 var(--coral);
background: color-mix(in srgb, var(--coral) 8%, var(--surface));
}
.res-item.is-upcoming {
box-shadow: inset 4px 0 0 0 var(--teal-deep, var(--teal));
background: color-mix(in srgb, var(--teal-deep, var(--teal)) 6%, var(--surface));
}
.res-item.is-past {
box-shadow: inset 4px 0 0 0 var(--teal-soft);
background: color-mix(in srgb, var(--teal) 5%, var(--surface));
}
/* Sur hover, on intensifie légèrement le liseré ET le fond.
IMPORTANT : on doit ré-affirmer le box-shadow ici car la règle
.res-item:hover (ligne 1144 du fichier) override sinon. */
.res-item.is-current:hover,
.res-item.is-now:hover {
box-shadow: inset 4px 0 0 0 var(--coral-deep), var(--shadow);
background: color-mix(in srgb, var(--coral) 14%, var(--surface));
}
.res-item.is-upcoming:hover {
box-shadow: inset 4px 0 0 0 var(--teal-deep, var(--teal)), var(--shadow);
background: color-mix(in srgb, var(--teal-deep, var(--teal)) 11%, var(--surface));
}
.res-item.is-past:hover {
box-shadow: inset 4px 0 0 0 var(--teal), var(--shadow);
background: color-mix(in srgb, var(--teal) 9%, var(--surface));
}
/* P41 — Fallback pour navigateurs sans color-mix (Safari < 16.2, Firefox < 113)
On utilise un overlay rgba équivalent sur les valeurs hex de la palette light.
En dark mode les couleurs sont légèrement décalées mais le fallback reste
acceptable visuellement. */
@supports not (background: color-mix(in srgb, red, blue)) {
.res-item.is-current, .res-item.is-now { background: rgba(224, 139, 110, 0.08); }
.res-item.is-upcoming { background: rgba(20, 54, 49, 0.06); }
.res-item.is-past { background: rgba(31, 77, 69, 0.05); }
.res-item.is-current:hover, .res-item.is-now:hover { background: rgba(224, 139, 110, 0.14); }
.res-item.is-upcoming:hover { background: rgba(20, 54, 49, 0.11); }
.res-item.is-past:hover { background: rgba(31, 77, 69, 0.09); }
}
/* ─── Cell hybride sur agenda 12 mois : départ + arrivée le même jour ───
Le PHP ajoute déjà les deux classes (arrival ET departure) sur la même cell
quand les deux événements coexistent (turnover). Sans CSS dédié, c'est
la dernière règle déclarée qui gagnait (departure → amber). Avec le
sélecteur combiné ci-dessous, on rend un gradient horizontal qui matche
l'ordre temporel du jour : matin amber (départ), après-midi coral (arrivée).
──────────────────────────────────────────────────────────────────────── */
.mini-month td.arrival.departure {
background: linear-gradient(to right,
var(--amber-soft) 0%,
var(--amber-soft) 47%,
var(--bg-soft) 47%,
var(--bg-soft) 53%,
var(--coral-soft) 53%,
var(--coral-soft) 100%
);
color: var(--ink);
font-weight: 700;
position: relative;
}
/* Hover : on ne change pas le gradient (sinon perte de l'info) */
.mini-month td.arrival.departure:hover {
background: linear-gradient(to right,
var(--amber) 0%,
var(--amber) 47%,
var(--bg-soft) 47%,
var(--bg-soft) 53%,
var(--coral) 53%,
var(--coral) 100%
);
color: white;
}
/* Si en plus c'est aujourd'hui, on garde le gradient mais on ajoute un
ring coral autour pour bien identifier le jour courant. */
.mini-month td.arrival.departure.today {
box-shadow: inset 0 0 0 2px var(--coral-deep);
}
/* ─── Biseaux sur les segments de la vue semaine (turnover) ─────────────
Quand un jour cumule départ + arrivée, le segment départ a un biseau à
droite (coin bas-droit oblique) et le segment arrivée un biseau à gauche
(coin haut-gauche oblique). Visuellement les deux segments "se touchent"
en diagonale, matérialisant la transition.
──────────────────────────────────────────────────────────────────────── */
.week-bar-segment.has-bevel-right {
/* Le segment départ : bord droit incliné vers la gauche en bas */
clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.week-bar-segment.has-bevel-left {
/* Le segment arrivée : bord gauche incliné vers la droite en haut */
clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}
/* Sur écran ≤ 480px les biseaux se réduisent pour rester lisibles */
@media (max-width: 480px) {
.week-bar-segment.has-bevel-right {
clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.week-bar-segment.has-bevel-left {
clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);
}
}
/* P44 — Neutraliser le bouton de clear natif sur type="search" (Safari/Chrome)
pour garder un rendu cohérent avec le reste de la barre de filtres. */
.filter-bar input[type="search"]::-webkit-search-cancel-button,
.filter-bar input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.filter-bar input[type="search"] {
/* Évite que Safari affiche son icône loupe native à gauche (on a la nôtre) */
-webkit-appearance: none;
appearance: none;
}
/* ==========================================================================
P36 — Dashboard premium + sidebar desktop étendue
========================================================================== */
body.space-my .app {
--layout-sidebar-w: 232px;
}
body.space-my .sidebar {
align-items: stretch;
padding: 18px 14px 16px;
background:
radial-gradient(circle at 10% 0%, rgba(255,255,255,0.08), transparent 30%),
linear-gradient(180deg, #062F29 0%, #0A302B 52%, #06241F 100%);
}
body.space-my .sidebar-logo {
width: auto;
height: 74px;
justify-content: center;
margin: 2px 8px 20px;
padding: 0;
}
body.space-my .sidebar-logo-full {
width: 96px;
height: auto;
object-fit: contain;
}
body.space-my .sidebar-logo-compact { display: none; }
body.space-my .sidebar-nav {
gap: 7px;
padding: 0;
}
body.space-my .side-item {
flex-direction: row;
justify-content: flex-start;
gap: 13px;
min-height: 45px;
padding: 10px 14px;
padding-right: 52px;
border-radius: 12px;
color: rgba(232, 244, 239, 0.78);
font-size: 13.5px;
font-weight: 650;
text-align: left;
}
body.space-my .side-item:hover {
background: rgba(255, 255, 255, 0.075);
color: #FFFFFF;
}
body.space-my .side-item.active {
background: rgba(255, 255, 255, 0.105);
color: var(--coral);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
body.space-my .side-item.active .side-ic {
background: transparent;
color: var(--coral);
box-shadow: none;
}
body.space-my .side-ic {
width: 24px;
height: 24px;
border-radius: 8px;
color: currentColor;
background: transparent;
flex: 0 0 24px;
}
body.space-my .side-ic i { font-size: 18px; }
body.space-my .side-label {
display: inline-flex;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
body.space-my .side-count {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
border: 0;
background: rgba(255,255,255,0.18);
color: #FFFFFF;
min-width: 24px;
padding: 3px 8px;
line-height: 1.1;
font-size: 11px;
font-weight: 800;
border-radius: 999px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
body.space-my .side-item.active .side-count {
background: rgba(224, 139, 110, 0.95);
}
body.space-my .side-pulse {
top: 2px;
right: -1px;
}
body.space-my .sidebar-foot {
gap: 12px;
padding: 10px 0 0;
}
.sidebar-help-card {
display: grid;
gap: 9px;
padding: 15px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.075);
color: rgba(255,255,255,0.9);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.sidebar-help-title {
font-weight: 800;
color: #FFFFFF;
font-size: 13px;
}
.sidebar-help-text {
font-size: 12.5px;
line-height: 1.45;
color: rgba(255,255,255,0.78);
}
.sidebar-help-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 34px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(224, 139, 110, 0.86);
color: #FFFFFF;
font-weight: 800;
font-size: 12px;
text-decoration: none;
}
.sidebar-help-btn:hover {
background: var(--coral);
color: #FFFFFF;
text-decoration: none;
}
.sidebar-collapse-note {
display: inline-flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 44px;
padding: 10px 14px;
border: 0;
border-radius: 14px;
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.84);
font-weight: 750;
font-size: 12.5px;
}
.sidebar-collapse-note:hover {
background: rgba(255,255,255,0.10);
}
@media (min-width: 1181px) {
body.space-my .app:not(.no-subnav) {
--layout-sidebar-w: 84px;
}
body.space-my .app:not(.no-subnav) .sidebar {
align-items: center;
padding: 14px 0;
}
body.space-my .app:not(.no-subnav) .sidebar-logo {
width: 64px;
height: 64px;
align-items: center;
justify-content: center;
margin: 4px 0 18px;
padding: 6px;
}
body.space-my .app:not(.no-subnav) .sidebar-logo-full { display: none; }
body.space-my .app:not(.no-subnav) .sidebar-logo-compact {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
body.space-my .app:not(.no-subnav) .sidebar-nav {
gap: 2px;
width: 100%;
padding: 0 8px;
}
body.space-my .app:not(.no-subnav) .side-item {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-height: auto;
padding: 9px 4px 8px;
font-size: 10.5px;
text-align: center;
border-radius: var(--r-sm);
}
body.space-my .app:not(.no-subnav) .side-ic {
width: 38px;
height: 38px;
border-radius: var(--r-sm);
flex-basis: auto;
}
body.space-my .app:not(.no-subnav) .side-ic i { font-size: 19px; }
body.space-my .app:not(.no-subnav) .side-label {
display: block;
max-width: 64px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
body.space-my .app:not(.no-subnav) .side-item.active .side-ic {
background: var(--side-soft);
color: var(--coral);
box-shadow: 0 0 0 1px rgba(224, 139, 110, 0.3);
}
body.space-my .app:not(.no-subnav) .side-count {
position: absolute;
top: 4px;
right: 7px;
transform: none;
border: 2px solid var(--side);
min-width: 19px;
padding: 1px 5px;
font-size: 9.5px;
background: var(--coral);
box-shadow: none;
}
body.space-my .app:not(.no-subnav) .sidebar-help-card,
body.space-my .app:not(.no-subnav) .sidebar-collapse-note {
display: none;
}
body.space-my .app:not(.no-subnav) .sidebar-foot {
width: 100%;
padding: 8px;
}
}
@media (max-width: 1180px) {
body.space-my .app {
--layout-sidebar-w: 84px;
}
body.space-my .sidebar {
align-items: center;
padding: 14px 0;
}
body.space-my .sidebar-logo {
width: 64px;
height: 64px;
align-items: center;
justify-content: center;
margin: 4px 0 18px;
padding: 6px;
}
body.space-my .sidebar-logo-full { display: none; }
body.space-my .sidebar-logo-compact {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
body.space-my .sidebar-nav {
gap: 2px;
width: 100%;
padding: 0 8px;
}
body.space-my .side-item {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-height: auto;
padding: 9px 4px 8px;
font-size: 10.5px;
text-align: center;
border-radius: var(--r-sm);
}
body.space-my .side-ic {
width: 38px;
height: 38px;
border-radius: var(--r-sm);
flex-basis: auto;
}
body.space-my .side-ic i { font-size: 19px; }
body.space-my .side-label {
display: block;
max-width: 64px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
body.space-my .side-item.active .side-ic {
background: var(--side-soft);
color: var(--coral);
box-shadow: 0 0 0 1px rgba(224, 139, 110, 0.3);
}
body.space-my .side-count {
position: absolute;
top: 3px;
right: 3px;
transform: none;
border: 2px solid var(--side);
min-width: 18px;
padding: 1px 5px;
}
.sidebar-help-card,
.sidebar-collapse-note {
display: none;
}
body.space-my .sidebar-foot {
width: 100%;
padding: 8px;
}
}
.dashboard-widgets-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--dash-gap);
margin-top: var(--dash-gap);
}
.dashboard-widgets-grid .widget {
margin: 0;
min-width: 0;
}
.dashboard-widgets-grid .widget-body,
.dashboard-widgets-grid .widget-body > .dashboard-v2-card {
height: 100%;
}
.widget-span-wide { grid-column: span 6; }
.widget-span-side { grid-column: span 3; }
.widget-span-third { grid-column: span 4; }
.dashboard-widget-title-note {
color: var(--ink-mute);
font-size: 12px;
font-weight: 700;
}
.page-content-dashboard {
background: transparent;
box-shadow: none;
border-radius: 0;
margin: 0;
padding: 18px 34px 58px;
overflow: visible;
}
.ycs-dashboard-v2 {
--dash-gap: 16px;
color: var(--ink);
}
.dashboard-v2-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin: 8px 0 20px;
}
.dashboard-v2-hello {
color: var(--teal);
font-weight: 800;
margin: 0 0 4px;
font-size: 14px;
}
.dashboard-v2-title {
margin: 0;
font-size: clamp(30px, 3vw, 42px);
line-height: 1.02;
letter-spacing: -0.045em;
color: var(--teal-deep);
font-weight: 850;
}
.dashboard-v2-sub {
margin: 9px 0 0;
color: var(--ink-mute);
font-size: 14px;
font-weight: 600;
}
.dashboard-v2-actions {
display: flex;
gap: 12px;
align-items: center;
flex-shrink: 0;
margin-top: 8px;
}
.dashboard-v2-filter {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink-soft);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
}
.dashboard-v2-primary {
min-height: 44px;
padding: 0 21px;
border-radius: 999px;
background: linear-gradient(180deg, #EE9377, #DD7658);
color: #fff;
box-shadow: 0 10px 22px rgba(221, 118, 88, 0.26);
font-weight: 850;
display: inline-flex;
align-items: center;
gap: 9px;
text-decoration: none;
}
.dashboard-v2-primary:hover { color: #fff; text-decoration: none; transform: translateY(-1px); }
.dashboard-v2-tabs {
display: flex;
align-items: center;
gap: 24px;
border-bottom: 1px solid rgba(31, 77, 69, 0.13);
margin-bottom: 20px;
overflow-x: auto;
}
.dashboard-v2-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 0 13px;
color: var(--ink-mute);
font-weight: 800;
font-size: 13px;
white-space: nowrap;
border-bottom: 2px solid transparent;
}
.dashboard-v2-tab.active {
color: var(--coral-deep);
border-bottom-color: var(--coral);
}
.dashboard-v2-tab .tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 23px;
height: 19px;
padding: 0 7px;
border-radius: 999px;
background: var(--bg-soft);
color: var(--ink-mute);
font-size: 11px;
}
.dashboard-v2-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--dash-gap);
margin-bottom: var(--dash-gap);
}
.dashboard-v2-kpi {
position: relative;
min-height: 124px;
padding: 22px 24px;
border: 1px solid rgba(31, 77, 69, 0.12);
border-radius: 18px;
background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(239, 248, 245, 0.58));
box-shadow: 0 14px 34px rgba(20, 54, 49, 0.055);
overflow: hidden;
}
.dashboard-v2-kpi.is-coral {
background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(253, 241, 233, 0.76));
border-color: rgba(224, 139, 110, 0.22);
}
.dashboard-v2-kpi-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}
.dashboard-v2-kpi-icon {
width: 36px;
height: 36px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--teal);
background: var(--teal-soft);
font-size: 17px;
}
.dashboard-v2-kpi.is-coral .dashboard-v2-kpi-icon {
color: var(--coral-deep);
background: var(--coral-pale);
}
.dashboard-v2-kpi-label {
color: var(--ink-soft);
font-size: 11px;
font-weight: 850;
letter-spacing: .055em;
text-transform: uppercase;
}
.dashboard-v2-kpi-value {
font-size: 28px;
line-height: 1;
font-weight: 850;
color: var(--teal-deep);
letter-spacing: -0.03em;
}
.dashboard-v2-kpi-value small { font-size: 16px; letter-spacing: 0; }
.dashboard-v2-kpi-note {
margin-top: 9px;
color: var(--green);
font-size: 12px;
font-weight: 800;
}
.dashboard-v2-kpi-note.down { color: var(--coral-deep); }
.dashboard-v2-kpi-spark {
position: absolute;
right: 18px;
bottom: 18px;
color: var(--teal);
opacity: .92;
}
.dashboard-v2-main-grid {
display: grid;
grid-template-columns: minmax(420px, 1.55fr) minmax(220px, .72fr) minmax(220px, .72fr);
gap: var(--dash-gap);
margin-bottom: var(--dash-gap);
}
.dashboard-v2-lower-grid {
display: grid;
grid-template-columns: minmax(320px, 1.05fr) minmax(280px, .85fr) minmax(320px, 1fr);
gap: var(--dash-gap);
}
.dashboard-v2-card {
border: 1px solid rgba(31, 77, 69, 0.11);
border-radius: 18px;
background: rgba(255,255,255,0.88);
box-shadow: 0 14px 34px rgba(20, 54, 49, 0.055);
overflow: hidden;
}
.dashboard-v2-card-pad { padding: 22px 24px; }
.dashboard-v2-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 15px;
}
.dashboard-v2-card-title {
margin: 0;
font-size: 16px;
font-weight: 850;
color: var(--ink);
letter-spacing: -0.01em;
}
.dashboard-v2-link {
color: var(--coral-deep);
font-size: 12px;
font-weight: 850;
text-decoration: none;
}
.dashboard-v2-link:hover { color: var(--coral-deep); text-decoration: underline; }
.dashboard-v2-chart-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 4px;
}
.dashboard-v2-select-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--line);
color: var(--ink-soft);
font-weight: 800;
font-size: 12px;
background: rgba(255,255,255,0.66);
}
.dashboard-v2-chart-stat {
text-align: center;
min-width: 150px;
}
.dashboard-v2-chart-stat strong {
display: block;
color: var(--teal-deep);
font-size: 24px;
line-height: 1;
}
.dashboard-v2-chart-stat span {
display: block;
color: var(--ink-mute);
font-size: 11px;
font-weight: 700;
margin-top: 3px;
}
.dashboard-v2-chart-stat .up {
display: inline-flex;
margin-top: 2px;
padding: 3px 9px;
border-radius: 999px;
background: var(--green-soft);
color: var(--green);
font-weight: 850;
}
.dashboard-v2-chart {
width: 100%;
height: 205px;
margin-top: 8px;
overflow: visible;
}
.dashboard-v2-chart text {
font-size: 10px;
fill: var(--ink-mute);
font-weight: 700;
}
.dashboard-v2-insight {
position: relative;
padding: 16px;
min-height: 284px;
color: #fff;
background: linear-gradient(160deg, #0C3B34 0%, #072A25 100%);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dashboard-v2-insight-photo {
height: 108px;
border-radius: 14px;
background:
radial-gradient(circle at 72% 22%, rgba(255,255,255,.18), transparent 17%),
linear-gradient(135deg, rgba(226,168,119,.95), rgba(63,79,61,.9) 44%, rgba(29,47,42,.96)),
linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px);
background-size: auto, auto, 26px 26px, 26px 26px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.dashboard-v2-insight h3 {
margin: 14px 0 6px;
color: #fff;
font-size: 16px;
font-weight: 850;
}
.dashboard-v2-insight p {
margin: 0;
color: rgba(255,255,255,.82);
font-size: 13px;
line-height: 1.45;
}
.dashboard-v2-insight .dashboard-v2-primary {
min-height: 38px;
align-self: flex-start;
margin-top: 14px;
padding: 0 14px;
font-size: 12px;
}
.dashboard-v2-dots { text-align: center; color: rgba(255,255,255,.45); letter-spacing: 4px; }
.dashboard-v2-actions-card {
display: grid;
gap: 10px;
}
.dashboard-v2-action-row {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 9px 13px;
border-radius: 12px;
border: 1px solid var(--line);
color: var(--ink);
background: rgba(255,255,255,.62);
font-weight: 800;
font-size: 13px;
text-decoration: none;
}
.dashboard-v2-action-row i:first-child { color: var(--teal); font-size: 16px; }
.dashboard-v2-action-row:hover { text-decoration: none; background: var(--surface); transform: translateY(-1px); }
.dashboard-v2-action-row .bi-chevron-right { margin-left: auto; color: var(--ink-faint); }
.dashboard-arrivals { padding: 17px 16px 12px; }
.dashboard-arrivals-list { display: grid; gap: 7px; }
.dashboard-arrival-row {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) 46px 44px;
align-items: center;
gap: 12px;
min-height: 58px;
border: 1px solid var(--line-soft);
border-left: 3px solid var(--teal-deep);
border-radius: 13px;
padding: 7px 10px 7px 0;
background: rgba(255,255,255,.88);
color: inherit;
text-decoration: none;
}
.dashboard-arrival-row.is-current {
border-color: rgba(224,139,110,.42);
border-left-color: var(--coral);
background: linear-gradient(90deg, rgba(253,241,233,.88), rgba(255,255,255,.9));
}
.dashboard-arrival-row:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
.dashboard-arrival-date {
align-self: stretch;
min-height: 100%;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--teal-soft);
color: var(--teal-deep);
margin-left: 7px;
font-weight: 850;
line-height: 1.02;
text-align: center;
}
.dashboard-arrival-row.is-current .dashboard-arrival-date {
background: var(--coral-pale);
color: var(--coral-deep);
}
.dashboard-arrival-date span:first-child { font-size: 20px; }
.dashboard-arrival-date span:last-child { font-size: 10px; letter-spacing: .04em; }
.dashboard-arrival-name {
display: block;
color: var(--ink);
font-weight: 850;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard-arrival-meta {
margin-top: 2px;
color: var(--ink-mute);
font-weight: 700;
font-size: 11px;
}
.dashboard-arrival-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 20px;
padding: 0 8px;
border-radius: 999px;
background: var(--green-soft);
color: var(--green);
font-size: 10px;
font-weight: 850;
}
.dashboard-arrival-pers {
color: var(--ink);
text-align: center;
font-weight: 850;
line-height: 1.05;
}
.dashboard-arrival-pers small { display:block; color: var(--ink-mute); font-size: 10px; font-weight: 750; }
.dashboard-v2-empty {
padding: 28px 18px;
text-align: center;
color: var(--ink-mute);
font-weight: 700;
}
.dashboard-mi { padding: 17px 16px 12px; }
.dashboard-mi-summary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 14px;
}
.dashboard-mi-tile {
min-height: 72px;
border-radius: 14px;
background: var(--teal-soft);
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
}
.dashboard-mi-tile.warn { background: var(--coral-pale); }
.dashboard-mi-tile i { font-size: 22px; color: var(--teal); }
.dashboard-mi-tile.warn i { color: var(--coral-deep); }
.dashboard-mi-tile strong { display:block; font-size: 26px; line-height: 1; color: var(--teal-deep); }
.dashboard-mi-tile.warn strong { color: var(--coral-deep); }
.dashboard-mi-tile span { color: var(--ink-mute); font-size: 11px; font-weight: 800; }
.dashboard-mi-list { display: grid; gap: 10px; }
.dashboard-mi-item {
display: grid;
grid-template-columns: 24px minmax(0,1fr) auto;
gap: 10px;
align-items: center;
padding: 10px 11px;
border: 1px solid var(--line-soft);
border-radius: 12px;
background: rgba(255,255,255,.62);
}
.dashboard-mi-item i { color: var(--coral-deep); }
.dashboard-mi-item strong { display:block; font-size: 12.5px; color: var(--ink); }
.dashboard-mi-item span { display:block; font-size: 11px; color: var(--ink-mute); font-weight: 700; }
.dashboard-v2-tag {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 9px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 850;
background: var(--green-soft);
color: var(--green);
}
.dashboard-v2-tag.warn { background: var(--coral-pale); color: var(--coral-deep); }
.dashboard-comms { padding: 17px 16px 12px; }
.dashboard-comms-list { display: grid; }
.dashboard-comm-item {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
min-height: 54px;
border-bottom: 1px solid var(--line-soft);
}
.dashboard-comm-item:last-child { border-bottom: 0; }
.dashboard-comm-icon {
width: 32px;
height: 32px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--teal-soft);
color: var(--teal);
}
.dashboard-comm-title {
color: var(--ink);
font-size: 12.5px;
font-weight: 850;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard-comm-sub {
color: var(--ink-mute);
font-size: 11px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard-comm-ts { color: var(--ink-mute); font-size: 11px; font-weight: 750; }
@media (max-width: 1320px) {
.dashboard-v2-main-grid { grid-template-columns: 1fr 270px; }
.dashboard-v2-main-grid .dashboard-v2-card:last-child { grid-column: 1 / -1; }
.dashboard-v2-actions-card { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dashboard-v2-action-row { min-width: 0; }
}
@media (max-width: 1120px) {
.dashboard-v2-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
.dashboard-v2-main-grid,
.dashboard-v2-lower-grid { grid-template-columns: 1fr; }
.dashboard-v2-actions-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.page-content-dashboard { padding: 14px 16px 36px; }
.dashboard-v2-hero { flex-direction: column; }
.dashboard-v2-actions { width: 100%; }
.dashboard-v2-primary { flex: 1; justify-content: center; }
.dashboard-v2-kpis { grid-template-columns: 1fr; }
.dashboard-v2-actions-card { grid-template-columns: 1fr; }
.dashboard-arrival-row { grid-template-columns: 56px minmax(0, 1fr) 40px; }
.dashboard-arrival-pill { display: none; }
.dashboard-v2-chart-head { flex-direction: column; }
.dashboard-v2-chart-stat { text-align: left; }
}
@media (max-width: 1320px) {
.dashboard-widgets-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.widget-span-wide,
.widget-span-side,
.widget-span-third {
grid-column: span 3;
}
}
@media (max-width: 980px) {
.dashboard-widgets-grid {
grid-template-columns: 1fr;
}
.widget-span-wide,
.widget-span-side,
.widget-span-third {
grid-column: span 1;
}
}
/* ═══════════════════════════════════════════════════════════════════════
Équipe & conciergerie (my/equipe.php)
═══════════════════════════════════════════════════════════════════════ */
.ycs-team-headline { margin-bottom: 14px; }
.ycs-team-scopebar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 18px;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
}
.ycs-team-scopebar-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-mute);
margin-right: 4px;
}
.ycs-team-scope-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border-radius: var(--r-pill);
background: var(--surface-2);
color: var(--ink-soft);
border: 1px solid var(--line);
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
transition: all 0.15s;
}
.ycs-team-scope-pill:hover { background: var(--bg-soft); color: var(--teal); text-decoration: none; }
.ycs-team-scope-pill.active { background: var(--teal); color: white; border-color: var(--teal); }
.ycs-team-kpis { margin-bottom: 16px; }
.ycs-team-cols { margin-bottom: 16px; }
.ycs-team-role-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
padding: 14px;
background: var(--surface);
}
.ycs-team-role-card,
.ycs-team-company-card {
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: var(--r);
padding: 14px;
}
.ycs-team-role-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: var(--teal);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.01em;
}
.ycs-team-mini-person,
.ycs-team-company-head {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.ycs-team-mini-person { margin-top: 9px; }
.ycs-team-mini-person strong,
.ycs-team-company-head strong,
.ycs-team-row-main strong {
display: block;
color: var(--ink);
font-size: 14px;
line-height: 1.25;
}
.ycs-team-mini-person small,
.ycs-team-company-head small,
.ycs-team-row-main small {
display: block;
color: var(--ink-mute);
font-size: 12.5px;
line-height: 1.35;
margin-top: 2px;
}
.ycs-team-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
background: var(--teal-soft);
color: var(--teal-deep);
font-size: 12px;
font-weight: 800;
}
.ycs-team-avatar.company { background: var(--coral-soft); color: var(--coral-deep); }
.ycs-team-avatar.small { width: 28px; height: 28px; font-size: 10.5px; }
.ycs-team-muted { color: var(--ink-mute); font-size: 12.5px; margin: 6px 0 0; }
.ycs-team-company-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.ycs-team-company-grid.wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ycs-team-company-stats {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
color: var(--ink-mute);
font-size: 12.5px;
font-weight: 600;
}
.ycs-team-company-stats span {
padding: 4px 8px;
border-radius: var(--r-pill);
background: var(--surface);
border: 1px solid var(--line-soft);
}
.ycs-team-company-members { margin-top: 12px; }
.ycs-team-tags {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}
.ycs-team-table { background: var(--surface); }
.ycs-team-row {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 14px 18px;
border-bottom: 1px solid var(--line-soft);
}
.ycs-team-row:last-child { border-bottom: none; }
.ycs-team-row-main { min-width: 0; }
.ycs-team-row-stats {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
color: var(--ink-mute);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.ycs-team-service-icon {
width: 34px;
height: 34px;
border-radius: var(--r-sm);
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--amber-soft);
color: var(--amber);
font-size: 15px;
}
@media (max-width: 1100px) {
.ycs-team-role-grid,
.ycs-team-company-grid { grid-template-columns: 1fr; }
.ycs-team-cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.ycs-team-row { grid-template-columns: 36px minmax(0, 1fr); }
.ycs-team-row > .btn,
.ycs-team-row-stats { grid-column: 2; align-items: flex-start; }
.dashboard-headline.ycs-team-headline { flex-direction: column; }
.dashboard-headline-actions { flex-wrap: wrap; }
}
/* ═══════════════════════════════════════════════════════════════════════
Équipe & conciergerie — V2 bulle opérationnelle
═══════════════════════════════════════════════════════════════════════ */
.page-content.ycs-team-page {
background:
radial-gradient(900px 420px at 100% -18%, rgba(224, 139, 110, 0.08), transparent 60%),
radial-gradient(760px 460px at -8% 110%, rgba(31, 77, 69, 0.06), transparent 58%),
var(--surface);
box-shadow: var(--shadow-sm);
}
.ycs-team-v2 {
--ycs-team-card: color-mix(in srgb, var(--surface) 88%, var(--bg-soft));
--ycs-team-card-2: color-mix(in srgb, var(--surface-2) 76%, var(--bg-soft));
--ycs-team-line: color-mix(in srgb, var(--line) 72%, transparent);
display: grid;
gap: 16px;
}
.ycs-team-headline-v2 {
align-items: flex-start;
margin-bottom: 4px;
}
.ycs-team-eyebrow {
margin-bottom: 7px;
color: var(--coral-deep);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ycs-team-hero-title {
max-width: 760px;
margin: 0 0 8px;
color: var(--ink);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(31px, 4vw, 46px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.06;
}
.ycs-team-hero-title em {
color: var(--teal);
font-style: italic;
font-weight: 500;
}
.ycs-team-hero-sub {
max-width: 720px;
font-size: 15px;
line-height: 1.55;
}
.ycs-team-attention {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(160px, 0.42fr) minmax(160px, 0.42fr);
gap: 0;
overflow: hidden;
position: relative;
padding: 0;
border: 1px solid var(--line);
border-radius: 20px;
background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 78%, var(--coral-pale)));
box-shadow: var(--shadow);
}
.ycs-team-attention::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px;
background: var(--coral);
}
.ycs-team-attention-main,
.ycs-team-attention-stat {
padding: 20px 24px;
}
.ycs-team-attention-main {
border-right: 1px solid var(--line-soft);
padding-left: 28px;
}
.ycs-team-attention-kicker {
margin-bottom: 7px;
color: var(--ink-mute);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ycs-team-attention-headline {
max-width: 680px;
color: var(--ink);
font-family: Georgia, 'Times New Roman', serif;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.18;
}
.ycs-team-attention-main p {
margin: 6px 0 0;
color: var(--ink-soft);
font-size: 13.5px;
}
.ycs-team-attention-stat {
border-right: 1px solid var(--line-soft);
}
.ycs-team-attention-stat:last-child { border-right: 0; }
.ycs-team-attention-stat strong {
display: block;
color: var(--teal);
font-family: Georgia, 'Times New Roman', serif;
font-size: 34px;
line-height: 1;
letter-spacing: -0.02em;
}
.ycs-team-attention-stat.warn strong { color: var(--amber); }
.ycs-team-attention-stat span {
display: block;
margin-top: 7px;
color: var(--ink-soft);
font-size: 12.5px;
font-weight: 650;
}
.ycs-team-attention-stat em {
display: inline-flex;
margin-top: 9px;
padding: 3px 10px;
border-radius: var(--r-pill);
background: var(--teal-soft);
color: var(--teal-deep);
font-size: 10.5px;
font-style: normal;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ycs-team-attention-stat.warn em {
background: var(--amber-soft);
color: #8a6118;
}
.ycs-team-bubble-layout {
display: grid;
grid-template-columns: minmax(0, 1.62fr) minmax(300px, 0.88fr);
gap: 16px;
align-items: start;
}
.ycs-team-panel {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 20px;
background: color-mix(in srgb, var(--surface) 96%, var(--bg-soft));
box-shadow: var(--shadow);
}
.ycs-team-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 20px 22px 14px;
}
.ycs-team-panel-head.compact {
align-items: center;
padding-bottom: 12px;
}
.ycs-team-panel-head h2,
.ycs-team-panel-head h3 {
margin: 0;
color: var(--ink);
font-size: 18px;
font-weight: 800;
letter-spacing: -0.012em;
}
.ycs-team-panel-head h3 { font-size: 16px; }
.ycs-team-panel-head p {
max-width: 680px;
margin: 4px 0 0;
color: var(--ink-mute);
font-size: 13px;
}
.ycs-team-panel-head > span {
flex: 0 0 auto;
color: var(--ink-mute);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.ycs-team-bubble {
position: relative;
padding: 18px 22px 10px;
}
.ycs-team-bubble-grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 164px minmax(0, 1fr);
gap: 18px;
align-items: center;
}
.ycs-team-bubble-grid::before,
.ycs-team-bubble-grid::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 92px);
border-top: 1.5px dashed color-mix(in srgb, var(--teal) 45%, transparent);
transform: translateY(-50%);
pointer-events: none;
}
.ycs-team-bubble-grid::before { left: calc(25% - 6px); }
.ycs-team-bubble-grid::after {
right: calc(25% - 6px);
border-top-color: color-mix(in srgb, var(--coral) 55%, transparent);
}
.ycs-team-org-card {
position: relative;
z-index: 1;
min-height: 150px;
padding: 17px 17px 15px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--surface-2);
transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.ycs-team-org-card:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--teal) 22%, var(--line));
box-shadow: var(--shadow-pop);
}
.ycs-team-org-card.concierge { background: color-mix(in srgb, var(--surface) 84%, var(--coral-pale)); }
.ycs-team-org-role {
margin-bottom: 10px;
font-size: 10.5px;
font-weight: 850;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.ycs-team-org-card.owner .ycs-team-org-role { color: var(--teal); }
.ycs-team-org-card.concierge .ycs-team-org-role { color: var(--coral-deep); }
.ycs-team-org-card strong {
display: block;
color: var(--ink);
font-size: 15px;
line-height: 1.25;
}
.ycs-team-org-card small {
display: block;
min-height: 18px;
margin-top: 3px;
color: var(--ink-mute);
font-size: 12.5px;
}
.ycs-team-chip-row {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 13px;
}
.ycs-team-chip {
display: inline-flex;
align-items: center;
max-width: 100%;
gap: 7px;
padding: 4px 10px 4px 4px;
border: 1px solid var(--line-soft);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--ink-soft);
font-size: 12px;
font-weight: 700;
}
.ycs-team-chip-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 23px;
height: 23px;
flex: 0 0 23px;
border-radius: 50%;
background: var(--teal);
color: #fff;
font-size: 9.5px;
font-weight: 850;
}
.ycs-team-chip.coral .ycs-team-chip-avatar { background: var(--coral-deep); }
.ycs-team-more {
align-self: center;
color: var(--ink-mute);
font-size: 12px;
font-weight: 800;
}
.ycs-team-center-node {
position: relative;
z-index: 2;
display: grid;
place-content: center;
width: 164px;
height: 164px;
margin: 0 auto;
border-radius: 50%;
text-align: center;
color: #eef4f0;
background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--teal) 78%, white), var(--teal) 62%, var(--teal-deep));
box-shadow: 0 18px 40px -18px rgba(31, 77, 69, 0.72), inset 0 2px 0 rgba(255,255,255,0.15);
}
.ycs-team-center-node::after {
content: '';
position: absolute;
inset: -9px;
border: 1px dashed color-mix(in srgb, var(--teal) 36%, transparent);
border-radius: 50%;
}
.ycs-team-center-node span {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
opacity: 0.78;
}
.ycs-team-center-node strong {
display: block;
max-width: 130px;
margin: 5px auto 6px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 24px;
font-weight: 600;
line-height: 1.03;
}
.ycs-team-center-node small {
font-size: 11.5px;
opacity: 0.82;
}
.ycs-team-roster-block {
margin-top: 12px;
border-top: 1px solid var(--line-soft);
}
.ycs-team-roster-list {
padding: 0 18px 16px;
}
.ycs-team-roster-list.full {
padding-top: 4px;
}
.ycs-team-person-row {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 13px;
align-items: center;
padding: 13px 0;
border-top: 1px solid var(--line-soft);
}
.ycs-team-person-row:first-child { border-top: 0; }
.ycs-team-person-row.compact {
grid-template-columns: 40px minmax(0, 1fr) auto;
padding: 11px 0;
}
.ycs-team-avatar-lg,
.ycs-team-avatar-sm {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 13px;
background: var(--teal-soft);
color: var(--teal-deep);
font-weight: 850;
}
.ycs-team-avatar-lg {
width: 40px;
height: 40px;
font-size: 12px;
}
.ycs-team-avatar-sm {
width: 31px;
height: 31px;
border-radius: 10px;
font-size: 10.5px;
}
.ycs-team-avatar-sm.admin { background: color-mix(in srgb, var(--teal-soft) 70%, #e8eef6); color: #3a5878; }
.ycs-team-avatar-sm.field { background: var(--coral-soft); color: var(--coral-deep); }
.ycs-team-avatar-sm.manage { background: var(--amber-soft); color: #7f6125; }
.ycs-team-avatar-sm.muted { background: var(--bg-soft); color: var(--ink-soft); }
.ycs-team-person-main strong,
.ycs-team-member-row strong,
.ycs-team-concierge-card strong {
display: block;
color: var(--ink);
font-size: 14px;
font-weight: 800;
line-height: 1.22;
}
.ycs-team-person-main small,
.ycs-team-member-row small,
.ycs-team-concierge-card small {
display: block;
margin-top: 2px;
color: var(--ink-mute);
font-size: 12px;
line-height: 1.32;
}
.ycs-team-contact-line a { color: var(--ink-soft); }
.ycs-team-hats {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
margin-left: auto;
}
.ycs-team-hat {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: var(--r-pill);
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}
.ycs-team-hat.owner { background: var(--teal-soft); color: var(--teal-deep); }
.ycs-team-hat.manage { background: var(--amber-soft); color: #72591f; }
.ycs-team-hat.field { background: var(--coral-soft); color: var(--coral-deep); }
.ycs-team-hat.admin { background: #dfe6ef; color: #3a5878; }
.ycs-team-hat.muted { background: var(--bg-soft); color: var(--ink-soft); }
.ycs-team-hat.warn { background: var(--amber-soft); color: var(--amber); }
.ycs-team-hat.alert { background: var(--red-soft); color: var(--red); }
.ycs-team-side-stack {
display: grid;
gap: 16px;
}
.ycs-team-concierge-card {
display: flex;
gap: 13px;
align-items: center;
padding: 0 18px 16px;
border-bottom: 1px solid var(--line-soft);
}
.ycs-team-company-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 14px;
background: linear-gradient(150deg, var(--coral), var(--coral-deep));
color: #fff;
font-size: 13px;
font-weight: 850;
box-shadow: var(--shadow);
}
.ycs-team-badges-line {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.ycs-team-member-list { padding: 8px 18px 16px; }
.ycs-team-member-row {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 0;
}
.ycs-team-incident-card {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 12px;
align-items: flex-start;
margin: 0 18px 16px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--amber) 20%, var(--line));
border-radius: 16px;
background: var(--amber-soft);
}
.ycs-team-incident-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--amber) 24%, var(--surface));
border-radius: 11px;
background: var(--surface);
color: var(--amber);
}
.ycs-team-incident-card strong {
display: block;
color: var(--ink);
font-size: 13.5px;
font-weight: 800;
}
.ycs-team-incident-card small {
display: block;
margin-top: 2px;
color: #8a6f3a;
font-size: 12px;
}
.ycs-team-ledger {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
overflow: hidden;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.ycs-team-ledger div {
padding: 17px 20px;
border-right: 1px solid var(--line-soft);
}
.ycs-team-ledger div:last-child { border-right: 0; }
.ycs-team-ledger strong {
display: block;
color: var(--teal);
font-family: Georgia, 'Times New Roman', serif;
font-size: 28px;
line-height: 1;
letter-spacing: -0.02em;
}
.ycs-team-ledger span {
display: block;
margin-top: 5px;
color: var(--ink-mute);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.ycs-team-table { background: var(--surface); }
.ycs-team-empty { border-top: 1px solid var(--line-soft); }
.ycs-team-company-grid.wide {
padding: 0 18px 18px;
}
.ycs-team-company-card {
border-radius: 16px;
background: var(--surface-2);
}
@supports not (background: color-mix(in srgb, red, blue)) {
.ycs-team-v2 { --ycs-team-card: var(--surface); --ycs-team-card-2: var(--surface-2); --ycs-team-line: var(--line); }
.page-content.ycs-team-page { background: var(--surface); }
.ycs-team-panel { background: var(--surface); }
.ycs-team-org-card.concierge { background: var(--coral-pale); }
}
@media (max-width: 1180px) {
.ycs-team-bubble-layout { grid-template-columns: 1fr; }
.ycs-team-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
.ycs-team-attention { grid-template-columns: 1fr; }
.ycs-team-attention-main,
.ycs-team-attention-stat {
border-right: 0;
border-bottom: 1px solid var(--line-soft);
}
.ycs-team-attention-stat:last-child { border-bottom: 0; }
.ycs-team-bubble-grid {
grid-template-columns: 1fr;
gap: 14px;
text-align: center;
}
.ycs-team-bubble-grid::before,
.ycs-team-bubble-grid::after { display: none; }
.ycs-team-center-node { order: -1; }
.ycs-team-chip-row { justify-content: center; }
}
@media (max-width: 760px) {
.page-content.ycs-team-page { padding-left: 16px; padding-right: 16px; }
.ycs-team-headline-v2 { flex-direction: column; }
.dashboard-headline-actions { flex-wrap: wrap; }
.ycs-team-side-stack { grid-template-columns: 1fr; }
.ycs-team-person-row,
.ycs-team-person-row.compact {
grid-template-columns: 40px minmax(0, 1fr);
}
.ycs-team-hats {
grid-column: 2;
justify-content: flex-start;
margin-left: 0;
}
.ycs-team-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ycs-team-ledger div { border-bottom: 1px solid var(--line-soft); }
.ycs-team-incident-card { grid-template-columns: 36px minmax(0, 1fr); }
.ycs-team-incident-card .badge { grid-column: 2; justify-self: start; }
}