/* lachainequiva : feuille de style unique du site (style 1 « flanc de pneu », choisi le 15/10/2026).
   Polices copiées dans /fonts (licence SIL OFL 1.1, sources dans contexte.md). Couple T1 (diversite-catalogue.md). */

@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/BricolageGrotesque-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Display";src:url("../fonts/BricolageGrotesque96pt-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --gomme:#2B3035;        /* flanc du pneu : en-tête, haut de page, pied */
  --gomme-clair:#3A4047;
  --neige:#F5F8FA;        /* fond */
  --blanc:#FFFFFF;
  --glace:#D6E6F2;        /* aplats froids (sommaire) */
  --acier:#2F5D7C;        /* liens */
  --acier-fonce:#234A64;
  --balise:#B84E0F;       /* boutons Amazon */
  --balise-fonce:#9A410C;
  --repere:#F0A36B;       /* repères sur fond gomme */
  --encre:#1E2328;
  --gris:#56606A;
  --trait:#C7D3DC;
  --surligne:#FCEFE4;     /* ligne du meilleur choix */
  --defaut:#8A3A0A;
  --titres:"Bricolage Grotesque",system-ui,sans-serif;
  --affiche:"Bricolage Display","Bricolage Grotesque",system-ui,sans-serif;
  --texte:"Geist",system-ui,sans-serif;
  --large:1100px;
  --lecture:720px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--neige);color:var(--encre);font:400 18px/1.65 var(--texte)}
img,svg{max-width:100%;height:auto}
a{color:var(--acier);text-underline-offset:2px}
a:hover{color:var(--acier-fonce)}
:focus-visible{outline:3px solid var(--encre);outline-offset:2px}
.entete :focus-visible,.flanc :focus-visible,.pied :focus-visible{outline-color:var(--repere)}
.aller{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:10px 14px;z-index:10}
.aller:focus{left:8px;top:8px}

/* ---------- En-tête et menu par silo ---------- */
.entete{background:var(--gomme);color:#fff;border-bottom:1px solid var(--gomme-clair);position:relative;z-index:5}
.entete-in{max-width:var(--large);margin:0 auto;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px}
.logo{font:800 22px/1 var(--titres);color:#fff;text-decoration:none;margin-right:auto;letter-spacing:-.01em}
.logo span{color:var(--repere)}
.logo:hover{color:#fff}
.menu{display:flex;flex-wrap:wrap;gap:4px 20px}
.silo{position:relative}
.silo summary{list-style:none;cursor:pointer;color:#DDE5EC;font-size:16px;font-weight:600;padding:8px 0;display:flex;align-items:center;gap:8px}
.silo summary::-webkit-details-marker{display:none}
.silo summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--repere);border-bottom:2px solid var(--repere);transform:rotate(45deg) translateY(-2px)}
.silo[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.silo summary:hover{color:#fff}
.silo ul{list-style:none;margin:0;padding:8px 0;background:var(--blanc);border-top:4px solid var(--balise);box-shadow:0 10px 24px rgba(30,35,40,.2);position:absolute;right:0;top:100%;min-width:300px}
.silo li a{display:block;padding:9px 18px;color:var(--encre);text-decoration:none;font-size:16px}
.silo li a:hover{background:var(--neige);color:var(--acier)}
.silo li.mere a{font-weight:600;border-bottom:1px solid var(--trait);margin-bottom:4px}

/* ---------- Haut de page : le flanc du pneu ---------- */
.flanc{background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 3px,transparent 3px 11px),var(--gomme);color:#fff}
.flanc-in{max-width:var(--large);margin:0 auto;padding:22px 16px 30px}
.ariane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 0;font-size:15px;color:#BFC9D2}
.ariane li+li::before{content:">";margin:0 8px;color:var(--repere)}
.ariane a{color:#fff}
.flanc h1{font:800 clamp(30px,5.4vw,52px)/1.06 var(--titres);letter-spacing:-.02em;max-width:20ch;margin:14px 0 10px}
.maj{margin:0;font-size:15px;color:#BFC9D2}

/* la dimension, moulée sur le flanc, avec ses trois repères */
.dimension{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 .16em;margin:18px 0 0;
  font:800 clamp(60px,15vw,160px)/.9 var(--affiche);letter-spacing:-.03em;color:#E9EEF2;
  text-shadow:0 1px 0 rgba(255,255,255,.25),0 -1px 0 rgba(0,0,0,.6)}
.dimension span{display:flex;flex-direction:column}
.dimension small{font:600 14px/1.35 var(--texte);letter-spacing:0;text-shadow:none;color:var(--repere);
  border-top:2px solid var(--repere);padding-top:6px;margin-top:10px;max-width:13ch}
.dimension .sep{color:#7D8893}

/* ---------- Corps ---------- */
.page{max-width:var(--large);margin:0 auto;padding:0 16px 56px}
.haut{display:grid;gap:24px;margin-top:28px}
.lecture{max-width:var(--lecture)}
.reponse{background:var(--blanc);border:1px solid var(--trait);border-top:6px solid var(--balise);padding:20px 22px}
.reponse h2{font:800 21px/1.2 var(--titres);margin:0 0 6px}
.reponse p{margin:0 0 14px}
.reponse .court{font-size:18px;line-height:1.45}
.reponse .suite{margin:14px 0 0;font-size:16px;color:var(--gris)}

.sommaire{background:var(--glace);padding:16px 20px;align-self:start}
.sommaire h2{font:800 17px/1.3 var(--titres);margin:0 0 8px}
.sommaire ol{margin:0;padding-left:20px}
.sommaire li{margin:4px 0}

.lecture h2{font:800 clamp(25px,3.4vw,31px)/1.15 var(--titres);letter-spacing:-.01em;margin:52px 0 14px;scroll-margin-top:16px}
.lecture h3{font:800 21px/1.25 var(--titres);margin:30px 0 8px}
.lecture p,.lecture ul,.lecture ol{margin:0 0 16px}
.lecture li{margin-bottom:6px}

.btn{display:inline-block;background:var(--balise);color:#fff;font:600 17px/1.2 var(--texte);text-decoration:none;padding:13px 20px;border-radius:6px}
.btn:hover{background:var(--balise-fonce);color:#fff}

/* encadré pédagogique : lire son pneu, étapes */
.etapes{counter-reset:etape;list-style:none;padding:0;margin:0 0 16px}
.etapes li{counter-increment:etape;position:relative;padding:0 0 14px 52px;margin:0}
.etapes li::before{content:counter(etape);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--gomme);color:#fff;font:800 18px/36px var(--titres);text-align:center}
.encadre{background:var(--blanc);border-left:6px solid var(--acier);padding:16px 20px;margin:0 0 18px}
.encadre p:last-child{margin-bottom:0}

/* ---------- Tableau : tableau sur grand écran, cartes sous 640 px ---------- */
.comparatif{width:100%;border-collapse:collapse;background:var(--blanc);border:1px solid var(--trait);font-size:16px;font-variant-numeric:lining-nums tabular-nums}
.legende{font-size:15px;color:var(--gris);margin:0 0 8px}
.comparatif th,.comparatif td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--trait)}
.comparatif thead th{background:var(--gomme);color:#fff;font-weight:600}
.comparatif tbody th{font-weight:600;min-width:8em}
.comparatif tr.choix>*{background:var(--surligne)}
.comparatif .marque-choix{display:block;font-size:14px;font-weight:600;color:var(--defaut)}
@media (max-width:640px){
  .comparatif,.comparatif tbody,.comparatif tr,.comparatif th,.comparatif td{display:block;width:100%}
  .comparatif{border:0;background:none}
  .comparatif thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .comparatif tbody tr{background:var(--blanc);border:1px solid var(--trait);margin:0 0 12px;padding:0 0 6px}
  .comparatif tr.choix{border:2px solid var(--balise)}
  .comparatif tbody th{font:800 19px/1.3 var(--titres);border-bottom:1px solid var(--trait);padding:12px 16px}
  .comparatif td{border:0;padding:8px 16px;display:grid;grid-template-columns:8em 1fr;gap:10px}
  .comparatif td::before{content:attr(data-label);font-weight:600;color:var(--gris);font-size:15px}
}

/* ---------- Encadré produit : une bande de roulement en haut ---------- */
.produit{background:var(--blanc);border:1px solid var(--trait);margin:20px 0;padding:0 22px 22px}
.produit::before{content:"";display:block;height:10px;margin:0 -22px 18px;background:repeating-linear-gradient(90deg,var(--gomme) 0 14px,transparent 14px 20px),var(--gomme-clair)}
.produit .etiquette{display:inline-block;background:var(--balise);color:#fff;font-size:14px;font-weight:600;padding:3px 9px;margin:0 0 10px;border-radius:4px}
.lecture .produit h3{font:800 23px/1.2 var(--titres);margin:0 0 4px}
.produit .pourqui{color:var(--gris);margin:0 0 14px}
.produit .avis{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 18px}
.produit .avis h4{margin:0;font:600 16px/1.3 var(--texte);color:var(--acier)}
.produit .avis ul{margin:4px 0 0;padding-left:18px}
.produit .avis .defaut h4{color:var(--defaut)}
@media (min-width:700px){.produit .avis{grid-template-columns:3fr 2fr;gap:12px 22px}}
@media (max-width:560px){.produit{padding:0 18px 18px}.produit::before{margin:0 -18px 16px}.produit .btn{display:block;text-align:center}}

/* ---------- Questions fréquentes, conclusion, à lire aussi ---------- */
.faq h3{border-top:1px solid var(--trait);padding-top:18px}
.conclusion{background:var(--blanc);border-top:4px solid var(--gomme);padding:20px 24px;margin-top:52px}
.lecture .conclusion h2{margin-top:0}
.aussi{margin-top:52px;border-top:3px solid var(--gomme);padding-top:14px}
.aussi h2{font:800 23px/1.2 var(--titres);margin:0 0 6px}
.lecture .aussi h2{margin-top:0}
.aussi ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 24px}
.aussi a{display:block;font-weight:600;padding:13px 0;border-bottom:1px solid var(--trait);text-decoration:none}
.aussi a:hover{text-decoration:underline}

/* ---------- Plan du site, pages fixes ---------- */
.plan h2{font:800 28px/1.15 var(--titres);margin:44px 0 6px}
.plan h3{font:800 20px/1.3 var(--titres);margin:24px 0 6px}
.plan ul{margin:0;padding-left:20px}
.plan li{margin:5px 0}
.plan .mere>a{font-weight:600}
.texte-legal{padding-top:36px}
.texte-legal h2{font:800 24px/1.2 var(--titres);margin:36px 0 10px}
.texte-legal .maj-legal{color:var(--gris);font-size:15px;margin:0}
.flanc .chapeau{margin:0;font-size:19px;color:#DDE5EC;max-width:42ch}
.accueil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.porte{background:var(--blanc);border:1px solid var(--trait);padding:0 22px 24px}
.porte::before{content:"";display:block;height:10px;margin:0 -22px 18px;background:repeating-linear-gradient(90deg,var(--gomme) 0 14px,transparent 14px 20px),var(--gomme-clair)}
.porte h2{font:800 clamp(22px,2.6vw,27px)/1.15 var(--titres);margin:0 0 8px}
.porte h2 a{color:var(--encre);text-decoration:none}
.porte h2 a:hover{color:var(--acier);text-decoration:underline}
.porte p{margin:0 0 12px;color:var(--gris)}
.porte ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.porte li a{display:block;padding:10px 0;border-bottom:1px solid var(--trait);font-weight:600;text-decoration:none}
.porte li a:hover{text-decoration:underline}
@media (max-width:860px){.accueil{grid-template-columns:minmax(0,1fr)}}

/* ---------- Pied de page ---------- */
.pied{background:var(--gomme);color:#DDE5EC;font-size:16px;margin-top:24px}
.pied-in{max-width:var(--large);margin:0 auto;padding:26px 16px 32px}
.pied .affiliation{margin:0 0 14px;color:#fff;font-size:16px;max-width:60ch}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.pied a{color:#DDE5EC}
.pied a:hover{color:#fff}

@media (min-width:860px){.haut{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
@media (max-width:640px){
  body{font-size:17px}
  .entete-in{padding:10px 16px}
  .menu{width:100%;gap:0 18px}
  .silo{position:static}
  .silo ul{left:0;right:0;min-width:0}
  .flanc-in{padding:14px 16px 22px}
  .flanc h1{margin:10px 0 8px}
  .dimension{flex-wrap:nowrap;margin-top:12px;font-size:min(46px,12vw)}
  .dimension small{font-size:13px;margin-top:6px;padding-top:4px}
  .reponse{padding:18px}
  .reponse .btn{display:block;text-align:center}
}
/* petits téléphones (iPhone SE) : le premier bouton Amazon doit rester visible sans défiler ;
   la dimension en grand répète le H1, on la masque seulement à cette hauteur */
@media (max-width:640px) and (max-height:700px){
  .dimension{display:none}
  .haut{margin-top:16px}
  .reponse{padding:14px 16px}
  .reponse h2{font-size:19px;margin-bottom:4px}
  .reponse .court{font-size:17px;line-height:1.4}
  .reponse p.court{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}