/* ==========================================================================
   Chez Fleurette — mini-jeu « Peindre la poterie » (bloc d'accueil, option).
   Chargé sur l'accueil seulement. Tant que le bloc d'accueil n'est pas réglé
   sur « jeu », rien n'est construit (assets/atelier.js) : ces règles ne
   s'appliquent alors à rien.

   Tout est bâti sur les jetons de la charte (--paper, --ink, --hair, --r-lg,
   --shadow-md…) : le décor de la carte suit donc les trois ambiances sans une
   seule règle en double. Seules exceptions volontaires, en fin de fichier :
   la CÉRAMIQUE elle-même reste blanche à trait sombre dans toutes les
   ambiances — c'est du biscuit non cuit, il ne change pas de couleur la nuit.
   ========================================================================== */

.at { width: 100%; display: flex; justify-content: center; }

.at__card {
  width: min(430px, 100%);
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 12px;
  background: var(--paper);
  border: 1.5px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* ── En-tête : intitulé + avancement ─────────────────────────────────────── */
.at__head { display: flex; align-items: flex-start; gap: 10px; }
.at__headtxt { display: flex; flex-direction: column; min-width: 0; }
.at__kicker {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: .14em; color: var(--blue);
}
.at__title {
  font-family: var(--font-head); font-size: 1.5rem; line-height: 1.1; color: var(--ink);
}
.at__count {
  margin-left: auto; flex: 0 0 auto; align-self: center;
  font: 700 .78rem/1 var(--font-ui); letter-spacing: .06em;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--cream); color: var(--ink-soft);
}

/* ── Le plan de travail ──────────────────────────────────────────────────── */
.at__stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  /* Vertical : le doigt fait défiler la page comme partout ailleurs.
     Horizontal : il peint. Aucun piège à scroll sur mobile. */
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  border-radius: var(--r-md);
}
@supports not (aspect-ratio: 1 / 1) { .at__stage { min-height: 320px; } }
.at__stage:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* Un pinceau suit le curseur : il remplace la flèche, il EST le curseur. */
.at__stage--brosse { cursor: none; }

.at-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ── La poterie ──────────────────────────────────────────────────────────── */
.at-ombre { fill: rgba(58, 39, 36, .10); }
.at-cru   { fill: #fff; stroke: none; }
.at-trait { fill: none; stroke: #3a2724; stroke-width: 3.2; stroke-linejoin: round; }
.at-det   { pointer-events: none; }

/* Le coup de pinceau : le tracé est un pointillé d'une seule longueur
   (pathLength=100), on ramène son décalage de 100 à 0 — la couleur se dépose
   d'un bout à l'autre du geste, au lieu d'apparaître d'un bloc. */
.at-z {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  /* Un tiret de longueur nulle garde ses bouts ARRONDIS : à décalage 100, une
     zone « pas encore peinte » laisserait un point de couleur sur le biscuit.
     L'opacité coupe court — elle bascule d'un coup au début du geste, puis
     c'est bien le décalage du pointillé qui dépose la couleur. */
  opacity: 0;
  transition: stroke-dashoffset .58s cubic-bezier(.42, 0, .2, 1);
}
.at-z.is-on { opacity: 1; stroke-dashoffset: 0; }
/* Pièce déjà finie (vignette de l'étagère) : peinte, sans rejouer l'animation */
.at-svg--fini .at-z { opacity: 1; stroke-dashoffset: 0; transition: none; }

/* Arrivée de la pièce suivante, petit saut de fin, envol vers l'étagère */
@media (prefers-reduced-motion: no-preference) {
  .at-svg--entre { animation: at-entre .42s cubic-bezier(.2, .8, .3, 1.1) both; }
  .at-svg--pop   { animation: at-pop .46s cubic-bezier(.3, 1.4, .5, 1) both; }
}
.at-svg--vole {
  transition: transform .6s cubic-bezier(.5, -0.05, .3, 1.1), opacity .26s ease .36s;
  will-change: transform;
}
@keyframes at-entre { from { opacity: 0; transform: translateY(26px) scale(.92); } }
@keyframes at-pop {
  40% { transform: scale(1.07) rotate(-2.5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ── Le pinceau qui suit le curseur ──────────────────────────────────────── */
.at__brush {
  position: absolute; left: 0; top: 0; width: 42px; height: 42px;
  margin: -6px 0 0 -8px;                       /* la pointe tombe sur le curseur */
  pointer-events: none; opacity: 0; transition: opacity .15s ease;
  filter: drop-shadow(0 4px 6px rgba(58, 39, 36, .25));
}
.at__brush.is-on { opacity: 1; }

/* ── Étincelles de fin de pièce ──────────────────────────────────────────── */
.at__spark {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  animation: at-spark .8s ease-out forwards;
}
@keyframes at-spark {
  0%   { transform: translate(0, 0) scale(.4); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.1); opacity: 0; }
}

/* ── L'étagère : cinq places, et l'avancement se lit d'un coup d'œil ─────── */
.at__shelf {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  padding: 0 4px 8px;
  border-bottom: 6px solid var(--cream-deep);
  border-radius: 0 0 3px 3px;
}
.at__slot {
  aspect-ratio: 1 / 1; border-radius: 10px;
  border: 1.5px dashed var(--hair);
  display: grid; place-items: center; overflow: hidden;
}
@supports not (aspect-ratio: 1 / 1) { .at__slot { min-height: 44px; } }
.at__slot.is-full { border-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .at__slot.is-full { animation: at-pose .4s cubic-bezier(.3, 1.5, .5, 1) both; }
}
@keyframes at-pose { from { transform: translateY(-10px) scale(.7); opacity: 0; } }

/* ── Consigne + annonce lecteur d'écran ──────────────────────────────────── */
.at__hint {
  font-family: var(--font-hand); font-size: 1.05rem; text-align: center;
  color: var(--ink-soft); transition: opacity .3s ease; min-height: 1.4em;
}
.at__hint--off { opacity: 0; }
.at__live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Écran de fin ────────────────────────────────────────────────────────── */
.at__fin {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 18px; background: var(--paper); border-radius: var(--r-md);
}
@media (prefers-reduced-motion: no-preference) {
  .at__fin { animation: at-entre .4s ease both; }
}
.at__fin-emo { font-size: 2.4rem; line-height: 1; }
.at__fin-t { font-family: var(--font-head); font-size: 1.9rem; color: var(--red); line-height: 1.1; }
.at__fin-p { font-size: .98rem; color: var(--ink-soft); max-width: 30ch; }
.at__cta { margin-top: 6px; }
.at__again {
  border: none; background: none; color: var(--blue-dark); cursor: pointer;
  font: 700 .9rem var(--font-ui); text-decoration: underline;
  padding: 8px 10px; min-height: 40px;
}

/* ── Écrans étroits ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .at__card { width: min(400px, 100%); }
}
@media (max-width: 420px) {
  .at__title { font-size: 1.3rem; }
  .at__fin-t { font-size: 1.55rem; }
  .at__hint { font-size: .95rem; }
}

/* ── Ambiance « Veillée d'atelier » (nuit) ───────────────────────────────────
   La carte suit déjà les jetons sombres. On rattrape ce qui ne doit PAS
   suivre : la céramique reste blanche (c'est du biscuit), et son ombre portée
   devient une lueur plutôt qu'une tache noire sur du brun. */
html[data-theme="veillee"] .at-ombre { fill: rgba(253, 237, 213, .07); }
html[data-theme="veillee"] .at__count { background: rgba(253, 237, 213, .10); }
html[data-theme="veillee"] .at__shelf { border-bottom-color: rgba(253, 237, 213, .22); }
html[data-theme="veillee"] .at__fin-t { color: var(--pink); }
html[data-theme="veillee"] .at__again { color: var(--pink); }
html[data-theme="veillee"] .at__kicker { color: var(--pink); }

/* ── Ambiance « Affiche du kiosque » (sérigraphie) ───────────────────────────
   Trait plus gras, ombres dures, angles resserrés : la poterie devient un
   aplat imprimé, comme le reste de l'affiche. */
html[data-theme="affiche"] .at__card { border: 3px solid var(--ink); }
html[data-theme="affiche"] .at-trait { stroke-width: 4.4; }
html[data-theme="affiche"] .at-ombre { fill: rgba(58, 39, 36, .22); }
html[data-theme="affiche"] .at__slot { border-width: 2px; border-color: rgba(58, 39, 36, .45); }
html[data-theme="affiche"] .at__shelf { border-bottom: 8px solid var(--ink); border-radius: 0; }
html[data-theme="affiche"] .at__count { border: 2px solid var(--ink); }
html[data-theme="affiche"] .at__brush { filter: none; }