/* Quiet-Bee — bee-theme-safe.css
   Thème couleurs "abeilles" sans modifier la mise en page.
   ✦ Pas de display/grid/flex
   ✦ Pas de width/height forcés
   ✦ Pas de positionnement qui change le flux
*/

:root{
  --bee-yellow:#F7B500;
  --bee-brown:#8B5E3C;
  --bee-green:#4CAF50;
  --bee-cream:#FFF8E7;
  --bee-black:#2E2E2E;
}

/* Couleurs générales */
html, body{
  background: var(--bee-cream);
  color: var(--bee-black);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Liens */
a{ color: var(--bee-brown); }
a:hover{ color: var(--bee-green); }

/* Titres */
h1, h2, h3, .section-title, .title{
  color: var(--bee-brown);
}

/* Boutons — on garde tes classes existantes, on change juste les couleurs */
.btn, .button, button, input[type=submit]{
  border-radius: 999px;
  border: 2px solid var(--bee-brown);
  background: var(--bee-brown);
  color: #fff;
  font-weight: 700;
}
.btn:hover, .button:hover, button:hover, input[type=submit]:hover{
  background: var(--bee-green);
  border-color: var(--bee-green);
}

/* Variante bouton clair (si tu en as besoin) */
.btn-outline, .button-outline{
  background: #fff;
  color: var(--bee-brown);
  border: 2px solid var(--bee-yellow);
}
.btn-outline:hover, .button-outline:hover{
  background: var(--bee-green);
  color: #fff;
  border-color: var(--bee-green);
}

/* Cartes / panneaux (si ton template a .card, .panel, etc.) */
.card, .panel, .feature-box, .pricing, .service, .team-item{
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

/* En-tête/floral très léger via image de fond (ne change PAS la taille) */
body{
  background-image: url('images/fleurs-bg.svg');
  background-repeat: no-repeat;
  background-position: center -60px; /* discret, au-dessus du contenu */
  background-size: 1200px auto;
}

/* Pied de page */
footer{
  background: var(--bee-brown);
  color: #fff;
  border-top: 5px solid var(--bee-yellow);
}
footer a{ color:#fff; text-decoration: underline; }

/* Pastille "abeille" optionnelle : à insérer dans ton HTML si tu veux */
.bee-badge{
  display: inline-block;
  background: rgba(247,181,0,.12);
  color: #7c4a00;
  border: 1px solid rgba(247,181,0,.35);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 12px;
}