/* =========================================================
   ANTON LOTHIN — PORTFOLIO
   STYLE.CSS COMPLET
========================================================= */


/* =========================================================
   01 — VARIABLES
========================================================= */

:root {
  --background: #fcfbf9;
  --text: #2b2b2b;
  --muted: #77736f;

  --accent: #8f4a3b;
  --accent-dark: #733a30;
  --accent-soft: #c59a6d;

  --warm-bg: #eee9e1;
  --warm-light: #f5f1eb;

  --border: #ded8d0;
}


/* =========================================================
   02 — RESET
========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Cormorant Garamond", Georgia, serif;

  background-color: var(--background);
  color: var(--text);

  line-height: 1.6;

  overflow-x: hidden;
}


/* =========================================================
   03 — NAVIGATION
========================================================= */

.navbar {
  width: 100%;

  display: flex;
  justify-content: space-between;

  padding: 30px 5vw;

  font-family: "Inter", sans-serif;

  font-size: 0.82rem;

  letter-spacing: 0.08em;
}

.nav-link {
  color: var(--muted);

  text-decoration: none;

  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--accent);
}


/* =========================================================
   04 — HERO
========================================================= */

.hero {
  text-align: center;

  padding: 40px 5vw 110px;
}

.brand-title {
  font-size: clamp(4.5rem, 8vw, 8rem);

  font-weight: 400;

  line-height: 0.9;

  letter-spacing: -0.035em;

  margin-bottom: 28px;
}

.brand-subtitle {
  display: block;

  font-family: "Inter", sans-serif;

  font-size: 1.05rem;

  color: var(--muted);

  letter-spacing: 0.04em;

  margin-bottom: 50px;
}


/* =========================================================
   05 — CERCLE 50 / 50
========================================================= */

.interactive-circle-container {
  width: 250px;
  height: 250px;

  margin: 0 auto 42px;

  border-radius: 50%;

  display: flex;

  overflow: hidden;

  position: relative;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.08);
}

.circle-half {
  width: 50%;
  height: 100%;

  position: relative;
}


/* =========================================================
   06 — MOITIÉ GAUCHE : PHOTO
========================================================= */

.left-half {
  background-image: url("../images/image8760.jpg");

  background-size: cover;

  background-repeat: no-repeat;

  /*
     Cette valeur déplace le cadrage de la photo
     pour faire apparaître davantage la silhouette.
  */

  background-position: 67% center;
}


/* =========================================================
   07 — MOITIÉ DROITE : CV
========================================================= */

.right-half {
  background-color: var(--accent-soft);

  cursor: pointer;

  position: relative;

  transition:
    background-color 0.4s ease;
}

.right-half:hover {
  background-color: #b78353;
}


/* =========================================================
   08 — TEXTE "VOIR LE CV"
========================================================= */

.right-half .tooltip {
  visibility: hidden;

  opacity: 0;

  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  font-family: "Inter", sans-serif;

  font-size: 0.64rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: #181818;

  white-space: nowrap;

  pointer-events: none;

  transition: opacity 0.3s ease;
}

.right-half:hover .tooltip {
  visibility: visible;

  opacity: 1;
}


/* =========================================================
   09 — TAGLINE
========================================================= */

.tagline {
  font-size: 1.2rem;

  color: #8b8580;

  letter-spacing: 0.07em;
}


/* =========================================================
   10 — À PROPOS
========================================================= */

.about {
  width: 84%;

  max-width: 1350px;

  margin: 0 auto 180px;

  text-align: center;
}

.about h2 {
  max-width: 1050px;

  margin: 0 auto 65px;

  font-size: clamp(1.9rem, 2.6vw, 2.6rem);

  font-weight: 400;

  line-height: 1.3;
}


/* =========================================================
   11 — BIOGRAPHIE
========================================================= */

.bio-text {
  width: 100%;

  max-width: 1250px;

  margin: 0 auto;
}

.bio-text p {
  font-size: 1.2rem;

  line-height: 1.72;

  margin-bottom: 28px;

  color: #494541;

  text-align: center;
}

.bio-text .highlight {
  max-width: 850px;

  margin: 45px auto 0;

  font-size: 1.35rem;

  font-style: italic;

  color: var(--accent);
}


/* =========================================================
   12 — PROJETS
========================================================= */

.projects {
  width: 100%;

  margin: 0 auto;
}

.project-block {
  width: 100%;

  margin-bottom: 210px;

  text-align: center;
}


/* =========================================================
   13 — INTRODUCTION DES PROJETS
========================================================= */

.project-intro {
  width: 84%;

  max-width: 1050px;

  margin: 0 auto 65px;

  text-align: center;
}

.project-number {
  display: block;

  margin-bottom: 14px;

  font-family: "Inter", sans-serif;

  font-size: 0.65rem;

  letter-spacing: 0.2em;

  color: var(--accent-soft);
}

.project-kicker {
  display: block;

  margin-bottom: 17px;

  font-family: "Inter", sans-serif;

  font-size: 0.72rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.17em;

  color: var(--accent);
}

.project-intro p {
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);

  line-height: 1.45;

  color: #34312f;
}


/* =========================================================
   14 — GRILLES GÉNÉRALES
========================================================= */

.grid {
  display: grid;

  gap: 24px;

  align-items: center;

  margin: 0 auto;
}

.grid img {
  display: block;

  width: 100%;
  height: auto;

  position: relative;

  z-index: 1;
}


/* =========================================================
   15 — PROJET AFFICHES
========================================================= */

.grid-5 {
  width: 92vw;

  max-width: 1750px;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 20px;

  overflow: visible;
}

.grid-5 .affiche {
  transition:
    transform 0.45s
    cubic-bezier(0.22, 1, 0.36, 1),

    box-shadow 0.45s ease;
}

.grid-5 .affiche:hover {
  transform: scale(1.17);

  z-index: 30;

  box-shadow:
    0 25px 50px
    rgba(0, 0, 0, 0.16);
}


/* =========================================================
   16 — PROJET MARS
========================================================= */

.mars-gallery {
  width: 92vw;

  max-width: 1750px;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 25px;

  overflow: visible;
}

.mars-gallery .mars-image {
  transition:
    transform 0.45s
    cubic-bezier(0.22, 1, 0.36, 1),

    box-shadow 0.45s ease;
}

.mars-gallery .mars-image:hover {
  transform: scale(1.14);

  z-index: 30;

  box-shadow:
    0 24px 50px
    rgba(0, 0, 0, 0.15);
}


/* =========================================================
   17 — CARROUSELS CINEMATEK / EGON
========================================================= */

.art-slider {
  width: 88vw;

  max-width: 1500px;

  margin: 0 auto;

  outline: none;
}

.slider-stage {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background-color: var(--warm-light);
}

.slider-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  opacity: 0;

  transform:
    translateX(35px)
    scale(0.995);

  transition:
    opacity 0.9s ease,
    transform 0.9s
    cubic-bezier(0.22, 1, 0.36, 1);

  pointer-events: none;
}

.slider-image.active {
  opacity: 1;

  transform:
    translateX(0)
    scale(1);

  z-index: 2;
}


/* =========================================================
   18 — FLÈCHES DES CARROUSELS
========================================================= */

.slider-arrow {
  position: absolute;

  top: 50%;

  width: 58px;
  height: 58px;

  padding: 0;

  transform: translateY(-50%);

  border:
    1px solid
    rgba(80, 70, 60, 0.12);

  border-radius: 50%;

  background-color:
    rgba(252, 251, 249, 0.9);

  color: var(--text);

  font-family: "Inter", sans-serif;

  font-size: 1.35rem;

  cursor: pointer;

  z-index: 20;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.slider-prev {
  left: 25px;
}

.slider-next {
  right: 25px;
}

.slider-arrow:hover {
  background-color: var(--accent);

  color: #ffffff;

  transform:
    translateY(-50%)
    scale(1.06);
}


/* =========================================================
   19 — REPÈRES DES CARROUSELS
========================================================= */

.slider-footer {
  min-height: 50px;

  margin-top: 17px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 20px;
}

.slider-counter {
  justify-self: start;

  font-family: "Inter", sans-serif;

  font-size: 0.73rem;

  letter-spacing: 0.12em;

  color: var(--muted);
}

.current-slide {
  color: var(--accent);
}

.slider-dots {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9px;
}

.slider-dot {
  width: 7px;
  height: 7px;

  padding: 0;

  border: none;

  border-radius: 50%;

  background-color: #cbc4bc;

  cursor: pointer;

  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

.slider-dot.active {
  background-color: var(--accent);

  transform: scale(1.55);
}

.slider-dot:hover {
  background-color: var(--accent);
}

.slider-hint {
  justify-self: end;

  font-family: "Inter", sans-serif;

  font-size: 0.68rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: #9b948d;
}


/* =========================================================
   20 — PROJET CHÂTELAIN
========================================================= */

.project-chatelain {
  width: 100%;
}


/* =========================================================
   CHÂTELAIN — CONTENEUR
========================================================= */

.chatelain-showcase {
  width: 88vw;

  max-width: 1450px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 70px;
}


/* =========================================================
   CHÂTELAIN — PREMIÈRE IMAGE

   Taille volontairement limitée car l'image source
   possède une résolution inférieure aux autres.
========================================================= */

.chatelain-main {
  width: 100%;

  margin: 0;

  padding: 60px;

  background-color: #f3f0ea;

  display: flex;

  justify-content: center;

  align-items: center;
}

.chatelain-main img {
  display: block;

  width: 100%;

  /*
     IMPORTANT :
     empêche l'image d'être trop agrandie
     et donc de devenir trop floue.
  */

  max-width: 950px;

  height: auto;

  margin: 0 auto;

  object-fit: contain;

  box-shadow:
    0 12px 35px
    rgba(0, 0, 0, 0.06);

  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

.chatelain-main img:hover {
  transform: scale(1.02);

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, 0.09);
}


/* =========================================================
   CHÂTELAIN — DEUX VUES SECONDAIRES
========================================================= */

.chatelain-secondary {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 35px;

  align-items: stretch;
}

.chatelain-secondary figure {
  margin: 0;

  min-height: 430px;

  padding: 30px;

  background-color: #f5f2ed;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;
}

.chatelain-secondary img {
  display: block;

  width: 100%;

  height: 100%;

  max-height: 500px;

  object-fit: contain;

  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

.chatelain-secondary img:hover {
  transform: scale(1.025);

  box-shadow:
    0 18px 40px
    rgba(0, 0, 0, 0.08);
}


/* =========================================================
   CHÂTELAIN — IDENTITÉ VISUELLE
========================================================= */

.chatelain-identity {
  width: 100%;

  display: grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap: 70px;

  align-items: center;

  padding: 70px;

  background-color: #eee9e1;
}


/* =========================================================
   CHÂTELAIN — TEXTE IDENTITÉ
========================================================= */

.identity-text {
  text-align: left;
}

.identity-label {
  display: block;

  margin-bottom: 18px;

  font-family: "Inter", sans-serif;

  font-size: 0.67rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  color: var(--accent);
}

.identity-text h3 {
  margin-bottom: 22px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(2rem, 2.8vw, 3rem);

  font-weight: 400;

  line-height: 1.1;

  color: var(--text);
}

.identity-text p {
  max-width: 520px;

  font-size: 1.15rem;

  line-height: 1.7;

  color: #4b4743;
}


/* =========================================================
   CHÂTELAIN — LOGO
========================================================= */

.identity-logo {
  margin: 0;

  min-height: 430px;

  padding: 55px;

  background-color: #faf8f4;

  display: flex;

  align-items: center;

  justify-content: center;
}

.identity-logo img {
  display: block;

  width: 100%;

  max-width: 650px;

  height: auto;

  margin: 0 auto;

  object-fit: contain;

  transition:
    transform 0.5s ease;
}

.identity-logo img:hover {
  transform: scale(1.035);
}


/* =========================================================
   CHÂTELAIN — DERNIÈRE VUE LARGE
========================================================= */

.chatelain-wide {
  width: 100%;

  margin: 0;

  padding: 45px;

  background-color: #f3f0ea;

  display: flex;

  justify-content: center;

  align-items: center;
}

.chatelain-wide img {
  display: block;

  width: 100%;

  max-width: 1250px;

  height: auto;

  margin: 0 auto;

  object-fit: contain;

  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

.chatelain-wide img:hover {
  transform: scale(1.02);

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, 0.08);
}


/* =========================================================
   21 — HOKUSAI
========================================================= */

.hokusai-gallery {
  width: 88vw;

  max-width: 1450px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 85px;
}

.hokusai-item {
  width: 100%;

  margin: 0;

  padding: 50px;

  background-color: var(--warm-bg);
}

.hokusai-item img {
  display: block;

  width: 100%;

  height: auto;

  margin: 0 auto;
}

.hokusai-small {
  max-width: 1400px;
}

.hokusai-small img {
  max-width: 1250px;
}

.hokusai-large {
  max-width: 1400px;
}

.hokusai-large img {
  max-width: 1250px;
}


/* =========================================================
   22 — FOOTER
========================================================= */

.footer {
  width: 90%;

  margin: 0 auto;

  padding: 75px 0 70px;

  text-align: center;

  font-family: "Inter", sans-serif;

  font-size: 0.76rem;

  color: #8d8781;

  border-top:
    1px solid
    var(--border);
}


/* =========================================================
   23 — OVERLAY CV
========================================================= */

.cv-overlay {
  position: fixed;

  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  background:
    rgba(0, 0, 0, 0.32);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.4s ease;

  z-index: 900;
}

.cv-overlay.active {
  opacity: 1;

  pointer-events: auto;
}


/* =========================================================
   24 — PANNEAU CV
========================================================= */

.cv-drawer {
  position: fixed;

  top: 0;

  right: -520px;

  width: 460px;

  max-width: 90vw;

  height: 100vh;

  padding: 45px;

  overflow-y: auto;

  background-color: #ffffff;

  box-shadow:
    -5px 0 30px
    rgba(0, 0, 0, 0.12);

  transition:
    right 0.45s
    cubic-bezier(0.16, 1, 0.3, 1);

  z-index: 1000;
}

.cv-drawer.active {
  right: 0;
}


/* =========================================================
   25 — BOUTON FERMER CV
========================================================= */

.close-btn {
  position: absolute;

  top: 18px;

  right: 20px;

  border: none;

  background: none;

  color: var(--accent);

  font-size: 2rem;

  cursor: pointer;
}


/* =========================================================
   26 — CONTENU CV
========================================================= */

.cv-content h2 {
  margin-bottom: 7px;

  font-size: 2.4rem;

  font-weight: 400;
}

.cv-contact-info {
  margin-bottom: 20px;

  font-family: "Inter", sans-serif;

  font-size: 0.82rem;

  color: var(--muted);
}

.cv-drawer hr {
  margin: 25px 0;

  border: none;

  border-top:
    1px solid
    var(--border);
}

.cv-section {
  margin-bottom: 35px;
}

.cv-section h3 {
  margin-bottom: 18px;

  padding-bottom: 8px;

  font-family: "Inter", sans-serif;

  font-size: 0.9rem;

  text-transform: uppercase;

  letter-spacing: 0.07em;

  color: var(--accent);

  border-bottom:
    1px solid
    var(--accent);
}

.cv-item {
  display: flex;

  gap: 15px;

  margin-bottom: 20px;

  font-size: 0.95rem;
}

.cv-item .dates {
  width: 95px;

  flex-shrink: 0;

  font-family: "Inter", sans-serif;

  font-size: 0.75rem;

  color: var(--muted);
}

.cv-list {
  list-style: none;

  font-size: 0.95rem;
}

.cv-list li {
  margin-bottom: 10px;
}


/* =========================================================
   27 — TABLETTE
========================================================= */

@media (max-width: 1100px) {

  /* AFFICHES */

  .grid-5 {
    width: 92vw;

    grid-template-columns:
      repeat(3, 1fr);
  }


  /* MARS */

  .mars-gallery {
    width: 92vw;

    grid-template-columns:
      repeat(2, 1fr);
  }


  /* CHÂTELAIN */

  .chatelain-showcase {
    width: 90vw;

    gap: 50px;
  }

  .chatelain-main {
    padding: 40px;
  }

  .chatelain-main img {
    max-width: 850px;
  }

  .chatelain-identity {
    grid-template-columns: 1fr;

    gap: 40px;

    padding: 50px;
  }

  .identity-text {
    text-align: center;
  }

  .identity-text p {
    margin: 0 auto;
  }

  .identity-logo {
    min-height: auto;

    padding: 40px;
  }

}


/* =========================================================
   28 — MOBILE
========================================================= */

@media (max-width: 768px) {

  /* NAVIGATION */

  .navbar {
    padding:
      25px 6vw;
  }


  /* HERO */

  .hero {
    padding:
      35px 6vw
      80px;
  }

  .brand-title {
    font-size:
      clamp(3.3rem, 16vw, 5rem);
  }

  .brand-subtitle {
    font-size: 0.95rem;
  }


  /* CERCLE */

  .interactive-circle-container {
    width: 195px;

    height: 195px;
  }

  .left-half {
    background-position:
      69% center;
  }

  .tagline {
    font-size: 1rem;
  }


  /* ABOUT */

  .about {
    width: 88%;

    margin-bottom: 125px;
  }

  .about h2 {
    font-size: 1.7rem;
  }

  .bio-text p {
    font-size: 1.05rem;
  }


  /* PROJETS */

  .project-block {
    margin-bottom: 130px;
  }

  .project-intro {
    width: 87%;

    margin-bottom: 45px;
  }

  .project-intro p {
    font-size: 1.3rem;
  }


  /* AFFICHES + MARS */

  .grid-5,
  .mars-gallery {
    width: 88vw;

    grid-template-columns: 1fr;

    gap: 25px;
  }

  .grid-5 .affiche:hover,
  .mars-gallery .mars-image:hover {
    transform: scale(1.025);
  }


  /* CARROUSELS */

  .art-slider {
    width: 92vw;
  }

  .slider-stage {
    aspect-ratio: 4 / 3;
  }

  .slider-arrow {
    width: 46px;

    height: 46px;
  }

  .slider-prev {
    left: 12px;
  }

  .slider-next {
    right: 12px;
  }

  .slider-footer {
    grid-template-columns:
      auto 1fr;
  }

  .slider-dots {
    justify-content: flex-end;
  }

  .slider-hint {
    display: none;
  }


  /* =====================================================
     CHÂTELAIN MOBILE
  ===================================================== */

  .chatelain-showcase {
    width: 92vw;

    gap: 35px;
  }

  .chatelain-main {
    padding: 20px;
  }

  .chatelain-main img {
    max-width: 100%;
  }

  .chatelain-secondary {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .chatelain-secondary figure {
    min-height: auto;

    padding: 20px;
  }

  .chatelain-secondary img {
    height: auto;

    max-height: none;
  }

  .chatelain-identity {
    grid-template-columns: 1fr;

    gap: 30px;

    padding: 30px 20px;
  }

  .identity-text {
    text-align: center;
  }

  .identity-text h3 {
    font-size: 2rem;
  }

  .identity-text p {
    margin: 0 auto;

    font-size: 1.05rem;
  }

  .identity-logo {
    min-height: auto;

    padding: 25px;
  }

  .chatelain-wide {
    padding: 20px;
  }

  .chatelain-wide img {
    max-width: 100%;
  }


  /* HOKUSAI */

  .hokusai-gallery {
    width: 92vw;

    gap: 45px;
  }

  .hokusai-item {
    padding: 20px;
  }


  /* CV */

  .cv-drawer {
    width: 90vw;

    padding:
      45px 28px;
  }

}