/* Atelier Malin — pages problème (modèle « page-probleme », 28/09/2026).
   Maquette C « Le tableau d'outils » : photo du problème, plaque du problème, « Le bon », selon votre cas,
   pourquoi ça marche, gestes gratuits, lien vers le comparatif. Pas de menu, pas de barre latérale.
   Chargée seulement sur ce modèle (functions.php). S'appuie sur les briques de tableau.css
   (plaque, ruban, bouton, prix, date, mention, boîtier, bascule, barre d'achat).
   Échelle : 13 · 15 · 17 · 21 · 27 · 40 px, rien d'autre. Sélecteurs en .wp-site-blocks (deux classes) pour
   l'emporter sur typographie.php, qui force p/li/span en 400. */

.am-pb{padding-bottom:4px}
.am-pb-colonne{max-width:780px;margin:0 auto}
.wp-site-blocks .am-pb-colonne p{margin:0 0 12px}

/* Photo du problème (le plan de la vidéo) */
.am-pb-photo{position:relative;margin:6px 0 0}
.am-pb-photo img{display:block;width:100%;height:150px;object-fit:cover;border:1px solid #9FA49C;border-radius:0}
@media (min-width:760px){.am-pb-photo img{height:260px}}
.wp-site-blocks .am-pb-photo .am-ruban{position:absolute;left:10px;bottom:-12px;z-index:3}

/* Le problème */
.am-pb-probleme{padding-top:28px}
.wp-site-blocks .am-pb-probleme h1{margin:0;font-size:27px;line-height:1.05}
@media (min-width:760px){.wp-site-blocks .am-pb-probleme h1{font-size:40px}}
.wp-site-blocks .am-pb-probleme p{margin:8px 0 0;font-size:17px;line-height:1.5}

/* Le bon */
.am-pb-produit{margin-top:14px}
.wp-site-blocks .am-pb-produit h2{margin:8px 0 2px;font-size:27px;line-height:1.05}
.am-pb-ombre{margin:8px 0 6px}
.am-pb-ombre .am-ombre{color:var(--am-rouge);width:100%;height:auto;max-width:420px}
.am-pb-ombre .am-ombre-aspirateur{width:auto;max-width:100%;height:74px}
.am-pb-ombre .am-ombre-embout{max-width:300px}
.wp-site-blocks .am-pb-produit .am-prixligne{margin:6px 0 4px}
.wp-site-blocks .am-pb-produit .am-pb-effet{margin:12px 0 0;font-size:17px;font-weight:600;line-height:1.45}
.wp-site-blocks .am-pb-produit .am-pb-savoir{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--am-gris)}
.wp-site-blocks .am-pb-produit .am-pb-savoir b{color:var(--am-noir)}

/* Selon votre cas : les interrupteurs allument la bonne ligne (CSS seul ; probleme.js ne fait que suivre avec la barre) */
.wp-site-blocks .am-pb .am-titre-mur{margin:30px 0 12px}
.am-pb-q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:center;padding:12px 0;border-top:1px solid #3E4447}
@media (max-width:480px){.am-pb-q{grid-template-columns:1fr}.am-pb-q .am-bascule{width:100%}}
.am-pb-cas{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.wp-site-blocks .am-pb-cas > li{margin:0;background:var(--am-plaque);border:1px solid var(--am-bord);padding:12px 14px 14px}
.am-pb-l-tete{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.wp-site-blocks .am-pb-cas .am-pb-l-cas{margin:8px 0 6px;font-size:15px;line-height:1.45}
.am-pb-l-bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 10px;margin:0 0 8px}
.wp-site-blocks .am-pb-l-nom{font:700 21px/1.1 var(--am-cond);text-transform:uppercase}
.wp-site-blocks .am-pb-cas .am-pb-l-note{margin:0 0 8px;font-size:15px;line-height:1.45;color:var(--am-gris)}
.wp-site-blocks .am-pb-cas .am-btn{min-height:46px;padding:9px 12px;font-size:15px}
@media (min-width:760px){.wp-site-blocks .am-pb-cas .am-btn{display:inline-flex;width:auto;min-width:280px}}
/* La ligne allumée : cadre rouge, voyant vert, ruban rouge */
.am-pb-choix:not(:has(.am-pb-b1:checked)):not(:has(.am-pb-b2:checked)) .am-pb-cas > li[data-si="0"],
.am-pb-choix:has(.am-pb-b1:checked):not(:has(.am-pb-b2:checked)) .am-pb-cas > li[data-si="b1"],
.am-pb-choix:has(.am-pb-b2:checked) .am-pb-cas > li[data-si="b2"]{outline:3px solid var(--am-rouge);outline-offset:-3px}
.am-pb-choix:not(:has(.am-pb-b1:checked)):not(:has(.am-pb-b2:checked)) .am-pb-cas > li[data-si="0"] .am-voyant,
.am-pb-choix:has(.am-pb-b1:checked):not(:has(.am-pb-b2:checked)) .am-pb-cas > li[data-si="b1"] .am-voyant,
.am-pb-choix:has(.am-pb-b2:checked) .am-pb-cas > li[data-si="b2"] .am-voyant{background:var(--am-vert)}
.wp-site-blocks .am-pb-choix:not(:has(.am-pb-b1:checked)):not(:has(.am-pb-b2:checked)) .am-pb-cas > li[data-si="0"] .am-ruban,
.wp-site-blocks .am-pb-choix:has(.am-pb-b1:checked):not(:has(.am-pb-b2:checked)) .am-pb-cas > li[data-si="b1"] .am-ruban,
.wp-site-blocks .am-pb-choix:has(.am-pb-b2:checked) .am-pb-cas > li[data-si="b2"] .am-ruban{background:var(--am-rouge)}
@supports not selector(:has(a)){
  .am-pb-cas > li[data-si="0"]{outline:3px solid var(--am-rouge);outline-offset:-3px}
  .am-pb-cas > li[data-si="0"] .am-voyant{background:var(--am-vert)}
}

/* Pourquoi ça marche : deux dessins côte à côte */
.am-pb-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:10px 0 0}
.am-pb-duo figure{margin:0;min-width:0}
.am-pb-duo svg{display:block;width:100%;height:auto}
.am-pb-duo .am-ombre{filter:none;--fond-dessin:#fff;--accent-dessin:var(--am-rouge)}
.am-pb-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 0}
.am-pb-trio figure{margin:0;min-width:0;text-align:center}
.am-pb-trio svg{display:block;width:100%;max-width:120px;height:auto;margin:0 auto}
.wp-site-blocks .am-pb-trio b{display:block;margin-top:6px;font:700 17px/1.1 var(--am-cond);text-transform:uppercase}
.wp-site-blocks .am-pb-legende{margin:6px 0 0;font:italic 400 13px/1.4 var(--am-sans);color:var(--am-gris)}
.wp-site-blocks .am-pb-texte{margin:0;font-size:15px;line-height:1.5}

/* Gestes gratuits */
.am-pb-rubans{display:flex;flex-wrap:wrap;gap:10px 8px;margin:6px 0 0}
.wp-site-blocks .am-pb-rubans .am-ruban{letter-spacing:.1em;line-height:1.15}
.am-pb-rubans .am-ruban:nth-child(odd){transform:rotate(-1deg)}
.am-pb-rubans .am-ruban:nth-child(even){transform:rotate(.8deg)}

/* Le comparatif complet : bien visible */
.am-pb-suite{margin-top:18px}
.wp-site-blocks a.am-pb-lien-article{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 0;padding:12px 16px;background:var(--am-plaque);border:2px solid var(--am-noir);color:var(--am-noir);font:700 17px/1.3 var(--am-sans);text-decoration:none}
.wp-site-blocks a.am-pb-lien-article::after{content:"";width:22px;height:14px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7h19M13 1l7 6-7 6' fill='none' stroke='%23161819' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center/contain}
.wp-site-blocks a.am-pb-lien-article:hover{background:var(--am-noir);color:#fff}
.wp-site-blocks a.am-pb-lien-article:hover::after{filter:invert(1)}
.wp-site-blocks .am-pb-suite .am-pb-sous{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--am-gris)}

/* Barre d'achat (téléphone) : cachée tant que le bouton principal est à l'écran (probleme.js) */
.am-pb-js .am-pb-barre{transform:translateY(110%);transition:transform .2s}
.am-pb-js .am-pb-barre.am-visible{transform:none}
.am-pb-barre.am-sans{display:none}