/* base.css — slice S03 — reset, éléments de base, liens, focus, sélection, lien d'évitement, .wrap */

/* ── Modèle de boîte ─────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Marges nulles ───────────────────────────────────── */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin-block: 0;
  margin-inline: 0;
}

/* ── Racine : jour par défaut ────────────────────────── */
html {
  background-color: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-text);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--head-h) + var(--s-5));
  hanging-punctuation: first allow-end;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-size: var(--t-base);
  line-height: var(--lh-text);
  font-weight: 400;
  font-synthesis: none;
  font-variant-numeric: lining-nums;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ── Arabe : IBM Plex Sans Arabic, lettres non espacées ── */
:lang(ar) {
  font-family: var(--f-ar);
  letter-spacing: 0;
}

/* ── Titres : Frank Ruhl Libre (Reem Kufi en arabe) ───── */
h1,
h2,
h3 {
  font-family: var(--f-title);
  font-weight: var(--w-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-title);
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

/* ── Liens (DNA §4) : texte encre, soulignement terre ── */
a {
  color: var(--c-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--c-link-underline);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: auto;
  transition:
    text-decoration-color var(--d-hover) ease-out,
    text-underline-offset var(--d-hover) ease-out;
}

/* le seuil se franchit : le soulignement descend d'un cran et prend l'encre */
a:hover {
  text-decoration-color: var(--c-ink);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.3em;
}

a:active {
  text-decoration-color: var(--c-terra);
}

/* ── Focus visible et sélection ──────────────────────── */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

/* l'anneau ne se dessine pas au clic de souris sur la cible d'une ancre */
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background-color: var(--c-selection);
  color: var(--c-ink);
}

/* ── Médias : blocs, jamais plus larges que leur case ── */
img,
svg {
  display: block;
  max-inline-size: 100%;
}

/* ── Emphase : pas d'italique (il n'en existe pas) ───── */
em,
strong {
  font-style: normal;
  font-weight: 600;
}

/* ── Translittération : romain, IBM Plex Sans (diacritiques complets) ── */
.tr {
  font-style: normal;
  font-family: var(--f-text);
  font-weight: var(--w-text);
}

/* ── Écritures d'origine : glyphes réels (phénicien, cunéiforme), jamais approchés ── */
[lang$="-Phnx"],
[lang$="-Xsux"] {
  font-family: var(--f-script);
}

/* ── Listes sans puces ni retrait ────────────────────── */
ul[role=list],
ol[role=list] {
  list-style: none;
  padding-block: 0;
  padding-inline: 0;
}

/* ── Attribut hidden : toujours masqué ───────────────── */
[hidden] {
  display: none !important;
}

/* ── Texte réservé aux lecteurs d'écran (motif clip 1px) */
.vh {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin-block: -1px;
  margin-inline: -1px;
  padding-block: 0;
  padding-inline: 0;
  border-width: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ── Lien d'évitement : hors écran jusqu'au focus ────── */
.skip {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-start: var(--s-4);
  z-index: var(--z-skip);
  padding-block: var(--s-2);
  padding-inline: var(--s-4);
  background-color: var(--c-ink);
  color: var(--c-paper);
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* ── Conteneur (DNA §7) ──────────────────────────────── */
.wrap {
  inline-size: min(100% - 2 * var(--margin), var(--grid-max));
  margin-inline: auto;
}