/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 22px 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar nav {
  display: flex;
  justify-content: center;
  gap: 48px;
}

.navbar a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}

.navbar a:hover {
  opacity: 1;
}

/* Bascule de langue.
   Elle affiche la langue de DESTINATION — « EN » sur le site français — donc
   à la fois ce qu'on obtient en cliquant et un mot lisible par quelqu'un qui
   ne lit pas la langue en cours. Un seul lien, pas de menu déroulant, et pas
   de drapeau : un drapeau désigne un pays, pas une langue.

   Discrète par défaut : c'est une commande, pas une rubrique du site. Le trait
   la sépare des catégories sans ajouter de séparateur dessiné. */
.nav-langue {
  opacity: 0.55;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.72rem;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.nav-langue:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   INTRO
   ============================================ */
#intro {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ============================================
   VIDEO BACKGROUND
   ============================================ */
.video-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(75%);
}

/* ============================================
   VIDEO LOADER
   ============================================ */
#video-loader {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  opacity: 1;
  transform: scale(1);
  filter: blur(0px);

  transition:
    opacity 1.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.45s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* loader visible */
.loader-visible {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto;
}

/* fade-out synchronisé */
.loader-fade-out {
  opacity: 0 !important;
  transform: scale(0.75);
  filter: blur(32px);
  pointer-events: none;
}

/* percent text */
#video-loader-percent {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: #fff;
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.loader-fade-out #video-loader-percent {
  opacity: 0;
  transform: scale(0.75);
}

/* safety */
#video-loader[aria-hidden="true"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  max-width: 900px;
  width: 100%;
  min-height: 100vh;
}

.hero-content {
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.hero h1 {
  font-size: 3.6rem;
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero h2 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: #d87a3c;
  opacity: 0.9;
  margin-bottom: 28px;
}

.hero p {
  font-size: 1.05rem;
  line-height: 1.75;
  opacity: 0.85;
  max-width: 700px;
  margin: 0 auto;
}

/* Recul du hero à l'ouverture du formulaire de contact (voir contact-form.js).
   Rien à voir avec l'entrée ci-dessous : deux mouvements distincts, sur deux
   évènements distincts. */
.hero.shift-up .hero-content {
  transform: translateY(-40px);
  opacity: 0.4;
}

/* Entrée du hero au lever du rideau.

   Le loader sortait déjà en douceur — opacité, échelle et flou sur 1,45 s —
   mais le hero, lui, était simplement découvert : il ne bougeait pas. On
   voyait donc le noir s'effacer sur un bloc déjà en place, ce qui donne une
   arrivée sèche malgré le fondu.

   Ici il monte légèrement en se resserrant, sur la même courbe que le loader
   pour que les deux mouvements se répondent. La classe n'est posée qu'au lever
   du rideau : un visiteur qui revient et ne voit pas le loader trouve le hero
   en place, sans animation inutile.

   `both` conserve l'état final : sans lui, l'animation terminée relâcherait le
   hero dans son état de départ. */
@keyframes heroEntree {
  from {
    opacity: 0;
    transform: translateY(16px) scale(1.02);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero.hero-revele .hero-content {
  animation: heroEntree 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Respect du réglage système : on retire le mouvement.

   Conséquence assumée : sans animation, l'évènement `animationend` ne se
   déclenche jamais et la classe `hero-revele` reste posée. C'est sans effet —
   il n'y a alors aucun état figé à écraser, et `.shift-up` reprend donc la
   main normalement à l'ouverture du formulaire. */
@media (prefers-reduced-motion: reduce) {
  .hero.hero-revele .hero-content {
    animation: none;
  }
}

/* ============================================
   HERO EXPAND — "En savoir plus"
   ============================================ */

/* Bouton "En savoir plus" */
.hero-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Rubik', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.hero-expand-btn:hover {
  color: #d87a3c;
  border-color: #d87a3c;
  background: rgba(216, 122, 60, 0.06);
  transform: translateY(-2px);
}


/* Bloc expandu (overlay) — DESKTOP: relative, centered within .hero flex */
.hero-expanded {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;

  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;

  transform: scale(0.93);
  filter: blur(4px);

  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* État expandu actif */
.hero.expanded .hero-expanded {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  filter: blur(0);
}

.hero.expanded .hero-content {
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
  pointer-events: none;
}

/* Contenu expandu */
.hero-expanded-content {
  max-width: 680px;
  width: 100%;
  text-align: center;

  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.hero.expanded .hero-expanded-content {
  opacity: 1;
  transform: translateY(0);
}

/* ── Portrait ────────────────────────────────────────────────────────────────
   Toujours au-dessus du texte, sur grand écran comme sur mobile. C'est la
   seule disposition où le portrait, le nom, la description et le bouton
   partagent le même axe — le poser à gauche décalait fatalement le texte, et
   un titre centré au-dessus d'un texte décalé se voit.

   Reste que la place est comptée : le panneau est en position absolue sur
   toute la hauteur du hero. C'est pourquoi il s'élargit au-delà de celui-ci
   sur grand écran — un texte plus large est plus court, et c'est ce qui
   dégage la hauteur nécessaire au portrait. */
.hero-portrait {
  display: none;
}

/* 901 px : juste au-dessus du palier mobile, pour que le portrait ne
   disparaisse pas dans un intervalle sans raison. Le panneau y est plus étroit
   que le hero — c'est voulu, il redevient une carte centrée. */
@media (min-width: 901px) {
  .hero-expanded {
    /* Le panneau déborde du hero pour occuper la fenêtre. Fluide et non fixe :
       un portable de 1280 px en profite autant qu'un 27 pouces, chacun à sa
       mesure. La marge de 120 px tient compte de la barre de défilement, que
       100vw ne déduit pas.

       Largeur posée directement plutôt que déduite de celle du hero : celui-ci
       n'est pas toujours à son plafond de 900 px — mesuré à 813 px sur une
       fenêtre de 1360 —, et le calcul par décalages négatifs rendait alors un
       panneau trop étroit. */
    --panneau: min(1280px, calc(100vw - 120px));
    left: 50%;
    right: auto;
    width: var(--panneau);
    margin-left: calc(var(--panneau) / -2);
  }

  .hero-expanded {
    /* Padding vertical resserré : le portrait ajoute 215 px au contenu et il
       faut les prendre quelque part. 48 px restent confortables sur un panneau
       de cette taille.

       Le défilement est le filet de sécurité. Le contenu ne tient pas sur tous
       les écrans — il lui faut environ 900 px de haut — et il n'était pas
       question de masquer le portrait sur les plus bas, ni de rogner la
       typographie pour y parvenir. Sur un écran assez haut, rien ne défile. */
    padding: 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Un contenu plus haut que son conteneur est TRONQUÉ par le haut quand un
       conteneur flex le centre ; les marges automatiques, elles, le centrent
       sans jamais le rogner. */
    justify-content: flex-start;
  }

  .hero-expanded-content {
    max-width: calc(var(--panneau) - 80px);
    margin-block: auto;
  }

  .hero-portrait {
    display: block;
    width: 180px;
    margin: 0 auto 24px;
  }
}

/* L'image entière est un bouton, sans habillage : même geste que sur les
   photogrammes des pages projet, et la même lightbox derrière. */
.portrait-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.portrait-open:focus-visible {
  outline: 2px solid #ff7a00;
  outline-offset: 4px;
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Masqué le temps du trajet vers le centre, sinon on verrait le portrait à
   deux endroits à la fois. Pendant que la lightbox est ouverte. */
.hero-portrait.is-open {
  visibility: hidden;
}

.hero-expanded-content h1 {
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero-expanded-content h2 {
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: #d87a3c;
  opacity: 0.9;
  margin-bottom: 32px;
}

.hero-expanded-content p {
  font-size: 1rem;
  line-height: 1.85;
  opacity: 0.82;
  margin-bottom: 20px;
  text-align: justify;
  /* Justifier sans césure creuse des « rivières » de blancs entre les mots :
     le navigateur ne peut qu'étirer les espaces. La césure lui donne un second
     levier. Elle suit les règles du français grâce au lang="fr" du document. */
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Une coupure ne doit pas laisser une syllabe orpheline en bout de ligne. */
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 6 3 3;
}

/* Les titres de projets ne se coupent pas : « Quartier Ruis-seau » sur deux
   lignes abîme un nom d'œuvre. Le reste du paragraphe reste césurable. */
.hero-expanded-content .mention {
  -webkit-hyphens: manual;
  hyphens: manual;
}

.hero-expanded-content p:last-child {
  margin-bottom: 0;
}

/* Bouton fermer (croix) */
.hero-collapse-btn {
  position: static;
  display: block;
  margin: 40px auto 0;
  padding: 10px 24px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.25s ease, border-color 0.25s ease;
}

.hero-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.hero.expanded .hero-collapse-btn {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   FOOTER
   ============================================ */
.footer-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 28px;
  padding: 40px 20px;
  /* Sans `flex-wrap: wrap`, un pied de page trop étroit pour tenir sur une
     ligne ne débordait pas franchement — `flex-shrink` comprimait chaque
     lien individuellement, l'adresse mail (insécable) dépassant du cadre
     pendant que « Haut de page ↑ » (des mots séparables) s'écrasait sur
     plusieurs lignes. Mesuré à 375 px avec 6 liens : contenu à 392 px,
     répliqué sur 3 hauteurs différentes.

     Le pied de page n'est pas fixe comme la barre de navigation — il peut
     grandir verticalement sans rien déplacer d'autre. Le replier est donc la
     bonne réponse ici, là où la navbar avait dû se résoudre à rétrécir. */
}

/* Adresse mail cliquable : un producteur pressé n'ouvre pas le formulaire.
   Le lien vers le CV et le retour en haut de page reçoivent le même
   traitement — un mot nu, sans bouton ni icône, cohérent avec la sobriété
   du reste du pied de page. */
.footer-mail,
.footer-cv,
.footer-top {
  color: #ffffff;
  text-decoration: none;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  letter-spacing: 0.06em;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.footer-mail:hover,
.footer-cv:hover,
.footer-top:hover {
  opacity: 1;
}

.footer-icon {
  width: clamp(26px, 3vw, 40px) !important;
  height: auto !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-link:hover .footer-icon {
  transform: scale(1.1);
  opacity: 0.85;
}