@font-face {
  font-family: 'Wayle';
  src: url('../fonts/Wayle.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Mobilo';
  src: url('../fonts/Mobilo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'Nuqtra';
  src: url('../fonts/Nuqtra.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'Business-Blooming';
  src: url('../fonts/Business-Blooming.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'Business-Didot';
  src: url('../fonts/Business-Didot.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Business-Serif';
  src: url('../fonts/Business-Serif.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ModelStandard';
  src: url('../fonts/ModelStandard.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'Kern';
  src: url('../fonts/Kern.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'Regina';
  src: url('../fonts/Regina.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'Version';
  src: url('../fonts/Version.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'Bota';
  src: url('../fonts/Bota.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Hop-Compressed';
  src: url('../fonts/Hop-Compressed.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Hop-Expanded';
  src: url('../fonts/Hop-Expanded.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.Mobilo {font-family: 'Mobilo';}
.Nuqtra {font-family: 'Nuqtra'; direction: rtl;padding-top:25px !important}
.Blooming {font-family: 'Business-Blooming'; padding-top: 40px !important; padding-bottom: 0px !important;

}
.Didot {font-family: 'Business-Didot';}
.Serif {font-family: 'Business-Serif';padding-bottom: 40px !important;}
.Kern {font-family: 'Kern';padding-bottom: 40px !important; }
.Regina {font-family: 'Regina'; padding-bottom: 30px !important;
    padding-top: 0.8rem !important;}
.Version {font-family: 'Version';padding-top: 7px !important;
    padding-bottom: 20px !important;}
.Bota {font-family: 'Bota';}
.Hop.Compressed {font-family: 'Hop-Compressed';}

.Hop.Expanded {font-family: 'Hop-Expanded';}

body {
  background: #fff;
  color: #000;
  font-family: 'Wayle';
  margin: 0;
  padding: 0;
  background-color:#FFF;
  font-weight: normal !important;
}

body, html {height: 100%;}

img {width: 100%}


.nav-buttons {
  display: none; /* cachées par défaut (grand écran) */
}



/* .arrow-left::before { content: "↑"; }
.arrow-right::before { content: "↓"; } */


  aside, .content-column {
    height: 100vh;               /* occupe toute la hauteur de la fenêtre */
  overflow-y: auto;           /* active le scroll vertical interne */
  box-sizing: border-box;
  }

  aside {
    padding: 0 1rem 0 1rem;
    position: fixed;        /* ✅ reste immobile */
  top: 0;
  left: 0;
  width: 30vw;
  height: 100vh;          /* prend toute la hauteur */
  overflow-y: auto;       /* scroll interne */
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
    overflow-y: auto; /* garde le scroll actif */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    box-shadow: 3px 0 7px -3px rgba(0, 0, 0, 0.2);
  }

  aside::-webkit-scrollbar,
.content-column::-webkit-scrollbar {
  display: none; /* Chrome/Safari - cacher la scrollbar */
}

  a {
    text-decoration: none;
    border-bottom: 0.09rem solid grey;
    color: #000;
    transition: color 0.2s, border-color 0.2s; /* ✅ transition douce */

        }
  a:hover {
    color: black;
    border-bottom: 0.09rem solid #000;

  }
  .font-project {
    margin-top: 1rem;
  }
  .font-project a {    margin-left: 30%;
}
  h1, h2, h3, H4, H5, p {font-size: 16px; line-height: 19px; font-weight: normal}
  .font-project h3, .custom-project h3 {
    line-height: 2rem;width:30%;text-align: left !important;
  }

  .onepage-site {
    display: flex;
    gap: 1rem;
    height: 100vh;
  }
  .tab,   .font-project h3, .custom-project h3  {    margin: 0px 0px 20px;
    text-transform: uppercase;
    font-size: 190%;
    font-family: 'Kern';
    font-variation-settings: 'wght' 480, 'wdth' 200;
    letter-spacing: 0.02rem;
    /* color: darkgray; */
    text-align: center;
  }
    .tabul {margin-top: 0px;    margin-bottom: 2rem;

    }
#infos p{text-align: center;     text-transform: uppercase;
    font-size: 80%;
    font-variation-settings: 'wght' 480;
    letter-spacing: 0.02rem;
    line-height: 127%;
}
  .intro-column {
    flex: 0 0 30%;
    position: sticky;
    top: 2rem;
  }

  .content-column {
    flex: 1;
  }

  .content-column section {
    margin-bottom: 3rem;
    padding-right: 1rem;
  }

.entry {
  display: grid
  ;
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
}
.entry p {  padding: 0.1rem 0; margin: 0px/* compact, sans décalage */;text-transform: uppercase;font-size: 80%;    font-variation-settings: 'wght' 480;
    letter-spacing: 0.02rem;
}
.entry p:last-child {text-align: right;}

video {width: 100%; background-color: #FFF}
.slide-video {
  display: block;      /* enlève l'espace inline */
  width: 100%;         /* occupe toute la largeur du slide */
  height: auto;        /* conserve les proportions */
  border: none;        /* au cas où il y aurait une bordure par défaut */
  margin: 0;
  padding: 0;
}

  .intro-column ul li {margin: 0px}
  .intro-column ul li a {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000; /* ✅ ajoute la bordure du bas */
  padding: 0.1rem 0; /* compact, sans décalage */
  margin-bottom: -1px; /* ✅ évite la double ligne */
  text-decoration: none;
  color: inherit;
  transition: color 0.2s, border-color 0.2s; /* ✅ transition douce */
  display: grid
;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
}
.intro-column ul li a span:last-child {text-align: right; font-variant-numeric: tabular-nums;
}

.intro-column ul li a:hover {
  border-top-color: grey;
  text-decoration: none;
  border-bottom-color: grey; /* ✅ change aussi la bordure du bas */
  color: grey;
}

.swiper-slide {
     text-align: center;
     font-size: 18px;
     background: #444;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .swiper-slide img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   .slide-caption {
     width: 100%;
     background-color: #FFF;
     /* display: inline-block; */
     /* height: auto; */
     position: relative;
     font-size: 1rem;
     padding: 1rem;
     font-family: 'ModelStandard';
font-size: 0.8rem;
    font-variation-settings: 'wght' 450, 'mono' 50;
    text-align: left;
    padding: 1rem 0;
   }
   /* cache flèches natives */
.swiper-button-prev, .swiper-button-next {
  display: none !important;
}

/* slider : position relative pour les overlays */
#fonts .swiper.slider {  margin-top: -2rem;
}
  .swiper.slider {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;

}

/* hotspots gauche / droite qui reçoivent le clic */
.swiper.slider .nav-hotspot {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 30;
  /* on masque le curseur natif quand la souris est sur le slider */
  cursor: none;
  opacity: 0;
}

/* left / right placement */
.swiper.slider .nav-hotspot.left { left: 0; }
.swiper.slider .nav-hotspot.right { right: 0; }

/* flèche qui remplace le curseur (suit la souris) */
/* Masquer le curseur natif sur le slider et tous ses enfants */
.swiper.slider,
.swiper.slider * {
  cursor: none !important; /* important pour override Swiper */
}

/* Ta flèche personnalisée qui suit la souris */
.swiper.slider .cursor-arrow {
  position: absolute;
  pointer-events: none; /* laisse passer les clics sur le slider */
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  font-size: 80px;
  line-height: 1;
  user-select: none;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.08s ease;
  color: white;
  mix-blend-mode: difference;
  font-family: 'ModelStandard';
  font-variation-settings: 'wght' 400;
  z-index: 40;
  will-change: transform, opacity;
}


/* visible seulement au survol du slider en desktop */
@media (pointer: fine) {
  .swiper.slider:hover .cursor-arrow { opacity: 1; }
}

/* caches sur mobile tactile (optionnel) */
@media (pointer: coarse) {
  .swiper.slider { cursor: default; }
  .swiper.slider .cursor-arrow { display: none; }
}


  .slider {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding: 1rem 0;
  }

  .slide img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  ul li {
    margin-bottom: 0.5rem;
  }

  ul li a {
    text-decoration: none;
    color: #000;
  }

  ul li a:hover {
    text-decoration: underline;
  }

/* li mot */
ul.flex{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
  li.small{  width: 50%; font-family: 'ModelStandard';font-size: 0.8rem;
    font-variation-settings: 'wght' 450, 'mono' 50;
}
li.mot {font-size: calc(100vw - 90.8vw);


}
.desc {display: flex;margin-top:1rem}
.desc p {
  margin-top: 0px; width: 70%;    margin-bottom: 0px;

}

.editable {
  display: block;      /* ou inline selon le layout voulu */
  min-width: 100px;
  max-width: 100%;            /* ajuste selon besoin */
  padding: 1rem 0rem 1.25rem;
  border: none;               /* pas de bordure */
  outline: none;              /* pas d'outline par défaut */
  background: transparent;
  white-space: nowrap;        /* empêche les retours à la ligne automatiques */
  overflow: hidden;
  text-overflow: ;    /* optionnel : "..." si texte trop long */
  caret-color: auto;          /* couleur du caret */
  line-height: 1;             /* cohérence d'alignement */
  user-select: text;
  margin-bottom: -1rem;
      margin-top: -1rem;}

/* --- ACCESSIBILITÉ : proposer un focus visible sans bordure --- */
.editable:focus {
  /* Pas d'outline, mais on indique le focus par un léger effet (optionnel) */
  /* ou utiliser un style plus visible si besoin :
     box-shadow: 0 0 0 3px rgba(0,123,255,0.15) inset;
  */
}
.weights [contenteditable] {
  transition: opacity 0.2s ease;
  cursor: text;
}

.weights [contenteditable].blurred {
filter: blur(8px);}


.weights {margin-bottom: 2rem;
    }
  .weights li .mot {

  }


@media all and (max-width:1200px) {
  .desc {
    display: block;
    margin-top: 1rem;
}
.desc p {
    margin-top: 0px;
    width: 100%;
    margin-bottom: 0px;
}
}
@media (max-width: 740px) {

  .onepage-site {
    flex-direction: column; /* une seule colonne */
  }
  aside {    box-shadow: none;
}

.content-column section {
    margin-bottom: 3rem;
    padding-right: 0rem;
}
  .intro-column {top:0rem}
  .intro-column h3, #infos p {text-align: center;}
  .intro-column,
  .content-column {
    width: 100%;
    height: auto;       /* contenu s’adapte */
    overflow: visible;  /* tout scroll ensemble */
    position: relative; /* plus sticky sur mobile */
    padding: 0rem 1rem;
  }

  li.mot {
    font-size: calc(100vw - 87.25vw);
}
.editable {    margin-bottom: -2.5rem;
}

.Mobilo {margin-bottom: -20px;}
  .Blooming{
    padding-top: 30px !important;
          padding-bottom: 30px !important;
}
.Arabic {    margin-bottom: -10px; direction: rtl; text-align: right;
}
.Didot{
  padding-top: 20px !important;
        padding-bottom: 50px !important;
}
.Serif{
  padding-top: 10px !important;
        padding-bottom: 30px !important;
}
.font-project h3 {
  font-weight: 400;
      margin-top: 0px;
      width: 100%;
      font-size: 1rem;
      line-height: 1rem;
      /* text-align: center; */
      text-transform: uppercase;
      /* font-weight: 700; */
      letter-spacing: 0.04rem;
      text-transform: uppercase;
      font-size: 80%;
      font-variation-settings: 'wght' 480;
      letter-spacing: 0.02rem;
}
.desc {
    display: block;
    margin-top: 2rem;
}
.desc p {
    margin-top: 0px;
    width: 100%;
    margin-bottom: 0px;
}

.weights {
  margin-bottom: 1rem;
}
.weights ul li {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}
li.small {
    width: 50%;
    font-size: 60%;
    color: grey;
}
#infos {   margin-bottom: 3rem;
  margin-top: 1.8rem;

}
#infos p:last-child{
  margin-top: 10px;
margin-bottom: -20px;
}

.Nuqtra {
    font-family: 'Nuqtra';
    direction: rtl;
    padding-top: 11px !important;
    padding-bottom: 37px !important;
}
.Version {
    font-family: 'Version';
    padding-top: 7px !important;
    padding-bottom: 35px !important;
}
.Kern {
    font-family: 'Kern';
    padding-bottom: 30px !important;
    padding-top: 10px !important;
}

.Bota {
    font-family: 'Bota';
    margin-bottom: -1.5rem !important;
    margin-top: -1.2rem !important;
}
.section-intro {
  display: none
}
.nav-buttons {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.25rem;
  z-index: 9999;
  flex-direction: column;
}
.nav-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.arrow:focus {border: none !important}

.arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.4rem;
  color: white;
  background: rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  font-family: 'ModelStandard';
    font-variation-settings: 'wght' 400;
}

.arrow:hover {
  background: black;
  transform: scale(1);
}
}