/*
 * Bloc devis instantané — reprise du graphisme du panier PrestaShop
 * (thème impression-plan, composant willowimpressionplan--cart).
 * Couleurs de prod : bleu ardoise #2c3e50, prune #642e57.
 */

.ip-devis {
    --ip-navy: #2c3e50;
    --ip-plum: #642e57;
    --ip-plum-rgb: 100, 46, 87;
    --ip-grey: #e9ebed;
    --ip-font: "Montserrat", Tahoma, Arial, sans-serif;
    color: var(--ip-navy);
    font-family: var(--ip-font);
    margin: 0 auto;
    max-width: 1226px;
}

/* ------------------------------ Zone de dépôt ------------------------- */

.ip-dropzone {
    cursor: pointer;
    min-height: 180px;
    overflow: hidden;
    padding: 20px;
    position: relative;
}

.ip-dropzone::before {
    background: url(../img/bg-motif.png);
    content: "";
    height: 300%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    width: 150%;
    z-index: 0;
}

.ip-dropzone__content {
    align-items: center;
    border: 5px dashed var(--ip-plum);
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-height: 140px;
    padding: 20px;
    position: relative;
    text-align: center;
    z-index: 1;
}

.ip-dropzone__label {
    background: var(--ip-plum);
    color: #fff;
    font-family: var(--ip-font);
    font-size: 23px;
    font-weight: 600;
    line-height: 25px;
    padding: 10px 15px;
    position: relative;
    transition: background .3s;
}

.ip-dropzone__label::before {
    background: url(../img/picto-download.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 80px;
    opacity: .5;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    width: 60px;
}

.ip-dropzone:hover .ip-dropzone__label,
.ip-dropzone.is-over .ip-dropzone__label { background: var(--ip-navy); }
.ip-dropzone.is-over .ip-dropzone__content { background: rgba(var(--ip-plum-rgb), .08); }
.ip-dropzone:focus-visible { outline: 3px solid var(--ip-plum); outline-offset: 2px; }

.ip-dropzone__hint {
    color: var(--ip-navy);
    font-size: 13px;
    font-weight: 600;
}

/* ------------------------------ Erreurs ------------------------------- */

.ip-error {
    background: #fdecec;
    border: 1px solid #e5b3b3;
    color: #8f1d1d;
    font-size: 14px;
    margin-top: 12px;
    padding: 10px 14px;
}

/* ------------------------------ Tableau ------------------------------- */

.ip-table-wrap { margin-top: 30px; }
.ip-table-scroll { overflow-x: auto; }

.ip-table {
    border-collapse: collapse;
    min-width: 950px;
    width: 100%;
}

.ip-table th {
    background: var(--ip-navy);
    border-bottom: 3px solid var(--ip-plum);
    color: #fff;
    font-family: var(--ip-font);
    font-size: 15px;
    font-weight: 700;
    padding: 15px;
    text-align: center;
    white-space: nowrap;
}

.ip-table th.ip-th--file { text-align: left; }

.ip-table tbody tr { border-bottom: 3px dotted var(--ip-plum); }
.ip-table tbody tr:nth-child(odd)  { background: rgba(var(--ip-plum-rgb), .5); }
.ip-table tbody tr:nth-child(even) { background: rgba(var(--ip-plum-rgb), .2); }

.ip-table td {
    color: var(--ip-navy);
    font-size: 13px;
    line-height: 1.4;
    padding: 15px;
    text-align: center;
    vertical-align: middle;
}

.ip-table td:first-child { text-align: left; }

.ip-file-name { font-weight: 600; overflow-wrap: anywhere; }
.ip-file-sub { font-size: 13px; }

/* Options par fichier */
.ip-opt {
    align-items: center;
    display: inline-flex;
    font-size: 13px;
    font-weight: 400;
    gap: 5px;
    margin: 2px 6px;
    vertical-align: middle;
    white-space: nowrap;
}

.ip-cell-options .ip-opt--check { display: flex; justify-content: center; }

.ip-opt-radios { display: flex; justify-content: center; }

.ip-opt input { margin: 0; }

.ip-cell-calc { white-space: nowrap; }
.ip-cell-total { font-weight: 600; white-space: nowrap; }

/* Champs numériques : blanc sur bleu ardoise, comme le Presta */
.ip-table input[type="number"] {
    background: var(--ip-navy);
    border: 0;
    border-radius: 0;
    color: #fff;
    font-family: var(--ip-font);
    font-size: 13px;
    padding: 5px;
    text-align: right;
    width: 60px;
}

.ip-table input[type="number"]::-webkit-outer-spin-button,
.ip-table input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ip-table input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.ip-enlarge {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 12px;
}

.ip-enlarge label { cursor: pointer; }

.ip-tip {
    background: var(--ip-navy);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: help;
    display: inline-block;
    flex: none;
    font-family: inherit;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    height: 16px;
    line-height: 16px;
    padding: 0;
    text-align: center;
    width: 16px;
}

.ip-tip:hover,
.ip-tip[aria-expanded="true"] { background: var(--ip-plum); }

/* Bulle d'aide : élément unique injecté dans <body> (position fixe pour
   échapper à l'overflow-x du tableau), d'où les couleurs en dur. */
.ip-tip-bubble {
    background: #fff;
    border: 1px solid #2c3e50;          /* --ip-navy */
    border-bottom: 3px solid #642e57;   /* --ip-plum */
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    color: #2c3e50;
    display: none;
    font-family: "Montserrat", Tahoma, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    max-width: min(320px, calc(100vw - 16px));
    padding: 10px 15px;
    position: fixed;
    z-index: 100000;
}

.ip-remove {
    background: none;
    border: 0;
    color: var(--ip-navy);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.ip-remove:hover { color: var(--ip-plum); }
.ip-remove svg { display: block; }

.ip-cell-error { color: #8f1d1d; text-align: left; }

/* Barre de progression d'upload */
.ip-cell-upload { text-align: left; }

.ip-progress {
    background: rgba(255, 255, 255, .6);
    display: block;
    height: 8px;
    margin-top: 8px;
    overflow: hidden;
}
.ip-progress__bar {
    background: var(--ip-plum);
    display: block;
    height: 100%;
    transition: width .2s;
    width: 0;
}

/* ------------------------------ Récapitulatif ------------------------- */

.ip-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    margin-top: 30px;
}

/* Référence du dossier : bandeau bleu + zone de saisie grise (Presta) */
.ip-summary__reference { flex: 1 1 300px; max-width: 33%; }

.ip-summary__reference label {
    background: var(--ip-navy);
    border-bottom: 3px solid var(--ip-plum);
    color: #fff;
    display: flex;
    font-family: var(--ip-font);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    padding: 15px;
}

.ip-summary__reference textarea {
    background: rgba(233, 235, 237, .6);
    border: 0;
    border-radius: 0;
    color: var(--ip-navy);
    display: block;
    font-family: var(--ip-font);
    font-size: 13px;
    min-height: 64px;
    padding: 10px 15px;
    resize: none;
    width: 100%;
}

.ip-summary__reference textarea:focus {
    background: rgba(233, 235, 237, .4);
    outline: none;
}

.ip-summary__totals { flex: 1 1 340px; max-width: 33%; }

.ip-line {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.ip-line[hidden] { display: none; }

.ip-lines .ip-line:not(:first-child) { border-top: 3px dotted var(--ip-plum); }
.ip-lines .ip-line:last-child { border-bottom: 3px dotted var(--ip-plum); }
.ip-lines .ip-line:nth-child(odd)  { background: rgba(var(--ip-plum-rgb), .2); }
.ip-lines .ip-line:nth-child(even) { background: rgba(var(--ip-plum-rgb), .5); }

.ip-line__title,
.ip-line__price {
    color: var(--ip-navy);
    font-family: var(--ip-font);
    font-size: 15px;
    line-height: 18px;
    padding: 10px 15px;
    text-align: right;
}

.ip-line__title { flex: 1 1 50%; font-weight: 600; }
.ip-line__price { flex: 0 0 auto; font-weight: 400; }
.ip-line__price--total { font-weight: 600; }

.ip-shipping-note,
.ip-promo-note {
    color: var(--ip-navy);
    font-size: 14px;
    line-height: 1.4;
    margin: 15px 0 0;
}

/* Message personnalisé (fermeture atelier, annonces…) */
.ip-cart-message {
    color: var(--ip-plum);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    margin: 15px 0 0;
    text-align: center;
}

/* Bouton Commande (CTA Presta) */
.ip-order-btn {
    background: var(--ip-plum);
    white-space: normal;
    border: 0;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    display: block;
    margin-top: 20px;
    padding: 10px 15px;
    text-align: right;
    transition: background .3s;
    width: 100%;
}

.ip-order-btn:hover:not(:disabled) { background: var(--ip-navy); }
.ip-order-btn:disabled { cursor: not-allowed; opacity: .55; }

.ip-order-btn__title {
    align-items: center;
    display: inline-flex;
    font-family: var(--ip-font);
    font-size: 23px;
    font-weight: 600;
    gap: 10px;
    line-height: 25px;
}

.ip-order-btn small {
    display: block;
    font-family: var(--ip-font);
    font-size: 12px;
    font-weight: 300;
    line-height: 14px;
    margin-top: 5px;
}

/* ------------------------------ Responsive ---------------------------- */

@media (max-width: 1023px) {
    .ip-summary__reference,
    .ip-summary__totals { max-width: 100%; }
}

@media (max-width: 782px) {
    .ip-dropzone__label { font-size: 18px; line-height: 22px; }
    .ip-dropzone__label::before { display: none; }
    .ip-summary { flex-direction: column; }
    .ip-order-btn { text-align: center; }
}

/* ------------------------ Skin « héros violet » ----------------------- *
 * Page d'accueil 2026 : le widget shortcode porte la classe ip-devis-hero.
 * Direction graphique reprise de la maquette (page 65515) : Poppins,
 * violet foncé #45183C, rose pâle #F1E9EF, cellules en pastilles à coins
 * 15px séparées par des gouttières blanches de 5px, boutons en pilule.
 */

.ip-devis-hero .ip-devis {
    --ip-hero-dark: #45183C;   /* Violet foncé   */
    --ip-hero-deep: #512D3C;   /* Primaire prune */
    --ip-hero-plum: #742965;   /* Violet         */
    --ip-hero-pink: #B0176D;   /* Secondaire     */
    --ip-hero-pale: #F1E9EF;   /* Fond de ligne  */
    --ip-hero-soft: #B196AB;   /* Prune clair    */
    --ip-hero-font: "Poppins", var(--ip-font);
}

/* --------------------------- Zone de dépôt ---------------------------- */

.ip-devis-hero .ip-dropzone {
    background: rgba(255, 255, 255, .1);
    border: 2px solid #fff;
    border-radius: 50px;
    margin: 20px 0;
    min-height: 0;
    padding: 50px;
    transition: background .3s;
}

.ip-devis-hero .ip-dropzone::before { content: none; }

.ip-devis-hero .ip-dropzone__content {
    border: 0;
    gap: 25px;
    min-height: 0;
    padding: 0;
}

.ip-devis-hero .ip-dropzone__label {
    background: rgba(255, 255, 255, .1);
    border-radius: 25px;
    color: #fff;
    font-family: var(--ip-hero-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 55px;
    padding: 10px 25px;
}

.ip-devis-hero .ip-dropzone__label::before { content: none; }

.ip-devis-hero .ip-dropzone__hint {
    color: #fff;
    font-family: var(--ip-hero-font);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.3;
}

.ip-devis-hero .ip-dropzone:hover,
.ip-devis-hero .ip-dropzone.is-over { background: rgba(255, 255, 255, .2); }

.ip-devis-hero .ip-dropzone:hover .ip-dropzone__label,
.ip-devis-hero .ip-dropzone.is-over .ip-dropzone__label { background: rgba(255, 255, 255, .25); }

.ip-devis-hero .ip-dropzone.is-over .ip-dropzone__content { background: none; }

.ip-devis-hero .ip-dropzone:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* ------------------- Devis déplié : carte blanche ---------------------- */

.ip-devis-hero .ip-table-wrap {
    background: #fff;
    border-radius: 30px;
    padding: 25px;
}

.ip-devis-hero .ip-error {
    background: #fff;
    border: 0;
    border-radius: 15px;
    color: #8f1d1d;
    font-family: var(--ip-hero-font);
    font-weight: 400;
    padding: 15px 20px;
}

/* Tableau : une pastille par cellule, gouttières blanches */

.ip-devis-hero .ip-table {
    border-collapse: separate;
    border-spacing: 5px;
}

.ip-devis-hero .ip-table th {
    background: var(--ip-hero-dark);
    border-bottom: 0;
    border-radius: 15px;
    font-family: var(--ip-hero-font);
    font-size: 15px;
    font-weight: 700;
    padding: 12px 15px;
}

.ip-devis-hero .ip-table tbody tr,
.ip-devis-hero .ip-table tbody tr:nth-child(odd),
.ip-devis-hero .ip-table tbody tr:nth-child(even) {
    background: none;
    border-bottom: 0;
}

.ip-devis-hero .ip-table td {
    border-radius: 15px;
    color: var(--ip-hero-dark);
    font-family: var(--ip-hero-font);
    font-size: 14px;
    font-weight: 300;
    padding: 12px 15px;
}

.ip-devis-hero .ip-table tbody tr:nth-child(odd) td  { background: #fff; }
.ip-devis-hero .ip-table tbody tr:nth-child(even) td { background: var(--ip-hero-pale); }

.ip-devis-hero .ip-table th:first-child,
.ip-devis-hero .ip-table td:first-child { min-width: 185px; }

.ip-devis-hero .ip-cell-calc { white-space: normal; }

.ip-devis-hero .ip-file-name { font-weight: 600; overflow-wrap: break-word; }
.ip-devis-hero .ip-cell-total { font-weight: 600; }
.ip-devis-hero .ip-cell-error { color: #8f1d1d; font-weight: 400; }

/* Saisies : pilules bordées plutôt que pavés bleu ardoise */

.ip-devis-hero .ip-table input[type="number"] {
    background: #fff;
    border: 1px solid var(--ip-hero-soft);
    border-radius: 100px;
    color: var(--ip-hero-dark);
    font-family: var(--ip-hero-font);
    padding: 6px 14px;
    text-align: center;
    width: 72px;
}

.ip-devis-hero .ip-table input[type="number"]:focus {
    border-color: var(--ip-hero-plum);
    outline: none;
}

.ip-devis-hero .ip-opt { font-family: var(--ip-hero-font); }
.ip-devis-hero .ip-opt input { accent-color: var(--ip-hero-plum); }

.ip-devis-hero .ip-tip { background: var(--ip-hero-plum); }
.ip-devis-hero .ip-tip:hover,
.ip-devis-hero .ip-tip[aria-expanded="true"] { background: var(--ip-hero-pink); }

.ip-devis-hero .ip-remove { color: var(--ip-hero-plum); }
.ip-devis-hero .ip-remove:hover { color: var(--ip-hero-pink); }

.ip-devis-hero .ip-progress { background: #fff; border-radius: 100px; }
.ip-devis-hero .ip-progress__bar { background: var(--ip-hero-pink); }

/* Récapitulatif : mêmes pastilles que le tableau */

.ip-devis-hero .ip-summary__reference {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ip-devis-hero .ip-summary__reference label {
    background: var(--ip-hero-dark);
    border-bottom: 0;
    border-radius: 15px;
    font-family: var(--ip-hero-font);
    font-size: 15px;
    font-weight: 700;
    padding: 12px 20px;
}

.ip-devis-hero .ip-summary__reference textarea {
    background: var(--ip-hero-pale);
    border-radius: 15px;
    color: var(--ip-hero-dark);
    font-family: var(--ip-hero-font);
    font-weight: 300;
    padding: 15px 20px;
}

.ip-devis-hero .ip-summary__reference textarea:focus { background: #faf5f8; }

.ip-devis-hero .ip-summary__totals { max-width: 420px; }

.ip-devis-hero .ip-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ip-devis-hero .ip-lines .ip-line,
.ip-devis-hero .ip-lines .ip-line:not(:first-child),
.ip-devis-hero .ip-lines .ip-line:last-child {
    border: 0;
    border-radius: 15px;
}

.ip-devis-hero .ip-lines .ip-line:nth-child(odd)  { background: #fff; }
.ip-devis-hero .ip-lines .ip-line:nth-child(even) { background: var(--ip-hero-pale); }

.ip-devis-hero .ip-line__title,
.ip-devis-hero .ip-line__price {
    color: var(--ip-hero-dark);
    font-family: var(--ip-hero-font);
    font-size: 14px;
    font-weight: 300;
    padding: 12px 20px;
}

.ip-devis-hero .ip-line__title { flex: 1 1 auto; font-weight: 600; }
.ip-devis-hero .ip-line__price { flex: 0 0 auto; }
.ip-devis-hero .ip-line__price--total { color: var(--ip-hero-pink); font-weight: 700; }

.ip-devis-hero .ip-shipping-note,
.ip-devis-hero .ip-promo-note {
    color: var(--ip-hero-dark);
    font-family: var(--ip-hero-font);
    font-weight: 300;
}

.ip-devis-hero .ip-cart-message {
    color: var(--ip-hero-pink);
    font-family: var(--ip-hero-font);
    font-weight: 700;
}

/* CTA : pilule pleine, dans la famille des boutons de la maquette */

.ip-devis-hero .ip-order-btn {
    background: var(--ip-hero-deep);
    border-radius: 100px;
    font-family: var(--ip-hero-font);
    padding: 15px 30px;
    text-align: center;
}

.ip-devis-hero .ip-order-btn:hover:not(:disabled) { background: var(--ip-hero-plum); }

.ip-devis-hero .ip-order-btn__title {
    font-family: var(--ip-hero-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.ip-devis-hero .ip-order-btn small {
    font-family: var(--ip-hero-font);
    font-weight: 300;
    line-height: 1.35;
    opacity: .75;
}

/* ------------------------------ Responsive ---------------------------- */

@media (max-width: 782px) {
    .ip-devis-hero .ip-dropzone { border-radius: 30px; padding: 25px; }
    .ip-devis-hero .ip-dropzone__label { font-size: 20px; line-height: 1.2; }
    .ip-devis-hero .ip-dropzone__hint { font-size: 15px; line-height: 1.2; text-align: center; }
    .ip-devis-hero .ip-table-wrap { border-radius: 20px; padding: 15px; }
    .ip-devis-hero .ip-order-btn { padding: 15px 20px; }
    .ip-devis-hero .ip-order-btn__title { font-size: 18px; }
}