/* =========================================================================
   CONSEIL DE TAILLE — fenêtre « Trouver ma taille » (assets/js/conseil-taille.js)
   Autonome : utilise les variables de la page si elles existent (--ink, --line, --muted,
   --blue), avec des valeurs de repli.
   ========================================================================= */
html.ct-bloque { overflow: hidden; }
.ct-ov { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(14, 16, 20, .55); opacity: 0; transition: opacity .18s ease; }
.ct-ov.is-open { opacity: 1; }
.ct-box { width: 100%; max-width: 640px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #fff;
  color: var(--ink, #14161a); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); overflow: hidden;
  transform: translateY(8px); transition: transform .18s ease; }
.ct-ov.is-open .ct-box { transform: none; }
.ct-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line, #e5e7eb); }
.ct-head h3 { margin: 0; font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-coupe { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #0e1014; color: #D7FF00; }
.ct-x { border: 0; background: none; font-size: 18px; line-height: 1; padding: 6px; cursor: pointer; color: inherit; }
.ct-body { padding: 18px 20px 20px; overflow-y: auto; }

.ct-form { display: flex; flex-direction: column; gap: 14px; }
.ct-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-ligne--1 { grid-template-columns: minmax(0, 260px); }
.ct-champ { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ct-lab { font-size: 13px; font-weight: 600; }
.ct-lab small { font-weight: 400; color: var(--muted, #6b7280); }
.ct-unite { position: relative; display: block; }
.ct-unite input { width: 100%; height: 44px; padding: 0 44px 0 12px; border: 1px solid var(--line, #d1d5db); border-radius: 10px;
  font: inherit; font-size: 16px; background: #fff; color: inherit; }
.ct-unite input:focus { outline: 2px solid var(--blue, #2563eb); outline-offset: 1px; border-color: transparent; }
.ct-unite em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; color: var(--muted, #6b7280); }
.ct-refbloc { display: flex; gap: 14px; align-items: center; padding: 12px; background: #f8fafc; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.ct-refbloc p { margin: 0; }
.ct-schema { flex: 0 0 96px; width: 96px; height: auto; color: var(--ink, #14161a); }

.ct-info { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: #fff8e6; font-size: 13px; line-height: 1.45; }
.ct-message { margin: 14px 0 0; font-size: 14px; font-weight: 600; min-height: 1em; }
.ct-message:empty { display: none; }
.ct-message.is-ok { color: #166534; }
.ct-message.is-ko { color: #a1271b; }

/* tableau des dimensions : ligne conseillée vive, voisines plus douces */
.ct-tab-wrap { margin-top: 12px; overflow-x: auto; }
.ct-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ct-tab th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--muted, #6b7280); padding: 6px 8px; border-bottom: 1px solid var(--line, #e5e7eb); white-space: nowrap; }
.ct-tab td { padding: 8px; border-bottom: 1px solid var(--line, #f0f0f0); vertical-align: middle; }
.ct-tab tr.is-conseil td { background: #D7FF00; }
.ct-tab tr.is-serre td, .ct-tab tr.is-large td { background: #f4fbcf; }
.ct-col-cmp small { display: block; color: var(--muted, #4b5563); font-size: 12px; margin-top: 2px; }
.ct-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #fff; color: #3f4a1f; border: 1px solid #c9d97a; }
.ct-badge--conseil { background: #0e1014; color: #D7FF00; border-color: #0e1014; }
.ct-tab .ct-col-choix { text-align: right; width: 1%; white-space: nowrap; padding-left: 4px; }
.ct-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-choisir-ligne { display: inline-block; height: 28px; padding: 0 12px; border: 1px solid #0e1014; border-radius: 999px; background: #fff;
  color: #0e1014; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ct-tab tr.is-conseil .ct-choisir-ligne { background: #0e1014; color: #fff; }
.ct-petit { margin: 8px 0 0; font-size: 12px; color: var(--muted, #6b7280); line-height: 1.45; }
.ct-mention { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted, #4b5563); }
.ct-mention a, .ct-vie a { color: inherit; text-decoration: underline; }
.ct-vie { margin: 6px 0 0; font-size: 12px; color: var(--muted, #6b7280); }

/* Bouton d'ouverture (fiche produit, boutiques) */
.ct-ouvrir { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid #0e1014; border-radius: 999px;
  background: #fff; color: #0e1014; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ct-ouvrir:hover { background: #0e1014; color: #fff; }

@media (max-width: 560px) {
  .ct-ov { padding: 0; align-items: flex-end; }
  .ct-box { max-height: 92vh; border-radius: 16px 16px 0 0; }
  .ct-refbloc { flex-direction: column; align-items: flex-start; }
  .ct-ligne { grid-template-columns: 1fr; }
}