/**
 * 2026 DMConcept
 *
 * NOTICE OF LICENSE
 *
 * This file is licenced under the Software License Agreement.
 * With the purchase or the installation of the software in your application
 * you accept the licence agreement
 *
 * @author    DMConcept <support@dmconcept.fr>
 * @copyright 2026 DMConcept
 * @license   Commercial license (You can not resell or redistribute this software.)
 *
 */

/* Polices de la maquette Figma, absentes du thème : Hanken Grotesk (titres
   d'étape/de carte en 700, min/max en italique 400) et Space Grotesk
   (boutons/pastilles en 400, prix affiché en 700). */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,700;1,400&family=Space+Grotesk:wght@400;700&display=swap');

/* ==========================================================================
   Variables de couleur / rayons.
   - Les "--cyup-*" reprennent le système de palette déjà exposé par CYUP
     (static.cyup.fr/css/cyup.css) : on surcharge ses valeurs par défaut au
     lieu d'en recréer un autre. "--cyup-grey-200" et "--cyup-border-radius"
     ne sont PAS redéfinis ici : ils existent déjà côté CYUP, on les
     réutilise tels quels via var(), avec une valeur de repli au cas où.
   - Les "--mpi-*" (Ma Plaque Inox) sont des tokens propres à cette
     intégration, sans équivalent dans la palette CYUP.
   Un seul orange dans toute l'intégration : #FF7722 (--cyup-primary-main).
   Les anciennes variables --mpi-orange-btn / --mpi-orange-title (qui
   duppliquaient cette même couleur sous des noms différents) ont été
   supprimées au profit de --cyup-primary-main partout.
   ========================================================================== */
#configurator {
    background-color: unset;

    /* Palette CYUP surchargée aux couleurs de marque Ma Plaque Inox */
    --cyup-primary-main: #FF7722;
    --cyup-primary-dark: #E0691E;
    --cyup-primary-darker: #B85618;
    --cyup-primary-light: #FFC29C;
    --cyup-primary-lighter: #FFEFE4;

    --cyup-secondary-main: #234068;
    --cyup-secondary-dark: #1E3658;
    --cyup-secondary-darker: #192D49;
    --cyup-secondary-light: #9CA9BB;
    --cyup-secondary-lighter: #E5E8ED;

    /* Tokens propres à l'intégration (pas d'équivalent CYUP) */
    --mpi-navy-pill: #1B3157;
    --mpi-primary-shadow: rgba(255, 119, 34, .32);
    --mpi-radio-selected-bg: #FFF1E9;
    --mpi-card-selected-shadow: rgba(255, 119, 34, .18);
    --mpi-recap-bg: #F6F2E9;

    --mpi-radius-md: 10px;
    --mpi-radius-lg: 20px;
    --mpi-radius-pill: 999px;

    /* Polices Figma (voir @import plus haut) et lettrage : toujours 0 dans
       la maquette, une seule variable pour ne pas le répéter partout. */
    --mpi-font-family-primary: 'Hanken Grotesk', sans-serif;
    --mpi-font-family-secondary: 'Space Grotesk', sans-serif;
    --mpi-letter-spacing: 0;

    /* Raccourcis "font" (style/weight/size/line-height/family) par usage.
       Utilisés avec la propriété "font", pas "font-family" (voir plus bas). */
    --mpi-font-button: 400 15px/24px var(--mpi-font-family-secondary);
    --mpi-font-heading-lg: 700 18px/1 var(--mpi-font-family-secondary);
    --mpi-font-radio-label: 400 12px/1 var(--mpi-font-family-secondary);
    --mpi-font-card-title: 700 12px/1 var(--mpi-font-family-primary);
    --mpi-font-step-title: 700 14px/25.6px var(--mpi-font-family-primary);
    --mpi-font-minmax: italic 400 12px/1 var(--mpi-font-family-primary);
    --mpi-font-suffix: 700 14px/24px var(--mpi-font-family-primary);
    --mpi-font-stepper-label: 700 13px/1.3 var(--mpi-font-family-primary);
    --mpi-font-product-title: 700 26px/1.2 var(--mpi-font-family-primary);
}

/* ==========================================================================
   Loader initial (avant chargement du configurateur CYUP).
   ========================================================================== */
#configurator-loader-container {
    overflow-x: hidden;
}

#configurator-loader-wrapper {
    height: 300px;
    width: 100%;
    display: grid;
    place-items: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 10px 0 #bfc6cc;
    margin-block-end: 20px;
    padding: 0 0 10px;
}

#configurator-loader-inside-wrapper {
    color: #566ffb;
    font-size: 1.3rem;
    line-height: 1.8rem;
    text-align: center;
}

#configurator-loader {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-block;
    border-top: 5px solid #222542;
    border-right: 5px solid transparent;
    box-sizing: border-box;
    animation: configurator-loader-rotation 1s linear infinite;
}

#configurator-loader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border-left: 5px solid #566ffb;
    border-bottom: 5px solid transparent;
    animation: configurator-loader-rotation 0.5s linear infinite reverse;
}

@keyframes configurator-loader-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#configurator.no-prices .cyup--cart__info__total,
#configurator.no-prices .cyup--displayPrice,
body:not(.update-cyup-cart) #configurator.no-prices .cyup--addCart__button:not(.add-to-quote) {
    display: none;
}

#configurator.no-prices .cyup--addCart__button.add-to-quote {
    margin-top: 0 !important;
}

#configurator .cyup--preview2D__burger {
    display: none;
}

/* Liste des trous (étape perçage) : "Rond 1  Ø13 mm · X40 mm · Y360 mm" puis
   [poubelle] [icône paramétrage], comme dans la maquette.
   - CYUP met la flèche (".toggle") avant la poubelle (<button>) dans le DOM :
     on inverse via "order". Le panneau déplié (".__panel", flex-basis 100%)
     passe en dernier, sinon il s'intercale avant la poubelle/l'icône et les
     pousse sur une ligne sous le panneau.
   - Les icônes CYUP sont des glyphes Material Symbols (texte "expand_more"...) :
     on masque le texte (font-size 0) et on dessine l'icône du thème en masque
     SVG (currentColor) : curseurs (configure.svg) quand l'item est replié,
     coche (check.svg) quand il est déplié, comme sur la maquette. */
#configurator .cyup--editor__list--item > button {
    order: 1;
}

#configurator .cyup--editor__list--item > i.toggle {
    order: 2;
    font-size: 0;
    border-radius: 0;
    background-color: currentColor;
    -webkit-mask: url('../../../../assets/2026/icons/configure.svg') center / 20px 20px no-repeat;
    mask: url('../../../../assets/2026/icons/configure.svg') center / 20px 20px no-repeat;
}

#configurator .cyup--editor__list--item.selected > i.toggle {
    -webkit-mask-image: url('../../../../assets/2026/icons/check.svg');
    mask-image: url('../../../../assets/2026/icons/check.svg');
}

#configurator .cyup--editor__list--item > .cyup--editor__list--item__panel {
    order: 3;
}

#configurator .cyup--recapHTML__reference {
    display: none;
}

/* ==========================================================================
   Mise en page générale : le configurateur CYUP prend toute la largeur de
   la fiche produit (au lieu d'être compressé dans la colonne .right-product),
   pour éviter le mode "compact" (aperçu/étapes/panier empilés qui se
   chevauchent).
   ========================================================================== */
.row.cyup-active {
    margin-right: 0;
    margin-left: 0;
}

.row.cyup-active .right-product {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* Aperçu (cyup--preview2D) et étapes (cyup--configurator__content) : largeurs
   fixes fournies par la maquette Figma (600px / 700px), avec un repli en
   50%/50% sur les largeurs intermédiaires et un empilement sous 768px
   (où CYUP passe déjà en mode compact). */
@media (min-width: 768px) {
    #configurator .cyup--preview2D,
    #configurator .cyup--configurator__content {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
        min-width: 0;
    }
}

/* ".cyup--preview2D" est en "position: sticky" avec le même z-index (5) que
   le header du site : à égalité, il passe au-dessus au lieu de rester
   dessous. On le baisse pour qu'il ne recouvre plus jamais le menu. */
#configurator .cyup--preview2D {
    z-index: 4;
}

#configurator .cyup--preview2D__scenelist {
    display: none;
}

/* Contrôles de zoom ("- 100% + [ajuster]") : pilule blanche à 4 segments
   séparés, centrée en bas du bloc 2D comme sur la maquette (CYUP la place
   en haut à gauche, fond gris, bordure orange).
   - ".cyup--preview2D" réserve 88px en bas (au lieu des 8px de padding CYUP)
     pour que la pilule se place sous le canvas sans le recouvrir, y compris
     quand le bloc est en hauteur auto (< 1350px).
   - Séparateur : seul le champ numérique garde un "border-left" (entre "-"
     et la valeur) ; le padding de la pilule le décolle des bords.
   - Le champ numérique (all: unset chez CYUP) est centré dans son segment ;
     3.2ch = place pour 3 chiffres (voir la règle plus bas).
   - Icône d'ajustement : glyphe Material remplacé par full-screen.svg du
     thème (même technique de masque que les autres icônes). */
#configurator .cyup--preview2D {
    padding-bottom: 88px;
}

#configurator .cyup--preview2D__scale {
    top: auto;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 8px;
    background: #fff;
    border: 1.5px solid var(--cyup-grey-200, #d9dee2);
    border-radius: var(--mpi-radius-md);
    color: var(--cyup-secondary-main);
}

#configurator .cyup--preview2D__scale button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    color: var(--cyup-secondary-main);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

#configurator .cyup--preview2D__scale button i {
    font-size: 20px;
}

/* Nombre centré dans son segment : le "%" (14px) occupe la droite, donc le
   padding gauche = 12px (marge) + 14px (largeur du "%") compense pour que
   le nombre reste au milieu entre les deux séparateurs. Le sélecteur
   [type="number"] + !important est nécessaire : la règle globale sur les
   <input> du configurateur (plus bas) force "padding: 5px !important". */
#configurator .cyup--preview2D__scale input[type="number"] {
    flex: none;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    align-self: stretch;
    width: 3.2ch;
    padding: 0 0 0 26px !important;
    border-left: 1px solid var(--cyup-grey-200, #d9dee2);
    text-align: center;
    color: var(--cyup-secondary-main);
    font: var(--mpi-font-button);
    letter-spacing: var(--mpi-letter-spacing);
}

#configurator .cyup--preview2D__scale__unit {
    position: static;
    flex: none;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    align-self: stretch;
    width: 14px;
    padding-right: 12px;
    color: var(--cyup-secondary-main);
    font: var(--mpi-font-button);
    letter-spacing: var(--mpi-letter-spacing);
}

#configurator .cyup--preview2D__scale button:last-child i {
    width: 24px;
    height: 24px;
    font-size: 0;
    background-color: currentColor;
    -webkit-mask: url('../../../../assets/2026/icons/full-screen.svg') center / 24px 24px no-repeat;
    mask: url('../../../../assets/2026/icons/full-screen.svg') center / 24px 24px no-repeat;
}

/* Mobile (≤ 767px) : hauteur du bloc 2D réduite. CYUP plafonne la hauteur du
   dessin à max(28svh, 180px) sur mobile, à partir d'un <div aria-hidden> invisible
   qu'il ajoute au <body> (style inline "height: 28svh"). On force sa hauteur à 0 :
   le plafond tombe alors au minimum prévu par CYUP, 180px (au lieu de ~227px
   sur un écran de 812px). Sélecteur volontairement très précis (attribut de
   style) pour ne pas toucher d'autres éléments aria-hidden ; si CYUP change ce
   mécanisme, la règle devient simplement sans effet. */
@media (max-width: 767px) {
    body > div[aria-hidden="true"][style*="28svh"] {
        height: 0 !important;
    }
}

/* Mobile (≤ 640px) : pilule de zoom compacte (boutons 26px au lieu de 44px,
   icônes de 14px, nombre en 12px, marges minimales) et seulement 48px
   réservés sous le canvas (au lieu de 88px). Le retrait gauche du nombre
   garde la même logique : 6px de marge + largeur du "%" (11px). */
@media (max-width: 640px) {
    #configurator .cyup--preview2D {
        padding-bottom: 48px;
    }

    #configurator .cyup--preview2D__scale {
        bottom: 6px;
        padding: 2px;
    }

    #configurator .cyup--preview2D__scale button {
        min-width: 26px;
        min-height: 26px;
        font-size: 14px;
    }

    #configurator .cyup--preview2D__scale button i {
        font-size: 14px;
    }

    #configurator .cyup--preview2D__scale input[type="number"] {
        padding: 0 0 0 17px !important;
        font-size: 12px;
    }

    #configurator .cyup--preview2D__scale__unit {
        width: 11px;
        padding-right: 6px;
        font-size: 12px;
    }

    #configurator .cyup--preview2D__scale button:last-child i {
        width: 16px;
        height: 16px;
        -webkit-mask-size: 16px 16px;
        mask-size: 16px 16px;
    }
}

/* Champs de position/diamètre des trous de perçage, trop grands par défaut
   (hauteur 50px via "--cyup-height-input", une variable CYUP partagée avec
   d'autres champs qu'on ne modifie pas globalement pour ne rien casser
   ailleurs : on réduit directement ces champs-ci). */
#configurator .cyup--hole__field__input,
#configurator .cyup--hole__field__select {
    height: 36px;
}

#configurator .cyup--hole__field__input__value {
    font-size: 13px;
    text-align: center; /* CYUP l'aligne à droite par défaut : grand vide à gauche */
}

/* Boutons "-" et "+" proportionnés à la hauteur du champ (36px) au lieu des
   22px de CYUP, pour un "- valeur +" symétrique autour de la valeur centrée. */
#configurator .cyup--hole__field__input__action {
    flex: 0 0 36px;
    width: 36px;
}

/* Le thème force un style générique (bordure, fond, padding, hauteur fixe)
   sur tous les <input> du site via "4-elements/_form-skeleton.css", en
   !important. Sur les champs CYUP, déjà stylés par leur propre wrapper
   (ex : ".cyup--hole__field__input", ".cyup--entry__input"), ça crée une
   boîte dans la boîte. On retire la partie "boîte" côté thème pour ces
   champs, en gardant la typo (comme demandé). */
#configurator input[type="date"],
#configurator input[type="email"],
#configurator input[type="number"],
#configurator input[type="password"],
#configurator input[type="phone"],
#configurator input[type="search"],
#configurator input[type="tel"],
#configurator input[type="text"],
#configurator input[type="time"] {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    padding: 5px 5px 5px 5px !important;
    height: auto !important;
    width: 100%;
    line-height: 24px;
    font-family: var(--font-hanken, 'Hanken Grotesk', sans-serif);
    font-size: 15px !important;
}

/* Certains boutons CYUP (ex : ".cyup--tab__control__next") s'affichent
   soulignés (vérifié via getComputedStyle ; source exacte introuvable dans
   le CSS du thème ou de CYUP malgré une recherche complète). Neutralisé
   directement ici sur tous les boutons du configurateur. */
#configurator button {
    text-decoration: none;
}

/* Bloc figé à 600x415 (padding 8px de CYUP inclus via border-box) : tout
   doit tenir dedans, quel que soit le contenu (nombre de miniatures...).
   ".cyup--preview2D__scene" (zone du canvas) est en "flex: 1" pour occuper
   tout l'espace restant après ".cyup--preview2D__scenelist" (miniatures,
   hauteur naturelle) et le gap de 20px déjà en place, au lieu d'une hauteur
   fixée en dur qui casserait si la liste de miniatures change de taille.
   Le canvas Konva (300x300, taille fixe côté CYUP - voir échange précédent)
   tient largement dans cette zone, donc pas de dépassement possible. */
@media (min-width: 1350px) {
    #configurator .cyup--preview2D {
        height: 600px;
        box-sizing: border-box;
        overflow: hidden;
    }

    #configurator .cyup--preview2D__scene {
        flex: 1 1 auto;
        min-height: 0;
    }

    #configurator .cyup--preview2D__scenelist {
        flex: 0 0 auto;
    }
}

@media (min-width: 1350px) {
    #configurator .cyup--preview2D {
        flex: 0 0 600px;
        max-width: 600px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    #configurator .cyup--configurator__content {
        flex: 0 0 700px;
        max-width: 700px;
        box-sizing: border-box;
        border: 1px solid var(--cyup-grey-200, #d9dee2);
        border-radius: var(--mpi-radius-lg);
        padding: 30px;
    }

    /* La carte devient le conteneur visuel (bordure/padding) : on retire le
       padding propre à l'onglet actif pour éviter un double espacement. */
    #configurator .cyup--configurator__content .cyup--tab {
        padding: 0;
        display: flex;
        flex-direction: column;
    }
}

/* ==========================================================================
   Boutons pilule : Précédent / Suivant / Récapitulatif / Ajouter au panier.
   Base commune (forme + typographie), puis couleur et largeur par bouton.
   ========================================================================== */
#configurator :is(
    .cyup--tab__control__previous,
    .cyup--tab__control__next,
    .cyup--cart__info__recapBtn,
    .cyup--addCart__button
) {
    height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 25px;
    border-radius: var(--mpi-radius-pill);
    font: var(--mpi-font-button);
    letter-spacing: var(--mpi-letter-spacing);
}

#configurator :is(.cyup--tab__control__previous, .cyup--cart__info__recapBtn) {
    background: var(--mpi-navy-pill);
}

#configurator :is(.cyup--tab__control__next, .cyup--addCart__button) {
    background: var(--cyup-primary-main);
    box-shadow: 0 6px 14px var(--mpi-primary-shadow);
}

/* Les 4 boutons pilule à la même largeur (216px, la plus large des valeurs
   Figma reçues) pour un rendu homogène, "Ajouter au panier" étant plus
   étroit (193px) que "Précédent" (216px) sinon. */
#configurator :is(
    .cyup--tab__control__previous,
    .cyup--tab__control__next,
    .cyup--cart__info__recapBtn,
    .cyup--addCart__button
) {
    width: 230px;
}

/* Toujours collé à droite, même seul (1er onglet sans bouton "Précédent") */
#configurator .cyup--tab__control__next {
    margin-left: auto;
}

/* Icône panier du bouton "Ajouter au panier" : même icône que le bouton
   natif du thème (".o-icon--cart" -> assets/2026/icons/cart.svg, 24px,
   en currentColor). Le bouton est généré par le JS de CYUP, on ne peut pas
   y glisser un <i class="o-icon--cart"> : on reproduit son rendu (masque
   SVG) sur le <span> vide ".cyup--addCart__button__before" fourni par CYUP,
   et on masque son <img> PNG d'origine. Le <span> vide "__after" est aussi
   masqué, sinon le "gap" flex ajoute 10px à droite et décale le contenu. */
#configurator .cyup--addCart__button > img,
#configurator .cyup--addCart__button__after {
    display: none;
}

#configurator .cyup--addCart__button__before {
    display: inline-block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url('../../../../assets/2026/icons/cart.svg') center / 100% 100% no-repeat;
    mask: url('../../../../assets/2026/icons/cart.svg') center / 100% 100% no-repeat;
}

#configurator .cyup--cart__total__amount__taxe {
    color: #3A4658;
}

#configurator .cyup--displayPrice__value {
    font: var(--mpi-font-heading-lg);
    letter-spacing: var(--mpi-letter-spacing);
    color: #3A4658;
}

#configurator .cyup--cart__items {
    background: transparent;
}

/* ".cyup--bottom-add-to-cart" est affiché par CYUP sur TOUS les onglets
   (bloc séparé sous ".cyup--tab__control", plein largeur, centré) alors
   qu'il n'a de sens que sur le dernier ("Découpes"). On le masque partout,
   puis on ne le réaffiche que quand le DERNIER ".cyup--tab" est l'onglet
   actif (repéré via son attribut style : CYUP y met "display: none" sur
   les onglets inactifs, rien/vide sur l'actif). On le remonte alors sur la
   même ligne que ".cyup--tab__control" (qui ne contient alors que
   "Précédent"), à droite, "Précédent" passant à gauche via la règle
   ci-dessous. */
#configurator .cyup--bottom-add-to-cart {
    display: none;
}

#configurator .cyup--configurator__tabs:has(> .cyup--tab:last-of-type:not([style*="none"])) + .cyup--bottom-add-to-cart {
    display: flex;
    justify-content: flex-end;
    margin-top: -60px;
}

/* CYUP aligne "Précédent" seul à droite par défaut (justify-content:
   flex-end) : on le passe à gauche. Sans effet quand "Suivant" est aussi
   présent, son "margin-left: auto" (règle plus haut) prenant toute la
   place disponible avant que "justify-content" n'entre en jeu. */
#configurator .cyup--tab__control {
    justify-content: flex-start;
}

#configurator .cyup--quantity__btn {
    background-color: transparent;
    color: var(--cyup-grey-900, #232c34);
}

#configurator .cyup--cart__info__total {
    font: var(--mpi-font-heading-lg);
    letter-spacing: var(--mpi-letter-spacing);
    color: #3A4658;
}

#configurator .cyup--cart__info__title {
    font: var(--mpi-font-heading-lg);
    letter-spacing: var(--mpi-letter-spacing);
    color: var(--cyup-primary-main);
}

/* DVAI-71 : remise de quantité (règle de prix catalogue PrestaShop). Bloc
   créé par le script de modules/cyup/views/templates/front/product.tpl et
   rangé dans ".cyup--cart__info", juste AVANT le bloc quantité : il apparaît
   donc à sa gauche, aligné à droite contre lui. Lignes : prix remisé (gras) +
   prix d'origine barré ; mention orange ("20 % économisé sur le prix
   unitaire"). Pas d'annonce du palier suivant (retour client du 16/10). */
#configurator .cyup-specific-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    gap: 1px;
    font: 400 12px/1.3 var(--mpi-font-family-primary);
    letter-spacing: var(--mpi-letter-spacing);
    text-align: right;
    white-space: nowrap;
}

#configurator .cyup-specific-price[hidden] {
    display: none;
}

#configurator .cyup-specific-price__prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* Prix remisé : même style que le total CYUP, qu'il remplace (voir plus bas). */
#configurator .cyup-specific-price__now {
    font: var(--mpi-font-heading-lg);
    letter-spacing: var(--mpi-letter-spacing);
    color: #3A4658;
}

#configurator .cyup-specific-price__old {
    font-size: 13px;
    color: #3A4658;
    text-decoration: line-through;
}

/* Une seule ligne de prix : dès que le bloc affiche un prix (".cyup-specific-price__now",
   avec ou sans remise), le total CYUP est masqué pour ne jamais afficher deux
   prix et garder la même présentation avant et après le premier palier. Tant
   que le prix est à 0 (rien de configuré), le total CYUP reste affiché. */
#configurator .cyup--cart__info:has(> .cyup-specific-price .cyup-specific-price__now) > .cyup--cart__info__total {
    display: none;
}

#configurator .cyup-specific-price__save {
    color: var(--cyup-primary-main);
}

/* ==========================================================================
   Forme des cartes de choix (matière / nuance / forme).
   Classes personnalisées ajoutées dans le back-office CYUP sur les
   ".cyup--step" concernés : Choix_matiere, Choix_nuance, Choix_forme.
   Objectif maquette Figma : la carte entière (image + libellé) est un bloc
   blanc arrondi avec bordure, pas juste une bordure sur l'image. Le thème
   remet à 0 border/padding sur tous les <div> (reset CSS global), y compris
   ".cyup--option__image" qui porte pourtant ce style par défaut chez CYUP :
   on le redéfinit explicitement ici, scopé à ces 3 classes.
   ========================================================================== */
#configurator :is(.Choix_matiere, .Choix_nuance, .Choix_forme) .cyup--option__image {
    position: relative;
    height: 126px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 2px solid var(--cyup-grey-200, #d9dee2);
    border-radius: var(--mpi-radius-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}

#configurator :is(.Choix_matiere, .Choix_nuance, .Choix_forme) .cyup--option__image:has(.checked) {
    border-color: var(--cyup-primary-main);
    box-shadow: 0 4px 10px var(--mpi-card-selected-shadow);
}

/* Choix_matiere : 3 par ligne, quelle que soit la largeur réelle de
   ".options-wrapper" (700px de bloc config, 50% intermédiaire, empilé en
   dessous de 768px...). Même logique que Choix_nuance/Choix_forme plus bas :
   le % est posé sur ".cyup--option" (flex item direct du wrapper), pas sur
   ".cyup--option__image", pour éviter un calcul circulaire.
   Avant ce fix, la largeur était fixée en dur à 206.6667px (valeur Figma) :
   ça cassait dès que le bloc config repassait sous 1350px de large (la
   carte n'est alors plus fixée à 700px), les 3 cartes ne tenant plus sur
   une ligne et gonflant la hauteur de l'étape. */
#configurator .Choix_matiere .options-wrapper {
    gap: 8px;
}

#configurator .Choix_matiere .cyup--option {
    flex: 0 0 calc((100% - 2 * 8px) / 3);
    max-width: calc((100% - 2 * 8px) / 3);
}

#configurator .Choix_matiere .cyup--option__image {
    width: 100%;
    padding: 20px;
}

/* Choix_nuance/Choix_forme : 4 par ligne, quelle que soit la largeur réelle
   de ".options-wrapper" (700px de bloc config, 50% intermédiaire, empilé en
   dessous de 768px...). Le % est posé sur ".cyup--option", flex item direct
   de ".options-wrapper", donc il se résout correctement (pas de largeur en
   % sur ".cyup--option__image" : son parent ".cyup--option" n'a pas de
   largeur propre par défaut, ce qui produirait un calcul circulaire). */
#configurator :is(.Choix_nuance, .Choix_forme) .options-wrapper {
    gap: 15px 12px;
}

#configurator :is(.Choix_nuance, .Choix_forme) .cyup--option {
    flex: 0 0 calc((100% - 3 * 12px) / 4);
    max-width: calc((100% - 3 * 12px) / 4);
}

#configurator :is(.Choix_nuance, .Choix_forme) .cyup--option__image {
    width: 100%;
}

/* Le badge de sélection (.marked) est positionné en absolu par rapport à ce
   wrapper normalement ; on le neutralise (position: static) pour qu'il
   remonte au niveau de ".cyup--option__image" (la carte) et se place à son
   coin, pas à celui de l'image seule. */
#configurator :is(.Choix_matiere, .Choix_nuance, .Choix_forme) :is(.cyup--option__image__label, .cyup--option__image__illustration) {
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

#configurator :is(.Choix_matiere, .Choix_nuance, .Choix_forme) .cyup--option__image__picture {
    height: 100% !important;
    border: none !important;
    border-radius: var(--cyup-border-radius, 8px);
    display: block;
}

#configurator .Choix_matiere .cyup--option__image__label .cyup--option__image__picture {
    object-fit: cover;
}

#configurator :is(.Choix_matiere, .Choix_nuance, .Choix_forme) .cyup--option__image__title {
    display: block !important;
    flex: 0 0 auto;
    margin: 0; /* espacement géré par le gap:10px de la carte */
    font: var(--mpi-font-card-title);
    letter-spacing: var(--mpi-letter-spacing);
    color: var(--cyup-secondary-main);
    text-align: center;
}

/* Loupe de zoom retirée des cartes de choix. */
#configurator :is(.Choix_matiere, .Choix_nuance, .Choix_forme) .cyup--zoom {
    display: none;
}

/* Titre de chaque étape ("Choix de la matière", "Choix de la forme"...),
   quel que soit le type d'étape. */
#configurator .cyup--step__header__infos__title {
    font: var(--mpi-font-step-title);
    letter-spacing: var(--mpi-letter-spacing);
}

/* ==========================================================================
   Options à choix simple (épaisseur, bords arrondis, perçage...) : pastille
   cliquable avec bordure, au lieu du radio texte nu par défaut de CYUP.
   ========================================================================== */
/* min-width (au lieu de width) pour ne pas tronquer les libellés plus longs
   ("Coin par coin", "Uniformément"...) tout en gardant la taille de la
   maquette pour les libellés courts ("1 mm"). */
#configurator .cyup--option__radio__label {
    min-width: 69px;
    height: 35px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1.5px solid var(--cyup-grey-200, #d9dee2);
    border-radius: var(--mpi-radius-md);
    background: #fff;
    cursor: pointer;
    font: var(--mpi-font-radio-label);
    letter-spacing: var(--mpi-letter-spacing);
    transition: background-color .15s ease, border-color .15s ease;
}

#configurator .cyup--option__radio__label:has(input:checked) {
    background: var(--mpi-radio-selected-bg);
    border-color: var(--cyup-primary-main);
}

/* Pastille radio native masquée : la sélection se voit déjà via le fond/la
   bordure de la pastille (".cyup--option__radio__label:has(input:checked)"). */
#configurator .cyup--option__radio__label input[type=radio] {
    display: none;
}

/* Par défaut CYUP empile ces options en colonne (une pastille par ligne) ;
   on les veut alignées en ligne comme les cartes matière/nuance/forme.
   Scopé aux wrappers contenant un ".cyup--option__radio" pour ne pas
   toucher les grilles d'options avec image (déjà en ligne).
   Le "justify-content: space-between" par défaut de CYUP étire les
   pastilles sur toute la largeur du bloc ; on les veut groupées les unes
   à côté des autres (elles ne doivent pas prendre toute la place). */
#configurator .options-wrapper:has(.cyup--option__radio) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

#configurator .cyup--option:has(.cyup--option__radio) {
    width: auto;
    flex: 0 0 auto;
}

/* Classe personnalisée CYUP posée sur une étape pour la masquer entièrement. */
#configurator .step_display_none {
    display: none;
}

/* ==========================================================================
   Champs numériques (Largeur, Longueur...) : 2 par ligne à 50% au lieu
   d'un par ligne. Scopé aux ".cyup--step__details" qui contiennent des
   ".cyup--entry--input" pour ne pas toucher les étapes à choix (image/radio).
   ========================================================================== */
#configurator .cyup--step__details:has(.cyup--entry--input) {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

#configurator .cyup--entry--input {
    flex: 0 0 calc(50% - 7.5px);
    max-width: calc(50% - 7.5px);
    box-sizing: border-box;
}

/* Classe personnalisée CYUP posée directement sur les ".cyup--entry--input"
   de l'étape "Bords" : 4 champs par ligne (25%) au lieu des 2 par ligne
   (50%) par défaut ci-dessus. */
#configurator .cyup--entry--input.input_bords {
    flex: 0 0 calc(25% - 11.25px);
    max-width: calc(25% - 11.25px);
}

/* Étape "Choix_bords" : le choix (radio) prend toute la ligne pour que les
   4 champs ".input_bords" qui suivent retombent sur une nouvelle ligne. */
#configurator .Choix_bords .cyup--entry--choice {
    flex: 0 0 100%;
    max-width: 100%;
}

#configurator .cyup--minmax {
    font: var(--mpi-font-minmax);
    letter-spacing: var(--mpi-letter-spacing);
}

/* Unité affichée à côté des champs numériques (ex: "mm"), uniquement dans le
   champ principal ".cyup--entry__input" : celle dans ".cyup--minmax" garde
   la typo héritée de ".cyup--minmax" ci-dessus, sans règle particulière. */
#configurator .cyup--entry__input .suffix {
    font: var(--mpi-font-suffix);
    letter-spacing: var(--mpi-letter-spacing);
    background-color: transparent;
}

/* ==========================================================================
   Header : H1 de la page, au-dessus du stepper.
   CYUP n'a pas d'emplacement pour un titre, mais génère un <span> vide
   ".cyup--configurator__tabs__before" juste avant "nav.tabNav" : le script du
   template cyup/front/product.tpl y crée le <h1 class="cyup-product-title">
   (le H1 d'origine du thème n'est plus rendu quand CYUP est actif).
   ========================================================================== */
#configurator .cyup--configurator__tabs__before {
    display: block;
}

#configurator .cyup-product-title {
    margin: 0 0 24px;
    padding: 0;
    text-align: center;
    color: var(--mpi-navy-pill);
    font: var(--mpi-font-product-title);
    letter-spacing: var(--mpi-letter-spacing);
}

/* ==========================================================================
   Header : stepper numéroté (Matière/Forme → Dimensions/Découpe → Bord/Trous)
   à partir de la nav native CYUP :
   <nav class="tabNav"><ol><li class="tabName selected">...</li>...</ol></nav>
   L'<ol> ne contenant que les <li class="tabName">, pas de panneaux
   entremêlés ni d'élément décoratif final : ":last-child" suffit ici (pas
   besoin du contournement ":last-of-type" utilisé pour l'ancienne structure
   accordéon de CYUP).
   ========================================================================== */
#configurator .tabNav ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: mpi-step;
}

#configurator .tabNav .tabName {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 0 8px;
    background: none;
    border: none;
    counter-increment: mpi-step;
    font: var(--mpi-font-stepper-label);
    letter-spacing: var(--mpi-letter-spacing);
    color: var(--cyup-secondary-main);
}

/* Cercle numéroté généré en CSS (::before). Le libellé visible sous le
   cercle reste le texte natif du <li> (nom de l'onglet configuré dans le
   back-office CYUP) : on ne le remplace pas, seuls sa couleur et sa police
   sont stylés (règle ".tabName" ci-dessus). */
#configurator .tabNav .tabName::before {
    content: counter(mpi-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--cyup-secondary-main);
    color: #fff;
    font: var(--mpi-font-card-title);
    z-index: 1;
}

/* Trait pointillé reliant ce cercle au suivant (absent sur le dernier). */
#configurator .tabNav .tabName:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px; /* moitié de la hauteur du cercle (32px) */
    left: 50%;
    width: 100%;
    border-top: 2px dashed var(--cyup-secondary-light);
    z-index: 0;
}

/* Étape en cours (".selected") : cercle et libellé en orange. */
#configurator .tabNav .tabName.selected {
    color: var(--cyup-primary-main);
}

#configurator .tabNav .tabName.selected::before {
    background: var(--cyup-primary-main);
}

/* Étapes déjà validées (avant l'étape sélectionnée) : coche à la place du
   chiffre, cercle et libellé en orange, trait vers l'étape suivante orange. */
#configurator .tabNav .tabName:has(~ .tabName.selected) {
    color: var(--cyup-primary-main);
}

#configurator .tabNav .tabName:has(~ .tabName.selected)::before {
    content: '✓';
    background: var(--cyup-primary-main);
}

#configurator .tabNav .tabName:has(~ .tabName.selected):not(:last-child)::after {
    border-top-color: var(--cyup-primary-main);
}


/* ==========================================================================
   Avancement (barre récapitulative) : texte seul "Avancement N %", sans le
   rond de CYUP (".cyup-progress-circle" : SVG + libellé en position absolue).
   Le bloc n'est rendu que si l'option "barre de progression" est activée
   dans le back-office CYUP.
   ========================================================================== */
#configurator .cyup--cart__info__progress .cyup-progress-circle svg {
    display: none;
}

#configurator .cyup--cart__info__progress .cyup-progress-circle__label {
    position: static;
    font: var(--mpi-font-heading-lg);
    letter-spacing: var(--mpi-letter-spacing);
    color: var(--mpi-navy-pill);
    white-space: nowrap;
}

#configurator .cyup--cart__info__progress .cyup-progress-circle__label::before {
    content: 'Avancement ';
}

/* ==========================================================================
   Barre récapitulative (DVAI-49) : "aside.cyup--cart.compact" en barre fixe
   pleine largeur collée en bas de page, comme la barre sticky du thème
   (".c-product__pricing.is-sticky" : ombre 0 0 10px #00000026, padding
   20px 30px). left/right: 0 plutôt que width: 100dvw (comme le thème) pour
   ne pas dépasser sous la barre de défilement. Titre à gauche, puis prix,
   quantité ("Quantité : - 1 +") et boutons à droite, sur une seule ligne.
   Même affichage (barre fixe pleine largeur, panneau récapitulatif) sur
   tablette et mobile : seule la disposition interne change, cf. les blocs
   "sous 1360px" et "≤ 1023px" plus bas.
   ========================================================================== */
#configurator .cyup--cart.compact {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    margin: 0;
    border-radius: 0;
    background: var(--color-white, #fff);
    box-shadow: 0 0 10px 0 #00000026;
    z-index: 10;
}

#configurator .cyup--cart.compact .cyup--cart__info {
    padding: 20px 30px;
    gap: 30px;
    align-items: center;
    flex-wrap: nowrap;
}

/* Le titre prend la place libre : le reste est repoussé à droite. */
#configurator .cyup--cart.compact .cyup--cart__info__title {
    flex: 1 1 auto;
    margin: 0;
    /* Cède la place si la barre est pleine (ex. bloc de remise DVAI-71 affiché). */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quantité : "- 1 +" compact (le champ number était étiré par la règle
   globale "width: 100%" des champs), précédé du libellé de la maquette. */
#configurator .cyup--cart.compact .cyup--quantity {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    align-items: center;
    gap: 4px;
    margin-left: 60px; /* place du libellé, posé hors de la bordure */
}

/* Le libellé est sorti de la bordure du bloc (position absolue à gauche
   de sa boîte) : la bordure n'entoure que "- 1 +". */
#configurator .cyup--cart.compact .cyup--quantity::before {
    content: 'Quantité :';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 8px;
    font: var(--mpi-font-body, 400 14px/1.4 var(--mpi-font-family-primary));
    color: #3A4658;
    white-space: nowrap;
}

#configurator .cyup--cart.compact .cyup--quantity__input {
    width: 60px;
    flex: 0 0 auto;
    text-align: center;
}

/* Titre puis "| Avancement N %" juste à côté (CYUP met le même "order: 1"
   au bloc progression, au titre et au total, dans l'ordre du DOM : la
   progression passerait avant le titre). Le bloc progression prend la
   place libre, à la place du titre. */
#configurator .cyup--cart.compact .cyup--cart__info__title {
    order: -1;
}

#configurator .cyup--cart.compact .cyup--cart__info:has(> .cyup--cart__info__progress) .cyup--cart__info__title {
    flex: 0 0 auto;
}

#configurator .cyup--cart.compact .cyup--cart__info__progress {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 30px;
    border-left: 1px solid var(--cyup-grey-200, #d9dee2);
    line-height: 1.2;
}

/* Panneau "Récapitulatif" (ouvert par le bouton, au-dessus de la barre) :
   pleine largeur de la barre, sans ombre ni arrondi propres, et éléments
   côte à côte (à la ligne si besoin) séparés par un filet, au lieu d'une
   liste d'une ligne par étape de 340px de haut. */
#configurator .cyup--cart.compact .cyup--cart__items {
    width: auto;
    padding: 20px 30px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--cyup-grey-200, #d9dee2);
    background: var(--mpi-recap-bg);
    box-shadow: none;
}

/* "overflow: hidden" : coupe le décalage négatif de la liste ci-dessous. */
#configurator .cyup--cart.compact .cyup--cart__items__recap {
    width: 100%;
    overflow: hidden;
}

#configurator .cyup--cart.compact .cyup--cart__items__recap__title {
    margin: 0 0 12px;
    font: var(--mpi-font-heading-lg);
    letter-spacing: var(--mpi-letter-spacing);
    color: var(--cyup-primary-main);
}

#configurator .cyup--cart.compact .cyup--cart__items__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
    margin: 0 0 20px -21px; /* = padding gauche (20px) + filet (1px) d'un élément */
    padding: 0;
    list-style: none;
}

#configurator .cyup--cart.compact .cyup--cart__item {
    /* 3 blocs par ligne : la liste est décalée de 21px (cf. plus haut), donc
       un tiers de sa largeur = un tiers visible + 21px de retrait coupés. */
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0 4px;
    padding: 0 20px;
    border: 0;
    border-left: 1px solid var(--cyup-grey-200, #d9dee2);
    font: 400 14px/1.4 var(--mpi-font-family-primary);
}

/* Alignement quand la liste passe à la ligne : le filet et le retrait du
   premier élément de CHAQUE ligne sortent de la zone visible (liste
   décalée de -21px + "overflow: hidden" du bloc), donc tous les débuts de
   ligne s'alignent sur le titre, sans cas particulier ":first-child". */

#configurator .cyup--cart.compact .cyup--cart__item__step {
    gap: 4px;
    font: inherit;
}

#configurator .cyup--cart.compact .cyup--cart__item__step__label,
#configurator .cyup--cart.compact .cyup--cart__item__step__label a {
    font: 700 14px/1.4 var(--mpi-font-family-primary);
    color: var(--mpi-navy-pill);
    text-decoration: none;
}

/* "display: contents" : les valeurs ("Longueur : 400mm", ...) deviennent des
   éléments directs de la ligne de l'étape, à la suite du libellé, au lieu
   d'un bloc séparé. */
#configurator .cyup--cart.compact .cyup--cart__item__entries {
    display: contents;
}

#configurator .cyup--cart.compact .cyup--cart__item__entry + .cyup--cart__item__entry {
    margin-left: 8px;
}

/* Boutons : jamais réduits, la ligne reste sur une seule rangée. */
#configurator .cyup--cart.compact :is(.cyup--cart__info__recapBtn, .cyup--addCart) {
    flex: 0 0 auto;
}

/* La barre étant sortie du flux, le pied de page garde de la marge pour
   ne pas être masqué par elle. */
body:has(.cyup--cart.compact) .c-footer {
    padding-bottom: 130px;
}

/* Barre récapitulative sous 1900px : titre + avancement + prix + bloc de remise
   (DVAI-71) + quantité + 2 boutons de 230px ne tiennent plus sur une rangée (le
   dernier bouton sortait de l'écran). Le titre prend une rangée, le reste passe
   dessous, aligné à droite (à la ligne s'il manque encore de la place). */
@media (min-width: 1024px) and (max-width: 1899px) {
    #configurator .cyup--cart.compact .cyup--cart__info {
        flex-wrap: wrap;
        row-gap: 14px;
        justify-content: flex-end;
    }

    #configurator .cyup--cart.compact .cyup--cart__info__title {
        flex: 1 1 100%;
    }

    /* Avec la progression, elle partage la rangée du titre. */
    #configurator .cyup--cart.compact .cyup--cart__info:has(> .cyup--cart__info__progress) .cyup--cart__info__title {
        flex: 0 0 auto;
    }

    #configurator .cyup--cart.compact .cyup--cart__info__progress {
        flex: 1 1 0;
    }

    #configurator .cyup--cart.compact .cyup--cart__info__total {
        margin-right: auto;
    }
}

/* ==========================================================================
   Tablette et mobile (≤ 1023px) : même barre fixe pleine largeur, disposée
   en grille sur trois rangées : titre ; prix + quantité ; icône du
   récapitulatif + "Ajouter au panier". Les règles ci-dessus (boutons pilule
   de 230px, champs à 100% de large, polices "heading-lg") sont plus
   prioritaires que celles de CYUP (#configurator) et faisaient déborder la
   barre ou tronquaient "Ajouter au panier" : on les relâche ici pour la
   seule barre panier.
   ========================================================================== */
@media (max-width: 1023px) {
    #configurator .cyup--cart.compact .cyup--cart__info {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 10px 12px;
        padding: 14px 16px;
    }

    /* Zones explicites (le placement automatique de la grille éclatait la
       quantité et les boutons sur des rangées imprévues). Rangée 1 : titre
       (et avancement à droite s'il existe), 2 : prix + quantité, 3 : icône
       du récapitulatif + "Ajouter au panier". */
    #configurator .cyup--cart.compact .cyup--cart__info__title {
        grid-area: 1 / 1 / 2 / -1;
    }

    #configurator .cyup--cart.compact .cyup--cart__info:has(> .cyup--cart__info__progress) .cyup--cart__info__title {
        grid-column: 1 / 3;
    }

    #configurator .cyup--cart.compact .cyup--cart__info__progress {
        grid-area: 1 / 3 / 2 / 4;
    }

    #configurator .cyup--cart.compact .cyup--cart__info__total {
        grid-area: 2 / 1 / 3 / 3;
        margin: 0;
    }

    #configurator .cyup--cart.compact .cyup--quantity {
        grid-area: 2 / 3 / 3 / 4;
        justify-self: end;
        margin-left: 0;
    }

    #configurator .cyup--cart.compact .cyup--cart__info__recapBtn {
        grid-area: 3 / 1 / 4 / 2;
    }

    /* Pas la place du libellé "Quantité :" (le champ "- 1 +" suffit). */
    #configurator .cyup--cart.compact .cyup--quantity::before {
        display: none;
    }

    #configurator .cyup--cart.compact .cyup--addCart {
        grid-area: 3 / 2 / 4 / 4;
    }

    /* Avancement : sans filet ni retrait, à droite du titre. */
    #configurator .cyup--cart.compact .cyup--cart__info__progress {
        padding-left: 0;
        border-left: 0;
    }

    /* Remise de quantité (DVAI-71) : sous les contrôles, sur toute la largeur. */
    #configurator .cyup--cart.compact .cyup-specific-price {
        grid-area: 4 / 1 / 5 / -1;
        align-items: flex-start;
        text-align: left;
    }

    /* Remise active : le bloc prend la place du total CYUP (masqué), à gauche de la quantité. */
    #configurator .cyup--cart.compact .cyup--cart__info:has(> .cyup-specific-price .cyup-specific-price__now) > .cyup-specific-price {
        grid-area: 2 / 1 / 3 / 3;
    }

    /* Panneau récapitulatif plus serré, défilant plutôt que de couvrir l'écran. */
    #configurator .cyup--cart.compact .cyup--cart__items {
        padding: 16px 16px 0;
        max-height: 40vh;
        overflow-y: auto;
    }

    /* Barre sur trois rangées : plus de marge basse pour le pied de page. */
    body:has(.cyup--cart.compact) .c-footer {
        padding-bottom: 190px;
    }
}

/* Récapitulatif : deux blocs par ligne sur mobile (trop étroit pour trois),
   pour rester compact. */
@media (max-width: 640px) {
    #configurator .cyup--cart.compact .cyup--cart__item {
        flex-basis: 50%;
        max-width: 50%;
        padding: 0 10px;
        font-size: 12px;
        line-height: 1.3;
    }

    #configurator .cyup--cart.compact .cyup--cart__item__step__label,
    #configurator .cyup--cart.compact .cyup--cart__item__step__label a {
        font-size: 12px;
        line-height: 1.3;
    }

    /* Retrait réduit (10px + filet 1px) : décalage de la liste = -11px, cf.
       le décalage de -21px sur ordinateur. */
    #configurator .cyup--cart.compact .cyup--cart__items__list {
        margin: 0 0 12px -11px;
        row-gap: 8px;
    }

    #configurator .cyup--cart.compact .cyup--cart__items {
        padding-top: 12px;
    }

    /* Barre mobile : ni titre ni avancement (le titre est déjà en haut de la
       page). Les zones sont remontées d'une rangée : prix + quantité, puis
       l'icône du récapitulatif + "Ajouter au panier". */
    #configurator .cyup--cart.compact :is(.cyup--cart__info__title, .cyup--cart__info__progress) {
        display: none;
    }

    #configurator .cyup--cart.compact .cyup--cart__info__total {
        grid-area: 1 / 1 / 2 / 3;
    }

    #configurator .cyup--cart.compact .cyup--quantity {
        grid-area: 1 / 3 / 2 / 4;
    }

    #configurator .cyup--cart.compact .cyup--cart__info__recapBtn {
        grid-area: 2 / 1 / 3 / 2;
    }

    #configurator .cyup--cart.compact .cyup--addCart {
        grid-area: 2 / 2 / 3 / 4;
    }

    #configurator .cyup--cart.compact .cyup-specific-price {
        grid-area: 3 / 1 / 4 / -1;
    }

    #configurator .cyup--cart.compact .cyup--cart__info:has(> .cyup-specific-price .cyup-specific-price__now) > .cyup-specific-price {
        grid-area: 1 / 1 / 2 / 3;
    }

    /* Barre sur deux rangées : moins de marge basse pour le pied de page. */
    body:has(.cyup--cart.compact) .c-footer {
        padding-bottom: 140px;
    }
}

@media (max-width: 1023px) {
    /* Champ quantité : "input[type=number] { width: 100% }" plus haut l'étirait sur toute la ligne. */
    #configurator .cyup--cart.compact .cyup--quantity__input {
        width: 44px;
        flex: 0 0 auto;
    }

    /* Boutons à leur largeur utile (au lieu de 230px), hauteur réduite. */
    #configurator .cyup--cart.compact :is(.cyup--cart__info__recapBtn, .cyup--addCart__button) {
        width: auto;
        height: 40px;
        padding: 0 14px;
    }

    /* "Ajouter au panier" prend la place restante de la ligne (cf. CYUP). */
    #configurator .cyup--cart.compact .cyup--addCart__button {
        width: 100%;
    }

    /* Icône panier masquée : la place va au libellé, sinon tronqué. */
    #configurator .cyup--cart.compact .cyup--addCart__button__before {
        display: none;
    }

    /* Avec le bouton d'ajout, le récapitulatif ne garde que son icône (le
       raccourci "font" des boutons pilule écrasait la réduction de CYUP). */
    #configurator .cyup--cart.compact .cyup--cart__info:has(.cyup--addCart) .cyup--cart__info__recapBtn {
        font-size: 0;
        gap: 0;
    }

    /* Titre et prix plus petits : sur une ligne, sous la barre de 89px. */
    #configurator .cyup--cart.compact .cyup--cart__info__title,
    #configurator .cyup--cart.compact .cyup--cart__info__total,
    #configurator .cyup--cart.compact .cyup--displayPrice__value {
        font-size: 16px;
        line-height: 1.3;
    }
}

/* ==========================================================================
   Mobile (≤ 640px) : cartes de choix (matière / nuance / forme).
   Les règles ci-dessus mettent nuance et forme à 4 par ligne quelle que soit
   la largeur : sur mobile (~360px) les cartes faisaient 79px, les libellés
   passaient sur 2-3 lignes en écrasant l'image et la coche de sélection les
   recouvrait. Ici : 3 par ligne, hauteur selon le contenu, coche en haut à
   droite (sur l'image), formes affichées entières (dessins, pas de recadrage).
   ========================================================================== */
@media (max-width: 640px) {
    #configurator :is(.Choix_nuance, .Choix_forme) .options-wrapper {
        gap: 10px 8px;
    }

    #configurator :is(.Choix_nuance, .Choix_forme) .cyup--option {
        flex: 0 0 calc((100% - 2 * 8px) / 3);
        max-width: calc((100% - 2 * 8px) / 3);
    }

    #configurator :is(.Choix_matiere, .Choix_nuance, .Choix_forme) .cyup--option__image {
        height: auto;
        min-height: 110px;
        padding: 8px;
        gap: 6px;
    }

    #configurator :is(.Choix_matiere, .Choix_nuance, .Choix_forme) .cyup--option__image__picture {
        height: 64px !important;
        object-fit: cover;
    }

    /* Formes : dessins à voir en entier (le recadrage coupait le rond). */
    #configurator .Choix_forme .cyup--option__image__picture {
        object-fit: contain;
    }

    #configurator :is(.Choix_matiere, .Choix_nuance, .Choix_forme) .cyup--option__image__title {
        font-size: 12px;
        line-height: 1.25;
    }

    /* Coche de sélection en haut à droite (sur l'image) au lieu de recouvrir le libellé. */
    #configurator :is(.Choix_matiere, .Choix_nuance, .Choix_forme) .cyup--option__image__marked {
        top: 4px;
        right: 4px;
        bottom: auto;
    }
}

/* Mobile (≤ 640px) : cartes de forme et de nuance toutes de la même hauteur. En flex, chaque
   ligne prenait la hauteur de sa carte la plus haute (libellé sur 2-3 lignes) :
   110px ici, 119px là. En grille à lignes égales (1fr), toutes les cartes
   prennent la hauteur de la plus haute, quelle que soit la largeur d'écran. */
@media (max-width: 640px) {
    #configurator :is(.Choix_forme, .Choix_nuance) .options-wrapper {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 10px 8px;
    }

    #configurator :is(.Choix_forme, .Choix_nuance) .cyup--option {
        max-width: none;
        min-width: 0;
    }

    #configurator :is(.Choix_forme, .Choix_nuance) .cyup--option__image {
        height: 100%;
    }
}

/* ===== Perçage : les 3 types de trous côte à côte, quantité sous le libellé,
   sans les compteurs "x/10" de l'en-tête (bureau et mobile) ===== */
#configurator .cyup--editor {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
}
#configurator .cyup--editor > :not(.cyup--editor__cutCount) {
    grid-column: 1 / -1;
}
#configurator .cyup--editor__limit {
    display: none;
}
/* Ordre (DVAI-84) : rond, rectangulaire, oblong. Le configurateur affiche rond, oblong,
   rectangulaire ; on n'inverse que quand les 3 compteurs sont présents (sinon impossible de
   savoir lequel est lequel). La liste des trous ajoutés reste dessous. */
#configurator .cyup--editor > * {
    order: 4;
}
#configurator .cyup--editor > .cyup--editor__nav {
    order: 0;
}
#configurator .cyup--editor > .cyup--editor__cutCount {
    order: 1;
}
#configurator .cyup--editor:has(> .cyup--editor__cutCount ~ .cyup--editor__cutCount ~ .cyup--editor__cutCount) > .cyup--editor__cutCount:nth-child(2 of .cyup--editor__cutCount) {
    order: 3;
}
#configurator .cyup--editor:has(> .cyup--editor__cutCount ~ .cyup--editor__cutCount ~ .cyup--editor__cutCount) > .cyup--editor__cutCount:nth-child(3 of .cyup--editor__cutCount) {
    order: 2;
}
/* Barre de navigation de l'éditeur (titre + flèche de retour) masquée. */
#configurator .cyup--editor__nav {
    display: none;
}
#configurator .cyup--editor__cutCount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    text-align: center;
}
#configurator .cyup--editor__cutCount__label {
    line-height: 1.25;
}
#configurator .cyup--editor__cutCount__input {
    max-width: 100%;
}
/* Sélecteur renforcé : la règle du thème "#configurator input[type=number] { width: 100% }"
   l'emporte sinon, et un champ sans "max" (trous oblong / rectangulaire du U) s'élargit. */
#configurator .cyup--editor__cutCount input.cyup--editor__cutCount__input__value {
    min-width: 0;
    width: 2.5em;
}

/* ===== Champs numériques : titres en police du thème, valeur saisie couleur du thème (bureau et mobile) ===== */
#configurator .cyup--entry__title {
    font: 700 13px/1.3 var(--mpi-font-family-primary);
}
#configurator :is(.cyup--entry__input_field, .cyup--editor__cutCount__input__value) {
    color: #3A4658;
}

@media (max-width: 640px) {
    /* Champs numériques : les champs d'une même ligne alignés en bas, même si un titre passe sur 2 lignes */
    #configurator .cyup--entry--input {
        display: flex;
        flex-direction: column;
    }
    #configurator .cyup--entry--input .cyup--entry__number {
        flex: 1 1 auto;
    }
    #configurator .cyup--entry--input .cyup--entry__input {
        margin-top: auto;
        flex: 0 0 auto;
    }
    #configurator .cyup--entry--input .cyup--minmax {
        font-size: 11px;
        line-height: 1.3;
    }

    /* Dernier onglet : "Précédent" et "Ajouter au panier" côte à côte au lieu de se chevaucher */
    #configurator .cyup--configurator__tabs:has(> .cyup--tab:last-of-type:not([style*="none"])) > .cyup--tab:last-of-type .cyup--tab__control__previous {
        width: calc(50% - 4px);
        padding: 10px 12px;
    }
    #configurator .cyup--configurator__tabs:has(> .cyup--tab:last-of-type:not([style*="none"])) + .cyup--bottom-add-to-cart .cyup--addCart {
        width: calc(50% - 4px);
    }
    #configurator .cyup--configurator__tabs:has(> .cyup--tab:last-of-type:not([style*="none"])) + .cyup--bottom-add-to-cart .cyup--addCart__button {
        width: 100%;
        padding: 10px 12px;
        gap: 6px;
        white-space: nowrap;
    }
    #configurator .cyup--configurator__tabs:has(> .cyup--tab:last-of-type:not([style*="none"])) + .cyup--bottom-add-to-cart .cyup--addCart__button img {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 380px) {
    /* Petits écrans : sans icône pour que "Ajouter au panier" tienne sur une ligne */
    #configurator .cyup--configurator__tabs:has(> .cyup--tab:last-of-type:not([style*="none"])) > .cyup--tab:last-of-type .cyup--tab__control__previous,
    #configurator .cyup--configurator__tabs:has(> .cyup--tab:last-of-type:not([style*="none"])) + .cyup--bottom-add-to-cart .cyup--addCart__button {
        padding: 10px 8px;
        font-size: 14px;
        gap: 0;
    }
    #configurator .cyup--configurator__tabs:has(> .cyup--tab:last-of-type:not([style*="none"])) + .cyup--bottom-add-to-cart .cyup--addCart__button :is(img, .cyup--addCart__button__before) {
        display: none;
    }
}

@media (max-width: 640px) {
    /* Liste des trous ajoutés : nom, flèche et corbeille sur la même ligne, mesures (Ø, X, Y)
       dessous alignées à droite (la ligne est trop étroite pour tout contenir), panneau
       d'édition en dernier quand le trou est déplié. */
    #configurator .cyup--editor__list--item > * {
        order: 1;
    }
    #configurator .cyup--editor__list--item > p {
        order: 0;
        margin-right: auto;
    }
    #configurator .cyup--editor__list--item__details {
        order: 2;
        flex-basis: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }
    #configurator .cyup--editor__list--item__panel {
        order: 3;
    }
}

/* OAM ITIS COMMERCE CYUP PRODUCT */
/* Miniatures produit sous l'aperçu CYUP, en dehors du cadre. */
@media (min-width: 768px) {
    #configurator .c-ps-preview-col {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
        min-width: 0;
    }
}

@media (min-width: 1350px) {
    #configurator .c-ps-preview-col {
        flex: 0 0 600px;
        max-width: 600px;
    }
}

/* L'aperçu CYUP est "position: sticky". Dans la colonne, il recouvrait les
   miniatures au défilement : le bloc beige ".c-product-infos" se retrouvait
   visuellement à leur place. On le remet dans le flux pour que les miniatures
   restent dessous, dans la page, au-dessus de ce bloc. */
#configurator .c-ps-preview-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-start;
    position: relative;
    z-index: 4;
    min-width: 0;
}

#configurator .c-ps-preview-col > .cyup--preview2D {
    position: relative;
    top: auto;
    z-index: auto;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

#configurator .cyup--preview2D.is-ps-photo {
    padding-bottom: 8px;
}

#configurator .cyup--preview2D__scene {
    position: relative;
}

#configurator .c-ps-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    z-index: 6;
    border-radius: 12px;
}

#configurator .cyup--preview2D.is-ps-photo .cyup--preview2D__scene #mainStage,
#configurator .cyup--preview2D.is-ps-photo .cyup--preview2D__scale {
    visibility: hidden;
}

#configurator .c-ps-gallery {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    padding: 8px;
}

#configurator .c-ps-gallery__back {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #1d2b4f;
    box-shadow: 0 1px 4px rgba(29, 43, 79, 0.25);
    cursor: pointer;
}

#configurator .c-ps-gallery__back[hidden] {
    display: none;
}

#configurator .c-ps-gallery__thumbs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;
    gap: 8px;
    max-width: 100%;
    margin: 0;
    padding: 8px;
    overflow-x: auto;
    list-style: none;
}

#configurator .c-ps-gallery__thumb {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

#configurator .c-ps-gallery__thumb img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e6e8ee;
}

#configurator .c-ps-gallery__thumb.is-selected img {
    outline: 2px solid #1d2b4f;
    outline-offset: 2px;
}
/* Fin OAM ITIS COMMERCE CYUP PRODUCT */