/* FAMILLE « compte »
*
* 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/service.css, css/boutique.css, css/compte.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/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
tous les 120 caracteres environ (« …et fait monter
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 , forme des
questions-reponses saisies en paragraphe. Les cellules de tableau et les
blocs de contact (« Apeller un conseiller
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 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/compte.css (NON PURGÉ : voir NE_PAS_PURGER) --- */
/* ==========================================================================
Mon compte : tableau de bord, commandes, adresses, moyens de paiement,
connexion, mot de passe oublié.
Les gabarits sont ceux de WooCommerce, remis à leur version courante : le
thème n'y avait ajouté que des classes Bootstrap. Tout l'habillage est ici,
ce qui évite de refaire la dérive à la prochaine mise à jour du plugin.
Préfixe `cjm-` (mon compte).
========================================================================== */
.cjm {
--cjm-violet: #8f15ff;
--cjm-violet-deep: #7211cc;
--cjm-violet-wash: #f4eaff;
--cjm-ink: #0e0e13;
--cjm-ink-2: #3a3646;
--cjm-ink-3: #7d7789;
--cjm-line: #e6e3ee;
--cjm-paper: #fff;
--cjm-wash: #f7f6fa;
--cjm-vert: #0d6b52;
--cjm-vert-wash: #e6f4ef;
--cjm-rouge: #a11228;
--cjm-rouge-wash: #fdecee;
--cjm-ambre: #8a5a00;
--cjm-ambre-wash: #fdf1dc;
padding: 24px 0 40px;
color: var(--cjm-ink);
}
.cjm,
.cjm *,
.cjm *::before,
.cjm *::after {
box-sizing: border-box;
}
.cjm-large {
max-width: 1160px;
margin: 0 auto;
padding: 0 18px;
}
.cjm-agencement {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.cjm-agencement > * {
min-width: 0;
}
@media (min-width: 900px) {
.cjm-agencement {
grid-template-columns: 260px minmax(0, 1fr);
gap: 38px;
}
.cjm-menu {
position: sticky;
top: 22px;
}
}
/* ==========================================================================
1. La navigation
========================================================================== */
.cjm .cjm-menu ul {
margin: 0;
padding: 6px;
list-style: none;
background: var(--cjm-paper);
border: 1px solid var(--cjm-line);
border-radius: 13px;
}
.cjm .cjm-menu li {
margin: 0;
}
.cjm .cjm-menu a {
display: block;
padding: 11px 14px;
border-radius: 9px;
color: var(--cjm-ink-2);
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.cjm .cjm-menu a:hover,
.cjm .cjm-menu a:focus-visible {
background: var(--cjm-wash);
color: var(--cjm-ink);
}
.cjm .cjm-menu .is-active a {
background: var(--cjm-violet-wash);
color: var(--cjm-violet-deep);
font-weight: 600;
}
.cjm .cjm-menu .woocommerce-MyAccount-navigation-link--customer-logout a {
color: var(--cjm-ink-3);
}
/* ==========================================================================
2. Le contenu
========================================================================== */
.cjm-contenu {
padding: 24px 26px;
background: var(--cjm-paper);
border: 1px solid var(--cjm-line);
border-radius: 14px;
font-size: 16px;
line-height: 1.65;
color: var(--cjm-ink-2);
}
.cjm .cjm-contenu > p:first-child {
margin-top: 0;
}
.cjm .cjm-contenu h2,
.cjm .cjm-contenu h3,
.cjm .cjm-contenu legend {
margin: 26px 0 14px !important;
padding: 0;
font-size: 19px;
font-weight: 700;
letter-spacing: -.01em;
color: var(--cjm-ink);
}
.cjm .cjm-contenu > h2:first-child,
.cjm .cjm-contenu > h3:first-child {
margin-top: 0 !important;
}
.cjm .cjm-contenu p {
margin: 0 0 14px;
}
.cjm .cjm-contenu a:not(.button):not(.cjm-bouton) {
color: var(--cjm-violet-deep);
text-underline-offset: 2px;
}
.cjm .cjm-contenu mark {
background: var(--cjm-violet-wash);
color: inherit;
padding: 0 3px;
border-radius: 3px;
}
/* ==========================================================================
3. Les formulaires
========================================================================== */
.cjm .form-row,
.cjm .woocommerce-form-row {
margin: 0 0 14px;
padding: 0;
}
.cjm fieldset {
margin: 22px 0 0;
padding: 18px 20px;
border: 1px solid var(--cjm-line);
border-radius: 12px;
}
.cjm .form-row label,
.cjm .woocommerce-form-row label {
display: block;
margin: 0 0 6px;
font-size: 13.5px;
font-weight: 500;
color: var(--cjm-ink-2);
}
.cjm .required {
color: var(--cjm-rouge);
text-decoration: none;
border: 0;
}
.cjm input[type="text"],
.cjm input[type="email"],
.cjm input[type="tel"],
.cjm input[type="password"],
.cjm input[type="number"],
.cjm select,
.cjm textarea,
.cjm .select2-container .select2-selection--single {
width: 100%;
height: 46px;
padding: 0 13px;
border: 1px solid var(--cjm-line);
border-radius: 9px;
background: var(--cjm-paper);
color: var(--cjm-ink);
font-size: 15px;
font-family: inherit;
transition: border-color .15s ease, box-shadow .15s ease;
}
.cjm textarea {
height: auto;
min-height: 110px;
padding: 11px 13px;
line-height: 1.55;
resize: vertical;
}
.cjm input:focus,
.cjm select:focus,
.cjm textarea:focus {
outline: 0;
border-color: var(--cjm-violet);
box-shadow: 0 0 0 3px var(--cjm-violet-wash);
}
.cjm .woocommerce-form__label-for-checkbox {
display: flex;
align-items: center;
gap: 9px;
font-size: 14.5px;
font-weight: 500;
}
.cjm input[type="checkbox"],
.cjm input[type="radio"] {
width: 18px;
height: 18px;
margin: 0;
flex: none;
accent-color: var(--cjm-violet);
}
.cjm .woocommerce-password-hint,
.cjm em,
.cjm .description {
display: block;
margin-top: 5px;
font-size: 13px;
font-style: normal;
color: var(--cjm-ink-3);
}
.cjm .woocommerce-password-strength {
margin-top: 6px;
padding: 5px 10px;
border-radius: 7px;
font-size: 13px;
font-weight: 600;
text-align: center;
}
.cjm .woocommerce-password-strength.strong { background: var(--cjm-vert-wash); color: var(--cjm-vert); }
.cjm .woocommerce-password-strength.good { background: var(--cjm-violet-wash); color: var(--cjm-violet-deep); }
.cjm .woocommerce-password-strength.short,
.cjm .woocommerce-password-strength.bad { background: var(--cjm-ambre-wash); color: var(--cjm-ambre); }
/* --- les boutons -------------------------------------------------------- */
.cjm .button,
.cjm button[type="submit"],
.cjm .woocommerce-Button,
.cjm .cjm-bouton {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 20px;
border: 1px solid var(--cjm-violet);
border-radius: 10px;
background: var(--cjm-violet);
color: #fff;
font-size: 15px;
font-weight: 600;
font-family: inherit;
text-decoration: none;
cursor: pointer;
transition: background .15s ease;
}
.cjm .button:hover,
.cjm button[type="submit"]:hover,
.cjm .woocommerce-Button:hover {
background: var(--cjm-violet-deep);
border-color: var(--cjm-violet-deep);
color: #fff;
}
/* Les actions secondaires des tableaux : voir, annuler, télécharger. */
.cjm td .button,
.cjm .woocommerce-orders-table .button,
.cjm .woocommerce-MyAccount-content .button.view {
min-height: 38px;
padding: 0 14px;
background: var(--cjm-paper);
color: var(--cjm-violet-deep);
font-size: 14px;
}
.cjm td .button:hover,
.cjm .woocommerce-orders-table .button:hover {
background: var(--cjm-violet-wash);
color: var(--cjm-violet-deep);
}
/* ==========================================================================
4. Les tableaux : commandes, téléchargements, moyens de paiement
========================================================================== */
.cjm table.shop_table,
.cjm .woocommerce-orders-table,
.cjm .woocommerce-table {
width: 100%;
margin: 0 0 22px;
border: 1px solid var(--cjm-line);
border-radius: 12px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
font-size: 15px;
}
.cjm table.shop_table th,
.cjm table.shop_table td,
.cjm .woocommerce-table th,
.cjm .woocommerce-table td {
padding: 12px 14px;
border: 0;
border-bottom: 1px solid var(--cjm-line);
text-align: left;
vertical-align: middle;
}
.cjm table.shop_table thead th,
.cjm .woocommerce-table thead th {
background: var(--cjm-wash);
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--cjm-ink-3);
}
.cjm table.shop_table tbody tr:last-child td,
.cjm .woocommerce-table tbody tr:last-child td {
border-bottom: 0;
}
.cjm table.shop_table tfoot th,
.cjm table.shop_table tfoot td {
background: var(--cjm-wash);
font-weight: 600;
}
.cjm .woocommerce-orders-table__cell-order-total,
.cjm .woocommerce-orders-table__cell-order-number {
font-variant-numeric: tabular-nums;
}
/* Sur téléphone, un tableau de commandes à cinq colonnes ne tient pas :
WooCommerce pose des `data-title`, on s'en sert pour l'empiler. */
@media (max-width: 700px) {
.cjm table.shop_table,
.cjm table.shop_table tbody,
.cjm table.shop_table tr,
.cjm table.shop_table td {
display: block;
width: 100%;
}
.cjm table.shop_table thead {
display: none;
}
.cjm table.shop_table tbody tr {
padding: 6px 0;
border-bottom: 1px solid var(--cjm-line);
}
.cjm table.shop_table tbody tr:last-child {
border-bottom: 0;
}
.cjm table.shop_table td {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
border-bottom: 0;
padding: 7px 14px;
text-align: right;
}
.cjm table.shop_table td::before {
content: attr(data-title);
flex: none;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--cjm-ink-3);
text-align: left;
}
}
/* --- l'état d'une commande ---------------------------------------------- */
.cjm .woocommerce-orders-table__cell-order-status {
font-weight: 600;
}
/* --- les adresses -------------------------------------------------------- */
.cjm .woocommerce-Addresses {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
margin: 0;
}
@media (min-width: 700px) {
.cjm .woocommerce-Addresses {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.cjm .woocommerce-Address {
width: auto !important;
float: none !important;
padding: 18px 20px;
background: var(--cjm-wash);
border: 1px solid var(--cjm-line);
border-radius: 12px;
}
.cjm .woocommerce-Address-title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.cjm .woocommerce-Address-title h2,
.cjm .woocommerce-Address-title h3 {
margin: 0 !important;
font-size: 16.5px;
}
.cjm .woocommerce-Address address {
margin: 0;
font-style: normal;
font-size: 15px;
line-height: 1.6;
color: var(--cjm-ink-2);
}
.cjm .woocommerce-Address .edit {
font-size: 14px;
font-weight: 600;
color: var(--cjm-violet-deep);
text-decoration: none;
}
/* ==========================================================================
5. Connexion, inscription, mot de passe
========================================================================== */
.cjm-portail {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
align-items: start;
}
@media (min-width: 860px) {
.cjm-portail {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
}
}
.cjm .woocommerce-form-login,
.cjm .woocommerce-form-register,
.cjm .woocommerce-ResetPassword {
margin: 0;
padding: 24px 26px;
background: var(--cjm-paper);
border: 1px solid var(--cjm-line);
border-radius: 14px;
}
.cjm .woocommerce-form-login__submit,
.cjm .woocommerce-form-register__submit {
width: 100%;
margin-top: 6px;
}
.cjm .woocommerce-form-login__rememberme {
margin: 0 0 14px;
}
.cjm .lost_password {
margin: 14px 0 0;
font-size: 14px;
}
.cjm .lost_password a {
color: var(--cjm-violet-deep);
}
.cjm .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) {
.cjm * {
transition: none !important;
}
}
/* ==========================================================================
L'ÉCRAN DE CONNEXION
Il était resté sur le fichier d'origine de WooCommerce, sans l'enveloppe
`.cjm` à laquelle cette feuille s'accroche : un titre nu et deux champs
étirés sur 1 265 pixels de large. Rien de cette feuille ne pouvait
s'appliquer.
Une carte centrée, à la largeur d'un formulaire qu'on remplit — pas à celle
de l'écran.
========================================================================== */
.cjm-connexion {
padding: 6px 0 18px;
}
.cjm-connexion-grille {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
max-width: 460px;
margin: 0 auto;
}
/* Quand l'inscription est ouverte, deux cartes côte à côte au-delà de 820 px.
L'option est fermée aujourd'hui ; la règle attend le jour où elle s'ouvre. */
.cjm-connexion-grille.est-double {
max-width: 940px;
}
@media (min-width: 820px) {
.cjm-connexion-grille.est-double {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
}
}
.cjm .cjm-carte {
padding: 28px 26px 26px;
background: var(--cjm-paper);
border: 1px solid var(--cjm-line);
border-radius: 18px;
}
.cjm .cjm-connexion .cjm-surtitre {
margin: 0 0 6px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cjm-ink-3);
}
/* Le CSS additionnel impose « h2 { text-align: center } » : deux classes et un
!important passent devant. */
.cjm .cjm-carte-titre {
margin: 0 0 20px !important;
padding: 0;
text-align: left;
font-size: 24px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -.02em;
color: var(--cjm-ink);
}
/* --- les champs ---------------------------------------------------------- */
.cjm .cjm-form {
display: grid;
gap: 16px;
margin: 0;
}
.cjm .cjm-champ {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
}
.cjm .cjm-champ label {
font-size: 13.5px;
font-weight: 500;
color: var(--cjm-ink-2);
}
.cjm .cjm-champ .required {
color: var(--cjm-rouge);
text-decoration: none;
border: 0;
}
.cjm .cjm-champ input[type="text"],
.cjm .cjm-champ input[type="email"],
.cjm .cjm-champ input[type="password"] {
width: 100%;
min-height: 46px;
padding: 0 14px;
border: 1px solid var(--cjm-line);
border-radius: 11px;
background: var(--cjm-paper);
font-size: 15.5px;
color: var(--cjm-ink);
transition: border-color .15s, box-shadow .15s;
}
.cjm .cjm-champ input:focus {
outline: none;
border-color: var(--cjm-violet);
box-shadow: 0 0 0 3px rgba(143, 21, 255, .13);
}
/* WooCommerce glisse le bouton « afficher le mot de passe » dans un
qui enveloppe le champ : sans cette règle, le champ perd sa largeur. */
.cjm .cjm-champ .password-input {
display: block;
position: relative;
width: 100%;
}
.cjm .cjm-champ .password-input input {
padding-right: 46px;
}
.cjm .cjm-champ .show-password-input {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
/* --- le bouton et les options -------------------------------------------- */
.cjm .cjm-envoi {
margin: 4px 0 0;
padding: 0;
}
.cjm .cjm-bouton {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
padding: 0 20px;
border: 0;
border-radius: 11px;
background: var(--cjm-violet);
color: #fff;
font-size: 15.5px;
font-weight: 600;
cursor: pointer;
transition: background .15s;
}
.cjm .cjm-bouton:hover,
.cjm .cjm-bouton:focus-visible {
background: var(--cjm-violet-deep);
color: #fff;
}
/* « Se souvenir de moi » et « Mot de passe perdu ? » sur une seule ligne, sous
le bouton. Dans le fichier d'origine la case partageait le paragraphe du
bouton, et les deux se chevauchaient sur téléphone. */
.cjm .cjm-options {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
margin: 2px 0 0;
padding: 0;
font-size: 14px;
}
.cjm .cjm-options label {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--cjm-ink-2);
cursor: pointer;
}
.cjm .cjm-options input[type="checkbox"] {
width: 17px;
height: 17px;
margin: 0;
accent-color: var(--cjm-violet);
}
.cjm .cjm-options a {
color: var(--cjm-violet-deep);
text-decoration: none;
font-weight: 500;
}
.cjm .cjm-options a:hover,
.cjm .cjm-options a:focus-visible {
text-decoration: underline;
}
.cjm .cjm-note {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--cjm-ink-2);
}
/* --- ce que l'espace client sert à faire ---------------------------------- */
.cjm .cjm-rappel {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 22px;
max-width: 460px;
margin: 20px auto 0;
padding: 0;
list-style: none;
font-size: 14px;
color: var(--cjm-ink-2);
}
.cjm .cjm-rappel li {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
}
.cjm .cjm-rappel li::before {
content: "✓";
color: var(--cjm-vert);
font-weight: 700;
}
/* Le formulaire ne dessine plus sa propre boîte : c'est la carte qui la porte.
Deux feuilles l'encadraient déjà — celle de WooCommerce
(`.woocommerce form.login`) et une règle de ce fichier écrite avant que la
carte n'existe. Le résultat était un cadre dans un cadre, visible à l'oeil
nu. Trois classes passent devant les deux. */
.cjm .cjm-carte .woocommerce-form-login,
.cjm .cjm-carte .woocommerce-form-register,
.cjm .cjm-carte form.login,
.cjm .cjm-carte form.register {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: 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/-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
(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
==========================================================================
Règle générale : les titres et textes de ces bulles sont toujours
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/compte-v2.css (NON PURGÉ : voir NE_PAS_PURGER) --- */
/* ==========================================================================
Mon compte 2.0 — connexion, tableau de bord, commandes, adresses (15/09/2026)
Balisage : woocommerce/myaccount. Préfixe .cjm- (sans lien avec le méga-menu,
aucune classe en commun, vérifié).
Portée : body.cjx-g .cjm. Aucun texte, lien ni image touché.
========================================================================== */
/* --- menu du compte ------------------------------------------------------ */
body.cjx-g .cjm .cjm-menu ul {
padding: 10px;
border-color: var(--cjx-filet);
border-radius: 24px;
background: #fff;
}
body.cjx-g .cjm .cjm-menu a {
border-radius: 14px;
transition: background .15s, color .15s;
}
body.cjx-g .cjm .cjm-menu a:hover { background: var(--cjx-violet-10); color: var(--cjx-violet-fonce); }
body.cjx-g .cjm .cjm-menu .is-active a {
background: var(--cjx-violet);
color: #fff;
}
/* --- contenu ------------------------------------------------------------- */
body.cjx-g .cjm .cjm-contenu {
border-color: var(--cjx-filet);
border-radius: 28px;
}
body.cjx-g .cjm fieldset { border-radius: 20px; }
body.cjx-g .cjm :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea),
body.cjx-g .cjm .select2-selection {
border-radius: 14px;
transition: border-color .15s, box-shadow .15s;
}
body.cjx-g .cjm :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea):focus {
border-color: var(--cjx-violet);
box-shadow: 0 0 0 4px rgba(143, 21, 255, .12);
outline: 0;
}
body.cjx-g .cjm :is(.button, button[type="submit"], .woocommerce-Button, .cjm-bouton) {
border-radius: 999px;
transition: background .2s, transform .2s, box-shadow .2s;
}
body.cjx-g .cjm :is(.button, button[type="submit"], .woocommerce-Button, .cjm-bouton):hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px -16px rgba(143, 21, 255, .9);
}
body.cjx-g .cjm :is(table.shop_table, .woocommerce-orders-table, .woocommerce-table) { border-radius: 20px; }
body.cjx-g .cjm .woocommerce-Address { border-radius: 22px; }
body.cjx-g .cjm :is(.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) { border-radius: 26px; }
/* --- formulaires hors de .cjm ---------------------------------------------
Oublié au premier passage : « Mot de passe perdu » (/mon-compte/lost-password)
et la saisie du nouveau mot de passe sont rendus sans l'enveloppe .cjm,
directement dans .cjp-nu (page.php). */
body.cjx-g .cjp-nu > .woocommerce > :is(form.woocommerce-ResetPassword, form.lost_reset_password) {
position: relative;
isolation: isolate;
max-width: 560px;
margin: 40px auto 56px;
padding: 36px 34px 30px;
overflow: hidden;
border: 1px solid var(--cjx-filet);
border-radius: 30px;
background: var(--cjx-scene);
box-shadow: 0 40px 80px -56px rgba(40, 10, 80, .6);
}
body.cjx-g .cjp-nu > .woocommerce > form.woocommerce-ResetPassword > p:first-child {
font-size: 16px;
line-height: 1.6;
color: var(--cjx-texte-2);
}
body.cjx-g .cjp-nu > .woocommerce > form.woocommerce-ResetPassword .form-row { float: none; width: 100%; }
body.cjx-g .cjp-nu > .woocommerce > form.woocommerce-ResetPassword label { font-weight: 600; color: var(--cjx-encre); }
body.cjx-g .cjp-nu > .woocommerce > form.woocommerce-ResetPassword input.input-text {
width: 100%;
min-height: 50px;
padding: 0 16px;
border: 1px solid var(--cjx-filet);
border-radius: 14px;
background: #fff;
}
body.cjx-g .cjp-nu > .woocommerce > form.woocommerce-ResetPassword input.input-text:focus {
border-color: var(--cjx-violet);
box-shadow: 0 0 0 4px rgba(143, 21, 255, .12);
outline: 0;
}
body.cjx-g .cjp-nu > .woocommerce > form.woocommerce-ResetPassword .button {
width: 100%;
min-height: 52px;
border: 0;
border-radius: 999px;
background: var(--cjx-violet);
color: #fff;
font-weight: 700;
box-shadow: 0 18px 36px -18px rgba(143, 21, 255, .95);
}
body.cjx-g .cjp-nu > .woocommerce > form.woocommerce-ResetPassword .button:hover { background: var(--cjx-violet-fonce); }
/* --- page de connexion : la carte devient une scène ---------------------- */
body.cjx-g .cjm .cjm-carte {
position: relative;
isolation: isolate;
overflow: hidden;
border-color: var(--cjx-filet);
border-radius: 30px;
background: var(--cjx-scene);
box-shadow: 0 40px 80px -56px rgba(40, 10, 80, .6);
}
body.cjx-g .cjm .cjm-carte::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--cjx-pcb);
background-size: 180px 180px;
opacity: .12;
-webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000 10%, transparent 70%);
mask-image: radial-gradient(70% 90% at 100% 0%, #000 10%, transparent 70%);
}
body.cjx-g .cjm .cjm-surtitre { color: var(--cjx-violet-fonce); }
body.cjx-g .cjm .cjm-carte-titre { color: var(--cjx-encre); letter-spacing: -.02em; }
body.cjx-g .cjm .cjm-champ input { border-radius: 14px; background: #fff; }
body.cjx-g .cjm .cjm-bouton { min-height: 52px; font-weight: 700; }
/* ==========================================================================
GREFFE 02/10/2026 : l'accueil de Mon compte (woocommerce/myaccount/dashboard.php)
et l'écran d'inscription. Préfixe `cja-`. Les titres passent par deux classes
et un !important : le CSS additionnel centre tous les h2/h3.
========================================================================== */
.cja {
display: flex;
flex-direction: column;
gap: 26px;
}
.cja p {
margin: 0;
}
.cjm .cja .cja-titre {
margin: 0 0 6px !important;
font-size: 28px;
line-height: 1.15;
font-weight: 700;
letter-spacing: -.025em;
text-align: left !important;
color: var(--cjm-ink);
}
.cja-chapo {
font-size: 16px;
color: var(--cjm-ink-2);
}
.cja-tuiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
@media (min-width: 1100px) {
.cja-tuiles {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.cjm .cja-tuile {
display: flex;
flex-direction: column;
gap: 3px;
padding: 16px;
border: 1px solid var(--cjm-line);
border-radius: 14px;
background: var(--cjm-paper);
color: var(--cjm-ink) !important;
text-decoration: none !important;
transition: border-color .15s ease, box-shadow .15s ease;
}
.cjm .cja-tuile:hover,
.cjm .cja-tuile:focus-visible {
border-color: var(--cjm-violet);
box-shadow: 0 8px 22px -16px rgba(114, 17, 204, .7);
}
.cja-tuile svg {
margin-bottom: 8px;
color: var(--cjm-violet-deep);
}
.cja-tuile strong {
font-size: 15px;
line-height: 1.3;
}
.cja-tuile span {
font-size: 13.5px;
color: var(--cjm-ink-3);
}
.cja-tuile span.is-a-faire {
color: var(--cjm-ambre);
font-weight: 600;
}
.cja-bloc-tete {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.cjm .cja .cja-bloc-titre {
margin: 0 0 12px !important;
font-size: 18px;
text-align: left !important;
}
.cja-bloc-tete a {
font-size: 14px;
font-weight: 600;
}
.cja-commandes {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid var(--cjm-line);
border-radius: 14px;
overflow: hidden;
}
.cja-commandes li {
margin: 0;
border-bottom: 1px solid var(--cjm-line);
}
.cja-commandes li:last-child {
border-bottom: 0;
}
.cjm .cja-commandes a {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 6px 16px;
padding: 13px 16px;
color: var(--cjm-ink) !important;
text-decoration: none !important;
}
.cja-commandes a:hover {
background: var(--cjm-wash);
}
.cja-c-quoi {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.cja-c-quoi strong {
font-size: 15px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cja-c-quoi small {
font-size: 13px;
color: var(--cjm-ink-3);
}
.cja-c-total {
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
}
.cja-etat {
padding: 3px 10px;
border-radius: 99px;
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
background: var(--cjm-violet-wash);
color: var(--cjm-violet-deep);
}
.cja-etat.is-ok { background: var(--cjm-vert-wash); color: var(--cjm-vert); }
.cja-etat.is-attente { background: var(--cjm-ambre-wash); color: var(--cjm-ambre); }
.cja-etat.is-neutre { background: var(--cjm-wash); color: var(--cjm-ink-3); }
@media (max-width: 560px) {
.cjm .cja-commandes a {
grid-template-columns: minmax(0, 1fr) auto;
}
.cja-c-quoi {
grid-column: 1 / -1;
}
.cja-c-total {
grid-column: 2;
grid-row: 2;
}
.cja-etat {
justify-self: start;
}
}
.cja-vide {
padding: 16px 18px;
border: 1px dashed var(--cjm-line);
border-radius: 14px;
font-size: 15px;
color: var(--cjm-ink-3);
}
.cja-engagements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.cja-engagements li {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 2px 12px;
margin: 0;
padding: 16px;
border-radius: 14px;
background: var(--cjm-wash);
}
.cja-engagements svg {
grid-row: span 2;
color: var(--cjm-violet-deep);
}
.cja-engagements strong {
font-size: 15px;
color: var(--cjm-ink);
}
.cja-engagements span {
font-size: 14px;
line-height: 1.5;
color: var(--cjm-ink-2);
}
/* --- l'inscription ------------------------------------------------------- */
.cjm .cjm-pitch {
display: grid;
gap: 7px;
margin: -8px 0 20px;
padding: 0;
list-style: none;
font-size: 14.5px;
color: var(--cjm-ink-2);
}
.cjm .cjm-pitch li {
display: flex;
gap: 9px;
margin: 0;
}
.cjm .cjm-pitch li::before {
content: "✓";
color: var(--cjm-vert);
font-weight: 700;
}
.cjm .woocommerce-privacy-policy-text p {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--cjm-ink-3);
}
.cjm .cf-turnstile {
margin: 0;
}