/* Entretoise Express — sélecteur v9. Écran 1 : les types. Écran 2 : le plan
   coté et ses listes A/B/C/D, puis matière et couleur en pastilles.
   Rien ici ne touche au thème : tout est porté par .eef-v9 / .v9-results. */

.eef-v9 { padding: 10px 0 2px; font-family: inherit; }
.eef-v9 *, .v9-results * { box-sizing: border-box; }
.v9-wrap { width: 100%; margin: 0 auto; padding: 0 15px; }
@media (min-width: 576px) { .v9-wrap { max-width: 540px; } }
@media (min-width: 768px) { .v9-wrap { max-width: 720px; } }
@media (min-width: 992px) { .v9-wrap { max-width: 960px; } }
@media (min-width: 1200px) { .v9-wrap { max-width: 1140px; } }

/* ── fil des étapes ────────────────────────────────────────────────── */
.v9-etapes { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 10px; list-style: none;
             margin: 0 0 10px; padding: 0; font-size: 12px; font-weight: 700;
             letter-spacing: .06em; color: #a7b6c0; text-transform: uppercase; }
.v9-etapes li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.v9-etapes li + li::before { content: '\203A'; color: #cbd7de; margin-right: 10px; font-size: 15px; }
.v9-etapes .n { display: inline-flex; align-items: center; justify-content: center;
                width: 19px; height: 19px; border-radius: 50%; background: #e8eef2;
                color: #8fa2ae; font-size: 11px; }
.v9-etapes li.on { color: #0d3a52; }
.v9-etapes li.on .n { background: #17a3c7; color: #fff; }
.v9-etapes li.faite { color: #4d7288; }
.v9-etapes li.cliquable { cursor: pointer; }
.v9-etapes li.cliquable:hover { color: #0e7490; }
.v9-etapes li.cliquable:hover .n { background: #17a3c7; color: #fff; }
.v9-etapes li.faite .n { background: #cdeaf3; color: #12708c; }

/* ── écran 1 : la question et les 5 types ──────────────────────────── */
.v9-question { font-size: 27px; line-height: 1.1; font-weight: 800; color: #0d3a52;
               margin: 0 0 12px; letter-spacing: -.3px; }
.v9-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.v9-type { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
           gap: 5px; min-height: 132px; padding: 14px 12px; background: #fff;
           border: 1px solid #dde6ec; border-radius: 12px; cursor: pointer;
           transition: border-color .15s, box-shadow .15s, transform .15s; }
.v9-type:hover { border-color: #17a3c7; box-shadow: 0 4px 14px rgba(13, 58, 82, .10); transform: translateY(-1px); }
.v9-type:focus { outline: none; }
.v9-type:focus-visible { outline: 2px solid #17a3c7; outline-offset: 2px; }
.v9-type .pic { color: #4a7f96; line-height: 0; }
.v9-type .pic img { width: 76px; height: 76px; object-fit: contain; display: block; }
.v9-type .pic svg { width: 84px; height: 45px; }
.v9-type .n { font-size: 15px; font-weight: 700; color: #0d3a52; line-height: 1.15; text-align: center; }
.v9-type .s { font-size: 11.5px; color: #7c93a1; line-height: 1.25; text-align: center; }
.v9-type .s::first-letter { text-transform: uppercase; }

/* ── écran 2 : l'encart dimensions ─────────────────────────────────── */
.v9-dim { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .72fr);
          gap: 26px; align-items: center; justify-items: center; background: #fff;
          border: 1px solid #17a3c7; border-radius: 12px; padding: 17px 23px; }
.v9-dim > * { width: 100%; }
.v9-tete { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 2px;
           padding-bottom: 10px; border-bottom: 1px solid #edf3f6; }
.v9-tete .pic { line-height: 0; color: #4a7f96; }
.v9-tete .pic svg { width: 54px; height: 29px; }
.v9-tete .n { font-size: 16px; font-weight: 700; color: #0d3a52; }
.v9-plan { min-width: 0; }
.v9-plan { align-self: center; }
.v9-plan svg.p9 { width: 100%; max-width: 820px; height: auto; display: block; margin: 0 auto; }

/* traits du plan */
.p9-axe { stroke: #9aa8b2; stroke-width: 1; stroke-dasharray: 20 5 3 5; }
.p9-rap-vue { stroke: #c3cfd7; stroke-width: .9; stroke-dasharray: 5 4; }
.p9-fil path { stroke: #57666f; stroke-width: 1; fill: none; }
.p9-cote .p9-lig, .p9-cote .p9-rap { fill: none; stroke-width: 1.1; }
.p9-cote .p9-rap { stroke-width: .9; opacity: .85; }
.p9-past { stroke: #fff; stroke-width: 2; }
.p9-past-t { font-size: 13px; font-weight: 700; fill: #fff; text-anchor: middle; }
/* bloc 37, point 19 : filetage de tige ecrit en valeur (autotaraudeuse) */
.p9-val-t { font-size: 13px; font-weight: 700; fill: #0e7490; text-anchor: middle; }
/* « p » et « ⌀ » des listes : encre sous le centre de la boite, on remonte */
.v9-info.l-p .past, .v9-cote.l-p .past { padding-bottom: 5.5px; box-sizing: border-box; }
.v9-info.n-tf .past { padding-bottom: 4px; box-sizing: border-box; }
/* La couleur dit la NATURE de la cote, jamais sa lettre. Aucun rouge. */
.p9-cote.n-fil   .p9-lig, .p9-cote.n-fil   .p9-rap { stroke: #0e7490; } .p9-cote.n-fil   .p9-fl, .p9-cote.n-fil   .p9-past { fill: #0e7490; }
.p9-cote.n-corps .p9-lig, .p9-cote.n-corps .p9-rap { stroke: #4d7c0f; } .p9-cote.n-corps .p9-fl, .p9-cote.n-corps .p9-past { fill: #4d7c0f; }
.p9-cote.n-tige  .p9-lig, .p9-cote.n-tige  .p9-rap { stroke: #7c3aed; } .p9-cote.n-tige  .p9-fl, .p9-cote.n-tige  .p9-past { fill: #7c3aed; }
.p9-cote.n-sw    .p9-lig, .p9-cote.n-sw    .p9-rap { stroke: #854F0B; } .p9-cote.n-sw    .p9-fl, .p9-cote.n-sw    .p9-past { fill: #854F0B; }
.p9-cote.n-p     .p9-lig, .p9-cote.n-p     .p9-rap { stroke: #475569; } .p9-cote.n-p     .p9-fl, .p9-cote.n-p     .p9-past { fill: #475569; }

/* listes de cotes */
.v9-listes { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0;
              align-self: center; }
.v9-cote { display: grid; grid-template-columns: minmax(0, 186px) minmax(160px, 1fr);
           align-items: center; gap: 12px; }
.v9-cote label { white-space: nowrap; }
.v9-cote label { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
                 font-weight: 700; color: #0d3a52; margin: 0; }
.v9-cote .past { display: inline-flex; align-items: center; justify-content: center;
                 width: 21px; height: 21px; border-radius: 50%; color: #fff;
                 font-size: 12px; font-weight: 700; flex: 0 0 21px; }
.v9-cote.n-fil   .past { background: #0e7490; } .v9-cote.n-fil   label { color: #0e7490; }
.v9-cote.n-corps .past { background: #4d7c0f; } .v9-cote.n-corps label { color: #4d7c0f; }
.v9-cote.n-tige  .past { background: #7c3aed; } .v9-cote.n-tige  label { color: #7c3aed; }
.v9-cote.n-sw    .past { background: #854F0B; } .v9-cote.n-sw    label { color: #854F0B; }
.v9-cote.n-p     .past { background: #475569; } .v9-cote.n-p     label { color: #475569; }
.v9-info { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 13px; grid-column: 1 / -1;
           font-weight: 600; color: #475569; }
.v9-info .past { display: inline-flex; align-items: center; justify-content: center;
                 width: 21px; height: 21px; border-radius: 50%; background: #475569; color: #fff;
                 font-size: 12px; font-weight: 700; flex: 0 0 21px; }
.v9-cote select { width: 100%; height: 44px; border-radius: 10px; border: 1px solid #c9d6dd;
                  background: #fff; color: #0d3a52; font-size: 15px; font-weight: 600;
                  padding: 0 32px 0 12px; cursor: pointer; appearance: none; -webkit-appearance: none;
                  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2356646f' stroke-width='1.8'/%3E%3C/svg%3E");
                  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 8px; }
.v9-cote select:focus { outline: 2px solid #9fd3e4; outline-offset: 1px; }
.v9-cote select option.grise { color: #aab7c0; }
.v9-cote.pose.n-fil   select { border-color: #0e7490; }
.v9-cote.pose.n-corps select { border-color: #4d7c0f; }
.v9-cote.pose.n-tige  select { border-color: #7c3aed; }
.v9-cote.pose.n-sw    select { border-color: #854F0B; }

/* ── liens sous l'encart ───────────────────────────────────────────── */
.v9-liens { display: flex; justify-content: center; align-items: center; gap: 26px; margin: 10px 0 0; }
.v9-liens button { border: 0; background: none; padding: 0; cursor: pointer;
                   font-size: 13.5px; color: #4d7288; text-decoration: underline; }
.v9-liens button:hover { color: #0e7490; }

/* ── matière et couleur ────────────────────────────────────────────── */
.v9-mc { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.v9-lig { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v9-lig .lb { font-size: 13px; font-weight: 700; color: #4d7288; min-width: 74px; }
.v9-lig .past { display: flex; flex-wrap: wrap; gap: 8px; }
.v9-lig .p { height: 36px; padding: 0 16px; border: 1px solid #c9d6dd; border-radius: 999px;
             background: #fff; color: #0d3a52; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.v9-lig .p:hover { border-color: #17a3c7; }
.v9-lig .p.on { background: #17a3c7; border-color: #17a3c7; color: #fff; }
.v9-lig .p.hs { color: #b6c3cb; border-color: #e8eef2; background: #fafcfd; }

.v9-msg { font-size: 12px; color: #8a6d3b; background: #fdf6e6; border: 1px solid #f0e2c0;
          border-radius: 10px; padding: 5px 9px; margin: 10px 0 0; }
.v9-msg span { display: block; }
.eef-v9 .parmat { text-align: center; font-size: 10.5px; line-height: 20px; height: 20px;
                  color: #9dabb6; margin: 8px 0 0; overflow: hidden; }
.eef-v9 .parmat a { color: #94a3b8; text-decoration: none; margin: 0 3px; }
.eef-v9 .parmat a:hover { color: #0e7490; text-decoration: underline; }

/* ── résultats ─────────────────────────────────────────────────────── */
.v9-results { background: #f7f7f7; padding: 14px 0 40px; margin-top: 10px; }
.v9-res-head { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.v9-res-head h2 { font-size: 24px; font-weight: 800; color: #0d3a52; margin: 0; }
.v9-tri { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #5b7887; }
.v9-tri select { height: 40px; min-width: 168px; border: 1px solid #cfd8de; border-radius: 10px;
                 background: #fff; color: #0d3a52; font-size: 14px; padding: 0 10px; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.v8-card { background: #fff; border: 1px solid #e6ecef; border-radius: 10px; padding: 14px 16px 16px;
           display: flex; flex-direction: column; }
.v8-card-img { display: flex; align-items: center; justify-content: center; height: 265px; margin: -4px 0 6px; }
.v8-card-img img { max-width: 100%; max-height: 255px; width: auto; height: auto; }
.v8-card-t { font-size: 18px; font-weight: 700; color: #0d3a52; margin: 0 0 5px; line-height: 1.2; }
.v8-card-t a { color: inherit; text-decoration: none; }
.v8-card-tech { font-size: 13px; color: #5b7887; margin: 0; line-height: 1.4; }
.v8-card-plaque { font-size: 13.5px; color: #17708f; margin: 6px 0 0; font-weight: 600; }
.v8-card-var { font-size: 13px; color: #829aa8; margin: 6px 0 0; }
.v8-card-p { font-size: 13px; color: #7c93a1; text-align: center; margin: 12px 0 10px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v8-card-p .av { margin-right: 5px; }
.v8-card-p .ap { margin-left: 5px; }
.v8-card-p b { font-size: 19px; font-weight: 700; color: #0d3a52; }
.v8-btn { display: block; height: 46px; line-height: 46px; text-align: center; background: #17a3c7;
          color: #fff; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; margin-top: auto; }
.v8-btn:hover { background: #128aa9; color: #fff; text-decoration: none; }
.v9-plusprod { display: flex; justify-content: center; margin-top: 26px; }
.v9-plusprod button { height: 46px; padding: 0 26px; border: 1px solid #d5e2e8; background: #fff;
                      border-radius: 10px; font-size: 15px; font-weight: 600; color: #17708f; cursor: pointer; }
.v8-vide { background: #fff; border: 1px solid #e6ecef; border-radius: 10px; padding: 26px;
           color: #5b7887; font-size: 16px; }
.v8-charge { opacity: .55; transition: opacity .15s; }

/* ── écrans intermédiaires ─────────────────────────────────────────── */
@media (max-width: 1360px) {
  .v9-plan svg.p9 { max-width: 720px; }
  .v9-question { font-size: 24px; }
  .v9-type { min-height: 124px; }
  .v9-type .pic svg { width: 76px; height: 41px; }
  .v9-type .n { font-size: 14px; }
  .v9-dim { gap: 20px; padding: 14px 18px; }
  .product-grid { gap: 20px; }
  .v8-card-img { height: 215px; }
  .v8-card-img img { max-height: 205px; }
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
/* Sous 1 100 px, la colonne des listes devient trop etroite pour ses libelles :
   le plan passe AU-DESSUS, les listes en dessous sur toute la largeur. Verifie
   a 1024, 1100 et 1180 (tests/mesures_v9.py). */
@media (max-width: 1099px) {
  .v9-dim { grid-template-columns: 1fr; align-items: stretch; }
  .v9-plan { order: 1; }
  .v9-listes { order: 2; }
  .v9-plan svg.p9 { max-width: 680px; }
  .v9-listes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
  .v9-info, .v9-listes > .v9-info { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .v9-types { grid-template-columns: repeat(3, 1fr); }
  .v9-dim { grid-template-columns: 1fr; align-items: stretch; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) { .v9-listes { grid-template-columns: 1fr; } }

/* ── mobile : plan au-dessus, listes en dessous, pleine largeur ────── */
@media (max-width: 767px) {
  .v9-wrap { padding: 0 12px; }
  /* plancher de lisibilite : rien sous 12 px sur mobile */
  .v9-etapes { font-size: 12px; gap: 6px; }
  .v9-etapes .n { font-size: 12px; }
  .v9-type .s { font-size: 12px; }
  .v9-etapes li + li::before { margin-right: 6px; }
  .v9-question { font-size: 20px; }
  .v9-types { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .v9-type { min-height: 112px; padding: 10px 8px; }
  .v9-type .pic svg { width: 68px; height: 37px; }
  .v9-type .n { font-size: 13px; }
  .v9-type .s { display: none; }
  .v9-dim { padding: 12px; gap: 14px; }
  .v9-listes { gap: 10px; }
  .v9-cote { grid-template-columns: 1fr; gap: 4px; }
  .v9-type .pic img { width: 58px; height: 58px; }
  .v9-lig { align-items: flex-start; }
  .v9-lig .lb { min-width: 0; width: 100%; }
  .v9-lig .p { height: 34px; padding: 0 13px; font-size: 13px; }
  .v9-res-head { flex-wrap: wrap; gap: 8px; }
  .v9-res-head h2 { font-size: 19px; }
  .product-grid { grid-template-columns: 1fr; gap: 14px; }
  .v8-card-img { height: 190px; }
  .v8-card-img img { max-height: 180px; }
}

/* ── sur une fiche produit : le filtre reste, la grille non ─────────── */
.eef-v9.sur-fiche { padding-bottom: 6px; }
.eef-v9.sur-fiche + .v9-results { background: none; padding: 6px 0 10px; margin-top: 0; }
.eef-v9.sur-fiche + .v9-results .product-grid { display: none; }
.eef-v9.sur-fiche + .v9-results .v9-res-head { margin: 0; justify-content: space-between; }
.eef-v9.sur-fiche + .v9-results h2 { font-size: 16px; font-weight: 700; color: #4d7288; }
.v9-retour { display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
             background: #17a3c7; color: #fff; border-radius: 10px; font-size: 14px;
             font-weight: 700; text-decoration: none; }
.v9-retour:hover { background: #128aa9; color: #fff; text-decoration: none; }

/* ── pastilles de matiere : la teinte reelle, pas un code arbitraire ─── */
.v9-lig .p.mat { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; }
.v9-lig .p.mat .tt { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px;
                     border: 1px solid rgba(0,0,0,.18); box-sizing: border-box; }
.v9-lig .p.mat .tt-plast { display: inline-flex; gap: 2px; }
.v9-lig .p.mat .tt-plast i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); box-sizing: border-box; }
.v9-lig .p.mat .nb { font-size: 12px; font-weight: 600; opacity: .62; }
.v9-lig .p.mat.on { background: #17a3c7; border-color: #17a3c7; color: #fff; }
.v9-lig .p.mat.on::after { content: '✓'; font-size: 13px; margin-left: 2px; }
.v9-lig .p.mat.on .nb { opacity: .9; }
.v9-lig .p.mat.hs { opacity: .45; background: #f2f5f7; border-color: #e2e8ec; cursor: not-allowed; }

/* ── Fiche produit : barre compacte des types (point 26) ─────────────────
   Hauteur reservee : 56 px pour la rangee, 52 px pour le bouton de retour,
   meme quand il est masque — la page ne saute pas quand il apparait. */
.v9-barre-fiche { background: #f4f9fb; border-bottom: 1px solid #e3edf1; }
.v9-barre-fiche .v9-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
.v9-bf-types { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; min-height: 44px;
               width: 100%; justify-content: center; }
.v9-bf-types li { flex: 0 1 auto; }
.v9-bf-types a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
                 border: 1px solid #d9e5eb; border-radius: 10px; background: #fff; color: #0d3a52;
                 font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.v9-bf-types a:hover { border-color: #17a3c7; color: #0d3a52; text-decoration: none; }
.v9-bf-types img { width: 32px; height: 32px; }
.v9-bf-retour { display: none; align-items: center; justify-content: center; width: 100%; }
.v9-barre-fiche.avec-retour .v9-bf-retour { display: flex; min-height: 60px; }
.v9-barre-fiche:not(.avec-retour) .v9-wrap { padding-bottom: 8px; }
.v9-bf-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 26px;
             background: #17a3c7; color: #fff; border-radius: 10px; font-size: 16px; font-weight: 700;
             text-decoration: none; }
.v9-bf-btn:hover { background: #128aa9; color: #fff; text-decoration: none; }
.v9-bf-btn[hidden] { display: none !important; }
@media (max-width: 767px) {
  .v9-bf-types { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch;
                 scrollbar-width: none; padding-bottom: 2px; }
  .v9-bf-types::-webkit-scrollbar { display: none; }
  .v9-bf-types a { height: 44px; padding: 0 12px; font-size: 13px; }
  .v9-bf-types img { width: 26px; height: 26px; }
  .v9-barre-fiche.avec-retour .v9-bf-retour { min-height: 58px; }
  .v9-bf-btn { width: 100%; justify-content: center; font-size: 15px; }
}

/* ── Accueil (point 27) ────────────────────────────────────────────────
   Le h1 est la question ; le titre des resultats est plus petit. Sous 768 px,
   les cartes au-dela de la 12e d'un paquet sont repliees (rendues, jamais
   chargees apres coup : aucun decalage). */
h1.v9-question { margin: 0; }
.v9-res-head h2#v8-count { font-size: 22px; font-weight: 800; color: #0d3a52; margin: 0; }
.v9-res-sous { margin: 2px 0 0; font-size: 14px; color: #5b7887; }
.v9-res-sous:empty { display: none; }
.v8-card.v9-plie { display: none !important; }
@media (max-width: 767px) { .v9-res-head h2#v8-count { font-size: 18px; } }

/* Libelles des listes (bloc 36, point 7) : sur UNE ligne, alignes a gauche,
   dans une colonne assez large pour le plus long (« Longueur de chaque tige »). */
.v9-cote { grid-template-columns: 228px minmax(160px, 1fr) !important; }
.v9-cote label { white-space: nowrap !important; text-align: left !important; justify-content: flex-start;
                 overflow-wrap: normal; line-height: 1.25; }
@media (max-width: 767px) { .v9-cote { grid-template-columns: 1fr !important; } }

/* ── Vignettes v9 (bloc 36, points 6 et 24) ──────────────────────────── */
.v9-card { position: relative; }
.v9-card .v8-card-img { position: relative; display: block; }
.v9-card .v9-mat { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 12px; padding: 3px 9px 3px 5px; font-size: 13px; line-height: 18px;
  font-weight: 600; color: #1f2d36; box-shadow: none; border: 1px solid #e3edf1; max-width: calc(100% - 16px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v9-card .v9-mat i { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; border: 1px solid rgba(0,0,0,.2); box-sizing: border-box; }
.v9-card .v9-lien { color: inherit; text-decoration: none; }
.v9-card .v9-lien::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.v9-card .v8-card-tech { font-size: 15px; color: #1f2d36; }
.v9-card .v8-card-p { display: flex; flex-direction: column; gap: 0; }
.v9-card .v8-card-p .av { font-size: 12px; color: #5b7887; font-weight: 500; }
.v9-card .v8-card-p .pr { white-space: nowrap; }
.v9-card .v8-card-p .ap { margin-left: 4px; font-size: 13px; color: #5b7887; }
.v9-card .v8-btn { position: relative; }
@media (max-width: 767px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .v9-card { padding: 8px !important; }
  .v9-card .v8-card-img { height: auto !important; aspect-ratio: 1 / 1; }
  .v9-card .v8-card-img img { max-height: none !important; width: 100%; height: 100%; object-fit: contain; }
  .v9-card .v8-card-t { font-size: 15px; line-height: 1.25; margin: 6px 0 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .v9-card .v8-card-tech { font-size: 15px; line-height: 1.3; }
  .v9-card .v8-card-p b { font-size: 16px; }
  .v9-card .v8-btn { display: none !important; }
  .v9-card .v9-mat { font-size: 13px; top: 6px; left: 6px; }
}

/* ── cadre Matiere (bloc 36, point 17) : meme bordure et meme style que Dimensions ── */
.v9-mc.v9-cadre { background: #fff; border: 1px solid #17a3c7; border-radius: 12px; padding: 13px 23px 15px;
                  margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.v9-cadre-t { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 800;
              letter-spacing: .06em; text-transform: uppercase; color: #0d3a52; }
.v9-cadre-t .n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
                 border-radius: 50%; background: #17a3c7; color: #fff; font-size: 15px; }
.v9-mc.v9-cadre .v9-lig .lb { display: none; }
@media (max-width: 767px) { .v9-mc.v9-cadre { padding: 10px 12px 12px; } }

/* ── « Tout effacer » (bloc 36, point 18) ────────────────────────────── */
.v9-listes .v9-tout { grid-column: 1 / -1; justify-self: stretch; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; height: 44px; margin-top: 6px; padding: 0 16px; background: #fff;
  border: 1px solid #9fb3be; border-radius: 10px; color: #17708f; font-size: 15px; font-weight: 700; cursor: pointer; }
.v9-listes .v9-tout .x { font-size: 20px; line-height: 1; }
.v9-listes .v9-tout:hover { border-color: #17a3c7; background: #f4fbfd; }
.v9-listes.sans-critere .v9-tout { visibility: hidden; }

/* ── Cadre Dimensions compact (bloc 36, point 19) ─────────────────────
   Au moins 25 % de hauteur en moins a 1460 et 1366 : marges internes,
   rappel du type sur une ligne, plan ajuste, listes resserrees. La colonne
   des listes s'elargit (les listes ne sont jamais plus etroites qu'avant, et
   elles ne debordent plus du cadre), aucun texte sous 14 px. */
@media (min-width: 1100px) {
  .v9-dim { grid-template-columns: minmax(0, 1fr) minmax(470px, .9fr) !important; gap: 8px 22px !important;
            padding: 10px 18px 12px !important; align-items: center; }
  .v9-tete { padding-bottom: 6px !important; margin: 0 !important; gap: 8px !important; }
  .v9-tete .pic svg, .v9-tete .pic img { width: 40px !important; height: 22px !important; }
  .v9-tete .n { font-size: 15px !important; }
  .v9-plan svg.p9 { max-width: 600px !important; max-height: 214px; }
  .v9-listes { gap: 8px !important; }
  .v9-listes .v9-tout { margin-top: 2px; }
}
.v9-cote .past, .v9-info .past { font-size: 14px !important; width: 23px !important; height: 23px !important; flex-basis: 23px !important; }
.v9-cote label { font-size: 15px; }
.v9-info { font-size: 14px !important; }
@media (min-width: 1100px) {
  /* Le rappel du type (et « 2 Dimensions » en apercu) ne prend plus toute une
     rangee : il coiffe la colonne du plan, les listes et « Tout effacer »
     occupent la colonne de droite sur toute la hauteur (point 18 inchange :
     bouton sous les listes, largeur de la colonne, place reservee). */
  .v9-dim { grid-template-rows: auto 1fr; }
  .v9-dim > .v9-tete, .v9-dim > .ap-num { grid-column: 1 !important; grid-row: 1; }
  .v9-dim > .v9-plan { grid-column: 1; grid-row: 2; }
  .v9-dim > .v9-listes { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .v9-listes { gap: 6px !important; }
  .v9-listes .v9-tout { margin-top: 0 !important; }
}
/* ── Bloc 40, point 13 : cadre Dimensions des 1024 px ────────────────────
   Le rappel du type (ou « 2 Dimensions ») garde sa rangee, au retrait commun des etapes ;
   dessous, le dessin et le bloc des listes forment UN ensemble centre dans le cadre (deux
   colonnes vides egales de part et d'autre : marges gauche et droite egales), sur le MEME
   centre vertical. « Tout effacer » sort du flux (en haut a droite des listes) : il ne
   decale plus le centre du bloc. Listes de meme largeur, alignees a droite ; libelles et
   pastilles A a D sur une meme verticale (grille de la ligne, 228 px). */
@media (min-width: 1024px) {
  .v9-dim { grid-template-columns: minmax(0, 1fr) minmax(0, 600px) 32px minmax(400px, 540px) minmax(0, 1fr) !important;
            grid-template-rows: auto auto !important; column-gap: 0 !important; row-gap: 8px !important;
            align-items: center !important; justify-items: stretch !important; }
  .v9-dim > .v9-tete, .v9-dim > .ap-num { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  .v9-dim > .v9-plan { grid-column: 2 !important; grid-row: 2 !important; align-self: center !important; order: 0; }
  .v9-dim > .v9-listes { grid-column: 4 !important; grid-row: 2 !important; align-self: center !important; order: 0;
                         display: flex !important; flex-direction: column; gap: 6px !important; position: relative; }
  .v9-dim > .v9-listes > .v9-info { grid-column: auto; }
  .v9-dim > .v9-listes .v9-tout { position: absolute; right: 0; bottom: calc(100% + 6px); width: auto !important;
                                  height: 34px; padding: 0 14px; margin: 0 !important; }
  .v9-plan svg.p9 { max-width: 600px !important; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .v9-dim { grid-template-columns: minmax(0, 1fr) minmax(0, 600px) 28px minmax(400px, 440px) minmax(0, 1fr) !important; }
}
/* point 23 : « 24 modeles affiches sur 332 » au-dessus du bouton */
.v9-plusprod { flex-direction: column; align-items: center; gap: 10px; }
.v9-plusprod .v9-affiches { margin: 0; font-size: 15px; color: #4d7288; }
/* point 24 : dimensions de la vignette dans la couleur du texte principal */
.v9-card .v8-card-tech { color: #232323; }

/* Bloc 37, point 15 : halo d'etape. Un calque absolu fait une fois le tour du
   cadre (degrade bleu vers cyan, 1,2 s) ; le numero d'etape s'illumine. Aucun
   effet si l'on prefere peu de mouvement ; rien ne bouge dans la page. */
@property --ee-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#v9-dim, #v9-mc { position: relative; }
.ee-halo::after { content: ''; position: absolute; inset: -3px; border-radius: 14px; padding: 3px; pointer-events: none; z-index: 5;
  background: conic-gradient(from var(--ee-angle), transparent 0deg, #17a3c7 50deg, #22d3ee 110deg, transparent 170deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ee-halo 1.2s ease-in-out 1 forwards; }
@keyframes ee-halo { 0% { --ee-angle: 0deg; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { --ee-angle: 360deg; opacity: 0; } }
.ee-halo-num { animation: ee-halo-num 1.2s ease-in-out 1; }
@keyframes ee-halo-num { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
                         40% { box-shadow: 0 0 0 7px rgba(34, 211, 238, .45), 0 0 18px 4px rgba(23, 163, 199, .55); background-color: #22d3ee; } }
@media (prefers-reduced-motion: reduce) { .ee-halo::after { display: none !important; } .ee-halo-num { animation: none !important; } }

/* Bloc 37, point 16 : « 3 Matière » et ses pastilles sur la meme ligne,
   retour a la ligne seulement faute de place ; pastille sans resultat grisee
   et inerte. */
#v9-mc.v9-cadre { flex-direction: row !important; flex-wrap: wrap; align-items: flex-start !important; column-gap: 16px; row-gap: 8px; }
#v9-mc.v9-cadre > .v9-cadre-t, #v9-mc.v9-cadre > .ap-num { flex: 0 0 auto; margin: 0 !important; min-height: 36px; }
#v9-mc.v9-cadre > #v9-lig-mat { flex: 1 1 0; min-width: 240px; margin: 0; }
#v9-mc.v9-cadre > #v9-lig-coul { flex: 1 1 100%; }
.v9-lig .p.mat[disabled] { pointer-events: none; cursor: default; }

/* Bloc 37, point 18 : image centree sur la piece (recadrage mesure par le
   script), titre, dimensions et prix centres sur l'axe du bouton. */
.v9-card .v8-card-img { position: relative; display: block; overflow: hidden; }
.v9-card .v8-card-img img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; }
.v9-card .v8-card-img img.ee-recadre { max-width: none; max-height: none; transform: none; }
/* bloc 39, point 12 : photo reelle invisible tant que le script ne l'a pas placee (aucun
   decalage visible) ; nos rendus s'affichent tout de suite, sans recadrage */
/* bloc 41 : photo visible des son chargement, recadree par transform (ee_selecteur_v9.js, recadrer) */
.v9-card .v8-card-img .v9-mat { z-index: 2; }
.v9-card .v8-card-t, .v9-card .v8-card-tech { text-align: center; }
.v9-card .v8-card-p { align-items: center; }

/* bloc 37, point 20 : recherche gardee proposee sous le titre de l'accueil */
.eef-v9 .v9-reprendre { margin: 6px 0 10px; font-size: 15px; line-height: 1.3; }
.eef-v9 .v9-reprendre a { color: #0e7fa0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.eef-v9 .v9-reprendre a:hover, .eef-v9 .v9-reprendre a:focus { color: #0d3a52; }

/* bloc 39, point 24 : etat actuel (hors apercu) comme le nouveau design : plus de fil
   d'etapes ; la question reste le H1 de la page (meme texte), en petit comme en apercu */
body:not(.ee-apercu) .v9-etapes { display: none !important; }
body:not(.ee-apercu) .eef-v9 h1.v9-question { font-size: 15px; font-weight: 500; line-height: 20px; color: #4d7288;
                                              letter-spacing: 0; text-transform: none; margin: 4px 0 10px; }

/* bloc 37, point 21 : disque de teinte blanc = disque blanc, contour gris,
   pose sur un leger fond gris (anneau exterieur) : il ne se lit plus comme
   un bouton radio vide */
/* bloc 40, point 12 : teinte blanche = disque PLEIN gris tres clair, contour net plus sombre,
   meme taille que les autres pastilles. Le blanc pur (bloc 37, avec anneau) puis le degrade a
   centre blanc (bloc 39) se lisaient encore comme un bouton radio vide a 12 px. */
.v9-card .v9-mat i.v9-blanc, .v9-lig .p.mat .tt-plast i.v9-blanc, .v9-blanc {
  background: #E4E7EA !important; margin: 0 2px;
  box-shadow: none !important; border: 1px solid #6F7A84 !important; outline: none !important; box-sizing: border-box; }
/* bloc 37, point 21 : le libelle complet (« Acier inoxydable »,
   « Acciaio inossidabile ») ne se coupe jamais ; il passe a la ligne s'il faut */
.v9-card .v9-mat { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 480px) {
  .v9-card .v9-mat { font-size: 12px; line-height: 15px; gap: 5px; padding: 3px 8px 3px 5px; border-radius: 10px;
                     max-width: calc(100% - 12px); }
  .v9-card .v9-mat i { width: 10px; height: 10px; flex-basis: 10px; }
}

/* bloc 40, point 8 : legende du plan des entretoises a insert (memes hachures que le plan) */
.product-description .ee-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0; font-size: 13px; color: #2c4452; }
.product-description .ee-leg { display: inline-flex; align-items: center; gap: 7px; }
.product-description .ee-leg i { display: inline-block; width: 22px; height: 14px; border: 1px solid #3f4d58; border-radius: 2px; }
.ee-leg-plast i { background: repeating-linear-gradient(-45deg, #8fc3d6 0 1px, #dcf1f7 1px 5px); }
.ee-leg-laiton i { background: repeating-linear-gradient(45deg, #9c7514 0 1px, #ebcf7a 1px 3.2px); }
.ee-leg-acier i { background: repeating-linear-gradient(45deg, #5e6b76 0 1px, #d3d8dd 1px 3.2px); }

/* Bloc 42, point 10 : en-tete de categorie (H1 et description) rendu par le serveur, au-dessus du selecteur */
.ee-cat-entete { background: #fff; }
.ee-cat-entete .v9-wrap { padding-top: 14px; padding-bottom: 2px; }
.ee-cat-h1 { font-size: 1.55rem; font-weight: 700; line-height: 1.25; margin: 0 0 6px; color: #1f2937; text-transform: none; }
.ee-cat-desc { font-size: .92rem; line-height: 1.5; color: #374151; max-width: 76em; }
.ee-cat-desc p { margin: 0 0 4px; }
.ee-cat-desc img { display: none; }
@media (max-width: 767px) {
  .ee-cat-entete .v9-wrap { padding-top: 10px; }
  .ee-cat-h1 { font-size: 1.25rem; }
  .ee-cat-desc { font-size: .86rem; }
}

/* Bloc 42, point 9 : bandeau de presentation de l'accueil (2 lignes au plus, sous 80 px sur ordinateur) */
.ee-presentation { background: #fff; border-bottom: 1px solid #d5e5ee; }
.ee-presentation .v9-wrap { padding-top: 9px; padding-bottom: 9px; }
.ee-presentation p { margin: 0; font-size: 14px; line-height: 1.5; color: #2c4a5c; }
.ee-presentation b { color: #0d3a52; font-weight: 700; }
.ee-presentation .sep { color: #8fb0c2; padding: 0 .4em; }
.ee-presentation[hidden], .eef-v9.sel + .ee-presentation { display: none; }
@media (max-width: 767px) { .ee-presentation p { font-size: 13px; line-height: 1.45; } }
.ee-presentation + .v9-results { margin-top: 0; padding-top: 12px; }
/* textes rendus par le serveur au-dessus de la grille : police systeme, pour qu'ils ne se recomposent pas
   a l'arrivee tardive de Noto Sans (affichage « auto ») : sinon, une ligne de plus decale la grille (CLS) */
.ee-presentation p, .ee-cat-desc { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }

/* Bloc 42, point 10 : liste repliable de tous les modeles de la categorie */
.ee-tous { margin: 18px 0 0; background: #fff; border: 1px solid #dde8ee; border-radius: 10px; padding: 10px 16px; }
.ee-tous summary { cursor: pointer; font-weight: 700; color: #0d3a52; font-size: .95rem; }
.ee-tous ul { columns: 3 22em; column-gap: 28px; margin: 10px 0 4px; padding: 0; list-style: none; }
.ee-tous li { break-inside: avoid; font-size: .85rem; line-height: 1.45; padding: 2px 0; }
.ee-tous a { color: #1a6f8e; }