* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


 /* Couleurs principales */
:root {
    --background-color :#02282c;
    --background-color-lgt :#fff8f7;
    --text-color: #173e2a;
    --text-color-lgt : #7a9d64;
    
    --font-title: "Comfortaa", sans-serif;
    --font-txt: "Source Sans 3", sans-serif;
    
}

body {
    color: var(--text-color-lgt);
    background-color: var(--background-color);
    font-family: var(--font-txt);
    min-height: 100vh; 
}

.brand-text {
    color: var(--text-color); /* Couleur pour les lettres C */
     margin-left: 5px;
}

.header-title {
    display: flex;
    justify-content: center; /* Centrer le titre */
    align-items: center;
    text-align: center;
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: bold;
   /* color: var(--accent-color);*/

    line-height: normal;

}


.btn-outline-success {
    --bs-btn-active-bg : #6a8b58;

}
#manualBtn:disabled, #autoBtn:disabled{
    background-color: grey;
    color:white;
}

#manualBtn, #autoBtn{
    background-color : #6a8b58;
    color:white;
}

.accordion .accordion-button{
    --bs-accordion-border-width : 0px;
    --bs-border-width : 0px;
   
}

.accordion .accordion-header{
  
    font-weight: 800;
}

h2, h5, h6{
    color: var(--background-color);
}

.titleH2{
    text-align: left;
    font-weight: 800;
}


#resultSection {
    animation: fadeIn 0.8s ease-in-out;
    background-color: white;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.garden-plan{
    filter: drop-shadow(0px 0px 2px #222);
}

/*.preview-container{
width:80%;
height:80%;
display:flex;
align-items:center;
justify-content:center;
}

#elementPreview{

width:400px;
height:400px;

border-radius:12px;

background:#f9fafb;

border:2px dashed #dcdcdc;

display:flex;
align-items:center;
justify-content:center;

transition:all .25s ease;
}

#elementPreview:hover{

border-color:#198754;

}

.preview-placeholder span {
    color: #bbb;
    font-size: 1.1rem;
    font-style: italic;
    text-align: center;
}*/

.accordion-header{

}

.accordion-button {
    /*background-color: rgba(0,0,0,0.05);*/
    
}

.accordion-button:not(.collapsed){
    background-color: white;
}

.accordion-button::after {
}

.accordion-button:not {
    
}

/* CARD */
.config-card, .preview-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.buttonType{
    padding: 15px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.02);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.spacingText{
   
    text-align: left;
}

.spacingText label{
    margin: 10px 0 0 0;
}

/* le preview */
#previewContainer {
  width: 100%;
  height: 400px;
  background: #f7f6f3;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* grille */
#previewContainer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(209, 213, 219, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(209, 213, 219, 0.5) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.4;
}

/* SVG */
#previewSVG {
  width: 100%;
  height: 100%;
}

/* forme */
.shape {
  fill: url(#grassGradient);
  stroke: #2e7d32;
  stroke-width: 2;
}
.goutiere{
    border: 2px solid rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    padding-bottom: 15px;
}

#plantPalette{
    color: var(--background-color-lgt);
   /* right:20px;
    top:100px;
    width:260px;*/
    height:80vh;
    background:white;
   /* border:1px solid #ccc;*/
    border-radius:10px;
    padding:10px;
    z-index:2000;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
    display:flex;
    flex-direction:column;
}

.titleVegetaux{
    margin-bottom:5px;
    text-align: left;
    font-weight: 800;
}

#paletteFilters{
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px;
}

#paletteFilters>*{
    margin-top:5px;
}

.bg-secondary-subtle{
    --bs-secondary-bg-subtle :  #6a8b58;
}

#plantList{
    flex:1;
    overflow-y:auto;
    border-top:1px solid #eee;
    padding-top:5px;
}

.palette-plant{
    padding:6px;
    margin:4px 0;
    background:#f7f7f7;
    border-radius:6px;
    cursor:pointer;
    font-size:0.85rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.plantSCName{
    font-weight:bold; 
    color:#000;
}

.plantColor{
    width:12px;
    height:12px;
    border-radius:50%;
    display:inline-block;
}

.plantName{
    font-size:0.8rem; 
    color:#555;
}

.plantHL{
    font-size:0.75rem; 
    background-color: rgba(106, 139, 88, 0.1); 
    padding: 5px 5px 5px 0; 
    border-radius: 15px;
}

svg text{
    user-select: none;
}