/* FAMILLE « caisse »
 *
 * Fichier CONSTRUIT par outils/construire-css.js — ne pas modifier à la
 * main : la prochaine construction écraserait la modification. Les sources
 * sont plugin:woocommerce/assets/css/select2.css, css/caisse.css, css/service.css, css/boutique.css.
 *
 * Construit le 2026-09-10.
 */

/* --- plugin:woocommerce/assets/css/select2.css (NON PURGÉ : voir NE_PAS_PURGER) --- */
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;margin:0 0 -4px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left;padding:0}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin:0;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:var(--wc-form-color-background,#fff);color:var(--wc-form-color-text,#000);border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected],.select2-results__option[data-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#444}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none;margin:5px 5px 0 0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li:before{content:"";display:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#444;margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid #000 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--below .select2-selection--single{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:0 0;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true],.select2-container--default .select2-results__option[data-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted[data-selected]{background-color:var(--wp-admin-theme-color,#0073aa);color:#fff}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:linear-gradient(to bottom,#fff 50%,#eee 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--single:focus{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#444}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:linear-gradient(to bottom,#eee 50%,#ccc 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:0 0;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:linear-gradient(to bottom,#fff 0,#eee 50%);background-repeat:repeat-x}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:linear-gradient(to bottom,#eee 50%,#fff 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{float:right}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected],.select2-container--classic .select2-results__option--highlighted[data-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:var(--wp-admin-theme-color,#0073aa)}

/* --- css/caisse.css (NON PURGÉ : voir NE_PAS_PURGER) --- */
/* ==========================================================================
   Panier, commande, confirmation.

   Tout le travail visuel est ici : les gabarits PHP ne font que réorganiser
   les blocs, sans toucher à un seul nom de champ ni identifiant dont dépend
   le JavaScript de WooCommerce. Le tableau du panier reste un vrai <table> —
   `cart.js` le remplace entier après chaque mise à jour — et c'est le CSS qui
   le transforme en liste de cartes.

   Même système que produit.css : variables portées par le conteneur, classes
   préfixées (`cjc-`), et sélecteurs assez spécifiques pour passer devant les
   règles historiques du thème et le CSS additionnel du Customizer.
   ========================================================================== */

.cjc-caisse {
    --cjc-violet: #8f15ff;
    --cjc-violet-deep: #7211cc;
    --cjc-violet-wash: #f4eaff;
    --cjc-ink: #0e0e13;
    --cjc-ink-2: #3a3646;
    --cjc-ink-3: #7d7789;
    --cjc-line: #e6e3ee;
    --cjc-paper: #fff;
    --cjc-wash: #f7f6fa;
    --cjc-vert: #0d6b52;
    --cjc-vert-wash: #e6f4ef;
    --cjc-ambre: #8a5a00;
    --cjc-ambre-wash: #fdf1dc;
    --cjc-rouge: #a11228;
    --cjc-rouge-wash: #fdecee;

    padding: 8px 0 24px;
    color: var(--cjc-ink);
}

/* Bootstrap fournit `box-sizing: border-box` sur le site, mais la caisse ne
   doit dépendre d'aucune feuille tierce : un bouton en pleine largeur avec
   24 px de rembourrage déborderait de sa colonne. */
.cjc-caisse,
.cjc-caisse *,
.cjc-caisse *::before,
.cjc-caisse *::after {
    box-sizing: border-box;
}

.cjc-large {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px;
}

/* L'enveloppe du tunnel d'achat rendu par page.php. Elle ne fait que donner
   de l'air : la largeur de lecture et la grille viennent de `.cjc-large` et
   de `.cjc-agencement`, dans les gabarits WooCommerce. */
.cjp-nu {
    padding: 28px 0 56px;
}

/* WooCommerce et le thème définissent tous deux `.screen-reader-text`, mais
   la caisse ne doit dépendre d'aucune des deux feuilles pour rester lisible :
   un libellé « quantité de … » qui s'affiche casse toute la ligne. */
.cjc-caisse .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   1. Le fil des étapes
   ========================================================================== */

.cjc-caisse .cjc-etapes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.cjc-caisse .cjc-etapes::-webkit-scrollbar { display: none; }

/* Trois etapes avec leurs libelles demandent 483 px : sur un telephone de
   375 px, « Confirmation » sortait de l'ecran. Le cadre defile, mais un
   parcours d'achat ne doit pas obliger a faire glisser pour savoir ou l'on en
   est. Sous 560 px, seule l'etape courante garde son libelle ; les autres se
   reduisent a leur numero, et les trois tiennent. */
@media (max-width: 560px) {
    .cjc-caisse .cjc-etape:not(.cjc-etape-courante) .cjc-etape-nom {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .cjc-caisse .cjc-etapes {
        gap: 6px;
        justify-content: flex-start;
    }
    .cjc-caisse .cjc-etape + .cjc-etape::before {
        width: 14px;
    }
}

.cjc-caisse .cjc-etape {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    flex: none;
    font-size: 14px;
    color: var(--cjc-ink-3);
}
.cjc-caisse .cjc-etape a {
    display: flex;
    align-items: center;
    gap: 9px;
    color: inherit;
    text-decoration: none;
}
.cjc-caisse .cjc-etape a:hover .cjc-etape-nom {
    text-decoration: underline;
}
.cjc-caisse .cjc-etape + .cjc-etape::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--cjc-line);
    flex: none;
}
.cjc-caisse .cjc-etape-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--cjc-line);
    background: var(--cjc-paper);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cjc-caisse .cjc-etape-nom {
    white-space: nowrap;
}
.cjc-caisse .cjc-etape-faite {
    color: var(--cjc-violet-deep);
}
.cjc-caisse .cjc-etape-faite .cjc-etape-num {
    background: var(--cjc-violet-wash);
    border-color: var(--cjc-violet-wash);
    color: var(--cjc-violet-deep);
}
.cjc-caisse .cjc-etape-courante {
    color: var(--cjc-ink);
    font-weight: 600;
}
.cjc-caisse .cjc-etape-courante .cjc-etape-num {
    background: var(--cjc-violet);
    border-color: var(--cjc-violet);
    color: #fff;
}

/* ==========================================================================
   2. La grille : contenu à gauche, récapitulatif collant à droite
   ========================================================================== */

.cjc-agencement {
    display: grid;
    gap: 26px;
    align-items: start;
}
/* Une cellule de grille ne descend pas sous la largeur de son contenu. */
.cjc-agencement > * {
    min-width: 0;
}

@media (min-width: 980px) {
    .cjc-agencement {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
        gap: 38px;
    }
    .cjc-cote {
        position: sticky;
        top: 22px;
    }
}

/* ==========================================================================
   3. Le panier : un tableau rendu en cartes
   ========================================================================== */

.cjc-caisse .woocommerce-cart-form { margin: 0; }

.cjc-caisse .shop_table.cart,
.cjc-caisse .shop_table.cart tbody {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse: separate;
    background: none;
}
.cjc-caisse .shop_table.cart thead {
    display: none;   /* les libellés sont portés par les cartes */
}

/* Sur un telephone, la troisieme colonne etait en `auto` : elle prenait la
   largeur du total, « 1 299,00 € », soit 84 px, et il ne restait que 79 px au
   nom du produit — « Iphone SE 2022 » sur trois lignes. Le total descend donc
   sur sa propre ligne, et la troisieme colonne se reduit a la croix de
   suppression. Le nom passe de 79 a 177 px. */
.cjc-caisse .woocommerce-cart-form__cart-item {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 34px;
    grid-template-areas:
        "vignette nom      retirer"
        "vignette prix     prix"
        "vignette quantite quantite"
        "total    total    total";
    align-items: center;
    gap: 6px 14px;
    margin: 0 0 12px;
    padding: 14px;
    background: var(--cjc-paper);
    border: 1px solid var(--cjc-line);
    border-radius: 13px;
}
@media (min-width: 620px) {
    /* Six zones nommées : il faut six colonnes, sinon la déclaration entière
       est invalide et les cellules se superposent. */
    .cjc-caisse .woocommerce-cart-form__cart-item {
        grid-template-columns: 84px minmax(0, 1fr) 96px 100px 104px 34px;
        grid-template-areas: "vignette nom prix quantite total retirer";
        gap: 16px;
        padding: 14px 16px;
    }
}

.cjc-caisse .shop_table.cart td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
}
.cjc-caisse .shop_table.cart td::before {
    content: none;   /* neutralise le mode « responsive » de WooCommerce */
}

.cjc-caisse td.product-thumbnail {
    grid-area: vignette;
    align-self: start;
}
.cjc-caisse td.product-thumbnail img {
    display: block;
    width: 84px;
    height: 84px;
    object-fit: contain;
    background: var(--cjc-wash);
    border-radius: 10px;
    mix-blend-mode: multiply;
}
.cjc-caisse td.product-name {
    grid-area: nom;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
}
.cjc-caisse td.product-name a {
    color: var(--cjc-ink);
    text-decoration: none;
}
.cjc-caisse td.product-name a:hover,
.cjc-caisse td.product-name a:focus-visible {
    color: var(--cjc-violet-deep);
    text-decoration: underline;
}
.cjc-caisse td.product-name dl.variation,
.cjc-caisse td.product-name .backorder_notification {
    margin: 5px 0 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--cjc-ink-3);
}
/* Les variations sortent en <dt>/<dd> : on les remet sur une ligne, sinon
   « Couleur : » et « Gris sidéral » s'empilent avec des marges de <p>. */
.cjc-caisse td.product-name dl.variation {
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
}
.cjc-caisse td.product-name dl.variation dt,
.cjc-caisse td.product-name dl.variation dd {
    margin: 0;
    font-weight: inherit;
}
.cjc-caisse td.product-name dl.variation dd::after {
    content: "\00a0";
}
.cjc-caisse td.product-name dl.variation p {
    margin: 0;
    display: inline;
}
.cjc-caisse td.product-price {
    grid-area: prix;
    font-size: 14.5px;
    color: var(--cjc-ink-3);
    font-variant-numeric: tabular-nums;
}
.cjc-caisse td.product-quantity {
    grid-area: quantite;
}
.cjc-caisse td.product-subtotal {
    grid-area: total;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cjc-caisse td.product-remove {
    grid-area: retirer;
    text-align: right;
}

.cjc-caisse .shop_table.cart .quantity {
    display: inline-flex;
}
.cjc-caisse .shop_table.cart .quantity input.qty {
    width: 74px;
    height: 40px;
    padding: 0 6px;
    text-align: center;
    border: 1px solid var(--cjc-line);
    border-radius: 9px;
    background: var(--cjc-paper);
    color: var(--cjc-ink);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.cjc-caisse td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--cjc-wash);
    color: var(--cjc-ink-3);
    font-size: 19px;
    line-height: 1;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.cjc-caisse td.product-remove a.remove:hover,
.cjc-caisse td.product-remove a.remove:focus-visible {
    background: var(--cjc-rouge-wash);
    color: var(--cjc-rouge);
}

/* --- la ligne d'actions : code promo et mise à jour --------------------- */

.cjc-caisse .shop_table.cart td.actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 0;
    padding: 16px;
    background: var(--cjc-paper);
    border: 1px solid var(--cjc-line);
    border-radius: 13px;
}
.cjc-caisse .shop_table.cart tr:last-child {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}
/* Sur un téléphone, « Appliquer le code promo » ne peut pas se réduire : avec
   une base de 300 px pour le champ, la ligne imposait 471 px de large et
   faisait déborder toute la page. On empile, et le champ redevient élastique. */
.cjc-caisse td.actions .coupon {
    display: flex;
    flex: 1 1 300px;
    min-width: 0;
    gap: 8px;
}
@media (max-width: 620px) {
    .cjc-caisse .shop_table.cart td.actions {
        flex-direction: column;
        align-items: stretch;
    }
    .cjc-caisse td.actions .coupon {
        flex: 1 1 auto;
        flex-wrap: wrap;
    }
    .cjc-caisse td.actions input#coupon_code {
        flex: 1 1 140px;
    }
    .cjc-caisse td.actions .button {
        white-space: normal;
    }
}
.cjc-caisse td.actions input#coupon_code {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--cjc-line);
    border-radius: 9px;
    background: var(--cjc-paper);
    font-size: 15px;
}
.cjc-caisse td.actions .button {
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--cjc-violet);
    border-radius: 9px;
    background: var(--cjc-paper);
    color: var(--cjc-violet-deep);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}
.cjc-caisse td.actions .button:hover:not(:disabled) {
    background: var(--cjc-violet-wash);
}
.cjc-caisse td.actions .button:disabled {
    border-color: var(--cjc-line);
    color: var(--cjc-ink-3);
    cursor: default;
    opacity: .7;
}

.cjc-caisse .cjc-retour {
    margin: 18px 0 0;
    font-size: 15px;
}
.cjc-caisse .cjc-retour a {
    color: var(--cjc-violet-deep);
    font-weight: 600;
    text-decoration: none;
}
.cjc-caisse .cjc-retour a:hover,
.cjc-caisse .cjc-retour a:focus-visible {
    text-decoration: underline;
}

/* ==========================================================================
   4. Le récapitulatif (panier et commande)
   ========================================================================== */

.cjc-caisse .cart_totals,
.cjc-caisse #order_review {
    padding: 20px;
    background: var(--cjc-paper);
    border: 1px solid var(--cjc-line);
    border-radius: 14px;
}
.cjc-caisse .cart_totals > h2,
.cjc-caisse #order_review_heading {
    margin: 0 0 16px !important;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cjc-ink);
}
.cjc-caisse #order_review_heading {
    margin: 0 0 14px !important;
}

.cjc-caisse .cart_totals table,
.cjc-caisse .woocommerce-checkout-review-order-table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 15px;
}
.cjc-caisse .cart_totals table th,
.cjc-caisse .cart_totals table td,
.cjc-caisse .woocommerce-checkout-review-order-table th,
.cjc-caisse .woocommerce-checkout-review-order-table td {
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid var(--cjc-line);
    background: none;
    text-align: left;
    vertical-align: top;
}
.cjc-caisse .cart_totals table th,
.cjc-caisse .woocommerce-checkout-review-order-table th {
    font-weight: 500;
    color: var(--cjc-ink-2);
}
.cjc-caisse .cart_totals table td,
.cjc-caisse .woocommerce-checkout-review-order-table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cjc-caisse .woocommerce-checkout-review-order-table thead th {
    padding-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cjc-ink-3);
}
.cjc-caisse .woocommerce-checkout-review-order-table .product-name {
    font-weight: 500;
    color: var(--cjc-ink);
}
.cjc-caisse .woocommerce-checkout-review-order-table .product-quantity {
    color: var(--cjc-ink-3);
    font-weight: 400;
}
.cjc-caisse .cart_totals tr.order-total th,
.cjc-caisse .cart_totals tr.order-total td,
.cjc-caisse .woocommerce-checkout-review-order-table tfoot .order-total th,
.cjc-caisse .woocommerce-checkout-review-order-table tfoot .order-total td {
    padding-top: 14px;
    border-bottom: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--cjc-ink);
}
.cjc-caisse .cart_totals .includes_tax,
.cjc-caisse .woocommerce-checkout-review-order-table .includes_tax,
.cjc-caisse .cart_totals small {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--cjc-ink-3);
}
.cjc-caisse .woocommerce-shipping-destination,
.cjc-caisse .woocommerce-shipping-totals .woocommerce-Price-amount {
    font-size: 14px;
}
.cjc-caisse ul#shipping_method,
.cjc-caisse .woocommerce-shipping-methods {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}
.cjc-caisse ul#shipping_method li,
.cjc-caisse .woocommerce-shipping-methods li {
    margin: 0 0 6px;
    font-size: 14.5px;
}
.cjc-caisse .shipping-calculator-button {
    display: inline-block;
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--cjc-violet-deep);
}

.cjc-caisse .wc-proceed-to-checkout {
    margin: 18px 0 0;
    padding: 0;
}

/* ==========================================================================
   5. Les boutons
   ========================================================================== */

.cjc-caisse .cjc-bouton,
.cjc-caisse a.checkout-button,
.cjc-caisse #place_order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    background: var(--cjc-violet);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.cjc-caisse .cjc-bouton:hover,
.cjc-caisse a.checkout-button:hover,
.cjc-caisse #place_order:hover,
.cjc-caisse .cjc-bouton:focus-visible,
.cjc-caisse a.checkout-button:focus-visible,
.cjc-caisse #place_order:focus-visible {
    background: var(--cjc-violet-deep);
    color: #fff;
}
.cjc-caisse .cjc-bouton-large,
.cjc-caisse a.checkout-button,
.cjc-caisse #place_order {
    width: 100%;
}
.cjc-caisse .cjc-bouton-clair {
    background: var(--cjc-paper);
    color: var(--cjc-violet-deep);
    border: 1px solid var(--cjc-violet);
}
.cjc-caisse .cjc-bouton-clair:hover,
.cjc-caisse .cjc-bouton-clair:focus-visible {
    background: var(--cjc-violet-wash);
    color: var(--cjc-violet-deep);
}

/* ==========================================================================
   6. Le formulaire de commande
   ========================================================================== */

.cjc-caisse .cjc-bloc {
    margin: 0 0 22px;
    padding: 22px;
    background: var(--cjc-paper);
    border: 1px solid var(--cjc-line);
    border-radius: 14px;
}
.cjc-caisse .cjc-bloc h3 {
    margin: 0 0 16px !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cjc-ink);
}
.cjc-caisse .woocommerce-shipping-fields h3 {
    margin-top: 0 !important;
}

.cjc-caisse .woocommerce-billing-fields__field-wrapper,
.cjc-caisse .woocommerce-shipping-fields__field-wrapper,
.cjc-caisse .woocommerce-additional-fields__field-wrapper,
.cjc-caisse .create-account {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    margin: 0;
}
@media (max-width: 560px) {
    .cjc-caisse .woocommerce-billing-fields__field-wrapper,
    .cjc-caisse .woocommerce-shipping-fields__field-wrapper,
    .cjc-caisse .woocommerce-additional-fields__field-wrapper,
    .cjc-caisse .create-account {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cjc-caisse .form-row {
    margin: 0;
    padding: 0;
    grid-column: span 2;
}
.cjc-caisse .form-row-first,
.cjc-caisse .form-row-last {
    grid-column: span 1;
}
@media (max-width: 560px) {
    .cjc-caisse .form-row,
    .cjc-caisse .form-row-first,
    .cjc-caisse .form-row-last {
        grid-column: span 1;
    }
}

.cjc-caisse .form-row label {
    display: block;
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cjc-ink-2);
}
.cjc-caisse .form-row .required {
    color: var(--cjc-rouge);
    text-decoration: none;
    border: 0;
}
.cjc-caisse .form-row .optional {
    color: var(--cjc-ink-3);
    font-weight: 400;
}

.cjc-caisse .form-row input.input-text,
.cjc-caisse .form-row textarea,
.cjc-caisse .form-row select,
.cjc-caisse .select2-container .select2-selection--single {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid var(--cjc-line);
    border-radius: 9px;
    background: var(--cjc-paper);
    color: var(--cjc-ink);
    font-size: 15px;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cjc-caisse .form-row textarea {
    height: auto;
    min-height: 96px;
    padding: 11px 13px;
    line-height: 1.55;
    resize: vertical;
}
.cjc-caisse .form-row input.input-text:focus,
.cjc-caisse .form-row textarea:focus,
.cjc-caisse .form-row select:focus {
    outline: 0;
    border-color: var(--cjc-violet);
    box-shadow: 0 0 0 3px var(--cjc-violet-wash);
}
.cjc-caisse .form-row input.input-text::placeholder,
.cjc-caisse .form-row textarea::placeholder {
    color: var(--cjc-ink-3);
}
.cjc-caisse .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
}
.cjc-caisse .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
}

.cjc-caisse .woocommerce-invalid input.input-text,
.cjc-caisse .woocommerce-invalid select {
    border-color: var(--cjc-rouge);
}
.cjc-caisse .woocommerce-validated input.input-text {
    border-color: var(--cjc-line);
}

/* cases à cocher : créer un compte, livrer ailleurs, conditions */
.cjc-caisse .woocommerce-form__label-for-checkbox,
.cjc-caisse .woocommerce-form__label-for-checkbox.checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--cjc-ink-2);
    cursor: pointer;
}
.cjc-caisse input[type="checkbox"],
.cjc-caisse input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    accent-color: var(--cjc-violet);
}
.cjc-caisse #ship-to-different-address {
    display: block;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}
.cjc-caisse .woocommerce-account-fields {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cjc-line);
}
.cjc-caisse .shipping_address {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--cjc-line);
}

/* ==========================================================================
   7. Le paiement — balisage WooCommerce d'origine, habillage seulement
   ========================================================================== */

.cjc-caisse #payment {
    margin: 18px 0 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.cjc-caisse #payment ul.payment_methods {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    border: 0;
    background: none;
}
.cjc-caisse #payment ul.payment_methods > li {
    margin: 0 0 9px;
    padding: 13px 15px;
    background: var(--cjc-paper);
    border: 1px solid var(--cjc-line);
    border-radius: 11px;
    list-style: none;
    transition: border-color .15s ease;
}
.cjc-caisse #payment ul.payment_methods > li:has(input:checked) {
    border-color: var(--cjc-violet);
    box-shadow: 0 0 0 1px var(--cjc-violet);
}
.cjc-caisse #payment ul.payment_methods > li > label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cjc-ink);
    cursor: pointer;
}
.cjc-caisse #payment ul.payment_methods > li img {
    max-height: 26px;
    width: auto;
    margin-left: 4px;
    vertical-align: middle;
}
.cjc-caisse #payment .payment_box {
    margin: 11px 0 0;
    padding: 12px 14px;
    background: var(--cjc-wash);
    border: 0;
    border-radius: 9px;
    color: var(--cjc-ink-2);
    font-size: 14px;
    line-height: 1.55;
}
.cjc-caisse #payment .payment_box::before {
    content: none;
}
.cjc-caisse #payment .payment_box p:last-child {
    margin-bottom: 0;
}
.cjc-caisse #payment .place-order {
    margin: 0;
    padding: 0;
}
.cjc-caisse #payment .woocommerce-terms-and-conditions-wrapper {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cjc-ink-2);
}
.cjc-caisse #payment .woocommerce-privacy-policy-text p {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: var(--cjc-ink-3);
}

/* ==========================================================================
   8. Garanties, aide, avis
   ========================================================================== */

.cjc-caisse .cjc-atouts {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.cjc-caisse .cjc-atouts li {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 14.5px;
    color: var(--cjc-ink-2);
}
.cjc-caisse .cjc-atouts img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: none;
}

.cjc-caisse .cjc-aide {
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: 11px;
    background: var(--cjc-wash);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--cjc-ink-2);
}
.cjc-caisse .cjc-aide a {
    display: block;
    margin-top: 2px;
    color: var(--cjc-violet-deep);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}
.cjc-caisse .cjc-aide span {
    display: block;
    font-size: 13px;
    color: var(--cjc-ink-3);
}

/* les messages WooCommerce : « déjà client ? », « code promo », erreurs */
.cjc-caisse .woocommerce-info,
.cjc-caisse .woocommerce-message,
.cjc-caisse .woocommerce-error,
.cjc-caisse .woocommerce-notice {
    margin: 0 0 14px;
    padding: 13px 16px;
    border: 1px solid var(--cjc-line);
    border-left: 3px solid var(--cjc-violet);
    border-radius: 10px;
    background: var(--cjc-paper);
    color: var(--cjc-ink-2);
    font-size: 14.5px;
    line-height: 1.55;
    list-style: none;
}
.cjc-caisse .woocommerce-info::before,
.cjc-caisse .woocommerce-message::before,
.cjc-caisse .woocommerce-error::before {
    content: none;
}
.cjc-caisse .woocommerce-message {
    border-left-color: var(--cjc-vert);
    background: var(--cjc-vert-wash);
    color: var(--cjc-vert);
}
.cjc-caisse .woocommerce-error {
    border-left-color: var(--cjc-rouge);
    background: var(--cjc-rouge-wash);
    color: var(--cjc-rouge);
}
.cjc-caisse .woocommerce-error li {
    margin: 0 0 4px;
}
.cjc-caisse .woocommerce-info a,
.cjc-caisse .woocommerce-message a {
    color: var(--cjc-violet-deep);
    font-weight: 600;
}

.cjc-caisse form.checkout_coupon,
.cjc-caisse form.woocommerce-form-login {
    margin: 0 0 18px;
    padding: 18px;
    background: var(--cjc-paper);
    border: 1px solid var(--cjc-line);
    border-radius: 13px;
}
.cjc-caisse form.checkout_coupon .form-row,
.cjc-caisse form.woocommerce-form-login .form-row {
    margin-bottom: 12px;
}
.cjc-caisse form.checkout_coupon .button,
.cjc-caisse form.woocommerce-form-login .button {
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 9px;
    background: var(--cjc-violet);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ==========================================================================
   9. Panier vide
   ========================================================================== */

.cjc-vide-bloc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 44px 24px;
    text-align: center;
    background: var(--cjc-paper);
    border: 1px solid var(--cjc-line);
    border-radius: 16px;
}
.cjc-caisse .cjc-vide-icone {
    color: var(--cjc-violet);
    opacity: .85;
}
/* Le message vient de `wc_empty_cart_message()` : c'est une notice
   WooCommerce. Au centre d'un bloc vide, son filet de gauche n'a pas de sens. */
.cjc-caisse .cjc-vide-mot .woocommerce-info,
.cjc-caisse .cjc-vide-mot p {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--cjc-ink);
}
.cjc-caisse .cjc-vide-bloc .return-to-shop {
    margin: 4px 0 0;
}

.cjc-pistes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 22px 0 0;
}
@media (min-width: 760px) {
    .cjc-pistes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.cjc-caisse .cjc-piste {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px;
    background: var(--cjc-paper);
    border: 1px solid var(--cjc-line);
    border-radius: 13px;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.cjc-caisse .cjc-piste:hover,
.cjc-caisse .cjc-piste:focus-visible {
    border-color: var(--cjc-violet);
    transform: translateY(-2px);
}
.cjc-caisse .cjc-piste-titre {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--cjc-ink);
}
.cjc-caisse .cjc-piste-texte {
    font-size: 14px;
    color: var(--cjc-ink-3);
}
.cjc-vide .cjc-aide {
    max-width: 420px;
    margin: 22px auto 0;
    text-align: center;
}

/* ==========================================================================
   10. Confirmation
   ========================================================================== */

.cjc-succes {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    margin: 0 0 20px;
    background: var(--cjc-vert-wash);
    border-radius: 14px;
}
.cjc-caisse .cjc-succes-icone {
    color: var(--cjc-vert);
    flex: none;
}
.cjc-caisse .cjc-succes-mot p {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cjc-vert);
}

.cjc-caisse .cjc-recap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    background: var(--cjc-line);
    border: 1px solid var(--cjc-line);
    border-radius: 13px;
    overflow: hidden;
}
.cjc-caisse .cjc-recap li {
    margin: 0;
    padding: 15px 17px;
    background: var(--cjc-paper);
    font-size: 13px;
    color: var(--cjc-ink-3);
}
.cjc-caisse .cjc-recap li strong {
    display: block;
    margin-top: 5px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cjc-ink);
}

.cjc-caisse .woocommerce-order-details,
.cjc-caisse .woocommerce-customer-details {
    margin: 26px 0 0;
    padding: 22px;
    background: var(--cjc-paper);
    border: 1px solid var(--cjc-line);
    border-radius: 14px;
}
.cjc-caisse .woocommerce-order-details h2,
.cjc-caisse .woocommerce-customer-details h2 {
    margin: 0 0 16px !important;
    font-size: 19px;
    font-weight: 700;
}
.cjc-caisse .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.cjc-caisse .woocommerce-table--order-details th,
.cjc-caisse .woocommerce-table--order-details td {
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid var(--cjc-line);
    text-align: left;
}
.cjc-caisse .woocommerce-table--order-details td:last-child,
.cjc-caisse .woocommerce-table--order-details th:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cjc-caisse .cjc-confirmation .cjc-atouts {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 24px;
}

/* ==========================================================================
   11. Ventes croisées
   ========================================================================== */

.cjc-croisees {
    margin: 38px 0 0;
    padding: 30px 0 0;
    border-top: 1px solid var(--cjc-line);
}
.cjc-caisse .cjc-croisees h2 {
    margin: 0 0 18px !important;
    font-size: 20px;
    font-weight: 700;
}
.cjc-caisse .cjc-croisees ul.products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 760px) {
    .cjc-caisse .cjc-croisees ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.cjc-caisse .cjc-croisees ul.products li.product {
    width: auto;
    margin: 0;
    float: none;
}

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


/* --- css/service.css (NON PURGÉ : voir NE_PAS_PURGER) --- */
/* ==========================================================================
   Pages de service : nettoyage, récupération de données, rachat.

   Deux adversaires ici, pas un :

   1. Les règles historiques du thème et le CSS additionnel du Customizer,
      qui visent des sélecteurs nus en !important — d'où les classes
      préfixées `cjs-` et des sélecteurs volontairement spécifiques.

   2. Les styles EN LIGNE saisis dans l'éditeur. Les tableaux du contenu
      portent `border: 2px solid #000` et un violet `#6A5ACD` qui n'est pas
      celui de la charte, écrits dans l'attribut style de chaque cellule.
      Seul un !important passe devant. On ne modifie pas le texte des pages :
      on le rhabille.
   ========================================================================== */

.cjs {
    --cjs-violet: #8f15ff;
    --cjs-violet-deep: #7211cc;
    --cjs-violet-wash: #f4eaff;
    --cjs-ink: #0e0e13;
    --cjs-ink-2: #3a3646;
    --cjs-ink-3: #7d7789;
    --cjs-line: #e6e3ee;
    --cjs-paper: #fff;
    --cjs-wash: #f7f6fa;
    --cjs-vert: #0d6b52;
    --cjs-vert-wash: #e6f4ef;
    --cjs-or: #b8860b;

    color: var(--cjs-ink);
}

.cjs,
.cjs *,
.cjs *::before,
.cjs *::after {
    box-sizing: border-box;
}

.cjs-large {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 18px;
}

/* ==========================================================================
   1. L'accroche
   ========================================================================== */

.cjs-entete {
    padding: 30px 0 34px;
    background: var(--cjs-wash);
    border-bottom: 1px solid var(--cjs-line);
}
.cjs-entete-grille {
    display: grid;
    gap: 26px;
    align-items: center;
}
@media (min-width: 900px) {
    .cjs-entete-grille {
        grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
        gap: 44px;
    }
    .cjs-entete-grille.cjs-entete-seule {
        grid-template-columns: minmax(0, 780px);
    }
}

.cjs .cjs-surtitre {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cjs-violet-deep);
}

/* Les lignes d'accroche au-dessus du titre : même corps que le titre, mais
   ce ne sont pas des titres — le h1 reste unique et reste celui qui porte le
   référencement. */
.cjs .cjs-avant {
    margin: 0 0 2px;
    font-size: clamp(24px, 3.6vw, 34px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--cjs-ink-3);
}

/* `h1 { margin-top:15px !important }` vient du CSS additionnel : il faut un
   sélecteur plus spécifique ET un !important pour le neutraliser. */
.cjs .cjs-entete-mot .cjs-titre {
    margin: 0 0 14px !important;
    font-size: clamp(27px, 4.2vw, 40px);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--cjs-ink);
    text-wrap: balance;
}

.cjs .cjs-chapeau {
    margin: 0 0 16px;
    max-width: 60ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--cjs-ink-2);
}

.cjs .cjs-prix {
    display: inline-block;
    margin: 0 0 18px;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    font-size: 15px;
    font-weight: 600;
    color: var(--cjs-ink);
    font-variant-numeric: tabular-nums;
}

.cjs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}
.cjs .cjs-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    padding: 0 22px;
    border: 1px solid var(--cjs-violet);
    border-radius: 10px;
    background: var(--cjs-violet);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}
.cjs .cjs-bouton:hover,
.cjs .cjs-bouton:focus-visible {
    background: var(--cjs-violet-deep);
    border-color: var(--cjs-violet-deep);
    color: #fff;
}
.cjs .cjs-bouton-clair {
    background: var(--cjs-paper);
    color: var(--cjs-violet-deep);
}
.cjs .cjs-bouton-clair:hover,
.cjs .cjs-bouton-clair:focus-visible {
    background: var(--cjs-violet-wash);
    color: var(--cjs-violet-deep);
}

.cjs-entete-visuel img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* Le bandeau décoratif de 1400 × 149 : pleine largeur, sous l'accroche. */
.cjs-bande {
    margin: 26px 0 0;
    overflow: hidden;
    border-radius: 12px;
}
.cjs-bande img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 110px;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   2. Le bandeau de garanties
   ========================================================================== */

.cjs .cjs-atouts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
    padding: 16px 0;
    list-style: none;
    border-bottom: 1px solid var(--cjs-line);
}
.cjs .cjs-atouts li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14.5px;
    color: var(--cjs-ink-2);
}
.cjs .cjs-atouts li::before {
    content: "✓";
    color: var(--cjs-vert);
    font-weight: 700;
    flex: none;
}

/* ==========================================================================
   3. La grille de lecture : texte à gauche, sommaire collant à droite
   ========================================================================== */

.cjs-corps {
    padding: 34px 0 44px;
}
.cjs-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}
/* Une cellule de grille ne descend pas sous la largeur intrinsèque de son
   contenu : sans `min-width: 0`, le tableau de 520 px du contenu élargissait
   toute la colonne, et son conteneur à défilement ne servait à rien. */
.cjs-grille > * {
    min-width: 0;
}
@media (min-width: 1000px) {
    .cjs-grille {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 48px;
    }
    .cjs-cote {
        position: sticky;
        top: 22px;
    }
}

/* --- le sommaire -------------------------------------------------------- */

.cjs-sommaire {
    padding: 18px 20px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 13px;
}
.cjs .cjs-sommaire-titre {
    margin: 0 0 11px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cjs-ink-3);
}
.cjs .cjs-sommaire ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cjs;
}
.cjs .cjs-sommaire li {
    margin: 0 0 8px;
    counter-increment: cjs;
    font-size: 14px;
    line-height: 1.45;
}
.cjs .cjs-sommaire li:last-child {
    margin-bottom: 0;
}
.cjs .cjs-sommaire a {
    display: block;
    color: var(--cjs-ink-2);
    text-decoration: none;
    border-left: 2px solid var(--cjs-line);
    padding-left: 11px;
    transition: border-color .15s ease, color .15s ease;
}
.cjs .cjs-sommaire a:hover,
.cjs .cjs-sommaire a:focus-visible {
    color: var(--cjs-violet-deep);
    border-left-color: var(--cjs-violet);
}

.cjs-aide {
    margin-top: 16px;
    padding: 18px 20px;
    background: var(--cjs-violet-wash);
    border-radius: 13px;
}
.cjs .cjs-aide-titre {
    margin: 0 0 6px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--cjs-ink);
}
.cjs .cjs-aide-texte {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cjs-ink-2);
}
.cjs .cjs-aide-tel {
    display: block;
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 700;
    color: var(--cjs-violet-deep);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.cjs .cjs-aide .cjs-bouton {
    width: 100%;
}

/* ==========================================================================
   4. Le texte de la page
   ========================================================================== */

.cjs-texte {
    max-width: 72ch;
    font-size: 17px;
    line-height: 1.72;
    color: var(--cjs-ink-2);
}
.cjs .cjs-texte p {
    margin: 0 0 18px;
}
/* Les retours a la ligne « en dur ». Les textes sont saisis avec un <br>
   tous les 120 caracteres environ (« …et fait monter<br>la temperature »),
   ce qui donnait des lignes de deux mots dans la colonne de 72 caracteres :
   19 sur /nettoyage, 20 sur /recyclage. On ne les affiche plus dans les
   paragraphes — le HTML ne bouge pas — sauf apres un <strong>, forme des
   questions-reponses saisies en paragraphe. Les cellules de tableau et les
   blocs de contact (« Apeller un conseiller<br>expert Apple au ») gardent
   les leurs. */
.cjs .cjs-texte p > br { display: none; }
.cjs .cjs-texte p > strong + br,
.cjs .cjs-texte p > b + br { display: inline; }
.cjs .cjs-texte h2 {
    margin: 38px 0 14px !important;
    font-size: clamp(20px, 2.6vw, 24px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--cjs-ink);
    scroll-margin-top: 90px;
    text-wrap: balance;
}
.cjs .cjs-texte h2:first-child {
    margin-top: 0 !important;
}
.cjs .cjs-texte h3 {
    margin: 26px 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--cjs-ink);
}
.cjs .cjs-texte ul,
.cjs .cjs-texte ol {
    margin: 0 0 18px;
    padding-left: 22px;
}
.cjs .cjs-texte li {
    margin: 0 0 8px;
}
.cjs .cjs-texte a {
    color: var(--cjs-violet-deep);
    text-underline-offset: 2px;
}
.cjs .cjs-texte strong {
    color: var(--cjs-ink);
    font-weight: 600;
}
.cjs .cjs-texte img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* --- les tableaux du contenu -------------------------------------------
   Styles en ligne dans le HTML de la page : bordures noires de 2 px et
   en-tête #6A5ACD. On les rhabille, sans toucher au contenu.            */

.cjs .cjs-texte table {
    width: 100% !important;
    margin: 0 0 22px;
    border: 1px solid var(--cjs-line) !important;
    border-radius: 12px;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.55;
}
.cjs .cjs-texte thead tr,
.cjs .cjs-texte thead th {
    background: var(--cjs-wash) !important;
}
.cjs .cjs-texte th,
.cjs .cjs-texte td {
    padding: 12px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cjs-line) !important;
    text-align: left !important;
    vertical-align: top;
    color: var(--cjs-ink-2) !important;
}
.cjs .cjs-texte th {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--cjs-ink) !important;
}
.cjs .cjs-texte tbody tr:nth-child(even) {
    background: var(--cjs-wash) !important;
}
.cjs .cjs-texte tbody tr:last-child td {
    border-bottom: 0 !important;
}
/* Un tableau à trois colonnes ne tient pas sur un téléphone : il défile
   dans son propre cadre plutôt que de pousser la page. */
.cjs-tableau {
    overflow-x: auto;
    margin: 0 0 22px;
    -webkit-overflow-scrolling: touch;
}
.cjs-tableau table {
    min-width: 520px;
    margin-bottom: 0 !important;
}

/* SAUF DANS LA CAISSE ET L'ESPACE CLIENT.
   Leurs tableaux ne sont pas des tableaux de contenu : sous 620 px, chaque
   ligne devient une carte, dans une grille faite pour la largeur du telephone.
   Leur imposer 520 px de large les fait deborder de leur cadre — le panier
   apparaissait coupe, avec un defilement horizontal a l'interieur d'une carte
   de 339 px, et les boutons « code promo » et « mettre a jour » hors champ.
   Trois classes contre une : cette regle gagne quel que soit l'ordre des
   feuilles. */
.cjc-caisse .cjs-tableau,
.cjm .cjs-tableau {
    overflow-x: visible;
}
.cjc-caisse .cjs-tableau table,
.cjm .cjs-tableau table {
    min-width: 0;
}

/* --- le cas client ------------------------------------------------------ */

.cjs .cjs-texte .cj-case {
    margin: 0 0 22px;
    padding: 20px 22px !important;
    background: var(--cjs-vert-wash) !important;
    border: 0 !important;
    border-left: 3px solid var(--cjs-vert) !important;
    border-radius: 12px !important;
    font-size: 15.5px;
    line-height: 1.65;
}
.cjs .cjs-texte .cj-case strong {
    display: block;
    margin-top: 10px;
    color: var(--cjs-vert);
    font-weight: 700;
}
.cjs .cjs-texte .cj-case strong:first-child {
    margin-top: 0;
}

/* --- les avis ----------------------------------------------------------- */

.cjs .cjs-texte .cj-reviews {
    display: grid;
    gap: 12px;
    margin: 0 0 22px;
}
@media (min-width: 700px) {
    .cjs .cjs-texte .cj-reviews {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.cjs .cjs-texte .cj-review {
    padding: 16px 18px !important;
    background: var(--cjs-paper) !important;
    border: 1px solid var(--cjs-line) !important;
    border-radius: 12px !important;
    font-size: 15px;
    line-height: 1.6;
}
.cjs .cjs-texte .cj-review span {
    display: block;
    margin-bottom: 6px;
    color: var(--cjs-or) !important;
    letter-spacing: .08em;
}
.cjs .cjs-texte .cj-review strong {
    display: block;
    margin-top: 9px;
    font-size: 14px;
    color: var(--cjs-ink-3);
    font-weight: 600;
}

/* --- la FAQ ------------------------------------------------------------- */

.cjs .cjs-texte .cj-faq {
    margin: 0 0 22px;
    padding: 0;
    border: 1px solid var(--cjs-line);
    border-radius: 12px;
    overflow: hidden;
}
.cjs .cjs-texte .cj-faq dt {
    margin: 0;
    padding: 15px 18px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--cjs-ink);
}
.cjs .cjs-texte .cj-faq dt strong {
    font-weight: inherit;
}
.cjs .cjs-texte .cj-faq dd {
    margin: 0;
    padding: 7px 18px 15px;
    border-bottom: 1px solid var(--cjs-line);
    font-size: 15.5px;
    line-height: 1.65;
}
.cjs .cjs-texte .cj-faq dd:last-child {
    border-bottom: 0;
}

/* ==========================================================================
   5. Le sélecteur d'appareil (page Nettoyage)
   ========================================================================== */

.cjs-choix {
    padding: 34px 0 6px;
}
.cjs .cjs-choix-titre {
    margin: 0 0 20px !important;
    font-size: clamp(20px, 2.6vw, 25px);
    font-weight: 700;
    letter-spacing: -.014em;
    color: var(--cjs-ink);
}
.cjs-choix-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
@media (min-width: 620px) {
    .cjs-choix-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.cjs .cjs-carte {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.cjs .cjs-carte:hover,
.cjs .cjs-carte:focus-visible {
    border-color: var(--cjs-violet);
    transform: translateY(-2px);
}
.cjs .cjs-carte-signe {
    flex: none;
    font-size: 30px;
    line-height: 1;
}
.cjs .cjs-carte-nom {
    display: block;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cjs-ink);
}
.cjs .cjs-carte-note {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: var(--cjs-ink-3);
}

/* ==========================================================================
   6. L'estimateur de rachat
   ========================================================================== */

.cjs-estim {
    margin: 20px 0 0;
    padding: 20px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 14px;
    max-width: 520px;
}
.cjs .cjs-estim-titre {
    margin: 0 0 6px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--cjs-ink);
}
.cjs .cjs-estim-note {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--cjs-ink-3);
}
.cjs-estim-champ {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cjs .cjs-estim-champ input {
    flex: 1 1 220px;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--cjs-line);
    border-radius: 10px;
    background: var(--cjs-paper);
    color: var(--cjs-ink);
    font-size: 15.5px;
    font-family: inherit;
}
.cjs .cjs-estim-champ input:focus {
    outline: 0;
    border-color: var(--cjs-violet);
    box-shadow: 0 0 0 3px var(--cjs-violet-wash);
}
.cjs .cjs-estim-champ button {
    flex: none;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--cjs-violet);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.cjs .cjs-estim-champ button:hover {
    background: var(--cjs-violet-deep);
}

/* --- le résultat de l'estimation ---------------------------------------- */

.cjs-resultat {
    display: grid;
    gap: 26px;
    align-items: start;
    padding: 30px 0 10px;
}
@media (min-width: 860px) {
    .cjs-resultat {
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
        gap: 40px;
    }
}
.cjs-resultat-visuel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    background: var(--cjs-wash);
    border: 1px solid var(--cjs-line);
    border-radius: 16px;
}
.cjs-resultat-visuel img {
    max-width: 100%;
    height: auto;
    max-height: 260px;
    mix-blend-mode: multiply;
}
.cjs .cjs-serie {
    margin: 0 0 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--cjs-ink-3);
}
.cjs .cjs-resultat h1 {
    margin: 0 0 18px !important;
    font-size: clamp(24px, 3.4vw, 33px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.018em;
    color: var(--cjs-ink);
}
.cjs-offre {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 20px;
    padding: 18px 22px;
    background: var(--cjs-vert-wash);
    border-radius: 13px;
}
.cjs .cjs-offre-libelle {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cjs-vert);
}
.cjs .cjs-offre-montant {
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: var(--cjs-vert);
    font-variant-numeric: tabular-nums;
}

.cjs-etat {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}
.cjs .cjs-etat-titre {
    margin: 0 0 10px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cjs-ink);
}
.cjs-etat-choix {
    display: grid;
    gap: 8px;
}
.cjs .cjs-etat-choix label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 15px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 11px;
    font-size: 15px;
    color: var(--cjs-ink-2);
    cursor: pointer;
    transition: border-color .15s ease;
}
.cjs .cjs-etat-choix label:has(input:checked) {
    border-color: var(--cjs-violet);
    box-shadow: 0 0 0 1px var(--cjs-violet);
    color: var(--cjs-ink);
}
.cjs .cjs-etat-choix input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    accent-color: var(--cjs-violet);
}

.cjs-avis {
    margin: 0 0 20px;
    padding: 15px 18px;
    border-radius: 12px;
    background: var(--cjs-wash);
    border-left: 3px solid var(--cjs-violet);
    font-size: 15px;
    line-height: 1.6;
    color: var(--cjs-ink-2);
}
.cjs-avis.cjs-avis-souci {
    background: #fdecee;
    border-left-color: #a11228;
    color: #a11228;
}
.cjs-avis a {
    color: inherit;
    font-weight: 600;
}

/* --- fil d'Ariane et partage de la page rachat -------------------------- */

.cjs-fil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    font-size: 13.5px;
    color: var(--cjs-ink-3);
}
.cjs .cjs-fil a {
    color: var(--cjs-ink-3);
    text-decoration: none;
}
.cjs .cjs-fil a:hover,
.cjs .cjs-fil a:focus-visible {
    color: var(--cjs-violet-deep);
    text-decoration: underline;
}

.cjs-partage {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--cjs-line);
    font-size: 14px;
    color: var(--cjs-ink-3);
}
.cjs .cjs-partage a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--cjs-line);
    border-radius: 9px;
    transition: border-color .15s ease;
}
.cjs .cjs-partage a:hover {
    border-color: var(--cjs-violet);
}
.cjs .cjs-partage img {
    width: 16px;
    height: 16px;
}

/* Le thème et WooCommerce définissent tous deux `.screen-reader-text`, mais
   ces pages ne doivent dépendre d'aucune des deux feuilles. */
.cjs .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

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

/* ==========================================================================
   7. Variantes du gabarit générique
   ========================================================================== */

/* Sans sommaire : le texte occupe la largeur, mais garde sa mesure de
   lecture — une ligne de 120 caractères ne se lit pas. */
.cjs-grille-seule {
    grid-template-columns: minmax(0, 1fr) !important;
}
.cjs-grille-seule .cjs-texte {
    margin: 0 auto;
}

/* Page d'atterrissage : rien entre le visiteur et le message. */
.cjs-landing .cjs-entete {
    background: none;
    border-bottom: 0;
    padding-bottom: 6px;
}
.cjs-landing .cjs-texte {
    max-width: 78ch;
}

/* ==========================================================================
   8. Recherche et page introuvable
   ========================================================================== */

.cjs-vide-page {
    padding: 40px 0 44px;
}
.cjs-vide-bloc {
    max-width: 640px;
    padding: 34px 30px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 16px;
}
.cjs .cjs-vide-code {
    margin: 0 0 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    letter-spacing: .12em;
    color: var(--cjs-ink-3);
}
.cjs .cjs-vide-titre {
    margin: 0 0 12px !important;
    font-size: clamp(24px, 3.6vw, 33px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--cjs-ink);
}
.cjs .cjs-vide-texte {
    margin: 0 0 20px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--cjs-ink-2);
}

.cjs-cherche {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
    max-width: 520px;
}
.cjs .cjs-cherche input {
    flex: 1 1 220px;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--cjs-line);
    border-radius: 10px;
    background: var(--cjs-paper);
    color: var(--cjs-ink);
    font-size: 15.5px;
    font-family: inherit;
}
.cjs .cjs-cherche input:focus {
    outline: 0;
    border-color: var(--cjs-violet);
    box-shadow: 0 0 0 3px var(--cjs-violet-wash);
}
.cjs .cjs-cherche button {
    flex: none;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--cjs-violet);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
}
.cjs .cjs-cherche button:hover {
    background: var(--cjs-violet-deep);
}

/* --- les résultats de recherche ---------------------------------------- */

.cjs .cjs-compte {
    margin: 0 0 22px;
    font-size: 15px;
    color: var(--cjs-ink-3);
}
.cjs .cjs-compte b {
    color: var(--cjs-ink);
    font-weight: 700;
}

.cjs-resultats {
    display: grid;
    gap: 12px;
    margin: 0 0 30px;
}
.cjs .cjs-resultat-item {
    display: block;
    padding: 18px 20px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 13px;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.cjs .cjs-resultat-item:hover,
.cjs .cjs-resultat-item:focus-visible {
    border-color: var(--cjs-violet);
    transform: translateY(-2px);
}
.cjs .cjs-resultat-type {
    display: inline-block;
    margin: 0 0 7px;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--cjs-wash);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cjs-ink-3);
}
.cjs .cjs-resultat-titre {
    margin: 0 0 6px;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cjs-ink);
}
.cjs .cjs-resultat-extrait {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--cjs-ink-2);
}
.cjs .cjs-resultat-item mark {
    background: var(--cjs-violet-wash);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}

.cjs-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 10px;
}
.cjs .cjs-pagination a,
.cjs .cjs-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--cjs-line);
    border-radius: 10px;
    background: var(--cjs-paper);
    color: var(--cjs-ink-2);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.cjs .cjs-pagination a:hover {
    border-color: var(--cjs-violet);
    color: var(--cjs-violet-deep);
}
.cjs .cjs-pagination .current {
    background: var(--cjs-violet);
    border-color: var(--cjs-violet);
    color: #fff;
}

/* --- les pistes proposées quand il n'y a rien ---------------------------- */

.cjs-pistes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 24px 0 0;
}
@media (min-width: 760px) {
    .cjs-pistes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.cjs .cjs-piste {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 13px;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.cjs .cjs-piste:hover,
.cjs .cjs-piste:focus-visible {
    border-color: var(--cjs-violet);
    transform: translateY(-2px);
}
.cjs .cjs-piste-titre {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--cjs-ink);
}
.cjs .cjs-piste-texte {
    font-size: 14px;
    color: var(--cjs-ink-3);
}

/* ==========================================================================
   9. Titres de section hors contenu
   ========================================================================== */

.cjs .cjs-section-titre {
    margin: 0 0 22px !important;
    font-size: clamp(21px, 2.8vw, 26px);
    font-weight: 700;
    letter-spacing: -.014em;
    color: var(--cjs-ink);
}
.cjs-texte-large {
    max-width: 82ch;
}

/* ==========================================================================
   10. Qui sommes-nous : les deux boutiques
   ========================================================================== */

.cjs-boutiques {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin: 0 0 40px;
}
@media (min-width: 820px) {
    .cjs-boutiques {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }
}
.cjs-boutique {
    padding: 20px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 14px;
}
.cjs .cjs-boutique img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
.cjs .cjs-boutique-photo {
    margin: 0 0 14px;
}
.cjs .cjs-boutique-adresse {
    margin: 0 0 12px;
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--cjs-ink);
}
.cjs .cjs-boutique-acces {
    margin: 0 0 14px;
}
.cjs-boutique-carte {
    border-radius: 10px;
    overflow: hidden;
}
.cjs .cjs-boutique-carte iframe {
    display: block;
    width: 100%;
    height: 280px;
    border: 0;
}

.cjs-video {
    position: relative;
    margin: 0 0 20px;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--cjs-wash);
}
.cjs .cjs-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   11. Comment envoyer : les trois temps
   ========================================================================== */

.cjs .cjs-etapes-liste {
    display: grid;
    gap: 14px;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
}
.cjs .cjs-etape-carte {
    display: grid;
    grid-template-columns: 40px 99px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 18px 20px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 14px;
}
@media (max-width: 600px) {
    .cjs .cjs-etape-carte {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px 14px;
    }
    .cjs .cjs-etape-carte img {
        grid-column: 1 / -1;
        justify-self: start;
    }
}
.cjs .cjs-etape-rang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cjs-violet);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cjs .cjs-etape-carte img {
    display: block;
    width: 99px;
    height: auto;
    border-radius: 10px;
}
.cjs .cjs-etape-titre-carte {
    margin: 0 0 4px;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--cjs-ink);
}
.cjs .cjs-etape-texte {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--cjs-ink-2);
}

.cjs .cjs-envois-ligne {
    margin: 0;
    padding: 0;
    list-style: none;
}
.cjs-envois {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}
@media (min-width: 700px) {
    .cjs-envois {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 18px;
    }
}
.cjs .cjs-ou {
    justify-self: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--cjs-ink-3);
}
.cjs-envoi-carte {
    padding: 22px;
    text-align: center;
    background: var(--cjs-wash);
    border: 1px solid var(--cjs-line);
    border-radius: 14px;
}
.cjs .cjs-envoi-carte img {
    display: block;
    max-width: 140px;
    height: auto;
    margin: 0 auto 14px;
    border-radius: 10px;
}
.cjs .cjs-envoi-titre {
    margin: 0 0 6px;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--cjs-ink);
}
.cjs .cjs-envoi-texte {
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--cjs-ink-2);
}
.cjs .cjs-envoi-prix {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--cjs-violet-deep);
    font-variant-numeric: tabular-nums;
}

.cjs-final {
    padding: 30px 26px;
    margin: 0 0 34px;
    text-align: center;
    background: var(--cjs-violet-wash);
    border-radius: 14px;
}
.cjs .cjs-final h2 {
    margin: 0 0 16px !important;
    font-size: 22px;
    font-weight: 700;
    color: var(--cjs-ink);
}

/* ==========================================================================
   12. Espace pro
   ========================================================================== */

.cjs-entete-pro {
    text-align: center;
}
.cjs .cjs-pro-logo {
    display: block;
    max-width: 220px;
    height: auto;
    margin: 0 auto 18px;
}
.cjs-pro-portail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    max-width: 900px;
    margin: 26px auto 0;
    text-align: left;
}
@media (min-width: 820px) {
    .cjs-pro-portail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}
.cjs-pro-connexion,
.cjs-pro-creation {
    padding: 22px 24px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 14px;
}
.cjs .cjs-pro-connexion-titre,
.cjs .cjs-pro-creation-titre {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cjs-ink);
}
.cjs .cjs-pro-connexion p {
    margin: 0 0 12px;
}
.cjs .cjs-pro-connexion label {
    display: block;
    margin-bottom: 5px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cjs-ink-2);
}
.cjs .cjs-pro-connexion input[type="text"],
.cjs .cjs-pro-connexion input[type="password"] {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid var(--cjs-line);
    border-radius: 9px;
    background: var(--cjs-paper);
    font-size: 15px;
    font-family: inherit;
}
.cjs .cjs-pro-connexion input:focus {
    outline: 0;
    border-color: var(--cjs-violet);
    box-shadow: 0 0 0 3px var(--cjs-violet-wash);
}
.cjs .cjs-pro-connexion input[type="submit"] {
    width: 100%;
    min-height: 47px;
    border: 0;
    border-radius: 10px;
    background: var(--cjs-violet);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.cjs .cjs-pro-connexion input[type="submit"]:hover {
    background: var(--cjs-violet-deep);
}
.cjs .cjs-pro-connexion .login-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}
.cjs .cjs-pro-connexion input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--cjs-violet);
}

/* Le volet remplace une fenetre Bootstrap : meme geste, aucun script. */
.cjs-volet {
    border: 1px solid var(--cjs-line);
    border-radius: 11px;
    overflow: hidden;
}
.cjs .cjs-volet summary {
    padding: 13px 16px;
    background: var(--cjs-violet);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.cjs .cjs-volet summary::-webkit-details-marker {
    display: none;
}
.cjs .cjs-volet summary::after {
    content: " \25BE";
}
.cjs .cjs-volet[open] summary::after {
    content: " \25B4";
}
.cjs-volet-corps {
    padding: 18px 16px;
}
.cjs .cjs-volet-corps input[type="text"],
.cjs .cjs-volet-corps input[type="email"],
.cjs .cjs-volet-corps input[type="tel"],
.cjs .cjs-volet-corps textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--cjs-line);
    border-radius: 9px;
    font-size: 15px;
    font-family: inherit;
}
.cjs .cjs-volet-corps .wpcf7-submit {
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--cjs-violet);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.cjs-pro-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin: 34px 0;
}
@media (min-width: 760px) {
    .cjs-pro-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 34px;
    }
}
.cjs-pro-item {
    display: flex;
    gap: 16px;
}
.cjs .cjs-pro-signe {
    flex: none;
    font-size: 30px;
    line-height: 1.1;
}
.cjs .cjs-pro-item-titre {
    margin: 0 0 6px !important;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cjs-ink);
}
.cjs .cjs-pro-item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--cjs-ink-2);
}

.cjs-pro-mesure,
.cjs-pro-references {
    padding: 30px 26px;
    margin: 0 0 24px;
    text-align: center;
    background: var(--cjs-wash);
    border-radius: 14px;
}
.cjs .cjs-pro-mesure h2,
.cjs .cjs-pro-references h2 {
    margin: 0 0 14px !important;
    font-size: 22px;
    font-weight: 700;
    color: var(--cjs-ink);
}
.cjs .cjs-pro-mesure p {
    margin: 0 auto 18px;
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cjs-ink-2);
}
.cjs-pro-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px 40px;
}
.cjs .cjs-pro-logos img {
    max-width: 130px;
    height: auto;
    opacity: .75;
}

/* ==========================================================================
   13. Tuiles reprises d'un ancien bloc (page Reparation Mac)
   ========================================================================== */

.cjs-tuiles-zone {
    padding: 30px 0 6px;
}
.cjs .cjs-tuiles .container {
    max-width: none;
    padding: 0;
}
.cjs .cjs-tuiles .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}
@media (min-width: 760px) {
    .cjs .cjs-tuiles .row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
}
.cjs .cjs-tuiles [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}
.cjs .cjs-tuiles .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 20px 16px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 13px;
    font-size: 14.5px;
    line-height: 1.4;
    text-align: center;
    color: var(--cjs-ink);
    transition: border-color .15s ease, transform .15s ease;
}
.cjs .cjs-tuiles a {
    text-decoration: none;
    color: inherit;
}
.cjs .cjs-tuiles a:hover .box {
    border-color: var(--cjs-violet);
    transform: translateY(-2px);
}
.cjs .cjs-tuiles .box span {
    font-size: 28px;
    line-height: 1;
}
.cjs .cjs-tuiles br {
    display: none;
}

/* ==========================================================================
   14. Formulaires du theme (etiquette d'envoi)
   ========================================================================== */

.cjs-formulaire {
    max-width: 760px;
    padding: 24px 26px;
    margin: 0 0 30px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 14px;
}
.cjs-formulaire-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 18px;
    margin: 0 0 20px;
}
@media (min-width: 620px) {
    .cjs-formulaire-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cjs-champ-large {
        grid-column: span 2;
    }
}
.cjs .cjs-champ {
    margin: 0;
}
.cjs .cjs-champ label {
    display: block;
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cjs-ink-2);
}
.cjs .cjs-champ input {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid var(--cjs-line);
    border-radius: 9px;
    background: var(--cjs-paper);
    color: var(--cjs-ink);
    font-size: 15px;
    font-family: inherit;
}
.cjs .cjs-champ input:focus {
    outline: 0;
    border-color: var(--cjs-violet);
    box-shadow: 0 0 0 3px var(--cjs-violet-wash);
}
.cjs .cjs-requis {
    color: #a11228;
}
.cjs .cjs-facultatif {
    color: var(--cjs-ink-3);
    font-weight: 400;
}
.cjs .cjs-formulaire button {
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    background: var(--cjs-violet);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.cjs .cjs-formulaire button:hover {
    background: var(--cjs-violet-deep);
}

/* ==========================================================================
   15. Boutiques : carte et fiche
   ========================================================================== */

.cjs-carte-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}
.cjs-carte-grille > * {
    min-width: 0;
}
@media (min-width: 900px) {
    .cjs-carte-grille {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 38px;
    }
}
.cjs-carte-zone {
    padding: 18px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 14px;
}
.cjs .cjs-carte-zone iframe,
.cjs .cjs-carte-zone .gmw-map-wrapper {
    width: 100% !important;
    border-radius: 10px;
    overflow: hidden;
}

.cjs-fiche-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    margin: 0 0 30px;
}
.cjs-fiche-grille > * {
    min-width: 0;
}
@media (min-width: 820px) {
    .cjs-fiche-grille {
        grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
        gap: 38px;
    }
}
.cjs .cjs-fiche-visuel img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}
.cjs-fiche-infos {
    padding: 22px 24px;
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 14px;
}
.cjs .cjs-fiche-titre {
    margin: 0 0 12px !important;
    font-size: 17px;
    font-weight: 700;
    color: var(--cjs-ink);
}
.cjs .cjs-horaires {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: 15px;
}
.cjs .cjs-horaires td {
    padding: 9px 0;
    border-bottom: 1px solid var(--cjs-line);
    color: var(--cjs-ink-2);
}
.cjs .cjs-horaires td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--cjs-ink);
}
.cjs .cjs-horaires tr:last-child td {
    border-bottom: 0;
}
.cjs .cjs-fiche-metro {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.cjs-fiche-plan {
    margin: 0 0 30px;
    border-radius: 14px;
    overflow: hidden;
}
.cjs .cjs-fiche-plan .map-container {
    min-height: 340px;
}

/* ==========================================================================
   16. Plan du site
   ========================================================================== */

.cjs .cjs-plan-texte ul {
    columns: 2;
    column-gap: 34px;
    padding-left: 20px;
}
@media (max-width: 700px) {
    .cjs .cjs-plan-texte ul {
        columns: 1;
    }
}
.cjs .cjs-plan-texte li {
    break-inside: avoid;
    margin-bottom: 5px;
}
.cjs .cjs-plan-texte ul ul {
    columns: 1;
    margin: 5px 0 10px;
}
.cjs .cjs-plan-texte h3 {
    margin: 22px 0 8px;
    font-size: 16.5px;
    color: var(--cjs-ink-2);
}

/* ==========================================================================
   LA FICHE DE BOUTIQUE

   Deux objets, pas six blocs à la file : la devanture — c'est à elle qu'on
   reconnaît la boutique en arrivant dans la rue — et une carte pratique qui
   rassemble tout ce dont on a besoin sur place. Sur écran large ils sont côte
   à côte, la carte reste visible pendant qu'on lit le texte ; sur téléphone
   ils s'empilent.

   Ces règles étaient ABSENTES de la feuille servie : les classes de la fiche
   n'existaient sur aucune des pages témoins de la famille « service », donc le
   constructeur les déclarait mortes. La fiche en ligne servait sa photo et ses
   horaires sans aucune mise en page. Les deux fiches sont désormais dans le
   relevé — voir FAMILLES dans outils/construire-css.js.
   ========================================================================== */

/* --- le titre ------------------------------------------------------------
   `.cjs-titre` n'était stylé que dans `.cjs-entete-mot`, une enveloppe que la
   fiche n'a pas : son h1 retombait sous « h1 { text-align: center } » du CSS
   additionnel. Surtitre et boutons à gauche, titre au milieu. */

.cjs-boutique-fiche .cjs-titre {
    margin: 0 0 12px !important;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    font-size: clamp(27px, 4.2vw, 40px);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--cjs-ink);
    text-wrap: balance;
}

/* --- l'état d'ouverture, dans l'accroche --------------------------------- */

.cjs-boutique-fiche .cjb-etat {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0 0;
    padding: 7px 14px 7px 11px;
    border-radius: 999px;
    font-size: 14.5px;
    line-height: 1.3;
    color: var(--cjs-ink-2);
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
}
.cjs-boutique-fiche .cjb-etat b {
    color: var(--cjs-ink);
    font-weight: 600;
}
.cjs-boutique-fiche .cjb-pastille {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: #b3261e;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .13);
}
.cjs-boutique-fiche .est-ouvert .cjb-pastille {
    background: #1a7f4b;
    box-shadow: 0 0 0 3px rgba(26, 127, 75, .15);
}

/* --- la charpente du corps ----------------------------------------------- */

.cjb-corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
@media (min-width: 940px) {
    .cjb-corps {
        /* La devanture prend la place ; la carte pratique garde une largeur
           fixe, celle d'une colonne de lecture courte. */
        grid-template-columns: minmax(0, 1fr) 336px;
        gap: 40px;
    }
    .cjb-pratique {
        position: sticky;
        top: 22px;
    }
}

/* --- la devanture --------------------------------------------------------
   L'image faisait 560 x 560, servie telle quelle, sans cadre ni proportion :
   un carré posé au milieu de la page. Elle devient un vrai visuel, cadré en
   4/3 et légendé. */

.cjs-boutique-fiche .cjb-photo {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--cjs-wash);
    border: 1px solid var(--cjs-line);
}
.cjs-boutique-fiche .cjb-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}
.cjs-boutique-fiche .cjb-photo figcaption {
    padding: 12px 18px 14px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--cjs-ink-3);
    background: var(--cjs-paper);
    border-top: 1px solid var(--cjs-line);
}

/* --- la carte pratique ---------------------------------------------------
   Un seul objet, avec des filets internes : adresse, horaires, accès et
   téléphone répondent tous à la même question, « comment je viens ». */

.cjb-pratique {
    background: var(--cjs-paper);
    border: 1px solid var(--cjs-line);
    border-radius: 18px;
    overflow: hidden;
}
.cjb-bloc {
    padding: 18px 20px;
    border-bottom: 1px solid var(--cjs-line);
}
.cjb-bloc:last-child {
    border-bottom: 0;
}

.cjs-boutique-fiche .cjb-label {
    margin: 0 0 7px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cjs-ink-3);
}
.cjs-boutique-fiche .cjb-valeur {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--cjs-ink);
}
.cjs-boutique-fiche .cjb-tel {
    color: var(--cjs-ink);
    text-decoration: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cjs-boutique-fiche .cjb-tel:hover {
    color: var(--cjs-violet-deep);
}
.cjs-boutique-fiche .cjb-lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 9px 0 0;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--cjs-violet-deep);
    text-decoration: none;
}
.cjs-boutique-fiche .cjb-lien:hover,
.cjs-boutique-fiche .cjb-lien:focus-visible {
    text-decoration: underline;
}

/* --- les horaires --------------------------------------------------------
   La question urgente est « c'est ouvert maintenant ? ». Elle est en clair.
   La semaine attend derrière un dépliant natif, sans une ligne de script. */

.cjs-boutique-fiche .cjb-jour {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 16px;
    color: var(--cjs-ink-2);
}
.cjs-boutique-fiche .cjb-jour b {
    color: var(--cjs-ink);
    font-weight: 600;
}
.cjs-boutique-fiche .cjb-jour-plage {
    margin: 5px 0 0 18px;
    font-size: 14.5px;
    color: var(--cjs-ink-2);
    font-variant-numeric: tabular-nums;
}

.cjs-boutique-fiche .cjb-repli {
    margin: 12px 0 0;
}
.cjs-boutique-fiche .cjb-repli > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--cjs-violet-deep);
}
.cjs-boutique-fiche .cjb-repli > summary::-webkit-details-marker {
    display: none;
}
.cjs-boutique-fiche .cjb-repli > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.cjs-boutique-fiche .cjb-repli[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}
.cjs-boutique-fiche .cjb-repli > summary:focus-visible {
    outline: 2px solid var(--cjs-violet);
    outline-offset: 3px;
    border-radius: 3px;
}

.cjs-boutique-fiche .cjb-semaine {
    width: 100%;
    margin: 12px 0 0;
    border-collapse: collapse;
    font-size: 14.5px;
}
.cjs-boutique-fiche .cjb-semaine th,
.cjs-boutique-fiche .cjb-semaine td {
    padding: 7px 0;
    border-bottom: 1px solid var(--cjs-line);
    color: var(--cjs-ink-2);
    font-weight: 400;
    text-align: left;
}
.cjs-boutique-fiche .cjb-semaine td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cjs-boutique-fiche .cjb-semaine tr:last-child th,
.cjs-boutique-fiche .cjb-semaine tr:last-child td {
    border-bottom: 0;
}
.cjs-boutique-fiche .cjb-semaine tr.est-aujourdhui th,
.cjs-boutique-fiche .cjb-semaine tr.est-aujourdhui td {
    color: var(--cjs-ink);
    font-weight: 600;
}
.cjs-boutique-fiche .cjb-semaine tr.est-aujourdhui th {
    position: relative;
    padding-left: 13px;
}
.cjs-boutique-fiche .cjb-semaine tr.est-aujourdhui th::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--cjs-violet);
}
.cjs-boutique-fiche .cjb-semaine .cjb-ferme {
    color: var(--cjs-ink-3);
}

/* --- le plan des stations ------------------------------------------------
   343 x 79 posés nus dans la page : on aurait dit une image tombée là. Sur
   son propre fond, centrée, elle redevient un schéma. */

.cjb-metro {
    display: flex;
    justify-content: center;
    padding: 12px;
    border-radius: 12px;
    background: var(--cjs-wash);
}
.cjs-boutique-fiche .cjb-metro img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

/* --- l'autre boutique ----------------------------------------------------
   Elle remplace le bandeau `includes/stores.php`, qui répétait la boutique
   qu'on est en train de lire et affichait ses horaires en dur. Ici ils
   viennent de la même source que le reste. */

.cjs-boutique-fiche .cjb-autre {
    margin: 34px 0 0;
    padding: 22px 24px;
    border: 1px solid var(--cjs-line);
    border-radius: 18px;
    background: var(--cjs-wash);
}
.cjs-boutique-fiche .cjb-autre .cjs-fiche-titre,
.cjs-boutique-fiche .cjb-autre-titre {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 600;
    color: var(--cjs-ink);
}
.cjs-boutique-fiche .cjb-autre-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 16px;
}
.cjs-boutique-fiche .cjb-autre-liste li {
    display: grid;
    gap: 3px;
}
.cjs-boutique-fiche .cjb-autre-liste a {
    font-weight: 600;
    font-size: 16.5px;
    color: var(--cjs-ink);
    text-decoration: none;
}
.cjs-boutique-fiche .cjb-autre-liste a:hover,
.cjs-boutique-fiche .cjb-autre-liste a:focus-visible {
    color: var(--cjs-violet-deep);
    text-decoration: underline;
}
.cjs-boutique-fiche .cjb-autre-liste sup {
    font-size: .68em;
}
.cjs-boutique-fiche .cjb-autre-adresse {
    font-size: 14.5px;
    color: var(--cjs-ink-2);
}
.cjs-boutique-fiche .cjb-autre-etat {
    font-size: 13.5px;
    color: var(--cjs-ink-3);
}
.cjs-boutique-fiche .cjb-autre-etat.est-ouvert {
    color: var(--cjs-vert);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .cjs-boutique-fiche .cjb-repli > summary::after {
        transition: none;
    }
}

/* ==========================================================================
   Le plan du site (/plan-de-site)

   2 342 liens dans une colonne de 72 caractères : la page mesurait 90 391 px
   de haut, soit une centaine d'écrans. Ici la colonne de lecture s'efface et
   chaque liste se répartit sur deux, trois puis quatre colonnes selon la
   largeur. Le contenu — les listes que génère l'extension de plan de site —
   ne change pas. La classe `cjs-plan` est posée sur <body> par
   includes/service.php.
   ========================================================================== */

.cjs-plan .cjs-texte { max-width: none; }
.cjs-plan .cjs-texte h2 {
    margin-top: 34px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cjs-line);
}
.cjs-plan .cjs-texte ul {
    columns: 2;
    column-gap: 28px;
    margin: 0 0 8px;
    padding-left: 18px;
    font-size: 14.5px;
    line-height: 1.45;
}
.cjs-plan .cjs-texte ul ul {
    columns: auto;
    margin-top: 4px;
    padding-left: 16px;
}
.cjs-plan .cjs-texte li { margin: 0 0 5px; }
.cjs-plan .cjs-texte li::marker { color: var(--cjs-line); }
.cjs-plan .cjs-texte a { text-decoration: none; }
.cjs-plan .cjs-texte a:hover { text-decoration: underline; }
@media (min-width: 900px)  { .cjs-plan .cjs-texte ul { columns: 3; } }
@media (min-width: 1200px) { .cjs-plan .cjs-texte ul { columns: 4; } }


/* --- css/boutique.css (NON PURGÉ : voir NE_PAS_PURGER) --- */
/* ==========================================================================
   Éléments de boutique communs : grilles de produits, pagination et tri,
   champ de recherche, panier du bandeau, avis produit.

   Ces gabarits ont été repris sur la version courante de WooCommerce — le
   thème n'y avait ajouté que des classes Bootstrap. Tout l'habillage est ici,
   sans préfixe maison quand la classe WooCommerce suffit : ces éléments
   apparaissent dans des contextes trop variés pour qu'on puisse compter sur
   un conteneur commun.
   ========================================================================== */

.woocommerce,
.woocommerce-page {
    --cjb-violet: #8f15ff;
    --cjb-violet-deep: #7211cc;
    --cjb-violet-wash: #f4eaff;
    --cjb-ink: #0e0e13;
    --cjb-ink-2: #3a3646;
    --cjb-ink-3: #7d7789;
    --cjb-line: #e6e3ee;
    --cjb-paper: #fff;
    --cjb-wash: #f7f6fa;
    --cjb-vert: #0d6b52;
    --cjb-vert-wash: #e6f4ef;
    --cjb-rouge: #a11228;
}

/* ==========================================================================
   1. La grille de produits
   ========================================================================== */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
@media (min-width: 760px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
}
@media (min-width: 1060px) {
    .woocommerce ul.products.columns-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none;   /* neutralise le clearfix historique */
}

.woocommerce ul.products li.product {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    padding: 0;
    background: var(--cjb-paper);
    border: 1px solid var(--cjb-line);
    border-radius: 13px;
    overflow: hidden;
    text-align: left;
    transition: border-color .15s ease, transform .15s ease;
}
.woocommerce ul.products li.product:hover {
    border-color: var(--cjb-violet);
    transform: translateY(-2px);
}
.woocommerce ul.products li.product a img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0;
    padding: 16px;
    background: var(--cjb-wash);
    mix-blend-mode: multiply;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0;
    padding: 13px 14px 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cjb-ink);
}
.woocommerce ul.products li.product .price {
    margin: 7px 0 0;
    padding: 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cjb-ink);
    font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .price del {
    margin-right: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cjb-ink-3);
}
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    color: var(--cjb-violet-deep);
}
.woocommerce ul.products li.product .button {
    margin: 12px 14px 14px;
    padding: 0 16px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cjb-violet);
    border-radius: 9px;
    background: var(--cjb-paper);
    color: var(--cjb-violet-deep);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.woocommerce ul.products li.product .button:hover {
    background: var(--cjb-violet-wash);
}
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 4px 11px;
    border-radius: 20px;
    background: var(--cjb-violet);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.woocommerce .woocommerce-info.woocommerce-no-products-found {
    margin: 0;
}

/* ==========================================================================
   2. Barre de résultats et tri
   ========================================================================== */

.woocommerce .woocommerce-result-count {
    margin: 0;
    font-size: 14.5px;
    color: var(--cjb-ink-3);
    font-variant-numeric: tabular-nums;
}
.woocommerce .woocommerce-ordering {
    margin: 0;
}
.woocommerce .woocommerce-ordering select {
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--cjb-line);
    border-radius: 9px;
    background: var(--cjb-paper);
    color: var(--cjb-ink);
    font-size: 14.5px;
    font-family: inherit;
}
.woocommerce .woocommerce-ordering select:focus {
    outline: 0;
    border-color: var(--cjb-violet);
    box-shadow: 0 0 0 3px var(--cjb-violet-wash);
}

/* ==========================================================================
   3. Pagination
   ========================================================================== */

.woocommerce nav.woocommerce-pagination {
    margin: 0 0 30px;
    text-align: left;
}
.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li {
    margin: 0;
    border: 0;
    overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--cjb-line);
    border-radius: 10px;
    background: var(--cjb-paper);
    color: var(--cjb-ink-2);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--cjb-paper);
    border-color: var(--cjb-violet);
    color: var(--cjb-violet-deep);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--cjb-violet);
    border-color: var(--cjb-violet);
    color: #fff;
}

/* ==========================================================================
   4. Le champ de recherche produit
   ========================================================================== */

.woocommerce-product-search {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 18px;
}
.woocommerce-product-search .search-field {
    flex: 1 1 200px;
    min-width: 0;
    height: 46px;
    padding: 0 13px;
    border: 1px solid var(--cjb-line);
    border-radius: 10px;
    background: #fff;
    color: #0e0e13;
    font-size: 15px;
    font-family: inherit;
}
.woocommerce-product-search .search-field:focus {
    outline: 0;
    border-color: #8f15ff;
    box-shadow: 0 0 0 3px #f4eaff;
}
.woocommerce-product-search button[type="submit"] {
    flex: none;
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: #8f15ff;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.woocommerce-product-search button[type="submit"]:hover {
    background: #7211cc;
}

/* ==========================================================================
   5. Le panier du bandeau
   ========================================================================== */

.widget_shopping_cart_content {
    font-size: 14.5px;
    color: var(--cjb-ink-2);
}
.woocommerce ul.cart_list,
.woocommerce ul.product_list_widget {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    max-height: 340px;
    overflow-y: auto;
}
.woocommerce ul.cart_list li,
.woocommerce ul.product_list_widget li {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid var(--cjb-line);
}
.woocommerce ul.cart_list li:last-child,
.woocommerce ul.product_list_widget li:last-child {
    border-bottom: 0;
}
.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img {
    grid-column: 1;
    width: 52px;
    height: 52px;
    margin: 0;
    float: none;
    object-fit: contain;
    background: var(--cjb-wash);
    border-radius: 8px;
    mix-blend-mode: multiply;
}
.woocommerce ul.cart_list li a:not(.remove),
.woocommerce ul.product_list_widget li a:not(.remove) {
    grid-column: 2;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cjb-ink);
    text-decoration: none;
}
.woocommerce ul.cart_list li .quantity {
    grid-column: 2;
    font-size: 13.5px;
    color: var(--cjb-ink-3);
    font-variant-numeric: tabular-nums;
}
.woocommerce ul.cart_list li a.remove,
.woocommerce ul.product_list_widget li a.remove {
    grid-column: 3;
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--cjb-wash);
    color: var(--cjb-ink-3);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
}
.woocommerce ul.cart_list li a.remove:hover {
    background: #fdecee;
    color: var(--cjb-rouge);
}
.woocommerce .widget_shopping_cart .total,
.woocommerce.widget_shopping_cart .total {
    margin: 0 0 14px;
    padding: 12px 0 0;
    border-top: 1px solid var(--cjb-line);
    font-size: 15px;
    color: var(--cjb-ink-2);
}
.woocommerce .widget_shopping_cart .total strong {
    color: var(--cjb-ink);
}
.woocommerce .widget_shopping_cart .total .amount {
    float: right;
    font-size: 18px;
    font-weight: 700;
    color: var(--cjb-ink);
    font-variant-numeric: tabular-nums;
}
.woocommerce .widget_shopping_cart .buttons {
    display: grid;
    gap: 9px;
    margin: 0;
}
.woocommerce .widget_shopping_cart .buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--cjb-violet);
    border-radius: 10px;
    background: var(--cjb-paper);
    color: var(--cjb-violet-deep);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.woocommerce .widget_shopping_cart .buttons a.checkout {
    background: var(--cjb-violet);
    color: #fff;
}
.woocommerce .widget_shopping_cart .buttons a:hover {
    background: var(--cjb-violet-wash);
    color: var(--cjb-violet-deep);
}
.woocommerce .widget_shopping_cart .buttons a.checkout:hover {
    background: var(--cjb-violet-deep);
    color: #fff;
}

/* ==========================================================================
   6. Les avis produit
   ========================================================================== */

#woo-comments,
#reviews {
    margin: 34px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--cjb-line);
}
#woo-comments .woocommerce-Reviews-title,
#reviews .woocommerce-Reviews-title {
    margin: 0 0 20px !important;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cjb-ink);
}
.woocommerce #reviews ol.commentlist,
.woocommerce #woo-comments ol.commentlist {
    display: grid;
    gap: 14px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}
.woocommerce #reviews ol.commentlist li,
.woocommerce #woo-comments ol.commentlist li {
    margin: 0;
    padding: 0;
}
.woocommerce #reviews ol.commentlist li .comment_container,
.woocommerce #woo-comments ol.commentlist li .comment_container {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 20px;
    background: var(--cjb-paper);
    border: 1px solid var(--cjb-line);
    border-radius: 13px;
}
.woocommerce #reviews ol.commentlist li img.avatar,
.woocommerce #woo-comments ol.commentlist li img.avatar {
    position: static;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cjb-wash);
}
.woocommerce #reviews .comment-text,
.woocommerce #woo-comments .comment-text {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}
.woocommerce #reviews .comment-text p.meta,
.woocommerce #woo-comments .comment-text p.meta {
    margin: 0 0 7px;
    font-size: 14px;
    color: var(--cjb-ink-3);
}
.woocommerce #reviews .comment-text p.meta strong {
    color: var(--cjb-ink);
    font-weight: 700;
}
.woocommerce .star-rating {
    color: #b8860b;
    letter-spacing: .06em;
}
.woocommerce #review_form_wrapper {
    padding: 22px 24px;
    background: var(--cjb-wash);
    border-radius: 13px;
}
.woocommerce #review_form #respond .comment-reply-title {
    display: block;
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--cjb-ink);
}
.woocommerce #review_form #respond textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid var(--cjb-line);
    border-radius: 10px;
    background: var(--cjb-paper);
    font-size: 15px;
    font-family: inherit;
    line-height: 1.55;
}
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid var(--cjb-line);
    border-radius: 10px;
    background: var(--cjb-paper);
    font-size: 15px;
    font-family: inherit;
}
.woocommerce #review_form #respond .form-submit input[type="submit"] {
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--cjb-violet);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.woocommerce #review_form #respond .form-submit input[type="submit"]:hover {
    background: var(--cjb-violet-deep);
}

/* ==========================================================================
   7. Les messages de WooCommerce, partout
   ========================================================================== */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews {
    margin: 0 0 18px;
    padding: 13px 16px 13px 18px;
    border: 1px solid #e6e3ee;
    border-left: 3px solid #8f15ff;
    border-radius: 10px;
    background: #fff;
    color: #3a3646;
    font-size: 14.5px;
    line-height: 1.55;
    list-style: none;
}
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
    content: none;
}
.woocommerce-message {
    border-left-color: #0d6b52;
    background: #e6f4ef;
    color: #0d6b52;
}
.woocommerce-error {
    border-left-color: #a11228;
    background: #fdecee;
    color: #a11228;
}
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
    margin: 0 0 5px;
}
.woocommerce-error li:last-child,
.woocommerce-message li:last-child {
    margin-bottom: 0;
}
.woocommerce-error a,
.woocommerce-info a,
.woocommerce-message a {
    color: inherit;
    font-weight: 600;
}
.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message .button {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-left: 10px;
    padding: 0 14px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}


@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product {
        transition: none;
    }
}

/* --- css/commun-v2.css (NON PURGÉ : voir NE_PAS_PURGER) --- */
/* ==========================================================================
   Gabarits 2.0 — le socle commun (15/09/2026)

   Même langage que le header, le footer, l'accueil et le blog 2.0, étendu
   à tous les autres gabarits : pages de service, fiches de boutique, espace
   pro, 404, recherche, réparation (catégories et modèles), reconditionné et
   accessoires, pièces détachées, fiche produit, panier, commande, compte.

   Portée : body.cjx-g, posée par functions.php sur ces familles quand le
   filtre « cyberjay_gabarits_v2 » est vrai. Chaque famille ajoute sa propre
   feuille (css/<famille>-v2.css) par-dessus celle-ci.

   AUCUN LIEN, AUCUNE IMAGE, AUCUN TEXTE retiré ou changé : ces feuilles
   n'habillent que le balisage existant.

   CORRECTIF commun : tous les éléments collants de ces gabarits (sommaires et
   colonnes des pages de service, facettes des catalogues, galerie de la
   fiche produit, récapitulatif du panier, menu du compte) collaient entre
   12 et 24 px du haut. Depuis le header 2.0, l'îlot de navigation reste
   accroché en haut de l'écran : ils passaient dessous.
   ========================================================================== */

body.cjx-g {
    --cjx-violet: #8f15ff;
    --cjx-violet-fonce: #6a0fd1;
    --cjx-violet-10: #f4eeff;
    --cjx-violet-20: #e9ddff;
    --cjx-encre: #140d22;
    --cjx-texte: #1c1629;
    --cjx-texte-2: #5b5470;
    --cjx-filet: #e7dff5;
    --cjx-fond: #f7f5fb;
    --cjx-nuit: #0c0716;
    --cjx-colle: 100px;
    --cjx-scene:
        radial-gradient(45% 90% at 100% 0%, rgba(143, 21, 255, .14), transparent 70%),
        radial-gradient(40% 70% at 0% 100%, rgba(143, 21, 255, .08), transparent 70%),
        linear-gradient(180deg, #f6f1ff 0%, #fbf9fe 100%);
    --cjx-pcb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23b98cff' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 40h40l20 20h50l15-15h55M0 120h30l25-25h35M90 95v40l20 20h70M60 0v25l-15 15M140 0v30l20 20v60M20 180v-30l30-30h40M120 180v-20'/%3E%3Cg fill='%23b98cff' stroke='none'%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3Ccircle cx='110' cy='60' r='3'/%3E%3Ccircle cx='90' cy='95' r='3.5'/%3E%3Ccircle cx='160' cy='110' r='3'/%3E%3Ccircle cx='50' cy='120' r='3'/%3E%3Ccircle cx='120' cy='160' r='3'/%3E%3C/g%3E%3Cg stroke-width='1.6'%3E%3Crect x='128' y='70' width='18' height='12' rx='2'/%3E%3Crect x='66' y='140' width='14' height='10' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* Une rangée Bootstrap posée hors de tout conteneur, directement dans <main>
   (pages de modèle des pièces) : ses marges négatives faisaient déborder la
   page de 12 px à l'horizontale. Défaut antérieur à la refonte. */
body.cjx-g #main-content > .row { margin-left: 0; margin-right: 0; }

/* Le Customizer ombre toute image survolée : les cartes portent leur relief. */
body.cjx-g #main-content img:hover { box-shadow: none !important; }

@media (min-width: 1560px) {
    body.cjx-g #main-content > section > .container,
    body.cjx-g #main-content > div > .container { max-width: 1440px; }
}

/* ==========================================================================
   1. Collants : sous l'îlot du header
   ========================================================================== */

@media (min-width: 1000px) {
    body.cjx-g .cjs-cote { top: var(--cjx-colle); }
}
@media (min-width: 940px) {
    body.cjx-g .cjb-pratique { top: var(--cjx-colle); }
}
@media (min-width: 900px) {
    body.cjx-g .cjf-visuels { top: var(--cjx-colle); }
    body.cjx-g .cjm-menu { top: var(--cjx-colle); }
}
@media (min-width: 980px) {
    body.cjx-g .cjc-cote { top: var(--cjx-colle); }
}
body.cjx-g .cjo-agencement .cjo-filtres {
    top: var(--cjx-colle);
    max-height: calc(100vh - var(--cjx-colle) - 16px);
}
body.cjx-g :is(.cjs, .cjp, .cjo, .cjd, .cjf, .cjc, .cjm, .cjr) :is(h2, h3)[id] {
    scroll-margin-top: calc(var(--cjx-colle) + 12px);
}

/* ==========================================================================
   2. Boutons : des pilules
   style.css fixe .btn-primary et .button à 20 px d'arrondi, en !important.
   ========================================================================== */

body.cjx-g #main-content .btn-primary,
body.cjx-g #main-content a.button,
body.cjx-g #main-content button.button,
body.cjx-g #main-content input.button {
    border-radius: 999px !important;
    transition: background .2s, transform .2s, box-shadow .2s;
}
body.cjx-g #main-content .btn-primary:hover,
body.cjx-g #main-content a.button:hover,
body.cjx-g #main-content button.button:hover {
    background: var(--cjx-violet-fonce) !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -16px rgba(143, 21, 255, .9);
}

/* ==========================================================================
   3. Fil d'Ariane WooCommerce en pastilles
   ========================================================================== */

body.cjx-g #main-content .woocommerce-breadcrumb a {
    color: var(--cjx-violet-fonce);
    font-weight: 600;
    text-decoration: none;
}
body.cjx-g #main-content .woocommerce-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   4. Messages WooCommerce
   ========================================================================== */

body.cjx-g .woocommerce-message,
body.cjx-g .woocommerce-info,
body.cjx-g .woocommerce-error {
    border-radius: 18px;
    border-top-width: 0 !important;
    box-shadow: inset 4px 0 0 var(--cjx-violet);
    background: var(--cjx-violet-10);
}
body.cjx-g .woocommerce-error { box-shadow: inset 4px 0 0 #c0264a; background: #fdecee; }

/* ==========================================================================
   5. Les quatre moyens de contact — bande « atelier »
   Le bloc #solutions sert aux pages de service, aux fiches de boutique et à
   l'espace pro : même habillage que sur l'accueil 2.0.
   ========================================================================== */

body.cjx-g #solutions.cjc-contacts {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 72px 0;
    background: var(--cjx-nuit);
}
body.cjx-g #solutions.cjc-contacts::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--cjx-pcb);
    background-size: 180px 180px;
    opacity: .3;
    -webkit-mask-image: radial-gradient(90% 100% at 20% 0%, #000 15%, transparent 75%);
    mask-image: radial-gradient(90% 100% at 20% 0%, #000 15%, transparent 75%);
}
body.cjx-g #solutions.cjc-contacts::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(45% 70% at 12% 0%, rgba(143, 21, 255, .36), transparent 70%),
        radial-gradient(40% 60% at 95% 100%, rgba(143, 21, 255, .24), transparent 70%);
}
body.cjx-g #solutions .cjc-contacts-grid { gap: 16px; }
body.cjx-g #solutions .cjc-contact-carte {
    gap: 16px;
    padding: 30px 18px 26px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    box-shadow: none;
    color: #cfc5e4;
    font-size: 15px;
    line-height: 1.55;
    transition: transform .3s, border-color .3s, box-shadow .3s;
}
body.cjx-g #solutions .cjc-contact-carte:hover {
    transform: translateY(-6px);
    border-color: rgba(168, 85, 247, .7);
    box-shadow: 0 30px 60px -30px rgba(143, 21, 255, .8);
}
body.cjx-g #solutions .cjc-contact-ic {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--cjx-violet);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(143, 21, 255, .18), 0 14px 28px -12px rgba(143, 21, 255, .9);
}
body.cjx-g #solutions.cjc-contacts .cjc-contact-carte a {
    display: inline-flex;
    margin-top: 10px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
body.cjx-g #solutions.cjc-contacts .cjc-contact-carte a:hover,
body.cjx-g #solutions.cjc-contacts .cjc-contact-carte a:focus-visible {
    background: var(--cjx-violet);
    border-color: var(--cjx-violet);
}
@media (max-width: 560px) {
    body.cjx-g #solutions.cjc-contacts { padding: 48px 0; }
    body.cjx-g #solutions .cjc-contacts-grid { gap: 10px; }
    body.cjx-g #solutions .cjc-contact-carte { padding: 22px 10px 18px; border-radius: 20px; font-size: 13px; gap: 12px; }
    body.cjx-g #solutions .cjc-contact-ic { width: 48px; height: 48px; }
    body.cjx-g #solutions.cjc-contacts .cjc-contact-carte a { padding: 6px 12px; }
}

/* ==========================================================================
   6. Les boutiques en bas de page
   ========================================================================== */

body.cjx-g #stores {
    padding: 56px 0 48px !important;
    background: #fff !important;
}
body.cjx-g #stores .row { row-gap: 20px; }
body.cjx-g #stores .col-lg-6 img {
    display: block;
    width: 100%;
    border-radius: 26px;
}
body.cjx-g #stores .col-lg-6 .overlay {
    left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    border-radius: 26px;
    background: linear-gradient(90deg, rgba(12, 7, 22, 0) 22%, rgba(12, 7, 22, .78) 48%, rgba(12, 7, 22, .92) 100%);
}
body.cjx-g #stores .col-lg-6 .h2 { font-size: 22px; font-weight: 700; line-height: 1.2; }
body.cjx-g #stores .col-lg-6 p { color: #d8cfee; font-size: 14px; line-height: 1.55; }
body.cjx-g #stores .col-lg-6 a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--cjx-violet);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s, transform .2s;
}
body.cjx-g #stores .col-lg-6 a:hover { background: var(--cjx-violet-fonce); transform: translateY(-2px); }
body.cjx-g #stores .col-lg-6 a i { top: 0; font-size: 18px; line-height: 1; }
@media (max-width: 1400px) {
    body.cjx-g #stores .col-lg-6 .h2 { font-size: 18px; }
    body.cjx-g #stores .col-lg-6 p { font-size: 13px; }
}
@media (max-width: 767px) {
    body.cjx-g #stores .col-lg-6 { margin-bottom: 0; }
    body.cjx-g #stores .col-lg-6 img { min-height: 220px; object-fit: cover; border-radius: 22px; }
    body.cjx-g #stores .col-lg-6 .overlay {
        align-items: flex-end;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(12, 7, 22, 0) 0%, rgba(12, 7, 22, .35) 35%, rgba(12, 7, 22, .9) 80%);
    }
    body.cjx-g #stores .col-lg-6 .h2 { font-size: 17px; }
}

/* ==========================================================================
   7. LA PROSE — règle générale des textes longs
   ==========================================================================

   LE PROBLÈME, MESURÉ. Les longs textes de bas de page sont saisis dans
   l'éditeur : ils contiennent des tableaux, des images, des liens. Rien ne
   les empêchait de dépasser la largeur du téléphone. Relevés au banc en
   390 px : un tableau de 632 px sur « Réparation MacBook », 722 px sur la
   page MacBook Pro M5, 406 px dans la description d'une fiche produit. La
   page partait alors en travers, exactement ce que décrit le client.

   LA RÈGLE. Une seule, appliquée à toutes les zones de texte long du site,
   quel que soit le gabarit :

     — une largeur de ligne lisible (68 caractères) et une bulle qui la
       contient, avec ses marges et son rembourrage ;
     — tout ce qui ne sait pas rétrécir — tableau, image, cadre, code —
       est borné à la largeur disponible, et défile à l'intérieur de la
       bulle plutôt que de pousser la page ;
     — les mots insécables (URL, références « A3434 ») coupent au lieu
       de percer.

   Aucun texte, aucun lien, aucune image n'est retiré : la règle ne fait que
   les contenir.

   La liste ci-dessous énumère les zones éditoriales des gabarits 2.0. Une
   nouvelle zone n'a qu'à porter la classe .cjx-prose pour en hériter.
   ========================================================================== */

/* Le calage en largeur ne vaut QUE pour les zones qui remplissent seules
   leur bande. Mesuré au banc : appliqué à .cjs-texte, qui est un élément
   flexible partagé avec une illustration, il le faisait se dimensionner sur
   son contenu — la page /nettoyage partait alors 163 px trop loin. Cette
   zone-là hérite donc de la contenance, pas de la bulle. */
body.cjx-g :is(#edito-text, .cjf-description-corps, .cjx-prose) {
    max-width: 820px;
    margin-inline: auto;
}
body.cjx-g :is(#edito-text, .cjd-edito, .cjf-description-corps, .cjs-texte, .cjx-prose) {
    overflow-wrap: break-word;
}

/* La bulle. Dans la bande blanche elle se pose sur le fond doux, dans la
   bande grise elle est blanche : le texte garde toujours son cadre. */
body.cjx-g :is(#edito-white, #edito-grey).cjp-edito #edito-text {
    padding: 34px 38px;
    border: 1px solid var(--cjx-filet);
    border-radius: 28px;
    background: var(--cjx-fond);
}
body.cjx-g #edito-grey.cjp-edito #edito-text { background: #fff; }

/* Longueur de ligne. Le titre respire un peu plus large que le corps. */
body.cjx-g :is(#edito-text, .cjd-edito, .cjf-description-corps, .cjs-texte, .cjx-prose) :is(p, li) {
    max-width: 68ch;
}
body.cjx-g :is(#edito-text, .cjd-edito, .cjf-description-corps, .cjs-texte, .cjx-prose) :is(h2, h3, h4) {
    max-width: 34ch;
    text-wrap: balance;
}

/* Ce qui ne sait pas rétrécir. Le tableau devient une boîte qui défile :
   il reste entier, mais il ne pousse plus la page. */
body.cjx-g :is(#edito-text, .cjd-edito, .cjf-description-corps, .cjs-texte, .cjx-prose) table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Sauf ceux que le thème enferme déjà dans .cjs-tableau : là, c'est
   l'enveloppe qui défile, et le tableau doit rester un tableau. */
body.cjx-g :is(#edito-text, .cjd-edito, .cjf-description-corps, .cjs-texte, .cjx-prose) .cjs-tableau table {
    display: table;
}
body.cjx-g :is(#edito-text, .cjd-edito, .cjf-description-corps, .cjs-texte, .cjx-prose) .cjs-tableau {
    max-width: 100%;
    overflow-x: auto;
}
body.cjx-g :is(#edito-text, .cjd-edito, .cjf-description-corps, .cjs-texte, .cjx-prose) :is(img, svg, video, iframe, embed, object) {
    max-width: 100% !important;
    height: auto;
}
body.cjx-g :is(#edito-text, .cjd-edito, .cjf-description-corps, .cjs-texte, .cjx-prose) :is(pre, code) {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
}

@media (max-width: 767px) {
    /* Sur téléphone la bulle garde ses seize pixels de gouttière et perd
       son rembourrage de bureau, qui mangerait la moitié de la largeur. */
    body.cjx-g :is(#edito-white, #edito-grey).cjp-edito #edito-text {
        padding: 22px 18px;
        border-radius: 22px;
    }
    body.cjx-g :is(#edito-text, .cjd-edito, .cjf-description-corps, .cjs-texte, .cjx-prose) :is(p, li) {
        max-width: none;
    }
}

/* ==========================================================================
   8. Les bulles d'en-tête — titres centrés
   ==========================================================================
   Demande du client : « définir une règle générale pour que les titres et
   textes de ces bulles soient systématiquement centrés ». Le texte était
   calé à gauche de sa colonne et s'y perdait, la moitié droite restant
   vide. Il est désormais centré dans sa colonne, sur toutes les pages qui
   emploient cette bulle. L'illustration, elle, ne bouge pas.
   ========================================================================== */

body.cjx-g #top-banner.cjp-hero .cjp-hero-txt {
    align-items: center;
    text-align: center;
}
body.cjx-g #top-banner.cjp-hero .cjp-hero-txt h1 { text-wrap: balance; }
body.cjx-g #top-banner.cjp-hero .cjp-hero-txt :is(.cjp-cta, .cjp-trust) {
    justify-content: center;
}

/* ==========================================================================
   9. Mouvement réduit
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    body.cjx-g #main-content * { transition: none !important; }
    body.cjx-g #main-content *:hover { transform: none !important; }
}


/* --- css/caisse-v2.css (NON PURGÉ : voir NE_PAS_PURGER) --- */
/* ==========================================================================
   Panier, commande, confirmation 2.0 (15/09/2026)
   Balisage : woocommerce/cart, woocommerce/checkout, includes/caisse.php.
   Portée : body.cjx-g .cjc-caisse. Aucun texte, lien ni image touché ; les
   champs, boutons et identifiants dont le paiement dépend restent en place.
   ========================================================================== */

/* --- les étapes : une barre en pilule ------------------------------------ */

body.cjx-g .cjc-caisse ol.cjc-etapes {
    padding: 8px;
    border: 1px solid var(--cjx-filet);
    border-radius: 999px;
    background: var(--cjx-fond);
}
body.cjx-g .cjc-caisse .cjc-etape-courante .cjc-etape-num {
    background: var(--cjx-violet);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(143, 21, 255, .16);
}
body.cjx-g .cjc-caisse .cjc-etape-courante .cjc-etape-nom { color: var(--cjx-encre); font-weight: 700; }

/* --- les cartes d'article du panier -------------------------------------- */

body.cjx-g .cjc-caisse .woocommerce-cart-form__cart-item {
    border-color: var(--cjx-filet);
    border-radius: 22px;
    transition: border-color .2s, box-shadow .2s;
}
body.cjx-g .cjc-caisse .woocommerce-cart-form__cart-item:hover {
    border-color: var(--cjx-violet-20);
    box-shadow: 0 22px 40px -32px rgba(40, 10, 80, .45);
}
body.cjx-g .cjc-caisse .woocommerce-cart-form__cart-item img { border-radius: 14px; }
body.cjx-g .cjc-caisse td.actions { border-radius: 22px; }
body.cjx-g .cjc-caisse .quantity input.qty,
body.cjx-g .cjc-caisse #coupon_code,
body.cjx-g .cjc-caisse td.actions .button { border-radius: 999px; }
body.cjx-g .cjc-caisse td.product-remove a.remove { border-radius: 50%; }

/* --- le récapitulatif : la colonne collante ------------------------------ */

body.cjx-g .cjc-caisse .cart_totals,
body.cjx-g .cjc-caisse #order_review {
    border-color: var(--cjx-filet);
    border-radius: 26px;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(143, 21, 255, .09), transparent 70%),
        #fff;
    box-shadow: 0 30px 60px -44px rgba(40, 10, 80, .5);
}

/* --- boutons ------------------------------------------------------------- */

body.cjx-g .cjc-caisse .cjc-bouton,
body.cjx-g .cjc-caisse a.checkout-button,
body.cjx-g .cjc-caisse #place_order {
    min-height: 56px;
    border-radius: 999px !important;
    font-weight: 700;
    box-shadow: 0 18px 36px -18px rgba(143, 21, 255, .95);
    transition: background .2s, transform .2s, box-shadow .2s;
}
body.cjx-g .cjc-caisse .cjc-bouton:hover,
body.cjx-g .cjc-caisse a.checkout-button:hover,
body.cjx-g .cjc-caisse #place_order:hover { transform: translateY(-2px); }
body.cjx-g .cjc-caisse .cjc-bouton-clair { box-shadow: none; }
body.cjx-g .cjc-caisse form.checkout_coupon .button,
body.cjx-g .cjc-caisse form.woocommerce-form-login .button,
body.cjx-g .cjc-caisse .btn-outline-primary { border-radius: 999px; }

/* --- formulaires --------------------------------------------------------- */

body.cjx-g .cjc-caisse .cjc-bloc {
    border-color: var(--cjx-filet);
    border-radius: 26px;
}
body.cjx-g .cjc-caisse .form-row input.input-text,
body.cjx-g .cjc-caisse .form-row textarea,
body.cjx-g .cjc-caisse .form-row select,
body.cjx-g .cjc-caisse .select2-selection--single {
    border-radius: 14px;
    transition: border-color .15s, box-shadow .15s;
}
body.cjx-g .cjc-caisse .form-row input.input-text:focus,
body.cjx-g .cjc-caisse .form-row textarea:focus,
body.cjx-g .cjc-caisse .form-row select:focus {
    border-color: var(--cjx-violet);
    box-shadow: 0 0 0 4px rgba(143, 21, 255, .12);
    outline: 0;
}
body.cjx-g .cjc-caisse #payment ul.payment_methods > li { border-radius: 18px; }
body.cjx-g .cjc-caisse #payment .payment_box { border-radius: 14px; }
body.cjx-g .cjc-caisse form.checkout_coupon,
body.cjx-g .cjc-caisse form.woocommerce-form-login,
body.cjx-g .cjc-caisse .card { border-radius: 22px; }

/* --- aide, pistes, panier vide, confirmation ----------------------------- */

body.cjx-g .cjc-caisse .cjc-aide,
body.cjx-g .cjc-caisse .cjc-piste,
body.cjx-g .cjc-caisse .cjc-recap,
body.cjx-g .cjc-caisse .woocommerce-order-details,
body.cjx-g .cjc-caisse .woocommerce-customer-details { border-radius: 22px; }

body.cjx-g .cjc-caisse .cjc-vide-bloc,
body.cjx-g .cjc-caisse .cjc-succes {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: var(--cjx-filet);
    border-radius: 30px;
    background: var(--cjx-scene);
}
body.cjx-g .cjc-caisse .cjc-vide-bloc::before,
body.cjx-g .cjc-caisse .cjc-succes::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--cjx-pcb);
    background-size: 180px 180px;
    opacity: .14;
    -webkit-mask-image: radial-gradient(60% 100% at 100% 0%, #000 10%, transparent 70%);
    mask-image: radial-gradient(60% 100% at 100% 0%, #000 10%, transparent 70%);
}