/* =============================================================================
   Maxime Portfolio — Hero Section
   Style : International Typographic / Graphisme suisse
   Fond blanc, typo noire, accentuation par souligné épais
   ============================================================================= */

/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
  --mpf-gap:        2rem;
  --mpf-transition: 350ms ease;
}

/* ── Section hero ────────────────────────────────────────────────────────── */
.mpf-hero {
  display:        flex;
  flex-direction: column;
  gap:            var(--mpf-gap);
  padding:        clamp(3rem, 8vw, 6rem) 0;
  background:     #fff;
  color:          #000;
}

/* ── Phrase d'accroche ───────────────────────────────────────────────────── */
.mpf-hero__headline {
  position:    relative;
  font-size:   clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  padding-bottom: 2rem;
}

.mpf-hero__name {
  font-weight: 700;
}

.mpf-hero__keyword-wrap {
  display:     inline-flex;
  align-items: baseline;
  gap:         1px;
}

/* Le mot-clé : souligné noir épais, cliquable */
.mpf-hero__keyword {
  font-weight:     700;
  text-decoration: none;
  border-bottom:   4px solid #000;
  padding-bottom:  1px;
  min-width:       2ch;
}

/* Wrap cliquable — indique l'interactivité */
.mpf-hero__keyword-wrap {
  position:    relative;
  display:     inline-flex;
  align-items: baseline;
  gap:         4px;
  cursor:      pointer;
}

.mpf-hero__keyword-wrap:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}

/* Curseur clignotant — rectangle noir bien visible */
.mpf-hero__cursor {
  display:        inline-block;
  width:          3px;
  height:         0.85em;
  background:     #000;
  margin-left:    1px;
  vertical-align: text-bottom;
  animation:      mpf-blink 900ms step-end infinite;
}

@keyframes mpf-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Chevron indicateur de dropdown */
.mpf-hero__chevron {
  font-size:      0.6em;
  line-height:    1;
  vertical-align: middle;
  display:        inline-block;
  transition:     transform 200ms ease;
  user-select:    none;
}

.mpf-hero__keyword-wrap.is-open .mpf-hero__chevron {
  transform: rotate(180deg);
}

/* ── Dropdown custom ─────────────────────────────────────────────────────── */
.mpf-dropdown {
  position:         absolute;
  top:              calc(100% + 6px);
  left:             0;
  margin:           0;
  padding:          0;
  list-style:       none;
  background:       #fff;
  border:           2px solid #000;
  min-width:        100%;
  z-index:          100;
  /* Animation d'ouverture */
  animation:        mpf-dropdown-in 180ms ease forwards;
}

@keyframes mpf-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mpf-dropdown__item {
  padding:     0.5rem 0.85rem;
  font-size:   clamp(1rem, 2vw, 1.3rem);
  font-weight: 400;
  cursor:      pointer;
  white-space: nowrap;
  transition:  background 150ms ease, color 150ms ease;
}

.mpf-dropdown__item:hover {
  background: #000;
  color:      #fff;
}

.mpf-dropdown__item.is-active {
  font-weight:     700;
  border-left:     3px solid #000;
  padding-left:    calc(0.85rem - 3px);
}

.mpf-dropdown__item.is-active:hover {
  background:  #000;
  color:       #fff;
  border-left-color: #fff;
}

/* ── Cercle de progression (camembert) ────────────────────────────────────── */
.mpf-progress-circle {
  position: absolute;
  top:      0;
  right:    0;
  display:  block;
  opacity:  0.7;
  transition: opacity 200ms ease;
}

.mpf-progress-circle:hover {
  opacity: 1;
}

/* ── Bio ─────────────────────────────────────────────────────────────────── */
.mpf-hero__bio {
  max-width:   55ch;
  font-size:   clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
  color:       #000;
  transition:  opacity var(--mpf-transition);
  padding-bottom: 1rem;
}

.mpf-hero__bio p { margin: 0 0 0.6em; }
.mpf-hero__bio p:last-child { margin-bottom: 0; }

/* ── Grille de projets → Blocs narratifs ──────────────────────────────────── */
.mpf-hero__projects {
  display:        flex;
  flex-direction: column;
  gap:            clamp(2rem, 5vw, 4rem);
  transition:     opacity var(--mpf-transition);
}

/* ── Bloc projet (alterné gauche/droite) ─────────────────────────────────── */
.mpf-project-block {
  border-top: 1px solid #000;
  padding-top: 1.5rem;
}

.mpf-project-block__link {
  display:         grid;
  grid-template-columns: 1fr 1fr;
  gap:             clamp(1.5rem, 4vw, 3rem);
  align-items:     start;
  text-decoration: none;
  color:           #000;
  transition:      opacity 250ms ease;
}

.mpf-project-block__link:hover {
  opacity: 0.7;
}

/* Bloc sans images : pleine largeur */
.mpf-project-block--no-gallery .mpf-project-block__link {
  grid-template-columns: 1fr;
  row-gap : normal;
}

.mpf-project-block--no-gallery .mpf-project-block__content {
  max-width: 70ch;
  order: 1 !important;
}

/* Par défaut : contenu à gauche, galerie à droite */
.mpf-project-block__content {
  order: 1;
}

.mpf-project-block__gallery {
  order: 2;
}

/* Inversé pour les projets impairs : contenu à droite */
.mpf-project-block--right .mpf-project-block__content {
  order: 2;
}

.mpf-project-block--right .mpf-project-block__gallery {
  order: 1;
}

/* ── Contenu textuel ──────────────────────────────────────────────────────── */
.mpf-project-block__title {
  margin:         0 0 0.5rem;
  font-size:      clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight:    700;
  line-height:    1.2;
  letter-spacing: -0.01em;
}

.mpf-project-block__period {
  display:     inline-block;
  margin:      0 0 0.75rem;
  font-size:   0.9rem;
  font-weight: 400;
  color:       #666;
}

.mpf-project-block__period::before {
  content: '⏱ ';
  opacity: 0.6;
}

.mpf-project-block__excerpt {
  margin:      0;
  font-size:   clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
  color:       #333;
}

/* ── Galerie d'images + vidéos ────────────────────────────────────────────── */
.mpf-project-block__gallery {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:                   8px;
}

.mpf-project-block__media {
  position: relative;
}

.mpf-project-block__media--youtube {
  cursor: pointer;
}

.mpf-project-block__image {
  width:      100%;
  height:     auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display:    block;
  border:     1px solid #000;
  transition: opacity 250ms ease;
}

.mpf-project-block__link:hover .mpf-project-block__image {
  opacity: 0.85;
}

/* Icône play pour les vidéos YouTube */
.mpf-project-block__play-icon {
  position: absolute;
  top:      50%;
  left:     50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 200ms ease;
}

.mpf-project-block__media--youtube:hover .mpf-project-block__play-icon {
  transform: translate(-50%, -50%) scale(1.1);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mpf-project-block__link {
    grid-template-columns: 1fr;
  }

  /* En mobile, toujours le même ordre : contenu puis galerie */
  .mpf-project-block__content {
    order: 1 !important;
  }

  .mpf-project-block__gallery {
    order: 2 !important;
  }

  .mpf-project-block__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Navigation — tirets horizontaux, pas de points ─────────────────────── */
.mpf-hero__nav {
  display:     flex;
  gap:         0.5rem;
  align-items: center;
}

.mpf-nav__dot {
  appearance:  none;
  border:      none;
  background:  #ccc;
  width:       24px;
  height:      3px;
  cursor:      pointer;
  padding:     0;
  transition:  background 200ms ease, width 200ms ease;
}

.mpf-nav__dot.is-active {
  background: #000;
  width:      40px;
}

.mpf-nav__dot:hover:not(.is-active) {
  background: #888;
}

/* ── Loader — minimaliste ────────────────────────────────────────────────── */
.mpf-hero__loader {
  display:    flex;
  gap:        0.35rem;
  align-items: center;
  transition: opacity 300ms ease;
}

.mpf-hero__loader-dot {
  width:      6px;
  height:     6px;
  background: #000;
  animation:  mpf-loader 1s ease-in-out infinite;
}

.mpf-hero__loader-dot:nth-child(2) { animation-delay: 0.15s; }
.mpf-hero__loader-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes mpf-loader {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 1; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mpf-hero__projects {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 400px) {
  .mpf-hero__projects {
    grid-template-columns: 1fr;
  }
}

/* ── Accessibilité : mouvement réduit ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mpf-hero__cursor,
  .mpf-hero__loader-dot { animation: none; }
  .mpf-project-card,
  .mpf-project-card__thumb img { transition: none; }
}

/* ── Fallback <noscript> ─────────────────────────────────────────────────── */
.mpf-noscript {
  display:        flex;
  flex-direction: column;
  gap:            3rem;
  padding:        clamp(2rem, 6vw, 4rem) 0;
}

.mpf-noscript__block {
  border-top: 2px solid #000;
  padding-top: 1.5rem;
}

.mpf-noscript__intro {
  font-size:   clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 400;
  line-height: 1.3;
  margin:      0 0 1rem;
}

.mpf-noscript__keyword {
  font-weight:    700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

.mpf-noscript__bio {
  max-width:   55ch;
  font-size:   1rem;
  line-height: 1.65;
  margin:      0 0 1.5rem;
}

.mpf-noscript__bio p {
  margin: 0 0 0.6em;
}

.mpf-noscript__projects {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.mpf-noscript__project {
  display:         grid;
  grid-template-columns: 1fr 1fr;
  gap:             1.5rem;
  padding:         1rem 0;
  border-top:      1px solid #000;
  text-decoration: none;
  color:           #000;
  transition:      opacity 200ms ease;
}

.mpf-noscript__project:hover {
  opacity: 0.7;
}

.mpf-noscript__project-content {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

.mpf-noscript__project-thumb {
  width:      100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display:    block;
  background: #f0f0f0;
  border:     1px solid #000;
}

.mpf-noscript__project-title {
  margin:         0;
  font-size:      1.2rem;
  font-weight:    700;
  line-height:    1.2;
}

.mpf-noscript__project-excerpt {
  margin:      0;
  font-size:   0.95rem;
  line-height: 1.5;
  color:       #333;
}

@media (max-width: 768px) {
  .mpf-noscript__project {
    grid-template-columns: 1fr;
  }
}

/* ── Fallback no-JS ──────────────────────────────────────────────────────── */
.mpf-hero__noscript {
  display:        flex;
  flex-direction: column;
  gap:            3rem;
}

.mpf-hero__intro {
  font-size:   clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.25;
  margin:      0 0 1.5rem;
}

.mpf-identity-block {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  padding-bottom: 2rem;
  border-bottom:  1px solid #e0e0e0;
}

.mpf-identity-block:last-child {
  border-bottom: none;
}

.mpf-identity-block__title {
  font-size:      clamp(1.8rem, 4vw, 2.8rem);
  font-weight:    700;
  margin:         0;
  border-bottom:  4px solid #000;
  display:        inline-block;
  align-self:     flex-start;
  padding-bottom: 2px;
}

.mpf-identity-block__bio {
  max-width:   60ch;
  font-size:   clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
}

.mpf-identity-block__bio p {
  margin: 0 0 0.6em;
}

.mpf-identity-block__bio p:last-child {
  margin-bottom: 0;
}

.mpf-identity-block__projects {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap:                   1px;
  border:                1px solid #000;
  margin-top:            0.5rem;
}