:root { --dark-navy: #151828; --accent-orange: #ff6b00; --white: #ffffff; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Poppins", sans-serif; color: #222; background-color: #f7f7f7; line-height: 1.7; }
a { text-decoration: none; }
.top-bar { background-color: var(--dark-navy); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); position: sticky; top: 0; z-index: 1001; }
.top-bar-content { display: flex; justify-content: flex-end; align-items: center; }
.social-links { display: flex; align-items: center; }
.social-links a { color: var(--white); margin-left: 15px; font-size: .9rem; transition: color .3s ease; }
.social-links a:hover { color: var(--accent-orange); }
.container { width: 95%; max-width: 1400px; margin: 0 auto; }
.main-header { background-color: var(--white); padding: 18px 0; box-shadow: 0 2px 5px rgba(0,0,0,.05); position: sticky; top: 36px; z-index: 1000; }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.7rem; font-weight: 1000; }
.logo-bold { color: #ff6b00; }
.logo-orange { color: #111111; }
.main-nav ul { display: flex; list-style: none; gap: 20px; }
.main-nav a { color: #111111; font-size: 1rem; transition: color .3s ease; }
.main-nav a.active, .main-nav a:hover { color: var(--accent-orange); border-bottom: 2px solid var(--accent-orange); padding-bottom: 4px; }
@media (max-width: 900px) {
  .header-container { flex-direction: column; gap: 15px; }
  .main-nav ul { flex-wrap: wrap; justify-content: center; gap: 12px; }
}
.hero-specialite { background-color: #071a33; color: #fff; padding: 70px 20px; border-top: 1px solid rgba(255,255,255,.08); }
.hero-content { width: 90%; max-width: 1000px; margin: auto; }
.breadcrumb { color: #f28c28; font-size: .9rem; font-weight: 500; margin-bottom: 18px; }
.hero-specialite h1 { font-size: 2.8rem; line-height: 1.2; margin-bottom: 25px; }
.hero-text { max-width: 850px; font-size: 1.05rem; color: #e8edf3; }
.specialite-container { width: 90%; max-width: 1100px; margin: 60px auto; }
.info-section { background-color: #fff; padding: 40px; margin-bottom: 35px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.info-section h2, .profil-section h2 { color: #071a33; font-size: 1.7rem; margin-bottom: 22px; position: relative; padding-left: 18px; }
.info-section h2::before, .profil-section h2::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 28px; background-color: #f28c28; border-radius: 3px; }
.info-section p { margin-bottom: 16px; }
.activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.activity-card { background-color: #f7f8fa; border: 1px solid #e4e7eb; border-radius: 10px; padding: 25px; transition: transform .25s ease, box-shadow .25s ease; }
.activity-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.activity-card i { color: #f28c28; font-size: 1.8rem; margin-bottom: 15px; }
.activity-card h3 { color: #071a33; font-size: 1.1rem; margin-bottom: 10px; }
.activity-card p { font-size: .9rem; margin-bottom: 0; }
.systems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 25px; }
.system-item { display: flex; align-items: center; gap: 15px; background-color: #f7f8fa; border: 1px solid #e4e7eb; border-radius: 8px; padding: 18px; }
.system-item i { color: #f28c28; font-size: 1.4rem; }
.system-item span { color: #071a33; font-weight: 600; }
.section-intro { margin-bottom: 25px; }
.metiers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.metier-card { display: flex; gap: 20px; align-items: flex-start; background-color: #f7f8fa; border: 1px solid #e0e4e8; border-radius: 10px; padding: 25px; color: #222; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.metier-card:hover { transform: translateY(-4px); border-color: #f28c28; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.metier-icon { min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: #071a33; color: #fff; border-radius: 50%; }
.metier-icon i { font-size: 1.1rem; }
.metier-card h3 { color: #071a33; font-size: 1.05rem; margin-bottom: 8px; }
.metier-card p { font-size: .9rem; margin-bottom: 0; }
.profil-section { background-color: #fff7ed; padding: 40px; margin-bottom: 35px; border-radius: 12px; border-left: 5px solid #f28c28; }
.profil-section > p { margin-bottom: 25px; }
.profil-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.empreinte-card { background-color: #fff; border: 1px solid #eadfd2; border-radius: 10px; padding: 24px; scroll-margin-top: 120px; transition: box-shadow .25s ease, border-color .25s ease; }
.empreinte-card:target { border-color: #f28c28; box-shadow: 0 0 0 3px rgba(242,140,40,.25); }
.empreinte-card h3 { color: #071a33; font-size: 1.1rem; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f2e7da; }
.empreinte-dimension { margin-bottom: 14px; }
.empreinte-dimension:last-child { margin-bottom: 0; }
.empreinte-label { display: block; color: #9a7a55; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
.empreinte-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.empreinte-tag { display: inline-block; background-color: #fff1de; color: #b35c00; border: 1px solid #f6d9b3; border-radius: 20px; padding: 4px 12px; font-size: .78rem; font-weight: 500; }
.navigation-bottom { text-align: center; margin: 45px 0; }
.back-link { display: inline-flex; align-items: center; gap: 10px; color: #071a33; font-weight: 600; transition: color .3s ease; }
.back-link:hover { color: #f28c28; }
.site-footer { background-color: #071a33; color: #fff; text-align: center; padding: 25px 20px; font-size: .85rem; }
@media (max-width: 900px) {
  .header-container { flex-direction: column; }
  .activity-grid { grid-template-columns: repeat(2, 1fr); }
  .profil-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .hero-specialite { padding: 50px 15px; }
  .hero-specialite h1 { font-size: 2.1rem; }
  .specialite-container { width: 94%; margin: 35px auto; }
  .info-section, .profil-section { padding: 25px 20px; }
  .activity-grid, .systems-grid, .metiers-grid, .profil-grid { grid-template-columns: 1fr; }
  .main-nav a { font-size: .75rem; }
}