/* 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, .09); 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: 2px solid #17a3c7; border-radius: 12px; padding: 16px 22px; }
.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; }
.p9-cote.c-A .p9-lig, .p9-cote.c-A .p9-rap { stroke: #0e7490; } .p9-cote.c-A .p9-fl, .p9-cote.c-A .p9-past { fill: #0e7490; }
.p9-cote.c-B .p9-lig, .p9-cote.c-B .p9-rap { stroke: #c2410c; } .p9-cote.c-B .p9-fl, .p9-cote.c-B .p9-past { fill: #c2410c; }
.p9-cote.c-C .p9-lig, .p9-cote.c-C .p9-rap { stroke: #4d7c0f; } .p9-cote.c-C .p9-fl, .p9-cote.c-C .p9-past { fill: #4d7c0f; }
.p9-cote.c-D .p9-lig, .p9-cote.c-D .p9-rap { stroke: #7c3aed; } .p9-cote.c-D .p9-fl, .p9-cote.c-D .p9-past { fill: #7c3aed; }
.p9-cote.c-p .p9-lig, .p9-cote.c-p .p9-rap { stroke: #475569; } .p9-cote.c-p .p9-fl, .p9-cote.c-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.l-A .past { background: #0e7490; } .v9-cote.l-A label { color: #0e7490; }
.v9-cote.l-B .past { background: #c2410c; } .v9-cote.l-B label { color: #c2410c; }
.v9-cote.l-C .past { background: #4d7c0f; } .v9-cote.l-C label { color: #4d7c0f; }
.v9-cote.l-D .past { background: #7c3aed; } .v9-cote.l-D label { color: #7c3aed; }
.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: 7px; border: 1.5px solid #d4dde3;
                  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.l-A select { border-color: #0e7490; }
.v9-cote.pose.l-B select { border-color: #c2410c; }
.v9-cote.pose.l-C select { border-color: #4d7c0f; }
.v9-cote.pose.l-D select { border-color: #7c3aed; }

/* ── 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: 1.5px solid #d4dde3; border-radius: 18px;
             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: 6px; 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: 6px;
                 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: 8px; 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: 8px; 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); } }
@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); }
}

/* ── mobile : plan au-dessus, listes en dessous, pleine largeur ────── */
@media (max-width: 767px) {
  .v9-wrap { padding: 0 12px; }
  .v9-etapes { font-size: 10.5px; gap: 6px; }
  .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: 8px; font-size: 14px;
             font-weight: 700; text-decoration: none; }
.v9-retour:hover { background: #128aa9; color: #fff; text-decoration: none; }