/* ============================================================
   Simulateur 2D — habillage « moderne clair épuré » (07/2026)
   Chargé via <link> par Simulator2DWidgetKonva.cshtml (les 2 pages
   hôtes /simulator et /simulator2d) et Simulator2DEstimate.cshtml.
   Tokens : rouge #D32F1E, hover #B32517, teinte #FBEDEB,
            texte #252525, secondaire #6B7280, filet #E6E8EB,
            zone de jeu #F5F6F7, rayons 12px (cartes) / 8px (boutons).
   Hex en dur volontairement (compatibilité minifier si bundlé un jour).
   Tout est scopé sous .sim2d pour ne rien casser du thème Slicing.
   ============================================================ */

/* ---------- stage (carte autour de la scène Konva) ---------- */
.sim2d .sim2d-stage {
    border: 1px solid #E6E8EB;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(35, 31, 32, .08);
    background: #F5F6F7;
}

/* ---------- bouton plein écran ---------- */
.sim2d .fullscreen-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #E6E8EB;
    border-radius: 50%;
    background: #FFFFFF;
    color: #4A4A4A;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(35, 31, 32, .08);
    z-index: 10;
    transition: color .15s ease;
}

.sim2d .fullscreen-btn:hover { color: #D32F1E; }

.sim2d .fullscreen-btn:focus { outline: 2px solid #D32F1E; outline-offset: 2px; }

/* ---------- overlay de chargement ---------- */
.sim2d #sim2d-loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #F5F6F7;
    opacity: 1;
    transition: opacity .4s ease;
}

.sim2d #sim2d-loading.sim2d-done {
    opacity: 0;
    pointer-events: none;
}

.sim2d .sim2d-load-logo {
    background: #D32F1E;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    letter-spacing: .04em;
    padding: 10px 16px 8px;
    margin-bottom: 18px;
}

.sim2d .sim2d-progress-track {
    width: 260px;
    height: 6px;
    border-radius: 999px;
    background: #E6E8EB;
    overflow: hidden;
    margin-bottom: 14px;
}

.sim2d #sim2d-progress-bar {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: #D32F1E;
    transition: width .3s ease;
}

.sim2d .sim2d-load-caption {
    font-size: 13px;
    color: #6B7280;
}

.sim2d #sim2d-loading.sim2d-error .sim2d-progress-track { visibility: hidden; }

.sim2d #sim2d-loading.sim2d-error .sim2d-load-caption {
    color: #D32F1E;
    max-width: 46ch;
    text-align: center;
}

/* ---------- boutons ---------- */
.sim2d .sim2d-btn {
    display: inline-block;
    border-radius: 8px;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.4;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.sim2d .sim2d-btn .fa { margin-left: 7px; margin-right: 0; }

.sim2d .sim2d-btn .fa-upload,
.sim2d .sim2d-btn .fa-download { margin-left: 0; margin-right: 7px; }

.sim2d .sim2d-btn-primary {
    background: #D32F1E;
    border-color: #D32F1E;
    color: #FFFFFF;
}

.sim2d .sim2d-btn-primary:hover,
.sim2d .sim2d-btn-primary:focus {
    background: #B32517;
    border-color: #B32517;
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(35, 31, 32, .08);
}

.sim2d .sim2d-btn-outline {
    background: #FFFFFF;
    border-color: #E6E8EB;
    color: #252525;
}

.sim2d .sim2d-btn-outline:hover,
.sim2d .sim2d-btn-outline:focus {
    border-color: #252525;
    color: #252525;
}

/* Bouton panier : rouge DQN plein, panier blanc dont la flèche montre qu'on y
   dépose quelque chose (fa-cart-arrow-down, le même glyphe que la fiche produit). */
.sim2d .sim2d-btn-cart i {
    margin-right: 9px;
    font-size: 16px;
}

/* pendant l'envoi : le bouton ne réagit plus et s'estompe légèrement */
.sim2d .sim2d-btn.sim2d-btn-busy {
    opacity: .65;
    cursor: default;
}

/* confirmation courte : le vert dit que c'est parti dans le panier */
.sim2d .sim2d-btn.sim2d-btn-ok,
.sim2d .sim2d-btn.sim2d-btn-ok:hover {
    background: #2E7D32;
    border-color: #2E7D32;
    color: #FFFFFF;
}

/* état désactivé (classe togglée par Simulator2DDimensionsPartialTable) */
.sim2d .sim2d-btn.disabled,
.sim2d .sim2d-btn.disabled:hover {
    background: #F5F6F7;
    border-color: #E6E8EB;
    color: #A8ADB3;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}

/* ---------- rangée d'actions sous le stage ---------- */
.sim2d .sim2d-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 10px;
    margin: 18px 0;
}

/* ---------- chip longueur (état vide) ---------- */
.sim2d .sim2d-chip {
    display: inline-block;
    background: #FBEDEB;
    color: #D32F1E;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sim2d .sim2d-chip span { font-size: 15px; }

/* ---------- cartes ---------- */
.sim2d .sim2d-card {
    background: #FFFFFF;
    border: 1px solid #E6E8EB;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(35, 31, 32, .06);
    overflow: hidden;
    margin-bottom: 16px;
}

.sim2d .sim2d-card-head {
    padding: 14px 22px 0;
    font-size: 15px;
    font-weight: 700;
    color: #252525;
}

.sim2d .sim2d-card-head span {
    font-size: 12.5px;
    font-weight: 400;
    color: #6B7280;
    margin-left: 8px;
}

/* ---------- tableau des dimensions ---------- */
.sim2d table.sim2d-dims {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 0;
}

.sim2d table.sim2d-dims th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6B7280;
    padding: 10px 22px;
    border-bottom: 1px solid #E6E8EB;
    background: transparent;
}

.sim2d table.sim2d-dims td {
    padding: 11px 22px;
    border-bottom: 1px solid #E6E8EB;
    font-size: 14px;
    color: #252525;
}

.sim2d table.sim2d-dims tr:last-child td { border-bottom: none; }

.sim2d table.sim2d-dims th.sim2d-num,
.sim2d table.sim2d-dims td.sim2d-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* rangée du total (une seule, après les chaînes) */
.sim2d .sim2d-total {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: #F5F6F7;
    padding: 13px 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #252525;
}

.sim2d .sim2d-total b {
    color: #D32F1E;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

/* alignement numérique générique (dimensions + panier) */
.sim2d th.sim2d-num,
.sim2d td.sim2d-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- hero (Simulator2DIndex) ---------- */
.sim2d-hero { padding: 10px 0 22px; }

.sim2d-hero h1 { margin-bottom: 12px; }

.sim2d-hero .sim2d-lead,
.sim2d .sim2d-lead {
    max-width: 62ch;
    color: #6B7280;
    font-size: 15px;
    line-height: 1.6;
}

/* ---------- page devis ---------- */
.sim2d .sim2d-estimate-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 40px;
}

.sim2d .sim2d-estimate-cart {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 480px;
    flex: 1 1 480px;
    min-width: 0;
}

.sim2d .sim2d-estimate-form {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 380px;
    flex: 1 1 380px;
    min-width: 0;
}

.sim2d table.sim2d-cart-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.sim2d table.sim2d-cart-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6B7280;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #E6E8EB;
}

.sim2d table.sim2d-cart-table td {
    padding: 10px 18px;
    border-bottom: 1px solid #E6E8EB;
    font-size: 14px;
    color: #252525;
    vertical-align: middle;
}

.sim2d table.sim2d-cart-table tr:last-child td { border-bottom: none; }

.sim2d table.sim2d-cart-table .cartImage {
    width: 56px;
    height: 56px;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 8px;
    background: #F5F6F7;
}

.sim2d .sim2d-ref {
    display: inline-block;
    background: #F5F6F7;
    border: 1px solid #E6E8EB;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* formulaire */
.sim2d .sim2d-form-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6B7280;
    margin: 0 0 5px;
}

.sim2d .sim2d-form .form-control {
    border: 1px solid #E6E8EB;
    border-radius: 8px;
    background: #FFFFFF;
    padding: 10px 12px;
    height: auto;
    font-size: 14px;
    color: #252525;
    box-shadow: none;
}

.sim2d .sim2d-form .form-control:focus {
    border-color: #D32F1E;
    box-shadow: 0 0 0 3px #FBEDEB;
    outline: none;
}

.sim2d .sim2d-form .form-group { margin-bottom: 14px; }

.sim2d .sim2d-form-title {
    font-size: 15px;
    font-weight: 700;
    color: #252525;
    padding: 18px 22px 0;
}

.sim2d .sim2d-form-inner { padding: 4px 22px 20px; }

/* ============================================================
   v2 — moteur Konva : catalogue DOM, toolbar, dialogue, rotation
   ============================================================ */

/* ---------- catalogue ---------- */
.sim2d .sim2d-catalog {
    background: #FFFFFF;
    border-bottom: 1px solid #E6E8EB;
    padding: 12px 16px 10px;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    gap: 10px 12px;
    justify-content: start;
    overflow-x: auto;
}

.sim2d .sim2d-tile {
    width: 84px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.sim2d .sim2d-tile-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: #F5F6F7;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    transition: border-color .15s ease, transform .15s ease;
}

.sim2d .sim2d-tile:hover .sim2d-tile-thumb { border-color: #D5D8DC; transform: translateY(-1px); }

.sim2d .sim2d-tile-thumb img { max-width: 62px; max-height: 62px; pointer-events: none; }

.sim2d .sim2d-tile-lbl {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    color: #252525;
    max-width: 84px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sim2d .sim2d-tile-off { cursor: not-allowed; }

.sim2d .sim2d-tile-off .sim2d-tile-thumb::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 8px;
    background: rgba(107, 114, 128, .45);
}

.sim2d .sim2d-tile-off:hover .sim2d-tile-thumb { border-color: transparent; transform: none; }

.sim2d .sim2d-tile-off .sim2d-tile-lbl { color: #6B7280; }

/* ---------- toolbar in-scène ---------- */
.sim2d .sim2d-toolbar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E6E8EB;
    border-radius: 999px;
    padding: 5px 10px;
    box-shadow: 0 6px 20px rgba(35, 31, 32, .08);
    z-index: 5;
}

.sim2d .sim2d-tb-btn {
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    color: #4A4A4A;
    transition: background .15s ease, color .15s ease;
}

.sim2d .sim2d-tb-btn:hover { background: #FBEDEB; color: #D32F1E; }

.sim2d .sim2d-tb-btn:disabled { color: #C8CCD0; background: transparent; cursor: default; }

.sim2d .sim2d-tb-sep { width: 1px; height: 22px; background: #E6E8EB; }

/* ---------- boutons rotation flottants ---------- */
.sim2d .sim2d-rot-btn {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid #E6E8EB;
    background: #FFFFFF;
    color: #D32F1E;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(35, 31, 32, .08);
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 6;
    padding: 0;
}

.sim2d .sim2d-rot-btn:hover { background: #FBEDEB; }

/* ---------- dialogue de confirmation ---------- */
.sim2d .sim2d-veil {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(35, 31, 32, .35);
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 30;
}

.sim2d .sim2d-veil.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.sim2d .sim2d-dlg {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(35, 31, 32, .25);
    width: 380px;
    max-width: calc(100% - 40px);
    padding: 24px 26px 22px;
}

.sim2d .sim2d-dlg h4 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #252525; }

.sim2d .sim2d-dlg p { margin: 0 0 20px; font-size: 14px; color: #6B7280; }

.sim2d .sim2d-dlg-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.sim2d .sim2d-btn-ghost {
    background: #FFFFFF;
    color: #6B7280;
    border-color: #E6E8EB;
}

.sim2d .sim2d-btn-ghost:hover { color: #252525; border-color: #6B7280; }

/* ---------- guide actif (première visite) ---------- */
/* Posé sur TOUT le widget (il éclaire aussi des zones sous le cadre, qui a
   overflow:hidden). Il ne bloque JAMAIS les clics : le voile n'est qu'un
   projecteur (pointer-events:none partout, sauf la croix de la carte). */
.sim2d { position: relative; }

.sim2d .sim2d-coach {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 30;
    display: none;
    overflow: hidden;          /* l'ombre géante du projecteur reste dans le widget */
    pointer-events: none;
}

.sim2d .sim2d-coach.show { display: block; }

/* projecteur : un trou de lumière, le reste du widget s'assombrit (ombre géante),
   et il GLISSE d'une zone à l'autre — rectangle sur la bibliothèque, cercle sur
   la boule d'accroche */
.sim2d .sim2d-coach-spot {
    position: absolute;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(24, 19, 20, .45);
    transition: left .5s cubic-bezier(.22, 1, .36, 1), top .5s cubic-bezier(.22, 1, .36, 1),
                width .5s cubic-bezier(.22, 1, .36, 1), height .5s cubic-bezier(.22, 1, .36, 1),
                border-radius .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}

.sim2d .sim2d-coach-spot::after {
    content: '';
    position: absolute;
    top: -2px; right: -2px; bottom: -2px; left: -2px;
    border: 2px solid rgba(211, 47, 30, .85);
    border-radius: inherit;
    animation: sim2dCoachRespire 1.8s ease-in-out infinite;
}

@keyframes sim2dCoachRespire {
    0%, 100% { box-shadow: 0 0 0 4px rgba(211, 47, 30, .14); }
    50%      { box-shadow: 0 0 0 10px rgba(211, 47, 30, .04); }
}

/* fin : le voile s'éteint en douceur */
.sim2d .sim2d-coach.fin .sim2d-coach-spot { opacity: 0; }

/* Points d'accroche : le voile rectangulaire cede la place au voile SVG, percé
   d'un cercle clair INDÉPENDANT par point (une div à ombre géante ne sait faire
   qu'un seul trou : la deuxième ombre reboucherait le premier). */
.sim2d .sim2d-coach-holes {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    display: none;
}

.sim2d .sim2d-coach-voile-fond { fill: rgba(24, 19, 20, .45); }
.sim2d .sim2d-coach.trous .sim2d-coach-holes { display: block; }
.sim2d .sim2d-coach.trous .sim2d-coach-spot { display: none; }
.sim2d .sim2d-coach.fin .sim2d-coach-holes { display: none; }

/* anneaux radar sur la boule d'accroche (étape BOULE uniquement) : deux ondes
   décalées qui partent de la boule — elle-même reste visible dessous */
.sim2d .sim2d-coach-ping {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: none;
}

.sim2d .sim2d-coach.boule .sim2d-coach-ping { display: block; }

/* un anneau par point d'accroche proposé : ils pulsent tous, Aldric choisit */
.sim2d .sim2d-coach-ring { position: absolute; width: 0; height: 0; }

.sim2d .sim2d-coach-ring::before,
.sim2d .sim2d-coach-ring::after {
    content: '';
    position: absolute;
    left: -27px; top: -27px;
    width: 54px; height: 54px;
    border: 3px solid #D32F1E;
    border-radius: 50%;
    opacity: 0;
    animation: sim2dCoachPing 1.5s cubic-bezier(.2, .6, .35, 1) infinite;
}

.sim2d .sim2d-coach-ring::after { animation-delay: .75s; }

@keyframes sim2dCoachPing {
    0%        { transform: scale(.3); opacity: .95; }
    80%, 100% { transform: scale(1.15); opacity: 0; }
}

/* carte : pictogramme + une ligne + avancement. Elle glisse avec le projecteur
   et rejoue une petite entrée à chaque étape. */
.sim2d .sim2d-coach-card {
    position: absolute;
    background: #FFFFFF;
    color: #231F20;
    border-radius: 14px;
    padding: 11px 14px 12px;
    box-shadow: 0 14px 40px rgba(24, 19, 20, .38);
    max-width: 340px;
    transition: left .5s cubic-bezier(.22, 1, .36, 1), top .5s cubic-bezier(.22, 1, .36, 1);
}

.sim2d .sim2d-coach-card.pop { animation: sim2dCoachPop .35s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes sim2dCoachPop {
    from { transform: scale(.88); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.sim2d .sim2d-coach-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* points d'avancement : fait (rouge éteint) / en cours (trait rouge) / à venir */
.sim2d .sim2d-coach-dots { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px; }

.sim2d .sim2d-coach-dots span {
    width: 7px; height: 7px;
    border-radius: 999px;
    background: #E5DFDF;
    transition: width .3s ease, background .3s ease;
}

.sim2d .sim2d-coach-dots span.fait { background: rgba(211, 47, 30, .35); }
.sim2d .sim2d-coach-dots span.ici  { width: 22px; background: #D32F1E; }

.sim2d .sim2d-coach-x {
    pointer-events: auto;      /* seul élément cliquable de tout le guide */
    border: none;
    background: transparent;
    color: #9A9192;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    margin-left: 14px;
    cursor: pointer;
}

.sim2d .sim2d-coach-x:hover { color: #231F20; }

.sim2d .sim2d-coach-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.sim2d .sim2d-coach-ico {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #FBEDEB;
    color: #D32F1E;
}

.sim2d .sim2d-coach-txt { font-size: 14.5px; font-weight: 600; line-height: 1.3; }

/* fin : coche verte, croix inutile */
.sim2d .sim2d-coach.fin .sim2d-coach-ico { background: #E8F3E9; color: #2E7D32; }
.sim2d .sim2d-coach.fin .sim2d-coach-dots span { background: rgba(46, 125, 50, .5); }
.sim2d .sim2d-coach.fin .sim2d-coach-x { display: none; }

@media (prefers-reduced-motion: reduce) {
    .sim2d .sim2d-coach-spot::after,
    .sim2d .sim2d-coach-ring::before,
    .sim2d .sim2d-coach-ring::after,
    .sim2d .sim2d-coach-card.pop { animation: none; }
    .sim2d .sim2d-coach-ring::before { opacity: .85; transform: scale(.6); }
}

/* Présélection du dialogue : anneau sombre sur le bouton au focus, pour voir
   sans ambiguïté ce que déclenchera Enter (Tab passe d'un bouton à l'autre) */
.sim2d .sim2d-dlg .sim2d-btn:focus {
    outline: 3px solid #231F20;
    outline-offset: 2px;
}

/* ---------- fantôme de drag catalogue -> scène ---------- */
#sim2d-ghost {
    position: fixed;
    pointer-events: none;
    opacity: .6;
    z-index: 100;
    display: none;
    max-width: 80px;
    max-height: 80px;
}

/* ============================================================
   v3 — refonte UX (page KonvaV2) : catalogue latéral groupé,
   barre d'outils haute, barre de sélection ancrée, cotes en
   direct, récap sticky. Tout est scopé .sim2d-v2 : la page
   Konva v1 n'est pas affectée.
   ============================================================ */

/* ---------- cadre ---------- */
.sim2d-v2 .sim2d-frame {
    position: relative; /* ancre les overlays (chargement, dialogue) */
    background: #FFFFFF;
    border: 1px solid #E6E8EB;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(35, 31, 32, .08);
}

/* ---------- barre d'outils haute ---------- */
.sim2d-v2 .sim2d-topbar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid #E6E8EB;
    background: #FFFFFF;
}

.sim2d-v2 .sim2d-tb2 {
    font-family: inherit;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 7px;
    border: 1px solid #E6E8EB;
    background: #FFFFFF;
    color: #252525;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.sim2d-v2 .sim2d-tb2:hover { border-color: #B9BEC4; }

.sim2d-v2 .sim2d-tb2:disabled { color: #C0C4C9; cursor: default; border-color: #E6E8EB; }

.sim2d-v2 .sim2d-tb2:focus { outline: 2px solid #D32F1E; outline-offset: 2px; }

.sim2d-v2 .sim2d-tb2-icon { padding: 8px 9px; }

.sim2d-v2 .sim2d-tb2 svg { display: block; }

.sim2d-v2 .sim2d-zoomlbl {
    font-size: 12.5px;
    font-weight: 600;
    min-width: 44px;
    text-align: center;
    color: #6B7280;
    font-variant-numeric: tabular-nums;
}

.sim2d-v2 .sim2d-tbsep { width: 1px; height: 22px; background: #E6E8EB; margin: 0 6px; }

.sim2d-v2 .sim2d-tbspacer { -ms-flex: 1 1 auto; flex: 1 1 auto; }

/* ---------- corps : catalogue + scène ---------- */
.sim2d-v2 .sim2d-v2-body {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 252px 1fr;
    grid-template-columns: 252px minmax(0, 1fr);
}

/* ---------- catalogue latéral ---------- */
.sim2d-v2 .sim2d-side {
    border-right: 1px solid #E6E8EB;
    background: #FFFFFF;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 0;
}

.sim2d-v2 .sim2d-search { position: relative; padding: 12px 12px 8px; }

.sim2d-v2 .sim2d-search svg {
    position: absolute;
    left: 22px;
    top: 22px;
    color: #6B7280;
    pointer-events: none;
}

.sim2d-v2 .sim2d-search input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
    border: 1px solid #E6E8EB;
    border-radius: 8px;
    padding: 8px 10px 8px 32px;
    background: #F5F6F7;
    color: #252525;
}

.sim2d-v2 .sim2d-search input:focus {
    outline: none;
    border-color: #D32F1E;
    box-shadow: 0 0 0 3px #FBEDEB;
    background: #FFFFFF;
}

.sim2d-v2 .sim2d-veilnote {
    display: none;
    margin: 2px 12px 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #FBEDEB;
    color: #B32517;
    font-size: 11.5px;
    line-height: 1.4;
}

.sim2d-v2 .sim2d-veilnote.show { display: block; }

.sim2d-v2 .sim2d-groups {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 12px 10px;
    min-height: 0;
}

.sim2d-v2 .sim2d-group-h {
    font-family: inherit;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 2px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6B7280;
}

.sim2d-v2 .sim2d-group-h:focus { outline: 2px solid #D32F1E; outline-offset: -2px; }

.sim2d-v2 .sim2d-group-h .sim2d-chev { transition: transform .15s ease; }

.sim2d-v2 .sim2d-group.closed .sim2d-chev { transform: rotate(-90deg); }

.sim2d-v2 .sim2d-group.closed .sim2d-group-tiles { display: none; }

.sim2d-v2 .sim2d-group-tiles {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 4px;
}

/* tuiles : on réutilise les classes moteur (.sim2d-tile*) avec des overrides v2 */
.sim2d-v2 .sim2d-tile {
    width: auto;
    border: 1px solid #E6E8EB;
    border-radius: 10px;
    background: #FFFFFF;
    padding: 8px 8px 7px;
    gap: 5px;
    transition: border-color .15s ease, transform .15s ease;
}

.sim2d-v2 .sim2d-tile:hover { transform: translateY(-1px); border-color: #B9BEC4; }

.sim2d-v2 .sim2d-tile:hover .sim2d-tile-thumb { border-color: transparent; transform: none; }

.sim2d-v2 .sim2d-tile-thumb {
    width: 100%;
    height: 56px;
    border-radius: 7px;
    border: none;
}

.sim2d-v2 .sim2d-tile-thumb img { max-width: 48px; max-height: 48px; }

.sim2d-v2 .sim2d-tile-lbl {
    font-size: 11.5px;
    font-weight: 700;
    max-width: none;
    white-space: normal;
    line-height: 1.25;
}

.sim2d-v2 .sim2d-tile-dims {
    font-size: 10.5px;
    color: #6B7280;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.sim2d-v2 .sim2d-tile-off { border-color: #E6E8EB; }

.sim2d-v2 .sim2d-tile-off:hover { transform: none; }

/* voile sur toute la tuile (pas seulement la vignette comme en v1) */
.sim2d-v2 .sim2d-tile-off::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 10px;
    background: rgba(245, 246, 247, .72);
}

.sim2d-v2 .sim2d-tile { position: relative; }

.sim2d-v2 .sim2d-tile-off .sim2d-tile-thumb::after { display: none; }

.sim2d-v2 .sim2d-tile-hidden { display: none; }

.sim2d-v2 .sim2d-sidetip {
    border-top: 1px solid #E6E8EB;
    padding: 9px 14px;
    font-size: 11.5px;
    color: #6B7280;
    line-height: 1.4;
}

.sim2d-v2 .sim2d-sidetip b { color: #252525; }

/* ---------- scène ---------- */
.sim2d-v2 .sim2d-playwrap {
    position: relative;
    background: #F5F6F7;
    min-width: 0;
}

/* ---------- barre de sélection ancrée ---------- */
.sim2d-v2 .sim2d-selbar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    -ms-flex-align: center;
    align-items: center;
    gap: 2px;
    background: #FFFFFF;
    border: 1px solid #E6E8EB;
    border-radius: 999px;
    padding: 6px 8px 6px 12px;
    box-shadow: 0 6px 20px rgba(35, 31, 32, .12);
    z-index: 6;
    white-space: nowrap;
    max-width: calc(100% - 24px);
}

.sim2d-v2 .sim2d-selbar.show { display: -ms-flexbox; display: flex; }

.sim2d-v2 .sim2d-selbar .sim2d-selwho {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    padding-right: 8px;
}

.sim2d-v2 .sim2d-selbar .sim2d-selwho img { width: 26px; height: 26px; object-fit: contain; }

.sim2d-v2 .sim2d-selname { font-size: 12.5px; font-weight: 700; color: #252525; line-height: 1.2; }

.sim2d-v2 .sim2d-seldims { font-size: 11px; color: #6B7280; line-height: 1.2; font-variant-numeric: tabular-nums; }

.sim2d-v2 .sim2d-selbar button {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: #252525;
    border-radius: 999px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.sim2d-v2 .sim2d-selbar button:hover { background: #FBEDEB; color: #D32F1E; }

.sim2d-v2 .sim2d-selbar button:focus { outline: 2px solid #D32F1E; outline-offset: -2px; }

.sim2d-v2 .sim2d-selbar .sim2d-seldanger { color: #D32F1E; }

.sim2d-v2 .sim2d-selbar .sim2d-selsep { width: 1px; height: 20px; background: #E6E8EB; margin: 0 2px; }

/* ---------- cotes en direct ---------- */
.sim2d-v2 .sim2d-dims-overlay {
    position: absolute;
    border: 1.5px dashed rgba(35, 31, 32, .28);
    pointer-events: none;
    display: none;
    z-index: 3;
}

.sim2d-v2 .sim2d-dims-overlay.show { display: block; }

.sim2d-v2 .sim2d-dim-w,
.sim2d-v2 .sim2d-dim-h {
    position: absolute;
    font-size: 11.5px;
    font-weight: 700;
    color: #6B7280;
    background: #F5F6F7;
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sim2d-v2 .sim2d-dim-w { top: -22px; left: 50%; transform: translateX(-50%); }

.sim2d-v2 .sim2d-dim-h { left: -10px; top: 50%; transform: translate(-100%, -50%); }

/* ---------- règle d'échelle ---------- */
.sim2d-v2 .sim2d-ruler {
    position: absolute;
    left: 16px;
    bottom: 14px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    color: #6B7280;
    font-size: 11px;
    pointer-events: none;
    z-index: 3;
}

.sim2d-v2 .sim2d-ruler-bar {
    width: 150px;
    height: 5px;
    border: 1.5px solid currentColor;
    border-top: none;
}

/* ---------- état vide (première visite) ---------- */
.sim2d-v2 .sim2d-empty {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: none;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 24px;
    z-index: 4;
    pointer-events: none;
    padding: 20px;
}

.sim2d-v2 .sim2d-empty.show { display: -ms-flexbox; display: flex; }

.sim2d-v2 .sim2d-drop {
    border: 2px dashed #C9CDD2;
    border-radius: 14px;
    padding: 30px 48px;
    text-align: center;
    color: #6B7280;
    font-size: 13px;
    background: rgba(255, 255, 255, .55);
}

.sim2d-v2 .sim2d-drop b {
    display: block;
    font-size: 15px;
    color: #252525;
    margin-bottom: 4px;
}

.sim2d-v2 .sim2d-empty-steps {
    display: -ms-flexbox;
    display: flex;
    gap: 22px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
}

.sim2d-v2 .sim2d-empty-step {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: #6B7280;
    max-width: 190px;
}

.sim2d-v2 .sim2d-empty-step .sim2d-stepnum {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #D32F1E;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* ---------- toast (annulation) ---------- */
.sim2d-v2 .sim2d-toast {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translate(-50%, 6px);
    background: #2B2728;
    color: #F4F2F0;
    font-size: 13px;
    border-radius: 10px;
    padding: 10px 14px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 8;
    max-width: calc(100% - 32px);
}

.sim2d-v2 .sim2d-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.sim2d-v2 .sim2d-toast button {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: none;
    border: none;
    color: #FF8A7A;
    cursor: pointer;
    padding: 2px 4px;
}

/* ---------- récap sticky ---------- */
.sim2d-v2 .sim2d-footbar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-top: 1px solid #E6E8EB;
    background: #FFFFFF;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.sim2d-v2 .sim2d-footcount {
    font-size: 13px;
    color: #6B7280;
    font-variant-numeric: tabular-nums;
}

.sim2d-v2 .sim2d-footreason { font-size: 12px; color: #6B7280; }

/* le CTA réutilise .sim2d-btn/.sim2d-btn-primary/.disabled existants */

@media (prefers-reduced-motion: reduce) {
    .sim2d-v2 * { transition: none !important; }
}

/* Produit retenu au catalogue (clic sans boule choisie) : surligné en rouge DQN
   tant que l'utilisateur n'a pas cliqué la boule de connexion de destination */
.sim2d .sim2d-tile-picked,
.sim2d-v2 .sim2d-tile-picked {
    outline: 2px solid #d32f1e;
    outline-offset: -2px;
    border-radius: 10px;
    background: #FBEAE8;
}

/* v1 : la tuile n'a pas de marge interne -> avec l'offset négatif le cadre collait
   l'image et coupait le nom. On le trace 3 px AUTOUR de la tuile (les écarts de la
   grille catalogue, 10-12 px, laissent la place). La v2 garde l'offset négatif :
   ses tuiles ont bordure et padding propres. */
.sim2d .sim2d-tile-picked {
    outline-offset: 3px;
}

/* Fiche du produit sélectionné dans le simulateur : photo réelle + nom,
   affichée en colonne en haut à droite du canevas (le bouton plein écran est en bas à droite) */
.sim2d .sim2d-productcard {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 215px;
    background: #FFFFFF;
    border: 1px solid #E6E8EB;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(35, 31, 32, .10);
    padding: 10px;
    z-index: 5;
    display: none;
    text-align: center;
}

.sim2d .sim2d-productcard a {
    text-decoration: none;
    color: #231F20;
}

.sim2d .sim2d-productcard img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 8px;
}

.sim2d .sim2d-pc-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

@media (max-width: 767px) {
    .sim2d .sim2d-productcard { display: none !important; }
}

/* Fiche produit : plusieurs photos separees d'un "+" (ex : Ergo-Roll + detecteur de roue) */
.sim2d .sim2d-pc-imgs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.sim2d .sim2d-pc-imgs img {
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    height: auto;
}

.sim2d .sim2d-pc-plus {
    font-weight: 700;
    font-size: 16px;
    color: #231F20;
    flex: 0 0 auto;
}