/* assets/style.css — Voyages d'Exception : système de design complet */

@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Familjen+Grotesk:wght@400;500;600&display=swap');

/* 1. Jetons */

:root {
  --encre: #0B0A0D;
  --encre-2: #17141C;
  --papier: #F4F0EC;
  --papier-2: #E7E0D8;
  --signature: #B5237E;
  --accent: #C9E265;
  --voile: rgba(11, 10, 13, .62);

  --display: "Gloock", Georgia, serif;
  --texte: "Familjen Grotesk", system-ui, sans-serif;

  --t-geant: clamp(2.6rem, 7.6vw, 8rem);
  --t-titre: clamp(2.6rem, 6.5vw, 5.6rem);
  --t-section: clamp(1.9rem, 3.4vw, 3.1rem);
  --t-sous: clamp(1.15rem, 1.5vw, 1.45rem);
  --t-corps: 1.0625rem;
  --t-menu: .78rem;

  --gouttiere: 24px;
  --marge: clamp(20px, 5vw, 88px);
}

/* 2. Réinitialisation */

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

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

body {
  font-family: var(--texte);
  font-size: var(--t-corps);
  line-height: 1.62;
  background: var(--papier);
  color: var(--encre);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

/* 3. Typographie */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  text-wrap: balance;
}

p { max-width: 62ch; }

.surtitre {
  font-size: var(--t-menu);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 500;
}

.geant {
  font-size: var(--t-geant);
  line-height: 1.02;
}

.titre {
  font-size: var(--t-titre);
  line-height: 1.02;
}

.section-titre {
  font-size: var(--t-section);
  line-height: 1.02;
}

.chapo {
  font-size: var(--t-sous);
  line-height: 1.4;
  font-weight: 500;
  max-width: 48ch;
}

.corps {
  font-size: var(--t-corps);
  line-height: 1.62;
}

.note {
  font-size: .9rem;
  opacity: .8;
  line-height: 1.5;
}

.citation {
  font-family: var(--display);
  font-size: var(--t-titre);
  line-height: 1.1;
  max-width: 18ch;
}

/* 4. Grille et sections */

.enveloppe {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  width: 100%;
  max-width: 2560px;
  margin: 0 auto;
  padding: 0 var(--marge);
}

section { padding: 104px 0; }

.sombre { background: var(--encre); color: var(--papier); }
.sombre .note { color: var(--papier-2); }

.clair { background: var(--papier); color: var(--encre); }
.clair .note { color: var(--encre-2); }

.sombre .section-titre::after,
.clair .section-titre::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--signature);
  margin-top: 24px;
}

/* 5. En-tête */

.tete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--marge);
  background: rgba(244, 240, 236, .96);
  border-bottom: 1px solid var(--papier-2);
  backdrop-filter: blur(8px);
}

.sombre ~ .tete,
.sombre > .tete { background: rgba(11, 10, 13, .96); border-bottom-color: var(--encre-2); }

.marque {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .02em;
}

.menu {
  display: flex;
  gap: 40px;
}

.menu a {
  font-size: var(--t-menu);
  text-transform: uppercase;
  letter-spacing: .16em;
  position: relative;
  padding: 4px 0;
}

.menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--signature);
}

/* 6. Pied de page */

.pied {
  padding: 104px var(--marge) 40px;
  border-top: 1px solid var(--papier-2);
  background: var(--papier);
  color: var(--encre);
}

.pied-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 16px 0;
}

.pied-menu a {
  font-size: var(--t-menu);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.pied-mot {
  font-family: var(--display);
  font-size: var(--t-titre);
  line-height: 1.02;
  max-width: 12ch;
}

.pied-legal {
  font-size: .85rem;
  margin-top: 64px;
  opacity: .7;
}

/* 7. Plein écran — composition exacte (§6) */

.plein-ecran {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.plein-ecran > .vis-plein {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plein-ecran::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--voile);
}

.plein-ecran > .enveloppe {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* 8. Visuels et déchirure */

.vis {
  position: relative;
  overflow: hidden;
}

.vis > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vis-plein { grid-column: 1 / -1; }

/* 9. Liens et appels */

.lien, .appel {
  position: relative;
  display: inline-block;
  font-size: var(--t-menu);
  text-transform: uppercase;
  letter-spacing: .16em;
  padding-bottom: 4px;
}

.lien::after, .appel::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 1px;
  background: var(--signature);
  transition: width 320ms cubic-bezier(.16, .84, .34, 1);
}

.lien:hover::after, .appel:hover::after { width: 100%; }

.appel {
  border: 1px solid currentColor;
  padding: 16px 24px;
}

.appel::after { bottom: 10px; }

/* 10. Registre */

.registre-item {
  padding: 40px 0;
  border-bottom: 1px solid var(--papier-2);
  transition: padding 320ms cubic-bezier(.16, .84, .34, 1);
}

.sombre .registre-item { border-bottom-color: var(--encre-2); }

.registre-item:hover { padding-left: 24px; }

/* 11. Temps */

.temps {
  display: grid;
  gap: 64px;
  counter-reset: temps;
}

.temps-num {
  font-family: var(--display);
  font-size: var(--t-section);
  color: var(--accent);
  line-height: 1;
}

/* 12. Durée */

.duree {
  font-size: var(--t-menu);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--encre-2);
}

.sombre .duree { color: var(--papier-2); }

/* 13. Coordonnées */

.coord {
  display: grid;
  gap: 16px;
}

.coord-ligne {
  font-size: var(--t-corps);
  border-bottom: 1px solid var(--papier-2);
  padding-bottom: 16px;
}

.sombre .coord-ligne { border-bottom-color: var(--encre-2); }

/* 14. États fermés — UNIQUEMENT si JS actif ET pas de mouvement réduit */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal,
  .js .geant,
  .js .titre,
  .js .section-titre {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms cubic-bezier(.16, .84, .34, 1),
                transform 800ms cubic-bezier(.16, .84, .34, 1);
  }

  .js .reveal.reveal-visible,
  .js .geant.reveal-visible,
  .js .titre.reveal-visible,
  .js .section-titre.reveal-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .js .vis > img {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0, 0 0, 0 0);
    transition: clip-path 1.3s cubic-bezier(.16, .84, .34, 1);
  }

  .js .vis.vis-visible > img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 80%, 8% 50%);
  }

  .js .vis::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 2px 0 var(--signature);
    opacity: 0;
    transition: opacity 1.3s cubic-bezier(.16, .84, .34, 1);
  }

  .js .vis.vis-visible::after { opacity: 1; }

  .js .registre-item .vis > img {
    transition: clip-path 1.3s cubic-bezier(.16, .84, .34, 1);
  }

  .js .registre-item:hover .vis > img {
    clip-path: polygon(0 -6px, 100% -6px, 100% calc(100% + 6px), 0 calc(100% + 6px), 0 80%, 8% 50%);
  }

  .js .registre-item .vis::after { transition: opacity 320ms ease; }
  .js .registre-item:hover .vis::after { opacity: 1; }
}

/* 15. Responsive */

@media (max-width: 768px) {
  .tete { flex-direction: column; gap: 16px; padding: 16px; }
  .menu { gap: 20px; flex-wrap: wrap; justify-content: center; }
  .pied { padding: 64px 20px 32px; }
  .pied-mot { font-size: var(--t-titre); }
  .enveloppe { padding: 0 20px; }
  .enveloppe > * { grid-column: 1 / -1 !important; }
  .temps { gap: 40px; }
}