/* Lenkx — sites vitrines lenkx.fr et lenkx.com. FICHIER PARTAGÉ : copie identique dans site-fr/ et
   site-en/ (deploy/sites-check.py refuse toute divergence). CSS pur, aucune dépendance externe.
   Parti pris : papier blanc sur noir (l'esthétique origami du héros), monochrome strict,
   typographie système géométrique, aucune fonte distante, aucun script tiers. */

:root {
  --noir:      #0b0b0c;
  --noir-2:    #101012;
  --noir-3:    #16161a;
  --papier:    #f2efe9;
  --papier-2:  #e6e2d9;
  /* Gris calés pour le contraste AA sur fond noir : 6,8:1 et 5,1:1 — le gris plus sombre
     d'origine (#6f6c66) tombait à 3,8:1, sous le seuil pour du petit texte. */
  --craie:     #9c988e;
  --craie-2:   #85827a;
  --trait:     color-mix(in srgb, var(--papier) 13%, transparent);
  --trait-2:   color-mix(in srgb, var(--papier) 28%, transparent);
  --encre:     #131315;
  --blanc:     #fff;
  --alerte:    #d98b7a;
  --alerte-texte: #f0b7a8;

  color-scheme: dark light;

  --w:      1180px;
  --pad:    clamp(20px, 5vw, 56px);
  --gap:    clamp(28px, 4vw, 56px);
  --sect:   clamp(72px, 11vh, 132px);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Inter, Roboto, Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--noir);
  color: var(--papier);
  font-family: var(--sans);
  font-size: clamp(16px, 1.02vw + 13px, 18px);
  line-height: 1.62;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--papier); color: var(--encre);
  padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

.wrap { width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 760px; }

/* ---------------------------------------------------------------- barre haute */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 14px var(--pad);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--noir) 92%, transparent), transparent);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.topbar.is-visible { opacity: 1; pointer-events: auto; }

/* Au-dessus du panneau papier, la barre s'inverse — sinon elle disparaît dans le blanc. */
.topbar.is-on-paper {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--papier) 96%, transparent), transparent);
  color: var(--encre);
}
.topbar.is-on-paper .topnav a { color: color-mix(in srgb, var(--encre) 62%, transparent); }
.topbar.is-on-paper .topnav a:hover { color: var(--encre); }
.topbar.is-on-paper .btn { border-color: color-mix(in srgb, var(--encre) 30%, transparent); color: var(--encre); }
.topbar.is-on-paper .btn:hover { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.topbar.is-on-paper :focus-visible { outline-color: var(--encre); }

.wordmark img { display: block; height: 26px; width: auto; }
.wordmark {
  font-size: 19px; font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
}
.wordmark--foot { font-size: 22px; margin: 0 0 8px; }

.topnav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
/* Menu façon SpaceX (retour Pierre 28/07) : blanc franc, petites capitales espacées, graisse posée. */
.topnav a {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  text-decoration: none; color: var(--papier); transition: opacity .2s;
}
.topnav a:hover { opacity: .7; }
@media (max-width: 720px) { .topnav a:not(.btn) { display: none; } }

/* ---------------------------------------------------------------- boutons */

.btn {
  display: inline-block;
  padding: 13px 24px;
  border: 1px solid var(--trait-2);
  border-radius: 2px;
  font-size: 15px; font-weight: 550; letter-spacing: .01em;
  text-decoration: none;
  color: var(--papier);
  background: transparent;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover { background: var(--papier); border-color: var(--papier); color: var(--encre); }
.btn--ghost { padding: 9px 16px; font-size: 14px; }
.btn--quiet { border-color: transparent; color: var(--craie); padding-inline: 12px; }
.btn--quiet:hover { background: transparent; color: var(--papier); border-color: var(--trait); }
.btn--solid {
  background: var(--papier); color: var(--encre); border-color: var(--papier);
  font-weight: 600; cursor: pointer; font-family: inherit; padding: 15px 34px;
}
.btn--solid:hover { background: var(--blanc); border-color: var(--blanc); }
.btn--solid[disabled] { opacity: .45; cursor: progress; }

/* ---------------------------------------------------------------- héros */

.hero { position: relative; height: 280vh; }
@media (prefers-reduced-motion: reduce) { .hero { height: auto; } }

.hero__stage {
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  overflow: hidden;
  /* Flex + min-width:0 : le contenu du bloc de texte ne peut JAMAIS élargir l'étage
     (une grille auto le faisait, et le canvas débordait de l'écran en mobile). */
  display: flex; flex-direction: column; justify-content: flex-end;
  min-width: 0;
  background: transparent;
}
.hero__canvas, .hero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: transparent;
}
.hero__poster { z-index: 1; transition: opacity .3s linear; }
/* Image d'attente calée EXACTEMENT comme la 1re frame du canvas au repos (main.js, draw, p = 0) :
   sinon le mot apparaît en plein cadre puis rapetisse quand l'animation prend le relais.
   Paysage : hauteur ≤ 55 % de l'étage, ancrée à 4 % du haut. Portrait : pleine largeur, à 10 %. */
.hero__poster {
  --h: max(100svh, 560px);
  inset: auto; left: 50%; transform: translateX(-50%);
  top: calc(var(--h) * .04);
  width: min(100%, calc(var(--h) * .55 * 1280 / 720)); height: auto;
}
@media (orientation: portrait) {
  .hero__poster { top: calc(var(--h) * .10); width: 100%; }
}
.hero__poster.is-hidden { opacity: 0; }
.hero__canvas { z-index: 2; opacity: 0; }
.hero__canvas.is-ready { opacity: 1; }

/* Voile : garantit le contraste du texte au repos, puis s'efface pour laisser le lynx seul.
   `--p` est la progression du défilement, posée par le JS sur l'étage. */
.hero__stage { --p: 0; }
.hero__veil {
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(to top, rgba(11,11,12,.97) 0%, rgba(11,11,12,.9) 22%, rgba(11,11,12,0) 56%),
    radial-gradient(130% 62% at 50% 100%, rgba(11,11,12,.72), rgba(11,11,12,0) 72%);
  opacity: calc(1 - var(--p) * 1.6);
}

.hero__copy {
  position: relative; z-index: 4;
  width: 100%; max-width: var(--w); min-width: 0;
  margin-inline: auto;
  padding: 0 var(--pad) clamp(56px, 9vh, 92px);
  /* Rendu validé (Maëlle, 28/07) : tout le bloc est CENTRÉ sous le logo. */
  text-align: center;
  /* Le texte cède la place à l'animation : il s'efface sur le premier tiers du défilement. */
  opacity: calc(1 - var(--p) * 2.6);
  transform: translateY(calc(var(--p) * -22px));
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero__copy { opacity: 1; transform: none; }
  .hero__veil { opacity: 1; }
}

.kicker {
  margin: 14px 0 0;
  font-size: clamp(11px, .9vw, 13px);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--craie);
}

h1 {
  margin: 0;
  font-size: clamp(30px, 4.8vw, 60px);
  line-height: 1.02;
  letter-spacing: -.032em;
  font-weight: 640;
  text-wrap: balance;
}

.hero__copy .lede { margin-inline: auto; }
.hero__cta { justify-content: center; }
.lede {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.35vw, 20px);
  color: var(--papier-2);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

.hero__hint {
  position: absolute; z-index: 4; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--craie-2);
  transition: opacity .4s var(--ease);
}
.hero__hint i {
  width: 1px; height: 22px;
  background: linear-gradient(to bottom, var(--trait-2), transparent);
  animation: drip 2.4s var(--ease) infinite;
}
@keyframes drip { 0%, 100% { opacity: .3; transform: translateY(-4px); } 50% { opacity: 1; transform: translateY(2px); } }
.hero__hint.is-gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero__hint { display: none; }
  .hero__hint i { animation: none; }
}
@media (max-width: 720px) { .hero__hint { display: none; } }

/* ---------------------------------------------------------------- rythme des sections */

/* Ancres : le titre visé ne doit pas finir sous la barre fixe. */
section[id] { scroll-margin-top: 84px; }

.band { padding: var(--sect) 0; border-top: 1px solid var(--trait); position: relative; background: var(--noir); }
.band--tight { padding-bottom: calc(var(--sect) * .72); }
.band--contact { background: var(--noir-2); }

.eyebrow {
  margin: 0 0 26px;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--craie-2);
}
.eyebrow--dark { color: color-mix(in srgb, var(--encre) 64%, transparent); }

.statement {
  margin: 0 0 34px;
  font-size: clamp(27px, 3.9vw, 50px);
  line-height: 1.1;
  letter-spacing: -.026em;
  font-weight: 620;
  text-wrap: balance;
}
.statement .dim { color: var(--craie); }
.statement--dark { color: var(--encre); }

.prose { margin: 0 0 20px; max-width: 62ch; color: var(--papier-2); }
.prose--lead { font-size: clamp(17px, 1.3vw, 20px); max-width: 66ch; margin-bottom: 40px; }
.prose--small { font-size: 15px; color: var(--craie); }
.prose--dark { color: color-mix(in srgb, var(--encre) 74%, transparent); max-width: 64ch; margin-top: 34px; }
.prose a { color: inherit; text-underline-offset: 3px; }

.two { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 860px) { .two { grid-template-columns: 1fr 1fr; } }

.ticks { list-style: none; margin: 42px 0 0; padding: 0; display: grid; gap: 0; }
.ticks li {
  padding: 20px 0 20px 30px;
  border-top: 1px solid var(--trait);
  color: var(--craie);
  position: relative;
}
.ticks li:last-child { border-bottom: 1px solid var(--trait); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 30px;
  width: 12px; height: 12px;
  background: var(--papier);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
}
.ticks strong { color: var(--papier); font-weight: 620; }

.split { display: grid; gap: var(--gap); grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 900px) { .split { grid-template-columns: 1.25fr 1fr; } }

.h3 { margin: 0 0 18px; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--craie-2); font-weight: 600; }

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--trait);
  position: relative;
  color: var(--papier-2);
}
.list li::before {
  content: ""; position: absolute; left: 0; top: 23px;
  width: 9px; height: 9px; background: var(--craie);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.list--muted li { color: var(--craie-2); }
.list--muted li::before { background: var(--craie-2); opacity: .6; }

/* ---------------------------------------------------------------- vignettes d'interface */

.cards {
  margin-top: clamp(48px, 7vw, 84px);
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
  align-items: start; /* chaque vignette garde sa hauteur naturelle */
}
@media (min-width: 760px)  { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .cards { grid-template-columns: repeat(3, 1fr); } }
/* Mobile : une seule vignette, la plus parlante (l'appel transcrit). */
@media (max-width: 759px) { .card--inbox, .card--agenda { display: none; } }

.card {
  margin: 0;
  background: var(--noir-3);
  border: 1px solid var(--trait);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .9);
}
.card__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--trait);
  background: color-mix(in srgb, var(--papier) 2.2%, transparent);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--trait-2); }
.card__tab {
  margin-left: 10px;
  /* Sur l'entête de vignette (fond plus clair), le gris sombre tombait sous 4,5:1. */
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--craie);
}
.card__body { padding: 18px 16px 20px; }

.callhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.callwho { margin: 0; font-weight: 620; font-size: 15px; }
.callmeta { margin: 3px 0 0; font-size: 12.5px; color: var(--craie-2); }
.pill {
  flex: none;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid var(--trait-2); border-radius: 2px; color: var(--craie);
}
.wave { width: 100%; height: 34px; margin: 16px 0 4px; }
.wave rect { fill: var(--craie-2); }
.wave rect:nth-child(3n) { fill: var(--craie); }

.cardlabel {
  margin: 16px 0 10px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--craie-2);
}
.mini { list-style: none; margin: 0; padding: 0; font-size: 14.5px; color: var(--papier-2); }
.mini li { padding: 7px 0 7px 16px; position: relative; }
.mini li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 7px; height: 7px; background: var(--craie); clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.chipline { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; }
.chip {
  font-size: 12px; padding: 5px 10px; border-radius: 2px;
  background: var(--papier); color: var(--encre); font-weight: 550;
}
.chip--soft { background: transparent; color: var(--craie); border: 1px solid var(--trait); font-weight: 400; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--trait);
  font-size: 14px; color: var(--craie);
}
.rows li:last-child { border-bottom: 0; }
.rows b { color: var(--papier); font-weight: 600; }
.row__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__d { font-size: 12px; color: var(--craie-2); font-variant-numeric: tabular-nums; }
.ico svg { width: 15px; height: 15px; fill: none; stroke: var(--craie-2); stroke-width: 1.2; }
.is-live .ico svg { stroke: var(--papier); }

.slots { list-style: none; margin: 0; padding: 0; }
.slots li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; padding: 10px 0; }
.hour { font-size: 12px; color: var(--craie-2); font-variant-numeric: tabular-nums; padding-top: 3px; }
.slot {
  display: block; padding: 10px 12px; border-radius: 3px; font-size: 14px;
  background: var(--papier); color: var(--encre); font-weight: 550;
}
.slot em { display: block; font-style: normal; font-size: 12px; font-weight: 400; opacity: .62; margin-top: 2px; }
.slot--soft { background: transparent; color: var(--craie); border: 1px solid var(--trait); font-weight: 400; }

.caption { margin: 18px 0 0; font-size: 12.5px; color: var(--craie-2); }

/* ---------------------------------------------------------------- métiers */

.trades { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: 3px; overflow: hidden; }
@media (min-width: 640px)  { .trades { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .trades { grid-template-columns: repeat(4, 1fr); } }

.trade { background: var(--noir); padding: clamp(24px, 3vw, 34px) clamp(20px, 2.4vw, 28px); }
.trade__ico {
  width: 40px; height: 40px; margin-bottom: 22px;
  fill: none; stroke: var(--papier); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round;
}
.trade h3 { margin: 0 0 10px; font-size: 17px; font-weight: 620; letter-spacing: -.012em; }
.trade p { margin: 0; font-size: 14.5px; color: var(--craie); }

/* ---------------------------------------------------------------- panneau papier */

.paper {
  background: var(--papier);
  color: var(--encre);
  padding: clamp(72px, 11vh, 132px) 0;
  /* Pli de papier : deux arêtes très légères, en haut et en bas du panneau. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.claims li {
  display: grid; gap: 4px;
  padding: 22px 0;
  border-top: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
}
.claims li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--encre) 14%, transparent); }
.claims b {
  font-size: clamp(19px, 2.1vw, 26px); font-weight: 620; letter-spacing: -.02em; line-height: 1.2;
}
.claims span { color: color-mix(in srgb, var(--encre) 66%, transparent); font-size: 15px; }
@media (min-width: 800px) {
  .claims li { grid-template-columns: 1fr 1fr; align-items: baseline; gap: 24px; }
}

/* ---------------------------------------------------------------- essai */

.steps { display: grid; gap: 1px; background: var(--trait); border-block: 1px solid var(--trait); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--noir); padding: 30px clamp(0px, 2vw, 28px); }
@media (min-width: 820px) { .step { padding-inline: clamp(20px, 2.4vw, 30px); } }
.step__n { display: block; font-size: 12px; letter-spacing: .2em; color: var(--craie-2); margin-bottom: 14px; }
.step h3 { margin: 0 0 8px; font-size: 18px; font-weight: 620; letter-spacing: -.014em; }
.step p { margin: 0; font-size: 15px; color: var(--craie); }

.delta {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--trait-2);
  border-radius: 3px;
}
.delta p { margin: 0; font-size: clamp(16px, 1.5vw, 21px); color: var(--papier-2); max-width: 62ch; }
.delta b { color: var(--papier); font-weight: 620; }

/* ---------------------------------------------------------------- formulaire */

.form { display: grid; gap: 18px; margin: 34px 0 30px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .form { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }

label { font-size: 13.5px; color: var(--craie); letter-spacing: .01em; }
.req { color: var(--papier); }

input, textarea {
  width: 100%;
  font: inherit; font-size: 16px;
  color: var(--papier);
  background: var(--noir);
  border: 1px solid var(--trait-2);
  border-radius: 2px;
  padding: 13px 14px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
textarea { resize: vertical; min-height: 120px; }
input::placeholder, textarea::placeholder { color: var(--craie-2); opacity: .8; }
input:hover, textarea:hover { border-color: color-mix(in srgb, var(--papier) 40%, transparent); }
input:focus, textarea:focus { outline: 2px solid var(--papier); outline-offset: 1px; border-color: transparent; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--alerte); }

.hint { margin: 0; font-size: 12px; color: var(--craie-2); text-align: right; font-variant-numeric: tabular-nums; }

/* Prise de rendez-vous : créneaux libres de l'agenda de Pierre (navigables au clavier). */
.rdv .label { margin: 0; font-size: 13.5px; color: var(--craie); letter-spacing: .01em; }
.rdv__tz { margin-left: 8px; font-size: 12px; color: var(--craie-2); }
.rdv__note { margin: 0; font-size: 14px; color: var(--craie); min-height: 1.2em; }
.slots { display: flex; flex-wrap: wrap; gap: 10px; outline: none; }
.slots[hidden], .linkbtn[hidden] { display: none; }
.slot {
  font: inherit; font-size: 15px;
  color: var(--papier);
  background: var(--noir);
  border: 1px solid var(--trait-2);
  border-radius: 2px;
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.slot.is-active { border-color: color-mix(in srgb, var(--papier) 60%, transparent); }
.slot[aria-selected="true"] { background: var(--papier); color: var(--noir); border-color: var(--papier); }
.slot:focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }
.linkbtn {
  justify-self: start;
  font: inherit; font-size: 14px;
  color: var(--craie);
  background: none; border: none; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--papier); }

/* Piège à robots : retiré du flux, invisible, jamais lu par un lecteur d'écran. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 6px; }
.legalese { margin: 0; font-size: 13px; color: var(--craie-2); max-width: 46ch; }
.legalese a { color: var(--craie); }

.status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 15px;
  padding: 0;
  min-height: 0;
}
.status.is-error, .status.is-ok {
  padding: 14px 16px;
  border-radius: 2px;
  border: 1px solid var(--trait-2);
}
.status.is-error { border-color: var(--alerte); color: var(--alerte-texte); }
.status.is-ok { border-color: var(--papier); color: var(--papier); background: color-mix(in srgb, var(--papier) 5%, transparent); }

/* ---------------------------------------------------------------- pied de page */

.footer { border-top: 1px solid var(--trait); padding: clamp(48px, 6vw, 72px) 0 34px; background: var(--noir); }
.footer__grid { display: grid; gap: 32px; }
@media (min-width: 780px) { .footer__grid { grid-template-columns: 1fr auto; align-items: start; } }
.footline { margin: 0; color: var(--craie-2); font-size: 14px; letter-spacing: .02em; }
.footer__nav { display: grid; gap: 10px; }
@media (min-width: 780px) { .footer__nav { justify-items: end; } }
.footer__nav a { font-size: 14.5px; color: var(--craie); text-decoration: none; }
.footer__nav a:hover { color: var(--papier); text-decoration: underline; text-underline-offset: 3px; }
.footer__base {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  margin-top: clamp(40px, 5vw, 60px); padding-top: 22px; border-top: 1px solid var(--trait);
}
.footer__base p { margin: 0; font-size: 13px; color: var(--craie-2); }

/* ---------------------------------------------------------------- page mentions légales */

.legal { padding: 130px 0 clamp(60px, 8vw, 100px); }
.legal h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 12px; }
.legal .updated { color: var(--craie-2); font-size: 14px; margin: 0 0 clamp(40px, 5vw, 62px); }
.legal section { padding: 30px 0; border-top: 1px solid var(--trait); }
.legal h2 { font-size: clamp(19px, 2vw, 24px); margin: 0 0 14px; font-weight: 620; letter-spacing: -.018em; }
.legal p, .legal li { color: var(--papier-2); max-width: 68ch; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal .todo {
  background: color-mix(in srgb, var(--papier) 7%, transparent);
  border: 1px dashed var(--trait-2);
  padding: 1px 7px; border-radius: 2px; font-size: .92em; color: var(--papier);
}
.legal .back { display: inline-block; margin-top: 34px; font-size: 15px; color: var(--craie); }
.legal-top { position: static; opacity: 1; pointer-events: auto; background: none; }

/* Sous-section (Sécurité, dans le panneau papier) : même voix, un cran plus bas. */
.statement--sub { font-size: clamp(24px, 3vw, 38px); margin-top: 8px; }
#securite { margin-top: 64px; }

/* La carte « Et le vôtre » : volontairement inachevée — un emplacement qui attend son métier. */
.trade--open { border-style: dashed; }
.trade--open .trade__ico { opacity: .55; }

/* Cartes métiers centrées (retour Maëlle/Pierre 28/07) — l'icône d'abord. */
.trade { text-align: center; }
.trade__ico { margin-inline: auto; display: block; }


/* ── Pages métier (22/09) : héros statique, grille de fonctionnalités, cartes métier cliquables ── */
.hero--page { height: auto; min-height: 0; padding: calc(var(--sect) * .9 + 48px) 0 calc(var(--sect) * .5); }
.hero--page .hero__copy { position: static; transform: none; opacity: 1; max-width: var(--w); text-align: left; padding-bottom: 0; }
.hero--page h1, .hero--page .lede { max-width: 900px; }
/* Sur une page métier il n'y a pas d'animation à laisser respirer : la barre est visible d'emblée. */
.topbar--page { opacity: 1; pointer-events: auto; }
.hero--page h1 { font-size: clamp(30px, 4.6vw, 56px); line-height: 1.08; }
.hero--page .lede { margin-inline: 0; max-width: 62ch; }
.hero--page .hero__cta { justify-content: flex-start; }
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 32px; margin-top: 34px; }
.feat h3 { font-size: 18px; margin: 0 0 6px; }
.feat p { margin: 0; color: var(--craie); line-height: 1.5; font-size: 15px; }
.trade--link { text-decoration: none; color: inherit; display: block; }
.trade--link:hover { border-color: var(--papier); }
.trade__more { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--papier); }

/* ------------------------------------------------ refonte 29/09 : récits, captures, « ça remplace » */

.shot { margin: 0; }
.shot img { width: 100%; height: auto; border: 1px solid var(--trait-2); border-radius: 10px; background: var(--noir-3); }
.shot figcaption { margin-top: 10px; font-size: 14px; color: var(--craie); }
.shot--phone { max-width: 300px; }

.story { display: grid; gap: var(--gap); margin-top: clamp(40px, 6vw, 72px); align-items: start; }
@media (min-width: 960px) { .story { grid-template-columns: 1.05fr 1fr; } .story--flip .shot { order: -1; } }
.story h3 { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 6px; line-height: 1.25; }
.story .when { color: var(--craie); margin: 0 0 22px; }
.ba { display: grid; gap: 16px; }
@media (min-width: 560px) { .ba { grid-template-columns: 1fr 1fr; } }
.ba > div { border: 1px solid var(--trait); border-radius: 10px; padding: 18px 20px; }
.ba .after { border-color: var(--trait-2); background: var(--noir-3); }
.ba h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--craie); font-weight: 600; }
.ba .after h4 { color: var(--papier); }
.ba ol { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.ba li { margin: 0 0 8px; color: var(--craie); }
.ba .after li { color: var(--papier); }
.story .note { margin: 16px 0 0; font-size: 14px; color: var(--craie); }

.replace { display: grid; gap: 0; margin-top: 34px; grid-template-columns: 1fr; border-top: 1px solid var(--trait); }
@media (min-width: 760px) { .replace { grid-template-columns: 1fr 1fr; column-gap: var(--gap); } }
.replace li { list-style: none; display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--trait); font-size: 15.5px; line-height: 1.45; }
.replace b { min-width: 9.5em; font-weight: 600; }
.replace span { color: var(--craie); }
.replace { padding: 0; margin-bottom: 0; }

.avail { display: grid; gap: 18px; margin-top: 30px; }
@media (min-width: 860px) { .avail { grid-template-columns: repeat(3, 1fr); } }
.avail > div { border: 1px solid color-mix(in srgb, var(--encre) 20%, transparent); border-radius: 10px; padding: 20px; }
.avail h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--encre) 74%, transparent); }
.avail p { margin: 0; font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--encre) 88%, transparent); }
.avail ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--encre) 88%, transparent); }
.avail li { margin-bottom: 6px; }

.duo { display: grid; gap: var(--gap); align-items: center; margin-top: 40px; }
@media (min-width: 860px) { .duo { grid-template-columns: 1.4fr 1fr; } }
.duo .shot--phone { justify-self: center; }

/* épuration 29/09 : récits sans boîtes, liste « remplace » aérée */
.steps-min { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps-min li { counter-increment: s; position: relative; padding: 0 0 18px 44px; font-size: 17px; line-height: 1.5; color: var(--papier); }
.steps-min li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border: 1px solid var(--trait-2); border-radius: 50%; text-align: center; font-size: 13px; line-height: 24px; color: var(--craie); }
.story { margin-top: clamp(56px, 9vw, 110px); }
.story .when { margin-bottom: 26px; }
.replace li { padding: 18px 0; font-size: clamp(17px, 1.6vw, 20px); }
.replace b { min-width: 0; font-weight: 560; }

/* ------------------------------------------------ thème clair (08/10) : suit le réglage du système
   Les jetons gardent leur nom d'origine (« noir » = fond, « papier » = texte) et s'inversent : le
   panneau papier devient alors un panneau d'encre, sans règle de plus. Le héros animé reste noir
   dans les deux thèmes (ses images sont du papier blanc détouré), tout comme la barre haute tant
   qu'elle passe dessus. Le mot-symbole (PNG clair) est inversé quand il est posé sur du clair. */

.topbar.is-on-paper .wordmark img { filter: invert(1); }

@media (prefers-color-scheme: light) {
  :root {
    --noir:      #f5f3ee;
    --noir-2:    #ebe8e1;
    --noir-3:    #ffffff;
    --papier:    #141416;
    --papier-2:  #2e2d2a;
    /* Gris calés AA sur le fond clair. */
    --craie:     #57544d;
    --craie-2:   #64605a;
    --trait:     rgba(20, 20, 22, .13);
    --trait-2:   rgba(20, 20, 22, .3);
    --encre:     #f2efe9;
    --blanc:     #000;
    --alerte:    #b4472f;
    --alerte-texte: #8f3320;
  }
  .hero:not(.hero--page), .topbar.is-on-hero {
    --noir:      #0b0b0c;
    --noir-2:    #101012;
    --noir-3:    #16161a;
    --papier:    #f2efe9;
    --papier-2:  #e6e2d9;
    --craie:     #9c988e;
    --craie-2:   #85827a;
    --trait:     rgba(242, 239, 233, .13);
    --trait-2:   rgba(242, 239, 233, .28);
    --encre:     #131315;
    --blanc:     #fff;
    color: var(--papier);
  }
  .hero:not(.hero--page) { background: var(--noir); }
  .wordmark img { filter: invert(1); }
  .topbar.is-on-paper .wordmark img, .topbar.is-on-hero .wordmark img { filter: none; }
  .shot img { border-color: var(--trait); }
  .card { box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .35); }
}

/* Lien de langue : toujours visible, même sur téléphone où le menu se replie. */
.topnav a.lang { letter-spacing: .1em; }
@media (max-width: 720px) { .topnav a.lang { display: inline; } }