/* meilleur-pc-portable - gabarit complet.
   L ancien fichier (1131 o) ne stylait que la typographie et le bandeau : les tableaux
   comparatifs sortaient en texte tabule, les images en vignettes brutes et les liens produit
   en liens bleus. Tout est repris ici, y compris ce qui n existait pas : tableaux, cartes
   produit, boutons d achat, encadre d affiliation.
   Contrainte assumee : le HTML des pages n a presque aucune classe -> l essentiel doit tenir
   sur des selecteurs de balises et de voisinage, pour fonctionner sans reecrire les pages. */

*{box-sizing:border-box}

:root{
  --bleu:#10243e; --bleu-2:#16395f; --bleu-3:#23466d;
  --or:#ffb703; --or-fonce:#e09e00;
  --fond:#f5f7fa; --carte:#fff; --texte:#19212b; --texte-2:#4a5b6e;
  --bord:#dbe3ec; --ombre:0 1px 2px rgba(16,36,62,.06),0 4px 16px rgba(16,36,62,.07);
  --rayon:10px;
}

body{margin:0;background:var(--fond);color:var(--texte);
  font:17px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%}

/* ---------- en-tete et navigation ---------- */
header{background:#fff;color:var(--bleu);border-bottom:1px solid var(--bord)}
header .wrap{max-width:1840px;min-height:84px;margin:auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;align-items:baseline;flex:none;color:var(--bleu);font-size:1.55rem;font-weight:800;letter-spacing:-.035em;line-height:1;text-decoration:none;white-space:nowrap}
.brand span{color:#e52620;font-weight:500}
header nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:0;padding:0}
header nav a{color:var(--bleu);text-decoration:none;padding:9px 14px;border-radius:0;font-size:1rem;font-weight:500;line-height:1.25;transition:color .15s,box-shadow .15s}
header nav a:hover,header nav a:focus{background:transparent;color:#e52620}
header nav a[aria-current="page"]{background:transparent;color:var(--bleu);font-weight:750;box-shadow:inset 0 -2px 0 #e52620}

main{max-width:880px;margin:34px auto 64px;padding:0 24px}

/* ---------- titres ---------- */
h1{font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.12;margin:0 0 18px;
  color:var(--bleu);letter-spacing:-.02em}
h2{font-size:clamp(1.35rem,2.6vw,1.7rem);line-height:1.25;margin:52px 0 14px;
  color:var(--bleu-2);border-left:4px solid var(--or);padding-left:13px;letter-spacing:-.01em}
h3{font-size:1.12rem;line-height:1.35;margin:30px 0 6px;color:var(--bleu)}
p{margin:0 0 15px}
.lead{font-size:1.1rem;color:var(--texte-2)}
section{padding-bottom:2px}

/* ---------- listes ---------- */
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin:7px 0}
ul li::marker{color:var(--or-fonce)}

/* ---------- tableau comparatif ----------
   c est la piece maitresse d un comparateur : sans style, il sortait en texte tabule. */
table{width:100%;border-collapse:collapse;margin:20px 0 26px;background:var(--carte);
  border:1px solid var(--bord);border-radius:var(--rayon);overflow:hidden;
  box-shadow:var(--ombre);font-size:.94rem}
thead th{background:var(--bleu);color:#fff;text-align:left;font-weight:600;
  padding:12px 13px;font-size:.88rem;letter-spacing:.01em;white-space:nowrap}
td,tbody th{padding:11px 13px;border-top:1px solid var(--bord);vertical-align:top}
tbody th{text-align:left;font-weight:600;color:var(--bleu)}
tbody tr:nth-child(even){background:#fafcfe}
tbody tr:hover{background:#f0f6fd}
td a{color:var(--bleu-2);font-weight:600}
/* un tableau large doit pouvoir defiler sur mobile plutot que deborder */
.tableau,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0 26px}
.tableau table,.table-wrap table{margin:0}

/* ---------- classement et cartes produit ---------- */
.choix-rapide{margin:26px 0 14px}.choix-rapide h2{margin-top:26px}.choix-intro{max-width:700px;color:var(--texte-2)}
.pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 8px}
.pick-card{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon);padding:16px;box-shadow:var(--ombre)}
.pick-rank{position:absolute;top:10px;left:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bleu);color:#fff;font-size:.85rem;font-weight:800}
.pick-image{height:150px;display:flex;align-items:center;justify-content:center;background:#f7f9fc;border-radius:7px;overflow:hidden}
.pick-image img{display:block;width:100%;height:100%;object-fit:contain;padding:8px}
.pick-copy{min-width:0}.pick-label{margin:0 0 3px;color:var(--bleu-2);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.045em}.pick-card h3{margin:0 0 8px;padding:0;border:0;box-shadow:none;background:transparent;font-size:1.1rem}.pick-specs{margin:0 0 10px;padding-left:17px;font-size:.88rem;line-height:1.4}.pick-specs li{margin:2px 0}.pick-price{margin:0 0 7px;font-size:.9rem}.pick-price strong{font-size:1.04rem;color:var(--bleu)}.pick-why{margin:0 0 11px;font-size:.84rem;line-height:1.42;color:var(--texte-2)}
.buy-button,a[href*="amazon."]{display:inline-flex;align-items:center;justify-content:center;background:var(--or);color:var(--bleu);font-weight:800;text-decoration:none;padding:10px 14px;border-radius:7px;border:1px solid var(--or-fonce);box-shadow:0 1px 0 rgba(0,0,0,.06);transition:background .15s,transform .05s;font-size:.9rem}.buy-button:hover,.buy-button:focus,a[href*="amazon."]:hover,a[href*="amazon."]:focus{background:#ffc633;color:var(--bleu)}.buy-button:active,a[href*="amazon."]:active{transform:translateY(1px)}
td a[href*="amazon."]{padding:6px 12px;font-size:.87rem;border-radius:6px}
img{max-width:100%;height:auto}

/* ---------- divulgation d affiliation ---------- */
p:has(> strong:first-child),.affiliation{}
main > p:nth-of-type(3),.divulgation{}
/* repere par le texte : la phrase de divulgation commence toujours par Liens partenaires */
.affil,.affiliation,.divulgation{background:#fff8e6;border:1px solid #f2d98a;
  border-left:4px solid var(--or);border-radius:8px;padding:12px 16px;font-size:.9rem;
  color:#5a4a1f;margin:0 0 22px}

/* ---------- pied de page ---------- */
footer{background:var(--bleu);color:#c3d4e6;padding:30px 0;font-size:.9rem;margin-top:56px}
footer a{color:#e8f1fa}

/* ---------- mobile ---------- */
@media (max-width:620px){
  main{margin:24px auto 44px;padding:0 16px}
  header .wrap{min-height:auto;padding:16px;align-items:flex-start;flex-direction:column;gap:14px}
  .brand{font-size:1.32rem}
  header nav{justify-content:flex-start;gap:0;width:100%}
  header nav a{font-size:.94rem;padding:7px 10px}
  table{font-size:.86rem;display:block;overflow-x:auto;white-space:nowrap}
  thead th,td{padding:9px 10px}
  .pick-grid{grid-template-columns:1fr;gap:12px}
  .pick-card{grid-template-columns:108px minmax(0,1fr);padding:13px}
  .pick-image{height:132px}
  .buy-button{display:flex;width:100%;text-align:center}
  a[href*="amazon."]{display:block;text-align:center}
}

/* ---------- mode sombre ---------- */
@media (prefers-color-scheme:dark){
  :root{--fond:#111820;--carte:#18222e;--texte:#e9eef4;--texte-2:#b3c3d3;
    --bord:#2a3846;--ombre:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25)}
  header{background:#f7f9fc} footer{background:#08131f}
  h1,h3{color:#f5f8fc}
  h2{color:#a9cff5}
  tbody tr:nth-child(even){background:#1c2734}
  tbody tr:hover{background:#22303f}
  tbody th{color:#cfe3f7}
  td a{color:#8fc0f0}
  a{color:#8fc0f0}
  .affil,.affiliation,.divulgation{background:#2a2415;border-color:#5c4a1c;color:#e8d9ae}
}


/* Navigation en clusters : toutes les URLs utiles restent accessibles depuis chaque page. */
.site-header{position:relative;z-index:20;background:#fff;border-bottom:1px solid var(--bord);box-shadow:0 2px 12px rgba(16,36,62,.035)}
.site-header .wrap{max-width:1240px;min-height:78px;padding:0 28px;gap:26px}
.site-nav{display:flex;align-items:stretch;justify-content:flex-end;gap:3px;min-height:78px}
.site-nav > a,.mega-menu > summary{display:flex;align-items:center;color:var(--bleu);font:700 .93rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;text-decoration:none;padding:0 12px;cursor:pointer;white-space:nowrap;border:0;background:transparent;list-style:none}
.mega-menu > summary::-webkit-details-marker{display:none}
.mega-menu > summary::after{content:"";width:7px;height:7px;margin:0 0 3px 8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s}
.site-nav > a:hover,.site-nav > a:focus,.mega-menu > summary:hover,.mega-menu > summary:focus{color:#e52620;outline:none}
.site-nav > a[aria-current="page"],.mega-menu:has(a[aria-current="page"]) > summary{box-shadow:inset 0 -3px 0 #e52620}
.mega-menu{position:relative;display:flex}
.mega-menu[open] > summary{color:#e52620}
.mega-menu[open] > summary::after{transform:rotate(225deg);margin-bottom:-3px}
.mega-panel{position:absolute;top:calc(100% - 7px);right:0;width:min(680px,calc(100vw - 32px));padding:22px;background:#fff;border:1px solid var(--bord);border-radius:0 0 14px 14px;box-shadow:0 16px 35px rgba(16,36,62,.16);display:grid;grid-template-columns:1fr 1fr;gap:28px}
.mega-panel--brands,.mega-panel--advice{width:min(360px,calc(100vw - 32px));grid-template-columns:1fr}
.mega-panel p{margin:0 0 9px;color:#687689;font-size:.72rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}
.mega-panel a{display:block;padding:7px 8px;border-radius:6px;color:var(--bleu);font-size:.93rem;font-weight:650;line-height:1.25;text-decoration:none}
.mega-panel a:hover,.mega-panel a:focus{color:#c91b17;background:#fff0ef;outline:none}
.mega-panel a[aria-current="page"]{color:#c91b17;background:#fff0ef}

.site-footer{background:#10243e;color:#dce6f0;margin-top:64px;border:0}
.site-footer .wrap{max-width:1240px;padding:42px 28px 22px}
.site-footer .brand{color:#fff;font-size:1.35rem}.site-footer .brand span{color:#ff6b64}
.footer-intro{max-width:540px}.footer-intro p{margin:9px 0 30px;color:#b8c8d8;font-size:.95rem;line-height:1.5}
.footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px;padding:24px 0 28px;border-top:1px solid rgba(220,230,240,.2)}
.footer-grid section{padding:0}.footer-grid p{margin:0 0 8px;color:#fff;font-size:.8rem;font-weight:800;letter-spacing:.04em}
.footer-grid a{display:block;width:max-content;max-width:100%;padding:4px 0;color:#c3d1df;font-size:.88rem;line-height:1.35;text-decoration:none}
.footer-grid a:hover,.footer-grid a:focus,.footer-grid a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:3px;outline:none}
.footer-bottom{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:18px;border-top:1px solid rgba(220,230,240,.2);color:#a6b9ca;font-size:.78rem;line-height:1.45}

@media(max-width:900px){
 .site-header .wrap{min-height:0;display:block;padding:14px 20px 0}.site-nav{min-height:0;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;margin-top:11px}.site-nav > a,.mega-menu > summary{min-height:42px;padding:0 10px;font-size:.89rem}.mega-menu{position:static}.mega-panel{top:auto;left:20px;right:20px;width:auto;max-width:none;border-radius:10px;grid-template-columns:1fr;gap:16px}.mega-panel--brands,.mega-panel--advice{width:auto}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}}
@media(max-width:520px){
 .site-header .wrap{padding:13px 14px 0}.brand{font-size:1.32rem}.site-nav{display:block;margin-top:10px;padding-bottom:10px}.site-nav > a,.mega-menu > summary{min-height:42px;padding:0 7px}.mega-menu{display:block}.mega-panel{position:static;width:100%;margin:0 0 8px;padding:14px;border-radius:8px;box-shadow:none}.site-footer .wrap{padding:34px 20px 20px}.footer-grid{grid-template-columns:1fr;gap:20px}.footer-intro p{margin-bottom:24px}}