/* ============================================================
   APBEFS - Feuille de style principale
   Thème fidèle au site original : topbar verte, navbar grise
   ============================================================ */

:root {
  --color-primary:       #2e7d32;
  --color-primary-dark:  #1b5e20;
  --color-primary-light: #4caf50;
  --color-topbar-bg:     #2e7d32;
  --color-navbar-bg:     #eeeeee;
  --color-accent-red:    #c62828;
  --color-accent-gold:   #f9a825;
  --color-accent-blue:   #1565c0;
  --color-light:         #f5f5f5;
  --color-white:         #ffffff;
  --color-text:          #212121;
  --color-muted:         #757575;
  --color-border:        #e0e0e0;

  --font-heading: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Open Sans', 'Segoe UI', Arial, sans-serif;

  --shadow-sm:  0 1px 4px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.16);

  --radius:     4px;
  --transition: .25s ease;
  --container:  1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  line-height: 1.25;
  color: var(--color-text);
  font-weight: 700;
}
h1 { font-size: clamp(1.8rem,4vw,2.8rem); }
h2 { font-size: clamp(1.4rem,3vw,2.1rem); }
h3 { font-size: clamp(1.05rem,2vw,1.35rem); }
p  { margin-bottom: 1rem; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.4rem;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 600; font-size: .88rem;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
}
.btn-primary  { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-outline  { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-white    { background: #fff; color: var(--color-primary); }
.btn-white:hover { background: #e8f5e9; }

/* Section titles */
.section-title { text-align: center; margin-bottom: 2.5rem; }
.section-title .label {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: .3rem;
}
.section-title h2 { position: relative; padding-bottom: .75rem; }
.section-title h2::after {
  content: ''; position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 45px; height: 3px;
  background: var(--color-primary); border-radius: 2px;
}

/* Page banner */
.page-banner {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff; padding: 3.5rem 0 2rem;
  text-align: center; position: relative; overflow: hidden;
}
.page-banner h1  { color: #fff; }
.page-banner .breadcrumb { margin-top: .5rem; font-size: .85rem; opacity: .8; }
.page-banner .breadcrumb a { color: #a5d6a7; }

/* Cards */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--transition); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-body { padding: 1.25rem; }
.card-img  { width: 100%; height: 200px; object-fit: cover; }

/* Utilities */
.text-center { text-align: center; }
.text-green  { color: var(--color-primary); }
.bg-light    { background: var(--color-light); }
.py-5 { padding: 5rem 0; } .py-4 { padding: 4rem 0; } .py-3 { padding: 3rem 0; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }