/* Noctura, habillage « Mesure ». Pense d'abord pour le telephone : rien ne deborde, les tableaux deviennent des fiches. */
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:#f4f6f8;color:#111827;font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;line-height:1.55;overflow-x:hidden}
img{max-width:100%;height:auto}a{color:inherit}button{font:inherit;cursor:pointer}
.large{max-width:1120px;margin:0 auto;padding:0 20px}
/* en-tete */
.tete{background:#fff;border-bottom:1px solid #dfe3e8;position:sticky;top:0;z-index:20}
.tete-in{display:flex;align-items:center;gap:18px;min-height:60px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.logo{font-size:22px;font-weight:700;text-decoration:none;letter-spacing:-.02em}.logo b{color:#0f766e}
.tete nav{display:flex;gap:16px;flex:1;font-size:14.5px;flex-wrap:wrap}.tete nav a{color:#4b5563;text-decoration:none;padding:6px 0}.tete nav a.actif{color:#0f766e;font-weight:600}
.menu-b{display:none;background:none;border:1px solid #dfe3e8;border-radius:6px;font-size:18px;padding:6px 11px}
.outil{background:#111827;color:#fff;font-size:14px;border-radius:6px;padding:8px 14px;text-decoration:none;white-space:nowrap}
.cherche{position:relative;flex:0 1 250px}.cherche input{width:100%;border:1px solid #cfd5dc;border-radius:6px;padding:8px 11px;font:inherit;font-size:14.5px;background:#f9fafb}
.cherche-r{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:280px;background:#fff;border:1px solid #dfe3e8;border-radius:8px;box-shadow:0 10px 30px rgba(17,24,39,.15);padding:8px;max-height:70vh;overflow:auto;z-index:30}
.cherche-r a{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:6px;text-decoration:none;font-size:14.5px}.cherche-r a:hover{background:#f0fdfa}
.cherche-r small{color:#6b7280;white-space:nowrap}.cr-t{font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;color:#6b7280;margin:6px 10px}
/* haut de page */
.fil{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#6b7280;margin:20px 0 8px;overflow-wrap:anywhere}.fil a{text-decoration:none}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start;margin:8px 0 36px}
.sur-titre{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#0f766e;margin:0 0 8px}
h1{font-size:36px;line-height:1.15;margin:0 0 16px;letter-spacing:-.02em;overflow-wrap:anywhere}
h2{font-size:22px;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid #111827;line-height:1.25}h3{font-size:17px;margin:18px 0 8px}
.reponse{background:#fff;border:1px solid #dfe3e8;border-radius:8px;padding:16px 18px;font-size:16.5px;margin:0 0 10px}.meta{font-size:13px;color:#6b7280;margin:8px 0 0}
.quiz{background:#ecfdf5;border:1px solid #99f6e4;border-radius:8px;padding:20px}.quiz-t{font-weight:700;font-size:18px;margin:0 0 4px}.quiz p{margin:0 0 12px}
section{margin:40px 0}
/* boutons */
.bouton{display:inline-block;text-align:center;text-decoration:none;font-weight:700;background:#0f766e;color:#fff;padding:11px 16px;border-radius:6px;border:0;min-height:44px}
.bouton.plein{display:block;width:100%}.bouton.clair{background:#fff;color:#111827;border:1px solid #cfd5dc}
a.lien{color:#0f766e;font-weight:600;text-decoration:none;white-space:nowrap}
/* cartes */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.carte{background:#fff;border:1px solid #dfe3e8;border-radius:8px;padding:16px;display:flex;flex-direction:column;min-width:0}
.carte-tete{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;min-height:30px}
.role{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#0f766e;text-transform:uppercase;letter-spacing:.05em}
.note{display:inline-flex;align-items:baseline;gap:1px;background:#111827;color:#fff;border-radius:6px;padding:3px 8px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}.note small{font-weight:500;font-size:11px;opacity:.75}
a.photo{display:flex;aspect-ratio:4/3;align-items:center;justify-content:center;overflow:hidden;background:#fff;border:1px solid #eef0f3;border-radius:6px;margin-bottom:12px}
a.photo img{width:100%;height:100%;object-fit:contain}
.carte h3{font-size:16px;margin:0;line-height:1.3;overflow-wrap:anywhere}.marque{font-size:13px;color:#6b7280;margin:4px 0}
.faits{list-style:none;padding:0;margin:8px 0}.faits li{border-top:1px solid #eef0f3;padding:6px 0;font-size:14px}.faits li:before{content:'✓ ';color:#0f766e;font-weight:700}
.pourquoi{font-size:13.5px;margin:4px 0 12px}.pourquoi summary{cursor:pointer;color:#0f766e;font-weight:600}.pourquoi ul{margin:4px 0 8px;padding-left:18px}.pf,.pl{margin:8px 0 0;font-weight:600}
.carte .bouton{margin-top:auto}.comparer{font-size:13.5px;color:#4b5563;text-align:center;margin-top:10px}
/* tableaux */
.tab{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #dfe3e8;border-radius:8px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;padding:10px 12px;font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;color:#4b5563;background:#f9fafb;border-bottom:1px solid #dfe3e8}
td{padding:10px 12px;border-top:1px solid #eef0f3;vertical-align:middle}tbody tr:hover{background:#f0fdfa}
td.prod{display:flex;align-items:center;gap:10px;min-width:230px}td.prod img{width:44px;height:44px;object-fit:contain;flex:0 0 44px}
table.duel th:first-child{width:26%}table.duel tbody th{border-top:1px solid #eef0f3;border-bottom:0}table.compare th img{width:90px;height:90px;object-fit:contain}
.note-bas{font-size:13px;color:#6b7280;margin:10px 0 0}.cond{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#0f766e}
/* texte */
.texte p,.texte ul,.texte ol{max-width:72ch}.texte li{margin:4px 0}
.retenir{background:#fff;border-left:4px solid #0f766e;padding:12px 16px;max-width:72ch;margin:14px 0}
details{background:#fff;border:1px solid #dfe3e8;border-radius:8px;padding:12px 16px;margin:8px 0;max-width:72ch}summary{font-weight:600;cursor:pointer}
.carte details{border:0;padding:0;background:none}
.liens{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;max-width:none!important}.liens a{color:#0f766e}
.tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.tuile{background:#fff;border:1px solid #dfe3e8;border-radius:8px;padding:16px;text-decoration:none;display:flex;flex-direction:column;gap:4px}.tuile span{font-size:13px;color:#6b7280}
.legal h2{margin-top:28px}
/* outils */
.k-choix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.k-choix label,.filtres legend{font-size:13px;font-weight:600;display:block}
select{width:100%;padding:9px;border:1px solid #cfd5dc;border-radius:6px;font:inherit;background:#fff;min-height:44px}
.cat{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}.filtres{background:#fff;border:1px solid #dfe3e8;border-radius:8px;padding:14px;position:sticky;top:76px;max-height:calc(100vh - 90px);overflow:auto}
.filtres fieldset{border:0;padding:0;margin:0 0 14px}.filtres label{display:block;font-size:14px;padding:5px 0}.filtres small{color:#6b7280}.cat-n{margin:0 0 12px}
/* questionnaire */
dialog#quiz{border:0;border-radius:12px;padding:26px;width:min(860px,94vw);max-height:90vh;box-shadow:0 20px 60px rgba(17,24,39,.35)}dialog::backdrop{background:rgba(17,24,39,.55)}
.q-x{position:absolute;top:10px;right:12px;background:none;border:0;font-size:28px;line-height:1;padding:6px 10px}.q-pas{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#0f766e;margin:0 0 6px}
.q-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.q-o{background:#fff;border:1px solid #cfd5dc;border-radius:8px;padding:14px;text-align:left;min-height:52px}.q-o:hover{border-color:#0f766e;background:#f0fdfa}
.q-pourquoi{color:#4b5563}#choisir{background:#fff;border:1px solid #dfe3e8;border-radius:8px;padding:22px}
/* bas de page */
.flottant{position:fixed;right:18px;bottom:18px;background:#111827;color:#fff;padding:13px 18px;border-radius:6px;border:0;font-weight:700;box-shadow:0 6px 18px rgba(17,24,39,.25);z-index:15}
footer{background:#fff;border-top:1px solid #dfe3e8;padding:28px 0 90px;font-size:13.5px;color:#4b5563;margin-top:56px}.pied{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px}.pied nav{display:flex;flex-direction:column;gap:6px}.pied p{max-width:60ch}
#cookies{position:fixed;left:12px;right:12px;bottom:12px;background:#111827;color:#fff;border-radius:8px;padding:14px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between;z-index:40;font-size:14px;flex-wrap:wrap}#cookies p{margin:0;flex:1 1 240px}#cookies a{color:#99f6e4}#cookies[hidden]{display:none}
/* tablette */
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.cartes{grid-template-columns:repeat(2,minmax(0,1fr))}.tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}.cat{grid-template-columns:minmax(0,1fr)}.filtres{position:static;max-height:none}.k-choix{grid-template-columns:repeat(2,minmax(0,1fr))}h1{font-size:30px}}
/* telephone */
@media(max-width:640px){.large{padding:0 14px}h1{font-size:25px}h2{font-size:19px}section{margin:30px 0}
 .menu-b{display:block;margin-left:auto}.outil{display:none}.tete nav{display:none;flex-basis:100%;flex-direction:column;gap:0;order:5}.tete nav.ouvert{display:flex}.tete nav a{padding:11px 0;border-top:1px solid #eef0f3}.cherche{flex:1 1 100%;order:4}
 .cartes{grid-template-columns:minmax(0,1fr)}.liens{grid-template-columns:minmax(0,1fr)}.pied{grid-template-columns:minmax(0,1fr)}.q-opts{grid-template-columns:minmax(0,1fr)}dialog#quiz{padding:20px 16px}
 /* un tableau de produits devient une pile de fiches lisibles */
 table.liste thead{display:none}table.liste,table.liste tbody,table.liste tr,table.liste td{display:block;width:100%}
 table.liste tr{border-top:6px solid #f4f6f8;padding:10px 12px}table.liste td{border:0;padding:5px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
 table.liste td:before{content:attr(data-l);font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;color:#6b7280;text-align:left;flex:0 0 42%}
 table.liste td.prod{min-width:0;justify-content:flex-start;text-align:left;font-weight:600}table.liste td.prod:before,table.liste td.act:before{content:none}
 table.liste td.act a{display:block;width:100%;text-align:center;background:#0f766e;color:#fff;border-radius:6px;padding:11px}
 table.duel{font-size:13.5px}table.duel th,table.duel td{padding:8px}.flottant{right:12px;bottom:12px;padding:11px 14px;font-size:14px}}
@media print{.tete,.flottant,#cookies,.quiz{display:none}}

/* rangées de vignettes qui défilent (les guides ne sont jamais en liste) */
.railbox{margin:34px 0 8px}.railh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:10px}.railh h2{margin:0}
.railh .ctl{display:flex;align-items:center;gap:8px;flex:0 0 auto}.railh .all{font-size:14.5px;color:#0f766e;font-weight:600;text-decoration:none;margin-right:6px;white-space:nowrap}
.arr{width:36px;height:36px;border-radius:50%;border:1px solid #dfe3e8;background:#fff;font-size:20px;line-height:1;color:#111827}.arr:hover{border-color:#0f766e;color:#0f766e}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:4px 2px 16px;scrollbar-width:thin;scrollbar-color:#dfe3e8 transparent}
.rail>.tile{flex:0 0 250px;scroll-snap-align:start}
.tile{background:#fff;border:1px solid #dfe3e8;border-radius:10px;padding:12px 14px 14px;text-decoration:none;display:flex;flex-direction:column;gap:6px;min-width:0}
.tile:hover{border-color:#0f766e;box-shadow:0 4px 14px rgba(15,23,42,.07)}
.tile img,.tile .sans-photo{width:100%;height:130px;object-fit:contain;background:#fff;border-radius:6px;display:block}.tile .sans-photo{background:#eef2f5}
.tile .etq{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#0f766e}
.tile b{font-size:15.5px;line-height:1.3;font-weight:600}.tile .lire{margin-top:auto;align-self:flex-end;font-size:14px;color:#0f766e;font-weight:600}
.mur{margin-top:2px}.mur summary{cursor:pointer;color:#0f766e;font-weight:600;font-size:14.5px;padding:6px 0}
.mur-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:10px}
@media(max-width:900px){.mur-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.rail>.tile{flex-basis:210px}.railh .arr{display:none}.tile img,.tile .sans-photo{height:110px}.mur-in{gap:10px}.tile b{font-size:14.5px}}

/* les 5 questions à cliquer */
.qcm{background:#fff;border:1px solid #dfe3e8;border-top:3px solid #0f766e;border-radius:12px;padding:22px 22px 18px;margin:30px 0}.qcm h2{margin:0 0 4px}.qcm-intro{color:#4b5563;margin:0 0 14px}
.qcm-q{border:0;padding:0;margin:0 0 14px;min-width:0}.qcm-q legend{font-weight:600;padding:0;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.qcm-q legend span{flex:0 0 26px;height:26px;border-radius:50%;background:#0f766e;color:#fff;font-size:13px;display:inline-flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace}
.qcm-o{display:flex;flex-wrap:wrap;gap:8px}.qo{background:#fff;border:1px solid #cfd5dc;border-radius:999px;padding:9px 15px;font-size:14.5px;min-height:42px;color:#111827}
.qo:hover{border-color:#0f766e;background:#f0fdfa}.qo.on{background:#0f766e;border-color:#0f766e;color:#fff;font-weight:600}.qo.flou{color:#6b7280;border-style:dashed}.qo.flou.on{color:#fff;border-style:solid}
.qcm-r{border-top:1px solid #e5e7eb;margin-top:6px;padding-top:14px}.qcm-n{margin:0 0 6px}.qcm-n b{color:#0f766e;font-size:18px}.qcm-vide{color:#6b7280;margin:6px 0 0}
.q-pourquoi.non{color:#92400e}.qcm-bas{font-size:13.5px;color:#6b7280}button.lien{background:none;border:0;padding:0;color:#0f766e;text-decoration:underline;font-size:inherit}
dialog#quiz .qcm-in{margin-top:8px}
@media(max-width:640px){.qcm{padding:16px 14px}.qo{padding:9px 12px;font-size:14px}}