/* order.diag2france.fr — premium editorial design */ *:focus-visible { outline: none; } button { -webkit-tap-highlight-color: transparent; } ::selection { background: #39ace3; color: #fff; } @media (min-width: 768px) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(7, 58, 85, .15); border-radius: 5px; border: 2px solid #F8FAFC; } ::-webkit-scrollbar-thumb:hover { background: rgba(7, 58, 85, .3); } } @supports (-webkit-touch-callout: none) { input, select, textarea { font-size: 16px !important; } } [x-cloak] { display: none !important; } input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; transition: opacity .15s; } input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } button, a, input, select, textarea { transition-property: color, background-color, border-color, box-shadow, transform, opacity; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } @media print { body { background: white !important; } header, footer, [x-show] { display: none !important; } } .shadow-soft { transition: box-shadow .25s, transform .25s; } .shadow-soft:hover { transform: translateY(-1px); } .font-serif { font-feature-settings: "ss01", "ss02"; letter-spacing: -0.02em; } input[type=tel], input[type=email] { font-feature-settings: "tnum"; } button:focus-visible { box-shadow: 0 0 0 3px rgba(0, 133, 191, .18); } /* ============================================================ Modal architecture — iOS-safe - Outer overlay = positioning only, NO overflow - Modal = flex column, fills viewport on mobile - Header = flex-shrink-0, always visible - Body = flex-1, the scrollable area (-webkit-overflow-scrolling: touch) - Body scroll locked via .modal-open class on ============================================================ */ body.modal-open { /* Lock body scroll while a modal is open. Position fixed prevents iOS rubber-band, but we save/restore scrollY in JS so the page doesn't jump. */ overflow: hidden; position: fixed; width: 100%; left: 0; right: 0; } .d2f-modal-overlay { /* Just a backdrop + positioning context. No scroll here on mobile. */ display: flex; align-items: stretch; justify-content: stretch; overflow: hidden; } .d2f-modal { /* Mobile: full-screen sheet, flex-column with internal scroll. */ width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; } .d2f-modal-header { flex-shrink: 0; padding-top: max(1rem, env(safe-area-inset-top)); } .d2f-modal-body { /* The actual scroll container */ flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); } @media (min-width: 768px) { .d2f-modal-overlay { align-items: center; justify-content: center; padding: 1rem; } .d2f-modal { width: auto; max-width: 36rem; height: auto; max-height: 92vh; border-radius: 28px; } .d2f-modal.d2f-modal-md { max-width: 28rem; } .d2f-modal-header { padding-top: 1rem; } }