/* Comparatif — noir & blanc strict. Aucune couleur, aucun arrondi. */

:root{
  --ink:#000; --paper:#fff; --line:#000; --mute:#595959;
  --w:60rem; --gap:1.6rem;
  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 var(--ff);
  font-feature-settings:"kern","liga";
}
main{max-width:var(--w); margin:0 auto; padding:7.5rem 1.25rem 6rem}

h1,h2,h3,h4{line-height:1.2; letter-spacing:-.02em; margin:0 0 .6em}
h1{font-size:2.1rem; font-weight:700}
h2{font-size:1.5rem; font-weight:700; margin-top:3rem; padding-top:1rem; border-top:2px solid var(--line)}
h3{font-size:1.15rem} h4{font-size:1rem; margin-top:1.6em; text-transform:uppercase; letter-spacing:.06em; font-size:.78rem}
p{margin:0 0 1em}
a{color:var(--ink); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration:none; background:var(--ink); color:var(--paper)}
small{font-size:.8em; color:var(--mute)}
ul,ol{padding-left:1.2em; margin:0 0 1em}
li{margin:.3em 0}

/* --------------------------------------------------------- header flottant */
.site-header{
  position:fixed; top:0; left:0; right:0;
  background:var(--paper); z-index:100;
  padding:1rem 1rem .6rem;
}
.site-header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:var(--w); margin:0 auto;
  padding:.65rem 1rem; position:relative;
  background:var(--paper); border:2px solid var(--ink);
}
.site-logo{display:block; text-decoration:none; color:var(--ink); line-height:1.2; min-width:0}
.site-logo:hover{background:none; color:var(--ink)}
.site-logo-title{display:block; font-size:1.6rem; letter-spacing:-.01em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.site-logo-baseline{display:block; font-size:1rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }

.menu-toggle-input{position:absolute; opacity:0; pointer-events:none}
.menu-toggle-label{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:.32rem;
  width:2.4rem; height:2.4rem; cursor:pointer; flex-shrink:0;
}
.menu-toggle-label span{display:block; height:2px; width:100%; background:var(--ink); transition:transform .15s, opacity .15s}
.menu-toggle-label:hover{opacity:.7}
.menu-toggle-input:checked ~ .menu-toggle-label span:nth-child(1){transform:translateY(.46rem) rotate(45deg)}
.menu-toggle-input:checked ~ .menu-toggle-label span:nth-child(2){opacity:0}
.menu-toggle-input:checked ~ .menu-toggle-label span:nth-child(3){transform:translateY(-.46rem) rotate(-45deg)}

.site-nav{
  display:none; position:absolute; top:calc(100% + .6rem); right:0; left:0;
  background:var(--paper); border:2px solid var(--ink); padding:1rem 1.25rem;
  max-height:70vh; overflow-y:auto;
}
.site-nav ol{list-style:decimal; margin:0; padding-left:1.2em; font-size:.92rem; columns:2; column-gap:1.5rem}
.site-nav li{margin:.5em 0; break-inside:avoid}
.menu-toggle-input:checked ~ .site-nav{display:block}
@media(max-width:520px){.site-nav ol{columns:1}}

/* ---------------------------------------------------------------- en-tête */
.page-head{border-bottom:4px solid var(--line); padding-bottom:1.5rem; margin-bottom:2rem}
.answer{font-size:1.15rem; line-height:1.5; font-weight:500}
.byline,.disclosure{font-size:.82rem; color:var(--mute); margin:.4rem 0 0}
.disclosure{border-left:2px solid var(--line); padding-left:.7rem; margin-top:1rem; color:var(--ink)}

.toc{border:1px solid var(--line); padding:1rem 1.25rem; margin:0 0 2.5rem}
.toc h2{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; border:0; margin:0 0 .5rem; padding:0}
.toc ol{margin:0; padding-left:1.1em; columns:2; column-gap:1.5rem; font-size:.9rem}
@media(max-width:520px){.toc ol{columns:1}}

.hint{font-size:.85rem; color:var(--mute)}

/* ----------------------------------------------------------------- fiches */
[id]{scroll-margin-top:7.5rem}

.cards{list-style:none; padding:0; margin:1.5rem 0 0; border-top:1px solid var(--line)}
.card{margin:0; border-bottom:1px solid var(--line)}

.card .row{
  display:flex; align-items:baseline; gap:.9rem;
  padding:1rem .2rem;
}

.rank{
  font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums;
  min-width:1.8rem; line-height:1;
}
.head{flex:1; min-width:0}
.name{
  display:inline-block; width:fit-content; font-weight:700; font-size:1.2rem;
  color:var(--ink); text-decoration:underline; text-underline-offset:.18em;
}
.name:hover{background:none; color:var(--ink); text-decoration:none}
.name:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.badge{
  display:inline-block; margin:.25rem .4rem .5rem 0; padding:.1rem .45rem;
  background:var(--ink); color:var(--paper); font-size:.8rem;
  text-transform:uppercase; letter-spacing:.08em; font-weight:600; vertical-align:middle;
}
.tagline{display:block; font-size:1.05rem;  margin-top:.15rem}
.row-sum{display:block; font-size:1rem; margin-top:.35rem; line-height:1.45}
.row-for{display:block; font-size:0.9rem;  margin-top:.2rem; text-transform:uppercase;}
.score{font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
.score b{font-size:1.35rem}
.score small{color:var(--mute)}

.fiche{border-top:1px solid var(--line); padding:1.4rem 0 2rem}
.fiche:first-of-type{border-top:0}
.fiche-head{display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap}
.fiche-head .fiche-name{font-size:1.35rem; margin:0; flex:0 1 auto}
.fiche-head .score{margin-left:auto}
.fiche > .tagline{margin:.15rem 0 0 2.7rem}
.back{margin-top:1.2rem}
.back a{font-size:.82rem; text-decoration:none; border:1px solid var(--ink); padding:.3rem .7rem; display:inline-block}
.back a:hover{background:var(--ink); color:var(--paper)}

.verdict{font-size:1.02rem; border-left:3px solid var(--ink); padding-left:.9rem; margin:1.2rem 0}

.shot{margin:1.4rem 0; border:1px solid var(--ink)}
.shot img{display:block; width:100%; height:auto; filter:grayscale(1); transition:filter .25s}
.shot:hover img{filter:none}
.shot figcaption{font-size:.72rem; color:var(--mute); padding:.4rem .6rem; border-top:1px solid var(--ink); text-transform:uppercase; letter-spacing:.06em}

.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.1rem 1.5rem; margin:1.2rem 0}
.facts div{border-bottom:1px dotted #999; padding:.35rem 0}
.facts dt{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--mute)}
.facts dd{margin:0; font-size:.95rem}

.scores{margin:1.4rem 0}
.score-row{display:grid; grid-template-columns:9rem 1fr 1.6rem; align-items:center; gap:.7rem; font-size:.85rem; padding:.15rem 0}
.score-row b{text-align:right; font-variant-numeric:tabular-nums}
.bar{display:block; height:.55rem; border:1px solid var(--ink)}
.bar-fill{display:block; height:100%; background:var(--ink)}
@media(max-width:480px){.score-row{grid-template-columns:7rem 1fr 1.6rem; font-size:.8rem}}

.proscons{display:grid; grid-template-columns:1fr 1fr; gap:0 1.8rem; margin:1.2rem 0}
@media(max-width:560px){.proscons{grid-template-columns:1fr}}
.proscons h4{margin-top:0}
.pros,.cons{list-style:none; padding:0; font-size:.92rem}
.pros li::before{content:"+ "; font-weight:700}
.cons li::before{content:"– "; font-weight:700}

.go a{display:inline-block; border:2px solid var(--ink); padding:.5rem 1rem; font-weight:600; text-decoration:none; font-size:.9rem}
.go a:hover{background:var(--ink); color:var(--paper)}

/* --------------------------------------------------------------- tableaux */
.table-wrap{overflow-x:auto; margin:1.5rem 0}
table{border-collapse:collapse; width:100%; font-size:.85rem}
caption{text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mute); padding-bottom:.5rem}
th,td{border:1px solid var(--line); padding:.45rem .6rem; text-align:center; font-variant-numeric:tabular-nums}
thead th{background:var(--ink); color:var(--paper); font-weight:600; font-size:.75rem}
tbody th{text-align:left; font-weight:600; white-space:nowrap}
.weights th[scope="row"]{white-space:normal}
.weights td:nth-child(2){white-space:nowrap}
.weights .crit-desc{text-align:left; font-size:.82rem; color:var(--mute)}

/* -------------------------------------------------------------------- FAQ */
.qa{border-bottom:1px solid var(--line)}
.qa summary{padding:.85rem .2rem; cursor:pointer; font-weight:600; list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"? "; font-weight:700}
.qa summary:hover{background:#f2f2f2}
.qa div{padding:0 .2rem 1rem 1.2rem; font-size:.95rem}

.more-links nav{display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .1rem; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em}
.more-links nav a{font-weight:600}
.more-links nav span{color:var(--mute); margin:0 .3rem}

.sources{font-size:.8rem; word-break:break-all; color:var(--mute)}
.page-foot{margin-top:4rem; border-top:1px solid var(--line); padding-top:1rem; font-size:.8rem; color:var(--mute)}

/* ------------------------------------------------------------- impression */
@media print{
  .site-header,.toc,.go,.back{display:none}
  main{padding-top:3rem}
  details{display:block}
  details>*{display:revert}
  a{text-decoration:none}
}