/* IADICI UI-KIT — base.css : reset, typo, layout. Préfixe de classes : ui- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 var(--t-md)/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ac); text-decoration: none; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
::selection { background: var(--ac); color: var(--ac-ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

/* --- Typo ---------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; line-height: 1.05; margin: 0 0 var(--s4); letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); } h3 { font-size: var(--t-xl); } h4 { font-size: var(--t-lg); }
p { margin: 0 0 var(--s4); text-wrap: pretty; }
.ui-mega   { font-family: var(--f-display); font-size: var(--t-mega); line-height: .9; letter-spacing: -.03em; }
.ui-lead   { font-size: var(--t-lg); color: var(--fg-2); max-width: 58ch; }
.ui-muted  { color: var(--fg-3); }
.ui-mono   { font-family: var(--f-mono); }
.ui-kicker { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ac); }
.ui-label  { font: 500 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.ui-index  { font: 500 var(--t-sm)/1 var(--f-mono); color: var(--fg-3); }  /* /01 /02 */
.ui-num    { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.ui-vertical { writing-mode: vertical-rl; transform: rotate(180deg); }
em.ui-accent, .ui-accent { color: var(--ac); font-style: italic; }

/* --- Layout -------------------------------------------------------------- */
.ui-container { width: min(100% - 32px, var(--w)); margin-inline: auto; }
.ui-section   { padding-block: var(--s9); border-top: 1px solid var(--line); position: relative; }
.ui-section--tight { padding-block: var(--s7); }
.ui-band-invert { background: var(--fg); color: var(--bg); --fg: #08080A; --fg-2: #2b2b30; --fg-3: #55555c; --line: rgba(0,0,0,.12); }
.ui-stack > * + * { margin-top: var(--s4); }
.ui-row   { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.ui-grid  { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ui-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
/* Grille éditoriale à hairlines : colonnes séparées par des filets 1px */
.ui-hairgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ui-hairgrid > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s6); }
.ui-split { display: grid; gap: var(--s7); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ui-split { grid-template-columns: 5fr 7fr; } .ui-split--rev { grid-template-columns: 7fr 5fr; } }
.ui-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-skip { position: absolute; left: -999px; top: 8px; background: var(--ac); color: var(--ac-ink); padding: 8px 14px; z-index: 999; }
.ui-skip:focus { left: 8px; }