/* ------------------------------------------------------------
   RESET / BASE
------------------------------------------------------------ */
:root {
  --bg:#F7F5F5;
  --light-grey: #F5FBFF;
  --yellow: #ff9e07;
  --red: #F7492A;
  --kaki: #323630;
  --pink: #dd4a9a;
  --border: rgba(59,0,50,0.12);

  --text-grey:#696666;

  --lh-text: clamp(1.5, 1.6vw + 1.9, 2.6);
}

/*
* {
  outline: 1px solid red !important;
}
*/

/* Box sizing universel */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Reset margin/padding + hauteur */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
}

/* Typo & base */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

/* Désactive le "page vide" si reveal-prehide traîne */
html.reveal-prehide .artist-tile{
  opacity: 1;
  transform: none;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Manrope", sans-serif;
  margin-top: 80px; /* hauteur header fixed */
}


body.nav-open{
  overflow: hidden;
}



/* Pour que le main prenne tout l’espace dispo et pousse le footer en bas */
main {
  flex: 1 0 auto;
  padding-bottom: 120px;
  width: 100%;
}
body.modal-open{
  overflow: hidden;
  touch-action: none;
}

/* Images fluides */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}


section .full-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #fff;
  background-image: url('../img/bg/blob.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80vh;
  background-attachment: fixed;
}




.color-section{
  min-height: 100vh;
  background: #F7492A; /* couleur de départ */
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Liens */
a {
  color: inherit;
  text-decoration: none;
}

 #contact a{
  text-decoration: none;
  box-shadow: inset 0 -1px 0 #000;
  padding: 2px 0 3px;
  line-height: 1.1;
  font-family: "Manrope", monospace;
  font-weight: 400;

  font-size: inherit;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--kaki);
  margin: 0 0 30px;

  transition:
    box-shadow .18s cubic-bezier(.33,.66,.66,1),
    color .25s ease;
}

 #contact a:hover{
  box-shadow: inset 0 -1.65em var(--red);
  color: #fff;
}

h1{
  font-family: "Ranchers", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: clamp(50px, 8vw, 100px);
  color: var(--red);

  line-height: .9;
  margin: 5vh 0 0;
}


 h3 {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.23rem, 1.4vw, 3rem);
  line-height: 1;
  color: #3B0032;
  color: var(--red);
  letter-spacing: 0.015em;
  margin: 25px 0 15px;
  text-align: left;
}

h4{
  font-family: "Caveat", cursive;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 0.9;        /* ← CLÉ */
  margin: 0;               /* ← CLÉ */
  padding: 0;
  color: var(--yellow);
}

/* ======================
   PARAGRAPHES – BASE GLOBALE
====================== */
p {
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;

  font-size: clamp(1rem, 2.4vw, 1.15rem);
  line-height: var(--lh-text);

  color: var(--text-grey);
  margin: 0 0 1em;
}

strong {
  font-weight: 800;
}

/* Listes sans décalage par défaut */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a, button {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

a, button, .clickable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.fa-solid{
  color: var(--kaki);
  margin-right: 10px;
}
.red{
  color: var(--red);
}

.yellow{
  color: var(--yellow);
}


/* ------------------------------------------------------------
   HEADER
------------------------------------------------------------ */

.site-header{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 2000;
  background: transparent; /* le glass passe sur ::before */
}

/* couche “verre givré” */
.site-header::before{
  content:"";
  position: absolute;
  inset: 0;
  background: rgba(245, 245, 242, .895);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  pointer-events: none;
  z-index: -1;
}

/* Conteneur principal du header */
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  height: 80px;
  gap: 40px;
}

/* groupe logo + langues */
.header-left{
  display:flex;
  align-items:center;
  gap:16px;
  flex:0 0 auto;
}

/* empêche le centrage mobile */
.site-header-inner{
  justify-content:space-between;
}

/* IMPORTANT */
.main-nav{
  margin-left:auto;
}

/* ------------------------------------------------------------
   NAVIGATION (DESKTOP)
------------------------------------------------------------ */

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav a {
  display: flex;
  align-items: center;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-size: 1.05em;
  letter-spacing: 0.005em;
  position: relative;
  padding-bottom: 4px;
  text-decoration: none;
  color: var(--kaki);
  transition: 0.1s ease all;
}

.main-nav a:hover{
  color: var(--red);
}

.main-nav a.is-active {
  color: var(--red);
  pointer-events: none;;
}
+

/* ===== DESKTOP ONLY – underline hover ===== */
@media (hover: hover) and (pointer: fine){

  .main-nav a::after{
    content:"";
    position:absolute;
    left: 50%;
    bottom: -1px;
    width: 80%;
    height: 2px;
    background: var(--red);

    transform: translateX(-50%) scaleX(0);
    opacity: 0;

    transition:
      transform .25s cubic-bezier(.22,.8,.22,1),
      opacity .15s ease;
  }

  .main-nav a:hover::after{
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
  }

  .main-nav a.is-active::after{
    display:none;
  }
}


/* ------------------------------------------------------------
   BURGER MENU
------------------------------------------------------------ */

.burger {
  display: none;
  position: relative;
  width: 32px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 99999; /* au-dessus du menu fullscreen */
}

.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease,
    top 0.25s ease,
    bottom 0.25s ease;
}

/* 3 barres */
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger span:nth-child(3) { bottom: 0; }

/* Etat "X" quand le menu est ouvert */
body.nav-open .burger span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

body.nav-open .burger span:nth-child(2) {
  opacity: 0;
}

body.nav-open .burger span:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* X du menu en blanc quand le menu est ouvert */
body.nav-open .burger span{
  background: #fff;
}

/* ------------------------------------------------------------
   NAV FULLSCREEN SUR MOBILE + LOGO BLANC (FUSION)
------------------------------------------------------------ */

/* Logo dans menu mobile fullscreen */
.mobile-logo{
  /* rendu tout le temps en mobile, caché via opacity si fermé */
  display: none;
}

@media (max-width: 1200px) {

  .site-header {
    padding: 0;
    height: 80px;
  }

  .site-header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 80px;
  }

  .burger {
    display: inline-flex;
  }

  /* MENU FULLSCREEN – rendu tout le temps (sinon pas de transition) */
  .main-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    gap: 28px;

    background: var(--red);
    display: flex;                 /*  plus de display:none */
    align-items: center;
    justify-content: center;
    z-index: 1001;
    background-image: url('../img/logo/logo-dark.svg');

    background-repeat: no-repeat;
    background-position: center;
    background-size: 120vh;

    /*  état fermé */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Etat ouvert */
  body.nav-open .main-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Logo blanc : rendu en mobile, animé via opacity/transform */
  .mobile-logo{
    display: flex;                 /*  plus de display:none */
    justify-content: center;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(10px);
  }
  body.nav-open .mobile-logo{
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-logo img{
    height: 80px;
    width: auto;
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }

  .main-nav a {
    font-size: 17px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fff;
    transition: all 0s ease;
  }

  .main-nav a:hover {
    color: var(--kaki);
    letter-spacing: 0.12em;
    text-decoration: none;
  }

  .main-nav a.is-active {
    color: var(--kaki);
    font-weight: 600;
  }

  @media (max-width: 1200px){

    /* Kill any underline-like effect in mobile menu */
    .main-nav a,
    .main-nav a:hover,
    .main-nav a:focus,
    .main-nav a:active,
    .main-nav a:visited{
      text-decoration: none !important;
      box-shadow: none !important;
      border-bottom: 0 !important;
      background-image: none !important;
    }

    /* Kill desktop underline pseudo-element if it leaks to mobile */
    .main-nav a::after{
      content: none !important;
      display: none !important;
    }

    /* iOS / mobile "focus ring" vibe (optionnel) */
    .main-nav a:focus-visible{
      outline: none;
    }
  }
  /* ------------------------------------------------------------
      STAGGER NAV (MOBILE)
     IMPORTANT: le JS doit poser --d sur chaque li
  ------------------------------------------------------------ */

  .main-nav .mobile-logo,
  .main-nav ul > li{
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity .26s ease,
      transform .26s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--d, 0ms);
    will-change: transform, opacity;
  }

  body.nav-open .main-nav .mobile-logo,
  body.nav-open .main-nav ul > li{
    opacity: 1;
    transform: translateY(0);
  }

  body:not(.nav-open) .main-nav .mobile-logo,
  body:not(.nav-open) .main-nav ul > li{
    transition-delay: 0ms;
  }

  @media (prefers-reduced-motion: reduce){
    .main-nav .mobile-logo,
    .main-nav ul > li{
      transition: none;
      transform: none;
      opacity: 1;
    }
  }
}

/* ------------------------------------------------------------
   FOOTER FIXED BOTTOM
------------------------------------------------------------ */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  background:var(--red);
  color: #fff;
  text-align: center;
  padding: 50px 0;
  font-size: 14px;
  letter-spacing: 0.05em;
  min-height: 300px;
}


.site-footer a{
  text-decoration: none;
  box-shadow: inset 0 -1px 0 #fff;
  padding: 2px 0 3px;
  line-height: 1.1;
  font-family: "Manrope", monospace;
  font-weight: 400;

  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: none;
  color: #fff;
  margin-bottom: 10px;

  transition:
    box-shadow .18s cubic-bezier(.33,.66,.66,1),
    color .25s ease;
}

.site-footer a:hover{
  box-shadow: inset 0 -1.65em #fff;
  color: var(--red);
}

.site-footer p {
  font-family: "Manrope", monospace;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.15;
  color: #fff;
  padding: 0;
}

.site-footer img {
  max-width: 70px;
  margin: 20px 0;
  pointer-events: none;
}

/* === SOCIAL ICONS FOOTER : override propre === */
#footer-socials{
  margin-top: 20px;
}
#footer-socials a{
  box-shadow: none !important;   /* supprime le style lien footer */
  padding: 0 5px;
  margin: 0;
}

#footer-socials a:hover{
  box-shadow: none !important;
  color: inherit;
}

/* l’icône uniquement */
#footer-socials i{
  display: inline-block;
  font-size: 25px;
  transition: transform .45s cubic-bezier(.22,.8,.22,1);
  will-change: transform;

}

/* hover = l’icône monte */
#footer-socials a:hover i{
  transform: translateY(-3px);
}


/* ------------------------------------------------------------
    PAGE INDEX
------------------------------------------------------------ */

.artists-grid {
  padding: 60px 5vw 80px;
}

/* === Grille artistes sur la home === */
.grid-artistes{
  min-height: auto;
    display: block;
    min-height: auto;
    display: block;
    padding: 0;
    margin: clamp(20px, 4vh, 5vh) auto 0;
}



/* ============================================================
   PAGE INDEX – GRILLE ARTISTES (système unique)
============================================================ */


.grid-artistes-inner{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(35px, 4vw, 56px);
}

@media (max-width: 468px){
  .grid-artistes-inner{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.grid-artistes .artist-tile{
    display: block;
    text-decoration: none;
    color: inherit;
    will-change: transform;
    transform: translate3d(0,0,0);
    transition: none; /* important : c'est le JS qui anime */
}


.grid-artistes .artist-thumb{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 1 / 1;
}

.grid-artistes .artist-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .25s ease, filter .25s ease;
}


.grid-artistes .artist-thumb.is-illustration img{
  object-fit: contain;
  max-height: 80%;
}


.grid-artistes .artist-thumb::after{
  content: "+";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  background: rgba(0,0,0,.25);
  transition: opacity .18s ease;

  color: rgba(290,290,290,1);
  font-family: "Oswald", sans-serif;
  font-weight: 160;
  font-size: 80px;
  text-transform: none;
}

@media (hover:hover){
  .grid-artistes .artist-tile:hover .artist-thumb::after{ opacity: 1; }
  .grid-artistes .artist-tile:hover .artist-thumb img{
    transform: scale(1) ;
    filter: grayscale(25%);
  }
}

.grid-artistes .artist-caption{
  display: block;
  margin: 20px 0 10px;
  font-size: clamp(9px, 2vw, 12px);
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  color: var(--kaki);
  letter-spacing: .05em;
  text-align: center;
  transition: all .2s ease;
}



@media (hover:none) and (pointer:coarse){
  .grid-artistes .artist-tile:active .artist-thumb::after{ opacity: 1; }
  .grid-artistes .artist-tile:active .artist-thumb img{
    transform: scale(1.2);
    filter: grayscale(25%);
  }
}

/* =========================
   ARTIST CARDS (clean)
========================= */

@media (max-width: 668px) {
  .artist-tile{
    padding: 6px;
  }
}


.artist-tile .thumb img{
  outline: 1px solid rgba(20,20,20,.06);
  outline-offset: -1px; /* colle au bord */
}


.artist-thumb{
  display: block;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: rgba(0,0,0,.25);

    border-radius: 0;
    overflow: hidden;
}


.artist-thumb img{
  width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transform: scale(1);
    transition: transform .35s ease, filter .35s ease;

    border-radius: 0;
}


.artist-tile:hover .artist-thumb img{
  transform: scale(1.03);
  filter: saturate(1.05) ;
}


.artist-tile:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 3px;
}

/* ---- Filtres artistes ---- */
.filters-wrap {
  padding: 0 0;
}

.filters-wrap h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 200;
  font-style: normal;
  text-align: center;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: 1;
  color: #3B0032;
  color: var(--red);
  padding: 0;
}

.filters-wrap h3 {
  font-family: "Manrope", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
  color: #3B0032;
  color: var(--kaki);

  margin: 30px 0 0;
  text-align: center;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  padding: 50px 0;
}

.filters button {
  display: inline-block;
  border: 0;
  background:var(--yellow);
  border: 1px solid var(--yellow);

  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;

  padding: 8px 15px;
  border-radius: 3px;
  font-size: 16px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.1s ease-out;
}

@media (max-width: 668px) {
  .filters {
    gap: 20px;
    padding: 2vh 0;
  }
  .filters button {
    font-size: 15px;
  }
}

.filters button:hover {
  background: var(--kaki);
  border: 1px solid var(--kaki);
  color: #fff;
}
@keyframes btn-vibe {
  0%   { transform: translateY(0); }
  25%  { transform: translateX(-1px); }
  50%  { transform: translateY(2px); }
  75%  { transform: translateY(-3px); }
  100% { transform: translateX(0); }
}



.filters button:hover {
  animation: btn-vibe 0.18s linear;
}
.filters button.is-active {
  background: transparent !important;
  border: 1px solid var(--kaki);
  color: #3B0032;

  pointer-events: none;
}



/* ===============================
   ARTIST TILE – OVERLAY HOVER
=============================== */

.artist-card{
  position: relative;
  overflow: hidden;
}

.artist-tile,
.artist-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 10px;

}
.artist-tile:hover{
}


.artist-card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.artist-overlay{
  position: absolute;
  inset: 0;
  background: rgba(102,11,37,0.45);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}



.artist-meta{
  font-family: "Manrope", sans-serif;
  font-weight: 300;
  font-size: clamp(25px, 5.5vw, 45px);
  text-transform: none;
  color: var(--kaki);
  margin: 3vh 0 0;
}

.artist-card:hover .artist-overlay{
  opacity: 1;
}

/* ------------------------------------------------------------
   GABARIT DE PAGE
------------------------------------------------------------ */
.intro-content{
  margin: 0 auto;
    border-bottom: 1px solid var(--light-grey);
    overflow: hidden;

    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #315559;
    padding: 3%;

    position: relative;
    overflow: hidden;
}


/* HERO FULL WIDTH */

@media (max-width: 668px) {
  .intro-content {
    padding: 0 30px 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.intro-content > * {
  max-width: clamp(320px, 85vw, 1600px);
  width: 90%;
  display: grid;
  place-items: center;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 668px) {
  .intro-content > * {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.intro-content p{
  font-size: clamp(1rem, 2.5vw, 1.75rem);
  line-height: clamp(1.8, 2.6vw + 1.6, 3);
  font-weight: 300;
  color: #fff;
  text-align: center;
  margin: 3vh 0;
}



.intro-content img{
  padding:  0;
  max-height: 250px;
}

@media (max-width: 1000px) {
  .intro-content img{
    padding: 50px 10px 40px;
  }
}

.large-logo-container{
  margin: 0 auto 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (max-width: 1000px) {
  .large-logo-container{
    margin: 0;
  }
}

@media (min-width: 1000px) {
  .large-logo-container img{
    margin-top: 50px;
  }
}

.page {
  padding: 0;
  max-width: 1200px;
  width: 90%;
  margin: 0 auto 90px;
}

.page-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.page-hero h1 {
  font-family: "Ranchers", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: clamp(50px, 8vw, 100px);
  color: var(--red);
  margin: 5vh 0 0;
}

.page-hero h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 1.1;
  color: var(--kaki);
}


.page-content {
  max-width: 3200px;
  margin: 0 auto 100px;
}


.page-content section + section {
  margin-top: 40px;
}


.flex-blocks{
  display: flex;
  gap: clamp(30px, 4vw, 60px);
  margin: 50px auto 0;
}

/* bloc générique */
.flex-block{
  flex: 1;
  padding: 0;
}

.flex-block h3{
  font-family: "Ranchers", sans-serif;
  font-weight: 200;
  color: var(--red);
  margin-top: 0;
  text-transform: none;
}
.flex-block p{
  color: var(--kaki);
}

.split-2col{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 968px){
  .split-2col{
    grid-template-columns: 1fr;
  }
}

/* ======================
   TABLETTE
   ====================== */
@media (max-width: 1200px){
  .flex-blocks{
    flex-wrap: wrap;
  }

  .flex-block{
    flex: 1 1 calc(50% - 30px);
  }

  /* bloc pleine largeur */
  .flex-block.is-wide{
    flex: 1 1 100%;
  }
}

/* ======================
   MOBILE
   ====================== */
@media (max-width: 768px){
  .flex-blocks{
    flex-direction: column;
  }

  .flex-block{
    width: 100%;
    padding: 0;
  }
}



/* ------------------------------------------------------------
   TEMPLATE PAGE ARTISTE
------------------------------------------------------------ */

.artist-hero-content{
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;   /* au lieu de 50px auto */
}

.artist-works-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px;
  margin-top: 50px;
}


.artist-works-grid > *{
  grid-column: auto !important;
}


.artist-links{
  margin-top: 20px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.artist-link{
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--red);
  padding: 2px 2px 3px;
  font-family: "Manrope", monospace;
  font-weight: 400;

  line-height: 1.1;

  font-size: 16px;
  letter-spacing: .005em;
  text-transform: none;
  color: #000;

  transition:
    box-shadow .18s cubic-bezier(.33,.66,.66,1),
    color .25s ease;
}

.artist-link:hover{
  box-shadow: inset 0 -1.65em 0 var(--red);
  color: #fff;
}

.artist-intro{
  border-bottom: 1px solid var(--border);
  padding: 30px 0 20px;
  margin: 0;
}

.artist-work{
  overflow: hidden;
    display: block;
    align-items: center;
    justify-content: center;

  margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width: 900px){
  .artist-works-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  .artist-works-grid{
    grid-template-columns: 1fr;
  }
}


@media (max-width: 900px){
  .js-magnetic-in{
    opacity: 0;
    transform: translate3d(0,22px,0);
    transition:
      opacity 2s ease-out,
      transform 2s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
  }

  .js-magnetic-in.is-in{
    opacity: 1;
    transform: none;
  }
}




/*  COLLABORATIONS  */
/* =========================
   HOME MADE — SIMPLE BLOCK
========================= */

.hm-block{
  width: 100%;
  padding: 0 0 40px;
}

.hm-container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.hm-container h3{
  margin: 0 0 20px 0;
  font-size: 28px;
  font-weight: 400;
}

/* =========================
   IMAGES — FULL WIDTH FLEX
========================= */

.hm-grid{
  width: 100%;
  display: flex;
  flex-wrap: wrap;     /* ✅ on laisse wrap tout le temps */
  gap: 30px;
}

/* 4 par ligne par défaut */
.hm-card{
  flex: 0 0 calc(25% - 22.5px); /* ✅ (gap 30px) => 3 gaps / 4 = 22.5 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hm-card img{
  width: 100%;
  height: auto;         /* ✅ plus logique si tu n’imposes pas une hauteur */
  display: block;
  object-fit: cover;
}

/* =========================
   RESPONSIVE
========================= */

/* tablette : 2 par ligne */
@media (max-width: 900px){
  .hm-card{
    flex-basis: calc(50% - 15px); /* ✅ gap 30px => 1 gap / 2 = 15 */
  }
}

/* mobile : 1 par ligne */
@media (max-width: 560px){
  .hm-card{
    flex-basis: 100%;
  }
}
/* =========================
   CAS : UNE SEULE IMAGE
========================= */

.hm-grid > .hm-card:only-child{
  flex-basis: 100%;
}

.hm-grid > .hm-card:first-child:nth-last-child(2),
.hm-grid > .hm-card:first-child:nth-last-child(2) ~ .hm-card{
  flex-basis: calc(50% - 15px); /* cohérent avec gap: 30px */
}
/* ------------------------------------------------------------
   PAGE CONTACT  + FORMULAIRE CONTACT
------------------------------------------------------------ */

.contact-form {
  margin-top: 32px;
  display: grid;
  gap: 20px;
}

.contact-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
}

.contact-form input,
.contact-form textarea {
  border: 1px solid #ccc;
  padding: 10px 12px;
  font: inherit;
  border-radius: 4px;
  background: #fff;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #000;
}

.contact-form button[type="submit"] {
  display: inline-block;
  align-self: flex-start;
  justify-self: start;   /* ✅ stop stretch en grid */
  width: auto;
  margin-top: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 0;
  background: #000;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.contact-form button[type="submit"]:hover {
  background: var(--yellow);
  color: #fff;
}
.field-error{
  margin-top: 6px;
  font-size: 12px;
  color: var(--red);
  margin-top: 4px;
  padding-left: 2px;
  transform: translateY(-6px); /* 🔼 remonte l’alerte */
}

.is-error{
  border-color: #c40000;
}

.form-alert--err{
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,0,0,.08);
}

input::placeholder,
textarea::placeholder{
  color: #b3b3b3;
  font-weight: 300;
  opacity: 1; /* important pour Firefox */
}

.metro-lines{
  display: flex;
  flex-direction: column;
  gap: 14px; /* ESPACE ENTRE LES LIGNES */
}

/* ligne */
.metro-line{
  display: flex;
  align-items: center;
  gap: 12px; /* ESPACE ENTRE M / PASTILLE / TEXTE */
  font-family: system-ui, -apple-system, sans-serif;
}

/* logo M — cercle bleu foncé */
.metro-logo{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #003CA6; /* bleu métro foncé */
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* pastille ligne */
.metro-badge{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* couleurs lignes */
.m13{
  background:#75C5E8;
  color:#000;
}

.m12{
  background:#007852;
  color:#fff;
}

/* texte station */
.station-name{
  font-family: "Manrope", sans-serif;
  font-weight: 300;
  font-optical-sizing: auto;

  font-size: clamp(1rem, 2.5vw, 1.35rem);
  line-height: var(--lh-text);

  color: var(--text-grey);

  margin: 0; /* IMPORTANT : pas de margin comme <p> */
}


.img-contact{
  max-height: 190px;
  margin-top: 30px;
}
#contact p{
  line-height: 2;
}
.copyright{
  font-size: .65em;
}

#social-links{
  margin: 20px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

/* lien */
#social-links .social-link{
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  color: inherit;
  display: inline-flex;
  align-items: center;
}

/* hover lien */
#social-links .social-link:hover{
  box-shadow: none !important;
  color: inherit;
}

/* icône */
#social-links .social-icon{
  display: inline-block;
  font-size: 30px;
  transition: transform .45s cubic-bezier(.22,.8,.22,1);
  will-change: transform;
  margin-left: -7px;
}

/* hover = l’icône monte */
#social-links .social-link:hover .social-icon{
  transform: translateY(-3px);
}

/* ----------------------------------------
   RETURN TO TOP
---------------------------------------- */
#return-to-top {
  position: fixed;
  right: 25px;
  bottom: 50px;
  z-index: 999;

  width: 44px;
  height: 44px;
  border-radius: 50%;

  background: var(--kaki);
  color: #cf0;

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

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);

  transition: opacity .25s ease, transform .25s ease;
}

#return-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#return-to-top:hover i {
  transform: translateY(-5px);
}

#return-to-top i {
  color: #fff;
  position: relative;
  left: 0px;
  top: 0;
  font-size: 22px;
  transition: all .3s ease;
}




/*  HERO */
.hero{
  position: relative;
  height: clamp(130px, 38vh, 520px);
  min-height: 550px;
  overflow: hidden;
  background:var(--kaki);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.hero .slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.hero .slide.active{
  opacity:1;
  pointer-events:auto;
}

.hero .slide-bg{
  position:absolute;
  inset:0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  filter: blur(15px) brightness(0.85);
  transform: scale(1.15);
  will-change: transform;
}

.hero .slide img{
  position: relative;
  z-index: 2;
  max-width: min(90%, 1000px);
  max-height: 100%;
  object-fit: contain;
  margin: auto;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0;
  background: #000;
  pointer-events: none;
}

@media (max-width: 668px){
  .hero{
    min-height: 350px;

  }
  .hero .slide-bg{
    filter: blur(10px) brightness(0.85);
    transform: scale(1.1);
  }
  .hero .slide img{
     width: auto;
     max-height: 62%;
   }
}

/* ===== PAGE WIPE : 3 VOLETS ===== */
.page-wipe{
  position: fixed;
  inset: 0;
  z-index:100;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}


#nav-mask{
  position: fixed;
  inset: 0;
  background: var(--kaki); /* ou --bg / --dark, ce que tu veux */
  opacity: 0;
  pointer-events: none;
  z-index: 999999; /* au-dessus du burger (99999) et du header (2000) */
  transition: opacity .08s linear;
}



.vibrate-1 {
	-webkit-animation: vibrate-1 0.8s linear infinite both;
	        animation: vibrate-1 0.8s linear infinite both;
}

 /**
  * ----------------------------------------
  * animation vibrate-1
  * ----------------------------------------
  */
 @-webkit-keyframes vibrate-1 {
   0% {
     -webkit-transform: translate(0);
             transform: translate(0);
   }
   20% {
     -webkit-transform: translate(-2px, 2px);
             transform: translate(-2px, 2px);
   }
   40% {
     -webkit-transform: translate(-2px, -2px);
             transform: translate(-2px, -2px);
   }
   60% {
     -webkit-transform: translate(2px, 2px);
             transform: translate(2px, 2px);
   }
   80% {
     -webkit-transform: translate(2px, -2px);
             transform: translate(2px, -2px);
   }
   100% {
     -webkit-transform: translate(0);
             transform: translate(0);
   }
 }


 .marquee--bg{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 200px;
  margin-top: 30px;
  overflow: hidden;
}


.marquee--bg{
  --marquee-speed: 20s;
  --tileW: clamp(600px, 80vw, 800px); /* largeur d’un logo */
}

.marquee--bg::before{
  content:"";
  position:absolute;
  inset:0;

  background-image: url("../img/marquee/marquee.webp");
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: var(--tileW) auto;

  opacity: 1;
  animation: marquee-bg var(--marquee-speed) linear infinite;
  will-change: background-position;
  pointer-events: none;
}

@keyframes marquee-bg{
  from { background-position-x: 0; }
  to   { background-position-x: calc(-1 * var(--tileW)); }
}

@media (max-width: 768px){
  .marquee--bg{
   height: 15vh;
    --marquee-speed: 15s;
  }
}
.marquee--bg-right::before{
  animation-direction: reverse;
}


/* drapeaux à droite du logo, avant la nav */
.site-header-inner{
  display:flex;
  align-items:center;
}

.site-logo{
  position:relative;
  width: 70px;
  flex:0 0 70px;
  display:block;
  z-index:10;        /* ← TRÈS important : il n'étire plus la flexbox */
}

/* Logo navbar */
.site-logo img{
  display:block;
  width: 100%;
  height:auto;
  transform-origin:left center;
  transition:transform .25s ease;
}

.site-logo:hover img{
  transform:scale(1.08);
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.lang-switch .lang{
  width:20px;
  height:20px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  transition:.2s ease;
}

.lang-switch .lang img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.lang-switch .lang:hover{ transform:scale(1.08); }

.lang-switch .lang.is-active{
  filter:grayscale(70%);
  opacity:.85;
  pointer-events:none;
}

/* pousse la nav à droite */
.main-nav{ margin-left:auto; }
/* SVG flags: évite qu’ils deviennent “vides” à cause de règles globales */
.lang-switch .lang img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}