@font-face {
  font-family: 'Inter';
  src: url('/polices/inter.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/polices/space-grotesk.woff2') format('woff2');
  font-weight: 500 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --fond: oklch(16% 0.05 350);
  --fond-2: oklch(18.5% 0.055 350);
  --carte: oklch(21% 0.06 350);
  --carte-2: oklch(25% 0.06 350);
  --ligne: oklch(100% 0 0 / 0.1);
  --ligne-forte: oklch(100% 0 0 / 0.2);
  --texte: oklch(97% 0.01 60);
  --texte-2: oklch(83% 0.02 60);
  --texte-3: oklch(74% 0.03 350);
  --magenta-fond: oklch(52% 0.22 352);
  --magenta-fond-survol: oklch(57% 0.23 352);
  --rose: oklch(76% 0.16 355);
  --or: oklch(84% 0.12 85);
  --degrade: linear-gradient(90deg, oklch(72% 0.17 45), oklch(62% 0.24 350) 55%, oklch(56% 0.24 298));
  --rayon: 14px;
  --titre: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --corps: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Anciens navigateurs Android encore courants dans la salle, ils ne lisent pas oklch. */
@supports not (color: oklch(0% 0 0)) {
  :root {
    --fond: #1c0410;
    --fond-2: #230616;
    --carte: #2b0a1c;
    --carte-2: #361426;
    --ligne: rgba(255, 255, 255, 0.1);
    --ligne-forte: rgba(255, 255, 255, 0.2);
    --texte: #faf4ef;
    --texte-2: #d2c5bb;
    --texte-3: #baa3ad;
    --magenta-fond: #bc0076;
    --magenta-fond-survol: #d11085;
    --rose: #fe82b6;
    --or: #eec469;
    --degrade: linear-gradient(90deg, #f97c3d, #e5259a 55%, #8a3feb);
  }
  body {
    background: var(--fond);
  }
  .scene {
    border-color: rgba(238, 196, 105, 0.45);
  }
  .partenaire {
    border-color: rgba(244, 77, 171, 0.35);
    background: rgba(244, 77, 171, 0.08);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: radial-gradient(120% 40rem at 50% 0%, oklch(22% 0.07 350), var(--fond) 70%) no-repeat, var(--fond);
  color: var(--texte);
  font: 400 16px/1.55 var(--corps);
  font-feature-settings: 'cv11', 'ss01';
}

h1,
h2 {
  margin: 0;
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p,
ul {
  margin: 0;
}

a {
  color: var(--rose);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.entete {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px;
  border-bottom: 1px solid var(--ligne);
}
.logo {
  width: auto;
  height: 40px;
}
.evenement {
  color: var(--texte-2);
  font-size: 0.8rem;
  line-height: 1.35;
}

main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

.ouverture {
  display: grid;
  gap: 16px;
  padding: 28px 0 8px;
}
.surtitre {
  color: var(--or);
  font-family: var(--titre);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h1 {
  max-width: 18ch;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.1rem);
}
.intro {
  max-width: 60ch;
  color: var(--texte-2);
  font-size: 1.02rem;
}
.presente {
  color: var(--texte-3);
  font-size: 0.9rem;
}
.presente a {
  color: var(--texte);
  font-weight: 600;
}

.metiers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 0;
  list-style: none;
}
.metiers a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ligne-forte);
  border-radius: 99px;
  background: var(--carte);
  color: var(--texte);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}
.metiers a:hover {
  background: var(--carte-2);
}

.famille {
  display: grid;
  gap: 14px;
  padding-top: 36px;
  scroll-margin-top: 8px;
}
.famille h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ligne);
  font-size: 1.3rem;
}

.cartes {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.carte {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--carte);
}
.carte:hover {
  border-color: var(--ligne-forte);
  background: var(--carte-2);
}
.metier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--texte-3);
  font-size: 0.85rem;
  font-weight: 500;
}
.scene {
  padding: 2px 9px;
  border: 1px solid oklch(84% 0.12 85 / 0.45);
  border-radius: 99px;
  color: var(--or);
  font-size: 0.74rem;
  font-weight: 600;
}
.phrase {
  font-family: var(--titre);
  font-size: 1.16rem;
  font-weight: 500;
  line-height: 1.38;
  text-wrap: pretty;
}
.outil {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ligne);
  color: var(--texte-3);
  font-size: 0.85rem;
}
.outil a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--rose);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
.outil a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--rayon);
}
.outil a:focus-visible {
  outline: none;
}
.outil a:focus-visible::before {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}
.outil a::after {
  content: '\2192';
  margin-left: 6px;
}

.carte-lue {
  display: grid;
  gap: 12px;
  margin-top: 48px;
  padding: 26px 20px;
  border-radius: var(--rayon);
  background: var(--fond-2);
  border: 1px solid var(--ligne);
}
.carte-lue .phrase {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem);
}
.auteur {
  color: var(--texte-3);
  font-size: 0.88rem;
}

.partenaire {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 16px;
  padding: 22px 20px;
  border-radius: var(--rayon);
  border: 1px solid oklch(68% 0.22 350 / 0.35);
  background: oklch(68% 0.22 350 / 0.08);
  color: var(--texte-2);
}
.partenaire strong {
  color: var(--texte);
}
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 99px;
  background: var(--magenta-fond);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.bouton:hover {
  background: var(--magenta-fond-survol);
}

.pied {
  position: relative;
  padding: 20px 16px 32px;
  color: var(--texte-3);
  font-size: 0.8rem;
  text-align: center;
}
.pied::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(220px, 50%);
  height: 2px;
  transform: translateX(-50%);
  background: var(--degrade);
}

@media (min-width: 640px) {
  .entete {
    padding: 20px 24px;
  }
  .logo {
    height: 52px;
  }
  main {
    padding: 0 24px 56px;
  }
  .ouverture {
    padding-top: 48px;
  }
  .cartes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .partenaire {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (min-width: 980px) {
  .cartes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .carte,
  .metiers a,
  .bouton {
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
}