/* ============================================================
   MIRAKAI DESIGN SYSTEM — Tokens CSS & Bootstrap 5 Overrides
   Source: ux-design-specification.md
   ============================================================ */

:root {
  /* ── Couleurs de marque ── */
  --mirakai-navy:        #1A2744;   /* Background principal, header, footer */
  --mirakai-navy-mid:    #1E3158;   /* Cards, panels, sidebar */
  --mirakai-navy-light:  #243660;   /* Hover states, bordures subtiles */

  --mirakai-gold:        #FFAA00;   /* CTA primaire, highlights, dragon accent */
  --mirakai-gold-hover:  #E69900;   /* Gold pressed state */

  --mirakai-blue-ai:     #4D9FD4;   /* Éléments IA, badges tech, liens */
  --mirakai-blue-light:  #6DB5E4;   /* Hover links, icônes secondaires */

  --mirakai-text-primary:   #FFFFFF;   /* Body text */
  --mirakai-text-secondary: #B8CCE4;   /* Labels, metadata, sous-titres */
  --mirakai-text-muted:     #7A9BB8;   /* Placeholder, disabled */

  /* ── Overrides Bootstrap 5 (lus au runtime via var(--bs-*)) ── */
  --bs-primary:          #FFAA00;
  --bs-primary-rgb:      255, 170, 0;
  --bs-secondary:        #4D9FD4;
  --bs-secondary-rgb:    77, 159, 212;
  --bs-dark:             #1A2744;
  --bs-dark-rgb:         26, 39, 68;
  --bs-body-bg:          #1A2744;
  --bs-body-color:       #FFFFFF;
  --bs-link-color:       #4D9FD4;
  --bs-link-hover-color: #6DB5E4;

  /* ── Espacement (unité 8px) ── */
  --space-xs:  0.25rem;   /*  4px */
  --space-sm:  0.5rem;    /*  8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
}

/* ============================================================
   BASE — Layout & Body
   ============================================================ */

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background-color: var(--mirakai-navy);
  color: var(--mirakai-text-primary);
}

/* ============================================================
   TYPOGRAPHIE — Échelle Rajdhani / Inter
   ============================================================ */

h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Rajdhani', sans-serif;
  color: var(--mirakai-text-primary);
}

h1, .h1 { font-size: 2.5rem;  font-weight: 600; }
h2, .h2 { font-size: 2rem;    font-weight: 600; }
h3, .h3 { font-size: 1.5rem;  font-weight: 500; }
h4, .h4 { font-size: 1.25rem; font-weight: 500; }

/* Hero display — classe utilitaire pour les titres principaux */
.display-hero {
  font-size: 3.5rem;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.1;
}

/* Badge text utility */
.text-badge {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   BOOTSTRAP COMPONENT OVERRIDES
   ============================================================ */

/* btn-primary → Gold (pas le bleu Bootstrap par défaut) */
.btn-primary {
  background-color: var(--mirakai-gold);
  border-color: var(--mirakai-gold);
  color: var(--mirakai-navy);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:active {
  background-color: var(--mirakai-gold-hover);
  border-color: var(--mirakai-gold-hover);
  color: var(--mirakai-navy);
}

/* btn-secondary → Blue-AI */
.btn-secondary {
  background-color: var(--mirakai-blue-ai);
  border-color: var(--mirakai-blue-ai);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

.btn-secondary:hover,
.btn-secondary:active {
  background-color: var(--mirakai-blue-light);
  border-color: var(--mirakai-blue-light);
  color: #ffffff;
}

/* card → fond navy-mid */
.card {
  background-color: var(--mirakai-navy-mid);
  border-color: var(--mirakai-navy-light);
  color: var(--mirakai-text-primary);
}

.card-header,
.card-footer {
  background-color: var(--mirakai-navy-light);
  border-color: var(--mirakai-navy-light);
}

/* navbar override */
.navbar {
  background-color: var(--mirakai-navy) !important;
  border-bottom: 1px solid var(--mirakai-navy-mid) !important;
  transition: box-shadow 0.2s ease;
}

/* Ensure the toggler is always tappable on mobile —
   touch-action: manipulation removes the 300 ms double-tap-zoom delay */
.navbar-toggler {
  touch-action: manipulation;
  cursor: pointer;         /* iOS Safari legacy hit-test fix */
}

.nav-link {
  color: var(--mirakai-text-secondary) !important;
}

.nav-link:hover,
.nav-link.active {
  color: var(--mirakai-text-primary) !important;
}

/* ============================================================
   ACCESSIBILITÉ — WCAG 2.1 AA
   Ratios validés: Blanc/Navy 12.5:1 ✅ AAA | Gold/Navy 6.8:1 ✅ AA+
   ============================================================ */

/* Skip link — premier élément focusable du body, visible uniquement au focus clavier */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.5rem 1.25rem;
  background-color: var(--mirakai-gold);
  color: var(--mirakai-navy);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 9999;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top 0.1s;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--mirakai-navy);
  outline-offset: 2px;
}

/* Focus ring — gold visible sur tous les fonds navy */
:focus-visible {
  outline: 3px solid var(--mirakai-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remplace le focus par défaut Bootstrap (bleu #258cfb) */
.btn:focus-visible,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 170, 0, 0.4);
  outline: 2px solid transparent;
}

/* Prefers reduced motion — WCAG 2.1 AA */
@media (prefers-reduced-motion: reduce) {
  /* Catch-all : désactive toutes les animations et transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Règles explicites pour les animations nommées (clarté documentaire WCAG) */
  .availability-dot.available {
    animation: none !important;
  }

  .skeleton {
    animation: none !important;
    background: var(--mirakai-navy-light); /* fond statique quand shimmer désactivé */
  }
}

/* ============================================================
   FORMULAIRES
   ============================================================ */

.form-control {
  background-color: var(--mirakai-navy-mid);
  border-color: var(--mirakai-navy-light);
  color: var(--mirakai-text-primary);
}

.form-control:focus {
  background-color: var(--mirakai-navy-mid);
  border-color: var(--mirakai-gold);
  color: var(--mirakai-text-primary);
}

.form-control::placeholder {
  color: var(--mirakai-text-muted);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--mirakai-text-muted);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ============================================================
   HERO — Story 1.2
   ============================================================ */

.mirakai-hero {
  padding: var(--space-3xl) 0;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.role-text {
  color: var(--mirakai-blue-ai);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.pitch {
  color: var(--mirakai-text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
}

.cta-group {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}

.btn-ghost {
  background-color: transparent;
  border: 1px solid var(--mirakai-text-secondary);
  color: var(--mirakai-text-secondary);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s;
}

.btn-ghost:hover,
.btn-ghost:active {
  border-color: var(--mirakai-text-primary);
  color: var(--mirakai-text-primary);
}

.btn-ghost:focus-visible {
  outline: 3px solid var(--mirakai-gold);
  outline-offset: 2px;
  box-shadow: none;
}

.cert-badges {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.badge-cert {
  display: inline-block;
  background-color: rgba(255, 170, 0, 0.07);
  border: 1px solid rgba(255, 170, 0, 0.35);
  color: var(--mirakai-gold);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

.hero-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.olivier-photo {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  display: block;
}

.olivier-photo-placeholder {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;
  background-color: var(--mirakai-navy-mid);
  border: 2px dashed var(--mirakai-navy-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mirakai-text-secondary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 4rem;
  font-weight: 700;
}

/* .dragon-watermark supprimé — dragon géré via .mirakai-hero::after */

.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--mirakai-text-secondary);
}

.availability-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.availability-dot.available {
  background-color: #28a745;
  animation: pulse-dot 2s ease-in-out infinite;
}

.availability-dot.soon {
  background-color: #fd7e14;
}

.availability-dot.unavailable {
  background-color: #6c757d;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1;    transform: scale(1);   }
  50%       { opacity: 0.4; transform: scale(1.4); }
}

.nav-link.active {
  color: var(--mirakai-text-primary) !important;
  border-bottom: 3px solid var(--mirakai-gold);
  padding-bottom: calc(var(--space-sm) - 3px);
}

.navbar.nav-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
}

@media (max-width: 767.98px) {
  .mirakai-hero {
    padding: var(--space-2xl) 0;
  }

  .hero-right {
    margin-top: var(--space-xl);
  }

  .cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-group .btn {
    text-align: center;
  }

  .mirakai-hero::after {
    width: 280px;
    height: 280px;
    right: -20px;
    bottom: -10px;
  }
}

/* ============================================================
   SERVICES — Story 1.3
   ============================================================ */

.services-header {
  padding: var(--space-2xl) 0 var(--space-xl);
  position: relative;
  overflow: hidden;
}

.services-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    var(--mirakai-navy) 0%,
    var(--mirakai-navy) 32%,
    rgba(26, 39, 68, 0.85) 52%,
    rgba(26, 39, 68, 0.3) 75%,
    rgba(26, 39, 68, 0.04) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.services-header .container {
  position: relative;
  z-index: 2;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--mirakai-gold);
  color: var(--mirakai-navy);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.step-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.step-item p {
  color: var(--mirakai-text-secondary);
  margin-bottom: 0;
}

.livrable-card {
  background-color: var(--mirakai-navy-light);
  border-left: 3px solid var(--mirakai-gold);
  border-radius: 0 8px 8px 0;
  padding: var(--space-lg);
  height: 100%;
}

.livrable-card ul {
  color: var(--mirakai-text-secondary);
}

.olvani-section {
  background-color: var(--mirakai-navy-mid);
  border-top: 1px solid var(--mirakai-navy-light);
}

.olvani-section p {
  color: var(--mirakai-text-secondary);
}

/* ── Calendly Modal ── */

.modal-calendly {
  max-width: 900px;
  width: 90vw;
}

.modal-calendly .modal-content {
  background-color: var(--mirakai-navy-mid);
  border-color: var(--mirakai-navy-light);
}

.modal-calendly .modal-header {
  border-color: var(--mirakai-navy-light);
}

/* ============================================================
   PORTFOLIO — Story 1.4
   ============================================================ */

.portfolio-header {
  padding: var(--space-2xl) 0 var(--space-xl);
  position: relative;
  overflow: hidden;
}

.portfolio-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    var(--mirakai-navy) 0%,
    var(--mirakai-navy) 32%,
    rgba(26, 39, 68, 0.85) 52%,
    rgba(26, 39, 68, 0.3) 75%,
    rgba(26, 39, 68, 0.04) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.portfolio-header .container {
  position: relative;
  z-index: 2;
}

.project-card {
  background-color: var(--mirakai-navy-mid);
  border: 1px solid var(--mirakai-navy-light);
  border-radius: 8px;
  padding: var(--space-lg);
  transition: border-color 0.15s;
}

.project-card:hover {
  border-color: var(--mirakai-blue-ai);
}

.tech-badge {
  display: inline-block;
  background-color: var(--mirakai-navy-light);
  border: 1px solid var(--mirakai-navy-light);
  color: var(--mirakai-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 3px;
}

/* Badges "En cours / Veille" — bordure pointillée dorée */
.tech-badge--learning {
  border-style: dashed;
  border-color: rgba(255, 170, 0, 0.4);
  color: rgba(255, 170, 0, 0.75);
  background-color: rgba(255, 170, 0, 0.06);
}

/* ── Articles Section ── */
.article-card {
  background-color: var(--mirakai-navy-mid);
  border: 1px solid var(--mirakai-navy-light);
  border-radius: 8px;
  padding: var(--space-lg);
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
}

.article-card:hover {
  border-color: var(--mirakai-blue-ai);
}

.article-source-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
}

.article-source-badge--substack {
  background-color: rgba(255, 102, 0, 0.15);
  color: #ff6600;
  border: 1px solid rgba(255, 102, 0, 0.3);
}

.article-source-badge--linkedin {
  background-color: rgba(0, 119, 181, 0.15);
  color: #0a8fd8;
  border: 1px solid rgba(0, 119, 181, 0.3);
}

.article-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.article-card-link:hover .article-title {
  color: var(--mirakai-blue-ai);
}

.article-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mirakai-blue-ai);
  margin-bottom: var(--space-xs);
  display: block;
}

.article-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--mirakai-text-primary);
  margin-bottom: var(--space-xs);
  transition: color 0.15s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-excerpt {
  font-size: 0.875rem;
  color: var(--mirakai-text-secondary);
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Skeleton loading ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--mirakai-navy-light) 25%,
    var(--mirakai-navy-mid) 50%,
    var(--mirakai-navy-light) 75%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-tag {
  height: 12px;
  width: 40%;
}

.skeleton-title {
  height: 18px;
  width: 85%;
}

.skeleton-text {
  height: 13px;
  width: 100%;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Contact Page ── */
.contact-header {
  padding: var(--space-2xl) 0 var(--space-xl);
}

.contact-card {
  background-color: var(--mirakai-navy-mid);
  border: 1px solid var(--mirakai-navy-light);
  border-radius: 8px;
  padding: var(--space-lg);
}

.contact-form-wrapper .form-control {
  background-color: var(--mirakai-navy-mid);
  border: 1px solid var(--mirakai-navy-light);
  color: var(--mirakai-text-primary);
  border-radius: 6px;
}

.contact-form-wrapper .form-control:focus {
  background-color: var(--mirakai-navy-mid);
  border-color: var(--mirakai-gold);
  color: var(--mirakai-text-primary);
  box-shadow: 0 0 0 3px rgba(255, 170, 0, 0.18);
  outline: none;
}

.contact-form-wrapper .form-control.is-invalid {
  border-color: #dc3545;
}

.contact-form-wrapper .form-control.is-valid {
  border-color: #28a745;
}

.contact-form-wrapper .form-label {
  color: var(--mirakai-text-primary);
  font-weight: 500;
}

.rgpd-notice {
  background-color: var(--mirakai-navy-mid);
  border-left: 3px solid var(--mirakai-blue-ai);
  border-radius: 0 4px 4px 0;
  padding: var(--space-sm) var(--space-md);
  color: var(--mirakai-text-secondary);
  font-size: 0.85rem;
  line-height: 1.6;
}

.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.alert-success {
  background-color: rgba(40, 167, 69, 0.12);
  color: #5cb85c;
  border: 1px solid rgba(40, 167, 69, 0.3);
  border-radius: 6px;
  padding: var(--space-md);
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.12);
  color: #e57373;
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 6px;
  padding: var(--space-md);
}

.alert-link {
  color: var(--mirakai-blue-ai);
}

/* ============================================================
   LOGO & HERO BRAND — Mirakai-H-Blanc.png
   ============================================================ */

/* Logo dans la navbar */
.navbar-brand-logo {
  padding: 4px 0;
  line-height: 1;
}

.navbar-brand-logo img {
  height: 38px;
  width: auto;
  display: block;
}

/* Logo + tagline dans le hero */
.hero-logo-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.hero-logo {
  width: 200px;
  max-width: 100%;
  height: auto;
  display: block;
}

.hero-tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mirakai-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

/* ============================================================
   TEXTURE DE FOND — Globale + Hero
   ============================================================ */

/* Grain micro-sable sur fond sombre — mix-blend-mode:screen rend les pixels clairs visibles */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.18;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 9999;
  /* will-change: transform force le compositing GPU, ce qui corrige un bug iOS Safari
     où pointer-events:none est ignoré sur les éléments avec mix-blend-mode (WebKit) */
  will-change: transform;
}

/* ── Hero : structure pleine hauteur ── */
.mirakai-hero {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
}

/* Gradient de lisibilité : bleu dense à gauche, transparent à droite */
.mirakai-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    var(--mirakai-navy) 0%,
    var(--mirakai-navy) 36%,
    rgba(26, 39, 68, 0.88) 52%,
    rgba(26, 39, 68, 0.45) 68%,
    rgba(26, 39, 68, 0.08) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Dragon ::after — fallback mobile uniquement */
.mirakai-hero::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -10px;
  width: 320px;
  height: 320px;
  background-image: url('/img/dragon.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  display: none;
}

@media (max-width: 991.98px) {
  .mirakai-hero::after {
    display: block;
  }
}

.mirakai-hero .container {
  position: relative;
  z-index: 2;
}

/* ── Dragon back-head : pleine hauteur, scalé par H ── */
/*    width: auto + height 100-110% = image aussi grande que le hero    */
.hero-dragon-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-dragon-bg img {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  height: 108%;      /* plus grand que le hero → déborde, clipé par overflow:hidden */
  width: auto;       /* aspect ratio préservé — image naturellement large */
  max-width: none;
  opacity: 0.34;
  filter: drop-shadow(0 0 100px rgba(255, 170, 0, 0.30)) brightness(1.08);
}

/* XXL (≥1400px) */
@media (min-width: 1400px) {
  .hero-dragon-bg img {
    height: 115%;
    right: -5%;
  }
}

/* LG (992–1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-dragon-bg img {
    height: 100%;
    right: -3%;
  }
}

/* Tablet (768–991px) : réduit, semi-transparent */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-dragon-bg img {
    height: 75%;
    opacity: 0.18;
    right: 0;
  }
}

/* Mobile (<768px) : masqué — ::after dragon prend le relais */
@media (max-width: 767.98px) {
  .hero-dragon-bg {
    display: none;
  }
}

/* ============================================================
   COMPÉTENCES & STACK — Section homepage
   ============================================================ */

.skills-section {
  background-color: var(--mirakai-navy-mid);
  border-top: 1px solid var(--mirakai-navy-light);
  border-bottom: 1px solid var(--mirakai-navy-light);
}

.skill-category {
  padding: var(--space-md);
  background-color: var(--mirakai-navy);
  border: 1px solid var(--mirakai-navy-light);
  border-radius: 8px;
  height: 100%;
}

.skill-category-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mirakai-gold);
  margin-bottom: var(--space-md);
}

/* ============================================================
   SERVICES — Développement & Intégration section
   ============================================================ */

.dev-section {
  background-color: var(--mirakai-navy-mid);
  border-top: 1px solid var(--mirakai-navy-light);
}

.expertise-card {
  background-color: var(--mirakai-navy);
  border: 1px solid var(--mirakai-navy-light);
  border-radius: 8px;
  padding: var(--space-lg);
  transition: border-color 0.15s;
}

.expertise-card:hover {
  border-color: var(--mirakai-gold);
}

.expertise-card ul {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.expertise-card li {
  margin-bottom: 0.35rem;
}

/* ============================================================
   NAVBAR DROPDOWN — thème Mirakai
   ============================================================ */

.dropdown-menu-dark-mirakai {
  background-color: var(--mirakai-navy-mid);
  border: 1px solid var(--mirakai-navy-light);
  border-radius: 6px;
  min-width: 220px;
  padding: var(--space-xs) 0;
}

.dropdown-menu-dark-mirakai .dropdown-item {
  color: var(--mirakai-text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: var(--space-sm) var(--space-md);
  transition: background-color 0.1s, color 0.1s;
}

.dropdown-menu-dark-mirakai .dropdown-item:hover,
.dropdown-menu-dark-mirakai .dropdown-item:focus {
  background-color: var(--mirakai-navy-light);
  color: var(--mirakai-text-primary);
}

/* Active nav avec dropdown — préserve l'underline gold */
.nav-item.dropdown > .nav-link.active {
  color: var(--mirakai-text-primary) !important;
  border-bottom: 3px solid var(--mirakai-gold);
  padding-bottom: calc(var(--space-sm) - 3px);
}

/* ============================================================
   HERO — Dragon visible + tagline brand
   ============================================================ */

/* Tagline "Code the future · Build your legend" — grande, lumineuse */
.hero-brand-tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: var(--mirakai-gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--space-md) 0;
  line-height: 1.2;
  text-shadow:
    0 0 28px rgba(255, 170, 0, 0.55),
    0 0 3px rgba(255, 170, 0, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-brand-tagline .tagline-sep {
  color: rgba(255, 170, 0, 0.55);
  font-weight: 400;
}

/* Astérisque cliquable pour le tooltip */
.tagline-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 170, 0, 0.15);
  border: 1px solid rgba(255, 170, 0, 0.5);
  color: var(--mirakai-gold);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  padding: 0;
  margin-left: 4px;
  text-shadow: none;
  transition: all 0.2s;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.tagline-info:hover,
.tagline-info:focus-visible {
  background: var(--mirakai-gold);
  color: var(--mirakai-navy);
  transform: scale(1.1);
  outline: none;
}

/* Tooltip personnalisé Bootstrap pour la baseline */
.mirakai-tooltip {
  --bs-tooltip-bg: var(--mirakai-navy);
  --bs-tooltip-color: var(--mirakai-text-primary);
  --bs-tooltip-max-width: 340px;
  --bs-tooltip-padding-x: var(--space-md);
  --bs-tooltip-padding-y: var(--space-md);
  --bs-tooltip-opacity: 1;
  --bs-tooltip-arrow-width: 14px;
  --bs-tooltip-arrow-height: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  z-index: 1080;
}

.mirakai-tooltip .tooltip-inner {
  background: var(--mirakai-navy);
  color: var(--mirakai-text-primary);
  border: 1px solid var(--mirakai-gold);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 170, 0, 0.2);
  text-align: left;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.mirakai-tooltip .tooltip-inner strong {
  color: var(--mirakai-gold);
  font-weight: 600;
}

.mirakai-tooltip .tooltip-arrow::before {
  border-right-color: var(--mirakai-gold) !important;
  border-bottom-color: var(--mirakai-gold) !important;
  border-top-color: var(--mirakai-gold) !important;
  border-left-color: var(--mirakai-gold) !important;
}

/* ============================================================
   PAGE PROFIL — Olivier Alessandri
   ============================================================ */

.profile-bio {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--mirakai-text-secondary);
}

.profile-section-card {
  background-color: var(--mirakai-navy-mid);
  border: 1px solid var(--mirakai-navy-light);
  border-left: 3px solid var(--mirakai-gold);
  border-radius: 8px;
  padding: var(--space-lg);
}

.profile-section-card h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mirakai-gold);
  margin-bottom: var(--space-md);
}