.page{max-width:860px;margin:0 auto;padding:36px 22px 0}
.ariane{font-size:14px;color:var(--soft);margin-bottom:14px}.ariane a{color:var(--soft)}
.page h1{font-size:clamp(28px,4.4vw,40px)}
.page h2{margin:38px 0 12px}
.page p{margin:10px 0}
.maj{color:var(--soft);font-size:14px;margin-top:8px}
.tete{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;margin-top:20px}
.tete .cles{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15.5px;margin:6px 0 14px}.tete .cles b{font-size:22px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo>div{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.duo h3{font:700 13px/1 var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--soft);margin-bottom:10px}
.duo ul{margin:0;padding-left:18px}.duo li{margin:6px 0}
.oui h3{color:var(--sage-ink)}.non h3{color:var(--accent)}
.page table{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.page th,.page td{padding:10px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.page thead th{border-top:0;font-family:var(--title);font-size:16px}
.page tbody th{font-weight:500;color:var(--soft);width:34%}
.page tr.diff td{font-weight:700}
.barres{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 18px}
.bar{display:grid;grid-template-columns:170px 1fr 34px 90px;gap:12px;align-items:center;padding:6px 0;font-size:15px}
.bar i{display:block;height:9px;background:var(--tint);border-radius:9px;overflow:hidden}.bar em{display:block;height:100%;background:var(--accent)}
.bar b{text-align:right}.bar small{color:var(--soft);font-size:13px}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.tile .mini{font-size:14px;color:var(--soft);margin-top:10px;text-align:center}
.sep{background:var(--sage);border-radius:var(--r);padding:16px 20px}.sep ul{margin:6px 0 0;padding-left:18px}.sep li{margin:4px 0}
.reponse{font-size:19px;background:var(--card);border-left:5px solid var(--accent);border-radius:8px;padding:16px 20px;box-shadow:var(--shadow)}
.qr h3{font-size:18px;margin:18px 0 4px}
.puces{display:flex;flex-wrap:wrap;gap:6px}.puces span{background:var(--card);border:1.5px solid var(--line);border-radius:99px;padding:4px 12px;font-size:14px}
.alt{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin-bottom:14px}
.alt h3{font-size:19px}.alt .eco{color:var(--sage-ink);font-weight:700}.alt ul{margin:8px 0 0;padding-left:18px;font-size:15px}.alt .droite{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
@media (max-width:720px){.tete,.duo,.alt{grid-template-columns:1fr}.bar{grid-template-columns:120px 1fr 30px}.bar small{display:none}.alt .droite{align-items:stretch;text-align:left}}
.photo{display:block;flex:none;object-fit:contain;background:#fff;border-radius:10px}
.hero{text-align:center;padding:64px 22px 30px;max-width:840px;margin:0 auto}.hero .lead{margin-left:auto;margin-right:auto}
.search{position:relative;margin-top:28px;text-align:left}
.search input{width:100%;font:500 19px/1 var(--body);padding:20px 22px 20px 54px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink);box-shadow:var(--shadow);outline:none}
.search input:focus{border-color:var(--accent)}
.search:before{content:"";position:absolute;left:20px;top:21px;width:15px;height:15px;border:2.5px solid var(--soft);border-radius:50%}
.search:after{content:"";position:absolute;left:36px;top:38px;width:9px;height:2.5px;background:var(--soft);transform:rotate(45deg);border-radius:2px}
.sres{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--card);border-radius:16px;box-shadow:0 20px 50px rgba(20,30,60,.18);overflow:hidden;z-index:6}
.sres a.r{display:grid;grid-template-columns:50px 1fr auto;gap:12px;align-items:center;padding:10px 16px;text-decoration:none;border-top:1px solid var(--line)}
.sres a.r:first-child{border-top:0}.sres a.r:hover{box-shadow:inset 3px 0 0 var(--accent)}.sres small{display:block;color:var(--soft);font-size:14px}
.sres .none,.sres .more{padding:13px 16px;color:var(--soft);font-size:15px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sres .more a{color:var(--accent);font-weight:600;text-decoration:none}
.try{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;justify-content:center;align-items:center;color:var(--soft);font-size:15px}
.ways{display:flex;justify-content:center;gap:10px 26px;flex-wrap:wrap;margin-top:26px;font-size:15.5px;color:var(--soft)}
.ways a,.ways button{color:var(--ink);font:inherit;font-weight:600;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.page.large{max-width:1120px}
.liens{display:flex;flex-wrap:wrap;gap:8px}
.page td .btn{white-space:nowrap}.page td.c{text-align:center}.page td a{font-weight:600;text-decoration:none}
.tw{overflow-x:auto}
.groupe h2{margin-top:30px}
.fil{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:18px 0 6px;padding:14px 18px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.fil .g{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.fil .g>span{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--soft)}
.fil .chip{padding:5px 12px;font-size:14.5px}.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--tint)}
.fil select,.calc input{font:600 16px var(--body);padding:9px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:14px}
.calc{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;display:grid;gap:14px;max-width:560px}.calc label{display:grid;gap:6px;font-weight:600}
.calc output{font:700 26px var(--title);color:var(--accent)}
/* comparateur */
.cmp{margin-top:24px;overflow:hidden}
.pickers{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:end;padding:22px;background:var(--tint)}
.pickers label{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--soft);margin-bottom:6px}
.pickers select{width:100%;font:600 16px/1.2 var(--body);padding:13px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.pickers .vs{font:italic 700 20px var(--title);color:var(--accent);padding-bottom:10px}
.heads{display:grid;grid-template-columns:1fr 1fr;gap:0}
.heads>div{padding:22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.heads>div+div{border-left:1px solid var(--line)}
.heads h2{font-size:21px}
.heads .px{font-size:20px;font-weight:700}
.heads .btn{margin-top:8px}
.heads .fiche{font-size:14px;color:var(--soft)}
.sep{padding:18px 22px;background:var(--sage);color:var(--sage-ink)}
.sep h3{font:700 13px/1 var(--body);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.sep ul{margin:0;padding-left:18px;color:var(--ink)}
.sep li{margin:3px 0}
table{width:100%;border-collapse:collapse;font-size:15.5px}
caption{font:700 13px/1 var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--soft);text-align:left;padding:22px 22px 10px}
th,td{padding:11px 22px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
tbody th{font-weight:500;color:var(--soft);width:30%}
tbody td{width:35%;text-align:center}
tr.diff td{font-weight:700}
td.win{color:var(--sage-ink);background:var(--sage)}
.legend{padding:14px 22px 20px;color:var(--soft);font-size:14px;border-top:1px solid var(--line)}
@media (max-width:720px){.pickers{grid-template-columns:1fr}.pickers .vs{display:none}th,td{padding:10px 12px}.heads>div{padding:16px 10px}.heads h2{font-size:18px}}
.tile .foot{flex-wrap:wrap}.tile .foot .btn{flex:1 1 auto}
@media (max-width:720px){.top nav{gap:10px}.top nav a{font-size:14.5px}.top .wrap{flex-wrap:wrap}}
#cookies{position:fixed;left:16px;right:16px;bottom:84px;z-index:35;max-width:560px;margin:0 auto;background:var(--card);border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.25);padding:16px 18px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:15px}
#cookies[hidden]{display:none}#cookies p{margin:0;flex:1 1 260px}
.top .wrap{flex-wrap:wrap}.top .rech{flex:1 1 260px;min-width:200px;max-width:440px;position:relative}.search.petite{margin:0}.search.petite input{font-size:15px;padding:9px 12px 9px 34px;border-radius:99px;border-width:1.5px;box-shadow:none}
.search.petite:before{left:12px;top:11px;width:10px;height:10px;border-width:2px}.search.petite:after{left:23px;top:23px;width:6px;height:2px}.search.petite .sres{min-width:320px;right:0;left:auto}
.cmp.diffseul tbody tr:not(.diff){display:none}.seul{display:flex;gap:8px;align-items:center;padding:14px 22px 0;font-size:15px}
.tabtout{font-size:14px}.tabtout th{cursor:pointer;white-space:nowrap;position:sticky;top:0;background:var(--card)}.tabtout th[aria-sort]{color:var(--accent)}.tabtout td{white-space:nowrap}
.versions{display:flex;flex-wrap:wrap;gap:10px}

/* 11/10/2026 — les notes en couleur avec un mot, et l'étiquette « N°1 » (un seul modèle par besoin, jamais d'ex æquo) */
.bar em.n5,.mot.n5{background:#2e7d4f}.bar em.n4,.mot.n4{background:#5d9b45}.bar em.n3,.mot.n3{background:#c9a227}.bar em.n2,.mot.n2{background:#df8a3c}.bar em.n1,.mot.n1{background:#c8553d}
.bar{grid-template-columns:150px 1fr 34px 96px 84px}.bar .mot{text-decoration:none;color:#fff;font-size:12.5px;font-weight:700;border-radius:99px;padding:3px 9px;text-align:center;white-space:nowrap}
.num1s{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.num1{display:inline-block;background:var(--deux);color:#3a2408;font-size:13px;font-weight:700;border-radius:99px;padding:4px 11px}
@media (max-width:720px){.bar{grid-template-columns:110px 1fr 30px 70px}.bar .mot{font-size:11.5px;padding:2px 6px}}
/* barre du haut sur écran étroit : logo + les deux liens sur une ligne, la recherche dessous sur toute la largeur */
@media (max-width:980px){.top .rech{order:4;flex:1 1 100%;max-width:none}.top nav a.cmp{order:2}}
@media (max-width:720px){.top nav a.meil,.top nav a.cmp{font-size:14.5px}}
@media (max-width:520px){.top .logo{flex-basis:100%}.top nav a.meil{margin-left:0}.top nav a.cmp{margin-left:auto}}
/* 11/10/2026 — téléphone : barre du haut sur 3 lignes nettes (logo · les deux liens · la recherche), questionnaire en 2 colonnes, boutons faciles à toucher */
@media (max-width:520px){
 .top .wrap{gap:8px 10px;padding-top:11px;padding-bottom:11px}
 .top nav a.meil,.top nav a.cmp{font-size:13.5px}.top nav a.meil svg{width:16px;height:16px}
 .modal{padding:8px}.dialog{padding:16px 14px;max-height:calc(100vh - 16px);border-radius:16px}.dialog>h2{font-size:20px}
 .opts.serre{grid-template-columns:1fr 1fr;gap:7px}.opts.serre .opt{min-height:44px;padding:7px 10px;font-size:14px;line-height:1.2}.opts.serre .opt small{font-size:11.5px;line-height:1.2}
 .qq h3{font-size:15px;margin:12px 0 6px}.qnav.bas{bottom:-16px;flex-direction:column;align-items:stretch;gap:8px;text-align:center}.qnav.bas .btn{width:100%}
 .res{grid-template-columns:1fr}
}
/* le trophée devant « Meilleurs grille-pain » (choix Thomas, 11/10/2026) */
.top nav a.meil{display:inline-flex;align-items:center;gap:7px}.top nav a.meil svg{flex:none;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* 11/10/2026 (Thomas) — tableaux sur téléphone : aucun défilement sur le côté. Un tableau à colonnes devient une pile de cartes. */
table.tk{table-layout:fixed}table.tk td,table.tk th{overflow-wrap:anywhere}
.tritab{display:none}
@media (max-width:720px){
 .tw{overflow:visible}
 .page table.tk tbody th{width:44%}
 .page table.tc,.page table.tl,.page table.tabtout{display:block;background:none;box-shadow:none;border-radius:0;overflow:visible}
 table.tc thead,table.tl thead,table.tabtout thead{display:none}
 table.tc tbody,table.tl tbody,table.tabtout tbody{display:grid;gap:12px}
 table.tc tr,table.tl tr,table.tabtout tr{display:block;background:var(--card);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
 table.tabtout tr[hidden]{display:none}
 .page table.tc th[scope=row],.page table.tl th[scope=row],.page table.tabtout th[scope=row]{display:block;width:auto;border:0;padding:12px 16px 8px;font:700 16px/1.3 var(--title);color:var(--ink);text-align:left;position:static;white-space:normal}
 .page table.tc td,.page table.tl td,.page table.tabtout td{display:flex;justify-content:space-between;align-items:center;gap:14px;width:auto;border-top:1px solid var(--line);padding:9px 16px;text-align:right;white-space:normal;font-weight:500}
 table.tc td::before,table.tl td::before,table.tabtout td::before{content:attr(data-l);color:var(--soft);font-weight:500;text-align:left;flex:0 1 52%}
 .page table.tc tr.diff td{font-weight:700}
 table.tl th[scope=row]::before{content:"N° "}
 .page table.tl td[data-l="Modèle"]{font-weight:700}
 .page table.tl td[data-l=""]{justify-content:center;padding:12px 16px}table.tl td[data-l=""]::before{content:none}.page table.tl td[data-l=""] .btn{width:100%}
 table.tabtout td[data-l^="Note"]{display:none}
 .tritab{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:15px}.tritab select{flex:1;font:600 15px/1.2 var(--body);padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
 .cmp table{table-layout:fixed}.cmp th,.cmp td{overflow-wrap:anywhere;padding:9px 8px;font-size:14.5px}.cmp tbody th{width:34%}.cmp tbody td{width:33%}
}

/* ===== 11/10/2026 (choix Thomas) — LOOK « RAYON DE MAGASIN » + COULEURS « GLACE PILÉE » : les pages ===== */
.page{max-width:900px;padding-top:22px}.page.large{max-width:1180px}
.page h1{font-size:clamp(24px,3.2vw,32px)}.page h2{margin:30px 0 10px}
.ariane{font-size:13.5px;margin-bottom:10px}
.tete,.duo>div,.barres,.alt,.fil,.calc,.reponse,.page table{box-shadow:none;border:1px solid var(--line)}
.page table{border-collapse:separate;border-spacing:0}
.page th,.page td{padding:9px 14px}.page table tr:first-child>*{border-top:0}
.tete .cles b{font-size:26px}
.reponse{font-size:17px;border-left:4px solid var(--accent);padding:14px 18px}
.photo{border-radius:8px}
.puces span{border-width:1px;border-radius:6px}
.num1{background:var(--ink);color:var(--givre);border-radius:6px;font-size:12.5px;padding:4px 9px}
.bar i,.bar em{border-radius:3px}.bar .mot{border-radius:6px}
/* accueil : un bandeau de rayon, pas une grande affiche */
.hero{text-align:left;max-width:1180px;padding:26px 20px 8px}
.hero h1{font-size:clamp(24px,3.4vw,34px)}.hero .lead{margin-left:0}
.search{margin-top:16px;max-width:680px}
.search input{font-size:16px;padding:14px 16px 14px 46px;border-radius:8px;border-width:1px;box-shadow:none}
.search:before{left:16px;top:15px;width:13px;height:13px;border-width:2px}.search:after{left:30px;top:30px;width:8px;height:2px}
.sres{border-radius:8px;border:1px solid var(--line)}
.try,.ways{justify-content:flex-start}.ways{margin-top:16px}
.search.petite{max-width:none}
.search.petite input{border-radius:8px;border:0;padding:10px 12px 10px 36px;font-size:15px;color:var(--ink)}
.search.petite:before{top:12px;left:13px}.search.petite:after{top:24px;left:24px}
.search.petite .sres{left:0;right:auto;color:var(--ink)}
/* catalogue : les filtres à gauche, les produits à droite */
.fil{border-radius:var(--r);padding:12px 14px}
.fil select,.calc input,.pickers select,.tritab select{border-width:1px;border-radius:8px}
.prods{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
@media (min-width:900px){
 #zone:has(>.fil){display:grid;grid-template-columns:232px 1fr;gap:0 18px;align-items:start}
 #zone>.fil{grid-row:1/span 4;flex-direction:column;align-items:stretch;gap:14px;margin:0;position:sticky;top:12px}
 #zone>.fil .g{flex-direction:column;align-items:stretch;gap:5px;margin:0!important}
 #zone>.fil .chip{text-align:left}#zone>.fil select{width:100%}
 #zone>.fil~*{grid-column:2}#zone>.maj{margin-top:0}
}
.pickers .vs,.calc output{font-style:normal}
#cookies{border:1px solid var(--line)}

/* ===== 11/10/2026 (Thomas) — la note globale sur 10 (pastille + bulle d'explication), les points forts et faibles, les grosses pages de classement ===== */
.ng{display:inline-flex;align-items:baseline;gap:3px;border-radius:8px;padding:3px 8px;color:#fff;cursor:help;white-space:nowrap;font-size:13px;line-height:1.3;vertical-align:middle}
.ng b{font-size:16px;font-weight:800}.ng small{font-size:11.5px;opacity:.85}.ng em{font-style:normal;font-weight:700;margin-left:5px}
.ng.n5{background:#2e7d4f}.ng.n4{background:#4f8f3b}.ng.n3{background:#a98414}.ng.n2{background:#c36f20}.ng.n1{background:#c8553d}
.ng:hover,.ng:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.ngx{display:none}
#ngpop{position:absolute;z-index:50;width:min(340px,calc(100vw - 24px));background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(13,39,51,.22);padding:14px 16px;font-size:14px;line-height:1.45;white-space:normal;text-align:left}
#ngpop strong{display:block;font-size:15.5px;margin-bottom:6px}#ngpop>span{display:block;margin:6px 0;color:var(--soft)}
#ngpop a{display:inline-block;margin-top:6px;color:var(--accent);font-weight:700}
#ngpop .ngr{display:grid;grid-template-columns:1fr 70px 26px;gap:8px;align-items:center;margin:3px 0;color:var(--ink)}#ngpop .ngr i{font-style:normal}#ngpop .ngr small{color:var(--soft)}
#ngpop .ngr u{display:block;height:7px;background:var(--tint);border-radius:3px;overflow:hidden;text-decoration:none}#ngpop .ngr s{display:block;height:100%;background:var(--accent)}#ngpop .ngr b{text-align:right}
.ngl{display:block;margin-top:6px}
.ngt{display:flex;align-items:center;gap:10px;margin-bottom:6px}.ngt .ng{font-size:15px;padding:6px 12px}.ngt .ng b{font-size:24px}.ngt>span:not(.ng){color:var(--soft);font-size:13.5px}
.pm{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:10px}
.pm ul{list-style:none;margin:0;padding:0;font-size:14.5px}.pm li{position:relative;padding:2px 0 2px 22px}
.pm li::before{position:absolute;left:0;top:1px;font-weight:800;font-size:16px}
.pm .plus li::before{content:"+";color:#2e7d4f}.pm .moins li::before{content:"−";color:#c8553d}
.alt.top5 h3{display:flex;align-items:center;gap:10px}.alt.top5 .rg{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--ink);color:var(--givre);font-size:16px}
.alt.top5 .ngl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}.alt.top5 .nb{font-size:13.5px;color:var(--soft)}
.page.large>h2~h3{font-size:17px;margin:20px 0 4px}.page.large>h3+p,.page.large>p{max-width:820px}
.page.large .qr h3{font-size:17px}
@media (max-width:720px){.pm{grid-template-columns:1fr}table.tl td[data-l="Note globale"]{justify-content:space-between}}

/* 11/10/2026 (Thomas) — les questions fréquentes : des volets qui s'ouvrent au clic */
.qr details.q{background:var(--card);border-radius:14px;box-shadow:var(--shadow);margin:10px 0;padding:0 18px}
.qr summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0}
.qr summary::-webkit-details-marker{display:none}
.qr summary h3,.page.large .qr summary h3{font-size:17px;margin:0}
.qr summary::after{content:"+";font:700 24px/1 var(--title);color:var(--accent);flex:none}
.qr details[open] summary::after{content:"\2013"}
.qr details.q p{margin:0;padding:0 0 16px}
/* les blocs défilants posés dans une page */
.page .railbox{margin-top:38px}.page .railh h2{margin:0}.page .rail .tile h3{font-size:17px}