/* ============================================================
   GESTPCI — Styles communs à toutes les pages
   Couleurs du logo : bordeaux #8E1B2C — bleu #1D4E9E
   ============================================================ */

body { font-family: 'Archivo', sans-serif; color: #15151B; background: #F7F5F1; }
.font-display { font-family: 'Fraunces', serif; }

/* Signature : double filet bicolore du logo */
.double-rule { display: inline-flex; flex-direction: column; gap: 3px; width: 56px; }
.double-rule span:first-child { height: 3px; background: #8E1B2C; }
.double-rule span:last-child  { height: 3px; background: #1D4E9E; width: 60%; }
.double-rule.light span:first-child { background: #fff; }
.double-rule.light span:last-child  { background: rgba(255,255,255,.55); }

/* Navigation */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: #8E1B2C; transition: width .3s;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
#navbar.scrolled { box-shadow: 0 8px 30px -12px rgba(21,21,27,.3); }

/* Boutons */
.btn-primary { background: #8E1B2C; color: #fff; transition: background .25s, transform .25s; }
.btn-primary:hover { background: #6E1421; transform: translateY(-2px); }
.btn-blue { background: #1D4E9E; color: #fff; transition: background .25s, transform .25s; }
.btn-blue:hover { background: #153B7A; transform: translateY(-2px); }
.btn-outline-white { border: 2px solid #fff; color: #fff; transition: all .25s; }
.btn-outline-white:hover { background: #fff; color: #15151B; }
.btn-outline-blue { border: 2px solid #1D4E9E; color: #1D4E9E; transition: all .25s; }
.btn-outline-blue:hover { background: #1D4E9E; color: #fff; }

/* Cartes */
.card-lift { transition: transform .35s, box-shadow .35s; }
.card-lift:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -16px rgba(21,21,27,.18); }

/* Cadre décalé autour des images */
.img-frame { position: relative; }
.img-frame::before {
  content: ''; position: absolute; inset: 0;
  transform: translate(16px,16px); border: 2px solid #8E1B2C; pointer-events: none;
}
.img-frame img { position: relative; }

/* Galerie */
.gallery-item { overflow: hidden; position: relative; }
.gallery-item img { transition: transform .6s; }
.gallery-item:hover img { transform: scale(1.06); }

/* Voile sombre uni (pas de dégradé) */
.hero-overlay { background: rgba(15, 15, 20, 0.438); }
.banner-overlay { background: rgba(15, 15, 20, 0.336); }

.counter { font-variant-numeric: tabular-nums; }

/* Quiz d'orientation */
.quiz-option { border: 2px solid #EEE9E0; transition: all .2s; cursor: pointer; }
.quiz-option:hover { border-color: #1D4E9E; }
.quiz-option.selected { border-color: #8E1B2C; background: #fff; }

/* Carrousel témoignages */
.testi-slide { display: none; }
.testi-slide.active { display: block; animation: fadeIn .5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.testi-dot { width: 10px; height: 10px; background: rgba(255,255,255,.35); transition: background .25s; }
.testi-dot.active { background: #fff; }

/* Vidéos */
.play-btn { transition: transform .25s, background .25s; }
.video-card:hover .play-btn { transform: scale(1.12); background: #8E1B2C; }

/* FAQ accordéon */
.faq-item .faq-answer { display: none; }
.faq-item.open .faq-answer { display: block; animation: fadeIn .3s ease; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .3s; }

/* Onglets formations */
.tab-btn { border-bottom: 3px solid transparent; transition: all .25s; }
.tab-btn.active { border-color: #8E1B2C; color: #8E1B2C; }

/* Timeline historique */
.timeline { position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 19px; top: 0; bottom: 0;
  width: 2px; background: #EEE9E0;
}
.timeline-dot {
  position: relative; z-index: 1;
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}