/* ==========================================================================================
   PAGE D'ATTENTE PUBLIQUE — variante « nuit » (retenue le 04/10/2026).
   La Belgique de nuit, un radar qui balaie, des échos sans étiquette : la page intrigue sans
   rien montrer de la méthode. Elle reste sombre quel que soit le thème du visiteur — choix de
   marque, pas oubli —, d'où des couleurs toutes posées ici, dans `:root`, et un fond peint.
   ========================================================================================== */
:root {
  --acc-bg: #070b16;
  --acc-ink: #eef2fb;
  --acc-ink-2: #b2bcd1;
  --acc-ink-3: #8591a9;
  --acc-line: rgba(160, 180, 220, .16);
  --acc-green: #2ee59d;
  --acc-green-soft: rgba(46, 229, 157, .14);
  --acc-green-glow: rgba(46, 229, 157, .45);
  --acc-ring: rgba(46, 229, 157, .22);
  --acc-axis: rgba(46, 229, 157, .13);
  --acc-chip: rgba(46, 229, 157, .07);
  --acc-chip-line: rgba(46, 229, 157, .3);
  --acc-glass: rgba(11, 18, 36, .62);
  --acc-glass-line: rgba(160, 180, 220, .14);
  --acc-display: "Manrope", var(--sans);
  /* La colonne de lecture : en-tête, héros, promesses et pied commencent au même bord. */
  --acc-gutter: clamp(16px, 4vw, 56px);
  --acc-edge: max(var(--acc-gutter), calc((100% - 1200px) / 2));
}

body.acc { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--acc-bg);
  color: var(--acc-ink); font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; }
.acc a { color: inherit; }
.acc :focus-visible { outline: 2px solid var(--acc-green); outline-offset: 3px; border-radius: 6px; }

/* --- En-tête ----------------------------------------------------------------------------- */
.acc-top { position: relative; z-index: 5; display: flex; align-items: center; min-height: 80px;
  padding: 0 var(--acc-edge); }
.acc-brand { text-decoration: none; color: var(--acc-ink); }
.acc-brand .lockup { font-size: 1.45rem; }
.acc-login { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  text-decoration: none; font-size: 15px; font-weight: 600; color: var(--acc-ink); }
.acc-login:hover { color: var(--acc-green); }

/* --- Héros : texte à gauche, radar sur la Belgique de nuit à droite ------------------------ */
.acc-main { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.acc-night { position: absolute; inset: 0 0 0 40%;
  background: url("/static/accueil/belgique-nuit.jpg") 62% 40% / cover no-repeat;
  background: image-set(url("/static/accueil/belgique-nuit.webp") type("image/webp"),
                        url("/static/accueil/belgique-nuit.jpg") type("image/jpeg")) 62% 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%), linear-gradient(180deg, #000 62%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 32%), linear-gradient(180deg, #000 62%, transparent 92%);
  mask-composite: intersect; opacity: .85; }
.acc-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px;
  align-items: center; padding: 40px var(--acc-edge) 72px; }
/* Le sur-titre : une étiquette posée sur le fond, en phrase (plus de capitales espacées). */
.acc-eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 26px;
  padding: 7px 16px; border: 1px solid var(--acc-chip-line); border-radius: 999px; background: var(--acc-chip);
  font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: .005em; color: var(--acc-ink); }
.acc-eyebrow i { width: 1px; height: 14px; background: var(--acc-chip-line); }
.acc-eyebrow span + i + span { color: var(--acc-ink-2); font-weight: 500; }
.acc-hero h1 { margin: 0 0 24px; font-family: var(--acc-display); font-weight: 800;
  font-size: clamp(2.6rem, 1.4rem + 3.8vw, 4.7rem); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.acc-hero h1 em { font-style: normal; color: var(--acc-green); text-shadow: 0 0 36px var(--acc-green-soft); }
.acc-lead { margin: 0 0 34px; max-width: 36em; font-size: 1.15rem; color: var(--acc-ink-2); }
.acc-status { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 16px; color: var(--acc-ink-2); }
.acc-status b { color: var(--acc-ink); }
.acc-pulse { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--acc-green); }
.acc-pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--acc-green);
  opacity: 0; animation: acc-ping 2.4s ease-out infinite; }
@keyframes acc-ping { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* Le radar : anneaux, axes, faisceau qui tourne, échos qui s'allument à son passage. */
.acc-radar { position: relative; aspect-ratio: 1; width: min(100%, 540px); justify-self: end; }
.acc-radar i { position: absolute; display: block; }
.ar-ring { border: 1px solid var(--acc-ring); border-radius: 50%; }
.ar-ring.r1 { inset: 0; } .ar-ring.r2 { inset: 17%; } .ar-ring.r3 { inset: 34%; }
.ar-core { inset: 47%; border-radius: 50%; background: var(--acc-green); box-shadow: 0 0 18px var(--acc-green-glow); }
.ar-axis.ax-h { left: 0; right: 0; top: 50%; height: 1px; background: var(--acc-axis); }
.ar-axis.ax-v { top: 0; bottom: 0; left: 50%; width: 1px; background: var(--acc-axis); }
.ar-sweep { inset: 0; border-radius: 50%; opacity: .55;
  background: conic-gradient(from 0deg, var(--acc-green-glow), transparent 15%, transparent);
  animation: acc-spin 7s linear infinite; }
@keyframes acc-spin { to { transform: rotate(360deg); } }
.ar-blip { width: 12px; height: 12px; border-radius: 50%; background: var(--acc-green);
  box-shadow: 0 0 0 6px var(--acc-green-soft), 0 0 22px var(--acc-green-glow); animation: acc-blink 7s linear infinite; }
.ar-blip.b1 { left: 64%; top: 22%; animation-delay: -6.1s; }
.ar-blip.b2 { left: 78%; top: 58%; animation-delay: -4.6s; }
.ar-blip.b3 { left: 30%; top: 70%; animation-delay: -2.2s; }
.ar-blip.b4 { left: 22%; top: 32%; animation-delay: -.9s; }
@keyframes acc-blink { 0%, 100% { opacity: .35; } 4% { opacity: 1; } 40% { opacity: .55; } }

/* --- Trois promesses : une barre de verre, une pastille d'écho par promesse --------------- */
.acc-promises { position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0 var(--acc-edge) 48px; padding: 0; border: 1px solid var(--acc-glass-line); border-radius: 18px;
  background: var(--acc-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.acc-promises li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; padding: 26px 30px; }
.acc-promises li + li { border-left: 1px solid var(--acc-glass-line); }
.acc-pi { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--acc-green);
  background: var(--acc-green-soft); box-shadow: inset 0 0 0 1px var(--acc-chip-line), 0 0 24px var(--acc-green-soft); }
.acc-pi .ic { width: 22px; height: 22px; }
.acc-promises b { display: block; margin: 1px 0 4px; font: 700 1.12rem/1.3 var(--acc-display); color: var(--acc-ink); }
.acc-promises div span { display: block; max-width: 30ch; font-size: 15.5px; line-height: 1.5; color: var(--acc-ink-2);
  text-wrap: pretty; }

/* --- Pied : identité de l'éditeur et liens ------------------------------------------------ */
.acc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 26px var(--acc-edge) 32px;
  border-top: 1px solid var(--acc-line); font-size: 14px; color: var(--acc-ink-3); }
.acc-foot .lockup { font-size: 1.1rem; color: var(--acc-ink); }
.acc-foot nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.acc-foot a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; color: var(--acc-ink-2); }
.acc-foot a:hover { color: var(--acc-ink); }

@media (max-width: 900px) {
  .acc-hero { grid-template-columns: 1fr; padding-top: 16px; }
  .acc-radar { order: -1; width: min(70%, 320px); justify-self: start; }
  .acc-night { inset: 0; opacity: .25; -webkit-mask-image: none; mask-image: none; }
  .acc-promises { grid-template-columns: 1fr; }
  .acc-promises li { padding: 20px 22px; }
  .acc-promises li + li { border-left: 0; border-top: 1px solid var(--acc-glass-line); }
  .acc-foot nav { margin-left: 0; }
}
/* Sur téléphone, l'étiquette tient sur une ligne : « Belgique » se lit déjà dans « Le droit belge ». */
@media (max-width: 480px) {
  .acc-eyebrow { font-size: 13.5px; padding: 6px 14px; }
  .acc-eyebrow i, .acc-eyebrow span + i + span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-sweep, .ar-blip, .acc-pulse::after { animation: none; }
  .ar-blip { opacity: .9; }
}