/**
* Les Arides & Vivaces — Feuille de style principale (child theme ecomus-child)
*
* Point d'entrée unique du CSS front-end du site.
* Enqueué via functions.php à priorité 30 (après Ecomus ~10, après les plugins ~10).
*
* FICHIER COMPILÉ — Ne pas éditer directement.
* Éditer les fichiers sources dans leurs dossiers respectifs, puis recompiler.
*
* Sources (dans cet ordre de cascade) :
* base/_tokens.css
* base/_ecomus-overrides.css
* components/_forms.css
* components/_buttons.css
* components/_notices.css
* pages/_checkout.css
* pages/_account.css
* pages/_thankyou.css
* pages/_order-details.css
*
* NOTE : Ce fichier ne contient PAS de @import.
* LiteSpeed CSS Optimizer supprime les @import sans inliner leur contenu.
* Le CSS est donc concaténé ici directement pour être compatible avec LiteSpeed.
*
* @package EcomusChild
*/
/* ============================================================================
base/_tokens.css — Variables CSS globales (Design Tokens)
============================================================================ */
/**
* Les Arides & Vivaces — Variables CSS globales (Design Tokens)
*
* Préfixe : --lav- (Les Arides & Vivaces)
* Ces variables remplacent toutes les couleurs et valeurs hardcodées
* qui étaient dispersées dans les plugins Click & Collect et B2C-B2B-Hybride.
*
* NE PAS écrire de règles CSS dans ce fichier — uniquement des :root { }.
* NE PAS utiliser de !important ici.
*/
:root {
/* =========================================================
Couleurs principales
========================================================= */
--lav-color-primary: #2c6e49; /* Vert principal — boutons, accents forts */
--lav-color-primary-dark: #1b4332; /* Vert foncé — titres, états hover sombres */
--lav-color-primary-light: #95d5b2; /* Vert clair — bordures secondaires, séparateurs */
--lav-color-primary-bg: #f0f7f4; /* Vert très clair — fonds informatifs, récapitulatifs */
--lav-color-accent: #52b788; /* Vert intermédiaire — hover créneaux, accents */
/* =========================================================
Couleurs sémantiques
========================================================= */
--lav-color-danger: #d63638; /* Rouge erreurs (standard WP admin) */
--lav-color-success: #00a32a; /* Vert succès (standard WP admin) */
--lav-color-warning: #e87b00; /* Orange — force mdp, badges "en attente" */
--lav-color-error-bg: #fff0f0; /* Fond rouge très clair — blocs d'erreur inline */
/* =========================================================
Couleurs neutres
========================================================= */
--lav-color-text: #333333; /* Texte principal */
--lav-color-text-light: #666666; /* Texte secondaire, notices, placeholders */
--lav-color-text-dark: #000000; /* Texte fort — labels de formulaire (contraste maximum) */
--lav-color-text-muted: #767676; /* Texte atténué — tooltips, noms de document */
--lav-color-border: #d1d5db; /* Bordures formulaires */
--lav-color-border-light: #e0e0e0; /* Bordures légères (tables, séparateurs) */
--lav-color-bg: #f9f9f9; /* Fond général léger */
--lav-color-bg-light: #fafafa; /* Fond très léger */
--lav-color-bg-muted: #f5f5f5; /* Fond champs désactivés / readonly */
--lav-color-bg-input: #ffffff; /* Fond des champs de formulaire */
--lav-color-white: #ffffff;
/* =========================================================
Couleurs d'état calendrier (Click & Collect)
========================================================= */
--lav-color-disabled: #c8c8c8; /* Jours désactivés / éléments inactifs */
--lav-color-holiday: #e8c1c1; /* Fond jours fériés */
--lav-color-today: #d8f3dc; /* Fond jour actuel / fonds récapitulatifs CNC */
/* =========================================================
Couleurs informationnelles (livraison locale)
========================================================= */
--lav-color-info: #5b9bd5; /* Bleu accent — bordure gauche livraison locale */
--lav-color-info-bg: #f0f7ff; /* Bleu très clair — fond bloc livraison locale */
--lav-color-info-border: #b8d4f0; /* Bleu clair — bordure bloc livraison locale */
/* =========================================================
Typographie
========================================================= */
--lav-font-family: inherit; /* Hérite du thème Ecomus */
--lav-font-size-base: 14px;
--lav-font-size-small: 12px;
--lav-font-size-heading: 18px;
/* =========================================================
Espacements
========================================================= */
--lav-spacing-xs: 4px;
--lav-spacing-sm: 8px;
--lav-spacing-md: 16px;
--lav-spacing-lg: 24px;
--lav-spacing-xl: 32px;
/* =========================================================
Bordures & effets
========================================================= */
--lav-border-radius-sm: 4px; /* Éléments compacts (boutons nav, erreurs) */
--lav-border-radius: 6px; /* Conteneurs principaux (CNC, sections) */
--lav-border-radius-lg: 8px; /* Inputs formulaires */
--lav-border-radius-pill: 20px; /* Créneaux horaires, badges */
--lav-border-width: 1px;
--lav-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
--lav-transition: 0.2s ease;
}
/* ============================================================================
base/_ecomus-overrides.css — Contournements thème parent Ecomus
============================================================================ */
/**
* Les Arides & Vivaces — Overrides Ecomus
*
* Ce fichier centralise les contournements nécessaires face aux comportements
* du thème parent Ecomus qui ne peuvent pas être gérés autrement.
*
* DÉCISION (2026-03-14) — Option A retenue :
* Les floating labels Ecomus sont désormais ACCEPTÉS sur tous les formulaires
* du site. Ce fichier ne contient plus d'overrides liés aux labels ou aux inputs.
* Ecomus gère nativement via .woocommerce-form-row.focused > label.
*
* RÈGLE !important : autorisés ICI UNIQUEMENT.
* Ecomus et WooCommerce utilisent eux-mêmes des !important sur ces propriétés.
* Chaque usage est documenté avec la raison précise.
*
* Ne pas ajouter de styles non liés à Ecomus dans ce fichier.
*/
/* ============================================================================
0. Floating labels Ecomus — Désactivation sur .woocommerce-account
----------------------------------------------------------------------------
Ecomus scope son JS floating-label sur .woocommerce-account .woocommerce-form.
Le checkout (hors .woocommerce-account) affiche des labels statiques +
placeholders visibles — on reproduit ce comportement sur Mon Compte.
Règles Ecomus neutralisées (woocommerce.css) :
:2299 — label position:absolute, height:100%, transform:scale(1)
:2325 — .focused > label transform:translateY(-0.6rem) scale(0.8)
:2329 — .focused .input-text padding-top:1.55rem / padding-bottom:0.4rem
:2335 — ::placeholder color:transparent
:2343 — .form-row-password.focused > label transform + top + height
============================================================================ */
/* Label : statique, au-dessus du champ (hors checkbox — voir §5a) */
/* v1.0.5 : même typographie que les labels checkout (woocommerce.css:8155) */
.woocommerce-account .woocommerce-form .woocommerce-form-row > label:not(.woocommerce-form__label-for-checkbox) {
position: static !important;
height: auto !important;
transform: none !important;
pointer-events:auto !important;
display: block !important;
transition: none !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
color: #000000 !important;
margin-bottom: 9px !important;
}
/* .focused : neutralise le transform sur le label (JS Ecomus ajoute la classe) */
.woocommerce-account .woocommerce-form .woocommerce-form-row.focused > label:not(.woocommerce-form__label-for-checkbox),
.woocommerce-account .woocommerce-form .woocommerce-form-row.form-row-password.focused > label {
transform: none !important;
top: auto !important;
height: auto !important;
}
/* .focused : annule le padding-top/bottom injecté sur l'input par Ecomus */
/* v1.0.6 : revert remplacé par valeur fixe (0.813rem = --em-input-padding-y, style.css:101)
revert tombait sur 0 au lieu de restaurer le padding normal → champ rétrécissait au focus */
.woocommerce-account .woocommerce-form .woocommerce-form-row.focused input[type="text"],
.woocommerce-account .woocommerce-form .woocommerce-form-row.focused input[type="password"],
.woocommerce-account .woocommerce-form .woocommerce-form-row.focused .input-text {
padding-top: 0.813rem !important;
padding-bottom: 0.813rem !important;
}
/* Placeholder : visible (Ecomus force color:transparent) */
.woocommerce-account .woocommerce-form .woocommerce-form-row ::placeholder {
/* !important : Ecomus force color:transparent sur ::placeholder */
color: var(--lav-color-text-light) !important;
opacity: 1 !important;
}
/* Wrapper de champ : même margin-bottom que le checkout + suppression du padding-top floating label */
/* v1.0.5 : margin-bottom calqué sur form.checkout .form-row (woocommerce.css:8144) */
.woocommerce-account .woocommerce-form .woocommerce-form-row {
/* !important : peut être forcé par WooCommerce ou Ecomus */
padding-top: 0 !important;
margin-bottom: 20px !important;
}
/* entre label et input dans les templates natifs WC (connexion, inscription B2C) — masqué */
/* v1.0.6 : ce ajoutait ~20px au wrapper (absent des formulaires pro et checkout) */
.woocommerce-account .woocommerce-form .woocommerce-form-row br {
/* !important : peut hériter d'un display forcé par reset CSS */
display: none !important;
}
/* Input : hauteur naturelle (Ecomus force height:50px — woocommerce.css:2315) */
/* v1.0.5 : le checkout n'a pas de height forcé, ses inputs utilisent auto via padding */
.woocommerce-account .woocommerce-form .woocommerce-form-row .input-text,
.woocommerce-account .woocommerce-form .woocommerce-form-row input[type="text"],
.woocommerce-account .woocommerce-form .woocommerce-form-row input[type="email"],
.woocommerce-account .woocommerce-form .woocommerce-form-row input[type="password"],
.woocommerce-account .woocommerce-form .woocommerce-form-row input[type="tel"],
.woocommerce-account .woocommerce-form .woocommerce-form-row input[type="number"] {
/* !important : Ecomus force height:50px via woocommerce.css:2315 */
height: auto !important;
}
/* ============================================================================
§0a. Formulaires Mon Compte sans .woocommerce-form — Espacement et labels
----------------------------------------------------------------------------
Les formulaires suivants n'ont PAS la classe .woocommerce-form :
form.woocommerce-ResetPassword — Mot de passe oublié (template WC natif)
form.woocommerce-EditAccountForm — Détails du compte (template WC natif)
Ecomus ne leur applique donc pas le floating-label (tous ses sélecteurs
requièrent .woocommerce-form). Mais leur typographie de label et leur
espacement de wrapper ne sont pas garantis identiques au checkout.
Ces règles forcent la cohérence visuelle.
v1.0.7
============================================================================ */
/* Label : même typographie que les labels checkout (woocommerce.css:8152-8158) */
.woocommerce-account form.woocommerce-ResetPassword .woocommerce-form-row > label,
.woocommerce-account form.woocommerce-EditAccountForm .woocommerce-form-row > label {
position: static !important;
height: auto !important;
transform: none !important;
pointer-events: auto !important;
display: block !important;
transition: none !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
color: var(--lav-color-text-dark) !important;
margin-bottom: 9px !important;
}
/* Placeholder : visible */
.woocommerce-account form.woocommerce-ResetPassword .woocommerce-form-row ::placeholder,
.woocommerce-account form.woocommerce-EditAccountForm .woocommerce-form-row ::placeholder {
color: var(--lav-color-text-light) !important;
opacity: 1 !important;
}
/* Wrapper : même margin-bottom que checkout, pas de padding-top flottant */
.woocommerce-account form.woocommerce-ResetPassword .woocommerce-form-row,
.woocommerce-account form.woocommerce-EditAccountForm .woocommerce-form-row {
padding-top: 0 !important;
margin-bottom: 20px !important;
}
/* éventuel entre label et input — masqué */
.woocommerce-account form.woocommerce-ResetPassword .woocommerce-form-row br,
.woocommerce-account form.woocommerce-EditAccountForm .woocommerce-form-row br {
display: none !important;
}
/* ============================================================================
1. Layout page connexion — Remplacement du layout 2 colonnes Ecomus
----------------------------------------------------------------------------
Ecomus affiche un layout 2 colonnes (connexion / inscription) sur Mon Compte.
Le plugin B2B remplace la colonne d'inscription par son propre sélecteur
de type de compte (.b2cb2b-account-type-selector).
============================================================================ */
/* Masque la colonne droite "Je suis nouveau ici"
Note : :nth-child(2) uniquement — :last-child est intentionnellement absent.
Si woocommerce_enable_myaccount_registration = 'no', il n'y a qu'un seul .em-col ;
:last-child ciblerait alors le formulaire de connexion et le masquerait par erreur. */
.b2cb2b-login-with-type-selector #customer_login > .em-col:nth-child(2) {
/* !important : Ecomus force display via le layout flex .em-col */
display: none !important;
}
/* Masque le formulaire d'inscription WC natif (remplacé par le sélecteur B2B) */
.b2cb2b-login-with-type-selector .woocommerce-form-new {
/* !important : cohérence avec le masquage de la colonne parent */
display: none !important;
}
/* Centre le bloc connexion dans le layout flex Ecomus (sans la colonne masquée) */
.b2cb2b-login-with-type-selector #customer_login {
justify-content: center;
}
/* Colonne connexion : pleine largeur, centrée, max 581px
581px = 551px contenu + 2×15px padding .em-col (box-sizing:border-box)
→ la zone de contenu est 551px, identique à .woocommerce-customer-register
et .b2cb2b-registration-form (woocommerce.css:2279 + nos règles).
Annule le .em-sm-6 d'Ecomus (flex-basis: 50%) */
.b2cb2b-login-with-type-selector #customer_login > .em-col:first-child {
/* !important : Ecomus force flex-basis via .em-sm-6 */
flex: 0 0 auto !important;
width: 100% !important;
max-width: 581px !important;
}
/* ============================================================================
2. Titres de page — Masquage sur les pages d'inscription/connexion B2B
----------------------------------------------------------------------------
Les pages gérées par B2B ont leurs propres titres contextuels injectés
par les templates. Les titres génériques Ecomus/WC sont masqués.
============================================================================ */
/* Page inscription professionnelle */
.b2cb2b-register-pro .woocommerce > h2,
.b2cb2b-register-pro .woocommerce-account > h2,
.b2cb2b-register-pro .entry-title {
/* !important : Ecomus peut forcer display:block sur ces titres */
display: none !important;
}
/* Page connexion : titre "Connexion" affiché par Ecomus via .woocommerce-customer-login__title */
.b2cb2b-login-with-type-selector .woocommerce-customer-login__title {
/* !important : Ecomus force display sur cet élément */
display: none !important;
}
/* ============================================================================
3. Toggle visibilité mot de passe — Positionnement absolu
----------------------------------------------------------------------------
Le plugin B2B crée un wrapper .password-input autour de chaque input[password]
puis y injecte un toggle (.show-password-input.b2cb2b-pwd-toggle).
Il supprime activement les toggles natifs WooCommerce via MutationObserver
pour éviter tout doublon.
Ces règles positionnent le toggle dans le wrapper et réservent l'espace
à droite de l'input (padding-right: 44px).
Zone de tap : 44×44 px (WCAG 2.5.5).
============================================================================ */
.password-input {
/* !important : Ecomus/WC peut forcer position:static sur les éléments
dans .woocommerce-account ; le wrapper doit être relative pour le toggle */
position: relative !important;
display: block !important;
}
.password-input input[type="password"],
.password-input input[type="text"] {
/* Réserve l'espace pour l'icône toggle (44px = zone de tap WCAG) */
padding-right: 44px !important;
box-sizing: border-box !important;
width: 100% !important;
}
.b2cb2b-pwd-toggle {
/* !important : Ecomus peut forcer position sur .woocommerce-account * */
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 44px !important;
height: auto !important;
background-position: center !important;
background-size: 20px 20px !important;
z-index: 2 !important;
}
.b2cb2b-pwd-toggle:focus-visible {
outline: 2px solid var(--lav-color-primary) !important;
outline-offset: -2px !important;
}
/* ============================================================================
4. Badges statut compte — Neutralisation des min-height globaux Ecomus
----------------------------------------------------------------------------
Ecomus applique un min-height sur les éléments enfants des formulaires.
Les badges (.b2cb2b-badge--*) sont des spans inline-flex décoratifs, pas des
champs — ils ne doivent pas hériter de cette hauteur forcée.
============================================================================ */
.b2cb2b-badge--verified,
.b2cb2b-badge--pending,
.b2cb2b-badge--suspended {
/* !important : Ecomus force min-height et height sur les éléments de formulaire */
height: auto !important;
min-height: 0 !important;
line-height: 1.2 !important;
}
.b2cb2b-verified-badge-wrap {
/* !important : Ecomus applique margin/padding via fieldset > * */
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 0 16px !important;
padding: 0 !important;
}
/* ============================================================================
5. Labels checkbox et file — Neutralisation du floating label Ecomus
----------------------------------------------------------------------------
Ecomus applique position:absolute sur TOUS les > label enfants directs de
.woocommerce-form-row (pour le système floating label).
a) Labels de checkbox (.woocommerce-form__label-for-checkbox) : pas des
floating labels — doivent rester en flux normal.
b) Labels de champ file (.b2cb2b-field--file) : l'input réel est de type
file avec class="b2cb2b-file-input" (opacity:0) — il n'a pas la classe
.input-text requise par le JS Ecomus. La classe .focused n'est donc
jamais ajoutée au wrapper, laissant le label en position:absolute à
hauteur zéro, où il recouvre la zone d'upload visuelle.
============================================================================ */
.woocommerce-account .woocommerce-form .woocommerce-form-row > label.woocommerce-form__label-for-checkbox {
/* !important : Ecomus force position:absolute sur .woocommerce-form-row > label */
position: static !important;
height: auto !important;
transform: none !important;
pointer-events: auto !important;
display: flex !important;
}
.woocommerce-account .woocommerce-form .b2cb2b-field--file > label {
/* !important : Ecomus force position:absolute sur .woocommerce-form-row > label */
/* Le champ file n'a pas d'input.input-text → .focused n'est jamais ajouté. */
position: static !important;
height: auto !important;
transform: none !important;
pointer-events: auto !important;
display: block !important;
margin-bottom: var(--lav-spacing-xs);
}
/* ============================================================================
7. Champ checkbox — suppression du padding-top réservé au floating label
----------------------------------------------------------------------------
.woocommerce-form-row reçoit un padding-top Ecomus pour ménager l'espace
visuel du label flottant. Les champs checkbox utilisent un label
position:static (voir §5a ci-dessus) — ce padding-top est superflu et
crée un espacement vertical excessif, notamment avant le bouton soumettre.
============================================================================ */
.b2cb2b-field--checkbox {
/* !important : Ecomus peut forcer padding-top via .woocommerce-form-row */
padding-top: 0 !important;
}
/* Wrapper des champs hidden — masqué entièrement */
/* v1.0.8 : FormRenderer enveloppe chaque champ (y compris type="hidden") dans un
avec class="woocommerce-form-row b2cb2b-field--hidden". Sans cette règle, le
conserve sa hauteur réservée (~25px) même si l'input est invisible.
Les inputs hidden soumettent toujours leurs données même avec parent display:none. */
.b2cb2b-field--hidden {
/* !important : Ecomus/WC peut forcer display sur .woocommerce-form-row */
display: none !important;
}
/* ============================================================================
8. Jauge de force mot de passe native — Masquage
----------------------------------------------------------------------------
Le plugin B2B fournit son propre indicateur (.b2cb2b-password-strength).
La jauge native WC/WP est masquée pour éviter le doublon visuel.
============================================================================ */
.b2cb2b-reset-password .woocommerce-password-strength,
.b2cb2b-reset-password .woocommerce-password-hint {
/* !important : WP/WC force display sur ces éléments */
display: none !important;
}
/* ============================================================================
9. "Souvenez-vous de moi" — Harmonisation hauteur et alignement
----------------------------------------------------------------------------
Ecomus a display:flex/align-items:center/justify-content:space-between sur
.woocommerce-account .woocommerce-form-row--remember (woocommerce.css:2415)
mais sans !important. Le padding-top des floating labels gonflait le wrapper
à 51px. Ces règles forcent l'alignement et suppriment le padding superflu.
v1.0.9
============================================================================ */
.b2cb2b-login-with-type-selector .woocommerce-form-login .woocommerce-form-row--remember {
/* !important : neutralise le padding-top Ecomus réservé aux floating labels */
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding-top: 0 !important;
height: auto !important;
}
/* dans le