/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 24 2026 | 21:24:50 */
/* =========================================================
   DESIGN SYSTEM – COULEURS CONTEXTUELLES + BOUTONS AVADA
   ---------------------------------------------------------
   OBJECTIF

   Permettre de contrôler toute la couleur d'une section
   simplement avec une classe de contexte (c-jardin, c-cafe…).

   Les éléments comme les titres et les boutons héritent
   automatiquement de cette couleur via la variable :

   --color-primary

   Avantages :
   - cohérence graphique automatique
   - très peu de classes à gérer dans le builder
   - compatible avec les wrappers internes d’Avada
   - système facilement extensible

   Principe :

   CONTEXTE COULEUR
   → définit --color-primary

   STYLE DE BOUTON
   → définit comment utiliser la couleur

   COMPOSANT
   → applique les variables finales
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ---------------------------------------------------------
   Couleurs sources du design system.
   Elles correspondent aux couleurs définies dans Avada.
   ========================================================= */

   :root {
    --color-maison: var(--wp--preset--color--awb-color-5);
    --color-blanc: var(--wp--preset--color--awb-color-4);
    --color-clair: var(--wp--preset--color--awb-color-6);
    --color-prive: var(--wp--preset--color--awb-color-7);
    --color-jardin: var(--wp--preset--color--awb-color-8);
    --color-boutique: var(--wp--preset--color--awb-color-custom-1);
    --color-ferme: var(--wp--preset--color--awb-color-custom-2);
    --color-cafe: var(--wp--preset--color--awb-color-custom-3);
}


/* =========================================================
   2. TOKENS SÉMANTIQUES
   ---------------------------------------------------------
   Variables utilisées par les composants.

   --color-primary
   couleur principale du contexte

   --color-background
   couleur utilisée pour le texte sur fond coloré
   ========================================================= */

:root {
    --color-primary: var(--color-maison);
    --color-background: var(--color-blanc);
}


/* =========================================================
   3. CONTEXTES COULEUR
   ---------------------------------------------------------
   Ces classes permettent de changer la couleur principale
   d'une section ou d'un conteneur.

   On peut les appliquer sur :
   - une section
   - une colonne
   - un container
   - un wrapper
   - un élément

   Tous les composants enfants utiliseront automatiquement
   cette couleur.

   Exemple :

   section class="c-jardin"

   Tous les titres et boutons deviennent couleur jardin.
   ========================================================= */

.c-maison {
    --color-primary: var(--color-maison);
    --color-background: var(--color-blanc);
}

.c-clair {
    --color-primary: var(--color-clair);
	--color-background: var(--color-blanc);
}

.c-prive {
    --color-primary: var(--color-prive);
    --color-background: var(--color-blanc);
}

.c-jardin {
    --color-primary: var(--color-jardin);
    --color-background: var(--color-blanc);
}

.c-boutique {
    --color-primary: var(--color-boutique);
    --color-background: var(--color-blanc);
}

.c-ferme {
    --color-primary: var(--color-ferme);
    --color-background: var(--color-blanc);
}

.c-cafe {
    --color-primary: var(--color-cafe);
    --color-background: var(--color-blanc);
}

.c-blanc {
    --color-primary: var(--color-blanc);
	--color-background: var(--color-maison);
}


/* =========================================================
   4. COMPOSANT BOUTON
   ---------------------------------------------------------
   Cette règle applique les variables finales aux boutons Avada.

   Si aucune variable spécifique n'est définie,
   le bouton utilise automatiquement :

   fond → color-primary
   texte → color-background

   Les styles (solid / outline) vont simplement modifier
   ces variables.
   ========================================================= */

.fusion-button {
    background: var(--btn-bg, var(--color-primary)) !important;
    border-color: var(--btn-border, var(--color-primary)) !important;
}

.fusion-button > * {
    color: var(--btn-text, var(--color-background)) !important;
}


/* =========================================================
   5. STYLES DE BOUTONS
   ---------------------------------------------------------
   Ces classes définissent la manière dont la couleur
   primaire est utilisée.

   Elles peuvent être appliquées sur :

   - le bouton
   - un wrapper
   - une colonne
   - une section entière

   Tous les boutons enfants utiliseront ce style.

   Exemple :

   section class="btn-outline"
   ========================================================= */


/* ----- bouton plein ----- */

.btn-solid {
    --btn-bg: var(--color-primary);
    --btn-border: var(--color-primary);
    --btn-text: var(--color-background);
}


/* ----- bouton contour ----- */

.btn-outline {
    --btn-bg: transparent;
    --btn-border: var(--color-primary);
    --btn-text: var(--color-primary);
}

.btn-outline-blanc {
    --btn-bg: transparent;
    --btn-border: var(--color-blanc);
    --btn-text: var(--color-blanc);
}


/* =========================================================
   6. HOVER DES BOUTONS
   ---------------------------------------------------------
   Comportement commun à tous les boutons :

   fond → blanc
   texte → couleur primaire
   bordure → couleur primaire

   Ce comportement reste cohérent quelle que soit
   la couleur de la section.
   ========================================================= */

.fusion-button:hover {
    background: var(--color-background) !important;
    border-color: var(--color-primary) !important;
}

.fusion-button:hover > * {
    color: var(--color-primary) !important;
}

.c-blanc.fusion-button:hover > * {
    color: var(--color-maison) !important;
}

/* Cas où btn-outline est défini sur un ancêtre */
.btn-outline .fusion-button:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-background) !important;
}

.btn-outline .fusion-button:hover > * {
    color: var(--color-background) !important;
}

/* Cas où btn-outline est défini sur le bouton */
.btn-outline.fusion-button:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-background) !important;
}

.btn-outline.fusion-button:hover > * {
    color: var(--color-background) !important;
}


/* Cas où btn-outline-blanc est défini sur un ancêtre */
.btn-outline-blanc .fusion-button:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-blanc) !important;
}

.btn-outline-blanc .fusion-button:hover > * {
    color: var(--color-blanc) !important;
}

/* Cas où btn-outline-blanc est défini sur le bouton */
.btn-outline-blanc.fusion-button:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-blanc) !important;
}

.btn-outline-blanc.fusion-button:hover > * {
    color: var(--color-blanc) !important;
}



/* =========================================================
   7. TITRES
   ---------------------------------------------------------
   Tous les titres utilisent automatiquement
   la couleur primaire du contexte.

   Exemple :

   section c-cafe
   → tous les titres deviennent couleur café
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary) !important;
	padding-left: 2em !important;
	padding-right: 2em !important;
}

.c-h1 * {
    font-family: var(--h1_typography-font-family)!important;
    font-weight: var(--h1_typography-font-weight)!important;
    font-size: var(--h1_typography-font-size)!important;
    line-height: var(--h1_typography-line-height)!important;
    letter-spacing: var(--h1_typography-letter-spacing)!important;
    text-transform: var(--h1_typography-text-transform)!important;
    font-style: var(--h1_typography-font-style, normal)!important;
    color: var(--color-primary) !important;
	padding-left: 2em;
	padding-right: 2em;
}

.c-h2 * {
    font-family: var(--h2_typography-font-family)!important;
    font-weight: var(--h2_typography-font-weight)!important;
    font-size: var(--h2_typography-font-size)!important;
    line-height: var(--h2_typography-line-height)!important;
    letter-spacing: var(--h2_typography-letter-spacing)!important;
    text-transform: var(--h2_typography-text-transform)!important;
    font-style: var(--h2_typography-font-style, normal)!important;
    color: var(--color-primary) !important;
	padding-left: 2em;
	padding-right: 2em;
}

.c-h3 * {
    font-family: var(--h3_typography-font-family)!important;
    font-weight: var(--h3_typography-font-weight)!important;
    font-size: var(--h3_typography-font-size)!important;
    line-height: var(--h3_typography-line-height)!important;
    letter-spacing: var(--h3_typography-letter-spacing)!important;
    text-transform: var(--h3_typography-text-transform)!important;
    font-style: var(--h3_typography-font-style, normal);
    color: var(--color-primary) !important;
	padding-left: 2em;
	padding-right: 2em;
}

.c-h4 * {
    font-family: var(--h4_typography-font-family)!important;
    font-weight: var(--h4_typography-font-weight)!important;
    font-size: var(--h4_typography-font-size)!important;
    line-height: var(--h4_typography-line-height)!important;
    letter-spacing: var(--h4_typography-letter-spacing)!important;
    text-transform: var(--h4_typography-text-transform)!important;
    font-style: var(--h4_typography-font-style, normal)!important;
    color: var(--color-primary) !important;
	padding-left: 2em;
	padding-right: 2em;
}

.italic * {
    font-style: italic!important;
}

.text-s {
	max-width: 40ch;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 2em;
	padding-right: 2em;
}

.text-m {
	max-width: 60ch;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 2em;
	padding-right: 2em;
}

.text-l {
	max-width: 80ch;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 2em;
	padding-right: 2em;
}

.text-xl {
	max-width: 100ch;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 2em;
	padding-right: 2em;
}

.text-xxl {
	max-width: 120ch;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 2em;
	padding-right: 2em;
}