/* Sonny · feuille de style du hub (docs/04-CHARTE-GRAPHIQUE.md).
   Piste F « Spatial » (D-19) : nuit violette, anneaux orbitaux, cartes posées sur un
   plan incliné qui se redressent au survol, lueur à la couleur de chaque projet.
   Titres en Sora, texte en Figtree.
   ⚠️ Ne jamais coder une couleur en dur hors des variables ci-dessous, et jamais de
   style= dans le HTML : la CSP de production le bloque (BONNES-PRATIQUES §9). */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/sora-500-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/figtree-400-600.woff2') format('woff2');
}

:root {
  --nuit: #07060D;        /* fond général */
  --carte: #110F1C;       /* fond des cartes */
  --carte-2: #0C0B14;     /* fond de la carte verrouillée */
  --texte: #F1EFFA;       /* texte principal */
  --texte-2: #B4AFCF;     /* accroches (AA sur --carte) */
  --texte-3: #A9A3C9;     /* bandeau, pied de page (AA sur --nuit) */
  --filet: rgb(255 255 255 / .1);
  --filet-fort: rgb(255 255 255 / .18);
  --violet: #9D8CFF;      /* anneaux, pastille, focus */
  --violet-clair: #CFC8FF;
  --citron: #DDF15A;      /* Défis 2030 : accent de son site */

  /* Couleur de chaque projet : lueur au survol et pastille de l'étiquette */
  --truntzler: #6FA8FF;      --truntzler-texte: #9CC2FF;
  --travail2030: #A9B8FF;    --travail2030-texte: #C3CDFF;
  --aliceetrabi: #7FD8CF;    --aliceetrabi-texte: #9FE4DC;

  --rayon: 22px;
  --marge: 16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--nuit);
}

body {
  position: relative;
  background: var(--nuit);
  color: var(--texte);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
}

main { flex: 1; position: relative; }

img { display: block; max-width: 100%; height: auto; }

a { color: var(--violet-clair); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--texte); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

.evitement {
  position: absolute;
  left: var(--marge);
  top: -100px;
  z-index: 10;
  padding: .6rem 1rem;
  background: var(--texte);
  color: var(--nuit);
  border-radius: 8px;
}
.evitement:focus { top: var(--marge); }

/* ── Anneaux orbitaux (décor) ─────────────────────────────────────── */
.halos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 760px;
  overflow: hidden;           /* les anneaux débordent : jamais de défilement horizontal */
  pointer-events: none;
}
.halo {
  position: absolute;
  left: 50%;
  top: -340px;
  width: 1100px;
  height: 1100px;
  margin-left: -550px;
  opacity: .55;
  animation: tourne 60s linear infinite;
}
.halo--inverse { opacity: .6; animation-duration: 90s; animation-direction: reverse; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ── Conteneurs ───────────────────────────────────────────────────── */
.bandeau,
.hero,
.projets,
.pied-interieur,
.texte {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* ── Bandeau ──────────────────────────────────────────────────────── */
.bandeau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 20px;
  font-size: .875rem;
  color: var(--texte-3);
}
.bandeau-marque {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--texte);
  text-decoration: none;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding-top: 72px;
  padding-bottom: 32px;
}

.hero-surtitre {
  padding: 6px 14px;
  border: 1px solid rgb(157 140 255 / .45);
  border-radius: 999px;
  font-size: .875rem;
  color: var(--violet-clair);
}

.hero h1 {
  max-width: 22ch;
  font-family: 'Sora', sans-serif;
  font-size: clamp(2rem, 3.8vw + 1rem, 4.375rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.hero-intro { max-width: 40rem; color: var(--texte-2); }

/* ── Projets ──────────────────────────────────────────────────────── */
.projets { padding-top: 32px; padding-bottom: 64px; }

.grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.carte {
  --lueur: var(--violet);
  --etiquette: var(--violet-clair);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 12px 20px;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
}
.carte--truntzler   { --lueur: var(--truntzler);   --etiquette: var(--truntzler-texte); }
.carte--travail2030 { --lueur: var(--travail2030); --etiquette: var(--travail2030-texte); }
.carte--aliceetrabi { --lueur: var(--aliceetrabi); --etiquette: var(--aliceetrabi-texte); }
.carte--defis2030   { --lueur: var(--citron);      --etiquette: var(--citron); }

.carte-visuel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  background: var(--carte-2);
}
.carte-visuel picture,
.carte-visuel img { width: 100%; height: 100%; }
.carte-visuel img { object-fit: cover; }

.carte-corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 0 8px;
}

.carte-etiquette {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--etiquette);
}
.pastille-couleur { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--lueur); }

.carte-nom {
  font-family: 'Sora', sans-serif;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.25;
}

.carte-accroche { color: var(--texte-2); font-size: .9375rem; line-height: 1.55; }

.carte-action { margin-top: auto; padding-top: 6px; }
.aller {
  display: inline-flex;
  gap: .4em;
  padding: 8px 14px;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--texte);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Toute la carte est cliquable : le lien du titre s'étend sur la carte. */
.carte-lien { color: inherit; text-decoration: none; }
.carte-lien:hover { color: inherit; }
.carte-lien::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--rayon);
}
.carte-lien:focus-visible { outline: none; }
.carte-lien:focus-visible::after { outline: 3px solid var(--lueur); outline-offset: 3px; }

.carte:not(.est-verrouillee):hover,
.carte:not(.est-verrouillee):focus-within {
  border-color: var(--lueur);
  box-shadow: 0 30px 60px rgb(0 0 0 / .55), 0 0 0 1px var(--lueur), 0 0 48px -8px var(--lueur);
}
.carte:not(.est-verrouillee):hover .aller,
.carte:not(.est-verrouillee):focus-within .aller {
  background: var(--lueur);
  border-color: var(--lueur);
  color: var(--nuit);
}

/* Carte verrouillée (D-04) : image floutée dans le fichier, cadenas, bouton citron. */
.est-verrouillee { background: var(--carte-2); border: 1px dashed rgb(221 241 90 / .35); }
.est-verrouillee .pastille-couleur { background: transparent; border: 1.5px solid var(--citron); }
.verrou {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--citron);
}
.verrou svg {
  box-sizing: content-box;
  padding: 16px;
  border: 1.5px solid var(--citron);
  border-radius: 50%;
  background: rgb(7 6 13 / .6);
}
.cadenas { flex: 0 0 auto; }

.carte-mention { font-size: .875rem; color: var(--texte-2); }

.bouton {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--citron);
  color: var(--nuit);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter .2s ease;
}
.bouton:hover { color: var(--nuit); filter: brightness(1.08); }
.bouton:focus-visible { outline-color: var(--citron); }

/* ── Pied de page ─────────────────────────────────────────────────── */
.pied { position: relative; font-size: .875rem; color: var(--texte-3); }
.pied-interieur {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 2rem;
  padding-block: 24px 32px;
}
.pied nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; }
.pied a { display: inline-block; padding-block: .25rem; }

/* ── Pages de texte (mentions légales) ────────────────────────────── */
.texte { max-width: calc(42rem + 2 * var(--marge)); padding-top: 40px; padding-bottom: 72px; }
.texte .retour {
  display: inline-block;
  margin-bottom: 2rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--texte-3);
}
.texte .retour:hover { color: var(--texte); }
.texte h1 { font-family: 'Sora', sans-serif; font-size: 2.25rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 1.5rem; }
.texte h2 { font-family: 'Sora', sans-serif; font-size: 1.125rem; font-weight: 600; margin-top: 2rem; margin-bottom: .5rem; }
.texte p { color: var(--texte-2); }
.texte p + p { margin-top: .5rem; }

/* ── Grands écrans ────────────────────────────────────────────────── */
@media (min-width: 720px) {
  :root { --marge: 5vw; }
  .bandeau { padding-block: 26px; }
  .hero { padding-top: 110px; padding-bottom: 40px; }
  .projets { padding-top: 48px; }
  .grille { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

@media (min-width: 1100px) {
  .grille { grid-template-columns: repeat(4, 1fr); }
}

/* Plan incliné et flottement : grands écrans à la souris seulement. Sur mobile, les
   cartes restent à plat, en une colonne lisible. La perspective est posée sur CHAQUE
   carte : posée sur la grille entière, elle déforme en trapèze les cartes du bord. */
@media (min-width: 1100px) and (hover: hover) {
  .carte { transform: perspective(1400px) rotateX(10deg); transform-origin: 50% 100%; }
  .flotte-1 { animation: flotte 7s ease-in-out infinite; }
  .flotte-2 { animation: flotte 7s ease-in-out -1.7s infinite; }
  .flotte-3 { animation: flotte 7s ease-in-out -3.4s infinite; }
  .flotte-4 { animation: flotte 7s ease-in-out -5.1s infinite; }
  .carte:not(.est-verrouillee):hover,
  .carte:not(.est-verrouillee):focus-within {
    transform: perspective(1400px) rotateX(0deg) translateY(-10px) scale(1.03);
  }
}
@keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* ── Mouvement réduit (BONNES-PRATIQUES §9) ──────────────────────────
   transition: none, JAMAIS une durée de 0,01 ms sur * (WebKit anime alors la
   couleur du texte au chargement et axe-core lit de faux contrastes).
   Le plan incliné disparaît aussi : il n'a de sens qu'en mouvement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .carte, .carte:hover, .carte:focus-within { transform: none !important; }
}