/* Œuvra — bundle.css v1
   Composants du site et des fragments UI (préfixe .oe-).
   Requiert tokens.css : --bg-*, --ink-*, --border-*, --action*, --brand-*, --status-*, --lot-*,
   --space-*, --radius-*, --shadow-*, --control-*, --icon-*, --container, --content,
   --duration-*, --ease-*, --font-sans.
   Règles : filets 1 px, rayons 4–10 px (16 réservé aux grands cadres), aucune ombre sur les cartes.
   Matières (v2) : calque (.oe-glass), lavis (.oe-gradient--*), papier (.oe-grain), motif Œ (.oe-motif) —
   réservées aux fonds de rubrique, hero, cadres de Feature Visuals, nav et modales ; jamais dans un tableau
   ni un composant de l’application. Requiert aussi --glass-*, --gradient-*, --blur-*, --grain-opacity, --motif-opacity. */

/* ---------- Base ---------- */
[class^="oe-"], [class*=" oe-"], [class^="oe-"] *, [class*=" oe-"] * { box-sizing: border-box; }
[class^="oe-"], [class*=" oe-"] { font-family: var(--font-sans, "Sora", system-ui, sans-serif); }
.oe { color: var(--ink-900); background: var(--bg-page); font: 400 15px/24px var(--font-sans, "Sora", system-ui, sans-serif); -webkit-font-smoothing: antialiased; }
.oe-on-dark { color: var(--ink-inverse); }

/* Utilitaires typographiques */
.oe-accent { font-weight: 600; }
.oe-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.oe-overline { text-transform: uppercase; letter-spacing: .06em; }
.oe-muted { color: var(--ink-500); }
.oe-kicker { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: 500 15px/22px var(--font-sans); color: var(--brand-ink); }
.oe-kicker::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--action); flex: none; }
.oe-fill-text { background: linear-gradient(90deg, var(--ink-900) var(--fill, 0%), var(--ink-500) 0); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Motion : entrée en flou, skeleton, défilement */
.oe-reveal { opacity: 0; filter: blur(var(--blur-reveal, 8px)); transform: translateY(8px); transition: opacity var(--duration-reveal) var(--ease-enter), filter var(--duration-reveal) var(--ease-enter), transform var(--duration-reveal) var(--ease-enter); }
.oe-reveal.is-visible { opacity: 1; filter: blur(0); transform: none; }
.oe-reveal--2 { transition-delay: 120ms; } .oe-reveal--3 { transition-delay: 240ms; }
.oe-skeleton { position: relative; overflow: hidden; background: var(--bg-beige); border-radius: var(--radius-xs); color: transparent !important; border-color: transparent !important; }
.oe-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, #ffffffa6, transparent); animation: oe-shimmer 1.6s var(--ease-standard) infinite; }
@keyframes oe-shimmer { to { transform: translateX(100%); } }
.oe-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.oe-marquee__track { display: flex; gap: var(--space-8); width: max-content; animation: oe-marquee var(--marquee-duration, 32s) linear infinite; }
.oe-marquee:hover .oe-marquee__track { animation-play-state: paused; }
@keyframes oe-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .oe-reveal { opacity: 1; filter: none; transform: none; transition: none; }
  .oe-skeleton::after, .oe-marquee__track { animation: none; }
  [class^="oe-"], [class*=" oe-"] { transition-duration: 0ms !important; }
}

/* ---------- Mise en page ---------- */
.oe-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
.oe-section { padding: var(--space-20) 0; }
.oe-section--hero { padding: var(--space-32) 0 var(--space-24); }
.oe-section--brand { background: var(--brand-100); }
.oe-section--beige { background: var(--bg-beige); }
.oe-hero-frame { border-radius: var(--radius-xl); overflow: hidden; transition: border-radius var(--duration-slow) var(--ease-standard), margin var(--duration-slow) var(--ease-standard); }
.oe-grid { display: grid; gap: var(--space-6); }
.oe-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oe-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oe-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .oe-section { padding: var(--space-16) 0; }
  .oe-section--hero { padding: var(--space-20) 0 var(--space-16); }
  .oe-grid--2, .oe-grid--3, .oe-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- SectionHeader ---------- */
.oe-section-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 760px; }
.oe-section-head--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.oe-section-head__title { margin: 0; font: 300 48px/54px var(--font-sans); letter-spacing: -.015em; color: var(--ink-900); }
.oe-section-head--hero .oe-section-head__title { font-size: 64px; line-height: 68px; letter-spacing: -.02em; }
.oe-section-head--sm .oe-section-head__title { font-size: 36px; line-height: 42px; letter-spacing: -.01em; }
.oe-section-head__lead { margin: 0; font: 400 20px/30px var(--font-sans); color: var(--ink-700); max-width: 640px; }
.oe-section-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
@media (max-width: 720px) {
  .oe-section-head__title { font-size: 36px; line-height: 42px; letter-spacing: -.01em; }
  .oe-section-head--hero .oe-section-head__title { font-size: 40px; line-height: 44px; }
  .oe-section-head__lead { font-size: 17px; line-height: 26px; }
}

/* ---------- Button ---------- */
.oe-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-sm); font: 600 15px/20px var(--font-sans); color: var(--ink-900); background: transparent; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.oe-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.oe-btn--primary { background: var(--action); color: var(--ink-inverse); }
.oe-btn--secondary { background: var(--brand-100); color: var(--brand-ink); }
.oe-btn--secondary:hover { border-color: var(--brand-300); }
.oe-btn--tertiary { background: var(--bg-surface); border-color: var(--border-100); color: var(--ink-900); }
.oe-btn--tertiary:hover { background: var(--bg-beige); border-color: var(--border-strong); }
.oe-btn--ghost { color: var(--ink-700); }
.oe-btn--ghost:hover { background: var(--bg-beige); color: var(--ink-900); }
.oe-btn--sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: 13px; line-height: 18px; }
.oe-btn--lg { height: var(--control-lg); padding: 0 var(--space-5); }
.oe-btn--icon { width: var(--control-md); padding: 0; }
.oe-btn--icon.oe-btn--sm { width: var(--control-sm); }
.oe-btn__icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.oe-btn:disabled, .oe-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.oe-btn-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.oe-on-dark .oe-btn--tertiary { background: transparent; border-color: #ffffff3d; color: var(--ink-inverse); }
.oe-on-dark .oe-btn--tertiary:hover { background: #ffffff14; border-color: #ffffff80; }
.oe-on-dark .oe-btn:focus-visible { box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--brand-100); }

/* ---------- Link ---------- */
.oe-link { color: var(--brand-ink); text-decoration: underline; text-decoration-color: var(--brand-300); text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 2px; transition: text-decoration-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.oe-link:hover { text-decoration-color: currentColor; }
.oe-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.oe-link--arrow { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; }
.oe-link__arrow { width: 16px; height: 16px; flex: none; transition: transform var(--duration-fast) var(--ease-standard); }
.oe-link--arrow:hover .oe-link__arrow { transform: translateX(3px); }
.oe-link--nav { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-xs); color: var(--ink-700); font: 500 14px/20px var(--font-sans); text-decoration: none; }
.oe-link--nav:hover { color: var(--ink-900); background: var(--bg-beige); }
.oe-link--nav[aria-current="page"] { color: var(--ink-900); box-shadow: inset 0 -2px 0 var(--action); border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.oe-on-dark .oe-link { color: var(--brand-100); text-decoration-color: #ffffff66; }

/* ---------- Navbar + mega menu ---------- */
.oe-nav { position: sticky; top: var(--space-3); z-index: 50; display: flex; align-items: center; gap: var(--space-6); height: var(--nav-height); width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-2) 0 var(--space-4); background: var(--glass-surface-strong, rgba(255, 255, 255, .88)); -webkit-backdrop-filter: blur(var(--blur-glass-strong, 24px)) saturate(140%); backdrop-filter: blur(var(--blur-glass-strong, 24px)) saturate(140%); border: 1px solid var(--border-100); border-radius: var(--radius-lg); transition: box-shadow var(--duration-base) var(--ease-standard); }
.oe-nav.is-scrolled { box-shadow: var(--shadow-sm); }
.oe-nav--pill { border-radius: var(--radius-full); padding-left: var(--space-5); }
.oe-nav__logo { display: flex; align-items: center; height: 20px; flex: none; color: var(--ink-900); }
.oe-nav__logo svg, .oe-nav__logo img { display: block; height: 20px; width: auto; }
.oe-nav__links { display: flex; align-items: center; gap: var(--space-1); margin: 0 auto 0 0; padding: 0; list-style: none; }
.oe-nav__actions { display: flex; align-items: center; gap: var(--space-2); }
.oe-nav__burger { display: none; }
.oe-nav__context { display: none; align-items: center; gap: var(--space-2); font: 500 13px/18px var(--font-sans); color: var(--ink-500); white-space: nowrap; }
.oe-nav.is-contextual .oe-nav__context { display: inline-flex; }
.oe-nav.is-contextual .oe-nav__links { display: none; }
.oe-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; display: grid; grid-template-columns: repeat(2, 240px) 220px; gap: var(--space-2); padding: var(--space-3); background: var(--bg-surface); border: 1px solid var(--border-100); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.oe-menu__item { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: inherit; }
.oe-menu__item:hover { background: var(--bg-beige); }
.oe-menu__icon { width: var(--icon-md); height: var(--icon-md); flex: none; color: var(--brand-ink); margin-top: 1px; }
.oe-menu__label { display: block; font: 500 14px/20px var(--font-sans); color: var(--ink-900); }
.oe-menu__desc { display: block; font: 400 13px/18px var(--font-sans); color: var(--ink-500); }
.oe-menu__visual { grid-row: 1 / span 3; grid-column: 3; background: var(--brand-100); border-radius: var(--radius-sm); padding: var(--space-3); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-1); color: var(--brand-ink); font: 500 13px/18px var(--font-sans); min-height: 160px; }
@media (max-width: 860px) {
  .oe-nav { gap: var(--space-3); }
  .oe-nav__links, .oe-nav__actions .oe-btn--tertiary { display: none; }
  .oe-nav__burger { display: inline-flex; }
}

/* ---------- Tabs (soulignés) ---------- */
.oe-tabs { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--border-100); }
.oe-tabs--scroll { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); padding: 0 24px; }
.oe-tabs--scroll::-webkit-scrollbar { display: none; }
.oe-tab { position: relative; flex: none; padding: var(--space-2) 0 10px; border: 0; background: none; font: 500 14px/20px var(--font-sans); color: var(--ink-500); cursor: pointer; white-space: nowrap; border-radius: var(--radius-xs) var(--radius-xs) 0 0; transition: color var(--duration-fast) var(--ease-standard); }
.oe-tab:hover { color: var(--ink-900); }
.oe-tab[aria-selected="true"] { color: var(--ink-900); }
.oe-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--action); border-radius: 1px; }
.oe-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.oe-tabpanel { padding-top: var(--space-4); }
.oe-tabpanel[hidden] { display: none; }

/* ---------- Segmented (registre app) ---------- */
.oe-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--border-100); border-radius: var(--radius-md); }
.oe-seg__btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; font: 500 13px/18px var(--font-sans); color: var(--ink-700); cursor: pointer; white-space: nowrap; transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); }
.oe-seg__btn:hover { color: var(--ink-900); }
.oe-seg__btn[aria-pressed="true"] { background: var(--bg-surface); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.oe-seg__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.oe-seg__btn:disabled { opacity: .5; pointer-events: none; }
.oe-seg--inverse .oe-seg__btn[aria-pressed="true"] { background: var(--ink-700); color: var(--ink-inverse); box-shadow: none; }
.oe-seg--sm .oe-seg__btn { height: 26px; padding: 0 10px; font-size: 12px; line-height: 16px; }
.oe-seg__btn .oe-badge { margin-left: 2px; }

/* ---------- Field ---------- */
.oe-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.oe-field__label { font: 500 14px/20px var(--font-sans); color: var(--ink-900); }
.oe-field__opt { color: var(--ink-500); font-weight: 400; }
.oe-input, .oe-select, .oe-textarea { width: 100%; height: var(--control-md); padding: 0 var(--space-3); border: 1px solid var(--border-100); border-radius: var(--radius-sm); background: var(--bg-surface); font: 400 15px/24px var(--font-sans); color: var(--ink-900); -webkit-appearance: none; appearance: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.oe-input::placeholder, .oe-textarea::placeholder { color: var(--ink-500); opacity: 1; }
.oe-input:hover, .oe-select:hover, .oe-textarea:hover { border-color: var(--border-strong); }
.oe-input:focus, .oe-select:focus, .oe-textarea:focus { outline: none; border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-100); }
.oe-input:disabled, .oe-select:disabled, .oe-textarea:disabled { background: var(--bg-page); color: var(--ink-500); cursor: not-allowed; }
.oe-input--sm, .oe-select--sm { height: var(--control-sm); font-size: 13px; line-height: 18px; }
.oe-input--lg { height: var(--control-lg); padding: 0 var(--space-4); }
.oe-select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236e6a63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.oe-textarea { height: auto; min-height: 96px; padding: 10px var(--space-3); resize: vertical; }
.oe-field__help { font: 400 13px/20px var(--font-sans); color: var(--ink-500); }
.oe-field.is-error .oe-input, .oe-field.is-error .oe-select, .oe-field.is-error .oe-textarea { border-color: var(--action); }
.oe-field__error { display: flex; align-items: flex-start; gap: 6px; font: 400 13px/20px var(--font-sans); color: var(--ink-700); }
.oe-field__error::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: var(--radius-full); background: var(--action); }
.oe-input-group { display: flex; gap: var(--space-2); align-items: flex-end; }
.oe-input-group .oe-field { flex: 1; }
.oe-form { display: grid; gap: var(--space-4); }
.oe-form--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oe-form__full { grid-column: 1 / -1; }
.oe-dropzone { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px dashed var(--action); border-radius: var(--radius-md); background: var(--action-tint); color: var(--ink-700); font: 400 13px/18px var(--font-sans); }
.oe-dropzone strong { display: block; font: 600 14px/20px var(--font-sans); color: var(--ink-900); }

/* ---------- Checkbox / Radio ---------- */
.oe-check { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 14px/20px var(--font-sans); color: var(--ink-900); cursor: pointer; }
.oe-check__box { -webkit-appearance: none; appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--bg-surface); display: inline-grid; place-content: center; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.oe-check__box::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--duration-fast) var(--ease-standard); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.2l2.2 2.2L8 3'/%3E%3C/svg%3E") center / contain no-repeat; }
.oe-check__box:checked { background: var(--action); border-color: var(--action); }
.oe-check__box:checked::before { transform: scale(1); }
.oe-check__box:hover { border-color: var(--ink-900); }
.oe-check__box:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.oe-check__box:disabled, .oe-check__box:disabled + * { opacity: .5; cursor: not-allowed; }
.oe-check__box[type="radio"] { border-radius: var(--radius-full); }
.oe-check__box[type="radio"]::before { width: 6px; height: 6px; border-radius: var(--radius-full); background: #fff; }
.oe-check--block { display: flex; align-items: flex-start; padding: var(--space-3); border: 1px solid var(--border-100); border-radius: var(--radius-sm); }
.oe-check--block:has(.oe-check__box:checked) { background: var(--action-tint); border-color: transparent; }
.oe-check__text { display: flex; flex-direction: column; }
.oe-check__hint { font: 400 13px/18px var(--font-sans); color: var(--ink-500); }

/* ---------- Badge, points, compteur ---------- */
.oe-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-xs); font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.oe-badge--valid { background: var(--status-valid-tint); color: var(--status-valid-ink); }
.oe-badge--progress { background: var(--status-progress-tint); color: var(--status-progress-ink); }
.oe-badge--pending { background: var(--bg-page); color: var(--ink-700); border-color: var(--border-100); }
.oe-badge--attention { background: var(--action-tint); color: var(--ink-700); }
.oe-badge--brand { background: var(--brand-100); color: var(--brand-ink); }
.oe-badge--outline { background: transparent; color: var(--ink-700); border-color: var(--border-100); }
.oe-badge--caps { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.oe-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.oe-badge--valid .oe-badge__dot { background: var(--status-valid); }
.oe-badge--progress .oe-badge__dot { background: var(--status-progress); }
.oe-badge--pending .oe-badge__dot { background: var(--status-pending); }
.oe-badge--attention .oe-badge__dot { background: var(--action); }
.oe-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); flex: none; vertical-align: middle; }
.oe-dot--valid { background: var(--status-valid); } .oe-dot--progress { background: var(--status-progress); } .oe-dot--pending { background: var(--status-pending); } .oe-dot--action { background: var(--action); }
.oe-count { display: inline-grid; place-content: center; min-width: 18px; height: 18px; padding: 0 5px; border: 1px solid var(--border-100); border-radius: var(--radius-full); background: var(--bg-page); font: 600 11px/1 var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* ---------- Chip ---------- */
.oe-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border-100); border-radius: var(--radius-sm); background: var(--bg-surface); font: 500 13px/18px var(--font-sans); color: var(--ink-900); cursor: pointer; white-space: nowrap; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.oe-chip:hover { border-color: var(--border-strong); }
.oe-chip[aria-pressed="true"], .oe-chip.is-selected { border-color: var(--ink-900); background: var(--bg-beige); }
.oe-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.oe-chip--action { background: var(--action); border-color: var(--action); color: var(--ink-inverse); font-weight: 600; }
.oe-chip--static { cursor: default; }
.oe-chip__icon { width: 14px; height: 14px; flex: none; }
.oe-chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- LotBadge / marqueurs de lot ---------- */
.oe-lot { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-900); white-space: nowrap; }
.oe-lot__name { overflow: hidden; text-overflow: ellipsis; }
.oe-lot__mark { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--lot-color, var(--lot-1)); }
.oe-lot--sub .oe-lot__mark { width: 10px; height: 10px; background: var(--lot-tint, var(--lot-1-tint)); box-shadow: inset 0 0 0 1.5px var(--lot-color, var(--lot-1)); }
.oe-lot__code { color: var(--ink-500); }
.oe-lot__count { font: 500 12px/16px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-500); }
.oe-lot--1 { --lot-color: var(--lot-1); --lot-tint: var(--lot-1-tint); }
.oe-lot--2 { --lot-color: var(--lot-2); --lot-tint: var(--lot-2-tint); }
.oe-lot--3 { --lot-color: var(--lot-3); --lot-tint: var(--lot-3-tint); }
.oe-lot--4 { --lot-color: var(--lot-4); --lot-tint: var(--lot-4-tint); }
.oe-lot--5 { --lot-color: var(--lot-5); --lot-tint: var(--lot-5-tint); }
.oe-lot--6 { --lot-color: var(--lot-6); --lot-tint: var(--lot-6-tint); }
.oe-lot-rule { box-shadow: inset 3px 0 0 var(--lot-color, var(--lot-1)); }
.oe-lot-swatch { display: inline-block; width: 16px; height: 16px; border-radius: var(--radius-xs); background: var(--lot-color); }

/* ---------- DataTable ---------- */
.oe-table-wrap { border: 1px solid var(--border-100); border-radius: var(--radius-md); background: var(--bg-surface); overflow: auto; }
.oe-table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-sans); color: var(--ink-900); }
.oe-table th { padding: 10px var(--space-3); text-align: left; background: var(--bg-beige); border-bottom: 1px solid var(--border-100); font: 500 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }
.oe-table td { padding: 10px var(--space-3); border-bottom: 1px solid var(--border-100); vertical-align: middle; }
.oe-table tbody tr:last-child td { border-bottom: 0; }
.oe-table .is-num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.oe-table .is-total { font-weight: 600; }
.oe-table .is-muted { color: var(--ink-500); }
.oe-table td:first-child, .oe-table th:first-child { box-shadow: inset 3px 0 0 var(--lot-color, transparent); }
.oe-table__lot td { font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
.oe-table__sublot td { font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
.oe-table__sublot td:first-child { padding-left: 32px; }
.oe-table__task td:first-child { padding-left: 52px; }
.oe-table__task:hover td { background: var(--bg-beige); }
.oe-table__cell { display: inline-flex; align-items: center; gap: var(--space-2); }
.oe-table--dense th { padding: 6px 10px; }
.oe-table--dense td { padding: 6px 10px; font-size: 13px; line-height: 18px; }
.oe-table__foot td { background: var(--bg-beige); font-weight: 600; border-top: 1px solid var(--border-100); }

/* ---------- Progress ---------- */
.oe-progress { display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
.oe-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font: 500 13px/18px var(--font-sans); color: var(--ink-500); }
.oe-progress__value { font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.oe-progress__track { height: 6px; border-radius: var(--radius-full); background: var(--brand-100); overflow: hidden; }
.oe-progress__bar { height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--brand-300); transition: width var(--duration-slow) var(--ease-standard); }
.oe-progress--thin .oe-progress__track { height: 4px; }

/* ---------- Stat / lignes clé-valeur ---------- */
.oe-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.oe-stat__label { font: 500 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.oe-stat__value { display: flex; align-items: baseline; gap: 6px; font: 600 24px/28px var(--font-sans); letter-spacing: -.01em; color: var(--ink-900); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.oe-stat__unit { font: 500 12px/16px var(--font-sans); letter-spacing: .04em; color: var(--ink-500); }
.oe-stat__sub { font: 400 13px/20px var(--font-sans); color: var(--ink-500); }
.oe-stat--xl .oe-stat__value { font-size: 40px; line-height: 44px; letter-spacing: -.02em; }
.oe-stat--valid .oe-stat__value { color: var(--status-valid-ink); }
.oe-stat--progress .oe-stat__value { color: var(--status-progress-ink); }
.oe-stat--action .oe-stat__value { color: var(--action-ink); }
.oe-kv--due .oe-kv__value { color: var(--action-ink); }
.oe-stat-row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.oe-kv { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: 10px 0; border-top: 1px solid var(--border-100); font: 400 14px/20px var(--font-sans); color: var(--ink-700); }
.oe-kv__value { font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.oe-kv--total { font-weight: 600; color: var(--ink-900); font-size: 15px; }
.oe-kv--total .oe-kv__value { font-size: 18px; line-height: 24px; }
.oe-kv--valid .oe-kv__value { color: var(--status-valid-ink); }
.oe-kv--progress .oe-kv__value { color: var(--status-progress-ink); }

/* ---------- Card ---------- */
.oe-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--bg-surface); border: 1px solid var(--border-100); border-radius: var(--radius-md); color: var(--ink-900); text-decoration: none; }
.oe-card--brand { background: var(--brand-100); border-color: transparent; }
.oe-card--beige { background: var(--bg-beige); border-color: transparent; }
.oe-card--interactive { transition: border-color var(--duration-fast) var(--ease-standard); cursor: pointer; }
.oe-card--interactive:hover { border-color: var(--border-strong); }
.oe-card--interactive:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.oe-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.oe-card__label { font: 500 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.oe-card__title { margin: 0; font: 600 22px/28px var(--font-sans); letter-spacing: -.01em; color: var(--ink-900); }
.oe-card--project .oe-card__title { font-size: 16px; line-height: 22px; letter-spacing: 0; }
.oe-card__desc { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-card__text { margin: 0; font: 400 14px/22px var(--font-sans); color: var(--ink-700); }
.oe-card__meta { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font: 400 13px/20px var(--font-sans); color: var(--ink-700); }
.oe-card__meta li { display: flex; align-items: center; gap: var(--space-2); }
.oe-card__meta svg { width: 14px; height: 14px; flex: none; color: var(--ink-500); }
.oe-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font: 400 15px/22px var(--font-sans); color: var(--ink-500); }
.oe-card__amount { font: 600 15px/22px var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.oe-card__foot { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-1); }
.oe-card__icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--brand-ink); }
.oe-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); }

/* ---------- PricingCard ---------- */
.oe-pricing { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border-100); border-radius: var(--radius-md); color: var(--ink-900); }
.oe-pricing--featured { background: var(--brand-100); border-color: transparent; }
.oe-pricing__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.oe-pricing__name { margin: 0; font: 600 18px/24px var(--font-sans); }
.oe-pricing__tag { margin: 2px 0 0; font: 400 13px/20px var(--font-sans); color: var(--ink-500); }
.oe-pricing--featured .oe-pricing__tag { color: var(--ink-700); }
.oe-pricing__price { display: flex; align-items: baseline; gap: 6px; }
.oe-pricing__amount { font: 600 40px/44px var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.oe-pricing__unit { font: 500 13px/18px var(--font-sans); color: var(--ink-500); }
.oe-pricing--featured .oe-pricing__unit { color: var(--ink-700); }
.oe-pricing__note { margin: -10px 0 0; font: 400 12px/16px var(--font-sans); color: var(--ink-500); }
.oe-pricing--featured .oe-pricing__note { color: var(--ink-700); }
.oe-pricing__list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: 400 14px/20px var(--font-sans); color: var(--ink-700); }
.oe-pricing__list li { display: flex; align-items: flex-start; gap: var(--space-2); }
.oe-pricing__check { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--brand-ink); }
.oe-pricing__cta { margin-top: auto; padding-top: var(--space-2); }
.oe-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); align-items: stretch; }
.oe-pricing-toggle { display: flex; align-items: center; gap: var(--space-3); }

/* ---------- Notice / Toast ---------- */
.oe-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-beige); border: 1px solid transparent; border-radius: var(--radius-md); font: 400 14px/20px var(--font-sans); color: var(--ink-700); }
.oe-notice__icon { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--ink-500); }
.oe-notice__body { min-width: 0; }
.oe-notice__title { display: block; font-weight: 600; color: var(--ink-900); }
.oe-notice__actions { margin-left: auto; display: flex; gap: var(--space-2); flex: none; }
.oe-notice--info { background: var(--action-tint); border-color: color-mix(in srgb, var(--action) 24%, transparent); }
.oe-notice--info .oe-notice__icon { color: var(--action); }
.oe-notice--success { background: var(--status-valid-tint); border-color: color-mix(in srgb, var(--status-valid) 32%, transparent); }
.oe-notice--success .oe-notice__icon { color: var(--status-valid-ink); }
.oe-notice--warning { background: var(--status-progress-tint); border-color: color-mix(in srgb, var(--status-progress) 40%, transparent); }
.oe-notice--warning .oe-notice__icon { color: var(--status-progress-ink); }
.oe-notice--toast { display: inline-flex; align-items: center; padding: 10px var(--space-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.oe-notice--toast .oe-notice__icon { width: var(--icon-sm); height: var(--icon-sm); }

/* ---------- Checklist ---------- */
.oe-checklist { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-100); border-radius: var(--radius-md); overflow: hidden; }
.oe-checklist__head { display: flex; align-items: center; gap: var(--space-2); padding: 8px var(--space-3); background: var(--bg-beige); border-bottom: 1px solid var(--border-100); font: 500 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.oe-checklist__head .oe-btn { margin-left: auto; }
.oe-checklist__item { display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border-bottom: 1px solid var(--border-100); font: 400 14px/20px var(--font-sans); color: var(--ink-900); }
.oe-checklist__item:last-child { border-bottom: 0; }
.oe-checklist__item.is-done { color: var(--ink-500); }
.oe-checklist__grip { flex: none; width: 8px; height: 14px; color: var(--border-100); background: radial-gradient(circle, currentColor 1.2px, transparent 1.4px) 0 0 / 4px 4px; }
.oe-checklist__item:hover .oe-checklist__grip { color: var(--border-strong); }
.oe-checklist__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-checklist__meta { flex: none; font: 400 12px/16px var(--font-sans); color: var(--ink-500); font-variant-numeric: tabular-nums; }

/* ---------- Matières : calque (verre), lavis (dégradés), papier (grain), motif Œ ---------- */
/* Calque : un panneau translucide posé sur une matière (lavis, photo, cadre). Le texte reste ink-900 / ink-700. */
.oe-glass { position: relative; background: var(--glass-surface); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%); backdrop-filter: blur(var(--blur-glass)) saturate(140%); border: 1px solid var(--glass-border); border-radius: var(--radius-md); box-shadow: inset 0 1px 0 #ffffff99, 0 1px 2px #1e1d1b0a; color: var(--ink-900); }
.oe-glass--strong { background: var(--glass-surface-strong); -webkit-backdrop-filter: blur(var(--blur-glass-strong)) saturate(140%); backdrop-filter: blur(var(--blur-glass-strong)) saturate(140%); }
.oe-glass--dark { background: var(--glass-dark); border-color: #ffffff33; box-shadow: inset 0 1px 0 #ffffff29; color: var(--ink-inverse); }
.oe-glass--lg { border-radius: var(--radius-lg); }
.oe-glass--xl { border-radius: var(--radius-xl); }
.oe-glass .oe-muted { color: var(--ink-700); }
.oe-glass--dark .oe-muted { color: var(--brand-100); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .oe-glass { background: var(--bg-surface); }
  .oe-glass--dark { background: var(--ink-900); }
}
/* Lavis : un dégradé entre deux couleurs 3a voisines, jamais plus. */
.oe-gradient--parme { background: var(--gradient-parme); }
.oe-gradient--brand { background: var(--gradient-brand); }
.oe-gradient--vermillon { background: var(--gradient-vermillon); color: var(--ink-inverse); }
.oe-gradient--glow { position: relative; isolation: isolate; }
.oe-gradient--glow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gradient-glow); border-radius: inherit; pointer-events: none; }
/* Papier : un grain fin (bruit SVG) posé par-dessus la matière, en multiply sur clair, en screen sur sombre. */
.oe-grain { position: relative; isolation: isolate; }
.oe-grain::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: var(--grain-opacity); mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%'%20height='100%'%20filter='url%28%23g%29'/%3E%3C/svg%3E"); background-size: 160px 160px; }
.oe-grain--strong::after { opacity: var(--grain-opacity-strong); mix-blend-mode: screen; }
.oe-grain > * { position: relative; z-index: 1; }
/* Motif Œ : le monogramme (favicon) très grossi, ou tuilé, en fond de rubrique. Toujours PLUS CLAIR que le fond : --motif-color défaut bg-surface (blanc) sur lavis parme, brand-100 sur lavis brand (--ink) ; taille par --motif-size. */
.oe-motif { position: relative; isolation: isolate; overflow: hidden; }
.oe-motif::before { content: ""; position: absolute; z-index: 0; pointer-events: none; background: var(--motif-color, var(--bg-surface)); opacity: var(--motif-opacity); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='4%2010%2042%2030'%3E%3Cpath%20d='M%2019.457%2036.007%20C%2020.933%2036.007%2022.308%2035.734%2023.578%2035.191%20C%2024.843%2034.648%2025.953%2033.890%2026.898%2032.917%20C%2027.843%2031.949%2028.574%2030.808%2029.093%2029.5%20C%2029.613%2028.191%2029.871%2026.761%2029.871%2025.207%20C%2029.871%2023.652%2029.613%2022.218%2029.093%2020.914%20C%2028.574%2019.605%2027.843%2018.464%2026.898%2017.492%20C%2025.953%2016.523%2024.843%2015.765%2023.578%2015.218%20C%2022.308%2014.675%2020.933%2014.406%2019.457%2014.406%20C%2017.953%2014.406%2016.570%2014.675%2015.300%2015.218%20C%2014.031%2015.765%2012.929%2016.523%2011.996%2017.492%20C%2011.066%2018.464%2010.339%2019.605%209.820%2020.914%20C%209.304%2022.218%209.042%2023.652%209.042%2025.207%20C%209.042%2026.761%209.304%2028.191%209.820%2029.5%20C%2010.339%2030.808%2011.066%2031.949%2011.996%2032.917%20C%2012.929%2033.890%2014.031%2034.648%2015.300%2035.191%20C%2016.570%2035.734%2017.953%2036.007%2019.457%2036.007%20M%2019.457%2039.273%20C%2017.308%2039.273%2015.363%2038.910%2013.628%2038.183%20C%2011.894%2037.460%2010.410%2036.449%209.179%2035.152%20C%207.949%2033.859%206.996%2032.363%206.324%2030.664%20C%205.648%2028.968%205.316%2027.148%205.316%2025.207%20C%205.316%2023.261%205.648%2021.445%206.324%2019.746%20C%206.996%2018.050%207.949%2016.554%209.179%2015.257%20C%2010.410%2013.964%2011.894%2012.953%2013.628%2012.230%20C%2015.363%2011.503%2017.308%2011.140%2019.457%2011.140%20C%2021.347%2011.140%2023.082%2011.445%2024.664%2012.054%20C%2026.242%2012.664%2027.628%2013.496%2028.820%2014.558%20C%2029.468%2013.652%2030.277%2012.933%2031.25%2012.402%20C%2032.222%2011.871%2033.25%2011.605%2034.339%2011.605%20L%2045.101%2011.605%20L%2045.101%2014.910%20L%2034.765%2014.910%20C%2033.988%2014.910%2033.257%2015.105%2032.570%2015.492%20C%2031.882%2015.878%2031.359%2016.414%2030.996%2017.085%20C%2032.292%2018.871%2033.070%2020.945%2033.328%2023.300%20L%2043.703%2023.300%20L%2043.703%2026.605%20L%2033.367%2026.605%20C%2033.289%2027.875%2033.050%2029.085%2032.648%2030.238%20C%2032.246%2031.390%2031.699%2032.433%2030.996%2033.367%20C%2031.359%2033.988%2031.878%2034.5%2032.550%2034.898%20C%2033.226%2035.300%2034.027%2035.503%2034.960%2035.503%20L%2045.101%2035.503%20L%2045.101%2038.804%20L%2034.457%2038.804%20C%2033.238%2038.804%2032.156%2038.539%2031.210%2038.007%20C%2030.265%2037.476%2029.457%2036.773%2028.781%2035.890%20C%2027.589%2036.953%2026.210%2037.781%2024.644%2038.378%20C%2023.078%2038.972%2021.347%2039.273%2019.457%2039.273'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='4%2010%2042%2030'%3E%3Cpath%20d='M%2019.457%2036.007%20C%2020.933%2036.007%2022.308%2035.734%2023.578%2035.191%20C%2024.843%2034.648%2025.953%2033.890%2026.898%2032.917%20C%2027.843%2031.949%2028.574%2030.808%2029.093%2029.5%20C%2029.613%2028.191%2029.871%2026.761%2029.871%2025.207%20C%2029.871%2023.652%2029.613%2022.218%2029.093%2020.914%20C%2028.574%2019.605%2027.843%2018.464%2026.898%2017.492%20C%2025.953%2016.523%2024.843%2015.765%2023.578%2015.218%20C%2022.308%2014.675%2020.933%2014.406%2019.457%2014.406%20C%2017.953%2014.406%2016.570%2014.675%2015.300%2015.218%20C%2014.031%2015.765%2012.929%2016.523%2011.996%2017.492%20C%2011.066%2018.464%2010.339%2019.605%209.820%2020.914%20C%209.304%2022.218%209.042%2023.652%209.042%2025.207%20C%209.042%2026.761%209.304%2028.191%209.820%2029.5%20C%2010.339%2030.808%2011.066%2031.949%2011.996%2032.917%20C%2012.929%2033.890%2014.031%2034.648%2015.300%2035.191%20C%2016.570%2035.734%2017.953%2036.007%2019.457%2036.007%20M%2019.457%2039.273%20C%2017.308%2039.273%2015.363%2038.910%2013.628%2038.183%20C%2011.894%2037.460%2010.410%2036.449%209.179%2035.152%20C%207.949%2033.859%206.996%2032.363%206.324%2030.664%20C%205.648%2028.968%205.316%2027.148%205.316%2025.207%20C%205.316%2023.261%205.648%2021.445%206.324%2019.746%20C%206.996%2018.050%207.949%2016.554%209.179%2015.257%20C%2010.410%2013.964%2011.894%2012.953%2013.628%2012.230%20C%2015.363%2011.503%2017.308%2011.140%2019.457%2011.140%20C%2021.347%2011.140%2023.082%2011.445%2024.664%2012.054%20C%2026.242%2012.664%2027.628%2013.496%2028.820%2014.558%20C%2029.468%2013.652%2030.277%2012.933%2031.25%2012.402%20C%2032.222%2011.871%2033.25%2011.605%2034.339%2011.605%20L%2045.101%2011.605%20L%2045.101%2014.910%20L%2034.765%2014.910%20C%2033.988%2014.910%2033.257%2015.105%2032.570%2015.492%20C%2031.882%2015.878%2031.359%2016.414%2030.996%2017.085%20C%2032.292%2018.871%2033.070%2020.945%2033.328%2023.300%20L%2043.703%2023.300%20L%2043.703%2026.605%20L%2033.367%2026.605%20C%2033.289%2027.875%2033.050%2029.085%2032.648%2030.238%20C%2032.246%2031.390%2031.699%2032.433%2030.996%2033.367%20C%2031.359%2033.988%2031.878%2034.5%2032.550%2034.898%20C%2033.226%2035.300%2034.027%2035.503%2034.960%2035.503%20L%2045.101%2035.503%20L%2045.101%2038.804%20L%2034.457%2038.804%20C%2033.238%2038.804%2032.156%2038.539%2031.210%2038.007%20C%2030.265%2037.476%2029.457%2036.773%2028.781%2035.890%20C%2027.589%2036.953%2026.210%2037.781%2024.644%2038.378%20C%2023.078%2038.972%2021.347%2039.273%2019.457%2039.273'/%3E%3C/svg%3E") no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; width: var(--motif-size, 720px); height: calc(var(--motif-size, 720px) * 30 / 42); right: var(--motif-x, -12%); top: var(--motif-y, 50%); transform: translateY(-50%); }
.oe-motif--left::before { right: auto; left: var(--motif-x, -12%); }
.oe-motif--bottom::before { top: auto; bottom: var(--motif-y, -18%); transform: none; }
.oe-motif--tile::before { inset: 0; width: auto; height: auto; transform: none; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='4%2010%2042%2030'%3E%3Cpath%20d='M%2019.457%2036.007%20C%2020.933%2036.007%2022.308%2035.734%2023.578%2035.191%20C%2024.843%2034.648%2025.953%2033.890%2026.898%2032.917%20C%2027.843%2031.949%2028.574%2030.808%2029.093%2029.5%20C%2029.613%2028.191%2029.871%2026.761%2029.871%2025.207%20C%2029.871%2023.652%2029.613%2022.218%2029.093%2020.914%20C%2028.574%2019.605%2027.843%2018.464%2026.898%2017.492%20C%2025.953%2016.523%2024.843%2015.765%2023.578%2015.218%20C%2022.308%2014.675%2020.933%2014.406%2019.457%2014.406%20C%2017.953%2014.406%2016.570%2014.675%2015.300%2015.218%20C%2014.031%2015.765%2012.929%2016.523%2011.996%2017.492%20C%2011.066%2018.464%2010.339%2019.605%209.820%2020.914%20C%209.304%2022.218%209.042%2023.652%209.042%2025.207%20C%209.042%2026.761%209.304%2028.191%209.820%2029.5%20C%2010.339%2030.808%2011.066%2031.949%2011.996%2032.917%20C%2012.929%2033.890%2014.031%2034.648%2015.300%2035.191%20C%2016.570%2035.734%2017.953%2036.007%2019.457%2036.007%20M%2019.457%2039.273%20C%2017.308%2039.273%2015.363%2038.910%2013.628%2038.183%20C%2011.894%2037.460%2010.410%2036.449%209.179%2035.152%20C%207.949%2033.859%206.996%2032.363%206.324%2030.664%20C%205.648%2028.968%205.316%2027.148%205.316%2025.207%20C%205.316%2023.261%205.648%2021.445%206.324%2019.746%20C%206.996%2018.050%207.949%2016.554%209.179%2015.257%20C%2010.410%2013.964%2011.894%2012.953%2013.628%2012.230%20C%2015.363%2011.503%2017.308%2011.140%2019.457%2011.140%20C%2021.347%2011.140%2023.082%2011.445%2024.664%2012.054%20C%2026.242%2012.664%2027.628%2013.496%2028.820%2014.558%20C%2029.468%2013.652%2030.277%2012.933%2031.25%2012.402%20C%2032.222%2011.871%2033.25%2011.605%2034.339%2011.605%20L%2045.101%2011.605%20L%2045.101%2014.910%20L%2034.765%2014.910%20C%2033.988%2014.910%2033.257%2015.105%2032.570%2015.492%20C%2031.882%2015.878%2031.359%2016.414%2030.996%2017.085%20C%2032.292%2018.871%2033.070%2020.945%2033.328%2023.300%20L%2043.703%2023.300%20L%2043.703%2026.605%20L%2033.367%2026.605%20C%2033.289%2027.875%2033.050%2029.085%2032.648%2030.238%20C%2032.246%2031.390%2031.699%2032.433%2030.996%2033.367%20C%2031.359%2033.988%2031.878%2034.5%2032.550%2034.898%20C%2033.226%2035.300%2034.027%2035.503%2034.960%2035.503%20L%2045.101%2035.503%20L%2045.101%2038.804%20L%2034.457%2038.804%20C%2033.238%2038.804%2032.156%2038.539%2031.210%2038.007%20C%2030.265%2037.476%2029.457%2036.773%2028.781%2035.890%20C%2027.589%2036.953%2026.210%2037.781%2024.644%2038.378%20C%2023.078%2038.972%2021.347%2039.273%2019.457%2039.273'/%3E%3C/svg%3E") repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='4%2010%2042%2030'%3E%3Cpath%20d='M%2019.457%2036.007%20C%2020.933%2036.007%2022.308%2035.734%2023.578%2035.191%20C%2024.843%2034.648%2025.953%2033.890%2026.898%2032.917%20C%2027.843%2031.949%2028.574%2030.808%2029.093%2029.5%20C%2029.613%2028.191%2029.871%2026.761%2029.871%2025.207%20C%2029.871%2023.652%2029.613%2022.218%2029.093%2020.914%20C%2028.574%2019.605%2027.843%2018.464%2026.898%2017.492%20C%2025.953%2016.523%2024.843%2015.765%2023.578%2015.218%20C%2022.308%2014.675%2020.933%2014.406%2019.457%2014.406%20C%2017.953%2014.406%2016.570%2014.675%2015.300%2015.218%20C%2014.031%2015.765%2012.929%2016.523%2011.996%2017.492%20C%2011.066%2018.464%2010.339%2019.605%209.820%2020.914%20C%209.304%2022.218%209.042%2023.652%209.042%2025.207%20C%209.042%2026.761%209.304%2028.191%209.820%2029.5%20C%2010.339%2030.808%2011.066%2031.949%2011.996%2032.917%20C%2012.929%2033.890%2014.031%2034.648%2015.300%2035.191%20C%2016.570%2035.734%2017.953%2036.007%2019.457%2036.007%20M%2019.457%2039.273%20C%2017.308%2039.273%2015.363%2038.910%2013.628%2038.183%20C%2011.894%2037.460%2010.410%2036.449%209.179%2035.152%20C%207.949%2033.859%206.996%2032.363%206.324%2030.664%20C%205.648%2028.968%205.316%2027.148%205.316%2025.207%20C%205.316%2023.261%205.648%2021.445%206.324%2019.746%20C%206.996%2018.050%207.949%2016.554%209.179%2015.257%20C%2010.410%2013.964%2011.894%2012.953%2013.628%2012.230%20C%2015.363%2011.503%2017.308%2011.140%2019.457%2011.140%20C%2021.347%2011.140%2023.082%2011.445%2024.664%2012.054%20C%2026.242%2012.664%2027.628%2013.496%2028.820%2014.558%20C%2029.468%2013.652%2030.277%2012.933%2031.25%2012.402%20C%2032.222%2011.871%2033.25%2011.605%2034.339%2011.605%20L%2045.101%2011.605%20L%2045.101%2014.910%20L%2034.765%2014.910%20C%2033.988%2014.910%2033.257%2015.105%2032.570%2015.492%20C%2031.882%2015.878%2031.359%2016.414%2030.996%2017.085%20C%2032.292%2018.871%2033.070%2020.945%2033.328%2023.300%20L%2043.703%2023.300%20L%2043.703%2026.605%20L%2033.367%2026.605%20C%2033.289%2027.875%2033.050%2029.085%2032.648%2030.238%20C%2032.246%2031.390%2031.699%2032.433%2030.996%2033.367%20C%2031.359%2033.988%2031.878%2034.5%2032.550%2034.898%20C%2033.226%2035.300%2034.027%2035.503%2034.960%2035.503%20L%2045.101%2035.503%20L%2045.101%2038.804%20L%2034.457%2038.804%20C%2033.238%2038.804%2032.156%2038.539%2031.210%2038.007%20C%2030.265%2037.476%2029.457%2036.773%2028.781%2035.890%20C%2027.589%2036.953%2026.210%2037.781%2024.644%2038.378%20C%2023.078%2038.972%2021.347%2039.273%2019.457%2039.273'/%3E%3C/svg%3E") repeat; -webkit-mask-size: var(--motif-size, 96px) auto; mask-size: var(--motif-size, 96px) auto; -webkit-mask-position: var(--space-4) var(--space-4); mask-position: var(--space-4) var(--space-4); opacity: calc(var(--motif-opacity) * .45); }
.oe-motif--ink::before { background: var(--brand-100); }
/* Plan : sur une photo assombrie, le Œ ne tient pas ; la matière devient une grille de calque au pas des rangées (space-8), trait fort toutes les 4 cases (space-32), en brand-100 — les traits 1 px des schémas. */
.oe-motif--plan::before { inset: 0; width: auto; height: auto; transform: none; -webkit-mask: none; mask: none; background: none; opacity: 1;
  background-image: repeating-linear-gradient(90deg, var(--brand-100) 0 1px, #0000 1px var(--space-32)), repeating-linear-gradient(0deg, var(--brand-100) 0 1px, #0000 1px var(--space-32)),
    repeating-linear-gradient(90deg, var(--brand-100) 0 1px, #0000 1px var(--space-8)), repeating-linear-gradient(0deg, var(--brand-100) 0 1px, #0000 1px var(--space-8));
  background-position: var(--space-4) var(--space-4); opacity: calc(var(--motif-opacity) * .3); -webkit-mask: linear-gradient(120deg, #000 10%, #0002 100%); mask: linear-gradient(120deg, #000 10%, #0002 100%); }
.oe-motif--plan.oe-motif--ink::before { background-color: transparent; }
.oe-motif > * { position: relative; z-index: 1; }
@media (prefers-reduced-transparency: reduce) {
  .oe-glass { background: var(--bg-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .oe-glass--dark { background: var(--ink-900); }
}

/* ---------- FeatureFrame, fenêtre app, rail, superposition, schéma ---------- */
.oe-frame { position: relative; padding: var(--space-8); background: var(--brand-100); border-radius: var(--radius-xl); overflow: hidden; }
.oe-frame--beige { background: var(--bg-beige); }
.oe-frame--page { background: var(--bg-page); }
.oe-frame--tight { padding: var(--space-6); }
.oe-window { background: var(--bg-surface); border: 1px solid var(--border-100); border-radius: var(--radius-lg); overflow: hidden; font: 400 13px/18px var(--font-sans); color: var(--ink-900); }
.oe-window__bar { display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-100); }
.oe-window__title { font: 600 14px/20px var(--font-sans); white-space: nowrap; }
.oe-window__meta { font: 400 12px/16px var(--font-sans); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-window__bar .oe-seg, .oe-window__bar .oe-btn, .oe-window__bar .oe-badge { margin-left: auto; }
.oe-window__body { padding: var(--space-4); }
.oe-window--app { display: grid; grid-template-columns: 48px minmax(0, 1fr); }
.oe-window--app > .oe-window__main { min-width: 0; }
.oe-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3) 0; border-right: 1px solid var(--border-100); background: var(--bg-surface); }
.oe-rail__logo { width: 24px; height: 24px; margin-bottom: var(--space-2); }
.oe-rail__item { position: relative; display: grid; place-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--ink-500); }
.oe-rail__item.is-active { background: var(--bg-page); color: var(--ink-900); }
.oe-rail__item.is-active::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: var(--radius-full); background: var(--brand-ink); }
.oe-rail__item svg { width: 16px; height: 16px; }
.oe-stack { position: relative; }
.oe-stack__layer { position: relative; }
.oe-stack__layer--over { position: absolute; z-index: 2; box-shadow: var(--shadow-lg); }
.oe-schematic { background: var(--bg-beige); border-radius: var(--radius-lg); overflow: hidden; }
.oe-schematic svg { display: block; width: 100%; height: auto; }
.oe-schematic .s-line { fill: none; stroke: var(--ink-500); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.oe-schematic .s-face { fill: var(--bg-surface); stroke: var(--ink-500); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.oe-schematic .s-face--brand { fill: var(--brand-100); }
.oe-schematic .s-mark { fill: none; stroke: var(--brand-300); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.oe-schematic .s-dot { fill: var(--action); }
.oe-schematic .s-lot { stroke-width: 3; vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; }
.oe-schematic .s-text { font: 500 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-500); }
.oe-schematic .s-grid { fill: none; stroke: var(--border-100); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---------- MiniGantt ---------- */
.oe-gantt { --cols: 8; display: grid; grid-template-columns: 200px minmax(0, 1fr); background: var(--bg-surface); border: 1px solid var(--border-100); border-radius: var(--radius-md); overflow: hidden; font: 500 12px/16px var(--font-sans); color: var(--ink-900); }
.oe-gantt__side { border-right: 1px solid var(--border-100); min-width: 0; }
.oe-gantt__head { display: flex; align-items: center; height: 32px; padding: 0 var(--space-3); background: var(--bg-beige); border-bottom: 1px solid var(--border-100); font: 500 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.oe-gantt__row { display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); border-bottom: 1px solid var(--border-100); white-space: nowrap; overflow: hidden; }
.oe-gantt__side .oe-gantt__row:last-child, .oe-gantt__track:last-child { border-bottom: 0; }
.oe-gantt__row--task { padding-left: 32px; font: 400 13px/18px var(--font-sans); color: var(--ink-700); }
.oe-gantt__days { margin-left: auto; font: 400 12px/16px var(--font-sans); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.oe-gantt__grid { position: relative; min-width: 0; }
.oe-gantt__months { display: grid; grid-template-columns: repeat(var(--cols), 1fr); height: 32px; background: var(--bg-beige); border-bottom: 1px solid var(--border-100); }
.oe-gantt__month { display: flex; align-items: center; padding-left: var(--space-2); border-right: 1px solid var(--border-100); font: 500 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); overflow: hidden; }
.oe-gantt__month:last-child { border-right: 0; }
.oe-gantt__lines { position: absolute; inset: 32px 0 0 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); pointer-events: none; }
.oe-gantt__lines i { border-right: 1px solid var(--border-100); }
.oe-gantt__lines i:last-child { border-right: 0; }
.oe-gantt__track { position: relative; height: 32px; border-bottom: 1px solid var(--border-100); }
.oe-gantt__bar { position: absolute; top: 7px; left: var(--start, 0%); width: var(--len, 10%); height: 18px; display: block; padding: 0 6px; border-radius: var(--radius-xs); background: var(--lot-color, var(--lot-1)); font: 600 11px/18px var(--font-sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-gantt__bar--group { top: 11px; height: 10px; padding: 0; background: var(--lot-tint, var(--lot-1-tint)); }
.oe-gantt__today { position: absolute; top: 0; bottom: 0; left: var(--x, 0%); width: 12px; background: var(--action-tint); border-left: 1px dashed var(--action); pointer-events: none; }
.oe-gantt__marker { position: absolute; top: 0; bottom: 0; left: var(--x, 0%); width: 2px; background: var(--status-valid); pointer-events: none; }
.oe-gantt__marker--end { background: var(--status-progress); }
.oe-gantt__flag { position: absolute; top: 36px; left: var(--x, 0%); transform: translateX(-50%); padding: 1px 5px; border-radius: 3px; background: var(--status-valid); font: 600 10px/14px var(--font-sans); color: var(--ink-900); white-space: nowrap; }
.oe-gantt__flag--end { background: var(--status-progress); }

/* ---------- ImageFrame ---------- */
.oe-figure { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.oe-figure__wrap { position: relative; }
.oe-figure__media { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 4 / 3); object-fit: cover; background: var(--bg-beige); border-radius: var(--radius-lg); }
.oe-figure--xl .oe-figure__media { border-radius: var(--radius-xl); }
.oe-figure--square { --ratio: 1 / 1; }
.oe-figure--wide { --ratio: 16 / 9; }
.oe-figure--plate .oe-figure__wrap { padding: 0 var(--space-3) var(--space-3) 0; }
.oe-figure--plate .oe-figure__wrap::before { content: ""; position: absolute; z-index: 0; top: var(--space-3); left: var(--space-3); right: 0; bottom: 0; background: var(--brand-100); border-radius: var(--radius-lg); }
.oe-figure__caption { font: 400 13px/20px var(--font-sans); color: var(--ink-500); }
.oe-figure__badge { position: absolute; z-index: 2; top: var(--space-3); left: var(--space-3); }
.oe-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Footer (clair, sans filet ni strate) ---------- */
.oe-footer { position: relative; isolation: isolate; background: var(--bg-page); color: var(--ink-900); padding: var(--space-20) 0 var(--space-10); }
.oe-footer > .oe-container { position: relative; z-index: 1; }
.oe-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-10); }
.oe-footer__logo svg, .oe-footer__logo img { display: block; height: 28px; width: auto; }
.oe-footer__tag { margin: var(--space-4) 0 0; max-width: 320px; font: 400 14px/22px var(--font-sans); color: var(--ink-700); }
.oe-footer__title { margin: 0 0 var(--space-3); font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.oe-footer__links { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.oe-footer__links a { color: var(--ink-700); font: 400 14px/20px var(--font-sans); text-decoration: none; border-radius: 2px; transition: color var(--duration-fast) var(--ease-standard); }
.oe-footer__links a:hover { color: var(--ink-900); }
.oe-footer a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.oe-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-16); font: 400 12px/16px var(--font-sans); color: var(--ink-500); }
.oe-footer__bottom a { color: inherit; text-decoration: none; }
.oe-footer__bottom a:hover { color: var(--ink-900); }
.oe-curtain-page { position: relative; z-index: 1; background: var(--bg-page); margin-bottom: var(--curtain-height, 480px); }
.oe-footer--curtain { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
@media (max-width: 720px) {
  .oe-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .oe-footer__grid > :first-child { grid-column: 1 / -1; }
}