/* Ranknify — mise en page commune des pages d'accueil de l'usine.
 *
 * Ce fichier ne contient AUCUNE couleur en dur : la palette est injectée par le
 * mu-plugin depuis la configuration du site, pour que chaque niche ait son
 * ambiance propre sans dupliquer la mise en page. Le hero, lui, est spécifique
 * à chaque niche et vit dans sa propre feuille.
 */

*{box-sizing:border-box}
body{margin:0}

.page{
  background:var(--fond);
  color:var(--texte);
  font-family:var(--txt);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.page :is(h1,h2,h3,h4,p,ul,ol,figure){margin:0}
.page ul{padding:0;list-style:none}
.page a{color:inherit;text-decoration:none}
.wrap{max-width:var(--rnk-wrap,1180px);margin-inline:auto;padding-inline:clamp(18px,4vw,44px)}

.eyebrow{
  font-size:.7rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.19em;color:var(--mute);
}
.num{font-variant-numeric:tabular-nums}


/* ---------------- fait ---------------- */
.fait{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);margin-top:clamp(50px,7vw,90px);background:var(--fond-2)}
.fait-in{padding-block:clamp(38px,5vw,62px);display:grid;gap:22px;align-items:end;grid-template-columns:1fr}
@media(min-width:820px){.fait-in{grid-template-columns:auto 1fr}}
.fait-n{
  font-family:var(--dsp);font-weight:800;font-stretch:88%;
  font-size:clamp(4rem,11vw,8rem);line-height:.8;letter-spacing:-.04em;color:var(--matiere);
  font-variant-numeric:tabular-nums;
}
.fait-n sup{font-size:.36em;vertical-align:super;color:var(--accent)}
.fait p{font-size:clamp(1.05rem,2.2vw,1.35rem);max-width:40ch;line-height:1.45}
.fait small{display:block;margin-top:12px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3,#5F7C85)}

/* ---------------- banc d'essai ---------------- */
.banc{padding-block:clamp(54px,7vw,92px)}
.sec-head{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(26px,3.5vw,38px)}
.sec-head h2{
  font-family:var(--dsp);font-weight:800;font-stretch:80%;
  font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1;letter-spacing:-.02em;margin-top:10px;
}
.sec-head p{color:var(--mute);font-size:.92rem;max-width:44ch;margin-top:10px}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filters button{
  font:inherit;font-size:.79rem;font-weight:500;
  padding:8px 15px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--mute);
  border:1px solid var(--ligne);
  transition:color .18s,border-color .18s,background .18s;
}
.filters button:hover{color:var(--texte);border-color:rgba(var(--voile-rgb,232,226,212),.3)}
.filters button[aria-pressed="true"]{background:var(--texte);color:var(--fond);border-color:var(--texte)}
.filters button:focus-visible{outline:2px solid var(--vif);outline-offset:2px}

.list{display:flex;flex-direction:column;border-top:1px solid var(--ligne)}
.row{
  display:grid;gap:6px 20px;align-items:center;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"rk id sc" ".  pt pt" ".  cta cta";
  padding:22px 16px 22px 10px;
  border-bottom:1px solid var(--ligne);
  position:relative;
  transition:background .22s,opacity .35s,filter .35s;
}
@media(min-width:900px){
  .row{grid-template-columns:64px minmax(0,1.15fr) minmax(0,1.25fr) 84px 168px;
       grid-template-areas:"rk id pt sc cta";gap:20px}
}
.row::before{
  content:"";position:absolute;left:0;top:0;bottom:-1px;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .28s ease;
}
.row:hover{background:rgba(var(--voile-rgb,232,226,212),.035)}
.row:hover::before,.row:focus-within::before{transform:scaleY(1)}
.row.off{opacity:.45;filter:saturate(.4)}
.row.off:hover{opacity:.72;filter:none}

.rk{grid-area:rk;font-family:var(--dsp);font-weight:800;font-stretch:88%;font-size:1.9rem;line-height:1;color:var(--rang,#4E6C75);font-variant-numeric:tabular-nums;transition:color .3s}
.row.fit .rk{color:var(--accent)}
.id{grid-area:id;min-width:0}
.id h3{font-family:var(--dsp);font-weight:800;font-stretch:88%;font-size:1.12rem;line-height:1.2;letter-spacing:-.005em}
.tech{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.grp{display:flex;align-items:center;gap:16px;padding:30px 10px 12px;border-bottom:1px solid var(--ligne)}
.grp span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--accent);white-space:nowrap}
.grp::after{content:"";flex:1;height:1px;background:var(--ligne)}
.grp[data-g="comp"] span{color:var(--vif)}
.grp[data-g="off"] span{color:var(--mute)}
.grp.hide{display:none}
.pt{grid-area:pt;display:flex;flex-wrap:wrap;gap:6px 8px;font-size:.83rem;color:var(--txt-2,#A9C0C6)}
.pt li{position:relative;padding-left:13px}
.pt li::before{content:"";position:absolute;left:2px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--vif);opacity:.65}
.sc{grid-area:sc;display:flex;align-items:baseline;justify-content:flex-end;justify-self:end}
.sc b{font-family:var(--dsp);font-weight:800;font-size:1.45rem;line-height:1;font-variant-numeric:tabular-nums}
.sc i{font-style:normal;font-size:.72rem;color:var(--mute);margin-left:2px}
.row .cta{
  grid-area:cta;justify-self:start;
  display:inline-flex;align-items:center;gap:8px;
  font-size:.85rem;font-weight:600;padding:11px 17px;border-radius:2px;
  border:1px solid rgba(var(--voile-rgb,232,226,212),.22);
  transition:background .18s,border-color .18s,gap .18s;
}
@media(min-width:900px){.row .cta{justify-self:end}}
.row .cta:hover,.row .cta:focus-visible{background:var(--texte);color:var(--fond);border-color:var(--texte);gap:12px}
.row .cta:focus-visible{outline:2px solid var(--vif);outline-offset:2px}

.banc-foot{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size:.8rem;color:var(--txt-3,#5F7C85)}

/* ---------------- bande craie ---------------- */
.crust{display:block;width:100%;height:clamp(28px,4vw,52px);margin-bottom:-1px}
.chalk{background:var(--bande-fond);color:var(--bande-encre,#1B2A2E)}
.chalk-in{padding-block:clamp(50px,7vw,86px)}
.chalk .eyebrow{color:var(--bande-mute,#6C7C7E)}
.chalk h2{
  font-family:var(--dsp);font-weight:800;font-stretch:80%;
  font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1;letter-spacing:-.022em;margin-top:10px;max-width:18ch;
}
.chalk-lede{max-width:52ch;color:var(--bande-txt,#3E5055);font-size:1rem}
.chalk-head{display:grid;gap:22px}
@media(min-width:900px){.chalk-head{grid-template-columns:1.1fr .9fr;align-items:end;gap:clamp(30px,5vw,64px)}}
.techs{margin-top:clamp(30px,4vw,46px);display:grid;gap:1px;background:rgba(var(--bande-encre-rgb,27,42,46),.16);border:1px solid rgba(var(--bande-encre-rgb,27,42,46),.16)}
@media(min-width:700px){.techs{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.techs{grid-template-columns:repeat(4,1fr)}}
.tech-card{background:var(--bande-fond);padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:14px;transition:background .22s}
.tech-card:hover{background:var(--bande-survol,#EAE6DB)}
.tech-card h3{font-family:var(--dsp);font-weight:800;font-stretch:86%;font-size:1.18rem;line-height:1.15}
.tech-range{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bande-accent,#7A5A21);font-weight:600}
.tech-card dl{margin:0;display:grid;gap:10px;font-size:.87rem}
.tech-card dt{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bande-mute,#6C7C7E);margin-bottom:3px}
.tech-card dd{margin:0;color:var(--bande-txt,#2C3B3F);line-height:1.5}
.tech-card .no dd{color:var(--bande-alerte,#7B4433)}
.tech-card a{margin-top:auto;font-size:.83rem;font-weight:600;border-bottom:1px solid rgba(var(--bande-encre-rgb,27,42,46),.3);width:fit-content;padding-bottom:2px}
.tech-card a:hover{border-color:var(--bande-encre,#1B2A2E)}

/* méthode */
.methode{margin-top:clamp(50px,6vw,80px);border-top:1px solid rgba(var(--bande-encre-rgb,27,42,46),.2);padding-top:clamp(30px,4vw,44px)}
.steps{margin-top:26px;display:grid;gap:26px}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr);gap:22px}}
.step{position:relative;padding-top:20px;border-top:1px solid rgba(var(--bande-encre-rgb,27,42,46),.22)}
.step b{position:absolute;top:-1px;left:0;height:2px;width:28px;background:var(--bande-encre,#1B2A2E)}
.step .n{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--bande-mute,#6C7C7E)}
.step h4{font-family:var(--dsp);font-weight:800;font-stretch:88%;font-size:1.02rem;margin-top:8px}
.step p{font-size:.86rem;color:var(--bande-txt,#3E5055);margin-top:7px;line-height:1.5}

/* ---------------- guides ---------------- */
.guides{padding-block:clamp(54px,7vw,90px)}
.guide-grid{margin-top:clamp(26px,3.5vw,38px);display:grid;gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
@media(min-width:760px){.guide-grid{grid-template-columns:repeat(3,1fr)}}
.guide{background:var(--fond);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:12px;min-height:210px;transition:background .22s}
.guide:hover{background:var(--fond-2)}
.guide .eyebrow{color:var(--vif)}
.guide h3{font-family:var(--dsp);font-weight:800;font-stretch:84%;font-size:1.22rem;line-height:1.2;letter-spacing:-.01em}
.guide p{font-size:.87rem;color:var(--txt-2,#A9C0C6)}
.guide span{margin-top:auto;font-size:.8rem;font-weight:600;color:var(--accent)}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .page *,.page *::before,.page *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ---- visuel produit dans le classement ----
   Chaque zone doit former un rectangle plein, sinon la déclaration entière
   est invalide et l'image se place toute seule en fin de grille. */
.row{
  grid-template-columns:auto 74px minmax(0,1fr);
  grid-template-areas:
    "rk im id"
    ".  .  sc"
    ".  pt pt"
    ".  cta cta";
}
@media(min-width:900px){
  .row{grid-template-columns:52px 92px minmax(0,1.05fr) minmax(0,1.1fr) 78px 158px;
       grid-template-areas:"rk im id pt sc cta"}
}
.im{grid-area:im;align-self:center}
.im img{
  display:block;width:100%;max-width:92px;aspect-ratio:1;object-fit:contain;
  background:#fff;border-radius:3px;padding:5px;
}
@media(max-width:899px){
  .im{max-width:74px}
  .im img{max-width:74px}
}

/* le titre du modèle mène à la fiche, le bouton au marchand */
.id h3 a{transition:color .18s}
.id h3 a:hover,.id h3 a:focus-visible{color:var(--accent)}
.price{font-size:.78rem;color:var(--mute);margin-top:5px}
.price b{color:var(--txt-1,#BCD0D5);font-weight:600}

/* ---- cartes guides avec visuel ---- */
.guide{position:relative;overflow:hidden;min-height:280px;justify-content:flex-end}
.guide-img{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:.4;transition:opacity .3s,transform .5s;transform:scale(1.02);
}
.guide:hover .guide-img{opacity:.55;transform:scale(1.06)}
.guide::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(var(--fond-rgb,8,25,31),.25) 0%,rgba(var(--fond-rgb,8,25,31),.88) 58%,rgba(var(--fond-rgb,8,25,31),.96) 100%);
}
/* l'image de fond doit rester en position absolue : la règle générique
   ci-dessous la remettait en `relative` et elle disparaissait derrière le voile */
.guide > *:not(.guide-img){position:relative;z-index:2}
.guide time{font-size:.74rem;color:var(--mute)}

/* ---- pied de page : la note de source des données ---- */
.data-note{font-size:.76rem;color:var(--txt-3,#5F7C85);margin-top:10px;max-width:60ch}
.data-note a{border-bottom:1px solid rgba(var(--txt-3-rgb,95,124,133),.5)}

/* ---- filet de sécurité : aucune extension ne doit reprendre la main
        sur les couleurs de cette page (le thème imposait un h1 sombre) ---- */
.page h1,.page h2,.page h3,.page h4{color:var(--texte);font-family:var(--dsp)}
.page h1 em{color:var(--accent)}
.page .chalk :is(h2,h3,h4){color:var(--bande-encre,#1B2A2E)}
.page .eyebrow{color:var(--mute)}
.page .chalk .eyebrow{color:var(--bande-mute,#6C7C7E)}
.page .guide .eyebrow{color:var(--vif)}
.page .reco-txt .eyebrow{color:var(--accent)}
.page .verdict{font-family:var(--dsp)}
.page p,.page li,.page dd{font-family:var(--txt)}

/* La règle de remise à zéro des marges (`.page :is(h1,h2,h3,h4,p,…)`) est plus
   spécifique que `.hero-lede` : le chapô se retrouvait collé au titre. */
.page .hero-lede{margin-top:clamp(20px,2.6vw,30px)}
.page .verdict-note{margin-top:8px}
.page .mgl{margin-top:12px}


/* ─── au-delà des dix premiers ───
   Les modèles suivants restent dans le HTML servi — ils sont indexables et le
   filtre par famille peut les rappeler — mais la page n'en montre que dix. */
.row.au-dela{display:none}
.banc-plus{display:flex;justify-content:center;margin-top:26px}
.banc-plus button{cursor:pointer;font:inherit}
.banc-plus button[hidden]{display:none}


/* ─────────────── le podium ───────────────
   Les trois premiers du classement, en grand et en situation. Le n°1 change
   avec le réglage de l'instrument : c'est là que la personnalisation se voit. */

.podium{
  display:grid;gap:18px;margin-bottom:clamp(28px,4vw,42px);
  grid-template-columns:1fr;
}
@media(min-width:760px){.podium{grid-template-columns:repeat(3,1fr)}}

.pod{
  display:flex;flex-direction:column;
  border:1px solid var(--ligne);background:var(--fond-2);
  overflow:hidden;
}
.pod--un{border-color:var(--accent)}

.pod-vis{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.pod-vis img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.pod:hover .pod-vis img{transform:scale(1.04)}
.pod-vis::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55) 100%);
}
.pod-rang{
  position:absolute;left:12px;top:12px;z-index:2;
  font-family:var(--dsp);font-weight:800;font-stretch:88%;font-size:1.5rem;
  line-height:1;padding:6px 10px;color:var(--fond);background:var(--texte);
  font-variant-numeric:tabular-nums;
}
.pod--un .pod-rang{background:var(--accent)}

.pod-txt{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pod-fam{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pod-txt h3{
  font-family:var(--dsp);font-weight:800;font-stretch:88%;font-size:1.02rem;
  line-height:1.22;letter-spacing:-.005em;
}
.pod-txt h3 a:hover{color:var(--accent)}
.pod-bas{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.pod-note{font-size:.82rem;color:var(--mute);font-variant-numeric:tabular-nums}
.pod-note b{font-family:var(--dsp);font-weight:800;font-size:1.15rem;color:var(--texte)}
.pod-cta{
  font-size:.8rem;font-weight:600;padding:9px 15px;border-radius:2px;
  border:1px solid rgba(var(--voile-rgb,232,226,212),.24);white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s;
}
.pod-cta:hover{background:var(--texte);color:var(--fond);border-color:var(--texte)}

/* ─────────────── familles illustrées ─────────────── */

/* La photo est en PIED de carte, pas en tête. Toutes les familles n'en ont pas
   (certaines cartes décrivent un accessoire, pas une famille de produits) : en
   tête, une seule carte illustrée décale son titre de 200 px et la rangée n'a
   plus aucune ligne commune. En pied, les titres restent alignés et chaque
   photo disponible est conservée. */
.tech-illu{
  width:calc(100% + 2 * clamp(20px,2.4vw,26px));
  margin:14px calc(-1 * clamp(20px,2.4vw,26px)) calc(-1 * clamp(20px,2.4vw,26px));
  aspect-ratio:16/9;object-fit:cover;display:block;
}

@media (prefers-reduced-motion:reduce){
  .pod-vis img{transition:none}
}


/* --------------- l'ambiance du hero ---------------
   Une photo en situation derriere l'instrument, tres en retrait : elle donne de
   la matiere au haut de page sans disputer la lecture au chiffre. Le degrade la
   fait disparaitre vers le bas, la ou commence le texte. */
.hero{position:relative;isolation:isolate}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--ambiance,none);
  background-size:cover;background-position:center 30%;
  opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 85%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 85%);
  pointer-events:none;
}