:root{
    --hpc-orange:#f9603e;
    --hpc-orange-dark:#e44e2f;
    --hpc-black:#101112;
    --hpc-dark:#171819;
    --hpc-grey:#6d6d6d;
    --hpc-light:#f5f5f3;
    --hpc-line:#e5e5e1;
    --hpc-white:#ffffff;
    --hpc-green:#20ae3b;
    --hpc-red:#d9432f;
    --hpc-yellow:#d89a00;
    --hpc-radius:10px;
    --hpc-shadow:0 18px 50px rgba(0,0,0,.08);

    /* Remplace ces deux valeurs par tes photos de matière. */
    --hpc-thickness-12-image:url(/wp-content/uploads/2026/09/Panneau-epaisseur-12mm-100x100.webp);
    --hpc-thickness-24-image:url(/wp-content/uploads/2026/09/Panneau-epaisseur-24mm-100x100.webp);
}


/* =========================================================
   BASE
   ========================================================= */

.hpc-product-config,
.hpc-product-config *,
.hpc-customizer-modal,
.hpc-customizer-modal *{
    box-sizing:border-box;
}

.hpc-product-config{
    font-family:inherit;
    margin:24px 0 18px;
    color:var(--hpc-black);
}

.hpc-product-config button,
.hpc-customizer-modal button{
    font-family:inherit;
}

.hpc-product-config button:focus-visible,
.hpc-customizer-modal button:focus-visible{
    outline:2px solid var(--hpc-orange);
    outline-offset:2px;
}

.hpc-cart-design-thumbnail{
	width:70px;
	height:70px;
	object-fit:contain;
	border-radius:6px;
	background:#f4f4f2;
	padding:3px;
}


/* =========================================================
   PRODUCT CONFIGURATOR
   ========================================================= */

.hpc-step{
    margin-bottom:15px;
}

.hpc-step-label{
    margin-bottom:7px;
    color:#151515;
    font-size:12.5px;
    font-weight:850;
    line-height:1.2;
}

.hpc-choice-grid{
    display:grid;
}

/* FORMAT — compact, type Displate, uniquement les dimensions */
.hpc-format-grid{
    width:100%;
    max-width:560px;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
    padding:3px;
    border:1px solid #e6e4df;
    border-radius:9px;
    background:#f2f1ee;
}

.hpc-format-choice{
    width:100%;
    min-width:0;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:7px 5px;
    border:1px solid transparent;
    border-radius:6px;
    background:transparent;
    color:#171717;
    text-align:center;
    cursor:pointer;
    box-shadow:none;
    transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}

.hpc-format-choice:hover{
    background:rgba(255,255,255,.65);
}

.hpc-format-choice.is-active{
    border-color:#161616;
    background:#fff;
    box-shadow:0 1px 5px rgba(0,0,0,.06);
}

.hpc-format-choice strong{
    display:block;
    margin:0;
    color:#111;
    font-size:11.5px;
    font-weight:850;
    line-height:1.1;
    white-space:nowrap;
}

/* ÉPAISSEUR — photo ronde de la matière + épaisseur dessous */
.hpc-thickness-grid{
    width:max-content;
    max-width:100%;
    grid-template-columns:repeat(2,60px);
    gap:7px;
}

.hpc-thickness-choice{
    min-height:83px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:none!important;
    background:#fff;
    color:#111;
    cursor:pointer;
    transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
}

.hpc-thickness-choice:hover{
    border-color:#bebcb6;
    transform:translateY(-1px);
}


.hpc-thickness-swatch{
    width:36px;
    height:36px;
    display:block;
    flex:0 0 36px;
    border-radius:50%;
    border:2px solid #fff;
    outline:1px solid #d0cec8;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    box-shadow:0 3px 9px rgba(0,0,0,.10);
    transition:outline-color .16s ease,transform .16s ease;
}

.hpc-thickness-swatch-12{
    background-image:var(--hpc-thickness-12-image);
}

.hpc-thickness-swatch-24{
    background-image:var(--hpc-thickness-24-image);
}

.hpc-thickness-choice.is-active .hpc-thickness-swatch{
    outline:2px solid var(--hpc-black);
    transform:scale(1.03);
}

.hpc-thickness-choice strong{
    display:block;
    margin:0;
    color:#111;
    font-size:11.5px;
    font-weight:850;
    line-height:1;
}

.hpc-price-box{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    padding:15px 0 13px;
    margin-top:2px;
    border-top:1px solid var(--hpc-line);
    border-bottom:0;
}

.hpc-price-box span{
    color:#666;
    font-size:13px;
}

.hpc-price-box strong{
    font-size:29px;
    font-weight:900;
    line-height:1;
    white-space:nowrap;
}

.hpc-customize-button{
    width:100%;
    min-height:56px;
    border:0;
    border-radius:8px;
    background:var(--hpc-black);
    color:#fff;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    transition:background .2s ease,transform .2s ease;
}

.hpc-customize-button:hover{
    background:#252525;
    transform:translateY(-1px);
}

/* =========================================================
   MODAL
   ========================================================= */

.hpc-customizer-modal{
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
    padding:18px;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(5px);
}

.hpc-customizer-modal.is-open{
    display:flex;
    align-items:center;
    justify-content:center;
}

.hpc-customizer-shell{
    width:min(1380px,100%);
    height:min(900px,calc(100vh - 36px));
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#f4f4f2;
    border-radius:14px;
    box-shadow:0 25px 90px rgba(0,0,0,.28);
}


/* =========================================================
   HEADER
   ========================================================= */

.hpc-customizer-header{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:70px;
    padding:0 22px;
    background:#fff;
    border-bottom:1px solid var(--hpc-line);
}

.hpc-customizer-header > div{
    display:flex;
    align-items:baseline;
    gap:11px;
    min-width:0;
}

.hpc-customizer-header strong{
    font-size:16px;
    line-height:1.2;
}

.hpc-customizer-header span{
    color:#868686;
    font-size:12px;
}

#hpc-close-customizer{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border:0;
    border-radius:50%;
    background:#f1f1ef;
    color:#111;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    transition:.2s ease;
}

#hpc-close-customizer:hover{
    background:#e9e9e6;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.hpc-customizer-layout{
    min-height:0;
    flex:1;
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.hpc-customizer-sidebar{
    min-width:0;
    overflow:auto;
    padding:18px;
    background:#fff;
    border-right:1px solid var(--hpc-line);
}

#hpc-upload-button{
    width:100%;
    min-height:46px;
    border:0;
    border-radius:7px;
    background:var(--hpc-orange);
    color:#fff;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
}

#hpc-upload-button:hover{
    background:var(--hpc-orange-dark);
}

#hpc-upload-button:disabled{
    opacity:.6;
    cursor:wait;
}

.hpc-tools{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:18px;
}

.hpc-tools button{
    min-height:39px;
    border:1px solid var(--hpc-line);
    border-radius:6px;
    background:#fff;
    color:#222;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    transition:
        background .2s ease,
        border-color .2s ease;
}

.hpc-tools button:hover{
    background:#f4f4f1;
    border-color:#d2d2cc;
}


/* =========================================================
   IMAGE ADJUSTMENTS
   ========================================================= */

.hpc-adjustments{
    margin-top:16px;
    padding-top:15px;
    border-top:1px solid var(--hpc-line);
}

.hpc-adjustments-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:13px;
}

.hpc-adjustments-head strong{
    font-size:12px;
    line-height:1.2;
}

#hpc-reset-adjustments{
    padding:0;
    border:0;
    background:transparent;
    color:#777;
    font-size:9px;
    font-weight:700;
    cursor:pointer;
}

#hpc-reset-adjustments:hover{
    color:var(--hpc-black);
}

#hpc-reset-adjustments:disabled{
    opacity:.4;
    cursor:default;
}

.hpc-adjustment-row{
    margin-bottom:12px;
}

.hpc-adjustment-label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:6px;
}

.hpc-adjustment-label label{
    color:#343434;
    font-size:10.5px;
    font-weight:700;
}

.hpc-adjustment-label span{
    min-width:27px;
    color:#777;
    font-size:9.5px;
    font-variant-numeric:tabular-nums;
    text-align:right;
}

.hpc-adjustment-row input[type="range"]{
    width:100%;
    height:18px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    accent-color:var(--hpc-orange);
    cursor:pointer;
}

.hpc-adjustment-row input[type="range"]:disabled{
    opacity:.35;
    cursor:default;
}

.hpc-adjustments-help{
    display:none;
    margin:3px 0 0;
    color:#929292;
    font-size:9px;
    line-height:1.35;
}

.hpc-adjustments.is-disabled .hpc-adjustments-help{
    display:block;
}


/* =========================================================
   QUALITY INDICATOR
   ========================================================= */

.hpc-quality-indicator{
    margin-top:14px;
}

.hpc-quality-empty{
    padding:12px;
    border-radius:7px;
    background:#f6f6f4;
    color:#898989;
    font-size:10px;
    line-height:1.4;
}

.hpc-quality-status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 11px;
    border-radius:7px;
}

.hpc-quality-status strong{
    font-size:11px;
}

.hpc-quality-status span{
    font-size:10px;
    font-weight:800;
}

.hpc-quality-good{
    background:#eaf7ee;
    color:#177c2c;
    border:1px solid #cce9d3;
}

.hpc-quality-medium{
    background:#fff7e4;
    color:#996d00;
    border:1px solid #f1dfad;
}

.hpc-quality-poor{
    background:#fff0ed;
    color:#b43a26;
    border:1px solid #f0cdc6;
}

.hpc-quality-indicator p{
    margin:7px 1px 0;
    color:#838383;
    font-size:10px;
    line-height:1.4;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.hpc-workspace{
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:28px;
    overflow:auto;
    background:
        linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px),
        linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),
        #efefec;
    background-size:20px 20px;
}

.hpc-canvas-wrapper{
    width:100%;
    min-height:0;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

#hpc-canvas{
    display:block;
    max-width:none;
    max-height:none;
    background:#fff;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.07),
        0 18px 45px rgba(0,0,0,.12);
    cursor:grab;
    touch-action:none;
}

#hpc-canvas:active{
    cursor:grabbing;
}

.hpc-canvas-legend{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-top:14px;
    color:#7f7f7f;
    font-size:9px;
    text-align:center;
}

.hpc-canvas-legend span{
    position:relative;
    padding-left:13px;
}

.hpc-canvas-legend span:before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:7px;
    height:7px;
    border-radius:50%;
    transform:translateY(-50%);
    background:#999;
}

.hpc-canvas-legend span:first-child:before{
    background:var(--hpc-orange);
}


/* =========================================================
   FOOTER
   ========================================================= */

.hpc-customizer-footer{
    flex:0 0 auto;
    min-height:74px;
    padding:12px 18px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:9px;
    border-top:1px solid var(--hpc-line);
    background:#fff;
}

#hpc-reset-design{
    min-height:44px;
    padding:0 18px;
    border:1px solid var(--hpc-line);
    border-radius:7px;
    background:#fff;
    color:#333;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

#hpc-reset-design:hover{
    background:#f5f5f2;
}

#hpc-save-design{
    min-height:46px;
    padding:0 22px;
    border:0;
    border-radius:7px;
    background:var(--hpc-black);
    color:#fff;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    transition:.2s ease;
}

#hpc-save-design:hover{
    background:#262626;
}

#hpc-save-design:disabled{
    opacity:.65;
    cursor:wait;
}


/* =========================================================
   GLOBAL MESSAGE
   ========================================================= */

.hpc-global-message{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:1000000;
    max-width:360px;
    padding:14px 16px;
    border-radius:8px;
    color:#fff;
    font-size:12px;
    font-weight:700;
    line-height:1.4;
    box-shadow:0 15px 45px rgba(0,0,0,.2);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:.25s ease;
}

.hpc-global-message.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.hpc-global-message.is-success{
    background:#1f8f36;
}

.hpc-global-message.is-error{
    background:#c73c2a;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

    .hpc-customizer-modal{
        padding:0;
    }

    .hpc-customizer-shell{
        width:100%;
        height:100vh;
        max-height:none;
        border-radius:0;
    }

    .hpc-customizer-layout{
        grid-template-columns:190px minmax(0,1fr);
    }

    .hpc-customizer-sidebar{
        padding:14px;
    }

    .hpc-tools{
        grid-template-columns:1fr;
    }

    .hpc-workspace{
        padding:18px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:680px){

    .hpc-product-config{
        margin-top:18px;
    }

    .hpc-step{
        margin-bottom:13px;
    }

    .hpc-step-label{
        margin-bottom:6px;
        font-size:12px;
    }

    .hpc-format-grid{
        width:100%;
        max-width:none;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:2px;
        padding:3px;
    }

    .hpc-format-choice{
        min-height:39px;
        padding:6px 2px;
    }

    .hpc-format-choice strong{
        font-size:10px;
        letter-spacing:-.15px;
    }

    .hpc-thickness-grid{
        grid-template-columns:repeat(2,60px);
        gap:6px;
    }

    .hpc-thickness-choice{
        min-height:76px;
        gap:5px;
        padding:6px;
    }

    .hpc-thickness-swatch{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    .hpc-thickness-choice strong{
        font-size:11px;
    }

    .hpc-price-box{
        align-items:center;
    }

    .hpc-price-box strong{
        font-size:24px;
    }

    .hpc-customizer-header{
        min-height:60px;
        padding:0 13px;
    }

    .hpc-customizer-header > div{
        display:block;
    }

    .hpc-customizer-header strong{
        display:block;
        font-size:13px;
    }

    .hpc-customizer-header span{
        display:block;
        margin-top:2px;
        font-size:10px;
    }

    .hpc-customizer-layout{
        display:flex;
        flex-direction:column;
    }

    .hpc-customizer-sidebar{
        order:2;
        flex:0 0 auto;
        overflow:visible;
        border-right:0;
        border-top:1px solid var(--hpc-line);
        padding:10px;
    }

    .hpc-workspace{
        order:1;
        flex:0 0 auto;
        height:min(330px,38vh);
        min-height:250px;
        padding:10px 12px;
        overflow:hidden;
    }

    .hpc-canvas-wrapper{
        min-height:0;
        overflow:hidden;
    }

    #hpc-upload-button{
        min-height:42px;
    }

    .hpc-quality-indicator{
        margin-top:8px;
    }

    .hpc-tools{
        display:flex;
        gap:6px;
        margin-top:9px;
        overflow-x:auto;
        padding-bottom:2px;
    }

    .hpc-tools button{
        flex:0 0 auto;
        min-height:36px;
        padding:0 11px;
        white-space:nowrap;
    }

    .hpc-adjustments{
        margin-top:10px;
        padding-top:10px;
    }

    .hpc-adjustment-row{
        margin-bottom:8px;
    }

    .hpc-canvas-legend{
        gap:8px;
        margin-top:8px;
        font-size:8px;
    }

    .hpc-customizer-footer{
        min-height:62px;
        padding:8px 10px;
    }

    #hpc-reset-design{
        min-height:42px;
        padding:0 12px;
        font-size:11px;
    }

    #hpc-save-design{
        flex:1;
        min-height:44px;
        padding:0 14px;
        font-size:11px;
    }

    .hpc-global-message{
        left:12px;
        right:12px;
        bottom:12px;
        max-width:none;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

    .hpc-customizer-header strong{
        max-width:230px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .hpc-quality-status{
        padding:8px 9px;
    }

    .hpc-canvas-legend{
        display:block;
    }

    .hpc-canvas-legend span{
        display:block;
        margin-top:4px;
    }

}


/* =========================================================
   CRÉATION IA
   ========================================================= */

#hpc-ai-open[hidden],
#hpc-ai-panel[hidden],
#hpc-ai-result[hidden],
#hpc-ai-cancel[hidden],
.hpc-ai-skeleton[hidden]{
    display:none!important;
}

.hpc-customizer-layout.is-ai-mode{
    grid-template-columns:minmax(290px,340px) minmax(0,1fr);
}

#hpc-ai-open{
    display:block;
    width:100%;
    min-height:46px;
    margin-top:9px;
    padding:9px 14px;
    border:1px solid var(--hpc-orange);
    border-radius:7px;
    background:#fff7f4;
    color:var(--hpc-black);
    font-size:13px;
    font-weight:800;
    line-height:1.3;
    cursor:pointer;
}

#hpc-ai-open:hover{
    background:#ffede5;
}

.hpc-customizer-sidebar.is-ai-mode > #hpc-upload-button,
.hpc-customizer-sidebar.is-ai-mode > #hpc-ai-open,
.hpc-customizer-sidebar.is-ai-mode > .hpc-quality-indicator,
.hpc-customizer-sidebar.is-ai-mode > .hpc-tools,
.hpc-customizer-sidebar.is-ai-mode > .hpc-adjustments{
    display:none!important;
}

#hpc-ai-panel{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-bottom:16px;
    color:var(--hpc-black);
}

#hpc-ai-back{
    align-self:flex-start;
    padding:4px 0;
    border:0;
    background:transparent;
    color:var(--hpc-grey);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

#hpc-ai-back:hover{
    color:var(--hpc-orange-dark);
}

#hpc-ai-panel h3{
    margin:2px 0 10px;
    color:var(--hpc-black);
    font-size:20px;
    font-weight:800;
    line-height:1.2;
}

#hpc-ai-panel > label{
    display:block;
    margin:5px 0 -5px;
    font-size:11px;
    font-weight:750;
    line-height:1.35;
}






#hpc-ai-panel textarea{
    width:100%;
    margin:0;
    border:1px solid #dcdcd8;
    border-radius:7px;
    background:#fff;
    color:var(--hpc-black);
    font:inherit;
    font-size:12px;
    line-height:1.45;
    box-shadow:none;
    min-height:104px;
    padding:11px 12px;
    resize:vertical;
}

#hpc-ai-panel textarea:focus{
    outline:2px solid var(--hpc-orange);
    outline-offset:1px;
}

#hpc-ai-panel :disabled{
    cursor:wait;
}

#hpc-ai-palette,
#hpc-ai-style{
    min-height:68px !important;
}

#hpc-ai-generate,
#hpc-ai-use{
    width:100%;
    min-height:43px;
    padding:10px 14px;
    border:0;
    border-radius:7px;
    background:var(--hpc-black);
    color:#fff;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}

#hpc-ai-generate:hover:not(:disabled),
#hpc-ai-use:hover:not(:disabled){
    background:#303030;
}

#hpc-ai-generate:disabled,
#hpc-ai-use:disabled,
#hpc-ai-regenerate:disabled{
    opacity:.58;
    cursor:wait;
}

#hpc-ai-cancel{
    align-self:center;
    padding:3px 9px;
    border:0;
    background:transparent;
    color:var(--hpc-grey);
    font-size:11px;
    font-weight:700;
    cursor:pointer;
}

#hpc-ai-status{
    min-height:18px;
    margin:0;
    color:var(--hpc-grey);
    font-size:11px;
    line-height:1.5;
}

#hpc-ai-status.is-error{
    color:var(--hpc-red);
}

.hpc-ai-skeleton{
    width:100%;
    aspect-ratio:2/1;
    max-height:195px;
    border-radius:8px;
    background:linear-gradient(105deg,#edede9 18%,#f9f9f7 45%,#edede9 68%);
    background-size:200% 100%;
    animation:hpc-ai-shimmer 1.5s linear infinite;
}

@keyframes hpc-ai-shimmer{
    to{background-position-x:-200%;}
}

#hpc-ai-result{
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:3px;
}

#hpc-ai-image{
    display:block;
    width:100%;
    height:auto;
    max-height:260px;
    object-fit:contain;
    border:1px solid var(--hpc-line);
    border-radius:7px;
    background:var(--hpc-light);
}

#hpc-ai-regenerate{
    width:100%;
    min-height:37px;
    padding:8px 12px;
    border:1px solid var(--hpc-line);
    border-radius:7px;
    background:#fff;
    color:var(--hpc-black);
    font-size:11px;
    font-weight:750;
    cursor:pointer;
}

#hpc-ai-regenerate:hover:not(:disabled){
    border-color:var(--hpc-orange);
}

@media(max-width:900px){
    .hpc-customizer-layout.is-ai-mode{
        grid-template-columns:270px minmax(0,1fr);
    }
}

@media(max-width:680px){
    .hpc-customizer-layout.is-ai-mode{
        display:flex;
        flex-direction:column;
    }

    .hpc-customizer-layout.is-ai-mode .hpc-workspace{
        height:min(210px,26vh);
        min-height:130px;
    }

    .hpc-customizer-layout.is-ai-mode .hpc-customizer-sidebar{
        flex:1 1 auto;
        min-height:0;
        overflow:auto;
        padding:14px 16px;
    }

    .hpc-ai-skeleton{
        max-height:155px;
    }
}

@media(prefers-reduced-motion:reduce){
    .hpc-ai-skeleton{
        animation:none;
    }
}