/* ============================================================
   Styles partagés — Anemca Art
   Tout le reste de la mise en page passe par Tailwind.
   ============================================================ */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Apparition au défilement. Porté par .js : si le JS échoue,
   le contenu reste visible au lieu de disparaître. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

.rule { letter-spacing: .28em; }

.piece-img { transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.piece-card:hover .piece-img { transform: scale(1.04); }

select#langSelect { background-image: none; }

/* Lien de navigation de la page courante : couleur ET soulignement
   (l'information ne repose pas sur la couleur seule) */
.nav-current {
  color: #7A2038;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

/* Focus clavier : anneau bordeaux, visible uniquement au clavier.
   Sur les fonds bordeaux (formulaire, pied de page), anneau rosé. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #7A2038;
  outline-offset: 3px;
  border-radius: 4px;
}
.bg-winedark :focus-visible,
footer :focus-visible { outline-color: #C98494; }

/* Bouton du menu mobile : hamburger <-> croix */
#menuBtn .icon-close { display: none; }
#menuBtn[aria-expanded="true"] .icon-open { display: none; }
#menuBtn[aria-expanded="true"] .icon-close { display: inline; }

/* ============================================================
   Transitions entre pages (View Transitions, navigation entre
   documents). L'en-tête reste en place, le contenu se fond.
   Navigateurs sans prise en charge : navigation normale.
   ============================================================ */
@view-transition { navigation: auto; }
#siteHeader { view-transition-name: site-header; }
::view-transition-old(root) { animation: vtOut .28s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vtIn .45s cubic-bezier(0,0,.2,1) both; }
@keyframes vtOut { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(10px); } }

/* ============================================================
   ARBRE DU HERO (page d'accueil)
   Trois sortes d'éléments :
     .limb  trait qui se dessine (racines, contours du fût, branches)
     .pad   coussin de feuillage qui s'étale depuis le fût
     .fade  élément qui apparaît en fondu (lavis du fût, aiguilles)
   Chacun est « intro » (au chargement) ou « onscroll » (au défilement).
   ============================================================ */
#heroTree { opacity: 0; transition: opacity 1.2s ease; }
#heroTree.is-ready { opacity: 1; }

#heroTree .limb {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
#heroTree .fade,
#heroTree .pad { opacity: 0; }
#heroTree .pad {
  transform: scaleX(.10) scaleY(.55);
  transform-box: view-box;
  transform-origin: var(--ox) var(--oy);
}

/* temps 1 : au chargement */
#heroTree.is-drawing .limb.intro {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur) cubic-bezier(.32,.03,.2,1) var(--delay);
}
#heroTree.is-drawing .fade.intro {
  opacity: 1;
  transition: opacity 1.2s ease var(--delay);
}
#heroTree.is-drawing .pad.intro {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease var(--delay), transform 1.5s cubic-bezier(.2,.7,.2,1) var(--delay);
}

/* temps 2 : au défilement */
#heroTree .limb.onscroll.shown {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--sdur, 1.1s) cubic-bezier(.32,.03,.2,1) var(--sdelay, 0s);
}
#heroTree .fade.onscroll.shown {
  opacity: 1;
  transition: opacity 1s ease var(--sdelay, 0s);
}
#heroTree .pad.onscroll.shown {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease var(--sdelay, 0s), transform 1.4s cubic-bezier(.2,.7,.2,1) var(--sdelay, 0s);
}

/* Fût, racines et branches en plusieurs segments : vitesse constante,
   pour que les segments s'enchaînent comme un seul trait qui pousse. */
#heroTree.is-drawing .limb.intro.lin,
#heroTree .limb.onscroll.lin.shown { transition-timing-function: linear; }

#heroTree.no-anim .limb,
#heroTree.no-anim .fade,
#heroTree.no-anim .pad { transition: none; }

/* Le vent : chaque demi-plateau oscille très légèrement autour de son
   point d'attache sur le fût. Grand écran seulement. */
@keyframes treeSway {
  from { transform: rotate(var(--a0, -.4deg)); }
  to   { transform: rotate(var(--a1, .25deg)); }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  #heroTree .sway {
    transform-box: view-box;
    transform-origin: var(--ox) var(--oy);
    animation: treeSway var(--sw, 11s) ease-in-out infinite alternate;
  }
}

/* Indicateur « faire défiler » */
.scroll-hint { animation: hintNudge 2.4s ease-in-out 4; }
@keyframes hintNudge {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  #heroTree { transition: none; }
  #heroTree .limb { stroke-dashoffset: 0; transition: none; }
  #heroTree .fade, #heroTree .pad { opacity: 1; transform: none; transition: none; }
  .scroll-hint { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ============================================================
   Accueil : la fin de page coule du bordeaux du hero vers la crème,
   puis revient au bordeaux du pied de page, sans arête visible.
   ============================================================ */
.flow-cream {
  background: linear-gradient(180deg,
    #3B121D 0,
    #EDE5D9 240px,
    #EDE5D9 calc(100% - 240px),
    #3B121D 100%);
}

/* ============================================================
   En-tête de l'accueil tant qu'il flotte sur le hero : texte clair.
   Seule la barre du haut est concernée (le menu mobile déroulant,
   sur fond crème, garde ses couleurs).
   ============================================================ */
#siteHeader.on-dark > div:first-child a:not(.bg-wine),
#siteHeader.on-dark #menuBtn { color: #FAF7F2; }
#siteHeader.on-dark > div:first-child nav a { color: rgba(250, 247, 242, .88); }
#siteHeader.on-dark > div:first-child nav a:hover,
#siteHeader.on-dark .text-wine { color: #E3AEBB; }
#siteHeader.on-dark #langSelect { color: #FAF7F2; border-color: rgba(250, 247, 242, .45); }
#siteHeader.on-dark #langSelect option { color: #26211C; }
#siteHeader.on-dark :focus-visible { outline-color: #E3AEBB; }

/* Bouton « Voir la boutique » sur fond sombre : crème plutôt que
   bordeaux sur bordeaux. */
#siteHeader.on-dark a.bg-wine { background: #FAF7F2; color: #3B121D; }
#siteHeader.on-dark a.bg-wine:hover { background: #E3AEBB; }

/* ============================================================
   EN-TÊTE DE PAGE (pages intérieures)
   Même langage que l'accueil : bordeaux en haut, qui coule vers la
   couleur de la section suivante, sans arête. Le texte reste dans la
   partie pleine (padding calculé sur --flow).
   ============================================================ */
.page-band {
  --flow: 130px;          /* hauteur du fondu bordeaux -> crème */
  --gap: 120px;           /* place sous le texte pour le rameau et les racines */
  --to: #FAF7F2;
  background:
    radial-gradient(ellipse 70% 55% at 80% 0%, rgba(201, 132, 148, .18), transparent 70%),
    linear-gradient(180deg, #3B121D 0, #3B121D calc(100% - var(--flow)), var(--to) 100%);
}
.page-band.flow-sand { --to: #EDE5D9; }
.band-pad { padding-bottom: calc(var(--flow) + var(--gap)); }
@media (min-width: 768px) {
  .page-band { --flow: 200px; --gap: 64px; }
}

/* Passage vers le pied de page : la page coule vers le bordeaux */
.flow-to-wine { height: 180px; background: linear-gradient(180deg, #FAF7F2, #3B121D); }
.flow-to-wine.from-sand { background: linear-gradient(180deg, #EDE5D9, #3B121D); }

/* ---- Tracé du rameau et des racines (assets/band.js) ---- */
.band-art { opacity: 0; transition: opacity 1.2s ease; }
.band-art.is-ready { opacity: 1; }
.band-art .limb {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
}
.band-art .fade, .band-art .pad { opacity: 0; }
.band-art .pad {
  transform: scaleX(.1) scaleY(.55);
  transform-box: view-box;
  transform-origin: var(--ox) var(--oy);
}
.band-art.is-drawing .limb.intro {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur) cubic-bezier(.32,.03,.2,1) var(--delay);
}
.band-art.is-drawing .limb.intro.lin { transition-timing-function: linear; }
.band-art.is-drawing .fade.intro { opacity: 1; transition: opacity 1.2s ease var(--delay); }
.band-art.is-drawing .pad.intro {
  opacity: 1; transform: none;
  transition: opacity 1s ease var(--delay), transform 1.5s cubic-bezier(.2,.7,.2,1) var(--delay);
}
.band-art .limb.onscroll.shown { stroke-dashoffset: 0; transition: stroke-dashoffset var(--sdur, 1s) cubic-bezier(.32,.03,.2,1) var(--sdelay, 0s); }
.band-art .limb.onscroll.lin.shown { transition-timing-function: linear; }
.band-art .label { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 15px; fill: #EDE5D9; fill-opacity: .7; }
.band-art .fade.onscroll.shown { opacity: 1; transition: opacity 1s ease var(--sdelay, 0s); }
.band-art .pad.onscroll.shown {
  opacity: 1; transform: none;
  transition: opacity .9s ease var(--sdelay, 0s), transform 1.4s cubic-bezier(.2,.7,.2,1) var(--sdelay, 0s);
}
.band-art.no-anim .limb, .band-art.no-anim .fade, .band-art.no-anim .pad { transition: none; }

/* ============================================================
   PHOTOS FONDUES DANS LA PAGE
   Aucun bord visible : chaque photo se dissout dans la couleur qui
   l'entoure (crème, sable ou bordeaux) grâce à un masque en dégradé.
   Pas de cadre, pas de forme, pas de retouche des couleurs.
   ============================================================ */
.melt { margin: 0; position: relative; }
.melt-media {
  --fx: 16%;               /* fondu à gauche et à droite */
  --fy: 14%;               /* fondu en haut et en bas */
  position: relative; overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--fx), #000 calc(100% - var(--fx)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 var(--fx), #000 calc(100% - var(--fx)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
          mask-composite: intersect;
}
.melt-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.melt--portrait .melt-media { --fx: 12%; --fy: 20%; }
.melt-cap {
  margin-top: .4rem; padding: 0 12%;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-size: 1.08rem; line-height: 1.4;
  color: #3A332B;
}

/* Les trois photos de l'atelier se chevauchent et se fondent l'une
   dans l'autre : une seule bande continue. */
.melt-strip { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 640px) {
  .melt-strip { flex-direction: row; align-items: flex-start; gap: 0; }
  .melt-strip > .melt { flex: 1 1 0; min-width: 0; }
  .melt-strip > .melt + .melt { margin-left: -6%; }
  .melt-strip .melt-media { --fx: 20%; }
}

/* apparition : une mise au point lente plutôt qu'un volet */
.js .melt.reveal { opacity: 1; transform: none; }
.js .melt .melt-media {
  opacity: 0; filter: blur(10px); transform: scale(1.035);
  transition: opacity 1.4s ease, filter 1.8s cubic-bezier(.2,.7,.2,1), transform 2s cubic-bezier(.2,.7,.2,1);
  transition-delay: inherit;
}
.js .melt.is-visible .melt-media { opacity: 1; filter: none; transform: none; }
.js .melt .melt-cap { opacity: 0; transition: opacity 1s ease .7s; }
.js .melt.is-visible .melt-cap { opacity: 1; }

/* ---- Cartes de la boutique : même volet + passe-partout au survol ---- */
.js .piece-card .piece-img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(.2,.7,.2,1) var(--d, 0s), transform .8s cubic-bezier(.2,.7,.3,1);
}
.js .piece-card.is-visible .piece-img { clip-path: inset(0 0 0 0); }
.piece-mat {
  position: absolute; inset: 14px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(250, 247, 242, 0);
  transform: scale(1.04);
  transition: border-color .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.piece-card:hover .piece-mat,
.piece-card:focus-within .piece-mat { border-color: rgba(250, 247, 242, .8); transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .band-art { transition: none; }
  .band-art .limb { stroke-dashoffset: 0; transition: none; }
  .band-art .fade, .band-art .pad { opacity: 1; transform: none; transition: none; }
  .js .piece-card .piece-img { clip-path: none; transform: none; transition: none; }
  .js .melt .melt-media { opacity: 1; filter: none; transform: none; transition: none; }
  .js .melt .melt-cap { opacity: 1; transition: none; }
  [data-parallax] { transform: none !important; }
}