/* ---------- les deux faces du principe ---------- */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--deep-line);border:1px solid var(--deep-line)}
.face{background:var(--deep);padding:clamp(26px,3.4vw,40px)}
.face .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--deep-mut)}
.face--meta .k{color:var(--accent-2)}
.face strong{display:block;margin:12px 0 16px;font-size:clamp(21px,2.6vw,28px);
  font-weight:700;letter-spacing:-.03em;line-height:1.12}
.face .quoi{font-size:15px;color:var(--deep-mut);line-height:1.66;max-width:44ch}
.face dl{margin:24px 0 0;display:grid;gap:0}
.face dl div{display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;padding:13px 0;border-top:1px solid var(--deep-line)}
.face dt{font-size:13px;color:var(--deep-mut);flex:none}
.face dd{margin:0;font-size:13.5px;text-align:right;line-height:1.45}
.face--meta dd{color:var(--on-deep)}
.apres{margin-top:clamp(24px,3vw,34px);font-size:clamp(15.5px,1.5vw,17px);
  color:var(--deep-mut);max-width:74ch;line-height:1.66}
.apres b{color:var(--on-deep)}

/* ---------- le test : une vraie séquence, donc numérotée ---------- */
.test{list-style:none;margin:0;padding:0;counter-reset:t;
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.test li{background:var(--surface);padding:clamp(24px,3vw,34px);counter-increment:t;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.4vw,30px);align-items:start}
.test li::before{content:counter(t);font-family:var(--mono);font-size:30px;
  font-weight:600;color:var(--accent-txt);line-height:.9;letter-spacing:-.05em}
.test .q{display:block;font-size:clamp(17px,1.9vw,21px);font-weight:700;
  letter-spacing:-.022em;line-height:1.2}
.test p{margin-top:11px;font-size:14.5px;color:var(--muted);line-height:1.66;max-width:66ch}
.verdict{margin-top:clamp(22px,2.6vw,30px);padding:20px 22px;
  background:var(--accent-dim);border-left:2.5px solid var(--accent);
  font-size:15px;line-height:1.75;max-width:76ch}
.verdict b{font-weight:700}

/* ---------- les métiers ---------- */
.secteurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.sec{background:var(--surface);padding:24px 22px 26px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-content:start;
  transition:background .16s ease}
.sec:hover{background:#FAFCFB}
.sec[hidden]{display:none}
.sec h3{font-size:16.5px;letter-spacing:-.018em;line-height:1.24;align-self:center}
.sec p{grid-column:1 / -1;margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.62}
.sec p b{color:var(--ink);font-weight:600}

/* le verdict : une pastille par canal, jamais deux fois la même couleur */
.v{align-self:center;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;white-space:nowrap}
.v--google{background:var(--ink);color:#fff}
.v--meta{background:var(--accent);color:#fff}
.v--deux{background:transparent;color:var(--accent-txt);
  box-shadow:inset 0 0 0 1.5px var(--accent)}
/* l'ambre du refus : elle ne sert qu'ici, et jamais comme accent décoratif */
.v--autre{background:transparent;color:#8A5A00;box-shadow:inset 0 0 0 1.5px rgba(138,90,0,.4)}
.sec[data-canal="autre"]{background:#FCFBF7}
.sec[data-canal="autre"]:hover{background:#FAF8F2}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .secteurs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .duo{grid-template-columns:minmax(0,1fr)}
  .face dl div{flex-direction:column;gap:4px}
  .face dd{text-align:left}
}
@media (max-width:640px){
  .secteurs{grid-template-columns:minmax(0,1fr)}
  .test li{grid-template-columns:minmax(0,1fr);gap:10px}
  .sec{grid-template-columns:minmax(0,1fr);gap:10px}
  .v{justify-self:start}
}