/* dev.css — palette « Veille de nuit » pour les pages développeurs.
   Sombre permanent (pas de toggle). À charger APRÈS tokens.css + site.css.
   S'active en ajoutant la classe `dev` sur <body>. */

/* D1) La palette « Veille de nuit » surchargeait les tokens GLOBAUX (--bg, --ink,
   --muted…) alors que le fond reellement peint reste le degrade violet clair du site :
   le texte --muted #7688a3 se retrouvait sur du violet pale, a 1.0-2.4:1. La page suit
   desormais les tokens du site (donc le theme clair/sombre choisi par l'utilisateur), et
   la couleur « nuit » est reservee aux BLOCS DE CODE et aux champs de saisie, qui la
   portent explicitement via --code-*. */
body.dev {
  --code-bg: #101826;     /* bleu nuit : fond des blocs de code et des champs */
  --code-ink: #e9eef6;
  --code-line: #263248;
  /* Fond gris clair dominant pour la page developpeur (meme gris que --inst-soft des
     pages institutions ; ce token n'existe pas sous body.dev, d'ou la valeur litterale). */
  background: #f5f6f8;
}
/* Le site peint une couche fixe plein ecran (body::before, background.png violet) AU-DESSUS
   du fond du body : elle masquait le gris. On la neutralise sur la page developpeur. */
body.dev::before { display: none !important; }
/* Espace developpeur en PLEINE LARGEUR, sans blocs flottants : plus de panneau
   opaque (fond, arrondi, ombre retires), le contenu repose sur le fond de la page. */
body.dev .dev-intro,
body.dev .dev-section > .wrap {
  background: none; border-radius: 0; box-shadow: none;
  padding: 26px 24px 28px;
}
body.dev .dev-section { padding: 14px 0; border-top: none; }
body.dev .dev-section > .wrap { max-width: 1080px; }
/* Pour que la page ne soit pas uniformement grise : bandes PLEINE LARGEUR en alternance
   (blanc / gris), fines separations — rythme sobre, sans blocs flottants. */
body.dev .dev-section:nth-of-type(even) { background: #ffffff; }
body.dev .dev-section + .dev-section { border-top: 1px solid rgba(20, 16, 40, .07); }
body.dev .dev-intro { background: #ffffff; border-bottom: 1px solid rgba(20, 16, 40, .07); }

/* Typo dominante : JetBrains Mono pour titres de section / endpoints / JSON. */
body.dev .section-label,
body.dev h1,
body.dev h2,
body.dev h3,
body.dev .endpoint,
body.dev .code {
  font-family: 'JetBrains Mono', monospace;
}

/* Le corps reste en Inter (hérité du body). */

/* Lien « ← Retour au kiosque » dans le header des pages dev. */
body.dev .back-link {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}
body.dev .back-link:hover { color: var(--ink); }

/* D1) Plus de bandeau d'en-tete sombre : l'en-tete est celui du reste du site. */

/* ---------- page /proposer ---------- */
body.dev .dev-intro { margin-top: 24px; }
/* D2) Paragraphe d'accueil NON technique, mis en avant avant la partie standard. */
body.dev .dev-intro h1 { font-size: clamp(28px, 4.5vw, 40px); font-weight: 800; letter-spacing: -0.02em; }
body.dev .dev-intro p { color: var(--muted); font-size: 17px; margin-top: 14px; max-width: 620px; }
body.dev .dev-section h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
body.dev .dev-section > .wrap > p { color: var(--muted); }

/* Liste des 8 champs du standard. */
body.dev .field-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
body.dev .field-list li { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
body.dev .field-list code {
  font-family: 'JetBrains Mono', monospace; color: var(--amber-ink);
  background: var(--amber-soft); border-radius: 5px; padding: 1px 6px; font-size: 12.5px;
}
body.dev .spec-link { display: inline-block; margin-top: 16px; color: var(--amber-ink); font-weight: 600; text-decoration: underline; }
body.dev .spec-link:hover { text-decoration: underline; }

/* Champ URL + bouton (validate / submit). */
body.dev .url-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
body.dev .dev-input {
  flex: 1; min-width: 220px;
  border: 1px solid var(--code-line); background: var(--code-bg); color: var(--code-ink);
  border-radius: 9px; padding: 11px 14px; font: inherit; font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
}
body.dev .dev-btn {
  background: var(--amber); border: none; color: #12102a; font-weight: 700;
  border-radius: 9px; padding: 11px 20px; cursor: pointer; font: inherit; font-size: 14px;
  transition: opacity .15s;
}
body.dev .dev-btn:hover { opacity: .9; }
body.dev .dev-btn:disabled { opacity: .5; cursor: default; }

/* Résultats de validation. */
body.dev .result { margin-top: 20px; }
body.dev .check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
body.dev .check-item {
  display: flex; align-items: baseline; gap: 10px; font-size: 13.5px;
  font-family: 'JetBrains Mono', monospace;
}
body.dev .check-item .mark { font-weight: 700; }
body.dev .check-item.ok .mark { color: var(--green); }
body.dev .check-item.err .mark { color: var(--amber-ink); }
body.dev .check-item.ok { color: var(--ink); }
body.dev .check-item.err { color: var(--amber-ink); }
body.dev .check-item .fld { font-weight: 700; }
body.dev .check-item .msg { color: var(--muted); }
body.dev .result-headline { font-weight: 700; margin-bottom: 12px; font-size: 15px; }
body.dev .result-headline.ok { color: var(--green); }
body.dev .result-headline.err { color: var(--amber-ink); }
body.dev .net-error {
  margin-top: 16px; border: 1px solid var(--amber-ink); background: var(--amber-soft);
  color: var(--amber-ink); border-radius: 10px; padding: 14px 16px; font-size: 14px;
}

/* Aperçu de la carte telle qu'elle apparaîtrait sur le kiosque. */
body.dev .preview { margin-top: 22px; }
body.dev .preview-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 10px; }
body.dev .preview .card { max-width: 320px; }

/* Formulaire de soumission. */
body.dev .submit-form { display: grid; gap: 14px; margin-top: 18px; max-width: 560px; }
body.dev .submit-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
body.dev .submit-form input, body.dev .submit-form textarea {
  border: 1px solid var(--code-line); background: var(--code-bg); color: var(--code-ink);
  border-radius: 9px; padding: 10px 13px; font: inherit; font-size: 14px;
}
body.dev .submit-form textarea { resize: vertical; min-height: 66px; }
/* Champ de tags catégories (autocomplétion, pastilles). */
body.dev .tags-field { display: grid; gap: 6px; }
body.dev .tags-legend { font-size: 13px; font-weight: 600; color: var(--muted); }
body.dev .cat-hint { font-weight: 400; opacity: .7; }
body.dev .tags-box {
  position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  border: 1px solid var(--code-line); border-radius: 12px; background: var(--code-bg); padding: 8px 10px;
}
body.dev .tags-box.full { opacity: .85; }
body.dev .tag-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 4px 4px 4px 12px; font-size: 13px; font-weight: 600;
}
body.dev .pill-x {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 5px; border-radius: 50%;
}
body.dev .pill-x:hover { color: var(--amber); }
body.dev #tag-entry {
  flex: 1; min-width: 130px; border: none; background: transparent; color: var(--ink);
  font: inherit; font-size: 14px; outline: none; padding: 4px;
}
body.dev #tag-entry:disabled { cursor: not-allowed; }
body.dev .tags-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 4px;
  list-style: none; padding: 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); max-height: 210px; overflow: auto;
}
body.dev .tags-suggest li { padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); }
body.dev .tags-suggest li:hover { background: var(--bg); color: var(--amber); }
body.dev .submit-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
body.dev .submit-msg { margin-top: 16px; font-size: 14px; font-weight: 600; }
body.dev .submit-msg.ok { color: var(--green); }
body.dev .submit-msg.err { color: var(--amber); }