/* L'univers de Laure : ses matières, son carnet, son signe, son tampon.
 * Toutes les textures viennent de ses œuvres (www/univers/, découpées dans Soleil inversé, Inspirales,
 * Passage, Souffles et Respiration) — jamais d'image d'ambiance générique (cahier des charges, Palette).
 * Sur le kraft, seul l'encre passe le contraste 4,5 : taupe et ocre y sont remplacés par l'encre.
 */
:root {
  --kraft: url("../univers/kraft.webp");
  --carnet: url("../univers/carnet-oiseaux.webp");
  --signe: url("../univers/signe.png");
  --signe-large: url("../univers/signe-soleil.webp");
  --tampon: url("../univers/tampon.png");
  --or: url("../univers/or.webp");
  --sarcelle: url("../univers/sarcelle.webp");
  --color-ink-soft: #4A3F37; /* légendes sur le kraft */
  --shadow-page: 0 2.2rem 3.5rem -2rem color-mix(in srgb, var(--color-ink) 45%, transparent), 0 1px 3px color-mix(in srgb, var(--color-ink) 14%, transparent);
  /* bord de papier déchiré, pour les échantillons */
  --deckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6'/%3E%3C/filter%3E%3Crect x='4' y='4' width='92' height='117' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ---------- Sommaire : son signe marque la rubrique où l'on se trouve ---------- */
.rail__nav a::before {
  left: -1.75em; top: 50%;
  width: 1.2em; height: 0.62em; margin-top: -0.34em;
  background: var(--color-accent);
  -webkit-mask: var(--signe) center / contain no-repeat;
  mask: var(--signe) center / contain no-repeat;
  transform: translateY(0.25em); opacity: 0;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out);
}
.rail__nav a[aria-current="page"]::before, .rail__nav a:hover::before { transform: none; opacity: 1; }
.rail__nav a:hover:not([aria-current])::before { opacity: 0.45; }

/* ---------- En-têtes : l'échantillon de matière épinglé à côté du titre ---------- */
.head:has(.swatch) { grid-template-columns: minmax(0, 1fr) 8.5rem; column-gap: var(--space-2xl); max-width: 72rem; }
.head:has(.swatch) > * { grid-column: 1; }
.head > .swatch { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: 0.8rem; }
.swatch { position: relative; margin: 0; display: grid; gap: var(--space-xs); rotate: 1.8deg; filter: drop-shadow(0 0.6rem 0.7rem color-mix(in srgb, var(--color-ink) 22%, transparent)); transition: rotate 0.9s var(--ease-out); }
.swatch:hover { rotate: 0deg; }
.swatch::before { content: ""; position: absolute; z-index: 1; left: 50%; top: -0.2rem; width: 0.5rem; height: 0.5rem; margin-left: -0.25rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 40%, transparent); }
.swatch__paint { display: block; aspect-ratio: 4 / 5; background: var(--matiere) center / cover; -webkit-mask: var(--deckle) 0 0 / 100% 100% no-repeat; mask: var(--deckle) 0 0 / 100% 100% no-repeat; }
.swatch figcaption { font-size: var(--text-xs); line-height: 1.35; color: var(--color-taupe); }
@media (max-width: 760px) {
  .head:has(.swatch) { grid-template-columns: minmax(0, 1fr); }
  .head > .swatch { grid-column: 1; grid-row: auto; display: flex; align-items: center; gap: var(--space-md); rotate: 0deg; margin-top: 0; }
  .swatch__paint { width: 3.4rem; flex: none; }
  .swatch::before { left: 1.7rem; }
}

/* ---------- Le carnet : double page de kraft, la pliure au milieu ---------- */
.carnet__spread { --color-taupe: var(--color-ink-soft); position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); color: var(--color-ink); box-shadow: var(--shadow-page); }
.carnet__spread > * { position: relative; background: var(--kraft) center / cover; }
/* pliure : ombre de part et d'autre du milieu */
.carnet__spread > :first-child::after, .carnet__spread > :last-child::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none;
}
.carnet__spread > :first-child::after { right: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--color-ink) 20%, transparent), transparent); }
.carnet__spread > :last-child::before { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--color-ink) 16%, transparent), transparent); }
.carnet__spread .more, .carnet__spread .link, .carnet__spread .meta { color: var(--color-ink); }

.carnet { margin: 0; display: grid; gap: var(--space-sm); max-width: 70rem; }
.carnet .carnet__spread { rotate: -0.6deg; }
.carnet__page { min-height: clamp(22rem, 38vw, 33rem); }
.carnet__page--l { background-image: var(--carnet); background-position: right top; }
.carnet__page--l::after { display: none; } /* la vraie pliure est dans le scan */
.carnet__page--r { display: grid; align-content: center; padding: clamp(2rem, 5vw, 4.5rem); }
.carnet blockquote { margin: 0; }
.carnet blockquote p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 0.9rem + 1.5vw, 2.4rem); line-height: 1.2; text-wrap: pretty; margin: 0; }
.carnet blockquote footer { margin-top: var(--space-lg); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; }
.carnet figcaption { font-size: var(--text-xs); color: var(--color-taupe); }
.carnet__sky { position: absolute; inset: 0; overflow: visible !important; }
.carnet .bird { width: 18px; height: 8px; }
.carnet .bird path { stroke-width: 2; }
@media (max-width: 760px) {
  .carnet .carnet__spread { grid-template-columns: minmax(0, 1fr); rotate: 0deg; }
  .carnet__page--l { position: absolute !important; inset: 0 0 auto; height: 8rem; min-height: 0; background-size: 140% auto; background-position: 30% 6%; }
  .carnet__page--l::after { display: none; }
  .carnet__page--r { padding-top: 8.5rem; background-image: linear-gradient(transparent 7rem, transparent), var(--kraft); }
  .carnet__page--r::before { display: none; }
}

/* Bio : la photo scotchée sur la page de gauche, le texte sur celle de droite */
.bio.carnet__spread { gap: 0; padding-top: 0; margin-top: var(--space-2xl); align-items: stretch; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
.bio.carnet__spread > .bio__photo { position: relative; top: auto; margin: 0; padding: clamp(2rem, 4vw, 4rem); }
.bio__pin { position: sticky; top: var(--space-xl); rotate: -1.4deg; }
.bio__pin [data-curtain] { box-shadow: 0 0.8rem 1.6rem -0.6rem color-mix(in srgb, var(--color-ink) 40%, transparent); }
.bio.carnet__spread > .bio__text { padding: clamp(2rem, 4vw, 4rem); }
.tape {
  position: absolute; z-index: 2; width: 5.5rem; height: 1.5rem;
  background: color-mix(in srgb, #F3EBDA 72%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 15%, transparent);
  -webkit-mask: var(--deckle) 0 0 / 100% 100% no-repeat; mask: var(--deckle) 0 0 / 100% 100% no-repeat;
}
.tape--a { left: -1.4rem; top: 0.6rem; rotate: -38deg; }
.tape--b { right: -1.4rem; bottom: 0.8rem; rotate: -36deg; }
@media (max-width: 860px) {
  .bio.carnet__spread { grid-template-columns: minmax(0, 1fr); }
  .bio.carnet__spread > :first-child::after, .bio.carnet__spread > :last-child::before { display: none; }
  .bio.carnet__spread > .bio__text { padding-top: var(--space-md); }
  .bio__pin { position: relative; top: auto; max-width: 22rem; margin-inline: auto; }
}

/* ---------- Toile de fond : la fin de chaque page est un décor peint qui descend des cintres ---------- */
.toile {
  position: relative; isolation: isolate; overflow: hidden;
  margin: var(--space-3xl) calc(var(--gutter) * -1) 0;
  min-height: clamp(26rem, 40vw, 34rem);
  padding: clamp(4rem, 8vw, 7rem) var(--gutter) 5rem;
  display: grid; align-content: center;
  color: var(--color-paper);
}
/* la porteuse : la perche à laquelle la toile est accrochée */
.toile::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 1px; background: var(--color-ink); }
.toile__fond {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-ink) 34%, transparent), color-mix(in srgb, var(--color-ink) 64%, transparent)),
    var(--sarcelle) center / cover;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.9s var(--ease-in-out);
}
.toile__signe {
  position: absolute; z-index: -1; right: 5%; top: 50%;
  width: clamp(13rem, 32vw, 28rem); aspect-ratio: 988 / 487;
  background: var(--or) center / cover;
  -webkit-mask: var(--signe-large) center / contain no-repeat; mask: var(--signe-large) center / contain no-repeat;
  opacity: 0; transform: translateY(calc(-50% + 2.5rem));
  transition: opacity 1.8s var(--ease-out) 1.1s, transform 2.6s var(--ease-out) 1s;
}
.toile__body { position: relative; z-index: 3; max-width: 40rem; opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease-out) 1.2s, transform 1s var(--ease-out) 1.2s; }
.toile.is-down .toile__fond { clip-path: inset(0 0 0 0); }
.toile.is-down .toile__signe { opacity: 0.95; transform: translateY(-50%); }
.toile.is-down .toile__body { opacity: 1; transform: none; }
.toile__title { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1.08; margin: 0 0 var(--space-md); text-wrap: balance; }
.toile__text { margin: 0; max-width: 32em; }
.toile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); }
.toile__mail { color: var(--color-paper); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-paper) 45%, transparent); overflow-wrap: anywhere; }
.toile__mail:hover { text-decoration-color: currentColor; }
.toile .btn--solid:hover { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); }
.toile__tampon { position: absolute; z-index: 3; right: var(--gutter); bottom: 1.4rem; width: 2.9rem; aspect-ratio: 190 / 262; background: var(--color-paper); -webkit-mask: var(--tampon) center / contain no-repeat; mask: var(--tampon) center / contain no-repeat; opacity: 0.85; }
.toile__cap { position: absolute; z-index: 3; left: var(--gutter); right: 5rem; bottom: 1.4rem; margin: 0; font-size: var(--text-xs); line-height: 1.4; color: var(--color-paper); opacity: 0.85; }
.toile + .foot { margin-top: 0; border-top: 0; }
.no-js .toile__fond { clip-path: none; }
.no-js .toile__signe { opacity: 0.95; transform: translateY(-50%); }
.no-js .toile__body { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .toile { padding-top: 10rem; align-content: start; }
  .toile__signe { right: var(--gutter); top: 2rem; width: min(13rem, 60vw); transform: translateY(1.5rem); }
  .toile.is-down .toile__signe, .no-js .toile__signe { transform: none; opacity: 0.8; }
}

/* ---------- Galerie : au survol, la vignette passe à une autre image du projet ---------- */
.show__alt { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 0.9s var(--ease-out); }
.show:hover .show__alt.is-ready { opacity: 1; }
.show__clip::after { z-index: 1; }

/* ---------- 404 ---------- */
.signe-404 { display: block; width: clamp(8rem, 20vw, 13rem); aspect-ratio: 988 / 487; background: var(--color-accent); -webkit-mask: var(--signe-large) center / contain no-repeat; mask: var(--signe-large) center / contain no-repeat; margin-bottom: var(--space-lg); }

@media (prefers-reduced-motion: reduce) {
  .toile__fond { clip-path: none; }
  .toile__signe, .toile.is-down .toile__signe { opacity: 0.95; transform: translateY(-50%); }
  .toile__body { opacity: 1; transform: none; }
  .carnet__sky { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .toile__signe, .toile.is-down .toile__signe { transform: none; }
}