/* ==========================================================================
   Liber — vitrine. Feuille unique, dérivée du design system « Industry ».
   Aucune requête sortante : les polices sont servies depuis /polices/.
   Les valeurs vivent dans les variables ci-dessous, nulle part ailleurs.
   ========================================================================== */

@font-face {
  font-family: "Barlow";
  src: url("polices/barlow-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("polices/barlow-500.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("polices/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --color-accent-100: #eef6ff;
  --color-accent-300: #b5d9fd;
  --color-accent-700: #416180;
  --color-accent-900: #1d2d3d;

  --font-heading: "Barlow Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;
  --radius-md: 4px;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 4vw, 36px); }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h6 {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
}
p { margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
strong { font-weight: 700; }

a { color: var(--color-accent-700); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-900); text-decoration: underline; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--space-8); }
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.muted { color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* Repères de zone du fichier de conception, non affichés.
   Ce sont les marques qui délimitent une zone sur une planche de travail,
   pas un ornement destiné au public. Masqués par une règle, et non retirés
   des pages : le jour où le designer réexporte, le HTML revient avec ses
   croix, et cette ligne les reprendra sans qu'on ait à y penser.
   Le filet fin des cadres reste : il structure sans commenter. */
.corner { display: none; }

/* — cadres : objets carrés, filet fin — */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
.blueprint.duotone { overflow: visible; }
.corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.corner::before, .corner::after { content: ""; position: absolute; background: currentColor; }
.corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.corner.tl { top: -6px; left: -6px; }
.corner.tr { top: -6px; right: -6px; }
.corner.bl { bottom: -6px; left: -6px; }
.corner.br { bottom: -6px; right: -6px; }
.reverse .corner { color: color-mix(in srgb, #fff 70%, transparent); }

/* — images : lavées dans l'accent, comme une sérigraphie — */
.duotone { position: relative; overflow: hidden; }
.duotone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--color-accent); mix-blend-mode: color;
}

/* — commandes — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 var(--space-8);
  font-family: var(--font-heading); font-weight: 600; font-size: 15px;
  color: var(--color-text); background: transparent;
  border: 1px solid var(--color-divider); border-radius: 0;
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--color-bg); }
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-paper { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-accent-900); }
.btn-paper:hover { background: #fff; border-color: #fff; color: var(--color-accent-900); }
.btn-outline-paper { color: var(--color-bg); border-color: color-mix(in srgb, #fff 45%, transparent); }
.btn-outline-paper:hover { background: color-mix(in srgb, #fff 12%, transparent); color: var(--color-bg); }
.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.tag {
  display: inline-flex; align-items: center; font-size: 10px; padding: 4px 10px;
  background: var(--color-accent-100); color: var(--color-accent-900);
}

/* — barre de langue — */
.seg { display: inline-flex; border: 1px solid var(--color-divider); }
.seg > * {
  display: inline-flex; align-items: center; padding: 7px 12px; font-size: 13px;
  color: var(--color-text); text-decoration: none;
}
.seg > * + * { border-left: 1px solid var(--color-divider); }
.seg [aria-current="true"] { background: var(--color-accent); color: var(--color-bg); }
.seg a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); text-decoration: none; }

/* — en-tête — */
.nav {
  display: flex; align-items: center; gap: var(--space-6);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  flex-wrap: wrap;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px; margin-right: auto;
  font-family: var(--font-heading); font-weight: 600; font-size: 20px;
}
.nav-brand img { width: 28px; height: 28px; }
.nav-links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.nav-links a { color: inherit; font-size: 14px; }

/* — rythme des sections — */
section { padding-block: calc(var(--space-8) * 1.5); }
.rule-top { border-top: 1px solid var(--color-divider); }
.rule-bottom { border-bottom: 1px solid var(--color-divider); }
.field-deep { background: var(--color-accent-900); color: var(--color-bg); }
.field-deep h6 { color: var(--color-accent-300); }
.field-deep p { color: color-mix(in srgb, #fff 82%, transparent); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space-8) * 1.3); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-qa { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-8); }
.lede { font-size: 19px; line-height: 1.5; max-width: 34ch; }
.note { font-size: 13px; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-8);
}
.section-head p { max-width: 44ch; margin: 0; }

/* — cellules « comment ça marche » — */
.cell { display: flex; flex-direction: column; border: 1px solid var(--color-divider); }
.cell-body { padding: var(--space-4); }
.cell-num { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent-700); }
.cell h3 { margin: var(--space-2) 0; }
.cell p { margin: 0; font-size: 14px; }

/* — captures d'écran — */
/* ⚠️ **Pas de cadre autour des captures, décision du fondateur du 25 août.**
   Elles étaient posées dans un rectangle gris bordé, sur un fond blanc :
   « ça fait fake ». Trois épaisseurs pour montrer un téléphone. Les images ont
   été recadrées au plus près de l'appareil ; il ne reste du blanc qu'aux
   quatre coins arrondis, sur un fond de page à peine plus sombre. */
.screen { background: transparent; border: 0; }
.screen > div { padding: 0; }
.screen > div img { max-width: 230px; margin-inline: auto; }
.screen figcaption {
  padding: var(--space-3) 0 0; font-size: 9.5px;
  border-top: 0;
  text-align: center;
}

/* — tableaux — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }

.plate { padding: var(--space-6); background: var(--color-accent-100); margin-top: var(--space-8); }
.plate p { margin: 0; max-width: 78ch; color: var(--color-accent-900); }

footer { background: var(--color-surface); border-top: 1px solid var(--color-divider); }
footer .wrap { padding-block: var(--space-8); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8); flex-wrap: wrap; }
footer .links { display: flex; gap: var(--space-6); margin-bottom: var(--space-3); flex-wrap: wrap; }
footer .legal { margin: 0; font-size: 12px; max-width: 60ch; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
footer .copy { margin: var(--space-2) 0 0; font-size: 9.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

.center { text-align: center; }
.center h2, .center p { margin-inline: auto; }
.center h2 { max-width: 26ch; }
.center p { max-width: 54ch; }

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-qa { grid-template-columns: 1fr; }
  .nav-brand { margin-right: 0; }
  .nav { gap: var(--space-4); }
}

/* ── Être prévenu du lancement ────────────────────────────────────────────
   Le bouton ouvrait un lien `mailto:` : sur un ordinateur qui lit son courrier
   dans un onglet, il ne se passait rien et le visiteur croyait à une panne.
   Le formulaire envoie au même endroit que les messages de l'application. */
.prevenir {
  display: flex; gap: var(--space-3); justify-content: center;
  flex-wrap: wrap; margin-top: var(--space-6);
}
.prevenir input {
  flex: 0 1 22rem; min-height: 46px; padding: 0 var(--space-4);
  font-family: var(--font-body); font-size: 15px;
  color: var(--color-accent-900); background: var(--color-bg);
  border: 1px solid var(--color-bg); border-radius: 0;
}
.prevenir input::placeholder { color: color-mix(in srgb, var(--color-accent-900) 45%, transparent); }
.prevenir input:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 2px; }
.prevenir .dit {
  flex-basis: 100%; margin: var(--space-2) 0 0; font-size: 14px;
  color: color-mix(in srgb, #fff 88%, transparent);
}
.note-prevenir {
  margin: var(--space-3) auto 0; font-size: 12px;
  color: color-mix(in srgb, #fff 55%, transparent);
}
/* Une étiquette lue par les lecteurs d'écran, invisible à l'œil. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 640px) {
  .prevenir { flex-direction: column; align-items: stretch; }
  .prevenir input { flex: 1 1 auto; }
}


/* Le bouton d'inscription, en tête de page. Plein, parce que c'est le seul
   geste qu'on demande avant le lancement. */
.btn-plein {
  background: var(--encre, #111827);
  color: #fff;
  border: 0;
}
.btn-plein:hover { opacity: .9; }

/* ⚠️ Les badges des magasins ne sont PAS des boutons.
   Ils l'étaient, grisés, et un audit l'a relevé : le premier réflexe est de
   croire que le site ne fonctionne pas. Ils annoncent maintenant, ils
   n'invitent plus à cliquer. */
.badge-store {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid currentColor;
  border-radius: 6px;
  opacity: .55;
  cursor: default;
}

/* ⚠️ Le formulaire du haut vit sur fond CLAIR, celui du bas sur fond sombre.
   Le style d'origine était fait pour le sombre : posé tel quel en tête de page,
   le champ n'avait plus aucune bordure et ressemblait à du texte flottant. On
   ne voyait plus où taper. */
.prevenir-haut {
  max-width: 30rem;
  justify-content: flex-start;
  margin-top: 0;
}
.prevenir-haut input {
  flex: 1 1 16rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--color-text) 28%, transparent);
  border-radius: 6px;
  color: var(--color-text);
}
.prevenir-haut input::placeholder {
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.prevenir-haut .dit { color: var(--color-text); }
.prevenir-haut .btn-plein { border-radius: 6px; }

/* ⚠️ **Les captures sont détourées, et il ne faut RIEN ajouter autour.**
   Elles étaient en JPEG, donc opaques : un fond blanc suivait les coins
   arrondis, invisible sur fond clair et très voyant sur le bleu foncé. Un
   rayon en CSS le masquait, faute de mieux.
   Elles sont maintenant en PNG transparent, découpées au pixel près autour de
   l'appareil. **Elles prennent donc la couleur de la page où elles se
   trouvent, quelle qu'elle soit.** Remettre un rayon rognerait le téléphone
   au lieu de le sauver ; remettre un fond ferait réapparaître le rectangle. */