/* =====================================================================
   oliviermarion.com - feuille de style de la page d'accueil
   Palette et typographie communes au site.
   ===================================================================== */

:root{
  --primary:#1abc9c;
  --primary-dark:#149c81;
  --dark:#2c3e50;
  --grey:#f5f7fc;
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--dark);line-height:1.6}
img{max-width:100%;height:auto}
.section-title{font-weight:700;text-align:center;margin-bottom:2.5rem}
section{padding:5.5rem 0}
section:nth-of-type(even){background:var(--grey)}

/* ---------- Barre de navigation ---------- */
#navbar{transition:background .3s}
#navbar.scrolled{background:rgba(44,62,80,.92);backdrop-filter:blur(6px)}
.navbar-brand{font-weight:700;letter-spacing:.03em}
.nav-link{font-weight:600}
.nav-link.active{color:var(--primary)!important}

/* ---------- Banniere ---------- */
.hero{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  position:relative;color:#fff;
  background:url('../background.png') center/cover fixed no-repeat;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:0}
.hero-content{position:relative;z-index:1}
.hero h1{font-size:clamp(2.8rem,6vw,4.8rem);font-weight:700}
.hero p.alias{font-size:clamp(1.2rem,3.5vw,1.8rem);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .5rem}

/* ---------- Biographie ---------- */
.bio-img{max-width:260px;border-radius:50%;box-shadow:0 0 0 6px var(--primary)}
.bio-cta{padding:1.1rem 2.5rem}

/* ---------- Cartes ---------- */
.card i{color:var(--primary)}

/* ---------- Parcours ---------- */
#parcours li{margin-bottom:.5rem}

/* ---------- Attestations (accordeon) ---------- */
.accordion-item{border:1px solid #e2e6ec;border-radius:8px;margin-bottom:1rem;
  box-shadow:0 2px 4px rgba(0,0,0,.04)}
.accordion-button{font-weight:600;gap:.6rem}
.accordion-button i{color:var(--primary)}
.accordion-button:not(.collapsed){color:#fff;background:var(--primary)}
.accordion-button:not(.collapsed) i{color:#fff}
.accordion-body{background:#fafbfd;border-top:1px solid #e8edf2}

/* ---------- Arbre hierarchique ---------- */
.tree{overflow-x:auto}
.tree ul{list-style:none;margin:0;padding:0;position:relative}
.tree li{position:relative;padding:1.05rem 0 1.05rem 2.25rem}
.tree li:not(:last-child){margin-bottom:.35rem}
.tree ul::before{
  content:'';position:absolute;left:1rem;top:0;bottom:0;width:2px;
  background-image:linear-gradient(var(--primary) 25%,transparent 25%,transparent 50%,
                                   var(--primary) 50%,var(--primary) 75%,transparent 75%);
  background-size:2px 12px;
}
.tree li::before{content:'';position:absolute;top:1.35rem;left:1rem;width:1.25rem;height:2px;background:var(--primary)}
.tree li:last-child::after{content:'';position:absolute;left:1rem;bottom:-.35rem;width:2px;height:.35rem;background:#fff}
.tree li div{
  background:#fff;border:1px solid #d0d7df;border-radius:8px;min-width:200px;
  padding:.65rem 1rem;font-size:.9rem;box-shadow:0 2px 6px rgba(0,0,0,.04);
  transition:transform .2s,box-shadow .2s;
}
.tree li div:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.tree span{font-weight:600;color:var(--primary)}
@media(max-width:768px){
  .tree ul::before,.tree li::before,.tree li:last-child::after{display:none}
  .tree li{padding:0;margin:0}
  .tree li div{margin-bottom:.5rem;max-width:260px}
}

/* ---------- Pied de page ---------- */
footer{background:var(--dark);color:#fff;font-size:.9rem}
footer a{color:#fff;text-decoration:none}
footer a:hover{color:var(--primary)}

/* ---------- Boutons aux couleurs du site ---------- */
.btn-primary{--bs-btn-bg:var(--primary);--bs-btn-border-color:var(--primary);
  --bs-btn-hover-bg:var(--primary-dark);--bs-btn-hover-border-color:var(--primary-dark);
  --bs-btn-active-bg:var(--primary-dark);--bs-btn-active-border-color:var(--primary-dark)}
a{color:var(--primary-dark)}
a:hover{color:var(--primary)}
.navbar a,.hero a,footer a{color:inherit}