/* Osiacom — styles des composants. Toutes les valeurs viennent des tokens (tokens.json). */
body { margin: 0; font-family: var(--font-sans); background: var(--canvas); color: var(--ink); font-size: 16px; line-height: 24px; letter-spacing: 0.16px; -webkit-font-smoothing: antialiased; }
.oc-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; padding: var(--space-md); }
.oc-stack { display: grid; gap: var(--space-md); padding: var(--space-md); }
.oc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; padding: var(--space-md); }
.oc-grid > * + * { margin-left: -1px; }

.oc-eyebrow { margin: 0 0 var(--space-xs); font-size: 14px; line-height: 18px; font-weight: 500; letter-spacing: 0.16px; color: var(--ink-muted); }

/* Button — angles droits, 48px, libellé à gauche */
.oc-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-xl); min-height: var(--size-touch); padding: var(--space-sm) var(--space-md); border: 1px solid transparent; border-radius: var(--radius-none); font-family: inherit; font-size: 14px; line-height: 18px; font-weight: 500; letter-spacing: 0.16px; text-align: left; text-decoration: none; cursor: pointer; transition: background-color 110ms cubic-bezier(.2,0,.38,.9); }
.oc-btn--sm { min-height: var(--size-control-sm); padding-top: 10px; padding-bottom: 10px; }
.oc-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.oc-btn:disabled { background: var(--surface-2); color: var(--ink-subtle); border-color: var(--surface-2); cursor: not-allowed; }
.oc-btn--primary { background: var(--primary); color: var(--on-primary); }
.oc-btn--primary:hover:not(:disabled) { background: var(--primary-hover); }
.oc-btn--primary:active:not(:disabled) { background: var(--primary-pressed); }
.oc-btn--secondary { background: var(--ink); color: var(--canvas); }
.oc-btn--secondary:hover:not(:disabled) { background: var(--ink-muted); }
.oc-btn--tertiary { background: transparent; color: var(--primary); border-color: var(--primary); }
.oc-btn--tertiary:hover:not(:disabled) { background: var(--primary); color: var(--on-primary); }
.oc-btn--ghost { background: transparent; color: var(--primary); justify-content: flex-start; gap: var(--space-xs); }
.oc-btn--ghost:hover:not(:disabled) { background: var(--surface-1); }
.oc-btn--accent { background: var(--accent); color: var(--on-accent); }
.oc-btn--accent:hover:not(:disabled) { background: var(--accent-hover); }
.oc-btn--danger { background: var(--error); color: var(--on-error); }
.oc-btn--danger:hover:not(:disabled) { filter: brightness(0.92); }
.oc-chevron { flex: none; }

/* Tag — seule forme en pilule */
.oc-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.32px; background: var(--surface-2); color: var(--ink); }
.oc-tag--primary { background: var(--primary); color: var(--on-primary); }
.oc-tag--accent { background: var(--accent); color: var(--on-accent); }
.oc-tag--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }

/* Card — filet 1px, aucune ombre */
.oc-card { box-sizing: border-box; display: flex; flex-direction: column; min-height: 200px; padding: var(--space-lg); background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius-none); text-decoration: none; }
.oc-card--elevated { background: var(--surface-1); border-color: var(--surface-1); }
.oc-card--product { padding: var(--space-xl); min-height: 280px; }
.oc-card--resource { padding: var(--space-md); min-height: 160px; font-size: 14px; line-height: 18px; }
.oc-card--link { transition: background-color 110ms; }
.oc-card--link:hover { background: var(--surface-1); }
.oc-card--elevated.oc-card--link:hover { background: var(--surface-2); }
.oc-card--link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.oc-card__media { margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-lg); }
.oc-card__media img { display: block; width: 100%; }
.oc-card__title { margin: 0 0 var(--space-xs); font-size: 24px; line-height: 32px; font-weight: 700; }
.oc-card--resource .oc-card__title { font-size: 16px; line-height: 22px; }
.oc-card__body { color: var(--ink-muted); font-size: 14px; line-height: 18px; }
.oc-card__body p { margin: 0; }
.oc-card__action, .oc-card__arrow { margin-top: auto; padding-top: var(--space-lg); color: var(--primary); }

/* HeroCard */
.oc-hero { box-sizing: border-box; padding: var(--space-xxl); background: var(--canvas); color: var(--ink); }
.oc-hero__title { margin: 0; max-width: 18ch; font-size: 42px; line-height: 50px; font-weight: 700; letter-spacing: -0.6px; }
.oc-hero__lead { margin: var(--space-md) 0 0; max-width: 56ch; font-size: 18px; line-height: 27px; color: var(--ink-muted); }
.oc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xl); }

/* CtaBanner */
.oc-cta { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); padding: var(--space-xxl); background: var(--primary); color: var(--on-primary); }
.oc-cta__title { margin: 0; max-width: 22ch; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.3px; }
.oc-cta__body { margin: var(--space-xs) 0 0; max-width: 56ch; font-size: 16px; line-height: 24px; }

/* LogoTile */
.oc-logotile { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 120px; padding: var(--space-lg); background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-none); }
.oc-logotile img { max-width: 100%; max-height: 48px; object-fit: contain; }
.oc-logotile__name { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink-muted); }
.oc-logotile__label { font-size: 12px; line-height: 16px; letter-spacing: 0.32px; color: var(--ink-muted); }
/* Les logos (clients comme Osiacom) sont dessinés pour fond clair : en thème sombre la tuile reste une plaque brume. */
[data-theme="dark"] .oc-logotile { background: var(--brume); border-color: var(--brume); }
[data-theme="dark"] .oc-logotile__name, [data-theme="dark"] .oc-logotile__label { color: var(--vert-profond); }

/* TextInput — fond surface-1, filet bas */
.oc-field { display: grid; gap: var(--space-xs); min-width: 0; }
.oc-field__label { font-size: 12px; line-height: 16px; letter-spacing: 0.32px; color: var(--ink-muted); }
.oc-input { box-sizing: border-box; width: 100%; height: var(--size-touch); padding: 11px var(--space-md); border: 0; border-bottom: 1px solid var(--ink-subtle); border-radius: var(--radius-none); background: var(--surface-1); color: var(--ink); font-family: inherit; font-size: 16px; line-height: 24px; letter-spacing: 0.16px; }
.oc-input::placeholder { color: var(--ink-subtle); }
.oc-input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--focus); border-bottom-color: var(--focus); }
.oc-field--error .oc-input { border-bottom-color: var(--error); box-shadow: inset 0 -2px 0 var(--error); }
.oc-field--disabled .oc-input { background: var(--surface-2); color: var(--ink-subtle); border-bottom-color: transparent; cursor: not-allowed; }
.oc-field__msg { display: flex; gap: var(--space-xxs); align-items: center; margin: 0; font-size: 12px; line-height: 16px; letter-spacing: 0.32px; color: var(--ink-subtle); }
.oc-field__msg--error { color: var(--error); }
.oc-field__icon { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--error); color: var(--on-error); font-size: 10px; line-height: 1; font-weight: 700; }

/* NewsletterSignup */
.oc-newsletter { box-sizing: border-box; padding: var(--space-xl); background: var(--canvas); }
.oc-newsletter__title { margin: 0 0 var(--space-xs); font-size: 24px; line-height: 32px; font-weight: 700; }
.oc-newsletter__desc { margin: 0 0 var(--space-lg); color: var(--ink-muted); }
.oc-newsletter__row { display: flex; align-items: flex-end; max-width: 560px; }
.oc-newsletter__row .oc-field { flex: 1; }

/* Tabs */
.oc-tabs { display: flex; overflow-x: auto; box-shadow: inset 0 -1px 0 var(--hairline); }
.oc-tab { flex: none; min-height: var(--size-touch); padding: var(--space-md) 20px; border: 0; border-radius: var(--radius-none); background: transparent; color: var(--ink-muted); font-family: inherit; font-size: 14px; line-height: 18px; font-weight: 400; letter-spacing: 0.16px; cursor: pointer; box-shadow: inset 0 -1px 0 var(--hairline); }
.oc-tab:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink-subtle); }
.oc-tab--selected, .oc-tab--selected:hover { color: var(--ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--primary); }
.oc-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* TopNav */
.oc-topnav { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-xl); height: var(--size-touch); padding: 0 var(--space-md); background: var(--canvas); box-shadow: inset 0 -1px 0 var(--hairline); }
.oc-topnav__brand { display: flex; align-items: center; height: 100%; color: var(--ink); font-weight: 700; text-decoration: none; }
.oc-topnav__brand .oc-logo { height: 28px; }
.oc-topnav__name { font-size: 20px; line-height: 28px; font-weight: 700; }
.oc-topnav__links { display: flex; height: 100%; }
.oc-topnav__link { display: flex; align-items: center; padding: 0 var(--space-md); color: var(--ink-muted); font-size: 14px; line-height: 18px; text-decoration: none; }
.oc-topnav__link:hover { background: var(--surface-1); color: var(--ink); }
.oc-topnav__link--current { color: var(--ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--primary); }
.oc-topnav__link:focus-visible, .oc-topnav__brand:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.oc-topnav__actions { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }

/* UtilityBar */
.oc-utility { box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-lg); height: var(--size-utility); padding: 0 var(--space-md); background: var(--surface-1); font-size: 12px; line-height: 16px; letter-spacing: 0.32px; }
.oc-utility a { color: var(--ink-muted); text-decoration: none; }
.oc-utility a:hover { color: var(--ink); text-decoration: underline; }

/* Footer — seule surface inversée */
.oc-footer { box-sizing: border-box; padding: var(--space-3xl) var(--space-xl) var(--space-xl); background: var(--inverse-canvas); color: var(--inverse-ink-muted); font-size: 14px; line-height: 18px; letter-spacing: 0.16px; }
.oc-footer__top { display: flex; flex-wrap: wrap; gap: var(--space-xxl); }
.oc-footer__brand { margin: 0; min-width: 160px; color: var(--inverse-ink); font-size: 24px; line-height: 32px; font-weight: 700; }
.oc-footer__brand .oc-logo { height: 36px; }
.oc-footer__cols { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-lg); }
.oc-footer__heading { margin: 0 0 var(--space-sm); color: var(--inverse-ink); font-weight: 500; }
.oc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.oc-footer a { color: var(--inverse-ink-muted); text-decoration: none; }
.oc-footer a:hover { color: var(--inverse-ink); text-decoration: underline; }
.oc-footer__legal { margin-top: var(--space-xxl); padding-top: var(--space-md); box-shadow: inset 0 1px 0 var(--inverse-surface-1); font-size: 12px; line-height: 16px; letter-spacing: 0.32px; }

/* Logo — choix automatique de la version selon le fond.
   Fond clair : osiacom-logo (vert + orange). Fond sombre : osiacom-logo-inverse (blanc + orange).
   Sans la version adaptée, le nom est composé en texte. */
.oc-logo { display: none; width: auto; }
.oc-brand__name { display: inline; }
/* Fond clair : TopNav en thème clair, Footer en thème sombre (inverse-canvas = brume) */
:root:not([data-theme="dark"]) .oc-topnav__brand.oc-brand--has-logo .oc-logo--light,
[data-theme="dark"] .oc-footer__brand.oc-brand--has-logo .oc-logo--light { display: block; }
:root:not([data-theme="dark"]) .oc-topnav__brand.oc-brand--has-logo .oc-brand__name,
[data-theme="dark"] .oc-footer__brand.oc-brand--has-logo .oc-brand__name { display: none; }
/* Fond sombre : TopNav en thème sombre, Footer en thème clair (inverse-canvas = vert profond) */
[data-theme="dark"] .oc-topnav__brand.oc-brand--has-inverse .oc-logo--inverse,
:root:not([data-theme="dark"]) .oc-footer__brand.oc-brand--has-inverse .oc-logo--inverse { display: block; }
[data-theme="dark"] .oc-topnav__brand.oc-brand--has-inverse .oc-brand__name,
:root:not([data-theme="dark"]) .oc-footer__brand.oc-brand--has-inverse .oc-brand__name { display: none; }

/* Lien texte */
.oc-link { color: var(--link); text-decoration: none; }
.oc-link:hover { text-decoration: underline; }
.oc-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }