/* 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:var(--bleu);color:#fff;border-bottom:4px solid var(--or)}
.wrap{max-width:1020px;margin:auto;padding:0 24px}
.brand{padding:22px 0 10px;font-weight:800;font-size:1.35rem;letter-spacing:-.01em}
.brand a{color:#fff;text-decoration:none}
nav{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:14px}
nav a{color:#cddcec;text-decoration:none;padding:7px 12px;border-radius:6px;
  font-size:.94rem;font-weight:500;transition:background .15s,color .15s}
nav a:hover,nav a:focus{background:var(--bleu-3);color:#fff}
nav a[aria-current],nav a.actif{background:var(--or);color:var(--bleu);font-weight:700}

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}

/* ---------- bloc produit ----------
   pas de conteneur dans le HTML : on compose la carte a partir du voisinage
   h3 -> img -> paragraphes -> lien. */
section h3{background:var(--carte);border:1px solid var(--bord);border-bottom:0;
  border-radius:var(--rayon) var(--rayon) 0 0;margin:34px 0 0;padding:15px 18px 12px;
  box-shadow:var(--ombre)}
section h3 + img{display:block;background:var(--carte);border:1px solid var(--bord);
  border-top:0;border-bottom:0;margin:0;padding:6px 18px 12px;
  width:auto;height:auto;max-width:200px;max-height:200px;object-fit:contain}
section h3 + img ~ p{background:var(--carte);border:1px solid var(--bord);border-top:0;
  border-bottom:0;margin:0;padding:0 18px 12px}
section h3 + img ~ p:last-of-type{border-bottom:1px solid var(--bord);
  border-radius:0 0 var(--rayon) var(--rayon);padding-bottom:18px;margin-bottom:8px}

img{max-width:100%;height:auto}

/* ---------- bouton d achat ----------
   tout lien vers une fiche produit devient un bouton, sans toucher au HTML. */
a[href*="amazon."]{display:inline-block;background:var(--or);color:var(--bleu);
  font-weight:700;text-decoration:none;padding:11px 20px;border-radius:8px;
  border:1px solid var(--or-fonce);box-shadow:0 1px 0 rgba(0,0,0,.06);
  transition:background .15s,transform .05s;font-size:.97rem}
a[href*="amazon."]:hover,a[href*="amazon."]:focus{background:#ffc633}
a[href*="amazon."]:active{transform:translateY(1px)}
/* dans un tableau, le bouton reste discret */
td a[href*="amazon."]{padding:6px 12px;font-size:.87rem;border-radius:6px}

a{color:var(--bleu-2)}
a:hover{color:var(--bleu)}

/* ---------- 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}
  .wrap{padding:0 16px}
  table{font-size:.86rem;display:block;overflow-x:auto;white-space:nowrap}
  thead th,td{padding:9px 10px}
  a[href*="amazon."]{display:block;text-align:center}
  section h3 + img{max-width:150px;max-height:150px}
}

/* ---------- 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,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}
}