@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Manrope:wght@300;400;500;600&display=swap");


/* ==========================================================
   JUAN MARCOS LAMBLIN
   GLOBAL
========================================================== */
/* ==========================================================
   DESIGN TOKENS
========================================================== */
/* ==========================================================
   DESIGN TOKENS
   COLORS
========================================================== */
:root{

  /* Brand */

  --color-black:#070707;
  --color-white:#ffffff;

  /* Surfaces */

  --color-background:var(--color-black);
  --color-surface:#0b0b0b;
  --color-surface-alt:#111111;

  /* Typography */

  --color-text:#efefef;
  --color-text-muted:#b7b7b7;

  /* Borders */

  --color-border:rgba(255,255,255,.08);
  --color-border-light:rgba(255,255,255,.18);

  /* Overlay */

  --color-overlay:rgba(7,7,7,.96);

}
/* ==========================================================
   DESIGN TOKENS
   TYPOGRAPHY
========================================================== */
:root{

  /* Font families */

  --font-display:"Cormorant Garamond",serif;
  --font-body:"Manrope",sans-serif;

  /* Font sizes */

  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.5rem;
  --text-2xl:2rem;
  --text-3xl:3rem;
  --text-display:5rem;
  --text-hero:7rem;

  /* Line heights */

  --leading-tight:1.1;
  --leading-normal:1.6;
  --leading-relaxed:1.8;

  /* Letter spacing */

  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-wide:.12em;
  --tracking-display:.22em;

  /* Font weights */

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

}
/* ==========================================================
   DESIGN TOKENS
   LAYOUT
========================================================== */
:root{

  /* ========================================================
     WIDTHS
  ======================================================== */

  --reading-width:760px;

  --content-width:1320px;

  --gallery-width:1600px;

  --page-width:1920px;

  /* ========================================================
     PAGE
  ======================================================== */

  --page-padding:48px;

}
/* ==========================================================
   DESIGN TOKENS
   SPACING
========================================================== */
:root{

  /* ========================================================
     SPACING SCALE
  ======================================================== */

  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:64px;
  --space-7:96px;
  --space-8:128px;
  --space-9:160px;

  /* ========================================================
     SEMANTIC SPACING
  ======================================================== */

  --section-space:var(--space-9);

  --section-space-small:var(--space-7);

  --content-gap:var(--space-5);

  --grid-gap:var(--space-6);

  --card-gap:var(--space-4);

}
/* ==========================================================
   DESIGN TOKENS
   BREAKPOINTS
========================================================== */
/*
  Mobile
  0 → 767 px
*/
@media (max-width:767px){

  :root{

    /* Typography */

    --text-display:3rem;
    --text-hero:4rem;

    /* Layout */

    --page-padding:24px;

    /* Spacing */

    --section-space:96px;

  }

}
/*
  Tablet
  768 → 1023 px
*/
@media (min-width:768px) and (max-width:1023px){

  :root{

    /* Typography */

    --text-display:4rem;
    --text-hero:5.5rem;

    /* Layout */

    --page-padding:32px;

    /* Spacing */

    --section-space:128px;

  }

}
/*
  Large Desktop
  ≥ 1440 px
*/
@media (min-width:1440px){

  :root{

    --page-padding:64px;

  }

}
/* ==========================================================
   DESIGN TOKENS
   MOTION
========================================================== */
:root{

  /* ========================================================
     DURATIONS
  ======================================================== */

  --duration-fast:150ms;

  --duration-normal:300ms;

  --duration-slow:600ms;

  /* ========================================================
     EASING
  ======================================================== */

  --ease-standard:ease;

  --ease-smooth:cubic-bezier(.22,.61,.36,1);

}
/* radius.css */
/* borders.css */
/* shadows.css */
/* layers.css */
/* ==========================================================
   LAYOUT
========================================================== */
/* ==========================================================
   HEADER
========================================================== */
.site-header{

  position:fixed;

  inset:0 0 auto 0;

  z-index:1000;

  display:flex;

  justify-content:space-between;

  align-items:center;

  width:100%;

  height:88px;

  padding-inline:var(--page-padding);

  color:var(--color-text);

  background:rgba(7,7,7,.68);

  backdrop-filter:blur(10px);

  transition:
    background var(--duration-normal) var(--ease-smooth),
    backdrop-filter var(--duration-normal) var(--ease-smooth),
    color var(--duration-normal) var(--ease-smooth);

}
/* ==========================================================
   HERO
========================================================== */
.site-header--hero{

  background:transparent;

  backdrop-filter:none;

}
/* ==========================================================
   MENU BUTTON
========================================================== */
.menu-button{

  display:flex;

  align-items:center;

  justify-content:center;

  width:48px;

  height:48px;

  background:none;

  border:none;

  color:inherit;

  cursor:pointer;

  font-family:var(--font-display);

  font-size:2rem;

  line-height:1;

  transition:
    opacity var(--duration-normal) var(--ease-smooth),
    transform var(--duration-normal) var(--ease-smooth);

}
.menu-button:hover{

  opacity:.7;

  transform:scale(1.05);

}
/* ==========================================================
   LANGUAGE SWITCH
========================================================== */
.language-switch{

  color:inherit;

  font-family:var(--font-display);

  font-size:1.6rem;

  font-weight:300;

  letter-spacing:.08em;

  text-transform:uppercase;

  text-decoration:none;

  transition:
    opacity var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth);

}
.language-switch:hover{

  opacity:.65;

  transform:scale(1.05);

}
/* ==========================================================
   MENU OVERLAY
========================================================== */
.menu-overlay{

  position:fixed;

  inset:0;

  display:flex;

  justify-content:center;

  align-items:center;

  background:rgba(7,7,7,.96);

  backdrop-filter:blur(16px);

  opacity:0;

  visibility:hidden;

  transition:
    opacity .35s ease,
    visibility .35s ease;

  z-index:3000;

}
.menu-overlay.is-open{

  opacity:1;

  visibility:visible;

}
.menu-close{

  position:absolute;

  top:2rem;

  right:2rem;

  width:48px;

  height:48px;

  background:none;

  border:none;

  color:var(--white);

  font-family:"Cormorant Garamond",serif;

  font-size:2.6rem;

  line-height:1;

  cursor:pointer;

  transition:opacity .25s ease;

}
.menu-close:hover{

  opacity:.7;

}
/* ==========================================================
   MENU
========================================================== */
.menu{

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:2rem;

}
.menu a{

  position:relative;

  display:inline-block;

  font-family:"Cormorant Garamond",serif;

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

  font-weight:400;

  letter-spacing:.04em;

  line-height:1;

  color:var(--white);

  text-decoration:none;

  transition:
    opacity .35s ease,
    transform .35s ease;

}
.menu a:hover{

  opacity:.65;

  transform:translateX(.5rem);

}
.menu a::after{

  content:"";

  position:absolute;

  left:0;

  bottom:-.5rem;

  width:0;

  height:1px;

  background:rgba(255,255,255,.45);

  transition:width .35s ease;

}
.menu a:hover::after,
.menu a.active::after{

  width:100%;

}
.menu a.active{

  opacity:1;

}
@media (max-width:900px){

  .menu{

    gap:1.5rem;

  }

  .menu a{

    font-size:2.5rem;

  }

}
/* ==========================================================
   MAIN
========================================================== */
.main{

  padding-top:88px;

}
.main--hero{

  padding-top:0;

}
/* ==========================================================
   FOOTER
========================================================== */
.site-footer{

  border-top:1px solid rgba(255, 255, 255, 0.429);

  margin-top:1rem;

  padding:2.2rem 0 2.5rem;

}
.footer-inner{

  width:min(90%,900px);

  margin:0 auto;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

}
/* =========================
   LOGO
========================= */
.footer-logo{

  display:block;

  width:260px;

  max-width:55vw;

  margin:0 auto .8rem;

}
.footer-logo img{

  display:block;

  width:100%;

  height:auto;

}
/* =========================
   NOM
========================= */
.footer-name{

  font-family:var(--font-display);

  font-size:clamp(1.2rem,1.45vw,1.7rem);

  font-weight:300;

  letter-spacing:.30em;

  text-transform:uppercase;

  color:var(--color-text);

  margin-bottom:1.4rem;

}
/* =========================
   NAVIGATION
========================= */
.footer-nav{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:.9rem;

  margin-bottom:1.2rem;

}
.footer-nav a{

  font-family:var(--font-body);

  font-size:.82rem;

  letter-spacing:.14em;

  text-transform:uppercase;

  color:rgba(255,255,255,.70);

  transition:color .3s ease;

}
.footer-nav a:hover{

  color:#fff;

}
.footer-separator{

  color:rgba(255,255,255,.35);

}
/* =========================
   COPYRIGHT
========================= */
.footer-copy{

  font-family:var(--font-body);

  font-size:.78rem;

  letter-spacing:.08em;

  color:rgba(255,255,255,.45);

}
/* =========================
   MOBILE
========================= */
@media (max-width:700px){

  .site-footer{

    margin-top:3rem;

    padding:2rem 0 2rem;

  }

  .footer-logo{

    width:170px;

    max-width:60vw;

    margin-bottom:.6rem;

  }

  .footer-name{

    font-size:1rem;

    letter-spacing:.18em;

    margin-bottom:1.2rem;

  }

  .footer-nav{

    flex-direction:column;

    gap:.8rem;

    margin-bottom:1rem;

  }

  .footer-nav a{

    font-size:.8rem;

  }

  .footer-copy{

    font-size:.75rem;

  }

}
/* ==========================================================
   HOME
========================================================== */
/* ==========================================================
   HOME - HERO
========================================================== */
.hero{

  position:relative;
  height:100vh;
  overflow:hidden;
  background:#000;
  border-bottom:1px solid rgba(255,255,255,.06);

}
.hero-image{

  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
  transition:transform 10s ease;

}
.hero:hover .hero-image{

  transform:scale(1.04);

}
.hero-overlay{

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 78% 48%,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.04) 18%,
      rgba(255,255,255,0) 42%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.35) 35%,
      rgba(0,0,0,.08) 72%,
      rgba(0,0,0,.02) 88%,
      rgba(0,0,0,.05) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.04),
      rgba(0,0,0,.08),
      rgba(0,0,0,.16)
    );

}
.hero-inner{

  position:relative;
  z-index:2;
  width:min(1320px,92%);
  height:100%;
  margin:auto;

}
.hero-brand{

  position:absolute;

  top:32%;

  left:28%;

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

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  width:min(42vw,700px);

}
.hero-logo{

  width:45vw;
  max-width:1080px;
  min-width:420px;

  margin-bottom:.55em;
  transform:translateY(150px);

}
.hero-title{

  font-family:var(--font-display);
  font-size:clamp(4.8rem,6.3vw,7rem);
  font-weight:var(--weight-regular);

  line-height:.88;

  letter-spacing:.08em;

  text-transform:uppercase;

  color:white;

}
.hero-line{

  width:160px;
  height:1px;

  margin:34px auto 18px;

  background:rgba(255,255,255,.42);

}
.hero-tagline{

 margin-top:-6px;

  font-family:var(--font-display);

  font-size:clamp(2.15rem,2.9vw,3rem);

  line-height:1.45;

  color:white;

}
.hero-tagline span{

  opacity:.78;

}
.hero-scroll{

  position:absolute;

  left:50%;

  bottom:42px;

  transform:translateX(-50%);

  color:white;

  font-size:2.2rem;

}
/* ==========================================================
   TABLET
========================================================== */
@media (max-width:1100px){

  .hero-brand{

    top:30%;
    left:22%;
    width:48vw;

  }

  .hero-logo{

    width:50vw;
    max-width:760px;
    min-width:280px;

    margin-bottom:4.50em;

  }

  .hero-title{

    font-size:clamp(0.5rem,6vw,5.6rem);

  }

  .hero-line{

    margin:10px auto 18px;

  }

  .hero-tagline{

    margin-top:-4px;
    font-size:clamp(1.7rem,2.6vw,2rem);

  }

  .hero-scroll{

    left:50%;
    bottom:6px;

  }

}
/* ==========================================================
   MOBILE
========================================================== */
@media (max-width:700px){

  .hero-image{

    object-position:69% center;

  }

  .hero-brand{

    top:39%;
    left:36%;
    width:52vw;

  }

  .hero-logo{

    width:26em;
    max-width:none;
    min-width:0;

    margin-bottom:5.35em;

  }

  .hero-title{

    font-size:clamp(3rem,20vw,1.2rem);
    line-height:0.92;

  }

  .hero-line{

    width:130px;
    margin:30px auto 18px;

  }

  .hero-tagline{

    min-width:18ch;
    margin-top:10px;
    padding:0 1.2rem;
    font-size:1.55rem;
    line-height:1.45;

  }

  .hero-scroll{

    left:50%;
    bottom:32px;

  }

}
/* ==========================================================
   PHILOSOPHY
========================================================== */
.philosophy{

  background:var(--black);

  padding:35px 30px 20px;

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

}
.philosophy .container{

  max-width:900px;

  margin:auto;

  text-align:center;

}
.philosophy h2{

  margin-bottom:3rem;

}
.philosophy p{

  font-family:"Cormorant Garamond",serif;

  color:var(--white);

  font-size:clamp(1.75rem,3.5vw,3.1rem);

  line-height:1.35;

  margin-bottom:28px;

}
.philosophy p:last-child{

  margin-bottom:0;

}
/* ==========================================================
   ABOUT PREVIEW
========================================================== */
.about-preview{

  width:min(1320px,92%);

  margin:8rem auto;

  display:grid;

  grid-template-columns:1fr .9fr;

  gap:5rem;

  align-items:center;

}
.about-preview__content{

  max-width:620px;

  margin-left:auto;

}
.about-preview__content h2{

  margin-bottom:2rem;

  font-family:var(--font-display);

  font-size:clamp(2.55rem,3.65vw,3.8rem);

  font-weight:300;

  line-height:1.12;

  letter-spacing:.02em;

}
.about-preview__content p{

  margin-bottom:1.7rem;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.about-preview__image{

  display:flex;

  justify-content:flex-start;

}
.about-preview__image img{

  display:block;

  width:68%;

  max-width:420px;

  height:auto;

  transition:transform .45s ease;

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 2%,
      #000 98%,
      transparent 100%
    );

  -webkit-mask-composite:source-in;

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 2%,
      #000 98%,
      transparent 100%
    );

}
.about-preview__image:hover img{

  transform:scale(1.015);

}
.button{

  display:inline-block;

  margin-top:1rem;

  padding:1rem 2.6rem;

  border:1px solid rgba(255,255,255,.32);

  text-decoration:none;

  text-transform:uppercase;

  letter-spacing:.18em;

  font-size:.82rem;

  transition:all .3s ease;

}
.button:hover{

  border-color:#fff;

  background:rgba(255,255,255,.03);

}
@media (max-width:1100px){

  .about-preview{

    grid-template-columns:1fr;

    gap:4rem;

    text-align:center;

  }

  .about-preview__content{

    max-width:640px;

    margin:0 auto;

  }

  .about-preview__image{

    justify-content:center;

  }

  .about-preview__image img{

    width:74%;

    max-width:420px;

  }

}
@media (max-width:700px){

  .about-preview{

    margin:6rem auto;

    gap:3rem;

  }

  .about-preview__content h2{

    font-size:clamp(2.2rem,8.5vw,3.1rem);

    line-height:1.15;

  }

  .about-preview__image img{

    width:74%;

    max-width:380px;

  }

}
/* ==========================================================
   FEATURED CREATIONS
========================================================== */
.gallery{

  width:min(1320px,92%);

  margin:8rem auto;

}
.gallery-title{

  margin-bottom:6rem;

  text-align:center;

  font-family:var(--font-display);

  font-size:clamp(2.55rem,3.65vw,3.8rem);

  font-weight:300;

  line-height:.92;

  letter-spacing:.05em;

  #text-transform:uppercase;

  max-width:900px;

  margin:0 auto 4rem;
}
.creation{

  display:grid;

  grid-template-columns:.80fr .60fr;

  gap:6rem;

  align-items:center;

  margin-bottom:9rem;

}
.creation-photo{

  display:flex;

  justify-content:center;

}
.creation-image{

  display:block;

  width:78%;

  max-width:500px;

  aspect-ratio:4/5;

  object-fit:cover;

  transition:transform .45s ease;

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 2%,
      #000 98%,
      transparent 100%
    );

  -webkit-mask-composite:source-in;

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 2%,
      #000 98%,
      transparent 100%
    );

}
.creation:hover .creation-image{

  transform:scale(1.02);

}
.creation-info{

  max-width:430px;

}
.creation-info h3{

  margin-bottom:1.6rem;

  font-family:var(--font-display);

  font-size:clamp(2.3rem,3.2vw,3.4rem);

  font-weight:300;

  line-height:.95;

  letter-spacing:.05em;

}
.creation-description{

  margin-bottom:2.4rem;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.creation-link{

  display:inline-block;

  margin-top:.2rem;

  padding:1rem 2.4rem;

  border:1px solid rgba(255,255,255,.32);

  font-family:var(--font-body);

  font-size:.82rem;

  letter-spacing:.18em;

  text-transform:uppercase;

  text-decoration:none;

  transition:all .3s ease;

}
.creation-link:hover{

  border-color:#fff;

  background:rgba(255,255,255,.03);

}
@media (max-width:900px){

  .gallery{

    margin:6rem auto;

  }

  .gallery-title{

    margin-bottom:4rem;

    font-size:clamp(2.2rem,8.5vw,3.1rem);

  }

  .creation{

    grid-template-columns:1fr;

    gap:2.8rem;

    margin-bottom:6rem;

    text-align:center;

  }

  .creation-photo{

    justify-content:center;

  }

  .creation-image{

    width:76%;

    max-width:420px;

  }

  .creation-info{

    max-width:100%;

  }

  .creation-info h3{

    font-size:clamp(2.2rem,8vw,3rem);

  }

}
/* ==========================================================
   COLLECTION CTA
========================================================== */
.collection-cta{

  max-width:900px;

  margin:8rem auto;

  padding:0 2rem;

  text-align:center;

}
.collection-cta h2{

  margin-bottom:2rem;

  font-family:var(--font-display);

  font-size:clamp(2.55rem,3.65vw,3.8rem);

  font-weight:300;

  line-height:.92;

  letter-spacing:.05em;

  #text-transform:uppercase;

}
.collection-cta p{

  max-width:650px;

  margin:0 auto 2.5rem;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.button{

  display:inline-block;

  padding:1rem 2.6rem;

  border:1px solid rgba(255,255,255,.32);

  text-decoration:none;

  text-transform:uppercase;

  letter-spacing:.18em;

  font-size:.82rem;

  transition:all .3s ease;

}
.button:hover{

  border-color:#fff;

  background:rgba(255,255,255,.03);

}
/* ==========================================================
   CONTACT CTA
========================================================== */
.contact-cta{

  max-width:900px;

  margin:8rem auto;

  padding:0 2rem;

  text-align:center;

}
.contact-cta h2{

  margin-bottom:2rem;

  font-family:var(--font-display);

  font-size:clamp(2.55rem,3.65vw,3.8rem);

  font-weight:300;

  line-height:.92;

  letter-spacing:.05em;

  #text-transform:uppercase;

}
.contact-cta p{

  max-width:650px;

  margin:0 auto 2.5rem;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
/* ==========================================================
   HOME
========================================================== */
/*
  Les styles de la page d'accueil sont désormais répartis
  par composant :

  - hero.css
  - philosophy.css
  - about-preview.css
  - featured-creations.css
  - collection-cta.css
  - contact-cta.css

  Ce fichier est conservé pour accueillir d'éventuels styles
  communs à l'ensemble de la Home.
*/
/* ==========================================================
   SAFE AREA FOR FIXED HEADER (TABLETS)
========================================================== */
@media (min-width: 900px) and (max-width: 1200px){

  .about-preview,
  .featured-creations,
  .collection-cta,
  .contact-cta{

    width:min(1320px,calc(100% - 220px));

  }

}
/* ==========================================================
   CREATION
========================================================== */
/* =======================================================
   HERO
======================================================= */
.creation-layout{

    width:min(1500px,94%);
    margin:50px auto 70px;

    display:grid;
    grid-template-columns:64% 36%;

    gap:3rem;

    align-items:start;

}
.creation-hero{

    width:100%;

}
.creation-hero-image{

    margin:0;

}
.creation-hero-image img{

    display:block;

    width:100%;

    aspect-ratio:4 / 5;

    object-fit:cover;

    cursor:zoom-in;

}
/* ===========================
   MOBILE
=========================== */
@media (max-width:980px){

    .creation-layout{

        width:92%;

        grid-template-columns:1fr;

        gap:2rem;

        margin:30px auto 50px;

    }

}
/* =======================================================
   GALERIE
======================================================= */
.creation-gallery{
    width:min(1400px,92%);
    margin:5rem auto 7rem;
}
.creation-gallery-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2rem;
}
.creation-gallery-item{
    margin:0;
    overflow:hidden;
    background:#111;
}
.creation-gallery-item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}
.creation-gallery-item:hover img{
    transform:scale(1.03);
}
/* Première image plus importante */
.creation-gallery-item:first-child{
    grid-column:1 / -1;
}
/* ===========================
   Responsive
=========================== */
@media (max-width:980px){

    .creation-gallery{
        width:92%;
        margin:3rem auto 5rem;
    }

    .creation-gallery-grid{
        grid-template-columns:1fr;
        gap:1.5rem;
    }

    .creation-gallery-item:first-child{
        grid-column:auto;
    }

}
/* =======================================================
   INFOS
======================================================= */
.creation-panel{

    display:flex;
    flex-direction:column;
    justify-content:center;

    height:100%;

    gap:1.5rem;

}
.creation-reference{

    margin:0;

    font-size:.82rem;

    letter-spacing:.40rem;

    text-transform:uppercase;

    color:#c8b28a;

}
.creation-status{

    margin:0;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.18rem;

    color:#8c8c8c;

}
.creation-description{

    margin:0;

    font-size:1.15rem;

    line-height:1.8;

    color:#f2f2f2;

}
.creation-story h2{

    display:none;

}
.creation-story p{

    margin:0;

    line-height:1.9;

    color:#bdbdbd;

}
.creation-meta{

    display:grid;

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

    gap:1rem;

}
.creation-meta h3{

    margin:0 0 .35rem;

    font-size:.70rem;

    letter-spacing:.14rem;

    text-transform:uppercase;

    color:#888;

}
.creation-meta p{

    margin:0;

    color:#fff;

}
.creation-tags{

    display:none;

}
/* ===========================
   PHOTOS DE DÉTAIL
=========================== */
.creation-details-gallery{

    display:grid;

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

    gap:.8rem;

}
.detail-photo{

    border:none;

    background:none;

    padding:0;

    cursor:pointer;

}
.detail-photo img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    display:block;

    transition:.35s;

}
.detail-photo:hover img{

    transform:scale(1.03);

}
/* ===========================
   BOUTON
=========================== */
.creation-button{

    align-self:flex-start;

    padding:1rem 2rem;

    border:1px solid #c8b28a;

    color:#fff;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.18rem;

    transition:.3s;

}
.creation-button:hover{

    background:#c8b28a;

    color:#111;

}
/* ===========================
   MOBILE
=========================== */
@media(max-width:980px){

    .creation-panel{

        gap:1.2rem;

    }

    .creation-meta{

        grid-template-columns:1fr;

    }

    .creation-button{

        width:100%;

        text-align:center;

    }

}
/* =======================================================
   CRÉATIONS ASSOCIÉES
======================================================= */
.related-creations{

    width:min(1500px,94%);
    margin:5rem auto 6rem;

}
.related-header{

    margin-bottom:2rem;
    text-align:center;

}
.related-header h2{

    margin:0;

    font-size:1rem;

    font-weight:300;

    letter-spacing:.35rem;

    text-transform:uppercase;

    color:#c8b28a;

}
.related-grid{

    display:grid;

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

    gap:2rem;

}
.related-card{

    position:relative;

    display:block;

    overflow:hidden;

    text-decoration:none;

    color:#fff;

    background:#111;

}
.related-card img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

    transition:transform .6s ease;

}
.related-card:hover img{

    transform:scale(1.04);

}
.related-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:1.8rem;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.70),

        rgba(0,0,0,.15) 55%,

        transparent

    );

}
.related-reference{

    margin:0;

    font-size:.82rem;

    letter-spacing:.28rem;

    text-transform:uppercase;

    color:#fff;

}
.related-status{

    margin:.45rem 0 0;

    font-size:.70rem;

    letter-spacing:.15rem;

    text-transform:uppercase;

    color:#d5d5d5;

}
/* ===========================
   MOBILE
=========================== */
@media (max-width:980px){

    .related-grid{

        grid-template-columns:1fr;

        gap:1.5rem;

    }

}
/* ==========================================================
   LEGAL
========================================================== */
/* ==========================================================
   LEGAL PAGE
========================================================== */
.legal-page{

  width:min(900px,92%);

  margin:8rem auto;

}
.legal-page__container{

  width:100%;

}
.legal-page h1{

  margin-bottom:4rem;

  text-align:center;

  font-family:var(--font-display);

  font-size:clamp(2.55rem,3.65vw,3.8rem);

  font-weight:300;

  line-height:.92;

  letter-spacing:.05em;

}
.legal-section{

  margin-bottom:3.8rem;

}
.legal-section:last-child{

  margin-bottom:0;

}
.legal-section h2{

  margin-bottom:1.2rem;

  font-family:var(--font-display);

  font-size:1.5rem;

  font-weight:300;

  letter-spacing:.04em;

}
.legal-section p{

  margin-bottom:1rem;

  font-size:1.05rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.legal-section p:last-child{

  margin-bottom:0;

}
.legal-section a{

  color:inherit;

  text-decoration:underline;

  text-decoration-color:rgba(255,255,255,.35);

  transition:.3s;

}
.legal-section a:hover{

  text-decoration-color:#fff;

}
@media (max-width:700px){

  .legal-page{

    margin:6rem auto;

  }

  .legal-page h1{

    font-size:clamp(2.2rem,8.5vw,3.1rem);

    margin-bottom:3rem;

  }

  .legal-section{

    margin-bottom:3rem;

  }

  .legal-section h2{

    font-size:1.3rem;

  }

  .legal-section p{

    font-size:1rem;

    line-height:1.8;

  }

}
/* ==========================================================
   CONTACT
========================================================== */
/* ==========================================================
   CONTACT PAGE
========================================================== */
.contact-page{

  width:min(900px,92%);

  margin:8rem auto;

}
.page-header{

  max-width:900px;

  margin:0 auto 4.5rem;

  text-align:center;

}
.page-title{

  display:inline-block;

  margin-bottom:1.5rem;

  font-size:.82rem;

  font-weight:500;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:rgba(255,255,255,.70);

}
.page-heading{

  margin:0;

  font-family:var(--font-display);

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

  font-weight:300;

  line-height:1.10;

  letter-spacing:.01em;

}
.contact-page__intro{

  max-width:700px;

  margin:0 auto 4.5rem;

}
.contact-page__intro p{

  margin-bottom:1.5rem;

  font-size:1.1rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.contact-page__intro p:last-child{

  margin-bottom:0;

}
.contact-page__actions{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:1.8rem;

}
/* ==========================================================
   CONTACT CARDS
========================================================== */
.contact-card{

  width:min(520px,100%);

  padding:1.5rem 2rem;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:.55rem;

  border:1px solid rgba(255,255,255,.28);

  transition:
    border-color .3s ease,
    background .3s ease,
    transform .3s ease;

}
.contact-card:hover{

  border-color:rgba(255,255,255,.75);

  background:rgba(255,255,255,.03);

  transform:translateY(-2px);

}
.contact-card__title{

  font-size:.78rem;

  letter-spacing:.18em;

  text-transform:uppercase;

}
.contact-card__subtitle{

  font-family:var(--font-display);

  font-size:1.55rem;

  letter-spacing:.02em;

  color:rgba(255,255,255,.92);

}
/* ==========================================================
   MOBILE
========================================================== */
@media (max-width:700px){

  .contact-page{

    margin:6rem auto;

  }

  .page-header{

    margin-bottom:3rem;

  }

  .page-heading{

    font-size:clamp(2.2rem,8vw,3.2rem);

  }

  .contact-page__intro{

    margin-bottom:3rem;

  }

  .contact-page__intro p{

    font-size:1rem;

    line-height:1.8;

  }

  .contact-card{

    padding:1.25rem 1rem;

  }

  .contact-card__subtitle{

    font-size:1.2rem;

    word-break:break-word;

  }

}
/* ==========================================================
   ABOUT
========================================================== */
/* ==========================================================
   ABOUT
========================================================== */
/* ==========================================================
   ABOUT - INTRODUCTION
========================================================== */
.about-page{

  width:min(1320px,92%);
  margin:8rem auto;

}
/* ==========================================================
   PAGE HEADER
========================================================== */
.page-header{

  max-width:1100px;

  margin:0 auto 7rem;

  text-align:center;

}
.page-title{

  display:inline-block;

  margin-bottom:1.5rem;

  font-size:1rem;

  font-weight:500;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:rgba(255,255,255,.70);

}
.page-heading{

  max-width:1100px;

  margin:0 auto;

  font-family:var(--font-display);

  font-size:clamp(2.8rem,4vw,4.2rem);

  font-weight:300;

  line-height:1.10;

  letter-spacing:.01em;

}
.about-section:first-of-type{

  margin-bottom:8rem;

}
/* ==========================================================
   TEXT
========================================================== */
.about-text{

  max-width:840px;

  margin:0 auto;

}
.about-text p{

  margin-bottom:1.7rem;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.about-text p:last-child{

  margin-bottom:0;

}
/* ==========================================================
   TABLET
========================================================== */
@media (max-width:1100px){

  .about-page{

    margin:6rem auto;

  }

  .page-header{

    margin-bottom:5rem;

  }

  .about-section:first-of-type{

    margin-bottom:6rem;

  }

  .about-text{

    max-width:760px;

  }

}
/* ==========================================================
   MOBILE
========================================================== */
@media (max-width:700px){

  .about-page{

    margin:5rem auto;

  }

  .page-header{

    margin-bottom:4rem;

  }

  .page-heading{

    font-size:clamp(2.2rem,8vw,3.2rem);

  }

  .about-text{

    max-width:100%;

  }

  .about-text p{

    font-size:1rem;

    line-height:1.8;

  }

}
/* ==========================================================
   ABOUT - STORY
========================================================== */
.about-section{

  margin-bottom:8rem;

}
/* ==========================================================
   TITRES
========================================================== */
.about-title{

  max-width:1000px;

  margin:0 auto 3.5rem;

  text-align:center;

  font-family:var(--font-display);

  font-size:clamp(2.55rem,3.5vw,3.8rem);

  font-weight:300;

  line-height:1.12;

  letter-spacing:.02em;

}
/* ==========================================================
   GRID
========================================================== */
.about-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:5rem;

  align-items:start;

}
.about-grid--reverse{

  direction:rtl;

}
.about-grid--reverse>*{

  direction:ltr;

}
/* ==========================================================
   TEXT
========================================================== */
.about-grid__text{

  max-width:620px;

  margin:0 auto;

}
.about-grid__text p{

  margin-bottom:1.7rem;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);

}
.about-grid__text p:last-child{

  margin-bottom:0;

}
/* ==========================================================
   IMAGES
========================================================== */
.about-grid__image{

  display:flex;

  justify-content:center;

  align-items:flex-start;

}
.about-photo{

  display:block;

  width:auto;

  max-width:100%;

  max-height:520px;

  height:auto;

  transition:transform .45s ease;

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 2%,
      #000 98%,
      transparent 100%
    );

  -webkit-mask-composite:source-in;

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 2%,
      #000 98%,
      transparent 100%
    );

}
.about-grid:hover .about-photo{

  transform:scale(1.015);

}
/* ==========================================================
   SIGNATURE
========================================================== */
.about-signature{

  margin-top:2rem;

  text-align:center;

  font-size:.82rem;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:rgba(255,255,255,.70);

}
/* ==========================================================
   TABLET
========================================================== */
@media (max-width:1100px){

  .about-section{

    margin-bottom:7rem;

  }

  .about-title{

    margin-bottom:3rem;

  }

  .about-grid{

    grid-template-columns:1fr;

    gap:3rem;

  }

  .about-grid--reverse{

    direction:ltr;

  }

  .about-grid__text{

    max-width:760px;

  }

  .about-grid__text p{

    text-align:center;

  }

  .about-photo{

    max-height:460px;

  }

}
/* ==========================================================
   MOBILE
========================================================== */
@media (max-width:700px){

  .about-section{

    margin-bottom:6rem;

  }

  .about-title{

    margin-bottom:2.5rem;

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

  }

  .about-grid{

    gap:2.5rem;

  }

  .about-grid__text{

    max-width:100%;

  }

  .about-grid__text p{

    font-size:1rem;

    line-height:1.8;

    text-align:left;

  }

  .about-photo{

    max-width:90%;

    max-height:none;

  }

}
/* ==========================================================
   ABOUT - ENDING
========================================================== */
.about-ending{

  max-width:900px;

  margin:7rem auto 4rem;

  text-align:center;

}
.about-ending .about-title{

  margin:0;

  font-family:var(--font-display);

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

  font-weight:300;

  line-height:1.25;

  letter-spacing:.01em;

  color:var(--color-text);

}
/* ==========================================================
   CTA
========================================================== */
.about-cta{

  display:flex;

  justify-content:center;

  margin:0 auto;

}
.about-cta .button{

  display:inline-flex;

  justify-content:center;

  align-items:center;

}
/* ==========================================================
   TABLET
========================================================== */
@media (max-width:1100px){

  .about-ending{

    margin:6rem auto 3.5rem;

  }

}
/* ==========================================================
   MOBILE
========================================================== */
@media (max-width:700px){

  .about-ending{

    margin:5rem auto 3rem;

  }

  .about-ending .about-title{

    font-size:clamp(1.8rem,8vw,2.4rem);

  }

}
/* ==========================================================
   RESET
========================================================== */
*{

  margin:0;
  padding:0;

  box-sizing:border-box;

}
html{

  scroll-behavior:smooth;

  -webkit-font-smoothing:antialiased;

}
body{

  background:var(--color-background);

  color:var(--color-text);

  font-family:var(--font-body);

  line-height:var(--leading-normal);

  overflow-x:hidden;

  text-rendering:optimizeLegibility;

}
img{

  display:block;

  width:100%;

}
a{

  color:inherit;

  text-decoration:none;

}
h1,
h2,
h3{

  font-family:var(--font-display);

  font-weight:var(--weight-regular);

}
.container{

  width:min(92%,var(--content-width));

  margin:auto;

}