/* ============================================================
   IN MY ELEMENT — L'ÉLÉMENT · le socle visuel
   Charge APRÈS pages.css, AVANT element-coupe.css / element-carte.css.

   Quatre choses seulement :
     · LE SILENCE     — le creux qui rend le coup suivant possible
     · L'HEURE        — la maison parle la première, à voix basse
     · LE FEUILLET    — la phrase du visiteur, mise en page
     · LE FIL         — la couture qui descend toute la page
   ============================================================ */

/* ============================================================
   02 · LE SILENCE
   74 vh d'ivoire, un filet, une phrase. Rien d'autre.
   Pas de flèche, pas d'indice de scroll : c'est le sujet.
   ============================================================ */
.silence{
  background:var(--paper);
  min-height:74vh;
  display:grid;
  place-items:center;
  padding:var(--s-6) var(--gutter);
}
.silence__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1.8rem,3.4vw,3rem);
  max-width:34ch;
  text-align:center;
}
.silence__rule{
  display:block;width:1px;height:88px;
  background:linear-gradient(180deg,transparent,var(--gold) 42%,var(--gold) 58%,transparent);
  opacity:.75;
}
.silence__line{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.4rem);
  line-height:1.42;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}

/* ============================================================
   01 · L'HEURE DE LA MAISON
   Sous le hero, à gauche, en petit. Jamais une bannière,
   jamais une modale. Le premier mot de la page, murmuré.
   ============================================================ */
.house-time{
  margin:clamp(1.4rem,2.6vw,2.2rem) 0 0;
  font-family:var(--mono);
  font-size:max(.68rem,var(--fs-xs));
  letter-spacing:.1em;
  color:var(--ime-green);          /* sur cuir noir — 10,6:1 */
  opacity:.86;
}
.house-time[hidden]{display:none !important}

/* ============================================================
   13 · LE FEUILLET
   La phrase du visiteur ne disparaît pas : elle se recompose,
   se date, et reçoit une référence.
   ============================================================ */
[data-carnet-out]{margin-top:clamp(1.6rem,3vw,2.4rem)}
[data-carnet-out][hidden]{display:none !important}

.carnet-page{
  margin:0;
  max-width:min(100%,42rem);
  padding:clamp(1.4rem,2.6vw,2rem) clamp(1.4rem,2.8vw,2.2rem);
  border:1px solid rgba(180,137,76,.34);
  background:rgba(244,241,233,.035);
}
.carnet-page__line{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.25rem,2.6vw,1.85rem);
  line-height:1.45;
  color:var(--paper);
  text-wrap:pretty;
}
.carnet-page__meta{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-3);flex-wrap:wrap;
  margin-top:clamp(1rem,2vw,1.4rem);
  padding-top:.9rem;
  border-top:1px solid rgba(180,137,76,.2);
}
.carnet-page__ref{
  font-size:max(.66rem,var(--fs-xs));
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ime-green);
  opacity:.8;
}
.carnet-page__take{
  appearance:none;background:none;
  border:1px solid var(--ime-green);
  color:var(--ime-green);
  font-family:var(--mono);
  font-size:max(.66rem,var(--fs-xs));
  letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem 1.1rem;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.carnet-page__take:hover,
.carnet-page__take:focus-visible{
  background:var(--ime-green);
  color:var(--noir);
}
.carnet-page__privacy{
  margin:clamp(1rem,2vw,1.4rem) 0 0;
  font-family:var(--mono);
  font-size:max(.62rem,var(--fs-xs));
  letter-spacing:.1em;
  color:var(--paper);
  opacity:.44;
}

/* le feuillet frais se pose, il n'apparaît pas */
@media(prefers-reduced-motion:no-preference){
  .carnet-page.is-fresh{animation:carnetSettle .72s cubic-bezier(.86,0,.07,1) both}
}
@keyframes carnetSettle{
  from{opacity:0;transform:translateY(14px) rotate(-.35deg)}
  to  {opacity:1;transform:none}
}

/* ============================================================
   LES PLANS DE L'UNIVERS
   Les photos de la maison défilent en fondu enchaîné, comme un
   plan-séquence — jamais une seule image figée. Elles sont
   montrées TELLES QUELLES : aucun duotone, aucun filtre, aucune
   teinte. Le cuir vert doit rester le vert du cuir.
   ============================================================ */
.uni-fig[data-montage] .montage__slide{
  position:absolute;inset:0;
  opacity:0;transition:opacity 1.5s var(--ease);
}
.uni-fig[data-montage] .montage__slide.is-on{opacity:1}
.uni-fig[data-montage] .montage__slide img{
  width:100%;height:100%;object-fit:cover;
  filter:none;                     /* aucun traitement : la photo telle quelle */
  transform:none;
}
/* le voile vert du reveal reste au-dessus des plans */
.uni-fig[data-montage] .wipe{z-index:2}

/* Mouvement réduit : on garde le premier plan, sans défilement. */
@media(prefers-reduced-motion:reduce){
  .uni-fig[data-montage] .montage__slide{transition:none}
}

/* ============================================================
   LE FIL
   Un filet or descend dans la marge gauche sur toute la page.
   À chaque chapitre il fait un point de couture. Au pied, il
   noue son arrêt. On n'a pas scrollé une page : on a assisté
   à l'assemblage d'une pièce.

   Décoratif et strictement additif : il ne prend aucune place
   dans le flux, ne capte aucun clic, et disparaît sous 1200 px
   (là où la lisière FX disparaît déjà).
   ============================================================ */
.thread{
  position:fixed;
  left:max(18px,calc((100vw - var(--maxw)) / 2 - 34px));
  top:0;bottom:0;width:1px;
  z-index:3;pointer-events:none;
  background:rgba(180,137,76,.16);
}
.thread__run{
  position:absolute;left:0;top:0;width:100%;
  transform-origin:top;transform:scaleY(0);
  background:linear-gradient(180deg,var(--gold),rgba(180,137,76,.45));
}
/* le point de couture — un tiret oblique posé à chaque chapitre */
.thread__stitch{
  position:absolute;left:50%;width:11px;height:1px;
  margin-left:-5.5px;
  background:var(--gold);
  transform:translateY(-50%) rotate(-38deg) scaleX(0);
  transform-origin:center;
  opacity:.5;
  transition:transform .5s cubic-bezier(.86,0,.07,1),opacity .5s linear;
}
.thread__stitch.is-sewn{transform:translateY(-50%) rotate(-38deg) scaleX(1);opacity:1}
/* le nœud d'arrêt, au pied */
.thread__knot{
  position:absolute;left:50%;width:7px;height:7px;
  margin-left:-3.5px;border-radius:50%;
  border:1px solid var(--gold);
  background:var(--noir);
  transform:translateY(-50%) scale(0);
  transition:transform .6s cubic-bezier(.86,0,.07,1);
}
.thread__knot.is-tied{transform:translateY(-50%) scale(1)}

@media(max-width:1199px){ .thread{display:none} }
@media(prefers-reduced-motion:reduce){
  .thread__run{transform:scaleY(1)}
  .thread__stitch{transform:translateY(-50%) rotate(-38deg) scaleX(1);opacity:1;transition:none}
  .thread__knot{transform:translateY(-50%) scale(1);transition:none}
}