/* ============================================================
   ACCUEIL.CSS — Styles spécifiques à la page d'accueil
   Nathan COLIN alias WillyOL
   ============================================================ */

.page-accueil {
  background: var(--blanc);
  color:      var(--noir);
}
.page-accueil nav.scrolled {}

/* ═══════════════════════════════════════════════════════════
   HERO — VIDÉO PLEIN ÉCRAN
   ─────────────────────────────────────────────────────────

   CONCEPT : CONTRASTE D'ÉCHELLES 7:1

   "Nathan" en Bebas Neue ~20vw.
   Entre les deux : une règle 1px + la discipline en mono xs.
   "Colin" en Bebas Neue ~2.8vw — même fonte, même alignement,
   un septième de la taille.

   La lecture naturelle va de haut en bas :
   GRAND → fine règle → petit → espace → scroll indicator
   Ce trajet vertical *est* l'affordance scroll.

   ARCHITECTURE CSS SANS CHEVAUCHEMENT :
   .hero = display:grid, 2 rangées :
     · row 1 (1fr)   : espace vide, la vidéo respire
     · row 2 (auto)  : .hero-type — tout le texte
   .hero-eyebrow = position:absolute, haut-gauche, row 1
   .hero-scroll-wrap = position:absolute, centré en bas
   Aucun texte dans le flux ne peut se superposer.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   CONTENEUR HERO — Zoning centré
   ───────────────────────────────────────────── */
.hero {
  position: relative;
  width:    100%;
  height:   100svh;
  overflow: hidden;

  /* Centered layout matching zoning */
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
}

/* ─────────────────────────────────────────────
   VIDÉO — plein écran absolu, intouchable
   ───────────────────────────────────────────── */
.hero-video {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  z-index:         0;
}

/* Overlay vertical uniquement — fond en bas pour lisibilité */
.hero-overlay {
  position:       absolute;
  inset:          0;
  z-index:        1;
  pointer-events: none;
  background:     linear-gradient(
    to bottom,
    rgba(0,0,0,0.1)  0%,
    rgba(0,0,0,0.00) 28%,
    rgba(0,0,0,0.00) 48%,
    rgba(0,0,0,0.55) 100%
  );
}

/* ─────────────────────────────────────────────
   EYEBROW — masqué dans le nouveau layout
   (discipline est intégrée dans hero-type-mediane)
   ───────────────────────────────────────────── */
.hero-eyebrow {
  display: none;
}

/* ─────────────────────────────────────────────
   HERO-TYPE — Centre absolu
   Structure : NATHAN COLIN (grand) + mediane + alias WillyOL
   ───────────────────────────────────────────── */
.hero-type {
  position:   relative;
  z-index:    3;
  text-align: center;
  padding:    0 var(--marge);
  max-width:  100%;
  display:    flex;
  flex-direction: column;
  align-items: center;
}

/* Masque vertical pour les surgissements */
.hero-type-mask {
  overflow:    hidden;
  line-height: 0;
}

/* NATHAN COLIN — très grand, centré */
.hero-type-grand {
  display:        block;
  font-family:    var(--font-titre);
  font-size:      clamp(7rem, 18vw, 20vw);
  line-height:    0.88;
  letter-spacing: -0.03em;
  color:          var(--blanc);
  white-space:    nowrap;

  transform:  translateY(110%);
  opacity:    0;
  animation:  h-surgit 1.1s var(--ease-out) 0.15s forwards;
}

/* ── Ligne médiane — masquée, non présente dans le zoning ── */
.hero-type-mediane {
  display: none;
}

.hero-type-regle     { display: none; }
.hero-type-discipline{ display: none; }
.hero-type-annee     { display: none; }

/* masque alias */
.hero-type-mask--colin {
  margin-top: 0.4em;
}

/* "alias WillyOL" */
.hero-type-petit {
  display:        block;
  font-family:    var(--font-corps);
  font-size:      clamp(1rem, 2.2vw, 2vw);
  font-weight:    300;
  line-height:    1;
  color:          rgba(255,255,255,0.65);
  white-space:    nowrap;
  letter-spacing: 0.04em;

  transform:  translateY(110%);
  opacity:    0;
  animation:  h-surgit 0.9s var(--ease-out) 0.45s forwards;
}

/* ─────────────────────────────────────────────
   DESCRIPTION CENTRÉE — sous le nom
   ───────────────────────────────────────────── */
.hero-desc {
  position:   absolute;
  bottom:     clamp(6rem, 12vh, 9rem);
  left:       50%;
  transform:  translateX(-50%);
  z-index:    3;
  width:      min(580px, 80vw);
  text-align: center;

  font-family: var(--font-corps);
  font-size:   clamp(0.82rem, 1.2vw, 0.96rem);
  font-weight: 300;
  line-height: 1.75;
  color:       rgba(255,255,255,0.45);

  opacity:   0;
  animation: h-fade 0.8s var(--ease-out) 1.1s forwards;
}

/* ─────────────────────────────────────────────
   INDICATEUR SCROLL
   ───────────────────────────────────────────── */
.hero-scroll-wrap {
  position:   absolute;
  bottom:     clamp(1.4rem, 3vh, 2.2rem);
  left:       50%;
  transform:  translateX(-50%);
  z-index:    3;

  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.5rem;
  pointer-events: none;

  opacity:   0;
  animation: h-fade 0.7s var(--ease-out) 1.6s forwards;
}

.hero-scroll-label {
  font-family:    var(--font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.28);
}

.hero-scroll-ligne {
  width:     1px;
  height:    44px;
  background: rgba(255,255,255,0.12);
  position:  relative;
  overflow:  hidden;
}

/* Curseur qui descend — animation continue */
.hero-scroll-curseur {
  position:   absolute;
  top:        -100%;
  left:       0;
  width:      100%;
  height:     40%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,255,255,0.8),
    transparent
  );
  animation: h-scroll-curseur 1.8s cubic-bezier(0.4,0,0.6,1) 2.2s infinite;
}

@keyframes h-scroll-curseur {
  0%   { top: -40%;  }
  100% { top: 110%;  }
}

/* ─────────────────────────────────────────────
   ACCESSIBILITÉ
   ───────────────────────────────────────────── */
.hero-sr-only {
  position:   absolute;
  width:  1px; height: 1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}

/* ─────────────────────────────────────────────
   KEYFRAMES
   ───────────────────────────────────────────── */
@keyframes h-surgit {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes h-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ─────────────────────────────────────────────
   SKIP-ANIMATION — navigation interne
   ───────────────────────────────────────────── */
.skip-animation .hero-type-grand,
.skip-animation .hero-type-petit {
  animation:  none  !important;
  opacity:    1     !important;
  transform:  translateY(0) !important;
}
.skip-animation .hero-type-mediane,
.skip-animation .hero-scroll-wrap,
.skip-animation .hero-desc {
  animation:  none  !important;
  opacity:    1     !important;
  transform:  translateY(0) !important;
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-type-grand { font-size: clamp(5rem, 18vw, 18vw); }
  .hero-type-petit { font-size: clamp(0.9rem, 3.5vw, 3vw); }
  .hero-type-annee { display: none; }
  .hero-desc       { width: 90vw; font-size: 0.82rem; }
}

@media (max-width: 480px) {
  .hero-type-grand { font-size: 16vw; }
  .hero-type-petit { font-size: 3.5vw; }
  .hero-type-discipline {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
  }
}

.contenu-principal {
  background: var(--blanc);
  color:      var(--noir);
}

/* ─────────────────────────────────────────────
   SECTION ACCROCHE
   ───────────────────────────────────────────── */
.section-accroche {
  padding: clamp(5rem, 10vw, 10rem) var(--marge);
}

.accroche-inner {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       clamp(2rem, 5vw, 6rem);
  align-items: end;
}

.titre-accroche {
  font-family:    var(--font-titre);
  font-size:      clamp(3.5rem, 8vw, 7.5rem);
  line-height:    1;
  letter-spacing: -0.02em;
}

.accroche-droite {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            2rem;
  padding-bottom: 0.5rem;
}

.desc-accroche {
  font-size:   clamp(0.9rem, 1.4vw, 1.05rem);
  line-height: 1.8;
  font-weight: 300;
  max-width:   38ch;
  color:       rgba(10,10,10,0.7);
}

/* Bouton CTA — premium, visible, incitatif */
.btn-lien {
  display:          inline-flex;
  align-items:      center;
  gap:              0.85rem;
  font-family:      var(--font-titre);
  font-size:        clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing:   0.18em;
  text-transform:   uppercase;
  background:       var(--noir);
  color:            var(--blanc);
  padding:          0.9rem 1.8rem;
  position:         relative;
  overflow:         hidden;
  transition:       gap        0.35s var(--ease-out),
                    background 0.35s ease,
                    transform  0.25s var(--ease-out);
}

/* Animated fill sweep on hover */
.btn-lien::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(255,255,255,0.12);
  transform:  translateX(-101%);
  transition: transform 0.45s var(--ease-out);
}

.btn-lien:hover::before {
  transform: translateX(0);
}

.btn-lien:hover {
  gap:       1.3rem;
}

.btn-lien:active {
  transform: scale(0.97);
}

@media (max-width: 768px) {
  .accroche-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .titre-accroche { font-size: clamp(3.2rem, 11vw, 5rem); }
  .titre-contact  { font-size: clamp(3.5rem, 14vw, 10rem); }
}

/* ─────────────────────────────────────────────
   TICKER DÉFILANT
   ───────────────────────────────────────────── */
.ticker {
  overflow:   hidden;
  padding:    2rem 0;
  border-top: 1px solid rgba(10,10,10,0.08);
  border-bottom: 1px solid rgba(10,10,10,0.08);
}

.ticker-track {
  display:        flex;
  gap:            3rem;
  white-space:    nowrap;
  animation:      ticker-scroll 22s linear infinite;
}

.ticker-track span {
  font-family:    var(--font-titre);
  font-size:      clamp(1rem, 1.8vw, 1.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          rgba(10,10,10,0.35);
  flex-shrink:    0;
  line-height:    1;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────
   SECTION FEATURED WORK — Showreel
   Layout : vidéo gauche (~62%) | infos droite
   Vocabulaire visuel identique à la vue liste projets
   ───────────────────────────────────────────── */
.section-featured {
  padding: clamp(4rem, 8vw, 8rem) var(--marge);
}

.label-section {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--gris-moyen);
  margin-bottom:  2.5rem;
}

.featured-card {
  display:  block;
  position: relative;
}

/* Layout interne : grille 2 colonnes — vidéo élargie */
.showreel-inner {
  display:               grid;
  grid-template-columns: 72fr 28fr;
  gap:                   clamp(2rem, 4vw, 5rem);
  align-items:           center;
  border-top:            1px solid rgba(10,10,10,0.1);
  padding-top:           clamp(2rem, 4vw, 3.5rem);
}

/* Média */
.featured-media {
  position:    relative;
  aspect-ratio: 16 / 9;
  overflow:    hidden;
}

.featured-media video,
.featured-media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.9s var(--ease-out);
}

.featured-card:hover .featured-media video,
.featured-card:hover .featured-media img {
  transform: scale(1.03);
}

/* Indicateur play */
.showreel-play-hint {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transition:      opacity 0.35s var(--ease-out);
  pointer-events:  none;
  background:      rgba(0,0,0,0.2);
}

.showreel-card:hover .showreel-play-hint { opacity: 1; }

/* Colonne d'infos — même logique que vue-liste */
.featured-info {
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
  height:         100%;
  gap:            clamp(2rem, 5vw, 4rem);
}

.featured-info-haut {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.featured-titre {
  font-family:    var(--font-titre);
  font-size:      clamp(3rem, 6vw, 6.5rem);
  letter-spacing: -0.02em;
  line-height:    0.92;
  color:          var(--noir);
  /* No hover animation on title — removed per design request */
}

.featured-card:hover .featured-titre {
  /* Intentionally no transform or opacity change */
}

.featured-meta {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--gris-moyen);
  transition:     color 0.4s var(--ease-out);
}

.featured-card:hover .featured-meta { color: var(--noir); }

/* CTA textuel bas de colonne */
.featured-cta {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(10,10,10,0.3);
  transition:     color 0.4s ease;
}

.featured-card:hover .featured-cta { color: var(--noir); }

@media (max-width: 768px) {
  .showreel-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .featured-info {
    flex-direction: row;
    align-items:    center;
    justify-content: space-between;
  }
  .featured-titre { font-size: clamp(2rem, 8vw, 3.5rem); }
}

/* ─────────────────────────────────────────────
   SECTION RÉSEAUX SOCIAUX
   ───────────────────────────────────────────── */
.section-reseaux {
  padding: clamp(4rem, 8vw, 8rem) var(--marge);
}

.reseaux-liste {
  list-style: none;
  display:    flex;
  flex-direction: column;
}

.reseau-lien {
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  padding:        1.5rem 0;
  border-bottom:  1px solid rgba(10,10,10,0.1);
  transition:     opacity 0.45s ease;
}

/* Au survol d'un lien, les autres s'estompent */
.section-reseaux .reseaux-liste:hover .reseau-lien {
  opacity: 0.3;
}

.section-reseaux .reseaux-liste:hover .reseau-lien:hover {
  opacity: 1;
}

.reseau-nom {
  font-family:    var(--font-titre);
  font-size:      clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.01em;
  line-height:    1;
}

.reseau-fleche {
  font-size:   1.5rem;
  opacity:     0.35;
  transition:  opacity var(--dur-rapide) ease,
               transform var(--dur-rapide) var(--ease-out);
}

.reseau-lien:hover .reseau-fleche {
  opacity:   1;
  transform: translate(4px, -4px);
}

/* ─────────────────────────────────────────────
   SECTION CONTACT — Premium redesign
   Fond blanc / texte noir — centrage vertical plein écran
   ───────────────────────────────────────────── */
.section-contact {
  min-height:      100svh;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-start;
  padding:         clamp(8rem, 14vw, 12rem) var(--marge) clamp(1.5rem, 2.5vw, 3rem);
  position:        relative;
  overflow:        hidden;
  background:      var(--blanc);
  color:           var(--noir);
}

.contact-inner {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            0;
  position:       relative;
  z-index:        1;
}

/* Top strip — mono label */
.contact-inner::before {
  content:        '— Available for projects';
  display:        block;
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(0,0,0,0.3);
  margin-bottom:  clamp(2rem, 4vw, 3rem);
}

.titre-contact {
  font-family:    var(--font-titre);
  font-size:      clamp(4rem, 11vw, 13rem);
  line-height:    0.9;
  letter-spacing: -0.03em;
  color:          var(--noir);
  margin-bottom:  clamp(2.5rem, 5vw, 4.5rem);
}

/* Email — roulette split-text
   Deux couches superposées via position absolute.
   La couche visible monte, la couche fantôme entre par le bas.
   Géré côté JS (data-split-contact). Le CSS définit les états. */
.contact-email {
  font-family:    var(--font-titre);
  font-size:      clamp(1.4rem, 3.5vw, 3.2rem);
  font-weight:    400;
  letter-spacing: 0.04em;
  color:          rgba(10,10,10,0.45);
  display:        inline-block;
  position:       relative;
  overflow:       hidden;
  transition:     color 0.4s ease;
  /* La hauteur est celle d'une ligne */
  line-height:    1.1;
  vertical-align: bottom;
}

.contact-email:hover {
  color: var(--noir);
}

/* Couche principale — sort vers le haut */
.contact-email .ce-layer-top {
  display:    block;
  transition: transform 0.55s var(--ease-out);
}

/* Couche fantôme — entre par le bas */
.contact-email .ce-layer-bot {
  position:   absolute;
  inset:      0;
  display:    block;
  transform:  translateY(105%);
  transition: transform 0.55s var(--ease-out);
  color:      var(--noir);
}

.contact-email:hover .ce-layer-top {
  transform: translateY(-105%);
}

.contact-email:hover .ce-layer-bot {
  transform: translateY(0%);
}

/* Alternance tag */
.contact-alternance {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(10,10,10,0.35);
  margin-top:     clamp(2rem, 4vw, 3.5rem);
  display:        flex;
  align-items:    center;
  gap:            0.7rem;
}

.contact-alternance::before {
  content:       '';
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #e8a020;
  flex-shrink:   0;
  animation:     pulse-contact-dot 2.5s ease-in-out infinite 0.8s;
}

/* Réduit l'espace entre les deux tags quand ils se suivent */
.contact-alternance + .contact-dispo {
  margin-top: clamp(0.5rem, 1vw, 0.9rem);
}

/* Dispo tag */
.contact-dispo {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(10,10,10,0.35);
  margin-top:     clamp(2rem, 4vw, 3.5rem);
  display:        flex;
  align-items:    center;
  gap:            0.7rem;
}

/* Pulsing availability dot */
.contact-dispo::before {
  content:       '';
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #2ecc71;
  flex-shrink:   0;
  animation:     pulse-contact-dot 2.5s ease-in-out infinite;
}

@keyframes pulse-contact-dot {
  0%, 100% { opacity: 1; transform: scale(1);   }
  50%       { opacity: 0.55; transform: scale(0.75); }
}