/* MaxiaBat : charte commune a la page web et a la plaquette PDF. */
:root {
  --encre: #0f2340;
  --encre-2: #1d3a63;
  --bleu: #2a78c2;
  --ciel: #4fb3e0;
  --orange: #f28c28;
  --orange-fonce: #d9731a;
  --ardoise: #52627a;
  --gris: #8a97a8;
  --trait: #dfe5ed;
  --fond: #f5f7fa;
  --blanc: #ffffff;
  --ok: #1f9d6b;
  --encours: #f2a93b;
  --prevu: #8a97a8;
  --rayon: 14px;
  --ombre: 0 10px 30px -12px rgba(15, 35, 64, .25);
  --titre: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --texte: "Inter", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--texte);
  color: var(--encre);
  background: var(--fond);
  line-height: 1.55;
}
h1, h2, h3, h4 { font-family: var(--titre); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }

/* Motif de plan (grille de dessinateur) */
.plan {
  background-color: var(--encre);
  background-image:
    linear-gradient(rgba(79, 179, 224, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 179, 224, .09) 1px, transparent 1px),
    linear-gradient(rgba(79, 179, 224, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 179, 224, .045) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  color: var(--blanc);
}

.surtitre {
  display: inline-flex; align-items: center; gap: .5em;
  font: 600 .78rem/1 var(--texte); letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange);
}
.surtitre::before { content: ""; width: 26px; height: 3px; background: var(--orange); border-radius: 2px; }

.badge-dev {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .45em .9em; border-radius: 999px;
  background: rgba(242, 140, 40, .14); border: 1px solid rgba(242, 140, 40, .55);
  color: #ffb877; font: 600 .82rem/1.2 var(--texte);
}
.badge-dev .point { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(242,140,40,.7); }

.marque { font-family: var(--titre); font-weight: 700; letter-spacing: -.02em; }
.marque b { color: var(--orange); font-weight: 700; }

.statut { display: inline-block; padding: .15em .6em; border-radius: 999px; font: 600 .7rem/1.5 var(--texte); letter-spacing: .03em; white-space: nowrap; }
.statut.ok { background: rgba(31, 157, 107, .12); color: var(--ok); }
.statut.fin { background: rgba(242, 169, 59, .16); color: #b87400; }
.statut.prevu { background: rgba(138, 151, 168, .16); color: var(--ardoise); }