@font-face { font-family: Manrope; font-weight: 800; font-display: swap; src: url(/fonts/manrope-800.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(/fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(/fonts/inter-600.woff2) format("woff2"); }

:root {
  --nuit: #1B1F3B;
  --nuit-800: #2D3253;
  --nuit-700: #434A70;
  --nuit-300: #B0B6D0;
  --corail: #FF6B5B;
  --corail-survol: #FE9789;
  --corail-texte: #FF8E80;
  --texte: #F2F0EC;
  --lin: #F7F5F2;
  --encre: #15172B;
  --lien: #B52C23;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --titre: Manrope, "Segoe UI", system-ui, Arial, sans-serif;
  --corps: Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
p, h1, h2, ul { margin: 0; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--nuit); color: var(--texte);
  font: 400 1rem/1.6 var(--corps);
  overflow-x: hidden;
}
a { color: var(--corail-texte); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--corail); outline-offset: 2px; border-radius: 4px; }

.mosaique {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fill, 54px); grid-auto-rows: 54px; gap: 8px; padding: 8px;
  opacity: .55;
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 100%);
  mask-image: linear-gradient(115deg, transparent 35%, #000 100%);
}
.mosaique i { border-radius: 7px; background: var(--nuit-800); }
.mosaique i:nth-child(3n) { background: #232849; }
.mosaique i:nth-child(7n) { background: var(--nuit-700); }

.contenu {
  position: relative; z-index: 1; flex: 1;
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 40px 20px 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.logo { width: min(220px, 60vw); height: auto; margin: 0 0 56px -24px; }
.etat {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--nuit-700); border-radius: 999px;
  padding: 6px 14px 6px 10px; font-weight: 600; font-size: .875rem; margin-bottom: 24px;
}
.etat i { width: 10px; height: 10px; border-radius: 2px; background: var(--corail); transform: rotate(9deg); }
h1 {
  font: 800 clamp(2.5rem, 7vw, 4.5rem)/1.04 var(--titre); letter-spacing: -.025em;
  max-width: 13ch; text-wrap: balance; color: #FFFFFF;
}
.tesselle {
  display: inline-block; width: .22em; height: .22em; margin-left: .08em;
  border-radius: 14%; background: var(--corail); transform: rotate(9deg);
  animation: poser .9s var(--courbe) .3s both;
}
@keyframes poser {
  from { transform: translateY(-.8em) rotate(-40deg); opacity: 0; }
  to { transform: rotate(9deg); opacity: 1; }
}
.chapo { font-size: clamp(1.0625rem, 2.2vw, 1.25rem); line-height: 1.55; color: var(--nuit-300); max-width: 38rem; margin: 24px 0 16px; }
.annonce { max-width: 38rem; color: var(--texte); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.bouton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 10px; font-weight: 600; text-decoration: none;
  transition: background-color .15s var(--courbe);
}
.bouton svg { width: 20px; height: 20px; }
.bouton-accent { background: var(--corail); color: var(--nuit); }
.bouton-accent:hover { background: var(--corail-survol); }
.bouton-contour { box-shadow: inset 0 0 0 1.5px var(--nuit-700); color: var(--texte); }
.bouton-contour:hover { background: var(--nuit-800); }
.points {
  list-style: none; padding: 0; margin-top: 48px;
  display: grid; gap: 12px; max-width: 52rem;
}
.points li { display: flex; gap: 12px; color: var(--nuit-300); }
.points li::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; margin-top: 8px; border-radius: 2px; background: var(--nuit-300); }
.points strong { color: var(--texte); font-weight: 600; }

.pied {
  position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 20px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: .875rem; color: var(--nuit-300); border-top: 1px solid var(--nuit-800);
}
.pied a { color: var(--nuit-300); }
.pied a:hover { color: #FFFFFF; }

.page-claire { background: var(--lin); color: var(--encre); }
.page-claire .contenu { max-width: 68ch; justify-content: flex-start; padding-top: 48px; }
.page-claire h1 { color: var(--nuit); font-size: 2rem; margin: 24px 0 8px; }
.page-claire h2 { font: 800 1.25rem/1.3 var(--titre); color: var(--nuit); margin: 32px 0 8px; }
.page-claire a { color: var(--lien); }
.a-completer { background: #FFE2DD; color: #8F1611; padding: 0 4px; border-radius: 4px; }

@media (min-width: 640px) {
  .contenu, .pied { padding-left: 32px; padding-right: 32px; }
  .points { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.page-claire .pied { color: #6B655F; border-top-color: #E6E3DF; max-width: 68ch; }
.page-claire .pied a { color: #6B655F; }
.page-claire .pied a:hover { color: var(--nuit); }