/* ===================================================================== LANTADELI — Guide des Tailles (modale) Tokens DS hérités de style.css : --lanta-cream / -noir / -leather / -fil / --lanta-radius-control. Variable de compensation scrollbar : --ld-scrollbar-w (posée par JS sur à l'ouverture, retirée à la fermeture). ===================================================================== */ /* ---------- Pilotage global via :has() — body lock + compensation ---------- */ /* CLS = 0 : on n'ajoute le padding qu'à l'ouverture, exactement de la largeur de la scrollbar mesurée juste avant. La page ne saute pas. */ html:has(.lanta-size-guide[data-state="open"]) body { overflow: hidden; padding-right: var(--ld-scrollbar-w, 0px); } /* ---------- Trigger (placé près de l'add-to-cart) ---------- */ .lanta-size-guide-trigger { display: inline-flex; align-items: center; gap: 0.45em; margin: 0.75rem 0; padding: 0.5rem 0.85rem; background: transparent; color: var(--lanta-leather, #7A5E4D); border: 1px solid var(--lanta-fil, rgba(26, 21, 18, 0.12)); border-radius: var(--lanta-radius-control, 2px); font: inherit; font-size: 0.92rem; letter-spacing: 0.01em; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .lanta-size-guide-trigger:hover { border-color: var(--lanta-noir, #1A1512); color: var(--lanta-noir, #1A1512); background-color: var(--lanta-cream-dark, #EDE7DD); } .lanta-size-guide-trigger:focus-visible { outline: 2px solid var(--lanta-noir, #1A1512); outline-offset: 2px; } .lanta-size-guide-trigger-icon { display: inline-block; transform: translateY(-1px); font-size: 0.85em; opacity: 0.7; } /* ---------- Shell du dialog (fixed, hors flux → 0 CLS) ---------- */ .lanta-size-guide { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .lanta-size-guide[data-state="open"] { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.2s ease, visibility 0s linear 0s; } .lanta-size-guide-backdrop { position: absolute; inset: 0; background: rgba(26, 21, 18, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer; } /* ---------- Dialog ---------- */ .lanta-size-guide-dialog { position: relative; background: var(--lanta-cream, #F9F5EF); color: var(--lanta-noir, #1A1512); border-radius: var(--lanta-radius-lg, 8px); box-shadow: 0 20px 60px rgba(26, 21, 18, 0.28); width: min(640px, calc(100vw - 2rem)); max-height: min(80vh, 720px); overflow-y: auto; padding: 1.75rem 1.75rem 1.5rem; transform: translateY(6px); transition: transform 0.2s ease; } .lanta-size-guide[data-state="open"] .lanta-size-guide-dialog { transform: translateY(0); } .lanta-size-guide-dialog:focus { outline: none; } .lanta-size-guide-dialog:focus-visible { outline: 2px solid var(--lanta-noir, #1A1512); outline-offset: -2px; } /* ---------- Header ---------- */ .lanta-size-guide-header { position: relative; padding-right: 2.5rem; margin-bottom: 1.25rem; } .lanta-size-guide-title { font-family: var(--lanta-font-display, 'Fraunces', 'Cormorant Garamond', Georgia, serif); font-weight: 400; font-size: clamp(1.35rem, 2.1vw, 1.65rem); letter-spacing: 0.01em; margin: 0 0 0.3rem; color: var(--lanta-noir, #1A1512); } .lanta-size-guide-desc { margin: 0; color: var(--lanta-grey-soft, #7A756F); font-size: 0.92rem; line-height: 1.5; } .lanta-size-guide-close { position: absolute; top: -0.25rem; right: -0.25rem; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--lanta-noir, #1A1512); border-radius: 50%; cursor: pointer; transition: background-color 0.2s ease; } .lanta-size-guide-close:hover { background-color: var(--lanta-cream-dark, #EDE7DD); } .lanta-size-guide-close:focus-visible { outline: 2px solid var(--lanta-noir, #1A1512); outline-offset: 2px; } /* ---------- Tabs (univers) ---------- */ .lanta-size-guide-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--lanta-fil, rgba(26, 21, 18, 0.12)); margin: 0 -0.25rem 1.25rem; padding: 0 0.25rem; } .lanta-size-guide-tab { padding: 0.6rem 0.9rem; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--lanta-grey-soft, #7A756F); font: inherit; font-size: 0.92rem; letter-spacing: 0.02em; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; margin-bottom: -1px; } .lanta-size-guide-tab:hover { color: var(--lanta-noir, #1A1512); } .lanta-size-guide-tab[aria-selected="true"] { color: var(--lanta-noir, #1A1512); border-bottom-color: var(--lanta-noir, #1A1512); } .lanta-size-guide-tab:focus-visible { outline: 2px solid var(--lanta-noir, #1A1512); outline-offset: 2px; border-radius: var(--lanta-radius-control, 2px); } /* ---------- Body ---------- */ .lanta-size-guide-body { font-size: 0.95rem; line-height: 1.55; } .lanta-size-guide-intro { margin: 0 0 1rem; color: var(--lanta-noir-soft, #3D3833); } .lanta-size-guide-table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-variant-numeric: tabular-nums; } .lanta-size-guide-table th, .lanta-size-guide-table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--lanta-fil, rgba(26, 21, 18, 0.12)); } .lanta-size-guide-table thead th { font-weight: 500; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lanta-grey-soft, #7A756F); border-bottom-color: var(--lanta-fil-fort, rgba(26, 21, 18, 0.26)); } .lanta-size-guide-table tbody th { font-weight: 500; color: var(--lanta-noir, #1A1512); } .lanta-size-guide-care { margin: 1rem 0 0; padding: 0.75rem 0.9rem; background-color: var(--lanta-papier, #FBF6EC); border-left: 2px solid var(--lanta-leather, #7A5E4D); color: var(--lanta-noir-soft, #3D3833); font-size: 0.88rem; font-style: italic; } /* ---------- Mobile ---------- */ @media (max-width: 600px) { .lanta-size-guide-dialog { width: 100%; max-width: 100%; max-height: calc(100vh - 1rem); border-radius: var(--lanta-radius-lg, 8px) var(--lanta-radius-lg, 8px) 0 0; padding: 1.25rem 1.1rem 1rem; } .lanta-size-guide { align-items: flex-end; } .lanta-size-guide-tabs { overflow-x: auto; flex-wrap: nowrap; } .lanta-size-guide-tab { white-space: nowrap; } } /* ---------- Réduction de mouvement ---------- */ @media (prefers-reduced-motion: reduce) { .lanta-size-guide, .lanta-size-guide-dialog, .lanta-size-guide-trigger, .lanta-size-guide-tab, .lanta-size-guide-close { transition: none !important; } .lanta-size-guide-dialog { transform: none !important; } } /* ===================================================================== Univers Denim / Prêt-à-porter — scopé sur body.ld-product-context--denim Palette indigo + surpiqûres orange (dashed outline offset) + DM Sans moderne en rupture franche avec l'élégance serif des univers cuir/synth. ===================================================================== */ body.ld-product-context--denim { --ld-denim-indigo: #1B2A4E; --ld-denim-indigo-dark: #0F1B3A; --ld-denim-cobalt: #2E4172; --ld-denim-thread: #E8A04A; --ld-denim-canvas: #F3F1ED; --ld-denim-stone: #5E6B85; --ld-denim-rule: rgba(27, 42, 78, 0.18); } /* Trigger : "étiquette tissée" indigo + surpiqûres */ body.ld-product-context--denim .lanta-size-guide-trigger { background-color: var(--ld-denim-indigo); color: #FAFAFA; border: 1px solid var(--ld-denim-indigo); border-radius: 0; font-family: var(--lanta-font-sans, 'DM Sans', sans-serif); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; outline: 1px dashed var(--ld-denim-thread); outline-offset: -4px; } body.ld-product-context--denim .lanta-size-guide-trigger:hover { background-color: var(--ld-denim-cobalt); color: #FAFAFA; } body.ld-product-context--denim .lanta-size-guide-trigger:focus-visible { outline: 2px solid var(--ld-denim-thread); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(232, 160, 74, 0.30); } body.ld-product-context--denim .lanta-size-guide-trigger-icon { opacity: 1; } /* Dialog : papier kraft + cadre indigo + surpiqûres internes */ body.ld-product-context--denim .lanta-size-guide-dialog { background-color: var(--ld-denim-canvas); color: var(--ld-denim-indigo-dark); border: 2px solid var(--ld-denim-indigo); border-radius: 0; box-shadow: 0 24px 60px rgba(15, 27, 58, 0.32); outline: 1px dashed var(--ld-denim-thread); outline-offset: -10px; } body.ld-product-context--denim .lanta-size-guide-title { font-family: var(--lanta-font-sans, 'DM Sans', sans-serif); font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--ld-denim-indigo); } body.ld-product-context--denim .lanta-size-guide-desc { color: var(--ld-denim-stone); font-family: var(--lanta-font-sans, 'DM Sans', sans-serif); } body.ld-product-context--denim .lanta-size-guide-close { color: var(--ld-denim-indigo); } body.ld-product-context--denim .lanta-size-guide-close:hover { background-color: rgba(27, 42, 78, 0.08); } /* Tabs : labels carrés indigo + barre active orange "fil" */ body.ld-product-context--denim .lanta-size-guide-tabs { border-bottom-color: var(--ld-denim-rule); } body.ld-product-context--denim .lanta-size-guide-tab { font-family: var(--lanta-font-sans, 'DM Sans', sans-serif); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ld-denim-stone); border-radius: 0; } body.ld-product-context--denim .lanta-size-guide-tab:hover { color: var(--ld-denim-indigo); } body.ld-product-context--denim .lanta-size-guide-tab[aria-selected="true"] { color: var(--ld-denim-indigo); border-bottom-color: var(--ld-denim-thread); } body.ld-product-context--denim .lanta-size-guide-tab:focus-visible { outline-color: var(--ld-denim-indigo); } /* Table : tabular-nums + en-têtes indigo + filets cobalt */ body.ld-product-context--denim .lanta-size-guide-body, body.ld-product-context--denim .lanta-size-guide-intro, body.ld-product-context--denim .lanta-size-guide-table { font-family: var(--lanta-font-sans, 'DM Sans', sans-serif); } body.ld-product-context--denim .lanta-size-guide-intro { color: var(--ld-denim-indigo-dark); } body.ld-product-context--denim .lanta-size-guide-table thead th { color: var(--ld-denim-indigo); border-bottom: 2px solid var(--ld-denim-indigo); letter-spacing: 0.14em; text-transform: uppercase; } body.ld-product-context--denim .lanta-size-guide-table tbody th { color: var(--ld-denim-indigo-dark); font-weight: 600; } body.ld-product-context--denim .lanta-size-guide-table th, body.ld-product-context--denim .lanta-size-guide-table td { border-bottom-color: var(--ld-denim-rule); } /* Care : encadré "étiquette d'entretien" — pas d'italique sur denim */ body.ld-product-context--denim .lanta-size-guide-care { background-color: rgba(27, 42, 78, 0.06); border-left: 3px solid var(--ld-denim-thread); color: var(--ld-denim-indigo-dark); font-family: var(--lanta-font-sans, 'DM Sans', sans-serif); font-style: normal; }