/* Quel aspirateur laveur : feuille de style unique du site (style 1 « bande lavée », choisi le 15/10/2026).
   Polices copiées dans /fonts (licence SIL OFL 1.1, sources dans contexte.md). Couple T8 (diversite-catalogue.md). */

@font-face{font-family:"Outfit";src:url("../fonts/Outfit-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("../fonts/Outfit-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/SourceSans3-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/SourceSans3-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --fond:#F4F6F5;         /* carrelage propre */
  --blanc:#FFFFFF;        /* la bande lavée */
  --carreau:#D8DDD9;      /* carrelage pas encore lavé */
  --joint:#C3CAC7;
  --reflet:#DCEBF7;       /* bord humide de la bande */
  --encre:#18222A;
  --gris:#4E5A5E;
  --cobalt:#1F48C4;       /* liens et boutons Amazon */
  --cobalt-fonce:#173A9E;
  --surligne:#E6EEFC;     /* meilleur choix, sol traité */
  --titres:"Outfit",system-ui,sans-serif;
  --texte:"Source Sans 3",system-ui,sans-serif;
  --large:1120px;
  --lecture:760px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:400 18px/1.6 var(--texte)}
img,svg{max-width:100%;height:auto}
a{color:var(--cobalt);text-underline-offset:2px}
a:hover{color:var(--cobalt-fonce)}
:focus-visible{outline:3px solid var(--encre);outline-offset:2px}
.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(--blanc);border-bottom:1px solid var(--joint);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:6px 22px}
.logo{font:700 23px/1 var(--titres);color:var(--encre);text-decoration:none;margin-right:auto;letter-spacing:-.01em}
.logo span{background:linear-gradient(transparent 58%,var(--reflet) 58%);padding:0 2px}
.logo:hover{color:var(--encre)}
.menu{display:flex;flex-wrap:wrap;gap:2px 6px}
.silo{position:relative}
.silo summary{list-style:none;cursor:pointer;font-weight:600;font-size:16px;padding:8px 10px;border-radius:4px;display:flex;align-items:center;gap:8px}
.silo summary::-webkit-details-marker{display:none}
.silo summary::after{content:"";width:7px;height:7px;border:solid var(--gris);border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg)}
.silo[open] summary{background:var(--surligne)}
.silo[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.silo ul{list-style:none;margin:4px 0 0;padding:8px 0;background:var(--blanc);border:1px solid var(--joint);box-shadow:0 8px 20px rgba(24,34,42,.12);position:absolute;left:0;top:100%;min-width:280px}
.silo:last-child ul{left:auto;right:0}
.silo li a{display:block;padding:8px 16px;color:var(--encre);text-decoration:none;font-size:16px}
.silo li a:hover{background:var(--surligne)}
.silo li.mere a{font-weight:600;border-bottom:1px solid var(--joint);margin-bottom:4px}

/* ---------- Haut de page : le carrelage et la bande que laisse un passage ---------- */
.sol{background:
   linear-gradient(90deg,var(--joint) 1px,transparent 1px) 0 0/72px 72px,
   linear-gradient(var(--joint) 1px,transparent 1px) 0 0/72px 72px,
   var(--carreau)}
.sol-in{max-width:var(--large);margin:0 auto;padding:18px 16px 30px}
.ariane ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;font-size:15px;color:var(--gris)}
.ariane li+li::before{content:">";margin:0 7px}
.ariane a{color:var(--encre)}
.bande{background:var(--blanc);margin:0 -16px;padding:22px 16px 20px;border-top:3px solid var(--reflet);border-bottom:3px solid var(--reflet)}
.bande h1{font:700 clamp(27px,5.2vw,52px)/1.08 var(--titres);margin:0;max-width:22ch;letter-spacing:-.02em}
.maj{margin:10px 0 0;font-size:15px;color:var(--gris);max-width:70ch}
.chapeau{margin:10px 0 0;font-size:19px;color:var(--gris);max-width:46ch}
@media (min-width:860px){
  .sol-in{padding:22px 16px 40px}
  .bande{margin:0;padding:30px 36px;transform:skewY(-2deg)}
  .bande>*{transform:skewY(2deg)}
}

/* ---------- Corps ---------- */
.page{max-width:var(--large);margin:0 auto;padding:0 16px 56px}
.haut{display:grid;gap:22px;margin-top:24px}
.lecture{max-width:var(--lecture)}
.reponse{background:var(--blanc);border:1px solid var(--joint);padding:20px 24px}
.reponse h2{font:700 22px/1.2 var(--titres);margin:0 0 6px}
.reponse p{margin:0 0 14px}
.reponse .detail{margin:12px 0 0;font-size:16px}
.sommaire{padding:4px 0 0;align-self:start}
.sommaire h2{font:600 17px/1.3 var(--titres);margin:0 0 8px}
.sommaire ol{margin:0;padding-left:20px}
.sommaire li{margin:4px 0}

.lecture h2{font:700 clamp(25px,3.4vw,32px)/1.15 var(--titres);letter-spacing:-.01em;margin:52px 0 14px;scroll-margin-top:16px}
.lecture h3{font:700 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(--cobalt);color:#fff;font:600 17px/1.2 var(--texte);text-decoration:none;padding:13px 22px;border-radius:999px}
.btn:hover{background:var(--cobalt-fonce);color:#fff}

.etapes{counter-reset:etape;list-style:none;padding:0;margin:0 0 16px}
.etapes li{counter-increment:etape;position:relative;padding:0 0 14px 50px;margin:0}
.etapes li::before{content:counter(etape);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--surligne);color:var(--cobalt);font:700 18px/34px var(--titres);text-align:center}
.encadre{background:var(--blanc);border-left:6px solid var(--reflet);padding:16px 20px;margin:0 0 18px}
.encadre p:last-child{margin-bottom:0}

/* ---------- Étiquettes de sols : seulement quand une source dit quels sols le produit traite ---------- */
.sols{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px;padding:0;list-style:none}
.sols li{font-size:14px;line-height:1.3;padding:3px 9px;border-radius:3px;margin:0}
.sols .oui{background:var(--surligne);border:1px solid var(--cobalt);color:var(--encre);font-weight:600}
.sols .non{border:1px solid var(--joint);color:var(--gris);text-decoration:line-through}
.sols-legende{font-size:14px;color:var(--gris);margin:0 0 12px}

/* ---------- Tableau : tableau sur grand écran, cartes sous 640 px ---------- */
.comparatif{width:100%;border-collapse:collapse;background:var(--blanc);border:1px solid var(--joint);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(--joint)}
.comparatif thead th{background:var(--carreau);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(--cobalt)}
@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(--joint);margin:0 0 12px;padding:0 0 6px}
  .comparatif tr.choix{border:2px solid var(--cobalt)}
  .comparatif tbody th{font:700 19px/1.3 var(--titres);border-bottom:1px solid var(--joint);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 : la bande cobalt à gauche pour le choix, grise pour les autres ---------- */
.produit{background:var(--blanc);border:1px solid var(--joint);border-left:8px solid var(--joint);margin:20px 0;padding:20px 24px 22px;scroll-margin-top:16px}
.produit.choix{border-left-color:var(--cobalt)}
.produit .etiquette{display:inline-block;background:var(--surligne);color:var(--cobalt);font-size:14px;font-weight:600;padding:3px 9px;margin:0 0 8px;border-radius:3px}
.lecture .produit h3{font:700 23px/1.2 var(--titres);margin:0 0 2px}
.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)}
.produit .avis ul{margin:4px 0 0;padding-left:18px}
.produit .avis .defaut{background:var(--fond);padding:10px 14px}
@media (min-width:700px){.produit .avis{grid-template-columns:3fr 2fr;gap:12px 22px}}
@media (max-width:560px){.produit{padding:18px 18px 20px}.produit .btn{display:block;text-align:center}}

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

/* ---------- Plan du site, pages fixes, accueil ---------- */
.plan h2{font:700 28px/1.15 var(--titres);margin:44px 0 6px}
.plan ul{margin:0;padding-left:20px}
.plan li{margin:5px 0}
.plan .mere>a{font-weight:600}
.texte-legal{padding-top:32px}
.texte-legal h2{font:700 24px/1.2 var(--titres);margin:36px 0 10px}
.texte-legal .maj-legal{color:var(--gris);font-size:15px;margin:0}
.accueil{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.porte{background:var(--blanc);border:1px solid var(--joint);border-left:8px solid var(--reflet);padding:20px 22px 22px}
.porte h2{font:700 clamp(22px,2.6vw,26px)/1.15 var(--titres);margin:0 0 8px}
.porte h2 a{color:var(--encre);text-decoration:none}
.porte h2 a:hover{color:var(--cobalt);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(--joint)}
.porte li a{display:block;padding:10px 0;border-bottom:1px solid var(--joint);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(--blanc);border-top:1px solid var(--joint);font-size:16px;margin-top:24px}
.pied-in{max-width:var(--large);margin:0 auto;padding:24px 16px 32px}
.pied .affiliation{margin:0 0 12px;max-width:62ch}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}

@media (min-width:860px){.haut{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}}
/* Téléphone : le premier bouton Amazon doit tenir dans le premier écran (vérifié à 390 x 844) */
@media (max-width:640px){
  body{font-size:17px}
  .entete-in{padding:8px 12px;gap:4px 12px}
  .logo{font-size:21px}
  .menu{width:100%;gap:0;margin:0 -8px;flex-wrap:nowrap}
  .silo{position:static}
  .silo summary{font-size:15px;padding:6px 7px;gap:6px}
  .silo ul{position:absolute;left:0;right:0;top:100%;min-width:0;margin:0;border-left:0;border-right:0}
  .sol-in{padding:12px 16px 18px}
  .ariane ol{margin-bottom:10px;font-size:14px}
  .bande{padding:16px 16px 14px}
  .maj{font-size:14px;margin-top:8px}
  .haut{margin-top:16px}
  .reponse{padding:16px}
  .reponse .btn{display:block;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}