/* ============================================================
   COMPONENTS.CSS — Cartel curseur, Lightbox, Overlays (nav)
   Studio Antoine Ozen
   ============================================================ */


/* ════════════════════════════════════════
   LOADER — Intro de chargement
════════════════════════════════════════ */
#loader {
  position:        fixed;
  inset:           0;
  background:      var(--bg);
  z-index:         9000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  transition:      opacity 0.8s ease, visibility 0.8s ease;
}

#loader.done {
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
}

#loader-canvas {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
}

#loader-logo {
  position:              relative;
  z-index:               2;
  font-family:           var(--ff-display);
  font-size:             clamp(18px, 2.5vw, 26px);
  font-weight:           500;
  line-height:           0.75;
  letter-spacing:        0;
  color:                 var(--fg);
  opacity:               0;
  transform:             translateY(12px);
  transition:            opacity 1s ease, transform 1s ease;
  display:               grid;
  grid-template-columns: repeat(7, auto);
  justify-items:         center;
  gap:                   0.04em;
}

#loader-logo.on {
  opacity:   1;
  transform: translateY(0);
}

#loader-bar-wrap {
  position:   relative;
  z-index:    2;
  margin-top: 2.5rem;
  width:      120px;
  height:     0.5px;
  background: var(--bdr);
  transition: opacity 0.5s ease;
}

#loader-bar {
  height:     100%;
  width:      0%;
  background: var(--fg);
  transition: width 0.05s linear;
  position:   relative;
}

#loader-bar::after {
  content:       '';
  position:      absolute;
  right:         -3px;
  top:           -3px;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--fg);
  box-shadow:    0 0 10px color-mix(in srgb, var(--fg) 70%, transparent);
}

#loader-label {
  position:       relative;
  z-index:        2;
  margin-top:     1rem;
  font-size:      8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--fg2);
  transition:     opacity 0.5s ease;
}

/* Page principale — transition de révélation */
.pw {
  transition: opacity 0.9s ease;
}


/* ════════════════════════════════════════
   CARTEL CURSEUR
   Apparaît au survol d'un projet,
   ancré au curseur avec une ligne de connexion
════════════════════════════════════════ */
#cartel {
  position:       fixed;
  pointer-events: none;
  z-index:        9980;
  opacity:        0;
  transition:     opacity 0.2s ease;
}

#cartel.on { opacity: 1; }

/* Boîte du cartel */
.ci {
  background:  var(--bg);
  border:      0.5px solid var(--bdr);
  padding:     0.9rem 1.1rem;
  width:       195px;
  box-shadow:  0 6px 28px rgba(17, 17, 14, 0.1);
  position:    relative;
}

body.dark .ci {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

/* Trait de connexion entre le curseur et le cartel */
.ci::before {
  content:    "";
  position:   absolute;
  top:        50%;
  left:       -18px;
  width:      18px;
  height:     0.5px;
  background: var(--fg2);
  transform:  translateY(-50%);
}

/* Cartel flippé à gauche du curseur : trait à droite */
#cartel.flip .ci::before {
  left:  auto;
  right: -18px;
}

/* Numéro */
.cn {
  font-family:   var(--ff-display);
  font-size:     14px;
  font-style:    italic;
  color:         var(--fg2);
  margin-bottom: 0.35rem;
}

/* Catégorie + point coloré */
.cc {
  display:        flex;
  align-items:    center;
  gap:            5px;
  font-size:      12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color:          var(--fg2);
  margin-bottom:  0.35rem;
}

.cd {
  width:        4px;
  height:       4px;
  border-radius: 50%;
  flex-shrink:  0;
}

/* Titre du projet */
.ctit {
  font-family:   var(--ff-display);
  font-size:     16px;
  font-weight:   400;
  line-height:   1.1;
  color:         var(--fg);
  margin-bottom: 0.4rem;
}

/* Hint "cliquer" */
.ch {
  font-size:      12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--fg2);
  opacity:        0.5;
  border-top:     0.5px solid var(--bdr);
  padding-top:    0.5rem;
}


/* ════════════════════════════════════════
   LIGHTBOX
   S'ouvre au clic sur un projet :
   image pleine + description + nav prev/next
   Fond du site = flouté (via .pw.blur)
════════════════════════════════════════ */
#lb {
  position:       fixed;
  inset:          0;
  z-index:        2000;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.45s ease;
}

#lb.on {
  opacity:        1;
  pointer-events: all;
}

/* Fond semi-transparent */
#lb-bg {
  position:   absolute;
  inset:      0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(2px);
  cursor:     none;
}

body:not(.dark) #lb-bg {
  background: rgba(244, 241, 234, 0.6);
}

/* Panel principal */
#lb-panel {
  position:   relative;
  z-index:    2;
  width:      min(820px, 92vw);
  transform:  scale(0.88) translateY(24px);
  transition: transform 0.5s var(--ease);
}

#lb.on #lb-panel {
  transform: scale(1) translateY(0);
}

/* Barre du haut (numéro + bouton fermer) */
.lbtop {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   0.8rem;
}

.lbn {
  font-family: var(--ff-display);
  font-size:   15px;
  font-style:  italic;
  color:       var(--fg2);
}

/* Croix de fermeture — deux traits fins, pivote au survol */
.lbcl {
  position:   relative;
  width:      40px;
  height:     40px;
  margin:     -10px -10px -10px 0;   /* zone de clic large, croix alignée au bord */
  background: none;
  border:     none;
  color:      var(--fg2);
  cursor:     none;
  transition: color 0.2s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.lbcl::before,
.lbcl::after {
  content:    '';
  position:   absolute;
  top:        50%;
  left:       50%;
  width:      22px;
  height:     1px;
  background: currentColor;
  transform:  translate(-50%, -50%) rotate(45deg);
}

.lbcl::after { transform: translate(-50%, -50%) rotate(-45deg); }

.lbcl:hover {
  color:     var(--fg);
  transform: rotate(90deg);
}

/* Image */
.lbiw {
  position:    relative;
  width:       100%;
  overflow:    hidden;
  transition:  height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  max-height:  75vh;
  touch-action: pan-y;          /* le swipe horizontal est géré en JS */
}

/* Bande d'images côte à côte, déplacée en translateX (façon Instagram).
   La hauteur du cadre est calculée en JS selon l'image affichée. */
.lb-strip {
  display:     flex;
  width:       100%;
  height:      100%;
  will-change: transform;
}

.lb-strip img {
  display:        block;
  flex:           0 0 100%;
  width:          100%;
  height:         100%;
  object-fit:     cover;        /* image très haute : recadrée au centre */
  user-select:    none;
  pointer-events: none;
}

/* Flèches navigation images internes */
.lb-iarr {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         3;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      rgba(10, 10, 10, 0.38);
  border:          0.5px solid rgba(255, 255, 255, 0.18);
  color:           rgba(255, 255, 255, 0.85);
  cursor:          none;
  transition:      background 0.2s ease, color 0.2s ease;
}

.lb-iarr:hover {
  background: rgba(10, 10, 10, 0.65);
  color:      #fff;
}

body:not(.dark) .lb-iarr {
  background: rgba(244, 241, 234, 0.55);
  border:     0.5px solid rgba(0, 0, 0, 0.12);
  color:      rgba(20, 20, 18, 0.8);
}

body:not(.dark) .lb-iarr:hover {
  background: rgba(244, 241, 234, 0.85);
  color:      rgba(20, 20, 18, 1);
}

.lb-iarr-l { left:  12px; }
.lb-iarr-r { right: 12px; }

/* Compteur d'images */
#lb-img-counter {
  position:       absolute;
  bottom:         10px;
  left:           50%;
  transform:      translateX(-50%);
  font-family:    var(--ff-body);
  font-size:      8px;
  letter-spacing: 0.22em;
  color:          rgba(255, 255, 255, 0.8);
  background:     rgba(10, 10, 10, 0.38);
  padding:        3px 10px;
  pointer-events: none;
}

body:not(.dark) #lb-img-counter {
  color:      rgba(20, 20, 18, 0.75);
  background: rgba(244, 241, 234, 0.6);
}

/* Zone info — dégradé fond clair qui remonte sur l'image */
.lbinfo {
  position:    relative;
  padding:     2rem 2rem 1.8rem;
  background:  linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg) 55%, transparent) 22%,
    color-mix(in srgb, var(--bg) 90%, transparent) 50%,
    var(--bg) 100%
  );
  margin-top: -3.5rem; /* remonte sur l'image */
}

/* Grille catégorie + meta */
.lbig {
  display:     grid;
  grid-template-columns: 1fr auto;
  gap:         2rem;
  align-items: start;
  margin-top:  3.5rem;
}

.lbcat {
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-size:      12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--fg2);
  margin-bottom:  0.5rem;
}

.lbcd {
  width:        4px;
  height:       4px;
  border-radius: 50%;
}

.lbtit {
  font-family:   var(--ff-display);
  font-size:     clamp(22px, 3vw, 36px);
  font-weight:   400;
  line-height:   1.05;
  color:         var(--fg);
  margin-bottom: 0.6rem;
}

.lbdesc {
  font-size:   16px;
  line-height: 1.85;
  color:       var(--fg2);
  max-width:   420px;
}

.lbmeta {
  font-size:    15px;
  line-height:  1.9;
  color:        var(--fg2);
  text-align:   right;
  white-space:  pre-line;
}

/* Navigation prev / next */
.lbnav {
  display:    flex;
  gap:        0.8rem;
  margin-top: 1.2rem;
}

.lbbtn {
  background: none;
  border:     0.5px solid var(--bdr);
  padding:    5px 14px;
  font-size:  13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:      var(--fg2);
  cursor:     none;
  transition: all 0.2s;
}

.lbbtn:hover {
  border-color: var(--fg);
  color:        var(--fg);
}


/* ════════════════════════════════════════
   OVERLAYS — Formations, À propos, Contact
   S'ouvrent depuis les liens nav
════════════════════════════════════════ */

/* Photo portrait dans l'overlay À propos */
.ovphoto {
  margin:          1.6rem 0 1.8rem;
  overflow:        hidden;
  aspect-ratio:    1774 / 2502;
  border:          0.5px solid var(--bdr);
}

.ovphoto img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
  display:         block;
}
.ov {
  position:       fixed;
  inset:          0;
  z-index:        1500;
  display:        flex;
  align-items:    center;
  justify-content: center;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.4s ease;
}

.ov.on {
  opacity:        1;
  pointer-events: all;
}

/* Fond flou */
.ovbg {
  position:         absolute;
  inset:            0;
  background:       rgba(244, 241, 234, 0.88);
  backdrop-filter:  blur(14px);
  cursor:           none;
}

body.dark .ovbg {
  background: rgba(13, 13, 11, 0.9);
}

/* Panel centré */
.ovp {
  position:   relative;
  z-index:    2;
  width:      min(620px, 90vw);
  background: var(--bg);
  border:     0.5px solid var(--bdr);
  padding:    3rem;
  max-height: 82vh;
  overflow-y: auto;
}

/* Panel À propos — pleine hauteur, plus large, scrollbar masquée */
.ovp--about {
  width:           min(800px, 94vw);
  height:          100vh;
  max-height:      100vh;
  border-top:      none;
  border-bottom:   none;
  scrollbar-width: none;
}

.ovp--about::-webkit-scrollbar { display: none; }

@media (max-width: 760px) {
  .ovp--about { padding: 4.5rem 1.5rem 2rem; }
}

/* Version ordinateur : texte plus grand, photo réduite — meilleur rapport d'échelle */
@media (min-width: 761px) {
  .ovp--about .ovphoto { width: 55%; }
  .ovp--about .ovbod   { font-size: 19px; line-height: 1.8; }

  /* Philosophie, Formations, Contact : fond prolongé en haut et en bas,
     comme À propos (largeur d'origine conservée) */
  #ov-ph .ovp,
  #ov-f  .ovp,
  #ov-c  .ovp {
    height:          100vh;
    max-height:      100vh;
    border-top:      none;
    border-bottom:   none;
    scrollbar-width: none;
  }

  #ov-ph .ovp::-webkit-scrollbar,
  #ov-f  .ovp::-webkit-scrollbar,
  #ov-c  .ovp::-webkit-scrollbar { display: none; }

  /* Contenu centré verticalement dans la page.
     margin auto (et non justify-content) : si le texte dépasse,
     le haut reste accessible au scroll. */
  #ov-ph .ovp,
  #ov-f  .ovp,
  #ov-c  .ovp,
  .ovp--about {
    display:        flex;
    flex-direction: column;
  }

  #ov-ph .ovp > .ovey,
  #ov-f  .ovp > .ovey,
  #ov-c  .ovp > .ovey,
  .ovp--about > .ovey        { margin-top: auto; }

  #ov-ph .ovp > :last-child,
  #ov-f  .ovp > :last-child,
  #ov-c  .ovp > :last-child,
  .ovp--about > :last-child  { margin-bottom: auto; }

  #ov-ph .ovp > *,
  #ov-f  .ovp > *,
  #ov-c  .ovp > *,
  .ovp--about > *            { flex-shrink: 0; }
}

/* Bouton fermer */
.ovcl {
  position:       absolute;
  top:            1.5rem;
  right:          1.5rem;
  background:     none;
  border:         none;
  font-size:      13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--fg2);
  cursor:         none;
  transition:     color 0.2s;
}

.ovcl:hover { color: var(--fg); }

/* Typographie overlay */
.ovey {
  font-size:      13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--fg2);
  margin-bottom:  1.2rem;
}

.ovtit {
  font-family:   var(--ff-display);
  font-size:     clamp(26px, 4vw, 42px);
  font-weight:   400;
  line-height:   1.05;
  margin-bottom: 1.5rem;
}

.ovtit em {
  font-style: italic;
  color:      var(--fg2);
}

.ovsep {
  width:         28px;
  height:        1px;
  background:    var(--fg2);
  opacity:       0.3;
  margin-bottom: 1.8rem;
}

.ovbod {
  font-size:     16px;
  line-height:   1.85;
  color:         var(--fg2);
  margin-bottom: 1.5rem;
}

/* Textes justifiés (Philosophie, À propos), sans césure.
   Supprimer ce bloc pour revenir au texte aligné à gauche. */
#ov-ph .ovbod,
#ov-r .ovbod {
  text-align:      justify;
  hyphens:         manual;
  -webkit-hyphens: manual;
  text-wrap:       pretty;   /* coupures de ligne plus équilibrées */
}

/* Cards (formations) */
.ovcards { display: flex; flex-direction: column; }

.ovcard {
  padding:       1.4rem 0;
  border-bottom: 0.5px solid var(--bdr);
}

.ovcard:last-child { border-bottom: none; }

/* Bouton contact en bas d'un overlay (ex. Formations) */
.ovcta { margin-top: 1.6rem; }

.ovcn {
  font-family:   var(--ff-display);
  font-size:     14px;
  font-style:    italic;
  color:         var(--fg2);
  margin-bottom: 0.4rem;
}

.ovct {
  font-family:   var(--ff-display);
  font-size:     19px;
  font-weight:   400;
  margin-bottom: 0.4rem;
}

.ovcd {
  font-size:   15px;
  line-height: 1.7;
  color:       var(--fg2);
}

.ovtag {
  display:        inline-block;
  margin-top:     0.5rem;
  font-size:      12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding:        3px 8px;
  border:         0.5px solid var(--bdr);
  color:          var(--fg2);
}

/* Liens plan du site */
.pslink {
  color:           var(--fg);
  text-decoration: none;
  transition:      opacity 0.2s;
}

.pslink:hover { opacity: 0.6; }

/* Rows (recherches) */
.ovrows { display: flex; flex-direction: column; }

.ovrow {
  padding:       1.4rem 0;
  border-bottom: 0.5px solid var(--bdr);
  display:       grid;
  grid-template-columns: auto 1fr;
  gap:           1.5rem;
  align-items:   start;
}

.ovrow:last-child { border-bottom: none; }

.ovrn {
  font-family: var(--ff-display);
  font-size:   14px;
  font-style:  italic;
  color:       var(--fg2);
  padding-top: 2px;
}

.ovrt {
  font-family:   var(--ff-display);
  font-size:     18px;
  font-weight:   400;
  margin-bottom: 0.3rem;
}

.ovrd {
  font-size:   15px;
  line-height: 1.7;
  color:       var(--fg2);
}

/* Contact */
.ctg {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0.8rem;
  margin-bottom:         1.5rem;
}

.cti {
  padding: 1.2rem;
  border:  0.5px solid var(--bdr);
}

.ctl {
  font-size:      12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--fg2);
  margin-bottom:  0.4rem;
}

.ctv {
  font-family: var(--ff-display);
  font-size:   16px;
  font-weight: 400;
}

/* Formulaire */
.cf { display: flex; flex-direction: column; }

.cff {
  border:       none;
  border-bottom: 0.5px solid var(--bdr);
  background:   none;
  padding:      0.75rem 0;
  font-family:  var(--ff-body);
  font-size:    16px;
  font-weight:  300;
  color:        var(--fg);
  outline:      none;
  width:        100%;
  transition:   border-color 0.2s;
  resize:       none;
}

.cff::placeholder {
  color:     var(--fg2);
  font-size: 15px;
}

.cff:focus { border-color: var(--fg); }

.cfs {
  margin-top:     1.3rem;
  align-self:     flex-start;
  background:     none;
  border:         0.5px solid var(--bdr);
  padding:        6px 16px;
  font-size:      13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--fg2);
  cursor:         none;
  transition:     all 0.2s;
}

.cfmsg {
  margin-top: 0.75rem;
  font-size:  13px;
  min-height: 1em;
}

.cfmsg-ok  { color: var(--fg); }
.cfmsg-err { color: #c0392b; }

.cfs:hover {
  border-color: var(--fg);
  color:        var(--fg);
}