/* ════════════════════════════════════════════════════════════════
   LE JAGUAR — accueil · « Minuit »
   Une page simple : le carnet Nordkapp (texte + trace GPS),
   la bannière-générique qui tourne, le contact.
   Palette : bleu midnight, blanc, un seul accent bleu glace.
   Structure :
     1. Variables & reset     4. Le carnet (texte + carte)
     2. Fond                  5. Bannière & contact
     3. Communs & en-tête     6. Responsive · 7. Animations
════════════════════════════════════════════════════════════════ */

/* ── 1. VARIABLES & RESET ─────────────────────────────────────── */
:root {
  --minuit:      #060b18;
  --minuit-haut: #0a1428;
  --minuit-bas:  #04070f;
  --panneau:     rgba(13, 22, 44, 0.55);
  --blanc:       #f4f7fc;
  --doux:        #96a5c3;
  --accent:      #7db6ff;          /* bleu glace */
  --accent-vif:  #cfe6ff;
  --glow:        rgba(125, 182, 255, 0.4);
  --ligne:       rgba(196, 216, 245, 0.12);

  --f-affiche: "Anton", "Arial Narrow", sans-serif;
  --f-texte:   "Manrope", "Helvetica Neue", sans-serif;
  --f-mono:    "IBM Plex Mono", "SF Mono", monospace;

  --gouttiere: clamp(20px, 4.5vw, 64px);
  --colonne: 1160px;
}

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

html { scroll-behavior: smooth; }

body {
  background-color: var(--minuit);
  color: var(--blanc);
  font-family: var(--f-texte);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

/* ── 2. FOND : nuit de minuit, poussière d'étoiles discrète ───── */
body {
  background-image:
    radial-gradient(1px 1px at 22px 34px,  rgba(255,255,255,0.28) 50%, transparent 51%),
    radial-gradient(1px 1px at 158px 96px, rgba(207,230,255,0.18) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 264px 188px, rgba(255,255,255,0.13) 50%, transparent 51%),
    radial-gradient(1px 1px at 92px 240px, rgba(207,230,255,0.16) 50%, transparent 51%),
    radial-gradient(1px 1px at 330px 60px, rgba(255,255,255,0.10) 50%, transparent 51%),
    radial-gradient(80rem 44rem at 76% -8%, rgba(64, 130, 240, 0.10), transparent 60%),
    linear-gradient(180deg, var(--minuit-haut) 0%, var(--minuit) 40%, var(--minuit-bas) 100%);
  background-size:
    380px 300px, 380px 300px, 380px 300px, 380px 300px, 380px 300px,
    100% 100%, 100% 100%;
}

/* ── 3. COMMUNS & EN-TÊTE ─────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; top: -48px; left: 16px; z-index: 200;
  background: var(--accent); color: var(--minuit);
  padding: 10px 18px; font-size: 13px; letter-spacing: 0.08em;
  text-decoration: none; border-radius: 3px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

.mono-ligne {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}

h1, h2 {
  font-family: var(--f-affiche);
  font-weight: 400;
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

.btn {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 36px;
  border-radius: 3px;
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease,
              transform 0.3s ease;
}
.btn-plein {
  background: var(--blanc);
  color: var(--minuit);
  border: 1px solid var(--blanc);
}
.btn-plein:hover, .btn-plein:focus-visible {
  background: var(--accent-vif);
  border-color: var(--accent-vif);
  box-shadow: 0 0 38px var(--glow);
  transform: translateY(-2px);
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gouttiere);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
.site-header.est-scrolle {
  background: rgba(6, 11, 24, 0.88);
  border-bottom-color: var(--ligne);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--blanc);
  font-family: var(--f-affiche);
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* la veilleuse : un point bleu glace qui veille */
.lueur {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--glow), 0 0 28px rgba(125, 182, 255, 0.25);
}

.main-nav { display: flex; gap: clamp(16px, 2.8vw, 44px); }
.main-nav a {
  color: var(--doux);
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.main-nav a:hover, .main-nav a:focus-visible {
  color: var(--blanc);
  border-bottom-color: var(--accent);
}

/* ── 4. LE CARNET : texte + trace GPS ─────────────────────────── */
.carnet {
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.carnet-grille {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 110px var(--gouttiere) 60px;
  display: grid;
  /* carte plus large, et bien écartée du titre */
  grid-template-columns: minmax(0, 1fr) minmax(340px, 500px);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.carnet-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.carnet-texte h1 {
  /* calibré pour rester dans sa colonne, sans mordre sur la carte */
  font-size: clamp(52px, 7.4vw, 116px);
  text-shadow:
    0 0 38px rgba(125, 182, 255, 0.22),
    0 0 120px rgba(125, 182, 255, 0.12);
}
.lead { font-size: clamp(18px, 1.8vw, 23px); color: var(--blanc); font-weight: 400; }
.donnees {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.desc { color: var(--doux); font-size: 15.5px; max-width: 480px; }
.actions { margin-top: 8px; }

/* La trace du voyage : libre dans la nuit, sans cadre — cliquable */
.carte-nordkapp {
  display: block;
  text-decoration: none;
  transition: filter 0.4s ease;
}
.carte-nordkapp:hover, .carte-nordkapp:focus-visible {
  /* simple montée de lumière au survol, aucun cadre */
  filter: brightness(1.18);
}

.carte-visuel {
  position: relative;
  height: clamp(460px, 70vh, 660px);
}
.trace { height: 100%; width: 100%; }
.pays {
  fill: none;
  stroke: rgba(196, 216, 245, 0.14);
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.trace-fond {
  fill: none;
  stroke: rgba(196, 216, 245, 0.15);
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}
.trace-lumiere {
  fill: none;
  stroke: url(#grad-route);   /* bleu → blanc du grand nord */
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: 0.95;
  filter: drop-shadow(0 0 5px rgba(125, 182, 255, 0.45));
}
.pt        { fill: var(--blanc); }
.pt-depart { fill: var(--accent); filter: drop-shadow(0 0 7px var(--glow)); }
.pt-nord   { fill: #ffffff; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.65)); }

.etiquette {
  position: absolute;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--doux);
}
.etiquette-nord   { top: 18px; right: 16px; color: var(--blanc); }
.etiquette-depart { bottom: 16px; left: 18px; color: var(--accent); }

/* ── 5. BANNIÈRE QUI TOURNE & CONTACT ─────────────────────────── */
.section-creation {
  padding: clamp(56px, 9vh, 110px) 0;
  overflow: hidden;
}
.generique {
  white-space: nowrap;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  padding: 18px 0;
}
.generique-piste { display: inline-flex; }
.generique-piste span {
  font-family: var(--f-affiche);
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(125, 182, 255, 0.5);
  padding-right: 0.5em;
}
.creation-note {
  text-align: center;
  color: var(--doux);
  font-size: 15.5px;
  margin-top: 30px;
  padding: 0 var(--gouttiere);
}

.section-contact {
  text-align: center;
  padding: clamp(56px, 9vh, 110px) var(--gouttiere) clamp(70px, 11vh, 130px);
}
.section-contact h2 {
  font-size: clamp(38px, 5vw, 72px);
  margin: 16px 0 30px;
}
.btn-mail { text-transform: none; letter-spacing: 0.08em; }

.reseaux {
  margin-top: 26px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--doux);
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
}
.reseau {
  color: var(--blanc);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(196, 216, 245, 0.28);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.reseau:hover, .reseau:focus-visible {
  color: var(--accent-vif);
  border-bottom-color: var(--accent);
}
.reseau-sep { color: var(--accent); }

.site-footer {
  text-align: center;
  padding: 24px var(--gouttiere);
  border-top: 1px solid var(--ligne);
  font-size: 12.5px;
  color: var(--doux);
}

/* ── 6. RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .carnet { min-height: 0; }
  .carnet-grille {
    grid-template-columns: 1fr;
    padding-top: 96px;
  }
  .carnet-texte { text-align: center; align-items: center; }
  .desc { max-width: 560px; }
  .carte-visuel { height: clamp(380px, 56vh, 540px); }
}

@media (max-width: 480px) {
  .main-nav { gap: 14px; }
  .main-nav a { font-size: 10.5px; letter-spacing: 0.16em; }
  .brand { font-size: 15px; }
  .actions { width: 100%; }
  .actions .btn { display: block; text-align: center; }
  .btn-mail { word-break: break-all; }
}

/* ── 7. ANIMATIONS & ACCESSIBILITÉ ────────────────────────────── */
/* Révélations par keyframes, conditionnées à html.anim (posée avant
   le rendu, sauf prefers-reduced-motion). Sans elle : tout visible. */
html.anim .reveal { opacity: 0; }
html.anim .reveal.est-visible {
  animation: apparition 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: var(--retard, 0s);
}
@keyframes apparition {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Étincelle qui parcourt la trace du voyage */
.trace-etincelle {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
html.anim .trace-etincelle {
  stroke-dasharray: 2.5 97.5;
  opacity: 0.95;
  filter: drop-shadow(0 0 6px rgba(207, 230, 255, 0.6));
  animation: etincelle-trace 22s linear infinite;
}
@keyframes etincelle-trace {
  to { stroke-dashoffset: -100; }
}

/* Respiration du point de départ */
html.anim .pt-depart { animation: pouls 4.5s ease-in-out infinite; }
@keyframes pouls {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Bannière-générique défilante */
html.anim .generique-piste {
  animation: generique-defile 30s linear infinite;
}
@keyframes generique-defile {
  to { transform: translateX(-50%); }
}

/* Réduction de mouvement : tout est statique */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus clavier visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}