/* ================================================================
   ALLSTORE — INTERACTIONS SIGNATURE
   ================================================================
   Principe (issu de la recherche 2026) : ce qui marque un visiteur,
   ce n'est pas une intro qu'il subit — c'est de le rendre ACTEUR,
   avec une identité qui vit pendant toute la visite.

   Cinq briques, toutes en amélioration progressive (si le JS ne
   tourne pas, le site reste parfaitement normal et utilisable) :
     1. le portant du hero se colorie à l'encre sous la souris
     2. le dessin se fait au scroll (doodles et icônes vraiment tracés)
     3. un fil d'encre se trace en marge, synchronisé au scroll
     4. curseur crayon
     5. soulignés manuscrits qui se tracent au survol des produits
   Aucun écran d'attente : la page est utilisable dès la 1re seconde.
   ================================================================ */

/* ── 1. Le portant qu'on colorie ──────────────────────────────── */
.hero-art { position: relative; }

/* Calque gris posé UNIQUEMENT sur le portant (le reste du site reste en
   couleur : on ne freine jamais la lecture des produits).
   C'est un canvas contenant la version grise du dessin, que la souris
   GOMME — bien plus rapide qu'un masque recalculé à chaque mouvement. */
.ink-layer {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: var(--wonky-md);
  transform: rotate(0.8deg);
  overflow: hidden;
  transition: opacity .6s ease;
}
.ink-layer canvas { display: block; width: 100%; height: 100%; }
.ink-layer.spent { opacity: 0; }          /* assez colorié -> on libère tout */

/* Renfort écrit : n'apparaît qu'après quelques secondes sans réaction.
   L'amorce de couleur (posée par JS) reste le vrai signal. */
.ink-hint {
  position: absolute; z-index: 3; left: 50%; bottom: 12px;
  transform: translateX(-50%) rotate(-1.2deg) translateY(6px);
  font-family: var(--f-body); font-size: 16px; color: var(--ink);
  background: rgba(255,255,255,.92); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(17,17,17,.16);
  padding: 6px 14px; border-radius: var(--wonky-sm);
  pointer-events: none; opacity: 0;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.ink-hint.in { opacity: 1; transform: translateX(-50%) rotate(-1.2deg) translateY(0); }
.ink-hint.gone { opacity: 0; }

/* ── 2. Le dessin se fait au scroll ───────────────────────────── */
/* état de départ posé par JS uniquement -> jamais de contenu bloqué */
.sk-in { opacity: 0; transform: translateY(14px); }
.sk-in.sk-on {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
/* Les titres s'écrivent de la gauche vers la droite.
   ATTENTION : l'état d'attente est une OPACITÉ, jamais un clip-path —
   un clip à 100% ramène la largeur à zéro et l'IntersectionObserver
   considère alors l'élément comme jamais visible (il ne se révélerait
   jamais). Le découpage n'est appliqué qu'au moment de l'écriture, par JS. */
.sk-write { opacity: 0; }
.sk-write.sk-on { opacity: 1; }
/* Doodles et icônes remplacés par leur tracé vectoriel.
   IMPORTANT : ne pas forcer `display:block` sur svg.doodle — cette règle
   (spécificité 0,1,1) l'emporterait sur `.doodle-arrow-cta{display:none}`
   posée par site.css en media query (spécificité 0,1,0), et réafficherait
   le doodle sur mobile en débordement horizontal. Un doodle est toujours
   `position:absolute`, qui blockifie déjà l'élément — la règle était
   superflue en plus d'être dangereuse. `.info-icon` n'est pas positionné
   en absolu : il a besoin de la sienne. */
svg.info-icon { display: block; }
svg.doodle path, svg.info-icon path { vector-effect: non-scaling-stroke; }

/* ── 3. Fil d'encre en marge, synchronisé au scroll ───────────────
   Il ne s'affiche que si la marge libre est assez large pour l'accueillir
   sans jamais chevaucher le contenu (la mise en page fait 1440 px max
   avec 24 px de gouttière). En dessous, on s'en passe. */
.sk-thread {
  position: fixed; top: 0; width: 16px; height: 100vh;
  z-index: 5; pointer-events: none; display: none;
  left: calc((100vw - 1456px) / 2 - 16px);
}
.sk-thread svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (min-width: 1520px) { .sk-thread { display: block; } }

/* ── 4. Curseur crayon ────────────────────────────────────────── */
html.sk-pencil, html.sk-pencil a, html.sk-pencil button { cursor: none; }
/* on rend la main sur tout ce qui se saisit ou se sélectionne */
html.sk-pencil input, html.sk-pencil textarea, html.sk-pencil select,
html.sk-pencil [contenteditable] { cursor: auto; }
.sk-cursor {
  position: fixed; left: 0; top: 0; z-index: 9999; width: 46px;
  pointer-events: none; will-change: transform;
  transform-origin: 1.15% 97.85%;   /* la pointe du crayon */
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,.18));
  transition: width .18s ease, opacity .2s ease;
}
.sk-cursor.press { width: 54px; }     /* au survol d'un élément cliquable */
.sk-cursor.hide { opacity: 0; }

/* NB : pas de souligné ajouté au survol des cartes — site.css en pose
   déjà un (trait ondulé rouge sous le nom du produit). En ajouter un
   second ferait doublon. */

/* ── Accessibilité : on coupe tout ce qui bouge ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .ink-layer, .ink-hint, .sk-thread, .sk-cursor { display: none !important; }
  html.sk-pencil, html.sk-pencil a, html.sk-pencil button { cursor: auto; }
  .sk-in, .sk-write { opacity: 1 !important; transform: none !important;
    -webkit-clip-path: none !important; clip-path: none !important; }
}

/* le sparkle vit sur la bande noire : son PNG était inversé par filtre,
   le tracé vectoriel prend directement la couleur du texte (blanc) */
svg.doodle-sparkle-band { filter: none; }