/* SITE – un seul fichier CSS : 1. bureau mobile, curseurs, glisser-déposer   2. améliorations */

/* Police des gros titres de projets (Syne ExtraBold) */
@font-face {
  font-family: "Syne";
  src: url("fonts/Syne-Extra.woff") format("woff"),
       url("Syne-Extra.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================
   LOGO « Khanh Robert » (haut gauche) en Syne – desktop et mobile
   ========================================================== */
html body nav a.nom-site,
html body nav a.nom-site span {
  font-family: "Syne", "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
/* Liens « Projets / Infos / Contact » de la barre du haut + menu mobile, en Syne */
html body nav a.lien-nav {
  font-family: "Syne", "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  font-size: .85rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
html body #menu-mobile a {
  font-family: "Syne", "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.6rem !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* Sections Infos et Contact : gros titres en bleu + Syne, contenu textuel en blanc */
html body #a-propos h2,
html body #contact h2 {
  font-family: "Syne", "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  line-height: 1.05 !important;
  color: #3655FA !important;
  text-shadow: none !important;
}
html body #a-propos .space-y-6 p,
html body #contact p {
  color: #fff !important;
  text-shadow: none !important;
}

/* Barre du haut : plus de ligne blanche sous l'encart (desktop + mobile) */
html body nav {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Desktop : « Khanh Robert » aligné sur le bord gauche de la liste des titres */
@media (min-width: 768px) {
  html body nav > div {
    max-width: none !important;
    margin: 0 !important;
    padding-left: clamp(20px, 2.4vw, 56px) !important;   /* même valeur que la liste de titres */
    padding-right: clamp(20px, 2.4vw, 56px) !important;
  }
}

@media (max-width: 767px) {
  html body nav a.nom-site,
  html body nav a.nom-site span { font-size: .95rem !important; }
}

/* ==========================================================
   BUREAU MOBILE – images floutées empilées, fond noir
   À charger APRÈS le <style> existant (fin du <head>)
   ========================================================== */
@media (max-width: 767px) {

  /* On masque l'ancien carrousel mobile, remplacé par le bureau */
  #conteneur-projets { display: none !important; }
  /* Flèches de l'ancien carrousel : sélecteurs renforcés pour passer devant
     « body.section-projets-active .nav-projets-mobile » du code d'origine */
  html body .nav-projets-mobile,
  html body.section-projets-active .nav-projets-mobile,
  html body .fleches-nav-projets {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #projets {
    padding: 64px 0 90px !important;       /* 64px = hauteur de la barre du haut (sans liseré) */
    justify-content: flex-start !important; /* colle les projets sous le menu */
    min-height: 0 !important;
  }
  #projets .contenu-section {
    height: auto !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  /* --- Menu : titres en bleu --- */
  #menu-mobile a,
  .nav-mobile-bottom a,
  .nav-mobile-bottom a span,
  .nav-mobile-bottom a i,
  #menu-mobile .fermer-menu { color: #3655FA !important; }

  /* --- Le bureau --- */
  html { background: #000; }
  #bureau-mobile {
    background: #000;
    position: relative;
    padding: 0 0 48px;
    overflow: hidden; /* coupe ce qui dépasse sur les côtés */
  }

  /* --- Un projet : image floutée, titre au centre --- */
  .feuille {
    --rot: 0deg;
    position: relative;
    display: block;
    width: 100%;
    margin-top: -1px;          /* recouvre la couture entre deux projets (liseré clair) */
    padding: 0;
    border: 0;
    background: #000;
    overflow: hidden;
    clip-path: inset(0);       /* découpe nette même pendant l'animation */
    contain: paint;
    isolation: isolate;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Le cadre reste FIXE (noir, collé aux autres) : seule l'image et le titre
       apparaissent à l'intérieur. Aucun cadre ne bouge, donc aucun liseré possible. */
  }
  .feuille:first-of-type { margin-top: 0; }

  /* état d'attente : arrive du bas en descendant, du haut en remontant */
  .feuille img,
  .feuille-titre {
    opacity: 0;
    transform: translateY(var(--dy, 70px));
  }
  .feuille.posee img,
  .feuille.posee .feuille-titre {
    opacity: 1;
    transform: none;
  }
  .feuille:focus-visible { outline: 2px solid #3655FA; outline-offset: -4px; }

  .feuille img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: brightness(.72);
    scale: 2.1;                /* zoom : on n'aperçoit qu'un détail de l'image */
    /* parallaxe : seule l'image bouge (inclinaison + scroll), le titre reste fixe */
    translate: calc(var(--gx, 0) * -24px)
               calc(var(--gy, 0) * -18px + var(--sy, 0) * -80px);
    transition: filter .4s ease, scale .6s ease,
                transform 1s cubic-bezier(.16, 1, .3, 1) var(--delai, 0ms),
                opacity .6s ease var(--delai, 0ms);
    will-change: translate;
  }
  .feuille:active img { filter: brightness(.85); scale: 1.9; }

  .feuille-titre {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;      /* titre fixe, parfaitement centré */
    transition: transform 1s cubic-bezier(.16, 1, .3, 1) var(--delai, 0ms),
                opacity .6s ease var(--delai, 0ms);
    width: max-content;
    max-width: 82%;
    padding: 0;
    text-align: center;
    font: 800 min(5.4vw, 1.5rem)/1.08 "Syne", "Montserrat", sans-serif;
    letter-spacing: .03em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    color: #3655FA;
    /* halo flou qui épouse les lettres (plus d'encadré) */
    text-shadow:
      0 0 3px rgba(0, 0, 0, .55),
      0 0 9px rgba(0, 0, 0, .5),
      0 0 20px rgba(0, 0, 0, .4);
    pointer-events: none;
  }

  /* Fondu entre les projets : même dégradé en haut et en bas de chaque image */
  .feuille::after {
    content: "";
    position: absolute;
    inset: -4px;               /* le fondu dépasse un peu de l'image : bord 100 % noir, aucun liseré */
    pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,.9) 6%, rgba(0,0,0,.6) 28%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.1) 80%, rgba(0,0,0,0)) left 0 top 0 / 100% 26% no-repeat,
      linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,.9) 6%, rgba(0,0,0,.6) 28%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.1) 80%, rgba(0,0,0,0)) left 0 bottom 0 / 100% 26% no-repeat;
  }
  /* le premier projet commence net, juste sous la barre */
  .feuille:first-of-type::after {
    background:
      linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,.9) 6%, rgba(0,0,0,.6) 28%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.1) 80%, rgba(0,0,0,0)) left 0 bottom 0 / 100% 26% no-repeat;
  }
  .feuille-titre { z-index: 1; }

  /* --- Fondu très léger sur les bords de l'écran --- */
  #fondu-bureau {
    position: fixed;
    inset: 0;
    z-index: 45;               /* sous la barre du haut (50) et la feuille ouverte (90) */
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
    background:
      linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.6) 25%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.1) 80%, rgba(0,0,0,0)) left 0 top var(--barre, 65px) / 100% 80px no-repeat,
      linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.6) 25%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.1) 80%, rgba(0,0,0,0)) left 0 bottom 0 / 100% 110px no-repeat,
      linear-gradient(to right, rgba(0,0,0,.7), rgba(0,0,0,.4) 30%, rgba(0,0,0,.15) 65%, rgba(0,0,0,0)) left 0 top 0 / 40px 100% no-repeat,
      linear-gradient(to left, rgba(0,0,0,.7), rgba(0,0,0,.4) 30%, rgba(0,0,0,.15) 65%, rgba(0,0,0,0)) right 0 top 0 / 40px 100% no-repeat;
  }
  #fondu-bureau.visible { opacity: 1; }

  /* --- Projet ouvert (plein écran, fond noir) --- */
  #feuille-ouverte {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: #000;
    color: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.16, 1, .3, 1), visibility 0s .55s;
  }
  #feuille-ouverte.ouverte {
    visibility: visible;
    transform: translateY(0);
    transition: transform .55s cubic-bezier(.16, 1, .3, 1), visibility 0s 0s;
  }

  .fo-barre {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding: 10px 16px 18px;
    background: linear-gradient(#000 60%, rgba(0, 0, 0, 0));
  }
  .fo-poignee {
    width: 44px; height: 5px; border-radius: 3px;
    background: rgba(255, 255, 255, .3);
    margin-top: 4px;
  }
  .fo-fermer {
    position: absolute;
    right: 14px; top: 8px;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid #3655FA;
    background: rgba(0, 0, 0, .4);
    color: #3655FA;
    font-size: 1.1rem;
    cursor: pointer;
  }

  .fo-corps { padding: 0 20px 36px; }
  .fo-titre {
    font: 800 min(6vw, 1.8rem)/1.1 "Syne", "Montserrat", sans-serif;
    letter-spacing: .03em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    color: #3655FA;
    margin: 0 0 18px;
  }
  .fo-principale {
    display: block;
    width: 100%;
    max-height: 60vh;
    object-fit: cover;
    margin-bottom: 24px;
  }
  .fo-texte {
    font: 400 0.95rem/1.6 "Montserrat", sans-serif;
    color: #fff;
    max-width: 60ch;
    margin: 0 0 28px;
  }
  .fo-texte a { color: #3655FA; text-decoration: underline; word-break: break-all; }

  /* Galerie droite, la suivante dépasse à droite = scroll horizontal */
  .fo-galerie {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 20px;
    margin: 0 -20px 30px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    scrollbar-width: none;
  }
  .fo-galerie::-webkit-scrollbar { display: none; }
  .fo-galerie img {
    flex: 0 0 78%;
    scroll-snap-align: start;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  /* un peu d'air derrière la dernière image */
  .fo-galerie::after { content: ""; flex: 0 0 10px; }

  /* passer au projet précédent / suivant : sans cadre, juste le texte */
  .fo-nav { display: flex; justify-content: space-between; gap: 16px; }
  .fo-nav button {
    flex: 1;
    padding: 14px 0;
    border: 0;
    background: transparent;
    color: #3655FA;
    font: 600 0.85rem/1.3 "Montserrat", sans-serif;
    cursor: pointer;
  }
  .fo-nav button:first-child { text-align: left; }
  .fo-nav button:last-child { text-align: right; }
}

/* ==========================================================
   DESKTOP – titres de projets (liste à gauche) en Syne
   Au survol / projet actif : le titre grandit, s'épaissit (contour bleu)
   et passe de 50 % à 100 % d'opacité.
   ========================================================== */
@media (min-width: 768px) {
  /* La liste occupe environ 1/4 de la largeur de l'écran.
     Taille liée à la largeur ET à la hauteur : les 15 titres tiennent toujours à l'écran. */
  .sidebar-titres-projets {
    left: clamp(20px, 2.4vw, 56px) !important;
    max-width: 25vw;
    font-size: clamp(.78rem, min(1.4vw, 2.6vh), 2.5rem);   /* taille de la liste : environ 10 % plus petite qu'avant */
    gap: .3em !important;
    padding: 0 !important;
  }

  .sidebar-titres-projets .titre-projet-nav {
    position: relative;
    font-family: "Syne", "Montserrat", sans-serif !important;
    font-weight: 800 !important;
    font-size: 1em !important;          /* = taille de la liste (voir ci-dessus) */
    line-height: 1.05 !important;
    white-space: normal !important;     /* les titres longs passent sur 2 lignes */
    text-align: left !important;
    letter-spacing: .03em !important;   /* constant : ne change JAMAIS au survol (sinon le texte se réorganise) */
    text-transform: uppercase !important;
    opacity: .5 !important;
    padding: 0 !important;
    transform-origin: left center;
    -webkit-text-stroke: 0 currentColor;   /* aucun contour au repos ; il apparaît (bleu) au survol */
    transition: opacity .5s ease,
                transform .5s cubic-bezier(.2, .8, .2, 1),
                -webkit-text-stroke-width .5s ease,
                -webkit-text-stroke-color .5s ease !important;
  }


  /* survol + projet actif : on garde l'effet d'origine, en plus marqué */
  .sidebar-titres-projets .titre-projet-nav:hover,
  .sidebar-titres-projets .titre-projet-nav.actif {
    opacity: 1 !important;
    /* uniquement des transformations : la largeur du texte ne change pas,
       donc aucun saut de ligne au survol */
    transform: scale(1.3);              /* le corps du titre grandit nettement (sans décalage) */
    -webkit-text-stroke-color: #3655FA;
    -webkit-text-stroke-width: .022em;  /* léger gain de graisse, proportionnel à la taille du titre (≈ .5 px) ; au-delà, les lettres se collent */
  }
}

/* ==========================================================
   DESKTOP – glisser-déposer des feuilles (bureau-drag.js)
   ========================================================== */
@media (min-width: 1024px) {
  /* Curseurs dessinés pour le site (ronds jaune flash #F7FF00, sans contour, « + » transparent découpé dans le rond) :
     Les trois ont EXACTEMENT la même taille (rond de 20 px, hotspot au centre 12 12) :
     - rond   : curseur par défaut
     - zoom   : même rond avec un « + » transparent, sur une image zoomable
     - saisi  : même rond pendant qu'on déplace une feuille */
  body.bureau-drag {
    --curseur-rond: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212.0%22 cy=%2212.0%22 r=%2210%22 fill=%22%23F7FF00%22/%3E%3C/svg%3E") 12 12, auto;
    --curseur-zoom: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23F7FF00%22 fill-rule=%22evenodd%22 d=%22M2.0 12.0a10 10 0 1 0 20 0a10 10 0 1 0 -20 0zM10.85 7.60L13.15 7.60L13.15 10.85L16.40 10.85L16.40 13.15L13.15 13.15L13.15 16.40L10.85 16.40L10.85 13.15L7.60 13.15L7.60 10.85L10.85 10.85z%22/%3E%3C/svg%3E") 12 12, zoom-in;
    --curseur-saisi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212.0%22 cy=%2212.0%22 r=%2210%22 fill=%22%23F7FF00%22/%3E%3C/svg%3E") 12 12, grabbing;
  }

  /* curseur par défaut partout (liens, titres, texte...), sur les écrans à souris */
  body.bureau-drag,
  body.bureau-drag * {
    cursor: var(--curseur-rond) !important;
  }

  /* sur une image zoomable : le rond grandit et un « + » blanc apparaît */
  body.bureau-drag:not(.drag-en-cours) .diapositive-projet.actif .image-principale-conteneur,
  body.bureau-drag:not(.drag-en-cours) .diapositive-projet.actif .image-additionnelle-conteneur,
  body.bureau-drag:not(.drag-en-cours) .diapositive-projet.actif .image-principale-conteneur img,
  body.bureau-drag:not(.drag-en-cours) .diapositive-projet.actif .image-additionnelle-conteneur img {
    cursor: var(--curseur-zoom) !important;
  }

  body.bureau-drag .diapositive-projet.actif .element-architectural {
    touch-action: none;
  }
  body.bureau-drag .element-architectural img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
  }

  /* pendant le glisser : le rond « saisi » partout, même hors de la feuille */
  html body.bureau-drag.drag-en-cours,
  html body.bureau-drag.drag-en-cours * {
    cursor: var(--curseur-saisi) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* la feuille attrapée se détache de la table */
  body.bureau-drag .element-architectural.en-drag {
    box-shadow: 0 28px 70px rgba(0, 0, 0, .6) !important;
  }
}

/* ==========================================================
   DESKTOP – cache la mosaïque d'origine
   Ton code en fait des images flottantes (les « feuilles ») et tente de cacher
   l'ancienne grille, mais la règle « .mosaique-projet { display: grid !important } »
   de ta feuille de style l'emporte : les images apparaissaient en double, fixes.
   ========================================================== */
@media (min-width: 768px) {
  .diapositive-projet .conteneur-description-projet .mosaique-projet {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feuille, #feuille-ouverte { transition-duration: .01s !important; }
}


/* ---------- 2. AMÉLIORATIONS ---------- */

/* ==========================================================
   AMÉLIORATIONS UX – proposition à tester
   À charger APRÈS bureau-mobile.css. Pour comparer avec/sans :
   il suffit de retirer ce fichier (et ameliorations.js) de l'index.html.
   ========================================================== */

:root {
  --bleu: #3655FA;           /* le bleu de la marque, partout (une seule nuance) */
  --jaune: #F7FF00;
}

/* ---------- 1. Contraste ---------- */
/* liens de la barre du haut : même bleu que les titres */
html body nav a.lien-nav {
  color: var(--bleu) !important;
}

/* ---------- 2. Focus visible au clavier ---------- */
html body a:focus-visible,
html body button:focus-visible,
html body [tabindex]:focus-visible {
  outline: 2px solid var(--jaune) !important;
  outline-offset: 4px !important;
}
html body .feuille:focus-visible {
  outline-offset: -4px !important;
}

/* ---------- 3. Ce que tu fais, dès le premier écran ---------- */
html body nav a.nom-site {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
}
html body nav a.nom-site::after {
  content: "Designer graphique & artiste 3D";
  /* même typo que les descriptifs de projets : Montserrat, graisse normale, blanc */
  font: 400 .72rem/1 "Montserrat", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  white-space: nowrap;
}
@media (min-width: 768px) {
  html body nav a.nom-site::after { font-size: .85rem; }
}
/* assez de place : le slogan se place à la suite de « Khanh Robert », sur la même ligne */
@media (min-width: 1024px) {
  html body nav a.nom-site {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 18px !important;
  }
}

/* ---------- 4. Liste de titres : contraste des titres inactifs ---------- */
@media (min-width: 768px) {
  /* inactif : même bleu que le titre actif, mais plus pâle (60 %) pour que le titre survolé / sélectionné ressorte
     (60 % ≈ 2:1 de contraste ; 85 % ≈ 3:1 si tu veux plus lisible, mais moins d'écart avec le titre actif) */
  html body .sidebar-titres-projets .titre-projet-nav {
    color: var(--bleu) !important;
    opacity: .6 !important;
    transition: opacity .5s ease,
                transform .5s cubic-bezier(.2, .8, .2, 1),
                -webkit-text-stroke-width .5s ease,
                -webkit-text-stroke-color .5s ease !important;
  }
  /* survol / actif : opacité pleine (en plus : agrandissement et contour, voir bureau-mobile.css) */
  html body .sidebar-titres-projets .titre-projet-nav:hover,
  html body .sidebar-titres-projets .titre-projet-nav.actif {
    color: var(--bleu) !important;
    opacity: 1 !important;
  }
}

/* ---------- 6. Coordonnées cliquables (Contact) : même aspect que le texte, sans soulignement ---------- */
html body #contact p a {
  color: #fff !important;
  text-decoration: none !important;   /* pas de soulignement */
}

/* ---------- 7. Mouvement réduit : on coupe les animations décoratives ---------- */
@media (prefers-reduced-motion: reduce) {
  .animate-pulse,
  #loading-screen span { animation: none !important; }
  html { scroll-behavior: auto !important; }
}