/* ==========================================================
   Sameline DSI : charte "conseil SI, sobre"
   Fond clair, bleu profond + bleu vif, hero bleu marine.
   ========================================================== */

:root {
    --d-bg:        #f5f7fb;
    --d-white:     #ffffff;
    --d-line:      #e3e8f0;
    --d-line-2:    #cdd6e4;
    --d-text:      #1f2a3d;
    --d-muted:     #5b6880;
    --d-navy:      #0f2a4f;
    --d-navy-2:    #173a6b;
    --d-blue:      #2563eb;
    --d-blue-soft: #e8efff;
    --d-teal:      #0e9fbf;
    --d-green:     #15803d;
    --d-shadow:    0 1px 2px rgba(15, 42, 79, 0.05), 0 8px 24px -12px rgba(15, 42, 79, 0.15);
    --d-sans:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body.it {
    background: var(--d-bg);
    color: var(--d-text);
    font-family: var(--d-sans);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
body.it a { color: var(--d-blue); }
body.it a:hover { color: var(--d-navy); }

.it h1, .it h2, .it h3, .it h4 { color: var(--d-navy); font-weight: 700; letter-spacing: -0.015em; }

.it-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--d-blue);
    margin-bottom: 0.8rem;
}
.it-section-title { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: 0.8rem; }
.it-lead { color: var(--d-muted); font-size: 1.07rem; max-width: 740px; }
.text-it-muted { color: var(--d-muted) !important; }
.text-it-blue { color: var(--d-blue) !important; }

/* ---------- Navbar ---------- */
.it-nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--d-line);
    padding: 0.65rem 0;
}
.it-brand {
    display: flex; align-items: center; gap: 0.6rem;
    text-decoration: none;
    color: var(--d-navy) !important;
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: -0.01em;
}
.it-brand img { width: 34px; height: 34px; }
.it-brand .badge-dsi {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--d-blue);
    border-radius: 5px;
    padding: 0.15rem 0.45rem;
}
.it-nav .nav-link { color: var(--d-muted) !important; font-size: 0.93rem; font-weight: 500; padding: 0.5rem 0.85rem !important; }
.it-nav .nav-link:hover { color: var(--d-navy) !important; }

/* ---------- Boutons ---------- */
.btn-it {
    background: var(--d-blue);
    color: #fff !important;
    border: 1px solid var(--d-blue);
    font-weight: 600;
    border-radius: 8px;
    padding: 0.7rem 1.35rem;
    transition: background .2s, box-shadow .2s;
}
.btn-it:hover { background: #1d4fd0; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18); }
.btn-it-ghost {
    background: transparent;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-weight: 600;
    border-radius: 8px;
    padding: 0.7rem 1.35rem;
}
.btn-it-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.btn-it-outline {
    background: #fff;
    color: var(--d-navy) !important;
    border: 1px solid var(--d-line-2);
    font-weight: 600;
    border-radius: 8px;
    padding: 0.65rem 1.25rem;
}
.btn-it-outline:hover { border-color: var(--d-blue); color: var(--d-blue) !important; }
.btn-it-sm { padding: 0.45rem 0.95rem; font-size: 0.88rem; }

/* ---------- Hero (bleu marine, grille très discrète) ---------- */
.it-hero {
    position: relative;
    padding: 140px 0 96px;
    color: #fff;
    background-color: var(--d-navy);
    background-image:
        radial-gradient(ellipse at 85% 10%, rgba(37, 99, 235, 0.55), transparent 55%),
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(160deg, #0f2a4f 0%, #173a6b 100%);
    background-size: auto, 56px 56px, 56px 56px, auto;
    overflow: hidden;
}
.it-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.8vw, 3.4rem); line-height: 1.1; margin-bottom: 1.3rem; }
.it-hero h1 .hl { color: #8fb4ff; }
.it-hero p.lead { color: rgba(255, 255, 255, 0.82); font-size: 1.13rem; max-width: 570px; }
.it-hero .it-eyebrow { color: #8fb4ff; }

.it-chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.it-chip {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--d-navy);
    background: var(--d-blue-soft);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
}
.it-hero .it-chip { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); }

/* Schéma "SI connecté" */
.it-map {
    position: relative;
    max-width: 440px;
    margin-left: auto;
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 6%;
}
.it-map-inner { position: relative; width: 100%; height: 100%; }
.it-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.it-map svg line { stroke: rgba(143, 180, 255, 0.55); stroke-width: 1.2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.it-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 28%;
    background: #fff;
    border-radius: 10px;
    padding: 0.55rem 0.4rem;
    text-align: center;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
}
.it-node i { color: var(--d-blue); font-size: 1.05rem; display: block; margin-bottom: 0.2rem; }
.it-node span { font-size: 0.74rem; font-weight: 600; color: var(--d-navy); line-height: 1.2; display: block; }
.it-node.core { background: var(--d-blue); width: 32%; padding: 0.9rem 0.4rem; }
.it-node.core i, .it-node.core span { color: #fff; }
.it-node.core span { font-size: 0.86rem; }

/* ---------- Sections ---------- */
.it-section { padding: 92px 0; }
.it-section.alt { background: var(--d-white); border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); }

/* Groupes de services */
.it-group { margin-top: 3rem; }
.it-group:first-of-type { margin-top: 0; }
.it-group-head {
    display: flex; align-items: center; gap: 0.8rem;
    margin-bottom: 1.3rem;
}
.it-group-head .n {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--d-navy); color: #fff;
    font-weight: 700; font-size: 0.9rem;
    flex-shrink: 0;
}
.it-group-head h3 { font-size: 1.25rem; margin: 0; }
.it-group-head p { margin: 0; color: var(--d-muted); font-size: 0.93rem; }

/* Cartes services */
.it-card {
    height: 100%;
    background: var(--d-white);
    border: 1px solid var(--d-line);
    border-radius: 12px;
    padding: 1.5rem 1.4rem;
    box-shadow: var(--d-shadow);
    transition: border-color .2s, transform .2s;
}
.it-card:hover { border-color: #b9c9ea; transform: translateY(-2px); }
.it-card-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.it-card-icon {
    width: 40px; height: 40px;
    border-radius: 9px;
    display: grid; place-items: center;
    color: var(--d-blue);
    background: var(--d-blue-soft);
    font-size: 1rem;
    flex-shrink: 0;
}
.it-card h4 { font-size: 1.03rem; margin: 0; line-height: 1.3; }
.it-card p { color: var(--d-muted); font-size: 0.92rem; margin-bottom: 0.8rem; }
.it-card ul { list-style: none; padding: 0; margin: 0; }
.it-card ul li { font-size: 0.87rem; padding: 0.18rem 0 0.18rem 1.15rem; position: relative; }
.it-card ul li::before {
    content: ''; position: absolute; left: 0; top: 0.68em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--d-teal);
}
.it-card.featured { border-top: 3px solid var(--d-blue); }
.it-card .flag {
    display: inline-block;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--d-blue); background: var(--d-blue-soft);
    border-radius: 4px; padding: 0.1rem 0.45rem; margin-bottom: 0.6rem;
}

/* Méthode */
.it-step { height: 100%; padding: 1.4rem 1.3rem; background: var(--d-bg); border-radius: 12px; border: 1px solid var(--d-line); }
.it-step-num { font-size: 0.8rem; font-weight: 700; color: var(--d-blue); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 0.4rem; }
.it-step h3 { font-size: 1.07rem; margin-bottom: 0.4rem; }
.it-step p { color: var(--d-muted); font-size: 0.92rem; margin: 0; }

/* Formats */
.it-format { height: 100%; background: var(--d-white); border: 1px solid var(--d-line); border-radius: 12px; padding: 1.5rem; box-shadow: var(--d-shadow); }
.it-format h3 { font-size: 1.08rem; }
.it-format .meta { font-size: 0.8rem; font-weight: 600; color: var(--d-teal); margin-bottom: 0.6rem; display: block; }
.it-format p { color: var(--d-muted); font-size: 0.92rem; margin: 0; }

/* Chiffres clés */
.it-kpi { border-left: 3px solid var(--d-blue); padding-left: 0.9rem; }
.it-kpi strong { font-size: clamp(1.6rem, 2.8vw, 2.1rem); color: var(--d-navy); display: block; line-height: 1.1; }
.it-kpi span { color: var(--d-muted); font-size: 0.86rem; }

/* Profil */
.it-profile-photo {
    width: 100%; max-width: 360px; aspect-ratio: 4 / 5; object-fit: cover;
    border-radius: 14px; box-shadow: var(--d-shadow);
}
.it-timeline { list-style: none; padding: 0; margin: 0; }
.it-timeline li { display: grid; grid-template-columns: 100px 1fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--d-line); }
.it-timeline li:last-child { border-bottom: 0; }
.it-timeline .y { font-size: 0.85rem; font-weight: 600; color: var(--d-blue); padding-top: 1px; }
.it-timeline strong { color: var(--d-navy); display: block; font-size: 0.97rem; }
.it-timeline span.d { color: var(--d-muted); font-size: 0.88rem; }

/* Projets */
.it-case { height: 100%; background: var(--d-white); border: 1px solid var(--d-line); border-radius: 12px; padding: 1.5rem; box-shadow: var(--d-shadow); display: flex; flex-direction: column; }
.it-case h3 { font-size: 1.04rem; }
.it-case p { color: var(--d-muted); font-size: 0.92rem; }
.it-case .result { margin: auto 0 0; padding-top: 0.8rem; border-top: 1px solid var(--d-line); font-size: 0.88rem; font-weight: 600; color: var(--d-green); }
.it-stack-group h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--d-muted); font-weight: 600; margin-bottom: 0.6rem; }

/* Pont Sameline */
.it-bridge { border-radius: 16px; padding: 2.2rem; background: var(--d-navy); color: rgba(255, 255, 255, 0.85); }
.it-bridge h2 { color: #fff; }
.it-bridge .it-eyebrow { color: #8fb4ff; }

/* Formulaire */
.it-contact-card { background: var(--d-white); border: 1px solid var(--d-line); border-radius: 14px; padding: 2rem; box-shadow: var(--d-shadow); }
.it-form .form-control, .it-form .form-select { border: 1px solid var(--d-line-2); border-radius: 8px; padding: 0.62rem 0.85rem; color: var(--d-text); }
.it-form .form-control:focus, .it-form .form-select:focus { border-color: var(--d-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.it-form label { font-size: 0.86rem; font-weight: 500; color: var(--d-muted); margin-bottom: 0.3rem; }
.it-hp { position: absolute; left: -9999px; }
.it-alert { border-radius: 10px; padding: 0.9rem 1.1rem; font-size: 0.93rem; margin-bottom: 1.4rem; border: 1px solid; }
.it-alert.ok { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.it-alert.ko { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

/* Footer */
.it-footer { background: var(--d-navy); padding: 52px 0 32px; color: rgba(255, 255, 255, 0.78); font-size: 0.9rem; }
/* body.it .it-footer : doit battre la règle générale "body.it a" (bleu) */
body.it .it-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
body.it .it-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.it-footer h6 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-bottom: 0.9rem; }
.it-footer .it-brand { color: #fff !important; }

@media (max-width: 991.98px) {
    .it-hero { padding: 116px 0 72px; }
    .it-map { margin: 0 auto; }
    .it-section { padding: 68px 0; }
    .it-nav .navbar-collapse { padding: 0.8rem 0; }
}
@media (max-width: 575.98px) {
    .it-timeline li { grid-template-columns: 1fr; gap: 0.15rem; }
    .it-node span { font-size: 0.66rem; }
    .it-node i { font-size: 0.9rem; }
    .it-contact-card { padding: 1.4rem; }
}