/* ============================================================
   SECTIONS.CSS — Galerie projets, À propos (legacy), Footer
   Studio Antoine Ozen
   ============================================================ */


/* ════════════════════════════════════════
   SÉPARATEUR DE SECTIONS — filet éditorial
════════════════════════════════════════ */
.sep {
  display:         flex;
  justify-content: center;
  align-items:     center;
  height:          12vh;
  min-height:      70px;
  max-height:      120px;
}

.sep::before {
  content:    '';
  display:    block;
  width:      28px;
  height:     0.5px;
  background: var(--fg2);
}


/* ════════════════════════════════════════
   TÊTE DE PAGE — écran d'accueil
   Dessins d'objets (PNG transparents) qui défilent
   en carrousel continu (voir SKETCHES dans gallery.js).
   Mode nuit : négatif via invert().
════════════════════════════════════════ */
.lead {
  position:    relative;
  overflow:    hidden;
  height:      100vh;           /* écran d'accueil : seuls logo, nav et dessins */
  height:      100svh;
  display:     flex;
  align-items: center;          /* dessins centrés verticalement */
}

.lead-track {
  display:       flex;
  align-items:   center;
  gap:           3vw;
  padding-right: 3vw;           /* = gap, pour une boucle régulière */
  width:         max-content;
  will-change:   transform;
}

/* Défilement + glisser au doigt / à la souris gérés en JS (buildLead).
   pan-y : sur mobile, le doigt peut toujours faire défiler la page. */
.lead {
  touch-action:        pan-y;
  user-select:         none;
  -webkit-user-select: none;
}

.lead-img {
  flex:           0 0 auto;
  height:         30vh;
  height:         30svh;        /* stable quand la barre d'adresse mobile bouge */
  width:          auto;
  user-select:    none;
  pointer-events: none;
  transition:     filter var(--ease-theme);
}

body.dark .lead-img { filter: invert(1); }

/* Indication de scroll — mot discret + trait fin parcouru par un
   segment qui descend, comme un trait de crayon. Positionné en absolu :
   ne modifie pas la mise en page. Disparaît dès qu'on fait défiler. */
.lead-hint {
  position:        absolute;
  left:            50%;
  bottom:          clamp(1.5rem, 5svh, 3rem);
  transform:       translateX(-50%);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.8rem;
  padding:         0.5rem 1rem;   /* zone de clic confortable */
  color:           var(--fg2);
  text-decoration: none;
  cursor:          none;
  transition:      color 0.3s ease, opacity 0.6s ease;
}

/* Apparition en douceur, une fois le loader terminé (~3,2 s, loader.js) */
.lead-hint > * {
  opacity:   0;
  animation: lead-hint-in 1.4s ease 4s forwards;
}

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

.lead-hint.gone {
  opacity:        0;
  pointer-events: none;
}

.lead-hint-txt {
  font-family:    var(--ff-body);
  font-size:      8px;
  letter-spacing: 0.3em;
  padding-left:   0.3em;          /* compense l'espacement final, centrage optique */
  text-transform: uppercase;
}

.lead-hint-line {
  position:   relative;
  width:      0.5px;
  height:     42px;
  background: var(--bdr);
  overflow:   hidden;
}

.lead-hint-line::after {
  content:    '';
  position:   absolute;
  left:       0;
  top:        0;
  width:      100%;
  height:     100%;
  background: currentColor;
  transform:  translateY(-100%);
  animation:  lead-hint-draw 2.4s var(--ease) infinite;
}

@keyframes lead-hint-in {
  to { opacity: 1; }
}

@keyframes lead-hint-draw {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .lead-hint-line::after { animation: none; transform: none; }
}


/* ════════════════════════════════════════
   GALERIE PROJETS — quinconce aéré
   Grandes images décalées en alternance,
   beaucoup d'espace entre elles. Titre en dessous.
   Clic → cartel détaillé (lightbox).
════════════════════════════════════════ */
.pjouter {
  max-width: 1750px;
  margin:    0 auto;
  padding:   0 var(--gx);
}

.pjwrap { padding-top: 1rem; }

.pj {
  cursor:        none;
  margin-bottom: clamp(7rem, 12vw, 13rem);
}

.pj:last-child { margin-bottom: 4rem; }

/* Champ vide en tête de galerie — avant le premier projet */
.pj-empty { pointer-events: none; margin-bottom: 0; }

/* Fondu au scroll (opacité pilotée par initScrollFade dans gallery.js) */
.pj-fade { opacity: 0; will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  .pj-fade { opacity: 1 !important; transform: none !important; }
}

/* Motif à 3 variantes qui alterne largeur + alignement */
.pj:nth-child(3n+1) { width: 60%; margin-right: auto; }
.pj:nth-child(3n+2) { width: 38%; margin-left:  auto; margin-right: 6vw; margin-top: -2rem; }
.pj:nth-child(3n)   { width: 55%; margin-left:  34%;  }

.pj-img {
  position:     relative;
  overflow:     hidden;
  aspect-ratio: 3 / 2;
}

.pj:nth-child(3n+2) .pj-img { aspect-ratio: 4 / 5; }
.pj:nth-child(3n)   .pj-img { aspect-ratio: 4 / 3; }

.pj-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 1s var(--ease);
}

.pj:hover .pj-img img { transform: scale(1.025); }

.pj-cap {
  display:      flex;
  align-items:  center;
  gap:          0.7rem;
  padding-top:  1.3rem;
}

.pj-n {
  font-family: var(--ff-display);
  font-size:   13px;
  font-style:  italic;
  color:       var(--fg2);
}

.pj-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--fg);
  flex-shrink:   0;
}

.pj-tit {
  font-family: var(--ff-display);
  font-size:   clamp(19px, 2.1vw, 28px);
  font-weight: 400;
}


/* ════════════════════════════════════════
   À PROPOS — legacy (non utilisé actuellement,
   le contenu vit dans l'overlay via ov-r)
════════════════════════════════════════ */
.ap {
  display:               grid;
  grid-template-columns: 0.9fr 1fr;
  border-bottom:         0.5px solid var(--bdr);
}

/* Photo portrait */
.apv {
  position:     relative;
  overflow:     hidden;
  border-right: 0.5px solid var(--bdr);
  min-height:   480px;
  background:   var(--fg3);
}

.apv img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.9s var(--ease);
}

.ap:hover .apv img { transform: scale(1.03); }

/* Contenu texte */
.apc {
  padding:        4rem 3.5rem;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            1.8rem;
}

.apl {
  font-size:      13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--fg2);
}

.apn {
  font-family:  var(--ff-display);
  font-size:    clamp(30px, 3.8vw, 52px);
  font-weight:  400;
  line-height:  1.0;
}

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

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

/* Faits clés */
.apfl {
  display:        flex;
  flex-direction: column;
  margin-top:     0.4rem;
}

.apf {
  display:       flex;
  gap:           1.2rem;
  padding:       0.75rem 0;
  border-bottom: 0.5px solid var(--bdr);
  font-size:     14px;
}

.apf:first-child { border-top: 0.5px solid var(--bdr); }

.apfd {
  font-size:      11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--fg2);
  min-width:      90px;
  padding-top:    2px;
  flex-shrink:    0;
}

.apfv { color: var(--fg); }


/* ════════════════════════════════════════
   FOOTER
   Pleine largeur, gouttière var(--gx) —
   aligne le contenu droit (bouton, liens) sur la colonne du nav.
════════════════════════════════════════ */
.ffull {
  width:   100%;
  padding: 0 var(--gx);
}

footer {
  padding:    2.6rem 0 1.8rem;
  border-top: 0.5px solid var(--bdr);
}

/* Ligne haute : nom + bouton contact */
.fmain {
  display:         flex;
  flex-wrap:       wrap;
  gap:             1.4rem;
  justify-content: space-between;
  align-items:     center;
  padding-top:     0.6rem;
  padding-bottom:  2.2rem;
  margin-bottom:   1.6rem;
  border-bottom:   0.5px solid var(--bdr);
}

.factions {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            1rem;
}

.fsocial {
  display: grid;
  gap:     0.7rem;
}

.fsl {
  font-size:      12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align:     right;
  color:          var(--fg2);
}

.fsrow { display: flex; justify-content: flex-end; align-items: center; gap: 0.3rem; }

.fsoc {
  display:    flex;
  color:      var(--fg2);
  cursor:     none;
  transition: color 0.2s;
}

.fsoc svg { width: 34px; height: 34px; }

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

.fname {
  font-family:   var(--ff-display);
  font-size:     22px;
  font-weight:   400;
  margin-bottom: 0.25rem;
}

.fsub {
  font-size: 14px;
  color:     var(--fg2);
}

/* Bouton contact footer */
.fcta {
  border:         0.5px solid var(--bdr);
  padding:        10px 26px;
  font-family:    var(--ff-body);
  font-size:      13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--fg2);
  background:     none;
  cursor:         none;
  transition:     border-color 0.2s, color 0.2s;
}

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

/* Ligne basse : copyright + liens légaux */
.fbot {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.fc {
  font-size:      13px;
  letter-spacing: 0.08em;
  color:          var(--fg2);
}

.fl { display: flex; gap: 1.8rem; }

.fl a {
  font-size:      13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--fg2);
  text-decoration: none;
  transition:     color 0.2s;
}

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