/* welchestickmaschine.de — hero comparatif sur photo, instrument en dessous.

   Même direction que quellelitiere (la niche récompense les pages qui
   répondent) ; fond LIN, accent FRAMBOISE-GARANCE — la bobine de fil. La photo
   du hero garde son tiers gauche voilé pour le texte, la droite reste visible.

   La scène de l'instrument n'est plus un bac vu de profil mais un CADRE DE
   BRODERIE vu de face, le motif dedans : le rapport motif/cadre se lit
   directement, comme le rapport chat/bac chez quellelitiere. */

/* ---------- corrections de fond clair ---------- */

.gauge input::-webkit-slider-thumb{
  background:var(--accent);border-color:var(--fond);
  box-shadow:0 0 0 2px var(--accent),0 4px 12px rgba(138,47,79,.30);
}
.gauge input::-moz-range-thumb{
  background:var(--accent);border-color:var(--fond);
  box-shadow:0 0 0 2px var(--accent),0 4px 12px rgba(138,47,79,.30);
}
.gauge input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--accent),0 0 0 7px rgba(138,47,79,.22)}
.gauge input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--accent),0 0 0 7px rgba(138,47,79,.22)}

.btn{background:var(--accent);color:#fff}
.btn:hover,.btn:focus-visible{background:#6F2540;box-shadow:0 8px 20px rgba(138,47,79,.26)}
.btn-ghost{background:transparent;color:var(--texte);border:1.5px solid var(--texte)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--texte);color:var(--fond)}

/* ============================================================
   1 · LE HERO — comparatif sur photo
   ============================================================ */

.hero{
  position:relative;isolation:isolate;
  padding-top:clamp(40px,6vw,76px);padding-bottom:clamp(38px,5.4vw,66px);
}
.hero-fond{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-fond img{
  width:100%;height:100%;object-fit:cover;object-position:74% center;
  filter:saturate(1.02);
}
/* LE VOILE — variante « vitrine » retenue par Didier le 04/08/2026 : la scène
   reste lisible et la machine visible à droite, le texte passe en blanc sur la
   partie assombrie. L'ancien voile crème délavait la photo au point qu'on ne
   distinguait plus la machine. Un seul dégradé, leçon quellelitiere. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(93deg,
    rgba(18,10,16,.94) 0%,
    rgba(18,10,16,.88) 30%,
    rgba(18,10,16,.62) 48%,
    rgba(18,10,16,.20) 66%,
    rgba(18,10,16,0) 82%);
}
.hero-in{max-width:1180px}
.hero-badge{
  display:inline-flex;align-items:baseline;gap:9px;margin:0 0 18px;
  padding:9px 16px;border-radius:999px;text-decoration:none;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px);color:#fff;transition:background .2s;
}
.hero-badge:hover{background:rgba(255,255,255,.2)}
.hero-badge b{font-family:var(--dsp);font-weight:800;font-size:1.3rem;line-height:1}
.hero-badge span{font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.82)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 0}
.hero-btn{
  display:inline-block;padding:15px 28px;border-radius:4px;text-decoration:none;
  font-weight:700;font-size:.92rem;line-height:1;letter-spacing:.02em;
}
.hero-btn--plein{background:var(--accent);color:#fff}
.hero-btn--plein:hover{background:#6F2540}
.hero-btn--fant{border:1.5px solid rgba(255,255,255,.75);color:#fff}
.hero-btn--fant:hover{background:rgba(255,255,255,.14)}

/* Les quatre bauarten, désormais SOUS le bandeau, sur le fond du site. */
.hero-suite{background:var(--fond);padding:clamp(30px,4vw,48px) 0 clamp(10px,2vw,20px)}
.hero-in{position:relative}

.hero .eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:#E8A0BC;font-weight:700}
.hero h1{
  font-family:var(--dsp);font-weight:800;font-stretch:88%;
  font-size:clamp(1.75rem,3.9vw,3.05rem);line-height:1.04;letter-spacing:-.02em;
  margin-top:14px;max-width:32ch;text-wrap:balance;
}
/* `--accent` est un framboise profond, illisible sur fond sombre : on éclaire.
   Sélecteurs volontairement plus spécifiques : le socle pose `.page h1{color:
   var(--texte)}`, à spécificité ÉGALE à `.hero h1` — et comme il est chargé
   après, c'est lui qui gagnait, titre noir sur photo sombre (04/08/2026). */
.hero .hero-in h1{color:#fff}
.hero .hero-in h1 em{font-style:normal;color:#E8A0BC}
.hero .hero-in .hero-lede{color:rgba(255,255,255,.9)}
.hero .hero-in .eyebrow{color:#E8A0BC}
/* Mêmes égalités de spécificité que pour le titre : le socle colore les liens
   et les `b` du contenu, et gagnait à l'ordre. Badge et bouton fantôme
   sortaient en gris foncé sur fond sombre (04/08/2026). */
.hero .hero-in .hero-badge,
.hero .hero-in .hero-badge b{color:#fff}
.hero .hero-in .hero-badge span{color:rgba(255,255,255,.82)}
.hero .hero-in .hero-btn--fant{color:#fff}
.hero .hero-in .hero-btn--plein{color:#fff}
.hero-lede{
  margin-top:clamp(16px,2vw,22px);max-width:58ch;color:var(--txt-1);font-size:1rem;
}

/* ---------- les quatre colonnes ---------- */

.cmp{
  display:grid;gap:12px;margin-top:clamp(26px,3.6vw,40px);
  grid-template-columns:1fr;
}
@media(min-width:640px){.cmp{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.cmp{grid-template-columns:repeat(4,1fr)}}

.cmp-col{
  position:relative;padding:clamp(16px,1.8vw,20px);
  background:rgba(251,248,244,.955);
  border:1px solid rgba(26,21,24,.16);border-radius:4px;
  box-shadow:0 1px 2px rgba(26,21,24,.05),0 10px 26px rgba(26,21,24,.055);
  backdrop-filter:blur(2px);
  transition:box-shadow .3s,border-color .3s,transform .3s,opacity .3s;
}
.cmp-col h2{
  font-family:var(--dsp);font-weight:800;font-stretch:90%;
  font-size:1.06rem;line-height:1.16;margin:0;letter-spacing:-.005em;
  hyphens:manual;
}
.cmp-px{font-size:.8rem;color:var(--txt-3);margin:5px 0 13px;font-variant-numeric:tabular-nums}
.cmp-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cmp-col li{display:flex;gap:8px;align-items:flex-start;font-size:.85rem;line-height:1.42}
.cmp-col li b{flex:none;font-weight:800;width:.9em;text-align:center;font-family:var(--dsp)}
.cmp-col li.oui b{color:var(--accent)}
.cmp-col li.non b{color:var(--alerte)}
.cmp-col li span{color:var(--txt-2)}

.cmp-badge{
  position:absolute;top:-10px;left:clamp(16px,1.8vw,20px);
  margin:0;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:4px 9px;border-radius:2px;
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .28s,transform .28s;
}
.cmp-col.is-choix{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 14px 34px rgba(138,47,79,.16);
  transform:translateY(-2px);
}
.cmp-col.is-choix .cmp-badge{opacity:1;transform:translateY(0)}
.cmp-col.is-hors{opacity:.52}
.cmp-col.is-hors h2{text-decoration:line-through;text-decoration-thickness:1px}

.cmp-foot{
  margin-top:clamp(18px,2.2vw,24px);display:flex;flex-wrap:wrap;gap:8px 20px;
  align-items:baseline;font-size:.84rem;
}
.cmp-foot a{
  color:var(--accent);font-weight:600;text-decoration:none;
  border-bottom:1.5px solid var(--accent);padding-bottom:2px;
}
.cmp-foot a:hover,.cmp-foot a:focus-visible{color:var(--texte);border-color:var(--texte)}
.cmp-foot span{color:var(--txt-3)}

/* ============================================================
   2 · L'INSTRUMENT
   ============================================================ */

.inst{
  padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(40px,5.4vw,68px);
  border-top:1px solid var(--ligne);background:var(--fond);
}
.inst-head{max-width:62ch}
.inst-head .eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.inst-head h2{
  font-family:var(--dsp);font-weight:800;font-stretch:88%;
  font-size:clamp(1.5rem,3.1vw,2.3rem);line-height:1.08;letter-spacing:-.018em;
  margin-top:12px;text-wrap:balance;
}
.inst-lede{margin-top:18px;color:var(--txt-1);font-size:.98rem;max-width:60ch}

.inst-grid{display:grid;gap:clamp(32px,4.6vw,54px);margin-top:clamp(30px,4vw,44px);
  grid-template-columns:1fr}
@media(min-width:980px){.inst-grid{grid-template-columns:1.1fr .9fr;align-items:start}}

.readout{display:flex;align-items:flex-start;gap:14px}
/* Le readout n'est plus un entier mais une COTE (« 13×18 ») : corps réduit
   d'un cran par rapport au compteur de bacs, sinon le « × » déborde. */
.readout-n{
  font-family:var(--dsp);font-weight:800;
  font-size:clamp(3rem,8.6vw,6rem);line-height:.84;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap;
}
.readout-u{
  font-family:var(--dsp);font-weight:800;font-size:clamp(.95rem,2vw,1.28rem);
  color:var(--texte);padding-top:.55rem;max-width:11ch;line-height:1.1;
}
.verdict{
  margin-top:10px;font-family:var(--dsp);font-weight:800;font-stretch:86%;
  font-size:clamp(1.15rem,2.8vw,1.6rem);letter-spacing:-.01em;line-height:1.1;
  transition:color .35s;max-width:24ch;
}
.verdict-note{font-size:.87rem;color:var(--mute);margin-top:7px;max-width:46ch}
.mgl{font-size:.83rem;color:var(--txt-3);margin-top:10px}
.mgl b{color:var(--texte);font-weight:600}

.gauge{margin-top:clamp(26px,3.4vw,36px)}
.gauge-lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;gap:16px}
.gauge-lab span{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--mute)}
.gauge-lab span:first-child{letter-spacing:.04em;text-transform:none;font-size:.87rem;color:var(--texte)}
.track{
  position:relative;height:12px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0%,#A34E68 34%,var(--vif) 68%,#8A6A20 100%);
  opacity:.92;
}
.track::after{content:"";position:absolute;inset:0;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(26,21,24,.16)}
.gauge input{
  -webkit-appearance:none;appearance:none;width:100%;background:transparent;
  margin:-13px 0 0;height:12px;display:block;position:relative;z-index:2;cursor:grab;
}
.gauge input:active{cursor:grabbing}
.gauge input::-webkit-slider-thumb{
  -webkit-appearance:none;width:28px;height:28px;border-radius:50%;
  border:4px solid var(--fond);margin-top:-8px;cursor:grab;
}
.gauge input::-moz-range-thumb{width:28px;height:28px;border-radius:50%;
  border:4px solid var(--fond);cursor:grab}
.gauge input:focus-visible{outline:none}
.ticks{display:flex;justify-content:space-between;margin-top:13px;font-size:.74rem;
  color:var(--mute);font-variant-numeric:tabular-nums}
.ticks b{font-weight:600;color:var(--txt-3)}
.est{font-size:.8rem;color:var(--txt-3);margin-top:14px;max-width:56ch;line-height:1.5}
.est b{color:var(--texte);font-weight:600}

.choix{margin-top:clamp(22px,3vw,32px)}
.choix-lab{font-size:.87rem;color:var(--texte);margin-bottom:10px}
.choix-row{display:flex;flex-wrap:wrap;gap:8px}
.opt{
  font:inherit;font-size:.82rem;padding:10px 15px;border-radius:3px;cursor:pointer;
  background:transparent;color:var(--txt-2);border:1px solid var(--ligne);
  transition:background .18s,border-color .18s,color .18s;
}
.opt:hover{color:var(--texte);border-color:var(--texte)}
.opt.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- le schéma ---------- */

.inst-visuel{display:grid;gap:20px}
.schema{margin:0;padding:clamp(20px,2.6vw,28px);
  border:1px solid var(--ligne);border-radius:4px;background:var(--fond-2)}
.schema-titre{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--mute);margin:0 0 18px}
.mesure-lab{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:10px;gap:12px}
.mesure-lab span:first-child{font-size:.84rem;color:var(--txt-2)}
.mesure-lab .num{font-family:var(--dsp);font-weight:800;font-size:1.5rem;
  color:var(--accent);font-variant-numeric:tabular-nums}

/* ---------- la scène : le cadre de face, le motif dedans ----------

   Le CADRE est le rectangle qui occupe toute la largeur : sa largeur représente
   son grand côté, et la cote en dessous le chiffre. Le MOTIF est la silhouette
   fournie en masque CSS (aucun `fill` dans le SVG : en masque il prend la
   couleur d'accent et suit la palette).

   Le tissu est un dégradé interne — comme la couche de litière chez
   quellelitiere, il n'a aucun sens sémantique et n'existe donc pas en HTML. */
.scene{position:relative;height:190px;margin-top:4px}

.rahmen{
  position:absolute;left:0;right:0;top:8px;bottom:26px;
  border:5px solid var(--texte);border-radius:12px;
  background:
    linear-gradient(rgba(26,21,24,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,21,24,.028) 1px, transparent 1px),
    var(--surface);
  background-size:9px 9px, 9px 9px, auto;
  box-shadow:0 0 0 3px var(--fond-2),0 0 0 4px rgba(26,21,24,.28);
  transition:top .4s cubic-bezier(.22,.61,.36,1);
}
/* La vis de serrage du cadre — le détail qui dit « broderie » sans un mot. */
.rahmen::after{
  content:"";position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:34px;height:12px;border-radius:3px;
  background:var(--texte);
}
.scene[data-rahmen="klein"] .rahmen{top:34px}
.scene[data-rahmen="gross"] .rahmen{top:0}

.motiv{
  position:absolute;left:50%;transform:translateX(-50%);bottom:52px;height:96px;
  width:44%;background:var(--accent);
  -webkit-mask:url("silhouette.svg") no-repeat center bottom / contain;
  mask:url("silhouette.svg") no-repeat center bottom / contain;
  transition:width .42s cubic-bezier(.22,.61,.36,1);
  z-index:1;
}
.scene[data-rahmen="klein"] .motiv{height:82px}
.scene[data-rahmen="gross"] .motiv{height:104px}

.motiv-lab{
  position:absolute;top:0;right:0;margin:0;z-index:2;
  font-size:.72rem;letter-spacing:.04em;color:var(--txt-2);
  background:var(--fond-2);padding:2px 6px;border-radius:2px;
}

.cote{position:absolute;left:0;right:0;bottom:0;height:18px}
.cote-trait{position:absolute;left:0;right:0;top:8px;height:1px;background:var(--texte);opacity:.55}
.cote-trait::before,.cote-trait::after{content:"";position:absolute;top:-4px;
  width:1px;height:9px;background:var(--texte);opacity:.65}
.cote-trait::before{left:0}
.cote-trait::after{right:0}
.cote-texte{position:absolute;left:50%;top:0;transform:translateX(-50%);
  padding:0 8px;background:var(--fond-2);font-size:.72rem;color:var(--txt-2);
  font-variant-numeric:tabular-nums}

.schema-regle{font-size:.8rem;color:var(--txt-3);margin-top:14px;line-height:1.5}
.schema-regle b{color:var(--texte);font-weight:600}

.capacite{margin-top:20px;padding-top:16px;border-top:1px solid var(--ligne)}
.cap-lab{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--mute);margin:0 0 6px}
.cap-val{font-size:.9rem;color:var(--txt-2);margin:0}
.cap-val .num{font-family:var(--dsp);font-weight:800;font-size:1.3rem;color:var(--texte);
  font-variant-numeric:tabular-nums}
.cap-val b{color:var(--texte);font-weight:600;display:block;margin-top:2px;font-size:.82rem}
.schema-note{font-size:.72rem;color:var(--txt-3);margin-top:16px;line-height:1.5;font-style:italic}

.reco{border:1px solid var(--ligne);border-left:4px solid var(--accent);border-radius:4px;
  background:var(--fond);padding:clamp(18px,2.4vw,24px)}
.reco-kicker{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--mute);margin:0 0 8px}
.reco-titre{font-family:var(--dsp);font-weight:800;font-stretch:88%;
  font-size:clamp(1.05rem,2.2vw,1.36rem);line-height:1.16;margin:0;color:var(--texte)}
.reco-why{font-size:.86rem;color:var(--txt-2);margin:10px 0 0;line-height:1.55}
.reco-cta{display:inline-block;margin-top:16px;font-size:.84rem;font-weight:600;
  color:var(--accent);text-decoration:none;border-bottom:1.5px solid var(--accent);
  padding-bottom:2px;transition:color .18s,border-color .18s}
.reco-cta:hover,.reco-cta:focus-visible{color:var(--texte);border-color:var(--texte)}

/* ---------- petits écrans ---------- */

@media(max-width:639px){
  .hero-fond img{object-position:70% 36%}
  .hero::before{
    background:linear-gradient(to bottom,
      rgba(251,248,244,.90) 0%, rgba(251,248,244,.965) 34%, var(--fond) 62%);
  }
  .readout{gap:10px}
  .readout-n{font-size:clamp(2.6rem,13vw,3.4rem)}
  .choix-row{gap:6px}
  .opt{font-size:.78rem;padding:9px 12px}
  .cmp-badge{left:14px}
}
@media(prefers-reduced-motion:reduce){
  .cmp-col,.cmp-badge,.rahmen,.motiv{transition:none}
}


/* MOBILE — le dégradé horizontal n'a plus de sens sur un écran étroit : le
   texte occupe toute la largeur et retombait sur la machine, illisible. Voile
   vertical modéré + ombre portée : la machine reste perceptible (validé
   04/08/2026 ; un voile assez opaque pour lire effaçait la photo). */
@media(max-width:860px){
  .hero::before{background:linear-gradient(180deg,
    rgba(18,10,16,.74) 0%,rgba(18,10,16,.58) 46%,rgba(18,10,16,.80) 100%)}
  .hero-fond img{object-position:62% center}
  .hero h1,.hero-lede,.hero .eyebrow{text-shadow:0 2px 14px rgba(0,0,0,.75)}
  .hero-badge{background:rgba(18,10,16,.55)}
  /* Le badge « Unsere Empfehlung » chevauchait de 2 px le titre de la carte
     retenue : sur mobile les cartes s'empilent et le titre remonte. */
  .cmp-col.is-choix{padding-top:20px}
}