/* ----------------------------------------------------------
   VARIABLES GLOBALES
---------------------------------------------------------- */
:root {
    --bg-main: #050816;
    --bg-section: #070a1a;
    --bg-card: #1a2444;
    --border-card: #1e293b;

    --accent-primary: #38bdf8;      /* bleu vif */
    --accent-secondary: #f97316;    /* orange vif */
    --accent-green: #22c55e;

    --text-main: #e5e7eb;
    --text-muted: #7c94bd;

    --radius-lg: 1.4rem;
    --radius-md: 1rem;

    --shadow-panel: 0 18px 50px rgba(15,23,42,0.85);
    --shadow-card: 0 14px 40px rgba(0,0,0,0.3);
}

/* ----------------------------------------------------------
   BASE + CORRECTION TEXTE NOIR SUR FOND NOIR
---------------------------------------------------------- */

html,
body {
    margin: 0;
    padding: 0;
    background: radial-gradient(circle at top, #b7b8bb 0, #939dad 45%, #f5f5f5 100%) fixed;
    color: var(--text-main); /* force texte global clair */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    scroll-behavior: smooth;
}

/* Texte générique Bootstrap */
body,
p,
li,
span,
td,
th {
    color: var(--text-main);
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
    color: #f9fafb;
}

/* Liens */
a {
    color: var(--accent-primary);
    text-decoration: none !important;
}
a:hover {
    text-decoration: underline !important;
}

/* Texte "muted" Bootstrap sur fond sombre */
.text-muted {
    color: var(--text-muted) !important;
}

/* ----------------------------------------------------------
   OVERRIDES BOOTSTRAP LÉGERS (NAV, CARDS, BADGES…)
---------------------------------------------------------- */

/* NAVBAR */
.navbar {
    background: rgba(5, 8, 22, 0.92) !important;
    backdrop-filter: blur(10px);
}
.navbar-brand {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.navbar-nav .nav-link {
    color: var(--text-muted) !important;
    transition: color .2s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #fff !important;
}

/* CARTES Bootstrap (card) utilisé dans ta page PHP */
.card {
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-card);
    color: var(--text-main);
    box-shadow: var(--shadow-card);
}
.card .card-body {
    color: var(--text-main);
}
.list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-card);
    color: var(--text-main);
}

/* BREADCRUMB (fil d’Ariane) */
.breadcrumb {
    background-color: transparent;
    margin-bottom: .5rem;
}
.breadcrumb-item a {
    color: var(--accent-primary);
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

/* BADGES (comme dans ton résumé source) */
.badge.text-bg-light {
    background-color: rgba(15,23,42,0.9) !important;
    color: var(--text-main) !important;
    border-color: rgba(148,163,184,.6) !important;
}
.badge.text-bg-secondary {
    background-color: rgba(148,163,184,0.15) !important;
    color: var(--text-main) !important;
}
.badge.text-bg-success {
    background-color: rgba(34,197,94,0.25) !important;
    color: #bbf7d0 !important;
}

/* Pour les anciens bg-light éventuels */
.bg-light,
.text-bg-light {
    background-color: #020617 !important;
    color: var(--text-main) !important;
}

/* BOUTONS */
.btn-ghost {
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.4);
    color: var(--text-main);
    padding: .45rem 1rem;
    background: transparent;
}
.btn-ghost:hover {
    border-color: var(--accent-primary);
    color: #fff;
}

.btn-primary-soft {
    border-radius: 999px;
    padding: .7rem 1.6rem;
    border: none;
    font-weight: 600;
    color: #0b1020;
    background: linear-gradient(135deg, var(--accent-primary), #6366f1);
    box-shadow: 0 14px 40px rgba(56,189,248,.3);
}
.btn-primary-soft:hover {
    filter: brightness(1.08);
    box-shadow: 0 18px 50px rgba(56,189,248,.45);
}

/* Ajustement des btn Bootstrap classiques sur fond sombre */
.btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}
.btn-primary:hover {
    background-color: #0ea5e9;
    border-color: #0ea5e9;
}
.btn-outline-primary {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.btn-outline-primary:hover {
    background-color: var(--accent-primary);
    color: #0b1020;
}
.btn-outline-secondary {
    border-color: rgba(148,163,184,.6);
    color: var(--text-main);
}
.btn-outline-secondary:hover {
    background-color: rgba(148,163,184,.15);
    color: #fff;
}

/* ----------------------------------------------------------
   HERO / TITRES SECTIONS
---------------------------------------------------------- */
.hero {
    padding-top: 7rem;
    padding-bottom: 5rem;
    background:
        radial-gradient(circle at top, rgba(56,189,248,.25), transparent 50%),
        radial-gradient(circle at bottom right, rgba(249,115,22,.25), transparent 55%);
}
.hero-title {
    font-size: clamp(2.3rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.1;
}
.hero-title span { color: var(--accent-primary); }
.hero-subtitle {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 620px;
}
.hero-tagline {
    font-size: .85rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-primary);
}

/* Panel héro (colonne droite page d’accueil) */
.hero-panel {
    background: linear-gradient(145deg, rgba(15,23,42,.95), rgba(15,23,42,.7));
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    border: 1px solid rgba(148,163,184,.3);
    box-shadow: var(--shadow-panel);
}
.hero-panel-title {
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--text-muted);
    margin-bottom: .7rem;
}

/* Étapes héro */
.hero-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.hero-step-circle {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(56,189,248,.14);
    border: 1px solid rgba(56,189,248,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}
.hero-step-title {
    font-size: .9rem;
    font-weight: 600;
}
.hero-step-text {
    font-size: .82rem;
    color: var(--text-muted);
}

/* ----------------------------------------------------------
   SECTIONS SOMBRES
---------------------------------------------------------- */
.section-dark {
    background: radial-gradient(circle at top, #34445f 0, #2a3c66 40%, #111827 100%);
    padding: 4rem 0;
}
.section-title {
    font-size: 1.45rem;
    font-weight: 600;
}
.section-subtitle {
    font-size: .95rem;
    color: var(--text-muted);
    max-width: 640px;
}
.pill {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-muted);
}

/* PANELS GÉNÉRIQUES RÉUTILISABLES */
.panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-panel);
}
.panel-accent {
    border-image: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) 1;
}

/* ICONES RONDES */
.icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .6rem;
}
.icon-circle.blue { background: rgba(56,189,248,.12); color: var(--accent-primary); }
.icon-circle.orange { background: rgba(249,115,22,.12); color: var(--accent-secondary); }
.icon-circle.green { background: rgba(34,197,94,.12); color: var(--accent-green); }

/* TAGS */
.tag {
    font-size: .7rem;
    padding: .25rem .6rem;
    color: var(--text-muted);
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.4);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.tag i { font-size: .9rem; }

/* ----------------------------------------------------------
   GRILLE TARIFS
---------------------------------------------------------- */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.pricing-price {
    font-size: 1.8rem;
    font-weight: 700;
}
.pricing-price span {
    font-size: .85rem;
    color: var(--text-muted);
}

/* ----------------------------------------------------------
   PRESTATAIRES COLORÉS
---------------------------------------------------------- */
.providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    gap: 1rem;
}
.provider-card {
    border-radius: var(--radius-md);
    padding: 1rem;
    position: relative;
    color: #fff;
    overflow: hidden;
}
.provider-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 60%);
    mix-blend-mode: soft-light;
}
.provider-1 { background: linear-gradient(135deg,#f97316,#ea580c); }
.provider-2 { background: linear-gradient(135deg,#22c55e,#16a34a); }
.provider-3 { background: linear-gradient(135deg,#38bdf8,#0ea5e9); }
.provider-4 { background: linear-gradient(135deg,#8b5cf6,#6366f1); }
.provider-rank {
    position: absolute;
    top: .6rem;
    left: .7rem;
    font-size: .7rem;
    background: rgba(15,23,42,.85);
    padding: .1rem .45rem;
    border-radius:999px;
}

/* ----------------------------------------------------------
   FAQ
---------------------------------------------------------- */
.faq-item {
    border-bottom: 1px solid rgba(55,65,81,.6);
    padding: .9rem 0;
}
.faq-question {
    font-weight: 600;
    font-size: .95rem;
}
.faq-answer {
    color: var(--text-muted);
    font-size: .85rem;
    margin-top: .25rem;
}

/* ----------------------------------------------------------
   ANIMATION SCROLL “REVEAL”
---------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: all .6s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */
footer {
    background: #020617;
    border-top: 1px solid #111827;
    padding: 2rem 0;
    color: var(--text-muted);
    font-size: .85rem;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */
@media (max-width:991px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .hero { padding-top: 6rem; }
}
@media (max-width:575px) {
    .section-title { font-size: 1.25rem; }
}


.job-timeline {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
          }

          @media (min-width: 768px) {
            .job-timeline {
              flex-direction: row;
              align-items: stretch;
            }
          }

          .job-timeline-group {
            flex: 1;
          }

          .job-timeline-divider {
            width: 2px;
            background: linear-gradient(to bottom, transparent, #dee2e6, transparent);
          }

          @media (max-width: 767.98px) {
            .job-timeline-divider {
              height: 2px;
              width: 100%;
              background: linear-gradient(to right, transparent, #dee2e6, transparent);
            }
          }

          .job-bubbles {
            display: flex;
            justify-content: center;
            gap: 1.25rem;
            flex-wrap: wrap;
          }

          .job-bubble {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
            margin: 0 auto 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.08);
            cursor: pointer;
          }

          .job-bubble-gray {
            background-color: #e9ecef;
            color: #6c757d;
          }

          .job-bubble-blue {
            background-color: #0d6efd;
            color: #fff;
          }

          .job-bubble-blue-pulse {
            background-color: #0d6efd;
            color: #fff;
            animation: job-pulse 1.4s infinite;
            box-shadow: 0 0 0 0 rgba(13,110,253,.5);
          }

          .job-bubble-green {
            background-color: #198754;
            color: #fff;
          }

          .job-bubble-red {
            background-color: #dc3545;
            color: #fff;
          }

          @keyframes job-pulse {
            0% {
              box-shadow: 0 0 0 0 rgba(13,110,253,.5);
            }
            70% {
              box-shadow: 0 0 0 12px rgba(13,110,253,0);
            }
            100% {
              box-shadow: 0 0 0 0 rgba(13,110,253,0);
            }
          }

          .job-label {
            font-size: 0.75rem;
            white-space: nowrap;
          }

.me-2 {
    color : #000000;

}

.project-domain {
    font-size: 1.35rem;
    font-weight: bold;
    color: #000000; /* text-dark */
}