/*
  IPEC Formation — thème Bootstrap 5.
  Bootstrap (CDN) fournit la grille, la navbar, les cards, les boutons et
  les formulaires. Ce fichier ne contient que : les couleurs et
  typographies de marque (surcouche des variables CSS de Bootstrap), et
  quelques classes maison pour ce que Bootstrap ne fournit pas nativement
  (frise des colloques, aplats "photo" en attendant de vraies images).
*/

:root{
  --ipec-terracotta:    #B85434;
  --ipec-terracotta-dk: #8E3E22;
  --ipec-terracotta-lt: #E9BDA8;
  --ipec-sage:          #5C6E4A;
  --ipec-sage-dark:     #3F4C31;
  --ipec-sage-lt:       #C8D2B9;
  --ipec-sand:          #E4D4B8;
  --ipec-paper:         #FBF8F1;
  --ipec-cream:         #F7F2E8;
  --ipec-ink:           #1F1B16;
  --ipec-border:        #E4DCCB;

  /* Variables Bootstrap surchargées */
  --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--ipec-paper);
  --bs-body-color: var(--ipec-ink);
  --bs-border-color: var(--ipec-border);
  --bs-primary: var(--ipec-terracotta);
  --bs-primary-rgb: 184, 84, 52;
  --bs-secondary: var(--ipec-sage);
  --bs-secondary-rgb: 92, 110, 74;
  --bs-link-color: var(--ipec-terracotta-dk);
  --bs-link-hover-color: var(--ipec-terracotta);
  --bs-link-color-rgb: 142, 62, 34;
  --bs-link-hover-color-rgb: 184, 84, 52;
}

h1, h2, h3, h4, h5, h6, .navbar-brand strong{
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  letter-spacing: -0.015em;
  font-weight: 500;
}
h1{ font-weight: 400; }

/* Boutons : recolorer les variantes Bootstrap avec la palette maison */
.btn-primary{
  --bs-btn-bg: var(--ipec-terracotta);
  --bs-btn-border-color: var(--ipec-terracotta);
  --bs-btn-hover-bg: var(--ipec-terracotta-dk);
  --bs-btn-hover-border-color: var(--ipec-terracotta-dk);
  --bs-btn-active-bg: var(--ipec-terracotta-dk);
  --bs-btn-active-border-color: var(--ipec-terracotta-dk);
  --bs-btn-focus-shadow-rgb: 184, 84, 52;
}
.btn-outline-secondary{
  --bs-btn-color: var(--ipec-ink);
  --bs-btn-border-color: var(--ipec-border);
  --bs-btn-hover-bg: var(--ipec-ink);
  --bs-btn-hover-border-color: var(--ipec-ink);
  --bs-btn-active-bg: var(--ipec-ink);
  --bs-btn-active-border-color: var(--ipec-ink);
}
.btn-secondary{
  --bs-btn-bg: var(--ipec-sage);
  --bs-btn-border-color: var(--ipec-sage);
  --bs-btn-hover-bg: var(--ipec-sage-dark);
  --bs-btn-hover-border-color: var(--ipec-sage-dark);
  --bs-btn-active-bg: var(--ipec-sage-dark);
  --bs-btn-active-border-color: var(--ipec-sage-dark);
}

/* Navbar */
.navbar{ border-bottom: 1px solid var(--ipec-border); }
.navbar-brand strong{ font-size: 1.25rem; }
.nav-link.active{ font-weight: 600; color: var(--ipec-ink) !important; }

/* Aplats "photo" tant qu'aucune image n'est fournie */
.media-tile, .avatar-tile{
  background: linear-gradient(135deg, var(--ipec-terracotta-lt) 0%, var(--ipec-sand) 60%, var(--ipec-sage-lt) 100%);
}

/* Cards : léger effet de survol par-dessus le shadow-sm de Bootstrap */
.card-hover{ transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover{ transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(31,27,22,.12) !important; }

/* Rythme vertical plus généreux pour les grandes sections éditoriales */
.section-lg{ padding-top: 6rem; padding-bottom: 6rem; }
@media (max-width: 768px){ .section-lg{ padding-top: 3.5rem; padding-bottom: 3.5rem; } }

.page-hero{ padding-top: 5rem; padding-bottom: 2rem; }

/* Corps de texte éditorial : largeur de lecture confortable */
.content-body{ max-width: 72ch; font-size: 1.05rem; line-height: 1.75; }
.content-body h2{ margin-top: 1.6em; }
.content-body h3{ margin-top: 1.3em; }

/* Frise chronologique des colloques (pas de composant Bootstrap natif) */
.timeline{
  position: relative;
  padding-left: 1.75rem;
  border-left: 2px solid var(--ipec-border);
  margin-left: .5rem;
}
.timeline-item{ position: relative; }
.timeline-item::before{
  content: "";
  position: absolute; left: -2.15rem; top: .4rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ipec-terracotta);
  box-shadow: 0 0 0 4px var(--ipec-paper);
}

/* Footer */
.footer-brand a{ color: #EDE7DC; }
.footer-brand a:hover{ color: var(--ipec-terracotta-lt); }