/*
Theme Name: L'Îîle Divine
Theme URI: L'URL de ton site (optionnel)
Description: Feuille de style globale de L'Île Divine, construite en Vanilla.
Author: Ton nom ou le nom de ton équipe
Author URI: Ton site web ou le site web de ton équipe (optionnel)
Template: Aucun (Vanilla)
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: ile- divine-text-domain
*/

/*
 * Définition de la police "Alice" pour être chargée localement.
 * Fichier fourni: 'alice-v20-latin-regular.woff2'
 */
@font-face {
  font-display: swap;
  font-family: 'Alice';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/alice-v20-latin-regular.woff2') format('woff2');
}

/*
 * Définition de la police "Merriweather Sans" pour être chargée localement.
 * Fichiers fournis: 'merriweather-sans-v26-latin-300.woff2' et 'merriweather-sans-v26-latin-regular.woff2'
 */
@font-face {
  font-display: swap;
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/merriweather-sans-v26-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/merriweather-sans-v26-latin-regular.woff2') format('woff2');
}


/* =================================================================== */
/* --- FEUILLE DE STYLE GLOBALE DE L'Île DIVINE --- */
/* ------------------------------------------------------------------- */
/* =================================================================== */

/* =================================================================== */
/* --- VARIABLES DE COULEUR MAÎTRESSES (Source unique de vérité) --- */
/* =================================================================== */
:root {
    /* LISIERE & Non-Catégorisé (Couleurs par défaut pour la boutique) */
    --lisiere-bg-header-secondary: #0c71c3;
    --lisiere-bg-header-primary: #1F2256;
    --lisiere-bg-header-compromis: #15498A;
    --lisiere-text-color-header-primary: #ffffff;
    --lisiere-text-color-header-secondary: #ffffff;
    --lisiere-bg-main: #1A1D4E;
    --lisiere-text-color-main: #7D88B0;
    --lisiere-accent-color: #49F9FF;
	--lisiere-bg-footer: #1F2256;
    --lisiere-bg-button: #49F9FF;
    --lisiere-text-color-button: #224d8e;
    --lisiere-text-color-title: #cd895d;
    --lisiere-text-color-content: #7D88B0;
    --lisiere-bg-text-form-field: #1F2256;
    --lisiere-text-color-form-field: #ffffff;

    /* PRÉLUDE */
    --prelude-bg-header-secondary: #845EC2;
    --prelude-bg-header-primary: #2B244D;
    --prelude-bg-header-compromis: #573E88;
    --prelude-text-color-header-primary: #ffffff;
    --prelude-text-color-header-secondary: #ffffff;
    --prelude-bg-main: #1B1835;
    --prelude-text-color-main: #5572bc;
    --prelude-accent-color: #C492FF;
    --prelude-bg-footer: #2B244D;
    --prelude-bg-button: #C492FF;
    --prelude-text-color-button: #ffffff;
    --prelude-text-color-title: #cd895d;
    --prelude-text-color-content: #7A729E;
    --prelude-bg-text-form-field: #2B244D;
    --prelude-text-color-form-field: #ffffff;


    /* CHARME */
    --charme-bg-header-secondary: #734d78;
    --charme-bg-header-primary: #2d1e2f;
    --charme-bg-header-compromis: #503653;
    --charme-text-color-header-primary: #FEF9F7;
    --charme-text-color-header-secondary: #FEF9F7;
    --charme-bg-main: #281B2C;
    --charme-text-color-main: #8C7B80;
    --charme-accent-color: #734d78;
    --charme-bg-footer: #2d1e2f;
    --charme-bg-button: #734d78;
    --charme-text-color-button: #FEF9F7;
    --charme-text-color-title: #cd895d;
    --charme-text-color-content: #8C7B80;
    --charme-bg-text-form-field: #2d1e2f;
    --charme-text-color-form-field: #FEF9F7;

    /* VOLUPTÉ */
    --volupte-bg-header-secondary: #E74C3C;
    --volupte-bg-header-primary: #4C1D1D;
    --volupte-bg-header-compromis: #9A352D;
    --volupte-text-color-header-primary: #FFF2E7;
    --volupte-text-color-header-secondary: #FFF2E7;
    --volupte-bg-main: #421A1A;
    --volupte-text-color-main: #ddd19a;
    --volupte-accent-color: #E74C3C;
    --volupte-bg-footer: #4C1D1D;
    --volupte-bg-button: #E74C3C;
    --volupte-text-color-button: #FFF2E7;
    --volupte-text-color-title: #cd895d;
    --volupte-text-color-content: #A68787;
    --volupte-bg-text-form-field: #4C1D1D;
    --volupte-text-color-form-field: #FFF2E7;

    /* OSMOSE */
    --osmose-bg-header-secondary: #679980;
    --osmose-bg-header-primary: #0f2522;
    --osmose-bg-header-compromis: #2d3d3c;
    --osmose-text-color-header-primary: #FFF;
    --osmose-text-color-header-secondary: #D1F1FF;
    --osmose-bg-main: #425251;
    --osmose-text-color-main: #679980;
    --osmose-accent-color: #cd895d;
	--osmose-bg-footer: #2d3d3c;
    --osmose-bg-button: #2d3d3c;
    --osmose-text-color-button: #cd895d; /* MODIFIÉ: Utilise la couleur d'accentuation pour un meilleur contraste */
    --osmose-text-color-title: #cd895d;
	--osmose-text-color-content: #679980;
    --osmose-bg-text-form-field: #0C0F1C;
    --osmose-text-color-form-field: #D1F1FF;

    /* Polices spécifiques au thème Osmose */
    --font-family-base: 'Merriweather Sans', sans-serif;
    --font-family-headings: 'Alice', serif;
}

/* =================================================================== */
/* --- APPLICATION DES VARIABLES DE COULEUR ET POLICE PAR NIVEAU --- */
/* =================================================================== */

/* LISIERE & Non-Catégorisé */
body.category-lisiere,
body.category-uncategorized {
    --bg-header-secondary: var(--lisiere-bg-header-secondary);
    --bg-header-primary: var(--lisiere-bg-header-primary);
    --bg-header-compromis: var(--lisiere-bg-header-compromis);
    --text-color-header-primary: var(--lisiere-text-color-header-primary);
    --text-color-header-secondary: var(--lisiere-text-color-header-secondary);
    --bg-main: var(--lisiere-bg-main);
    --text-color-main: var(--lisiere-text-color-main);
    --accent-color: var(--lisiere-accent-color);
	--bg-footer: var(--lisiere-bg-footer);
    --bg-button: var(--lisiere-bg-button);
    --text-color-button: var(--lisiere-text-color-button);
    --text-color-title: var(--lisiere-text-color-title);
    --bg-text-form-field: var(--lisiere-bg-text-form-field);
    --text-color-form-field: var(--lisiere-text-color-form-field);

    /* Polices spécifiques au thème Lisière */
    --font-family-base: 'Merriweather Sans', sans-serif;
    --font-family-headings: 'Alice', serif;
}

/* PRÉLUDE */
body.category-prelude {
    --bg-header-secondary: var(--prelude-bg-header-secondary);
    --bg-header-primary: var(--prelude-bg-header-primary);
    --bg-header-compromis: var(--prelude-bg-header-compromis);
    --text-color-header-primary: var(--prelude-text-color-header-primary);
    --text-color-header-secondary: var(--prelude-text-color-header-secondary);
    --bg-main: var(--prelude-bg-main);
    --text-color-main: var(--prelude-text-color-main);
    --accent-color: var(--prelude-accent-color);
	--bg-footer: var(--prelude-bg-footer);
	--bg-button: var(--prelude-bg-button);
    --text-color-button: var(--prelude-text-color-button);
    --text-color-title: var(--prelude-text-color-title);
    --bg-text-form-field: var(--prelude-bg-text-form-field);
    --text-color-form-field: var(--prelude-text-color-form-field);
    
    /* Polices spécifiques au thème Prélude */
    --font-family-base: 'Merriweather Sans', sans-serif;
    --font-family-headings: 'Alice', serif;
}

/* CHARME */
body.category-charme {
    --bg-header-secondary: var(--charme-bg-header-secondary);
    --bg-header-primary: var(--charme-bg-header-primary);
    --bg-header-compromis: var(--charme-bg-header-compromis);
    --text-color-header-primary: var(--charme-text-color-header-primary);
    --text-color-header-secondary: var(--charme-text-color-header-secondary);
    --bg-main: var(--charme-bg-main);
    --text-color-main: var(--charme-text-color-main);
    --accent-color: var(--charme-accent-color);
	--bg-footer: var(--charme-bg-footer);
    --bg-button: var(--charme-bg-button);
    --text-color-button: var(--charme-text-color-button);
    --text-color-title: var(--charme-text-color-title);
    --charme-text-color-content: var(--charme-text-color-content);
    --charme-bg-text-form-field: var(--charme-bg-text-form-field);
    --text-color-form-field: var(--charme-text-color-form-field);
	
    /* Polices spécifiques au thème Charme */
    --font-family-base: 'Merriweather Sans', sans-serif;
    --font-family-headings: 'Alice', serif;
}

/* VOLUPTÉ */
body.category-volupte {
    --bg-header-secondary: var(--volupte-bg-header-secondary);
    --bg-header-primary: var(--volupte-bg-header-primary); /* CORRECTION: Utilise la variable correcte */
    --bg-header-compromis: var(--volupte-bg-header-compromis);
    --text-color-header-primary: var(--volupte-text-color-header-primary);
    --text-color-header-secondary: var(--volupte-text-color-header-secondary);
    --bg-main: var(--volupte-bg-main);
    --text-color-main: var(--volupte-text-color-main);
    --accent-color: var(--volupte-accent-color);
	--bg-footer: var(--volupte-bg-footer);
    --bg-button: var(--volupte-bg-button);
    --text-color-button: var(--volupte-text-color-button);
    --text-color-title: var(--volupte-text-color-title);
    --volupte-text-color-content: var(--volupte-text-color-content);
    --volupte-bg-text-form-field: #4C1D1D;
    --volupte-text-color-form-field: #FFF2E7;

    /* Polices spécifiques au thème Volupté */
    --font-family-base: 'Merriweather Sans', sans-serif;
    --font-family-headings: 'Alice', serif;
}

/* OSMOSE */
body.category-osmose {
    --bg-header-secondary: var(--osmose-bg-header-secondary);
    --bg-header-primary: var(--osmose-bg-header-primary);
    --bg-header-compromis: var(--osmose-bg-header-compromis);
    --text-color-header-primary: var(--osmose-text-color-header-primary);
    --text-color-header-secondary: var(--osmose-text-color-header-secondary);
    --bg-main: var(--osmose-bg-main);
    --text-color-main: var(--osmose-text-color-main);
    --accent-color: var(--osmose-accent-color);
	--osmose-bg-footer: var(--osmose-bg-footer);
    --osmose-bg-button: var(--osmose-bg-button);
    --text-color-button: #cd895d; /* MODIFIÉ: Utilise la couleur d'accentuation pour un meilleur contraste */
    --text-color-title: var(--osmose-text-color-title);
	--osmose-text-color-content: var(--osmose-text-color-content);
    --osmose-bg-text-form-field: #0C0F1C;
    --osmose-text-color-form-field: #D1F1FF;

    /* Polices spécifiques au thème Osmose */
    --font-family-base: 'Merriweather Sans', sans-serif;
    --font-family-headings: 'Alice', serif;
}

/* =================================================================== */
/* --- STYLES COMMUNS (utilisent les variables ci-dessus) --- */
/* =================================================================== */

/* Styles pour la zone principale du contenu, souvent englobée par #et-main-area dans Divi,
 * mais ici ciblée pour le fond général du corps du document pour assurer la couleur de base.
 */
body[class*="category-"] {
    background-color: var(--bg-main);
    color: var(--text-color-main);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Styles spécifiques pour le fond de la page produit (single-product)
 * pour qu'il corresponde à la couleur du main du thème actif.
 */
body.single-product[class*="category-"] main#main.site-main {
    background-color: var(--bg-main) !important;
}


/* --- Titres (police Alice appliquée ici globalement, avec spécificité accrue) --- */
/* Styles généraux pour tous les titres */
html h1, html h2, html h3, html h4, html h5, html h6 {
    font-family: var(--font-family-headings);
    font-weight: bold; /* Tous les titres en gras par défaut */
    color: var(--text-color-title);
    line-height: 1.2;
    margin-bottom: 1rem; /* Marge inférieure par défaut */
}

/* Tailles de police par défaut pour les titres (desktop first) */
html h1 { font-size: 3rem; } /* Ex: Titre principal de page */
html h2 { font-size: 2.25rem; } /* Ex: Titres de section (comme "Découvre la Scribe Coquine") */
html h3 { font-size: 1.5rem; } /* Ex: Titres de blurbs */
html h4 { font-size: 1.125rem; } /* Ex: Petits titres ou messages */


/* --- Texte courant --- */
/* Ces sélecteurs sont génériques et devraient s'appliquer au texte de base */
body[class*="category-"] p,
body[class*="category-"] li {
    font-family: var(--font-family-base);
    font-size: 1.125rem; /* Taille de base pour le texte courant */
    line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
    color: var(--text-color-main);
    margin-bottom: 1.5rem; /* Marge inférieure par défaut pour les paragraphes */
}

/* --- Liens --- */
body[class*="category-"] a:not(.global-button-style) { /* Exclut tous les liens qui sont des boutons */
    color: var(--accent-color);
    text-decoration: none;
}

/* Styles pour les liens dans les headers (menu) */
header a,
.ls-secondary-header a,
nav a {
    color: var(--text-color-header-primary) !important; /* Force la couleur du texte des liens du menu */
    text-decoration: none;
}

/* Retire le cadre de focus désagréable sur les éléments interactifs */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Styles pour tous les boutons génériques */
.global-button-style {
    background-color: var(--bg-button);
    color: var(--text-color-button);
    padding: 1rem 2rem; /* Taille par défaut pour les boutons (desktop) */
    border: none;
    border-radius: 0.5rem;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre par défaut pour les boutons */
}

.global-button-style:hover {
    background-color: color-mix(in srgb, var(--accent-color) 80%, black);
    transform: scale(1.05);
}

.global-button-style:active {
    transform: translateY(0);
}
.global-button-style:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Styles pour les conteneurs de section génériques */
.section-container {
    background-color: var(--bg-header-compromis);
    color: var(--text-color-main);
    font-family: var(--font-family-base);
    padding: 4rem; /* Padding par défaut pour desktop (64px) */
    border-radius: 0.75rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 100%;
    max-width: 700px; /* Largeur maximale par défaut */
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem; /* Espacement par défaut entre les éléments internes */
}

/* Styles pour les titres principaux à l'intérieur des sections */
.section-container .section-main-title {
    font-family: var(--font-family-headings);
    font-size: 2.5rem; /* Taille de titre principale de section pour desktop */
    font-weight: bold;
    color: var(--text-color-title);
    margin-bottom: 1rem;
}

/* Styles pour les textes d'introduction des sections */
.section-container .section-intro-text {
    font-family: var(--font-family-base);
    font-size: 1.125rem; /* Taille de texte d'intro pour desktop */
    line-height: 1.6;
    margin-bottom: 2rem;
    color: var(--text-color-main);
}

/* Styles pour les grilles de blurbs */
.blurbs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes sur desktop par défaut */
    gap: 2rem;
    margin-bottom: 2.5rem;
}

/* Styles pour chaque blurb individuel */
.blurb-item {
    background-color: var(--bg-main);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
}

.blurb-item:hover {
    transform: translateY(-5px);
}

/* Styles pour les icônes de blurb */
.blurb-icon {
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    background-color: var(--accent-color); /* Couleur de l'icône (placeholder) */
    border-radius: 50%;
}

/* Styles pour les titres de blurb */
.blurb-title {
    font-family: var(--font-family-headings);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-color-title);
    margin-bottom: 0.75rem;
}

/* Styles pour le texte de blurb */
.blurb-text {
    font-family: var(--font-family-base);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color-main);
}

/* Styles pour les blocs CTA (Call to Action) */
.cta-block {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Ligne de séparation subtile */
}

/* Styles pour les titres CTA */
.cta-title {
    font-family: var(--font-family-headings);
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-color-title);
    margin-bottom: 0.75rem;
}

/* Styles pour les textes CTA */
.cta-text {
    font-family: var(--font-family-base);
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: var(--text-color-main);
}

/* =================================================================== */
/* --- STYLES POUR LE WIDGET DE CONNEXION (GLOBAL) --- */
/* =================================================================== */
.login-widget-container {
    background-color: var(--bg-header-compromis); /* Utilise la couleur de compromis du thème */
    color: var(--text-color-main); /* Utilise la couleur de texte principale du thème */
    font-family: var(--font-family-base); /* Utilise la police de base du thème */
    padding: 1.5rem; /* Padding par défaut pour le widget */
    border-radius: 0.75rem; /* Coins arrondis */
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); Ombre par défaut */
    text-align: center; /* Centrage du texte par défaut */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* Espacement entre les éléments internes */
}

/* Styles pour les champs de formulaire à l'intérieur du widget de connexion */
.login-widget-container input[type="text"],
.login-widget-container input[type="password"],
.login-widget-container input[type="email"] { /* Ajout de type email si nécessaire */
    background-color: var(--bg-text-form-field);
    color: var(--text-color-form-field);
    border: 1px solid var(--text-color-main); /* Bordure subtile */
    border-radius: 0.375rem;
    padding: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-widget-container input[type="text"]:focus,
.login-widget-container input[type="password"]:focus,
.login-widget-container input[type="email"]:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color);
}

/* Styles pour les boutons à l'intérieur du widget de connexion (utilisent global-button-style) */
.login-widget-container button,
.login-widget-container a.button { /* Pour les liens stylisés comme des boutons */
    /* Ces éléments hériteront de .global-button-style */
    width: 100%; /* Les boutons du widget prennent toute la largeur */
    margin-top: 0.5rem; /* Petite marge au-dessus des boutons */
}

/* Styles pour les liens normaux à l'intérieur du widget */
.login-widget-container a:not(.global-button-style) {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: block;
}

.login-widget-container a:not(.global-button-style):hover {
    text-decoration: underline;
}

/* Styles pour les messages de chargement/erreur/succès du widget */
.login-widget-container .loading-message,
.login-widget-container .error-message,
.login-widget-container .success-message {
    padding: 0.5rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    text-align: center;
}

.login-widget-container .error-message {
    background-color: var(--charme-accent-color); /* Rouge */
    color: var(--charme-text-color-header-primary);
}

.login-widget-container .success-message {
    background-color: var(--lisiere-accent-color); /* Vert/Cyan */
    color: var(--lisiere-text-color-header-primary);
}


/* =================================================================== */
/* --- ANIMATIONS & THEME TOGGLE (Garde les variables de thème) --- */
/* =================================================================== */

/* Gère les couleurs pour le thème inversé, si tu as un mécanisme JS pour ça */
body.theme-inverted #theme-switcher .moon-icon { display: block; }
body.theme-inverted #theme-switcher .sun-icon { display: none; }

body.category-charme.theme-inverted {
    --bg-main: var(--charme-bg-main);
    --text-color-main: var(--charme-text-color-header-primary);
    --h-color: var(--charme-text-color-header-primary);
}
body.category-volupte.theme-inverted {
    --bg-main: var(--volupte-bg-main);
    --text-color-main: var(--volupte-text-color-header-primary);
    --h-color: var(--volupte-text-color-header-primary);
}
body.category-lisiere.theme-inverted {
    --bg-main: var(--lisiere-bg-main);
    --text-color-main: var(--lisiere-text-color-header-primary);
    --h-color: var(--lisiere-text-color-header-primary);
}
body.category-osmose.theme-inverted {
    --bg-main: var(--osmose-bg-main);
    --text-color-main: var(--osmose-text-color-header-primary);
    --h-color: var(--osmose-text-color-header-primary);
}
body.category-prelude.theme-inverted {
    --bg-main: var(--prelude-bg-main);
    --text-color-main: var(--prelude-text-color-header-primary);
    --h-color: var(--prelude-text-color-header-primary);
}

/* =================================================================== */
/* --- GESTION DE MISE EN FORME DE LA SCRIBE COQUINE --- */
/* =================================================================== */
/* Surcharge définitive des styles par défaut du .bot-wrapper de l'application React.
   Cela garantit que le bot s'intègre sans ses propres bordures/marges/coins arrondis,
   laissant la section PHP parente gérer l'apparence globale. */
#scribe-coquine-root .bot-wrapper {
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important; /* Le fond sera géré par la section PHP ou les éléments internes du bot */
}

/* =================================================================== */
/* --- STYLES POUR LES IMAGES DE PRODUIT WOOCOMMERCE --- */
/* =================================================================== */
.woocommerce-product-gallery__image img.wp-post-image {
    margin-top: 30px !important; /* Ajuste cette valeur pour faire descendre l'image comme désiré */
}
/* Styles pour la classe de zoom afin qu'elle se superpose à l'image du produit */
img.zoomImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Assure que l'image de zoom s'adapte sans être coupée */
    pointer-events: none; /* Permet aux événements de souris de passer à l'élément en dessous */
    /* Tu peux ajouter d'autres styles ici si tu veux des transitions ou des opacités pour le zoom */
}

/* =================================================================== */
/* --- GESTION DE LA VIDEO EN PAGE BOUTIQUE
/* =================================================================== */

/* Styles pour le conteneur de la vidéo sur les pages de la boutique */
.ludivine-solera-product-video-wrapper {
    position: relative;
    width: 100%;
    height: auto; /* Permet à la hauteur de s'ajuster à la largeur de manière proportionnelle */
    overflow: hidden; /* Cache tout contenu qui dépasse du cadre du conteneur */
    /* Ces valeurs pourraient nécessiter des ajustements précis pour correspondre
       exactement à la taille et à la position de l'image d'origine de ton thème. */
    min-height: 262.95px; /* Définit une hauteur minimale basée sur la capture d'écran fournie */
    line-height: 0; /* Aide à éliminer l'espace vertical indésirable sous la vidéo */
}

/* Styles pour la balise vidéo elle-même */
.ludivine-solera-product-video {
    width: 100%;
    height: 100%; /* La vidéo remplira la hauteur disponible de son conteneur */
    display: block; /* Supprime l'espace vide par défaut sous les éléments en ligne */
    object-fit: cover; /* Assure que la vidéo couvre entièrement le conteneur
                          sans distorsion, en rognant si nécessaire */
    /* Reproduit la marge de l'image d'origine pour maintenir l'espacement du layout */
    margin: 0px 0px 29.124px;
}

/* Si ton thème ajoute une marge spécifique aux éléments de produit,
   tu peux avoir besoin d'ajuster ou de cibler plus précisément. */
.woocommerce ul.products li.product .ludivine-solera-product-video-wrapper {
    /* Exemple: Si une marge inférieure est appliquée par le thème au wrapper de l'image,
       assure-toi que ton wrapper vidéo a la même marge. */
    /* margin-bottom: 29.124px; */
}

/* Styles spécifiques pour les boutons "En savoir plus..." sur la page boutique (Desktop et Mobile) */
/* Ces règles sont déplacées ici depuis style-desktop.css et style-mobile.css pour centralisation */

/* Styles communs à tous les boutons d'abonnement pour assurer la cohérence de base */
li.product a.button.product_type_subscription.add_to_cart_button.ajax_add_to_cart {
    border: none !important;
    border-radius: 0.5rem !important; /* Coins arrondis pour tous les boutons */
    padding: 1rem 2rem !important; /* Padding par défaut */
    text-transform: uppercase !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Ombre pour tous les boutons */
}

/* Surcharge des paddings pour mobile si nécessaire, à placer dans style-mobile.css */
/* @media (max-width: 767px) {
    li.product a.button.product_type_subscription.add_to_cart_button.ajax_add_to_cart {
        padding: 10px 20px !important;
    }
} */


/* Styles spécifiques pour chaque abonnement (couleurs) */
li.product.product-slug-abonnement-prelude a.button.product_type_subscription.add_to_cart_button.ajax_add_to_cart {
    background-color: var(--prelude-bg-button) !important;
    color: var(--prelude-text-color-button) !important;
}

li.product.product-slug-abonnement-lisiere a.button.product_type_subscription.add_to_cart_button.ajax_add_to_cart {
    background-color: var(--lisiere-bg-button) !important;
    color: var(--lisiere-text-color-button) !important;
}

li.product.product-slug-abonnement-charme a.button.product_type_subscription.add_to_cart_button.ajax_add_to_cart {
    background-color: var(--charme-bg-button) !important;
    color: var(--charme-text-color-button) !important;
}

li.product.product-slug-abonnement-volupte a.button.product_type_subscription.add_to_cart_button.ajax_add_to_cart {
    background-color: var(--volupte-bg-button) !important;
    color: var(--volupte-text-color-button) !important;
}

li.product.product-slug-abonnement-osmose a.button.product_type_subscription.add_to_cart_button.ajax_add_to_cart {
    background-color: var(--osmose-bg-button) !important;
    color: var(--osmose-text-color-button) !important;
}

/* Styles de survol pour tous les boutons d'abonnement */
li.product a.button.product_type_subscription.add_to_cart_button.ajax_add_to_cart:hover {
    filter: brightness(0.9); /* Assombrit légèrement la couleur de fond au survol */
    transform: translateY(-2px) !important; /* Léger effet de soulèvement */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* =================================================================== */
/* --- STYLES POUR LES ONGLETS DE PRODUIT WOOCOMMERCE --- */
/* =================================================================== */
.woocommerce-tabs ul.tabs li.description_tab {
    display: none !important; /* Masque l'onglet Description */
}

span.posted_in {
    display: none !important;
}

/* Styles pour les champs de formulaire WooCommerce (déplacés de style-desktop.css) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .selection .select2-selection {
    background-color: var(--bg-text-form-field) !important;
    color: var(--text-color-form-field) !important;
    border: 1px solid var(--text-color-main) !important;
    border-radius: 0.375rem !important;
    padding: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row .select2-container .selection .select2-selection:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px var(--accent-color) !important;
}



/* =================================================================== */
/* --- STYLES POUR LES ONGLETS DE PRODUIT WOOCOMMERCE --- */
/* =================================================================== */
.woocommerce-tabs ul.tabs li.description_tab {
    display: none !important; /* Masque l'onglet Description */
}

span.posted_in {
    display: none !important;
}

/* Styles pour les champs de formulaire WooCommerce (déplacés de style-desktop.css) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .selection .select2-selection {
    background-color: var(--bg-text-form-field) !important;
    color: var(--text-color-form-field) !important;
    border: 1px solid var(--text-color-main) !important;
    border-radius: 0.375rem !important;
    padding: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row .select2-container .selection .select2-selection:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px var(--accent-color) !important;
}

/* =================================================================== */
/* --- STYLES POUR LES TABLEAUX WOOCOMMERCE (GÉNÉRALISÉ) --- */
/* =================================================================== */

/* Styles de base pour tous les tableaux WooCommerce avec la classe shop_table */
.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse; /* Fusionne les bordures des cellules */
    margin-bottom: 2rem;
    background-color: var(--bg-header-compromis); /* Couleur de fond du tableau */
    border-radius: 0.75rem; /* Coins arrondis pour le tableau */
    overflow: hidden; /* Assure que les coins arrondis s'appliquent bien */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre pour le tableau */
}

/* Styles pour les en-têtes (th) de tous les tableaux shop_table */
.woocommerce table.shop_table thead th {
    background-color: var(--bg-header-primary); /* Couleur de fond des en-têtes */
    color: var(--text-color-header-primary); /* Couleur du texte des en-têtes */
    padding: 1rem;
    text-align: left;
    font-family: var(--font-family-headings);
    font-size: 1.125rem;
    font-weight: bold;
    border-top: none; /* Supprime la bordure supérieure pour les en-têtes */
}

/* Styles pour les cellules de données (td) de tous les tableaux shop_table */
.woocommerce table.shop_table tbody td {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Bordure supérieure pour séparer les lignes */
    color: var(--text-color-main); /* Couleur du texte des cellules */
    font-family: var(--font-family-base);
    font-size: 1rem;
    background-color: var(--bg-main); /* Fond des cellules de données */
}

/* Style pour les lignes paires/impaires (optionnel, pour une meilleure lisibilité) */
.woocommerce table.shop_table tbody tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.05); /* Légère variation de couleur pour les lignes paires */
}

/* Styles pour les liens dans les tableaux shop_table (générique) */
.woocommerce table.shop_table tbody td a {
    color: var(--accent-color); /* Utilise la couleur d'accentuation pour les liens */
    text-decoration: none;
    transition: color 0.3s ease;
}

.woocommerce table.shop_table tbody td a:hover {
    text-decoration: underline;
}

/* Styles pour les boutons génériques dans les tableaux shop_table */
.woocommerce table.shop_table .button {
    background-color: var(--bg-button); /* Couleur de fond du bouton */
    color: var(--text-color-button); /* Couleur du texte du bouton */
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.woocommerce table.shop_table .button:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
}

/* Styles spécifiques pour les messages d'état (ex: "En cours") */
.woocommerce table.shop_table .order-status {
    font-weight: bold;
    /* Tu peux ajouter des couleurs spécifiques pour chaque statut si tu le souhaites */
    /* Exemple:
    &.status-on-hold { color: orange; }
    &.status-completed { color: green; }
    */
}

/* =================================================================== */
/* --- STYLES SPÉCIFIQUES POUR LA PAGE PANIER --- */
/* =================================================================== */

/* Champ de quantité dans le panier */
.woocommerce table.shop_table.cart .qty {
    background-color: var(--bg-text-form-field);
    color: var(--text-color-form-field);
    border: 1px solid var(--text-color-main);
    border-radius: 0.375rem;
    padding: 0.5rem;
    width: 60px; /* Ajuste la largeur si nécessaire */
    text-align: center;
}

/* Bouton de suppression de produit (X) dans le panier */
.woocommerce table.shop_table.cart .product-remove .remove {
    color: var(--volupte-accent-color); /* Utilise une couleur d'accentuation plus vive */
    font-size: 1.5rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.woocommerce table.shop_table.cart .product-remove .remove:hover {
    color: #ff0000; /* Rouge vif au survol */
}

/* Prix et sous-totaux dans le tableau du panier */
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal {
    color: var(--accent-color); /* Couleur spécifique pour les prix et sous-totaux */
    font-weight: bold;
}

/* Conteneur des totaux du panier (div.cart_totals) */
.woocommerce .cart-collaterals .cart_totals {
    background-color: var(--bg-header-compromis) !important; /* Utilise la variable du thème */
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Garde l'ombre si souhaité */
}

/* Titre "Total panier" */
.woocommerce .cart-collaterals h2 {
    font-family: var(--font-family-headings);
    font-size: 2.25rem; /* Taille de titre H2 par défaut */
    color: var(--text-color-title);
    margin-bottom: 1rem;
    text-align: left; /* Alignement du titre */
}

/* En-têtes (th) et cellules de données (td) dans le tableau des totaux du panier */
.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce .cart-collaterals .cart_totals table td {
    padding: 1rem; /* Utilise le padding générique ou ajuste */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Bordure cohérente */
    font-family: var(--font-family-base); /* Utilise la police du thème */
    font-size: 1rem; /* Utilise la taille de texte générique */
}

/* Styles spécifiques pour les en-têtes (th) des totaux */
.woocommerce .cart-collaterals .cart_totals table th {
    background-color: var(--bg-main); /* Utilise la variable du thème pour le fond */
    color: var(--text-color-main); /* Utilise la variable du thème pour le texte */
    text-align: left;
    font-weight: bold; /* Met en gras si c'est le style souhaité */
}

/* Styles spécifiques pour les cellules de données (td) des totaux */
.woocommerce .cart-collaterals .cart_totals table td {
    background-color: var(--bg-main); /* Utilise la variable du thème pour le fond */
    color: var(--accent-color); /* Utilise la variable d'accentuation pour les valeurs */
    text-align: right; /* Les valeurs sont généralement alignées à droite */
    font-weight: bold; /* Les valeurs sont généralement en gras */
}

/* Ajustement pour la dernière ligne "Premier renouvellement" */
.woocommerce .cart-collaterals .cart_totals table td small {
    font-size: 0.8em; /* Ajuste la taille si nécessaire */
    color: var(--text-color-main) !important; /* Couleur du texte plus clair */
    font-weight: normal !important;
}

/* Boutons "Mettre à jour le panier" et "Valider la commande" */
.woocommerce .actions .button,
.woocommerce .wc-proceed-to-checkout .checkout-button {
    background-color: var(--bg-button);
    color: var(--text-color-button);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: auto; /* Pour ne pas prendre toute la largeur */
    margin-top: 1rem;
}

.woocommerce .actions .button:hover,
.woocommerce .wc-proceed-to-checkout .checkout-button:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
}

/* =================================================================== */
/* --- STYLES SPÉCIFIQUES POUR LA PAGE DE PAIEMENT (CHECKOUT) --- */
/* =================================================================== */

/* Conteneur principal de la révision de commande sur la page de paiement */
div#order_review.woocommerce-checkout-review-order {
    background-color: var(--bg-header-compromis) !important; /* Fond du conteneur */
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding: 2rem; /* Ajout d'un padding pour l'esthétique */
    color: var(--text-color-main); /* Couleur du texte par défaut */
}

/* Boîtes de méthode de paiement (ex: Stripe) */
div.payment_box {
    background-color: var(--bg-text-form-field) !important; /* Fond des boîtes de paiement */
    color: var(--text-color-form-field) !important; /* Couleur du texte dans les boîtes de paiement */
    border-radius: 0.375rem;
    padding: 1.5rem !important; /* Padding pour l'esthétique */
    margin-top: 1rem; /* Marge au-dessus */
    margin-bottom: 1rem; /* Marge en dessous */
}

/* Ligne du formulaire "place-order" (bouton de commande et texte de confidentialité) */
div.form-row.place-order {
    background-color: var(--bg-text-form-field) !important; /* Fond de la ligne du formulaire */
    color: var(--text-color-form-field) !important; /* Couleur du texte */
    border-radius: 0.375rem;
    padding: 1.5rem !important; /* Padding pour l'esthétique */
    margin-top: 1.5rem !important; /* Marge supérieure */
}

/* Liens dans la section "place-order" (politique de confidentialité) */
div.form-row.place-order a {
    color: var(--accent-color) !important; /* Couleur des liens */
    text-decoration: underline;
}

/* Style pour les éléments de liste des méthodes de paiement (li.wc_payment_method) */
li.wc_payment_method {
    background-color: var(--bg-main) !important; /* Utilise la couleur de fond principale du thème */
    color: var(--text-color-main) !important; /* Utilise la couleur de texte principale du thème */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Bordure subtile */
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.5rem; /* Espace entre les méthodes de paiement */
}

li.wc_payment_method label {
    color: var(--text-color-main) !important; /* Assure que le texte du label est de la bonne couleur */
    font-family: var(--font-family-base);
    font-size: 1rem;
}

/* Style pour les inputs radio/checkbox des méthodes de paiement */
li.wc_payment_method input[type="radio"],
li.wc_payment_method input[type="checkbox"] {
    accent-color: var(--accent-color) !important; /* Couleur de l'accentuation pour les radios/checkbox */
    margin-right: 0.5rem;
}

/* Style pour le bouton "Place Order" (Valider la commande) */
#place_order.button.alt {
    background-color: var(--bg-button) !important; /* Utilise la couleur de fond des boutons du thème */
    color: var(--text-color-button) !important; /* Utilise la couleur du texte des boutons du thème */
    font-family: var(--font-family-base) !important; /* Utilise la police de base du thème */
    font-size: 1.125rem !important; /* Taille de police cohérente avec les autres boutons */
    font-weight: bold !important; /* Rendre le texte en gras */
    padding: 1rem 2rem !important; /* Padding cohérent avec les autres boutons */
    border-radius: 0.5rem !important; /* Coins arrondis cohérents */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Ombre cohérente */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

#place_order.button.alt:hover {
    filter: brightness(0.9); /* Effet de survol cohérent */
    transform: translateY(-2px);
}

/* =================================================================== */
/* --- STYLES SPÉCIFIQUES POUR LES TABLEAUX WOOCOMMERCE DIVERS --- */
/* =================================================================== */

/* Tableau des commandes dans Mon compte */
.woocommerce-MyAccount-content table.shop_table.my_account_orders thead th,
.woocommerce-MyAccount-content table.shop_table.my_account_orders tbody td {
    /* Hérite des styles généraux de .woocommerce table.shop_table */
}

/* Tableau des détails d'une commande */
.woocommerce table.shop_table.order_details thead th,
.woocommerce table.shop_table.order_details tbody td {
    /* Hérite des styles généraux de .woocommerce table.shop_table */
}

/* Tableau des téléchargements dans Mon compte */
.woocommerce table.shop_table.my_account_downloads thead th,
.woocommerce table.shop_table.my_account_downloads tbody td {
    /* Hérite des styles généraux de .woocommerce table.shop_table */
}

/* Tableau des adresses dans Mon compte */
.woocommerce table.shop_table.my_account_addresses thead th,
.woocommerce table.shop_table.my_account_addresses tbody td {
    /* Hérite des styles généraux de .woocommerce table.shop_table */
}

/* Tableau des méthodes de paiement dans Mon compte */
.woocommerce table.shop_table.my_account_payment_methods thead th,
.woocommerce table.shop_table.my_account_payment_methods tbody td {
    /* Hérite des styles généraux de .woocommerce table.shop_table */
}

/* Tableau de révision de commande sur la page de paiement */
.woocommerce table.shop_table.woocommerce-checkout-review-order-table thead th,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tbody td {
    /* Hérite des styles généraux de .woocommerce table.shop_table */
}