/* quellelitiere.fr — hero comparatif sur photo, instrument en dessous.

   DIRECTION. L'analyse SERP du 29/07 a montré que la niche récompense les pages
   qui répondent, pas celles qui font manipuler. Le premier écran est donc un
   comparatif posé sur une photo d'intérieur réel ; l'instrument suit.

   La photo a un tiers gauche presque vide, des murs clairs et un jeté vert
   sauge : le voile part donc de la gauche en papier chaud et s'efface vers la
   droite, où le meuble et le chat doivent rester visibles. Les quatre colonnes
   sont des panneaux quasi opaques — sur une photo, un texte en aplat translucide
   n'est jamais fiable.

   Le socle commun est écrit pour du sombre : ce fichier reprend ce qu'il ne
   pouvait pas deviner. */

/* ---------- 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(31,97,87,.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(31,97,87,.30);
}
.gauge input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--accent),0 0 0 7px rgba(31,97,87,.22)}
.gauge input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--accent),0 0 0 7px rgba(31,97,87,.22)}

.btn{background:var(--accent);color:#fff}
.btn:hover,.btn:focus-visible{background:#18514A;box-shadow:0 8px 20px rgba(31,97,87,.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{
  /* Gros plan : la tête du chat est à ~66% / 35% de l'image — le cadrage la garde
     visible quand cover rogne, au lieu de viser le bas comme l'ancien plan large. */
  width:100%;height:100%;object-fit:cover;object-position:62% 32%;
  /* La photo n'est pas le sujet, mais elle doit se voir : on la laisse presque
     intacte et c'est le voile qui gère la lisibilité. */
  filter:saturate(.96);
}
/* LE VOILE — un seul dégradé.
   La première version en empilait deux (un horizontal pour le texte, un vertical
   pour raccrocher le bas) : leurs opacités se multipliaient et la photo
   ressortait délavée à 90 %, chat invisible. Un seul dégradé horizontal, opaque
   là où le texte passe, quasi nul sur le tiers droit où sont le meuble et le
   chat. Le raccord du bas est confié à une ombre portée interne, qui n'assombrit
   que quelques pixels au lieu de toute la hauteur. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(94deg,
    rgba(251,250,247,.97) 0%,
    rgba(251,250,247,.94) 26%,
    rgba(251,250,247,.72) 44%,
    rgba(251,250,247,.34) 62%,
    rgba(251,250,247,.10) 80%,
    rgba(251,250,247,0) 100%);
  box-shadow:inset 0 -40px 34px -22px var(--fond);
}
.hero-in{position:relative}

.hero .eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#5E6560}
.hero h1{
  font-family:var(--dsp);font-weight:800;font-stretch:88%;
  font-size:clamp(1.75rem,3.9vw,3.1rem);line-height:1.04;letter-spacing:-.02em;
  margin-top:14px;max-width:30ch;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-lede{
  margin-top:clamp(16px,2vw,22px);max-width:56ch;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,250,247,.955);
  border:1px solid rgba(21,23,26,.16);border-radius:4px;
  box-shadow:0 1px 2px rgba(21,23,26,.05),0 10px 26px rgba(21,23,26,.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;
}
.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)}

/* Le badge n'existe que sur la colonne désignée : masqué par défaut, il est
   rendu dans les quatre colonnes pour que le JS n'ait qu'une classe à basculer
   — pas de nœud à créer, donc pas de saut de mise en page. */
.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(31,97,87,.16);
  transform:translateY(-2px);
}
.cmp-col.is-choix .cmp-badge{opacity:1;transform:translateY(0)}
/* Écartée pour cet emplacement : estompée, jamais cachée — le visiteur doit
   pouvoir constater qu'elle a été considérée. */
.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:60ch}
.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:58ch}

.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}
.readout-n{
  font-family:var(--dsp);font-weight:800;
  font-size:clamp(4.2rem,12vw,8.4rem);line-height:.78;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;color:var(--accent);
}
.readout-u{
  font-family:var(--dsp);font-weight:800;font-size:clamp(.95rem,2vw,1.28rem);
  color:var(--texte);padding-top:.75rem;max-width:7ch;line-height:1.1;
}
.verdict{
  margin-top:10px;font-family:var(--dsp);font-weight:800;font-stretch:86%;
  font-size:clamp(1.2rem,3vw,1.75rem);letter-spacing:-.01em;line-height:1.06;
  transition:color .35s;
}
.verdict-note{font-size:.87rem;color:var(--mute);margin-top:7px;max-width:42ch}
.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%,#3B7F72 34%,var(--vif) 68%,#B08A2E 100%);
  opacity:.92;
}
.track::after{content:"";position:absolute;inset:0;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(21,23,26,.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:54ch;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 bac de profil, le chat debout dedans ----------

   Le chat est la silhouette fournie par Didier, posée en MASQUE CSS. Le fichier
   n'a aucun attribut `fill` : en <img> il sortirait noir. En masque, il prend la
   couleur d'accent et suit la palette de la niche sans qu'on retouche le SVG.

   Tout est désormais de profil. La version précédente dessinait le bac vu de
   DESSUS avec un chat de PROFIL dedans — deux projections mélangées, qui ne
   décrivaient aucun objet réel. */
.scene{position:relative;height:190px;margin-top:4px}

/* Le bac : une auge ouverte, trois parois, ancrée en bas.

   OPAQUE, et c'est voulu. En semi-transparent on voyait les pattes du chat en
   fantôme au travers — alors que dans la réalité c'est la paroi avant qui les
   masque. L'opacité rétablit la lecture juste : le chat est DANS le bac.

   La couche de litière est un dégradé interne plutôt qu'un élément de plus :
   elle n'a aucun sens sémantique, elle n'a donc pas à exister dans le HTML. */
.bac{
  position:absolute;left:0;right:0;bottom:26px;height:44px;
  border:4px solid var(--texte);border-top:0;border-radius:0 0 7px 7px;
  background:linear-gradient(to bottom,
      var(--surface) 0 38%,
      color-mix(in srgb, var(--vif) 22%, var(--surface)) 38% 100%);
  transition:height .4s cubic-bezier(.22,.61,.36,1);
}
.scene[data-gabarit="grand"] .bac{height:52px}
.scene[data-gabarit="petit"] .bac{height:38px}

/* Le chat : pattes au fond de l'auge, donc un peu au-dessus du bas du cadre. */
.chat{
  position:absolute;left:7%;bottom:30px;height:132px;
  background:var(--accent);
  -webkit-mask:url("silhouette.svg") no-repeat left bottom / contain;
  mask:url("silhouette.svg") no-repeat left bottom / contain;
  transition:width .42s cubic-bezier(.22,.61,.36,1),height .4s ease;
}
.scene[data-gabarit="grand"] .chat{height:146px}
.scene[data-gabarit="petit"] .chat{height:116px}

/* Le libellé va en haut à droite : la silhouette occupe la gauche et le centre. */
.chat-lab{
  position:absolute;top:0;right:0;margin:0;
  font-size:.72rem;letter-spacing:.04em;color:var(--txt-2);
  background:var(--fond-2);padding:2px 6px;border-radius:2px;
}

/* La cote du bac, sous l'auge — comme sur un plan. */
.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}
.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){
  /* Sur mobile la photo n'apporte plus rien derrière quatre panneaux empilés :
     elle ne tient que sur la hauteur du titre. */
  .hero-fond img{object-position:68% 28%}
  .hero::before{
    background:linear-gradient(to bottom,
      rgba(251,250,247,.90) 0%, rgba(251,250,247,.965) 34%, var(--fond) 62%);
  }
  .readout{gap:10px}
  .choix-row{gap:6px}
  .opt{font-size:.78rem;padding:9px 12px}
  .cmp-badge{left:14px}
}
@media(prefers-reduced-motion:reduce){
  .cmp-col,.cmp-badge,.bac,.chat{transition:none}
}