/* Accueil · le problème et le tri (#probleme), puis la descente dans le produit (#features).
   Base = état final lisible (sans JS, « réduire les animations », écran bas). La classe .tri-anime (posée tôt par le script
   d'en-tête si le mouvement est permis) installe la scène collante ; sequence-tri.js la pilote. transform et opacity seulement. */

.tri {
  --tri-l: 360px; --tri-h: calc(var(--tri-l) / 3.4); /* au tri, pastille + titre court : cartes basses, même boîte pour tout le tas */
  --tri-encre: rgba(90,78,68,.42);
  position: relative; z-index: 3;
}
@media (max-width: 768px) { .tri { --tri-l: 330px; } }

/* ── Cartes ── */
.tri-carte {
  width: var(--tri-l); height: var(--tri-h); border-radius: 14px; position: relative; text-align: left;
  background: #fff; border: 1px solid rgba(13,11,8,.16);
  box-shadow: 0 1px 3px rgba(13,11,8,.16), 0 16px 32px -10px rgba(13,11,8,.38); /* contact serré + ombre portée */
}
.tri-t-papier { background: #F3EADB; }
.tri-t-sombre { background: var(--dark-3); border-color: rgba(255,255,255,.06); --tri-encre: rgba(255,255,255,.14); }
.tri-face { position: absolute; inset: 0; padding: 14px 16px; border-radius: inherit; }
.tri-floue { display: flex; flex-direction: column; gap: 9px; }
.tri-carte b { display: block; height: 8px; width: var(--l); border-radius: 4px; }
.tri-carte b.tri-src { height: 6px; opacity: .7; margin-top: 2px; }
.tri-pastille {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-family: 'Outfit', 'Outfit repli', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.6;
  color: rgba(70,60,52,.9); background: rgba(90,78,68,.08); border: 1px solid rgba(90,78,68,.18); border-radius: 100px; padding: 0 .55rem;
}
.tri-pastille::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
.tri-t-sombre .tri-pastille { color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }

.tri-nette { background: var(--cream); border: 1px solid rgba(255,154,0,.55); inset: -1px; }
.tri-nette .tri-pastille { color: #A35D00; background: rgba(255,154,0,.1); border-color: rgba(255,154,0,.3); }
.tri-nette .tri-pastille::before { background: var(--amber); opacity: 1; }
.tri-haut { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; min-width: 0; }
.tri-urgence { width: 8px; height: 8px; border-radius: 50%; background: rgba(90,78,68,.35); flex: none; }
.tri-meta { font-size: 12px; color: #5A4E44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tri-titre-carte {
  font-family: 'Outfit', 'Outfit repli', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--dark);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tri-ex {
  margin-top: .45rem; font-family: 'Outfit', 'Outfit repli', sans-serif; font-size: 12px; line-height: 1.4; color: #5A4E44;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tri-halo {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(255,154,0,.85), 0 0 40px rgba(255,154,0,.16);
}
@media (max-width: 768px) {
  .tri-face { padding: 12px 14px; }
  .tri-titre-carte { font-size: 15px; line-height: 1.34; }
}

/* ── État final (sans animation) : le tas posé sur crème, puis le tri sur sombre ── */
.tri-clair { background: var(--cream); padding: 7rem 0 3rem; }
.tri-titre { position: relative; z-index: 2; }
/* Ambre pur sur le crème, pour le surtitre (choix d'identité : la charte avant le contraste,
   #FF9A00 sur #FAF7F2 = 1,99:1 ; la règle commune .h2-ambre assombrit l'ambre à #B86A00 pour les sections crème) */
.tri-titre-1 .eyebrow { color: var(--amber); }
/* Q38 (Ugo, 03/10) : la 2e ligne du titre en ambre foncé #C97300 (3,3:1 sur crème, texte large) ; même teinte sur le titre du comparatif */
.tri-titre-1 .h2-ambre { color: #C97300; }
.tri-arret { display: none; }
/* « pour vous. » : ce qui ressort, en ambre, souligné d'un trait de crayon.
   Option html[data-tri-titre="long"] : toute la fin « ce qui compte pour vous. » en ambre, trait sous chaque ligne. */
.tri-vous { position: relative; display: inline-block; color: var(--amber); white-space: nowrap; }
.tri-crayon { position: absolute; left: -4%; right: -2%; width: 106%; bottom: -.2em; height: .32em; overflow: visible; }
.tri-crayon path { fill: none; stroke: var(--amber); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tri-crayon .tri-crayon-2 { stroke-width: 1.5; opacity: .55; }
[data-tri-titre="long"] .tri-accent {
  color: var(--amber); padding-bottom: .12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5c9-1.6 19-3 30-2.6 11 .4 18 1.9 29 1.5 12-.4 21-2.7 33-2.9 8-.1 15 .6 22 1.8' fill='none' stroke='%23FF9A00' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 100% .32em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
[data-tri-titre="long"] .tri-vous { display: inline; }
[data-tri-titre="long"] .tri-accent { display: inline-block; max-width: 100%; } /* passe entière à la ligne plutôt que de se couper */
[data-tri-titre="long"] .tri-crayon { display: none; }
.tri-titre .h2-light, .tri-titre .h2-dark { max-width: 960px; }
.tri-tas { position: relative; height: 420px; max-width: 1000px; margin: 6.5rem auto 0; }
.tri-tas .tri-carte {
  position: absolute; left: var(--x); top: var(--y); z-index: var(--z);
  transform: translate(-50%, -50%) rotate(var(--r)) scale(.63);
}
/* Sans animation, seules les cartes que le solveur a posées dans la boîte restent : les autres (pose au-dessus de la boîte,
   --y négatif) couvriraient le titre et le héros. La scène animée ne lit pas cette pose, elle garde toutes ses cartes. */
html:not(.tri-anime) .tri-hors-boite { display: none; }
.tri-sombre { background: var(--dark); padding: 5rem 0 1rem; text-align: center; }
.tri-retenues { display: none; } /* sans animation, le titre du tri reste, les cartes se lisent dans l'écran produit qui suit */
.tri-nuit, .tri-jour { display: none; }
@media (max-width: 768px) {
  .tri-clair { padding: 4.5rem 0 2rem; }
  .tri-tas { height: 240px; margin: 3.5rem 4.2rem 0; }
  .tri-tas .tri-carte { transform: translate(-50%, -50%) rotate(var(--r)) scale(.4); }
}

/* ── Scène animée ── */
.tri-anime .tri { height: 175svh; pointer-events: none; } /* décor : le produit remonté dessous reste cliquable */
/* Points d'arrêt natifs (proximité) : un geste s'y pose, sans blocage ni défilement détourné */
html.tri-anime.tri-aimant { scroll-snap-type: y proximity; } /* allumé par le script pendant la traversée de la scène seulement */
html.tri-anime.tri-aimant.tri-pose { scroll-snap-type: y mandatory; } /* le temps de la pose des cartes dans le produit (1,3 s) : la page reste sur l'arrêt */
.tri-anime .tri-arret { display: block; position: absolute; left: 0; top: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; }
/* trois étapes, un geste chacune : la pluie (haut de la scène), les cartes au tri (55svh), les cartes posées dans le produit (placé par le script) */
.tri-anime .tri-arret-tri { top: 55svh; }
/* le produit monte sous la scène encore épinglée : pas de défilement dans le vide entre le tri et l'écran 01 */
.tri-anime #features { margin-top: -65svh; }
.tri-anime .tri-scene {
  position: sticky; top: 0; height: 100svh;
  pointer-events: none; /* la scène est un décor : le produit qui monte dessous reste cliquable */
  clip-path: inset(-100svh 0 -400svh 0); /* rien ne dépasse sur les côtés ; en haut, les cartes tombent de plus haut que la scène ; en bas, elles descendent dans le produit */
}
.tri-anime .tri-clair, .tri-anime .tri-sombre { display: contents; }
.tri-anime .tri-jour { display: block; position: absolute; inset: 0; background: var(--cream); z-index: 1; }
.tri-anime .tri-nuit { display: block; position: absolute; inset: 0; background: var(--dark); opacity: 0; z-index: 1; }
.tri-anime .tri-titre {
  position: absolute; left: 0; right: 0; top: calc(4.2rem + 7svh); z-index: 2000; text-align: center; pointer-events: none;
}
.tri-anime .tri-titre .h2-light, .tri-anime .tri-titre .h2-dark { margin-left: auto; margin-right: auto; }
.tri-anime .tri-titre-2 { opacity: 0; }
.tri-anime .tri-tas { position: absolute; inset: 0; height: auto; max-width: none; margin: 0; z-index: auto; pointer-events: none; }
.tri-anime .tri-retenues { display: block; }
.tri-anime .tri-carte {
  position: absolute; left: 0; top: 0; z-index: 10;
  transform: translate3d(-200vw, 0, 0); will-change: transform;
}
.tri-anime .tri-retenue .tri-floue { opacity: 1; }
/* onglets 02 à 05 du produit : les cartes retenues n'ont pas de ligne où se poser (!important : l'opacité est posée en ligne par le script) */
html[data-panel-autre] .tri-retenue { opacity: 0 !important; visibility: hidden !important; }
.tri-anime .tri-retenue .tri-nette { opacity: 0; }
@media (max-width: 768px) {
  .tri-anime .tri-titre { top: calc(3.9rem + 4svh); padding: 0 1.25rem; }
  .tri-anime .tri-titre .h2-light, .tri-anime .tri-titre .h2-dark { font-size: 1.85rem; }
}

/* ── Options de la pose dans le produit (activées par html[data-tri-pose]) ──
   « carte » : les lignes de l'écran 01 gardent l'apparence des cartes.
   « trace » : les lignes restent sombres mais gardent la marque de leur origine (bord ambre, mention), avec un éclat à la pose. */
[data-tri-pose="carte"] #sp-veille .vs-item, [data-tri-pose="carte"] #sp-veille .vs-item.sel, [data-tri-pose="carte"] #sp-veille .vs-item:hover {
  background: var(--cream); border-color: rgba(255,154,0,.55); box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 12px 26px -10px rgba(0,0,0,.6);
}
[data-tri-pose="carte"] #sp-veille .vs-item-title { color: var(--dark); }
[data-tri-pose="carte"] #sp-veille .vs-item-meta { color: #5A4E44 !important; }
[data-tri-pose="carte"] #sp-veille .vs-item-title { color: var(--dark) !important; }
[data-tri-pose="trace"] #sp-veille .vs-item { position: relative; border-left: 2px solid var(--amber); }
[data-tri-pose="trace"] #sp-veille .vs-item-meta::after { content: 'Retenue pour vous'; color: var(--amber); margin-top: .2rem; }
.vs-eclat { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px rgba(255,154,0,.9), 0 0 36px rgba(255,154,0,.35); }
[data-tri-pose="carte"] #sp-veille .vs-urgency[style*="255,255,255"] { background: rgba(90,78,68,.4) !important; }