/* ============================================================ slide-panel.css — Composant popin glissée depuis la droite. Utilisé dans le BO Aurélia (Lot 5b) et dans tout le BO en général pour afficher des fiches détail sans navigation. Largeur calculée : 100vw - 2× sidebar (= ~960px sur écran 1440). Sur tablette portrait / mobile : largeur 100%. Variables CSS attendues du parent : --or, --or-light, --texte, --texte-light, --beige, --border, --sidebar-w ============================================================ */ .slide-panel-backdrop { position: fixed; inset: 0; background: rgba(20, 16, 8, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out; z-index: 1000; } .slide-panel { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: calc(100vw - var(--sidebar-w, 240px) * 2); min-width: 360px; background: #fff; box-shadow: -8px 0 32px rgba(20, 16, 8, 0.15); transform: translateX(100%); transition: transform 0.25s ease-out; z-index: 1001; display: flex; flex-direction: column; overscroll-behavior: contain; } /* En public, on cap la largeur du slide à 760px (lisibilité du content, aligné sur le pattern du site). En gestion/admin, on a une sidebar et on utilise la formule calc() avec --sidebar-w pour exploiter la zone centrale. La distinction se fait via la présence de --sidebar-w : défini sur en gestion/admin (cf. gestion/_partials/header.php et admin/_partials/header.php), absent en public. Astuce CSS : @supports + var() ne suffit pas (var() est toujours "supportée"). On utilise une classe `.slide-panel--public` posée par les pages publiques sur le panel lui-même via _shared/slide-panel.js. */ .slide-panel--public { width: 760px; /* largeur de slide qui laisse respirer le contenu derrière */ max-width: 92vw; min-width: 0; } /* État ouvert : pilotage par classe sur pour éviter le flicker initial */ html.slide-panel-open .slide-panel-backdrop { opacity: 1; pointer-events: auto; } html.slide-panel-open .slide-panel { transform: translateX(0); } /* Pendant l'ouverture, empêcher le scroll du body dessous */ html.slide-panel-open, html.slide-panel-open body { overflow: hidden; } /* ---- Header ---- */ .slide-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--beige, #f3efe8); flex-shrink: 0; } .slide-panel-title { font-family: 'Dancing Script', cursive; font-size: 22pt; color: #2a2a2a; /* Mot principal en noir, le span (mot accentué) prend l'or */ line-height: 1; margin: 0; font-weight: 400; } .slide-panel-title span { color: var(--or, #947436); } .slide-panel-subtitle { font-family: 'Montserrat', sans-serif; font-size: 11px; color: var(--texte-light, #6b6b6b); margin-left: 8px; letter-spacing: 1px; text-transform: uppercase; } .slide-panel-close { background: transparent; border: 1px solid var(--border, #e8e1d4); color: var(--texte, #2a2a2a); width: 36px; height: 36px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; transition: background 0.15s, border-color 0.15s, color 0.15s; flex-shrink: 0; } .slide-panel-close:hover { background: var(--or, #947436); border-color: var(--or, #947436); color: #fff; } /* ---- Body ---- */ .slide-panel-body { flex: 1; overflow-y: auto; padding: 24px 28px 32px; -webkit-overflow-scrolling: touch; } /* ---- Mobile / iPad portrait ---- */ @media (max-width: 900px) { .slide-panel { width: 100vw; min-width: 0; } } /* ============================================================ Bouton flottant « Reprendre » : visible quand le slide-panel a été fermé alors qu'il contenait une saisie en cours. Permet à la cliente de revenir sur son formulaire sans passer par le catalogue. Position fixed → toujours visible au scroll. En haut à droite, collé au bord, demi-pillule avec coin gauche arrondi pour l'effet « accroché ». ============================================================ */ .slide-panel-resume { position: fixed; top: 96px; /* sous le header public (~76px) avec marge */ right: 0; z-index: 999; /* sous le panel ouvert mais au-dessus du contenu */ background: var(--or, #947436); color: #fff; border: none; padding: 10px 16px 10px 14px; border-radius: 999px 0 0 999px; /* arrondi côté gauche uniquement (accroché à droite) */ box-shadow: -2px 4px 16px rgba(20, 16, 8, 0.18); cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s, transform 0.15s, padding-right 0.15s; animation: slidePanelResumeIn 0.3s ease-out; } .slide-panel-resume:hover { background: var(--or-light, #b8975a); padding-right: 20px; } .slide-panel-resume[hidden] { display: none; } .slide-panel-resume-icon { display: inline-block; font-size: 16px; line-height: 1; } .slide-panel-resume-label { white-space: nowrap; } @keyframes slidePanelResumeIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Sur mobile : label condensé pour gagner de la place */ @media (max-width: 540px) { .slide-panel-resume { top: 80px; padding: 8px 12px; font-size: 11.5px; } }