/* ═══════════════════════════════════════════════════════════════════════════
   base.css — remise à zéro, éléments HTML, typographie de base.
   ═══════════════════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s-6));
  -webkit-text-size-adjust: 100%;

  /* Verrouiller le corps (panneau, lecteur) retire la barre de défilement et
     élargit la page de quinze pixels : la navigation fixe sautait latéralement
     au moment précis où le mouvement d'ouverture démarrait. Réserver la
     gouttière en permanence supprime le saut. Les navigateurs qui ignorent
     cette propriété sont rattrapés par --sbw, posé en JS. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Le body ne défile plus quand un panneau projet est ouvert. */
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
  /* Fraunces porte quatre axes. `opsz` donne la coupe d'affiche, `SOFT`
     adoucit les angles rentrants, `WONK` incline les jambages. Les trois
     sont réglés par composant ; ici, la valeur de repos. */
  font-variation-settings: "opsz" 72, "SOFT" 20, "WONK" 0;
}

/* `balance` répartit les lignes d'un titre court ; `pretty` se contente
   d'empêcher un mot seul en dernière ligne, ce qui est exactement ce qu'il
   faut à un paragraphe — `balance` y coûterait cher pour rien. */
p { margin: 0 0 var(--s-5); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* La mesure de 66 caractères sert la **lecture**. Un `<p>` qui n'est pas un
   paragraphe — une barre d'en-tête de carte, une rangée de pastilles, une
   ligne de pied centrée — n'a rien à lire : la mesure l'y rognait au tiers de
   sa largeur, et décentrait celle qui devait l'être. C'est le piège d'une
   règle d'élément : elle attrape aussi ce qui porte le nom sans faire le
   métier. */
.card__bar,
.card__media,
.card__meta,
.panel__meta,
.sites__foot,
.hero__kicker,
.cv__row,
.foot__meta { max-width: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

img, svg { max-width: 100%; height: auto; display: block; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

dl, dd { margin: 0; }

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

/* ── Focus ──────────────────────────────────────────────────────────────────
   Un seul anneau, partout, jamais retiré. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Ouverture au double-clic (`file://`) ───────────────────────────────────
   Le site est inutilisable ainsi : les modules ES6 et `fetch()` sont bloqués.
   Plutôt qu'une page à moitié vide qui n'explique rien, on montre la marche à
   suivre et on cache le reste. Les feuilles de style, elles, se chargent très
   bien sous `file://` — l'avertissement peut donc être présentable. */

.filewarn { display: none; }

html.is-file .filewarn {
  display: grid;
  place-items: center;
  min-block-size: 100svh;
  padding: var(--s-6);
}
html.is-file > body > *:not(.filewarn) { display: none; }

.filewarn__card {
  max-inline-size: 56ch;
  padding: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.filewarn__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-5);
}
.filewarn__text { color: var(--ink-2); }
.filewarn__do { margin-block-start: var(--s-6); }
.filewarn__file {
  font-size: var(--step-1);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-align: center;
}
.filewarn__alt { font-size: var(--step--1); }
.filewarn code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  color: var(--ink);
}

/* ── Utilitaires ───────────────────────────────────────────────────────────── */

.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}

/* Les noms de technologies, les URL, les montants et les numéros restent en
   LTR même en arabe : ils s'écrivent en latin et se lisent de gauche à droite. */
.ltr { direction: ltr; unicode-bidi: isolate; }

/* La typographie arabe elle-même vit dans rtl.css, avec le reste de ce qui
   dépend de la langue. Ici, seulement ce qui relève de l'échelle : l'arabe
   monte plus haut et descend plus bas que le latin, et un titre calibré pour
   Fraunces déborde de son masque en Plex Arabic. On le plafonne. */
.lang-ar .hero__title { font-size: min(var(--step-5), 5.4rem); }
.lang-ar .h-section   { font-size: min(var(--step-3), 3.2rem); }
.lang-ar .deliv__name { font-size: min(var(--step-4), 3.6rem); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le lien se range hors champ par une translation, pas par un décalage de
   position : animer `inset` ferait recalculer la mise en page. La règle vaut
   pour tout le site, y compris pour ce lien qu'on ne voit presque jamais. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  inset-block-start: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  transform: translateY(calc(-100% - var(--s-5)));
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }