/* OUTILPRO — avis clients, devis, documents PDF */

/* ---------- Étoiles ---------- */
.stars { --s: 16px; position: relative; display: inline-block; font-size: var(--s); line-height: 1; letter-spacing: .06em; color: #dde2e6; white-space: nowrap; vertical-align: middle; font-family: Arial, sans-serif; }
.stars::before { content: "★★★★★"; }
.stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #f5a623; white-space: nowrap; }
.stars-fill::before { content: "★★★★★"; }

.product-rating { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: 14px; color: var(--muted); }
.product-rating strong { color: var(--text); font-weight: 600; }
.product-rating span:last-child { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.product-rating:hover span:last-child { color: var(--accent-ink); text-decoration-color: currentColor; }
.product-rating-empty span:last-child { font-size: 13px; }
.card-rating { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; }
.card-rating small { font-size: 12px; color: var(--muted); }

/* ---------- Section avis ---------- */
.reviews-section { scroll-margin-top: 150px; }
.reviews-section.loading .reviews-list { opacity: .45; transition: opacity .2s; }
.reviews-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 22px; }
.reviews-head p { font-size: 14px; }
.reviews-layout { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.reviews-summary { position: sticky; top: 150px; background: var(--surface); border-radius: 16px; padding: 24px; text-align: center; }
.reviews-score { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.reviews-score strong { font-size: 54px; font-weight: 600; color: var(--brand); line-height: 1; }
.reviews-score span { font-size: 18px; color: var(--muted); }
.reviews-summary > .stars { margin: 8px 0 4px; }
.reviews-based { font-size: 13px; }
.reviews-dist { margin: 18px 0 10px; display: grid; gap: 6px; }
.reviews-dist button { width: 100%; display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 10px; font-size: 13px; padding: 3px 6px; border-radius: 6px; }
.reviews-dist button:not(:disabled):hover, .reviews-dist button[aria-pressed=true] { background: #fff; }
.reviews-dist button[aria-pressed=true] { box-shadow: 0 0 0 2px var(--accent) inset; }
.reviews-dist .bar { height: 8px; background: #e3e7ea; border-radius: 99px; overflow: hidden; }
.reviews-dist .bar b { display: block; height: 100%; background: #f5a623; border-radius: inherit; transition: width .6s var(--ease); }
.reviews-dist .n { text-align: right; color: var(--muted); }
.reviews-recommend { font-size: 13px; margin: 6px 0 16px; }
.reviews-recommend strong { color: var(--success-ink); }
.reviews-write { width: 100%; justify-content: center; }
.reviews-note { font-size: 13px; margin-top: 12px; }
.reviews-note a { text-decoration: underline; }
.reviews-empty-ico { font-size: 40px; }
.reviews-layout-empty { grid-template-columns: 1fr; }
.reviews-layout-empty .reviews-summary { position: static; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 20px; text-align: left; max-width: 900px; padding: 22px 26px; }
.reviews-layout-empty .reviews-empty-ico { grid-row: span 3; font-size: 44px; }
.reviews-layout-empty .reviews-empty-title { margin: 0; font-size: 17px; }
.reviews-layout-empty .reviews-summary > :not(.reviews-empty-ico) { grid-column: 2; margin: 0; }
.reviews-layout-empty .reviews-note, .reviews-layout-empty .reviews-write { margin-top: 6px !important; justify-self: start; width: auto; }
.reviews-layout-empty .reviews-main { display: none; }
.reviews-empty-title { font-weight: 600; color: var(--text); margin: 6px 0 4px; }
.reviews-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.reviews-toolbar label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.reviews-toolbar select { padding: 7px 30px 7px 12px; font-size: 14px; }
.reviews-clear { font-size: 13px; background: var(--surface); padding: 6px 12px; border-radius: 99px; }
.reviews-list { display: grid; }
.reviews-none { padding: 24px 0; }
.review { padding: 22px 0; border-bottom: 1px solid var(--border); }
.review-in { animation: review-in .45s var(--ease) both; }
@keyframes review-in { from { opacity: 0; transform: translateY(8px); } }
.review-head { display: flex; gap: 12px; align-items: center; }
.review-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.review-head small { color: var(--muted); font-size: 12px; width: 100%; }
.review-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--brand-light)); color: #fff; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.review-verified { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--success-ink); background: var(--success-surface); border-radius: 99px; padding: 2px 8px; }
.review-rating { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; }
.review-rating h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.review-body { color: var(--text); font-size: 15px; line-height: 1.65; }
.review-reply { margin: 14px 0 0 24px; padding: 14px 16px; background: #f3f6f9; border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0; }
.review-reply-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; }
.review-reply-head strong { color: var(--brand); }
.review-reply-head small { color: var(--muted); font-size: 12px; }
.review-reply-logo { width: 24px; height: 24px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.review-reply p { font-size: 14px; color: var(--text); }
.review-foot { margin-top: 10px; }
.review-helpful { font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 99px; padding: 4px 12px; }
.review-helpful:hover { border-color: var(--brand); color: var(--brand); }
.review-helpful.voted { background: var(--success-surface); color: var(--success-ink); border-color: transparent; pointer-events: none; }
.reviews-more { margin-top: 18px; }

/* formulaire d'avis */
.review-modal .dialog-content { max-width: 560px; }
.review-form { display: grid; gap: 14px; }
.review-form label { font-size: 14px; font-weight: 500; }
.review-form input:not([type=radio]), .review-form textarea { width: 100%; margin-top: 6px; }
.review-form-product { font-weight: 500; color: var(--text); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.review-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.review-form-legal { font-size: 12px; }
.star-input { border: 0; padding: 0; margin: 0; }
.star-input legend { font-size: 14px; font-weight: 500; margin-bottom: 4px; padding: 0; }
.star-row { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 2px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input .star-row label { font-size: 34px; font-weight: 400; margin: 0; line-height: 1; color: #d6dbe0; cursor: pointer; transition: color .12s, transform .12s; font-family: Arial, sans-serif; }
.star-row label:hover, .star-row label:hover ~ label, .star-row input:checked ~ label { color: #f5a623; }
.star-row label:hover { transform: scale(1.15); }
.star-input input:focus-visible + label { outline: 2px solid var(--brand); border-radius: 4px; }
.star-input-label { order: -1; margin-left: 10px; font-size: 14px; font-weight: 600; color: var(--accent-ink); min-width: 80px; }

/* ---------- Devis ---------- */
.quote-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 4px; padding: 12px 14px; border: 1px dashed #c9d3db; border-radius: 10px; background: #fafcfd; }
.add-quote { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand); padding: 6px 12px; border-radius: 99px; background: #e8f0f6; }
.add-quote:hover { background: var(--brand); color: #fff; }
.add-quote.added { background: var(--success); color: #fff; }
.quote-cta small { color: var(--muted); font-size: 12px; flex: 1; min-width: 200px; }
.floating-tools > a.quote-fab { color: var(--brand); }
.floating-tools > a.quote-fab[hidden] { display: none !important; }
.floating-tools > a.quote-fab b { background: var(--accent); }
.quote-fab.pop { animation: fab-pop .5s var(--ease); }
@keyframes fab-pop { 40% { transform: scale(1.25); } }
@media (width <= 749px) { .floating-tools > a.quote-fab:not([hidden]) { display: grid; } }

.quote-hero { max-width: 820px; margin-bottom: 28px; }
.quote-hero h1 { margin: 6px 0 10px; }
.quote-perks { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.quote-perks li { background: var(--surface); border-radius: 99px; padding: 6px 14px; font-size: 13px; }
.quote-form-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.quote-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.quote-card h2 { font-size: 19px; margin-bottom: 16px; }
.quote-card h2 small { font-size: 13px; color: var(--muted); font-weight: 400; }
.quote-empty { text-align: center; padding: 26px 10px; display: grid; gap: 12px; justify-items: center; }
.quote-empty span { font-size: 42px; }
.quote-lines { display: grid; }
.quote-line { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.quote-line .product-media { width: 64px; height: 64px; border-radius: 10px; background: var(--surface); }
.quote-line-info { display: grid; gap: 2px; min-width: 0; }
.quote-line-info a { font-weight: 500; line-height: 1.35; }
.quote-line-info small { color: var(--muted); font-size: 12px; }
.quote-line .quantity input { width: 64px; }
.quote-hint { font-size: 13px; margin-top: 14px; background: #fafcfd; padding: 10px 12px; border-radius: 8px; }
.quote-contact-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quote-contact-form .form-grid label { font-size: 13px; font-weight: 500; }
.quote-contact-form .form-grid label small { color: var(--muted); font-weight: 400; }
.quote-contact-form .form-grid input, .quote-contact-form .form-grid select, .quote-contact-form .form-grid textarea { width: 100%; margin-top: 5px; }
.quote-contact-form .full { grid-column: 1 / -1; }
.quote-contact-form .inline-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400 !important; }
.quote-contact-form .inline-check input { width: 17px; margin-top: 3px; }
.quote-contact-form .hp { position: absolute; left: -9999px; }
.quote-submit { width: 100%; justify-content: center; margin-top: 18px; }
.quote-legal { font-size: 12px; text-align: center; margin-top: 10px; }
.quote-history-title { font-size: 15px; margin: 24px 0 8px; }
.quote-history li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.quote-history li a { display: grid; }
.quote-history li small { color: var(--muted); font-size: 12px; }
.cart-to-quote { margin: 10px 0 4px; }
.cart-to-quote button { font-size: 13px; text-align: left; }

.quote-view .qv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.quote-view .qv-head h1 { margin: 4px 0 8px; }
.quote-steps { margin: 26px 0 30px; max-width: 640px; }
.quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.quote-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.quote-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 500; padding: 0 8px 10px; border-bottom: 1px solid var(--border); }
.quote-table td { padding: 12px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.quote-table .num { text-align: right; white-space: nowrap; }
.quote-table del { color: var(--muted); font-size: 12px; }
.quote-prod { display: flex; gap: 12px; align-items: center; }
.quote-prod img { width: 52px; height: 52px; object-fit: contain; background: var(--surface); border-radius: 8px; }
.quote-prod span { display: grid; }
.quote-prod small { color: var(--muted); font-size: 12px; }
.quote-totals { margin: 16px 0 0 auto; max-width: 340px; display: grid; gap: 6px; font-size: 14px; }
.quote-totals > div { display: flex; justify-content: space-between; }
.quote-totals .savings { color: var(--success-ink); }
.quote-totals .quote-total { border-top: 2px solid var(--brand); padding-top: 10px; margin-top: 4px; font-size: 18px; color: var(--brand); }
.quote-totals small { text-align: right; color: var(--muted); }
.quote-note { margin-top: 18px; background: #f3f6f9; border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.quote-note p { color: var(--text); margin-top: 4px; }
.quote-note-client { background: var(--surface); }
.quote-pending { margin-top: 14px; background: #fff8e6; border-radius: 10px; padding: 12px 14px; font-size: 14px; color: #6b4e00; }
.quote-side { display: grid; gap: 16px; position: sticky; top: 150px; }
.quote-accept { background: #fff; border: 2px solid var(--accent); border-radius: 16px; padding: 20px; display: grid; gap: 12px; }
.quote-accept-total { font-size: 15px; color: var(--text); }
.quote-accept-total strong { display: block; font-size: 28px; color: var(--brand); }
.quote-accept .inline-check { display: flex; gap: 8px; font-size: 13px; align-items: flex-start; }
.quote-accept .inline-check a { text-decoration: underline; }
.quote-accept button { justify-content: center; }
.quote-accept small { font-size: 12px; color: var(--muted); }
.quote-refuse { font-size: 14px; }
.quote-refuse summary { color: var(--muted); }
.quote-refuse form { display: grid; gap: 10px; margin-top: 10px; }
.quote-refuse textarea { width: 100%; margin-top: 4px; }
.quote-done { background: var(--success-surface); color: var(--success-ink); border-radius: 10px; padding: 12px 14px; }
.quote-contact { display: grid; gap: 2px; background: var(--surface); border-radius: 12px; padding: 14px 16px; font-size: 14px; }
.quote-contact small { color: var(--muted); }

/* ---------- Documents PDF ---------- */
.doc-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.doc-link { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px 10px 12px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.doc-link > span:first-child { font-size: 22px; }
.doc-link span:last-child { display: grid; line-height: 1.25; }
.doc-link strong { font-size: 14px; font-weight: 600; color: var(--text); }
.doc-link small { font-size: 12px; color: var(--muted); }
.doc-link:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.doc-link-invoice { border-color: #bfe0cc; background: var(--success-surface); }
.oc-aside .doc-links { margin: 0 0 14px; }
.oc-aside .doc-link { flex: 1 1 100%; }

/* ---------- Avis après commande ---------- */
.review-order-form { display: grid; gap: 16px; max-width: 820px; }
.review-order-item { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: grid; gap: 12px; }
.review-order-item.done { background: var(--surface); }
.review-order-item label { font-size: 14px; font-weight: 500; }
.review-order-item input:not([type=radio]), .review-order-item textarea { width: 100%; margin-top: 5px; }
.review-order-prod { display: flex; gap: 14px; align-items: center; }
.review-order-prod img { width: 60px; height: 60px; object-fit: contain; border-radius: 10px; background: var(--surface); }
.review-order-prod div { display: grid; }
.review-order-prod a { font-weight: 500; }
.review-order-prod small { color: var(--muted); font-size: 12px; }
.review-order-done { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--success-ink); }
.review-order-foot { display: grid; gap: 10px; justify-items: start; padding: 4px 2px; }
.review-order-foot label { font-size: 14px; font-weight: 500; }
.review-order-foot input { margin-top: 5px; }
.review-order-foot p { font-size: 13px; }

.footer-legal { display: block; margin-top: 4px; opacity: .8; font-size: 11px; }

@media (width <= 989px) {
  .reviews-layout, .quote-form-grid, .quote-grid { grid-template-columns: 1fr; }
  .reviews-summary, .quote-side { position: static; }
}
@media (width <= 749px) {
  .reviews-layout { gap: 22px; }
  .review-reply { margin-left: 10px; }
  .review-form-grid, .quote-contact-form .form-grid { grid-template-columns: 1fr; }
  .quote-line { grid-template-columns: 56px 1fr auto; }
  .quote-line .quantity { grid-column: 2; justify-self: start; }
  .quote-line .product-media { width: 56px; height: 56px; }
  .quote-table th:nth-child(3), .quote-table td:nth-child(3) { display: none; }
}
@media print {
  .reviews-section, .quote-cta, .quote-accept, .quote-refuse, .doc-links { display: none !important; }
}

/* ---------- Bandeau cookies : refuser aussi simple qu'accepter ---------- */
.analytics-consent .privacy-banner-actions .privacy-refuse { margin: 0; min-width: 112px; }

/* ---------- Accueil : mosaïque, cartes projets ---------- */
.promo-small > div { position: relative; z-index: 1; }
.promo-small h3 { line-height: 1.25; }
/* noms de produits longs : le texte garde sa colonne, la photo la sienne (pas de chevauchement) */
@media (width >= 750px) {
  .promo-small h3 { max-width: 54%; font-size: 17px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .promo-small .eyebrow { max-width: 54%; }
  .promo-small .product-media { width: 50%; right: -5%; bottom: -2%; }
}
@media (width <= 749px) {
  .promo-small { padding: 12px; }
  .promo-small h3 { max-width: 100%; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .promo-small .product-media { width: 54%; right: -6%; bottom: -8%; opacity: .95; }
  .promo-small .text-link { margin-top: 6px; }
}
.project-cards > a { transition: transform .25s, box-shadow .25s; }
.project-cards > a:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 60, 89, .1); }
.legal-missing { color: #b84200; font-style: italic; }
.cart-suggestions { margin-top: 48px; }
.cart-suggestions h2 { margin-bottom: 20px; }
.cart-suggestions .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
@media (width <= 989px) { .cart-suggestions .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- Guides : appel à l'action en bas de liste ---------- */
.guides-more { margin-top: var(--space-7, 40px); padding: var(--space-5, 24px); border-radius: var(--radius, 8px); background: #f3f5f6; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.guides-more p { margin: 0; max-width: 560px; }
.guides-more > div { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Fiche produit : listes de la description lisibles ---------- */
.product-tabs #tab-desc ul { list-style: none; padding-left: 0; margin: 8px 0 16px; }
.product-tabs #tab-desc ul li { position: relative; padding-left: 22px; margin: 6px 0; }
.product-tabs #tab-desc ul li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #ff6700); }