/* ==========================================================================
   14. STYLES SAPINS (NOUVEAU)
   ========================================================================== */

/* Conteneur Configuration Sapins */
.sapin-config-section {
  margin-bottom: 20px;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 10px;
}

.sapin-section-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1B5E20;
  margin: 0 0 10px 0;
}

.sapin-config-row {
  display: grid;
  grid-template-columns: 30px 2fr 1fr 1fr;
  gap: 5px;
  align-items: center;
  margin-bottom: 5px;
}

.sapin-input-label, .sapin-input-price {
  padding: 5px !important;
  font-size: 0.9rem !important;
}

.sapin-input-color {
  padding: 5px !important;
  font-size: 0.8rem !important;
}

/* Styles pour l'Affiche Sapins */
.affiche.type-sapins {
  /* CORRECTION : Suppression de !important pour permettre le changement via JS */
  background-image: url('images/image-bg-sapins.jpg'); 
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center;
  color: white;
}

.sapins-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* MODIFICATION : Utilisation de la variable CSS pour le background RGBA complet */
  background-color: var(--sapins-overlay-bg, rgba(6, 38, 0, 0.33));
  z-index: 0;
}

.sapins-header {
  width: 100%;
  padding: 1em;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.style-logo-sapins {
  height: 6em;
  width: auto;
  filter: brightness(0) invert(1); /* Logo blanc par défaut, surchargé par JS si thème clair */
}

.sapins-content-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0em 2em;
  flex-grow: 1;
}


.sapins-content-wrapper.center {
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* --- NOUVELLE STRUCTURE PRIX UNITAIRE (Titre -> Milieu(Img|Specs) -> Prix) --- */
.sapins-layout-prix {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centré globalement */
    gap: 1em; /* Espace réduit entre les blocs */
    padding-bottom: 1em;
}

/* Titre Catégorie (Blanc, sans fond, en haut) */
.sapins-cat-title-standalone {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 4em;
    text-transform: uppercase;
    /* MODIF: Couleur variable */
    color: var(--sapins-text-color, #FFFFDD);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    margin: 0;
    text-align: center;
    line-height: 1;
    z-index: 2;
}

/* Section du milieu (Image à gauche / Cadre blanc à droite) */
.sapins-middle-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 95%;
    flex-grow: 0; /* Ne prend pas tout l'espace inutilement */
    gap: 2em;
    padding: 1em 2em;
    
    /* FOND BLANC DEMANDÉ */
    background-color:rgba(255,255,255,0.80);
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    margin: 0.5em 0;
}

.sapins-middle-left {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.sapins-middle-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Cadre Specs (Transp avec bordure couleur) */
.sapins-specs-box {
    /* Fond retiré car le parent est blanc, ou léger gris si besoin */
    background: transparent; 
    border-radius: 20px;
    padding: 2em;
    /* box-shadow retiré pour style plus plat sur fond blanc */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    min-width: 60%;
    text-align: center;
    /* Border géré par JS (couleur dynamique) */
    border: 4px solid #333; 
}

/* Prix en bas (Blanc, sans fond) */
.sapins-price-standalone {
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    font-size: 10em;
    line-height: 0.8;
    /* MODIF: Couleur variable */
    color: var(--sapins-text-color, #FFFFDD);
    text-shadow: 4px 4px 10px rgba(0,0,0,0.7);
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sapins-unit-label {
    font-size: 0.15em; /* Relatif à la taille du prix (10em) -> ~1.5em */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.2em;
    opacity: 0.9;
}

.sapins-price-standalone .prix-harmonise-cents {
    font-size: 0.5em;
    vertical-align: 0.5em;
    /* MODIF: Couleur variable */
    color: var(--sapins-text-color, #FFFFDD);
}

/* --- ELEMENTS COMMUNS --- */
.sapins-main-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 3.5em;
  text-align: center;
  margin: 0.5em 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  /* MODIF: Couleur variable */
  color: var(--sapins-text-color, #FFFFDD);
  text-transform: uppercase;
}

.sapins-tarif-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  flex-grow: 1;
  width: 95%;
  margin: 0 auto;
  padding-bottom: 6em; /* Espace pour le bandeau bûche fixe */
}

.sapin-tarif-section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.8em;
  /* MODIF: Couleur variable */
  color: var(--sapins-text-color, #FFFFDD);
  /* MODIF: Border color variable aussi pour être cohérent */
  border-bottom: 2px solid var(--sapins-text-color, #FFFFDD);
  margin-bottom: 0.4em;
  padding-bottom: 0.1em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.sapin-tarif-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.3em;
  font-family: 'Open Sans', sans-serif;
}

.sapin-color-box {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.sapin-row-label {
  font-size: 1.6em;
  font-weight: 600;
  /* MODIF: Couleur variable */
  color: var(--sapins-text-color, #ffd);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.sapin-row-dots {
  flex-grow: 1;
  border-bottom: 2px dotted rgba(255,255,255,0.5);
  margin: 0 0.5em;
  position: relative;
  top: -0.3em;
}

.sapin-row-price {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.8em;
  color: #FFD700; /* Or - Peut-être à rendre variable aussi si besoin */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  min-width: 3em;
  text-align: right;
}

.sapin-row-price .prix-harmonise-int {
    font-size: 1em;
}
.sapin-row-price .prix-harmonise-cents {
    font-size: 0.7em;
    /* MODIF: Couleur variable */
    color: var(--sapins-text-color, #FFFFDD);
}

/* Bûche dans Tarif (FIXE EN BAS) */
.sapin-tarif-buche {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff; /* FOND BLANC */
    padding: 0.8em 2em;
    color: #333;
    gap: 2em;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.3);
    z-index: 10;
}

.sapin-buche-img-mini {
    height: 3.5em;
    width: auto;
}

.sapin-buche-text {
    display: flex;
    flex-direction: row; /* EN LIGNE */
    align-items: center;
    gap: 1em;
    line-height: 1;
}

.sapin-buche-text .label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2em;
    text-transform: uppercase;
}

.sapin-buche-text .value {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 2em; /* MÊME TAILLE QUE LABEL */
    color: #333333;
    margin-top: 0; /* Reset margin */
}
.sapin-buche-text .value.free {
    color: #388E3C;
}


.sapins-main-image {
    max-height: 60vh; /* Un peu réduit pour fit dans le cadre blanc */
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.3));
}

/* Le rectangle de couleur (remplace le carré) */
.sapin-color-rect {
    width: 85%; /* Largeur rectangulaire */
    height: 3em;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.sapin-size-large {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 3.5em; /* TAILLE RÉDUITE (était 4.5em) */
    line-height: 1;
    color: #333;
}


.sapins-prix-buche-badge {
    position: absolute;
    bottom: 2em;
    right: 2em;
    background: white;
    color: #333333;
    padding: 0.5em 1em;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.5em;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    transform: rotate(-5deg);
    z-index: 10;
}
.sapins-prix-buche-badge img { height: 2em; }
.sapins-prix-buche-badge span { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.2em; }

/* Styles pour BUCHE SEULE */
.sapins-content-wrapper.buche-only {
    justify-content: center;
}

.sapins-buche-solo-container {
    margin-bottom: 1em;
}

.sapins-buche-img-large {
    width: 80%;
    max-width: 15em;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}

.sapins-buche-text-large {
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    font-size: 6em;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    margin-bottom: 0.2em;
    /* FIX: Utilisation de la variable de couleur pour suivre le thème */
    color: var(--sapins-text-color, #FFFFDD);
}

.sapins-buche-text-large.free {
    /* On force aussi la variable ici pour écraser l'ancien hardcode #FFD */
    color: var(--sapins-text-color, #FFFFDD);
}

.sapins-buche-info-compl {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    color: #FFFFDD;
    text-align: center;
    max-width: 80%;
    background: rgba(0,0,0,0.5);
    padding: 0.5em 1em;
    border-radius: 10px;
    margin-top: 1em;
}