/* Tania Tsvilodub — site layout.
   Tokens live in assets/tokens/{fonts,colors,typography,spacing}.css, copied verbatim from the
   design system; the pages link all four ahead of this file, in the order the DS manifest lists
   them. Every rule below is the design system's `ui_kits/site/fr.html` style block, applied to the
   four real language pages. Values are the DS's — do not substitute. */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--page-gradient);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: calc(var(--measure) + 120px); margin: 0 auto; padding: var(--margin-mobile); }
@media (min-width: 760px) {
  .wrap { padding: var(--margin-desktop) var(--margin-desktop) var(--sp-9); }
}
.col { max-width: var(--measure); }

/* Skip link — accessibility furniture, not a DS component. */
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--margin-mobile); top: var(--sp-2); z-index: 2;
  background: var(--paper); color: var(--ink);
  padding: var(--sp-2) var(--sp-3); border: var(--rule-width) solid var(--hair);
}

/* ── Header ─────────────────────────────────────────────────────────── */

header { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }

.ident { display: flex; gap: var(--sp-4); align-items: flex-start; }
.ident h1 { font-size: var(--fs-h1); font-weight: var(--fw-regular); line-height: var(--lh-heading); margin: 0; }
.ident p { margin: var(--sp-1) 0 0; font-style: italic; color: var(--ink-soft); font-size: var(--fs-body-sm); }

/* margin-left: auto (not justify-content: space-between) so .right stays flush against
   the top-right corner whether it shares the header row with .ident or, once the row is
   too narrow and it wraps to its own line, sits alone — space-between would flex-start a
   lone wrapped item, stranding it in the middle of the row instead of at the corner. */
.right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); text-align: right; margin-left: auto; }

.lang {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: .08em;
  color: var(--ink-soft); display: flex; align-items: center; gap: var(--sp-1);
}
.lang a { border: 0; color: var(--ink-soft); display: inline-block; padding: var(--sp-1); }
.lang a[aria-current] { color: var(--ink); border-bottom: 1px solid var(--cinabre); }
.lang a:hover { color: var(--cinabre); }
.lang .sep { color: var(--hair); }
@media (max-width: 759px) {
  .lang a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--sp-2); }
}

.book { font-size: var(--fs-body); color: var(--cinabre); }
.reassure {
  font-size: var(--fs-mono); font-family: var(--font-mono); color: var(--ink-soft);
  max-width: 34ch; line-height: 1.5; margin-top: var(--sp-2);
}
@media (max-width: 759px) {
  .right { padding-right: var(--sp-4); }
}
@media (min-width: 760px) {
  .right { gap: var(--sp-3); }
  .reassure { font-size: var(--fs-mono-sm); margin-top: var(--sp-3); }
}

/* Column list on narrow screens — RU/UK labels are long enough to wrap mid-item in a
   row layout, which reads as accidental. A vertical list is deliberate at any label
   length, so all four languages share it rather than branching per-language CSS. */
nav { margin: var(--sp-6) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-body-sm); }
nav a { border: 0; color: var(--ink); }
nav a:hover { color: var(--cinabre); }
@media (min-width: 760px) {
  nav { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
}

.practice { margin: var(--sp-4) 0 0; font-size: var(--fs-body-sm); font-style: italic; color: var(--ink-soft); }

/* ── Rules, intro, doors ────────────────────────────────────────────── */

hr { border: 0; border-top: var(--rule-width) solid var(--hair); margin: var(--sp-7) 0; }

.intro { font-style: italic; font-size: var(--fs-intro); line-height: var(--lh-intro); margin: var(--sp-7) 0 0; }

.doors { display: grid; gap: 0; margin-top: var(--sp-7); }
.door { padding: var(--sp-6) 0; }
.door + .door { border-top: var(--rule-width) solid var(--hair); }
.door h2 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-heading); }
.door.atelier h2 { color: var(--accent-atelier); }
.door.analyse h2 { color: var(--accent-analysis); }
.door p { margin: var(--sp-3) 0 0; }

.meta { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-soft); margin-top: var(--sp-3); }
.more { display: inline-block; margin-top: var(--sp-3); }

/* ── Sections ───────────────────────────────────────────────────────── */

section { margin-top: var(--section-gap); }

h3.rubric {
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono-label);
  text-transform: uppercase; color: var(--ink-soft); font-weight: var(--fw-mono);
  margin: 0 0 var(--sp-5);
}
h3.rubric.vert { color: var(--vert-seve); }
/* FAQ group titles: any h3.rubric right after a closed FAQ item is a new group label,
   not the section's own opening rubric (which follows the section's h2/h1, never a
   details.faq) — so this rule reaches every group boundary and skips the first group. */
details.faq + h3.rubric { margin-top: var(--sp-8); }

h2.sec { font-size: var(--fs-h2); font-weight: var(--fw-regular); margin: 0 0 var(--sp-4); line-height: var(--lh-heading); }

p { margin: 0 0 var(--para-gap); text-wrap: pretty; }

.lead::first-letter {
  float: left; font-size: 3.1em; line-height: .86; padding: .06em .12em 0 0;
  color: var(--dropcap); font-style: italic;
}

/* ── Parcours résumé ────────────────────────────────────────────────── */

.cv { margin: var(--sp-6) 0 0; }
.cv__row { padding: var(--sp-4) 0; }
.cv__row + .cv__row { border-top: var(--rule-width) solid var(--hair); }
.cv__row dt {
  margin: 0 0 var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-soft);
}
.cv__row dd { margin: 0; font-family: var(--font-serif); color: var(--ink); }
@media (min-width: 760px) {
  .cv__row { display: grid; grid-template-columns: 12ch 1fr; gap: 0 var(--sp-5); align-items: start; }
  .cv__row dt { margin: 0; }
}

/* ── Cabinet ────────────────────────────────────────────────────────── */

.addr { padding: var(--sp-5) 0; }
.addr + .addr { border-top: var(--rule-width) solid var(--hair); }
.addr h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.addr.cin h4 { color: var(--accent-analysis); }
.addr.vert h4 { color: var(--accent-atelier); }
.addr ul {
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-soft); line-height: 1.75;
}

.note { font-style: italic; color: var(--ink-soft); font-size: var(--fs-body-sm); }

/* ── Photo and map: the DS `.photo` placeholder treatment ───────────── */

.photo {
  margin-top: var(--sp-6); border: var(--rule-width) solid var(--hair); aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--ink-soft);
  text-align: center; padding: 0; overflow: hidden;
}
/* <picture> is display:inline, which would become .photo's flex item and collapse the
   image to zero size. display:contents removes it from layout so the <img> is the item. */
.photo picture { display: contents; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The map is the same placeholder treatment at 16/7, per the DS cabinet block. It stays a
   <button> so the interactive Google iframe can only load on click, never on entry. */
.map { margin: 0; }
.map__stub {
  display: flex; align-items: center; justify-content: center; position: relative;
  width: 100%; margin-top: var(--sp-6); padding: 0; overflow: hidden;
  border: var(--rule-width) solid var(--hair); aspect-ratio: 16/7;
  background: var(--surface-raised); color: var(--ink-soft); cursor: pointer;
}
.map__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map__cue {
  position: absolute; left: 50%; bottom: var(--sp-3); transform: translateX(-50%);
  background: var(--paper); color: var(--ink); border: var(--rule-width) solid var(--hair);
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono-label);
  padding: var(--sp-2) var(--sp-3);
}
.map iframe { width: 100%; aspect-ratio: 16/7; border: var(--rule-width) solid var(--hair); display: block; margin-top: var(--sp-6); }
figcaption { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--ink-soft); }

/* ── Accordion and expander ─────────────────────────────────────────── */

details { border-top: var(--rule-width) solid var(--hair); padding: var(--sp-4) 0; }
details summary {
  cursor: pointer; list-style: none; display: flex; gap: var(--sp-3);
  align-items: baseline; font-size: var(--fs-body);
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: "+"; color: var(--cinabre); font-family: var(--font-mono); font-size: var(--fs-mono);
}
details[open] summary::before { content: "\2013"; }
details summary:focus-visible { outline: 2px solid var(--cinabre); outline-offset: 3px; }
details p { margin: var(--sp-3) 0 0; color: var(--ink-soft); }

/* ── Sign ───────────────────────────────────────────────────────────── */

.sign { display: block; flex: none; }
.sign__arc { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.sign__drop { fill: var(--drop, var(--ink)); }
.sign--dress { --drop: var(--cinabre); }
.sign--soft  { --drop: var(--vert-seve); }

/* ── Footer ─────────────────────────────────────────────────────────── */

footer {
  margin-top: var(--section-gap); border-top: var(--rule-width) solid var(--hair);
  padding-top: var(--sp-5); font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  color: var(--ink-soft); line-height: 1.8;
}
footer p { margin: 0 0 var(--sp-2); }

:focus-visible { outline: 2px solid var(--cinabre); outline-offset: 3px; }