/* ══════════════════════════════════════════════════════════════════════
   MARQUE JOBKRAKEN — FEUILLE UNIQUE DU PROGRAMME CREATEURS
   ══════════════════════════════════════════════════════════════════════

   SOURCE DES COULEURS
   Les dix jetons --jk-* sont les VALEURS REELLES du site jobkraken.fr,
   relevees le 27 aout 2026 dans la feuille servie en production
   /_next/static/chunks/1nzci65s34njh.css, ou elles portent le prefixe
   --color-jk-*. Ce ne sont pas des reconstructions.

   Les maquettes validees portaient dix valeurs approchees. Neuf des dix
   different du site reel. Le detail chiffre est dans le RAPPORT.

   REGLE DE CETTE FEUILLE
   Aucune valeur hexadecimale hors du bloc :root ci-dessous. Une couleur
   qui n'a pas de jeton n'a pas le droit d'exister : il faut lui en
   creer un ici, sous un nom qui dit son role.

   POLICES
   Servies par ce VPS, jamais par un CDN tiers. Archivo, DM Sans et
   JetBrains Mono sont sous licence SIL Open Font License 1.1, qui
   autorise explicitement la redistribution et l'auto-hebergement.
   Le detour par fonts.gstatic.com communiquerait l'adresse IP de chaque
   ambassadeur a un tiers a chaque page : ici il n'a aucune contrepartie.
   Les trois fichiers sont des polices VARIABLES : un seul fichier par
   famille couvre toutes les graisses de 100 a 900.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── POLICES AUTO-HEBERGEES ─────────────────────────────────────────── */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/polices/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/polices/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/polices/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/polices/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/polices/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/polices/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ─── JETONS ─────────────────────────────────────────────────────────── */

:root {
  /* Les dix jetons de marque, valeurs mesurees sur jobkraken.fr. */
  --jk-ink: #0b0e08;
  --jk-ink-2: #3c4136;
  --jk-gris: #6a705e;
  --jk-trait: #e4e6da;
  --jk-paper: #fcfcf8;
  --jk-surface: #f4f5ef;
  --jk-sable: #f3f4ec;
  --jk-tint: #eef6d2;
  --jk-lime: #d7f13f;
  --jk-deep: #5f7a00;

  /*
   * Jetons supplementaires releves sur le meme site. --jk-deep-hover est
   * l'etat survol officiel de --jk-deep ; --jk-trait-fort borde ce qui
   * doit se detacher plus nettement que --jk-trait.
   */
  --jk-deep-hover: #4b6100;
  --jk-trait-fort: #d4d6cb;
  --jk-ink-faible: #8a8f7e;

  /*
   * Roles n'ayant pas de jeton sur le site public. Ils sont declares ici
   * pour qu'aucune valeur ne soit ecrite ailleurs dans la feuille.
   * --jk-avert-* : l'encart d'avertissement de la page de confirmation,
   * repris tel quel des maquettes validees.
   */
  --jk-blanc: #ffffff;
  --jk-placeholder: #b6b9ae;
  --jk-avert-fond: #fff6e9;
  --jk-avert-trait: #ebd5b0;
  --jk-avert-texte: #6b4a16;

  /* Etats de l'espace ambassadeur, derives de la palette de marque. */
  --jk-ok: #2f6d1f;
  --jk-ok-fond: #eef6d2;
  --jk-alerte: #8a3312;
  --jk-alerte-fond: #fff6e9;

  /* Ombres et voiles. Exprimes en rgb() a partir de --jk-ink-rgb. */
  --jk-ink-rgb: 11, 14, 8;
  --jk-paper-rgb: 252, 252, 248;
  --jk-blanc-rgb: 255, 255, 255;

  /*
   * Couleurs d'avatar du panneau illustratif. Ce sont les valeurs
   * reelles --color-jk-avatar-* de jobkraken.fr, relevees au sprint 7.
   * Le panneau ne montre aucune donnee reelle : il est aria-hidden.
   */
  --jk-av-1: #5f7a00;
  --jk-av-2: #e8590c;
  --jk-av-3: #1971c2;
  /* Voile de la barre collante : --jk-paper a 90 %, derriere un flou. */
  --jk-paper-voile: rgba(var(--jk-paper-rgb), 0.9);
  --jk-ombre-carte: 0 24px 60px -34px rgba(var(--jk-ink-rgb), 0.24);
  --jk-ombre-panneau: 0 24px 60px -30px rgba(var(--jk-ink-rgb), 0.2);

  --max: 1080px;
  --fd: 'Archivo', system-ui, sans-serif;
  --fb: 'DM Sans', system-ui, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, monospace;
}

/* ─── SOCLE ──────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--jk-paper);
  color: var(--jk-ink);
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
p { margin: 0; }

/*
 * Anneau de focus visible et epais. Il ne suit PAS la couleur de marque :
 * --jk-ink est le plus contraste de tous les jetons sur tous les fonds
 * clairs de la palette, ce qui est exactement ce qu'on demande a un
 * indicateur de focus.
 */
:focus-visible {
  outline: 2.5px solid var(--jk-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 22px;
  width: 100%;
}

.eyebrow {
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jk-gris);
}

h1, h2, h3 {
  font-family: var(--fd);
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
h2 { font-size: clamp(25px, 3.7vw, 36px); font-weight: 700; letter-spacing: -0.026em; line-height: 1.12; }
h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em; }

/* ─── BOUTONS ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--fd);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid var(--jk-ink);
  background: var(--jk-ink);
  color: var(--jk-blanc);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.btn:hover { transform: translateY(-1.5px); }
.btn-lime { background: var(--jk-lime); color: var(--jk-ink); }
.btn-dark { background: var(--jk-ink); color: var(--jk-blanc); }
.btn-sm { padding: 9px 17px; font-size: 13.5px; }
.btn-line { background: transparent; color: var(--jk-ink); border-color: var(--jk-trait); }
.btn-bloc {
  width: 100%;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 24px;
  margin-top: 8px;
}

/* ─── EN-TETE ────────────────────────────────────────────────────────── */

.nav { border-bottom: 1px solid var(--jk-trait); background: var(--jk-blanc); }
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--jk-ink);
  display: grid;
  place-items: center;
  color: var(--jk-lime);
  font-family: var(--fd);
  font-weight: 800;
  font-size: 14px;
}
.logo-txt { font-family: var(--fd); font-weight: 500; font-size: 16px; letter-spacing: -0.02em; }
.logo-txt b { font-weight: 800; }
.tag {
  font-family: var(--fm);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--jk-trait);
  border-radius: 999px;
  color: var(--jk-ink-2);
  background: var(--jk-blanc);
}
.nav-link { font-size: 13.5px; text-decoration: none; color: var(--jk-ink-2); }
.nav-link:hover { color: var(--jk-ink); }

/* ─── PIED ───────────────────────────────────────────────────────────── */

footer {
  padding: 28px 0;
  font-size: 12.5px;
  color: var(--jk-gris);
  border-top: 1px solid var(--jk-trait);
}
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot a { text-decoration: none; margin-left: 16px; }

/* ─── CARTES ET PRIMITIVES DE FORMULAIRE ─────────────────────────────── */

.card {
  background: var(--jk-blanc);
  border: 1px solid var(--jk-trait);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--jk-ombre-carte);
}
.card-h { padding-bottom: 18px; border-bottom: 1px solid var(--jk-trait); margin-bottom: 22px; }
.card-h h3 { font-size: 18px; }
.card-h p { font-size: 13.5px; color: var(--jk-gris); margin-top: 5px; }

.tick {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--jk-lime);
  border: 1px solid var(--jk-ink);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  flex: none;
  margin-top: 2px;
}

.f { margin-bottom: 18px; }
label { display: block; font-family: var(--fd); font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.hint { font-size: 12.5px; color: var(--jk-gris); margin-bottom: 8px; }

input[type='text'],
input[type='email'],
input[type='url'] {
  width: 100%;
  font-family: var(--fb);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--jk-trait);
  border-radius: 12px;
  background: var(--jk-paper);
  color: var(--jk-ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
input:focus { background: var(--jk-blanc); border-color: var(--jk-ink); outline: none; }
input::placeholder { color: var(--jk-placeholder); }

.prefix {
  display: flex;
  align-items: center;
  border: 1px solid var(--jk-trait);
  border-radius: 12px;
  background: var(--jk-paper);
  overflow: hidden;
}
.prefix:focus-within { border-color: var(--jk-ink); background: var(--jk-blanc); }
.prefix span { font-family: var(--fm); font-size: 15px; color: var(--jk-gris); padding: 0 2px 0 14px; }
.prefix input { border: 0; background: transparent; padding-left: 2px; }
.prefix input:focus { outline: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--jk-trait);
  border-radius: 12px;
  background: var(--jk-paper);
  margin-bottom: 12px;
  cursor: pointer;
}
.check input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--jk-ink); flex: none; }
.check .t { font-size: 13.5px; color: var(--jk-ink-2); }
.check .t a { font-weight: 600; color: var(--jk-ink); }
.legal { margin-top: 14px; font-size: 12px; color: var(--jk-gris); text-align: center; }

.erreur {
  background: var(--jk-alerte-fond);
  border: 1px solid var(--jk-avert-trait);
  color: var(--jk-alerte);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE PUBLIQUE — /createurs
   ══════════════════════════════════════════════════════════════════════ */

.p-landing h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 800; }

.p-landing .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--jk-paper-voile);
  backdrop-filter: blur(12px);
}

.hero {
  background:
    radial-gradient(ellipse 900px 420px at 50% -10%, var(--jk-tint) 0%, transparent 66%),
    linear-gradient(180deg, var(--jk-surface) 0%, var(--jk-paper) 60%);
  border-bottom: 1px solid var(--jk-trait);
  padding: 52px 0 46px;
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hero h1 { margin-top: 14px; }
.hl { background: linear-gradient(180deg, transparent 60%, var(--jk-lime) 60%); padding: 0 3px; }
.hero-sub { margin-top: 18px; font-size: 16px; color: var(--jk-ink-2); max-width: 44ch; }
.hero-cta { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.hero-note { margin-top: 14px; font-family: var(--fm); font-size: 11px; color: var(--jk-gris); }

/* Simulateur du hero. */
.sim {
  background: var(--jk-blanc);
  border: 1px solid var(--jk-trait);
  border-radius: 22px;
  padding: 24px;
  box-shadow: var(--jk-ombre-panneau);
}
.sim-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--jk-trait);
}
.sim-top .l {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jk-gris);
}
.sim-top .v { font-family: var(--fd); font-weight: 700; font-size: 16px; }
.sim-euro {
  font-family: var(--fd);
  font-weight: 800;
  letter-spacing: -0.045em;
  font-size: clamp(46px, 8vw, 62px);
  line-height: 1;
  margin: 22px 0 4px;
}
.sim-cap {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--jk-gris);
}
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 99px;
  background: var(--jk-sable);
  outline: none;
  margin: 24px 0 6px;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--jk-lime);
  border: 1.5px solid var(--jk-ink);
  cursor: pointer;
}
input[type='range']::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--jk-lime);
  border: 1.5px solid var(--jk-ink);
  cursor: pointer;
}
.sim-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--fm);
  font-size: 9.5px;
  color: var(--jk-gris);
}
.sim-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--jk-trait);
  font-size: 12.5px;
  color: var(--jk-gris);
}

/* Bandeau defilant. */
.marq {
  border-bottom: 1px solid var(--jk-trait);
  background: var(--jk-sable);
  overflow: hidden;
  padding: 11px 0;
}
.marq-track { display: flex; width: max-content; animation: slide 36s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }
.marq span {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jk-ink-2);
  padding: 0 16px;
  white-space: nowrap;
}

.p-landing section { padding: 64px 0; }
.alt {
  background: var(--jk-surface);
  border-top: 1px solid var(--jk-trait);
  border-bottom: 1px solid var(--jk-trait);
}
.head { max-width: 52ch; margin-bottom: 34px; }
.head h2 { margin-top: 10px; }
.head p { margin-top: 12px; color: var(--jk-ink-2); }

.cmp { border: 1px solid var(--jk-trait); border-radius: 18px; overflow: hidden; background: var(--jk-blanc); }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--jk-trait); }
.cmp-row:first-child { border-top: 0; background: var(--jk-paper); }
.cmp-row > div { padding: 14px 18px; font-size: 14px; }
.cmp-row > div:nth-child(2) { border-left: 1px solid var(--jk-trait); color: var(--jk-gris); }
.cmp-row > div:nth-child(3) { border-left: 1px solid var(--jk-trait); font-weight: 500; }
.cmp-h {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--jk-gris);
}

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step { background: var(--jk-blanc); border: 1px solid var(--jk-trait); border-radius: 16px; padding: 20px; }
.step .n {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--jk-gris);
  display: block;
  margin-bottom: 12px;
}
.step h3 { margin-bottom: 6px; }
.step p { font-size: 13.5px; color: var(--jk-ink-2); }

.pts { border: 1px solid var(--jk-trait); border-radius: 18px; background: var(--jk-blanc); overflow: hidden; }
.pt { display: flex; gap: 16px; align-items: baseline; padding: 15px 20px; border-top: 1px solid var(--jk-trait); }
.pt:first-child { border-top: 0; }
.pt .k { font-family: var(--fm); font-size: 10px; font-weight: 700; color: var(--jk-gris); flex: none; width: 16px; }
.pt strong { font-family: var(--fd); font-weight: 700; font-size: 14.5px; }
.pt em { font-style: normal; color: var(--jk-ink-2); font-size: 14px; }

.prod { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.prod h2 { margin-top: 10px; }
.prod > div > p { margin-top: 14px; color: var(--jk-ink-2); }
.prod ul { margin: 18px 0 0; padding: 0; list-style: none; }
.prod li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--jk-trait);
  font-size: 14px;
}
.prod .tick { margin-top: 0; }
.mail { border: 1px solid var(--jk-trait); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.mail:last-child { margin-bottom: 0; }
.mail .f {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jk-gris);
  margin-bottom: 6px;
}
.mail .b { font-size: 13.5px; color: var(--jk-ink-2); }

.p-landing details { border-bottom: 1px solid var(--jk-trait); padding: 16px 0; }
.p-landing summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  font-family: var(--fd);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.015em;
}
.p-landing summary::-webkit-details-marker { display: none; }
.p-landing summary::after { content: '+'; font-family: var(--fm); font-size: 17px; color: var(--jk-gris); }
.p-landing details[open] summary::after { content: '–'; }
.p-landing details p { margin-top: 10px; color: var(--jk-ink-2); font-size: 14.5px; max-width: 66ch; }
.faq { max-width: 760px; }

/*
 * Bloc final. Il utilise --jk-ink et NON --jk-deep : sur le site reel
 * --jk-deep vaut #5f7a00, un olive d'accent, et non le fond sombre que
 * les maquettes lui pretaient. Sur cet olive, l'eyebrow lime tombe a
 * 3,87:1 et le paragraphe a 2,95:1, sous le seuil AA. Sur --jk-ink le
 * blanc est a 18,90:1. Meme intention visuelle, aucune valeur inventee.
 */
.final { background: var(--jk-ink); color: var(--jk-blanc); text-align: center; padding: 70px 0; }
.final .eyebrow { color: var(--jk-lime); }
.final h2 { color: var(--jk-blanc); max-width: 17ch; margin: 12px auto 0; }
.final p { color: var(--jk-tint); margin: 14px auto 24px; max-width: 46ch; font-size: 15px; }

/* ══════════════════════════════════════════════════════════════════════
   PAGES INTERIEURES — /inscription, /connexion, /a/<jeton>, /aide
   ══════════════════════════════════════════════════════════════════════ */

.page {
  background:
    radial-gradient(ellipse 800px 380px at 50% -12%, var(--jk-tint) 0%, transparent 68%),
    linear-gradient(180deg, var(--jk-surface) 0%, var(--jk-paper) 46%);
  min-height: calc(100vh - 60px);
  padding: 46px 0 64px;
}

/* ─── /inscription ───────────────────────────────────────────────────── */

.p-inscription h1 { font-size: clamp(30px, 4.6vw, 42px); font-weight: 800; }
.p-inscription h3 { font-size: 15px; }

.grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.recap { position: sticky; top: 24px; }
.recap h1 { margin-top: 12px; }
.recap .lead { margin-top: 16px; color: var(--jk-ink-2); max-width: 34ch; }
.recap ul { list-style: none; margin: 26px 0 0; padding: 0; }
.recap li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid var(--jk-trait);
  font-size: 14px;
}

.done-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--jk-tint);
  border: 1px solid var(--jk-lime);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--fm);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.warn {
  display: flex;
  gap: 12px;
  background: var(--jk-avert-fond);
  border: 1px solid var(--jk-avert-trait);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 22px;
}
.warn .ic { font-size: 15px; line-height: 1.2; }
.warn .t { font-size: 13.5px; color: var(--jk-avert-texte); }
.warn strong { font-family: var(--fd); }

.slot {
  border: 1px solid var(--jk-trait);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 14px;
  background: var(--jk-paper);
}
.slot .n {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jk-gris);
  display: block;
  margin-bottom: 10px;
}
.code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--jk-blanc);
  border: 1px dashed var(--jk-ink);
  border-radius: 12px;
  padding: 14px 16px;
}
.code .v { font-family: var(--fm); font-weight: 700; font-size: 19px; letter-spacing: 0.02em; word-break: break-all; }
.code.link .v { font-size: 13px; font-weight: 400; }
.copy {
  font-family: var(--fd);
  font-weight: 600;
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--jk-ink);
  background: var(--jk-ink);
  color: var(--jk-blanc);
  cursor: pointer;
  flex: none;
}
.copy.ok { background: var(--jk-lime); color: var(--jk-ink); }
.slot .after { font-size: 13px; color: var(--jk-ink-2); margin-top: 11px; }

.next { border-top: 1px solid var(--jk-trait); margin-top: 22px; padding-top: 20px; }
.next h3 { margin-bottom: 12px; }
.next ol { margin: 0; padding-left: 20px; font-size: 14px; color: var(--jk-ink-2); }
.next li { padding: 4px 0; }

/* ─── /connexion ─────────────────────────────────────────────────────── */

.p-connexion { display: flex; flex-direction: column; min-height: 100vh; }
.p-connexion h1 { font-size: clamp(28px, 4.2vw, 38px); font-weight: 800; }
.p-connexion h3 { font-size: 15px; }
.p-connexion .page { flex: 1; display: flex; align-items: center; padding: 56px 0; min-height: 0; }
.p-connexion .wrap { max-width: 1000px; }

.box { max-width: 520px; margin: 0 auto; text-align: center; }
.box h1 { margin-top: 12px; }
.box .lead { margin-top: 16px; color: var(--jk-ink-2); }
.box .card { text-align: left; margin-top: 28px; padding: 26px; }
.box input[type='text'] { font-family: var(--fm); font-size: 13.5px; }

.sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 22px;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jk-gris);
}
.sep::before, .sep::after { content: ''; flex: 1; height: 1px; background: var(--jk-trait); }

.lost {
  background: var(--jk-paper);
  border: 1px solid var(--jk-trait);
  border-radius: 16px;
  padding: 18px 20px;
  text-align: left;
}
.lost h3 { margin-bottom: 8px; }
.lost p { font-size: 13.5px; color: var(--jk-ink-2); }
.lost ol { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--jk-ink-2); }
.lost li { padding: 3px 0; }
.mono { font-family: var(--fm); font-size: 12.5px; background: var(--jk-sable); padding: 2px 6px; border-radius: 5px; }

.new { margin-top: 24px; font-size: 13.5px; color: var(--jk-gris); text-align: center; }
.new a { font-family: var(--fd); font-weight: 700; color: var(--jk-ink); }

/* ══════════════════════════════════════════════════════════════════════
   SECTION D — ESPACE AMBASSADEUR ET AIDE
   Rhabillage seul : aucun libelle, aucun montant, aucune regle ne change.
   ══════════════════════════════════════════════════════════════════════ */

.p-espace h1, .p-aide h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; }
.p-espace .wrap, .p-aide .wrap { max-width: 760px; }
.p-espace h2, .p-aide h2 { font-size: clamp(20px, 2.6vw, 25px); margin-top: 34px; }

.carte {
  background: var(--jk-blanc);
  border: 1px solid var(--jk-trait);
  border-radius: 18px;
  padding: 22px;
  margin-top: 16px;
  box-shadow: var(--jk-ombre-carte);
}

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.chiffre {
  background: var(--jk-blanc);
  border: 1px solid var(--jk-trait);
  border-radius: 16px;
  padding: 18px;
}
.chiffre .libelle {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jk-gris);
  display: block;
  margin-bottom: 8px;
}
.chiffre .valeur { font-family: var(--fd); font-weight: 800; font-size: 28px; letter-spacing: -0.04em; }

.etiq {
  display: inline-block;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--jk-trait);
  background: var(--jk-paper);
  color: var(--jk-ink-2);
}
.etiq-actif { background: var(--jk-ok-fond); border-color: var(--jk-lime); color: var(--jk-ok); }
.etiq-attente { background: var(--jk-sable); color: var(--jk-ink-2); }
.etiq-suspendu { background: var(--jk-avert-fond); border-color: var(--jk-avert-trait); color: var(--jk-alerte); }

.grand-code, .lien-prive {
  font-family: var(--fm);
  font-weight: 700;
  font-size: 18px;
  background: var(--jk-blanc);
  border: 1px dashed var(--jk-ink);
  border-radius: 12px;
  padding: 14px 16px;
  word-break: break-all;
  display: block;
}
.lien-prive { font-size: 13px; font-weight: 400; }

.points { list-style: none; margin: 14px 0 0; padding: 0; }
.points li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--jk-trait);
  font-size: 14px;
  color: var(--jk-ink-2);
}
.points li:first-child { border-top: 0; }
.points .k {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--jk-gris);
  flex: none;
  width: 16px;
  padding-top: 2px;
}

/*
 * Tableau des videos declarees. Il deborde sur telephone : le conteneur
 * .defile fait defiler CE tableau, jamais la page entiere. Un tableau
 * qui pousse le body en largeur casse toute la mise en page autour.
 */
.p-espace table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 420px; }
.p-espace th {
  text-align: left;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--jk-gris);
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--jk-trait);
}
.p-espace td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--jk-trait); vertical-align: top; }
.p-espace tr:last-child td { border-bottom: 0; }
.p-espace td.num { font-family: var(--fm); white-space: nowrap; }

.accroche { font-size: 16px; color: var(--jk-ink-2); margin-top: 14px; max-width: 52ch; }
.alerte, .avertissement {
  display: flex;
  gap: 12px;
  background: var(--jk-avert-fond);
  border: 1px solid var(--jk-avert-trait);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--jk-avert-texte);
}
.message.ok, .ok {
  background: var(--jk-ok-fond);
  border: 1px solid var(--jk-lime);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--jk-ok);
}
.vide { color: var(--jk-gris); font-size: 14px; margin-top: 12px; }
.pause { color: var(--jk-gris); font-size: 13px; font-family: var(--fm); }
.num { font-family: var(--fm); font-weight: 700; }
.case { padding: 10px 0; border-top: 1px solid var(--jk-trait); font-size: 14px; }
.defile { overflow-x: auto; }

/* Encart d'aide, present sur plusieurs pages. */
.aide-encart {
  background: var(--jk-blanc);
  border: 1px solid var(--jk-trait);
  border-radius: 18px;
  padding: 22px;
  margin-top: 34px;
}
.aide-form { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.aide-form input { flex: 1; min-width: 200px; }
.aide-champ { width: 100%; }
.aide-reponse {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--jk-tint);
  border: 1px solid var(--jk-lime);
  border-radius: 12px;
  font-size: 14px;
  color: var(--jk-ink-2);
}
.aide-note { margin-top: 12px; font-size: 12.5px; color: var(--jk-gris); }
.reponse {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--jk-blanc);
  border: 1px solid var(--jk-trait);
  border-radius: 14px;
  font-size: 14.5px;
  color: var(--jk-ink-2);
}
.sujets { list-style: none; margin: 14px 0 0; padding: 0; }
.sujets li { padding: 10px 0; border-top: 1px solid var(--jk-trait); font-size: 14px; }
.sujets li:first-child { border-top: 0; }

.formulaire { margin-top: 18px; }
.btn-ok { background: var(--jk-lime); color: var(--jk-ink); }
.btn-large { padding: 15px 26px; font-size: 16px; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   ADMINISTRATION
   Hors du perimetre de refonte du sprint 7 : ce bloc ne fait que
   remplacer la feuille sombre supprimee, avec les memes jetons que le
   reste, pour que /admin reste lisible et accessible.
   ══════════════════════════════════════════════════════════════════════ */

.admin { padding: 0 22px 64px; max-width: 1180px; margin: 0 auto; }
.admin header { padding: 26px 0 18px; border-bottom: 1px solid var(--jk-trait); margin-bottom: 8px; }
.admin h1 { font-size: 26px; font-weight: 800; }
.admin h2 { font-size: 19px; margin-top: 34px; }
.admin section { margin-top: 18px; }

.admin .aide, .admin .meta { font-size: 12.5px; color: var(--jk-gris); margin-top: 8px; }
.admin .detail { font-size: 13px; color: var(--jk-ink-2); }
.admin .compte {
  display: inline-block;
  font-family: var(--fm);
  font-size: 12px;
  background: var(--jk-sable);
  border-radius: 6px;
  padding: 2px 7px;
}
.admin .ligne-fournisseur, .admin .formulaire-secret {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.admin .formulaire-secret input { width: auto; min-width: 260px; flex: 1; }
.admin form { margin-top: 12px; }

.admin table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.admin th {
  text-align: left;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--jk-gris);
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--jk-trait);
}
.admin td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--jk-trait); vertical-align: top; }
.admin td.num { font-family: var(--fm); white-space: nowrap; }
.admin .defile { overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════════════
   ADAPTATION AUX PETITS ECRANS
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 880px) {
  .hero-grid, .prod { grid-template-columns: 1fr; gap: 32px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr; gap: 32px; }
  .recap { position: static; }
  .recap ul { display: none; }
}

@media (max-width: 600px) {
  .p-landing section { padding: 48px 0; }
  .steps { grid-template-columns: 1fr; }
  .cmp-row { grid-template-columns: 1fr; }
  .cmp-row > div:nth-child(2), .cmp-row > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--jk-trait);
  }
  .tag { display: none; }
}

@media (max-width: 560px) {
  .two { grid-template-columns: 1fr; }
  .card { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   SPRINT 8 — CANDIDATURE, INSTAGRAM, PAGES V4
   ══════════════════════════════════════════════════════════════════════ */

/* ─── pastille d'etat, en tete du hero ───────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--jk-blanc);
  border: 1px solid var(--jk-trait);
  border-radius: 999px;
  padding: 5px 13px 5px 7px;
  font-family: var(--fm);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jk-ink-2);
  margin-bottom: 16px;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jk-lime);
  border: 1px solid var(--jk-ink);
}

/* ─── le logo, servi comme fichier et non comme base64 ───────────────── */

.mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ─── comparatif en deux cartes ──────────────────────────────────────── */

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs-card { border: 1px solid var(--jk-trait); border-radius: 20px; padding: 22px; background: var(--jk-blanc); }
.vs-card.win {
  border: 1.5px solid var(--jk-ink);
  background: var(--jk-tint);
  box-shadow: 0 18px 44px -26px rgba(var(--jk-ink-rgb), 0.4);
}
.vs-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--jk-trait);
  margin-bottom: 6px;
}
.vs-h .t { font-family: var(--fd); font-weight: 700; font-size: 17px; }
.vs-card.win .vs-h { border-color: rgba(var(--jk-ink-rgb), 0.18); }
.badge-win {
  font-family: var(--fm);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--jk-lime);
  border: 1px solid var(--jk-ink);
  border-radius: 999px;
  padding: 3px 9px;
}
.vs-line { display: flex; gap: 11px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--jk-trait); }
.vs-card.win .vs-line { border-color: rgba(var(--jk-ink-rgb), 0.1); }
.vs-line:last-child { border-bottom: 0; padding-bottom: 0; }
.vs-k {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jk-gris);
  width: 88px;
  flex: none;
}
.vs-v { font-size: 14.5px; }
.vs-card.win .vs-v { font-weight: 500; }

/* ─── bandeau « une video, deux plateformes » ────────────────────────── */

.dbl {
  margin-top: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--jk-ink);
  color: var(--jk-blanc);
  border-radius: 20px;
  padding: 22px 24px;
}
.dbl-ic {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--jk-lime);
  color: var(--jk-ink);
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 700;
  flex: none;
}
.dbl h3 { font-size: 17px; color: var(--jk-blanc); margin-bottom: 5px; }
.dbl p { font-size: 13.5px; color: rgba(var(--jk-blanc-rgb), 0.7); max-width: 52ch; }
.dbl-n {
  text-align: right;
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(var(--jk-blanc-rgb), 0.55);
  line-height: 1.7;
  white-space: nowrap;
}
.dbl-n em { font-style: normal; display: inline-block; width: 66px; text-align: left; margin-left: 8px; }
.dbl-n b {
  display: block;
  font-family: var(--fd);
  font-size: 26px;
  color: var(--jk-lime);
  letter-spacing: -0.03em;
  margin-top: 6px;
}

/* ─── les quatre attendus ────────────────────────────────────────────── */

.chk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ch {
  background: var(--jk-blanc);
  border: 1px solid var(--jk-trait);
  border-radius: 20px;
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.ch::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--jk-lime); }
.ch .ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--jk-tint);
  border: 1px solid var(--jk-trait);
  display: grid;
  place-items: center;
  font-size: 18px;
  margin-bottom: 14px;
}
.ch h3 { font-size: 16px; margin-bottom: 6px; line-height: 1.25; }
.ch p { font-size: 13.5px; color: var(--jk-ink-2); }

/* ─── panneau illustratif « Campagne en cours » ──────────────────────── */

.panel {
  width: 100%;
  max-width: 470px;
  background: var(--jk-blanc);
  border: 1px solid var(--jk-trait);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(var(--jk-ink-rgb), 0.18);
}
.panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--jk-trait);
}
.panel-h .l {
  font-family: var(--fm);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jk-ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pouls { width: 7px; height: 7px; border-radius: 50%; background: var(--jk-deep); animation: pouls 2.2s ease-in-out infinite; }
@keyframes pouls { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel-h .r { font-size: 10.5px; color: var(--jk-gris); }
.panel-h .r b { font-weight: 600; color: var(--jk-ink); font-variant-numeric: tabular-nums; }
.rows { padding: 8px 10px; display: grid; gap: 6px; }
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--jk-blanc);
  border: 1px solid var(--jk-trait);
  border-radius: 999px;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.row.in { animation: pop 0.45s ease; }
.av {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--fm);
  font-size: 9px;
  color: var(--jk-blanc);
  flex: none;
}
.av-1 { background: var(--jk-av-1); }
.av-2 { background: var(--jk-av-2); }
.av-3 { background: var(--jk-av-3); }
.rw { flex: 1; min-width: 0; }
.rw .co { display: block; font-family: var(--fd); font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw .se { display: block; font-family: var(--fm); font-size: 8.5px; color: var(--jk-gris); }
.rw .ct { display: block; font-size: 10.5px; color: var(--jk-ink-2); }
.st {
  font-family: var(--fm);
  font-size: 7.5px;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
  transition: background 0.35s ease, color 0.35s ease;
}
.st.a { background: var(--jk-blanc); border: 1px solid var(--jk-trait); color: var(--jk-gris); }
.st.b { background: var(--jk-sable); color: var(--jk-ink-2); border: 1px solid transparent; }
.st.c { background: var(--jk-lime); color: var(--jk-ink); border: 1px solid transparent; }
.aper { margin: 0 10px 10px; background: var(--jk-tint); border-radius: 12px; padding: 8px 12px; }
.aper .l {
  font-family: var(--fm);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jk-deep);
  display: block;
  margin-bottom: 5px;
}
.aper p { font-family: var(--fm); font-size: 9.5px; color: var(--jk-ink-2); line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--jk-trait);
  font-size: 10.5px;
  color: var(--jk-gris);
}
.panel-f span.m {
  font-family: var(--fm);
  font-size: 9px;
  border: 1px solid var(--jk-trait);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--jk-ink-2);
  margin-left: 6px;
}

/* ─── candidature : champ libre, engagements, frise ──────────────────── */

.narrow { max-width: 600px; margin: 0 auto; }

textarea {
  width: 100%;
  font-family: var(--fb);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--jk-trait);
  border-radius: 12px;
  background: var(--jk-paper);
  color: var(--jk-ink);
  resize: vertical;
  min-height: 92px;
  line-height: 1.5;
  transition: border-color 0.15s, background 0.15s;
}
textarea:focus { background: var(--jk-blanc); border-color: var(--jk-ink); outline: none; }
textarea::placeholder { color: var(--jk-placeholder); }
.cnt { text-align: right; font-family: var(--fm); font-size: 10.5px; color: var(--jk-gris); margin-top: 6px; }
.opt {
  font-family: var(--fm);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--jk-gris);
  background: var(--jk-sable);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  font-weight: 400;
}
.cond { background: var(--jk-paper); border: 1px solid var(--jk-trait); border-radius: 16px; padding: 18px; margin: 22px 0 18px; }
.cond-h { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.cond-h h3 { font-size: 15.5px; }
.cond-h .c { font-family: var(--fm); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--jk-gris); margin-left: auto; }
.cond > .hint { margin-bottom: 14px; }
.q { display: flex; gap: 11px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--jk-trait); cursor: pointer; }
.q input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--jk-ink); flex: none; }
.q .t { font-size: 14px; }
.q .t b { font-family: var(--fd); font-weight: 700; }
.q .t em { font-style: normal; display: block; font-size: 12.5px; color: var(--jk-gris); margin-top: 2px; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }

.big {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 24px;
  margin-bottom: 16px;
  background: var(--jk-tint);
  border: 1px solid var(--jk-trait);
}
.big.ok { background: var(--jk-lime); border-color: var(--jk-ink); }
.timeline { margin-top: 20px; border-top: 1px solid var(--jk-trait); padding-top: 18px; }
.tl { display: flex; gap: 13px; padding: 10px 0; }
.tl .b { width: 11px; height: 11px; border-radius: 50%; flex: none; margin-top: 5px; border: 1.5px solid var(--jk-ink); background: var(--jk-blanc); }
.tl.done .b { background: var(--jk-lime); }
.tl.now .b { background: var(--jk-ink); box-shadow: 0 0 0 4px var(--jk-tint); }
.tl .t b { font-family: var(--fd); font-weight: 700; font-size: 14.5px; display: block; }
.tl .t span { font-size: 13px; color: var(--jk-gris); }

/* ─── etiquette de plateforme, dans l'espace ─────────────────────────── */

.plat {
  font-family: var(--fm);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 9px;
  border: 1px solid var(--jk-trait);
  background: var(--jk-blanc);
  color: var(--jk-ink-2);
  white-space: nowrap;
}
.plat-instagram { background: var(--jk-tint); border-color: var(--jk-lime); }

/* ─── arbitrage des candidatures, dans /admin ────────────────────────── */

.admin .arb { border: 1.5px solid var(--jk-ink); border-radius: 18px; padding: 18px; margin-bottom: 22px; background: var(--jk-tint); }
.admin .arb h2 { margin-top: 0; }
.admin .arb .retard { color: var(--jk-alerte); font-weight: 700; }
.admin .arb .motiv {
  background: var(--jk-blanc);
  border: 1px solid var(--jk-trait);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  font-size: 13.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.admin .arb form { display: inline-block; margin: 0 8px 0 0; }

@media (max-width: 880px) {
  .steps, .chk { grid-template-columns: 1fr 1fr; }
  .panel { margin: 0 auto; }
  .dbl { grid-template-columns: auto 1fr; }
  .dbl-n { grid-column: 1 / -1; text-align: left; border-top: 1px solid rgba(var(--jk-blanc-rgb), 0.15); padding-top: 12px; }
  .dbl-n b { margin-top: 4px; }
}
@media (max-width: 600px) {
  .vs { grid-template-columns: 1fr; gap: 12px; }
  .vs-card { padding: 18px; }
  .steps, .chk { grid-template-columns: 1fr; }
  .ch { display: flex; gap: 15px; align-items: flex-start; padding: 18px; }
  .ch .ico { margin-bottom: 0; flex: none; width: 34px; height: 34px; font-size: 16px; }
}


/* ══════════════════════════════════════════════════════════════════════
   SPRINT 9 — CONSOLE : « QUOI FAIRE MAINTENANT » ET ETAT DU SYSTEME
   ══════════════════════════════════════════════════════════════════════ */

/*
 * Le bloc d'accueil de la console. Il passe avant toute donnee, et il
 * doit se lire d'un coup d'oeil sur un telephone, le soir : c'est a ce
 * moment que les candidatures arrivent.
 */
.admin .quoi {
  border: 1.5px solid var(--jk-ink);
  border-radius: 18px;
  background: var(--jk-tint);
  padding: 18px 20px;
  margin: 18px 0 14px;
}
.admin .quoi h2 { margin-top: 0; font-size: 18px; }
.admin .quoi .rien {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 16px;
  margin-top: 6px;
}

.admin .todo { list-style: none; margin: 10px 0 0; padding: 0; }
.admin .todo li { border-top: 1px solid var(--jk-trait); }
.admin .todo li:first-child { border-top: 0; }
.admin .todo a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  text-decoration: none;
  flex-wrap: wrap;
}
.admin .todo .nb {
  font-family: var(--fd);
  font-weight: 800;
  font-size: 22px;
  min-width: 1.6em;
  text-align: right;
  letter-spacing: -0.03em;
}
.admin .todo .lib { font-size: 15px; flex: 1; min-width: 12ch; }
.admin .todo .age {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--jk-gris);
  white-space: nowrap;
}

/*
 * UN RETARD SE VOIT. Le filet epais a gauche porte l'alerte : la
 * couleur seule ne suffirait pas pour qui ne la distingue pas.
 */
.admin .todo li.tard {
  border-left: 4px solid var(--jk-alerte);
  padding-left: 12px;
  margin-left: -16px;
}
.admin .todo li.tard .nb { color: var(--jk-alerte); }
.admin .retard {
  font-size: 13px;
  color: var(--jk-alerte);
  font-weight: 700;
  margin: 0 0 12px;
  padding-left: 12px;
}

/* L'etat du systeme, sur une ligne. Du contexte, pas une action. */
.admin .sys { margin-bottom: 20px; }
.admin .ligne-sys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--fm);
  font-size: 11.5px;
  color: var(--jk-ink-2);
  background: var(--jk-paper);
  border: 1px solid var(--jk-trait);
  border-radius: 12px;
  padding: 10px 14px;
}
.admin .ligne-sys b {
  font-family: var(--fm);
  font-weight: 400;
  color: var(--jk-gris);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9.5px;
  display: block;
}

/*
 * CONFIRMATION D'UNE ACTION DESTRUCTRICE.
 *
 * Elle est un <details> : elle fonctionne SANS JavaScript. Le bouton
 * qui detruit n'est atteignable qu'apres avoir deplie, et le depliage
 * affiche ce que l'action detruit.
 */
.admin .confirme { display: inline-block; }
.admin .confirme > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--fd);
  font-weight: 600;
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--jk-trait);
  background: var(--jk-blanc);
  color: var(--jk-ink-2);
  display: inline-block;
}
.admin .confirme > summary::-webkit-details-marker { display: none; }
.admin .confirme[open] > summary { background: var(--jk-sable); border-color: var(--jk-ink); }
.admin .confirme .quoi-detruit {
  border: 1px solid var(--jk-avert-trait);
  background: var(--jk-avert-fond);
  color: var(--jk-avert-texte);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 8px;
  font-size: 13px;
  max-width: 46ch;
}
.admin .confirme .quoi-detruit strong { font-family: var(--fd); }

/* La fiche d'un ambassadeur. */
.admin .fiche-titre { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.admin .retour { font-size: 13px; text-decoration: none; color: var(--jk-ink-2); }
.admin .fiche-cle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.admin .fiche-cle div {
  border: 1px solid var(--jk-trait);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--jk-blanc);
}
.admin .fiche-cle .l {
  display: block;
  font-family: var(--fm);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--jk-gris);
  margin-bottom: 6px;
}
.admin .fiche-cle .v { font-family: var(--fd); font-weight: 700; font-size: 17px; }

@media (max-width: 560px) {
  .admin { padding: 0 14px 48px; }
  .admin .todo .nb { font-size: 19px; }
  .admin .quoi { padding: 14px 16px; }
}


/* ══════════════════════════════════════════════════════════════════════
   SPRINT 9 — ESPACE AMBASSADEUR : LA HIERARCHIE
   ══════════════════════════════════════════════════════════════════════ */

/*
 * LE GAIN DU MOIS, PREMIER ET SEUL A CETTE TAILLE.
 *
 * C'est la seule question qu'un ambassadeur se pose en ouvrant la page.
 * Il doit y repondre sans defiler, sur un telephone : d'ou la marge
 * haute reduite et la taille qui domine tout le reste.
 */
.p-espace .gain {
  background: var(--jk-tint);
  border: 1.5px solid var(--jk-ink);
  border-radius: 22px;
  padding: 20px 22px 18px;
  margin-top: 4px;
}
.p-espace .gain-l {
  display: block;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--jk-ink-2);
}
.p-espace .gain-v {
  font-family: var(--fd);
  font-weight: 800;
  letter-spacing: -0.045em;
  font-size: clamp(44px, 13vw, 64px);
  line-height: 1.02;
  margin: 6px 0 8px;
}
.p-espace .gain-note { font-size: 13px; color: var(--jk-ink-2); }

/* La suspension prime sur le gain : elle est la seule a passer avant. */
.p-espace .suspension {
  border-width: 1.5px;
  margin: 0 0 16px;
  align-items: flex-start;
}

/* Les trois reperes : versement, derniere mesure, acquis. */
.p-espace .reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.p-espace .reperes > div {
  border: 1px solid var(--jk-trait);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--jk-blanc);
}
.p-espace .reperes .l {
  display: block;
  font-family: var(--fm);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--jk-gris);
  margin-bottom: 6px;
}
.p-espace .reperes .v {
  display: block;
  font-family: var(--fd);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.p-espace .reperes .n {
  display: block;
  font-size: 12px;
  color: var(--jk-gris);
  margin-top: 4px;
}

/*
 * Le bonjour passe APRES les chiffres, et en petit. Il fait plaisir,
 * il ne repond a aucune question : il n'a rien a faire en tete de page.
 */
.p-espace .salut { margin-top: 22px; font-size: 14px; color: var(--jk-gris); }

/* Le formulaire de declaration doit rester atteignable d'un geste. */
.p-espace .declare { margin-top: 14px; border-color: var(--jk-ink); }
.p-espace .declare h2 { margin-top: 0; }

@media (max-width: 400px) {
  .p-espace .gain { padding: 16px 18px 14px; border-radius: 18px; }
  .p-espace .reperes { grid-template-columns: 1fr; }
}