/* Socle commun aux cinq propositions.
 *
 * Polices auto-hébergées, reprises telles quelles du CRM : une maquette qui
 * change de police ne montre pas la même page. Jetons de la charte pour les
 * couleurs, afin que ce qui est validé ici soit implémentable sans réglage.
 */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bleu: #4f6bff;
  --bleu-clair: #7c93ff;
  --bleu-soft: #eef1ff;
  --encre: #0e1525;
  --marine: #1b2b56;
  --gris: #5b6478;
  --gris-clair: #8a93a6;
  --fond: #f7f8fd;
  --surface: #ffffff;
  --ligne: #ecedf5;
  --vert: #16a34a;

  --titre: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --texte: "Inter", system-ui, sans-serif;

  --r-pill: 9999px;
  --r-card: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--texte);
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .titre {
  font-family: var(--titre);
  font-weight: 800;
  letter-spacing: -0.022em;
  margin: 0;
}

a { color: inherit; }

/* ── Le bandeau de retour, présent sur les cinq maquettes ─────────────── */
.retour {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px 9px 16px;
  border-radius: var(--r-pill);
  background: rgba(14, 21, 37, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px -16px rgba(10, 16, 32, 0.6);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, background 0.18s ease;
}
.retour:hover { transform: translateX(-50%) translateY(-2px); background: rgba(14, 21, 37, 0.96); }
.retour b { font-weight: 700; }
.retour .puce {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  font-size: 11.5px;
  font-weight: 600;
}
@media (max-width: 640px) { .retour { font-size: 11.5px; padding: 8px 7px 8px 13px; } }