/* ============================================================
   WK CYBERGUARD — refonte visuelle
   Identité conservée : dark + néon cyber.
   Objectif : discipline, hiérarchie, finition "ops de sécurité".
   ============================================================ */

/* ==== FONTS ==== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ==== TOKENS ==== */
:root{
    --bg:#04060B;
    --bg-2:#070A12;
    --surface:#0B0E18;
    --surface-2:#10141F;
    --line:rgba(125,165,205,.12);
    --line-2:rgba(125,165,205,.22);
    --glow-line:rgba(0,229,255,.30);

    --txt:#C3CEDC;
    --txt-dim:#7A88A0;
    --txt-bright:#EAF2FB;

    --cyan:#00E5FF;
    --cyan-soft:#7FF0FF;
    --cyan-deep:#0098B5;
    --violet:#9D7BFF;
    --green:#27F08A;
    --pink:#FF2E6E;

    --display:'Orbitron', sans-serif;
    --body:'Rajdhani', sans-serif;
    --mono:'JetBrains Mono', ui-monospace, monospace;

    --maxw:1120px;
    --radius:14px;
    --ease:cubic-bezier(.2,.7,.2,1);
}

/* ==== RESET ==== */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    background:var(--bg);
    color:var(--txt);
    font-family:var(--body);
    font-size:18px;
    line-height:1.65;
    overflow-x:hidden;
    /* signature : grille fine + halo discret, fixe au scroll */
    background-image:
        radial-gradient(900px 600px at 50% -10%, rgba(0,229,255,.10), transparent 60%),
        radial-gradient(700px 500px at 100% 100%, rgba(157,123,255,.07), transparent 60%),
        linear-gradient(rgba(125,165,205,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125,165,205,.045) 1px, transparent 1px);
    background-size:auto, auto, 44px 44px, 44px 44px;
    background-attachment:fixed;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ==== UTILITAIRES ==== */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--cyan);
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}
.eyebrow::before{
    content:"";
    width:26px; height:1px;
    background:linear-gradient(90deg, var(--cyan), transparent);
}
.section-h{
    font-family:var(--display);
    font-weight:700;
    line-height:1.1;
    letter-spacing:.01em;
    color:var(--txt-bright);
    font-size:clamp(1.7rem, 1.1rem + 2vw, 2.6rem);
    margin-bottom:18px;
}
.lead{ color:var(--txt-dim); max-width:62ch; }

/* ==== NAVBAR ==== */
.nav{
    position:sticky; top:0; z-index:1000;
    backdrop-filter:blur(14px);
    background:linear-gradient(180deg, rgba(4,6,11,.92), rgba(4,6,11,.66));
    border-bottom:1px solid var(--line);
}
.nav-inner{
    max-width:var(--maxw); margin:0 auto;
    padding:14px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ width:160px; height:auto; filter:drop-shadow(0 0 9px rgba(0,229,255,.5)); }
.brand b{
    font-family:var(--display); font-weight:700; font-size:1.05rem;
    color:var(--txt-bright); letter-spacing:.04em;
}
.brand span{ color:var(--cyan); }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{
    font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
    text-transform:uppercase; color:var(--txt-dim);
    text-decoration:none; transition:color .2s var(--ease); position:relative;
}
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--cyan); }
.nav-cta{
    padding:9px 16px; border:1px solid var(--glow-line); border-radius:8px;
    color:var(--cyan) !important;
    box-shadow:0 0 0 rgba(0,229,255,0); transition:.25s var(--ease);
}
.nav-cta:hover{ background:rgba(0,229,255,.10); box-shadow:0 0 18px rgba(0,229,255,.25); }
.nav-burger{
    display:none; background:none; border:1px solid var(--line-2); border-radius:8px;
    color:var(--cyan); padding:8px 11px; font-size:1.1rem; cursor:pointer;
}

/* ==== HERO ==== */
.hero{
    position:relative;
    text-align:center;
    padding:120px 24px 110px;
    overflow:hidden;
    border-bottom:1px solid var(--line);
}
.hero::after{ /* ligne de scan discrète */
    content:""; position:absolute; left:0; right:0; top:0; height:100%;
    background:linear-gradient(rgba(0,229,255,.05), transparent 12%);
    pointer-events:none;
    animation:scan 8s linear infinite;
}
@keyframes scan{ from{ background-position:0 -100%; } to{ background-position:0 100%; } }
.hero .logo{
    width:160px; margin:0 auto 26px;
    filter:drop-shadow(0 0 22px rgba(0,229,255,.45));
}
.status-chip{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--txt-dim);
    padding:7px 14px; border:1px solid var(--line-2); border-radius:100px;
    background:rgba(11,14,24,.6); margin-bottom:28px;
}
.status-chip .dot{
    width:8px; height:8px; border-radius:50%; background:var(--green);
    box-shadow:0 0 10px var(--green); animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.45; transform:scale(.78);} }
.hero h1{
    font-family:var(--display); font-weight:900;
    font-size:clamp(2.4rem, 1.4rem + 4.5vw, 4.4rem);
    line-height:1.02; letter-spacing:.01em;
    color:var(--txt-bright);
    text-shadow:0 0 28px rgba(0,229,255,.30);
    margin-bottom:20px;
}
.hero h1 em{ font-style:normal; color:var(--cyan); }
.hero .sub{
    max-width:58ch;
    margin:0 auto 36px;
    font-family: var(--body);
    font-weight:400;
    font-size:1.18rem;
    line-height:1.65;
    color:var(--txt-dim);
};
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ==== BOUTONS ==== */
.btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 28px; border-radius:10px;
    font-family:var(--mono); font-weight:500; font-size:.82rem;
    letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
    cursor:pointer; transition:.25s var(--ease); border:1px solid transparent;
}
.btn-primary{
    background:var(--cyan); color:#04060B;
    box-shadow:0 0 24px rgba(0,229,255,.35);
}
.btn-primary:hover{ box-shadow:0 0 38px rgba(0,229,255,.6); transform:translateY(-2px); }
.btn-ghost{
    background:transparent; color:var(--cyan); border-color:var(--glow-line);
}
.btn-ghost:hover{ background:rgba(0,229,255,.08); border-color:var(--cyan); transform:translateY(-2px); }

/* ==== SECTION GENERIQUE ==== */
section.block{ padding:96px 0; position:relative; }
.divider{ height:1px; background:linear-gradient(90deg, transparent, var(--line-2), transparent); }

/* ==== À PROPOS ==== */
.about-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
.about p{ color:var(--txt); }
.about p + p{ margin-top:6px; }

/* ==== FONDATEUR ==== */
.founder{
    margin-top:54px;
    background:linear-gradient(180deg, var(--surface), var(--bg-2));
    border:1px solid var(--line); border-left:2px solid var(--cyan);
    border-radius:var(--radius);
    padding:40px clamp(22px,4vw,46px);
    position:relative;
}
.founder h2{
    font-family:var(--display); font-weight:700; color:var(--txt-bright);
    font-size:1.6rem; margin-bottom:26px;
}
.founder h3{
    font-family:var(--mono); font-weight:500; font-size:.82rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
    margin:30px 0 10px; padding-left:18px; position:relative;
}
.founder h3::before{
    content:"›"; position:absolute; left:0; color:var(--violet); font-weight:700;
}
.founder p{ color:var(--txt); }
.founder strong{ color:var(--cyan-soft); font-weight:600; }
.founder ul{ list-style:none; margin:14px 0 6px; padding:0; }
.founder ul li{
    position:relative; padding:8px 0 8px 26px; color:var(--txt);
    border-bottom:1px solid var(--line);
}
.founder ul li::before{
    content:""; position:absolute; left:4px; top:16px;
    width:7px; height:7px; border:1px solid var(--cyan); transform:rotate(45deg);
    box-shadow:0 0 8px rgba(0,229,255,.5);
}

/* ==== SERVICES ==== */
.services{ text-align:center; }
.services .eyebrow{ justify-content:center; }
.service-list{
    display:grid; gap:20px;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    margin-top:44px; text-align:left;
}
.service{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 24px;
    position:relative; overflow:hidden;
    transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.service::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--cyan), var(--violet));
    opacity:0; transition:opacity .3s var(--ease);
}
.service:hover{
    transform:translateY(-6px);
    border-color:var(--line-2);
    box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 22px rgba(0,229,255,.12);
}
.service:hover::before{ opacity:1; }
.service .icon{
    width:42px; height:42px; margin-bottom:18px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line-2); border-radius:10px;
    color:var(--cyan);
    background:rgba(0,229,255,.05);
}
.service .icon svg{ width:22px; height:22px; }
.service .tag{
    font-family:var(--mono); font-size:.66rem; letter-spacing:.18em;
    color:var(--txt-dim); text-transform:uppercase; display:block; margin-bottom:8px;
}
.service h3{
    font-family:var(--display); font-weight:500; font-size:1.05rem;
    color:var(--txt-bright); margin-bottom:10px; letter-spacing:.01em;
}
.service p{ color:var(--txt-dim); font-size:.96rem; }

/* ==== VIDEO ==== */
.video{ text-align:center; }
.video-container{
    position:relative; max-width:920px; margin:44px auto 0;
    padding-top:56.25%;
    border:1px solid var(--line-2); border-radius:var(--radius);
    box-shadow:0 0 0 1px rgba(0,229,255,.10), 0 30px 60px rgba(0,0,0,.55);
    overflow:hidden; background:var(--bg-2);
}
.video-container video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* ==== POURQUOI NOUS ==== */
.why-us .why-grid{
    display:grid; gap:16px; margin-top:40px;
    grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}
.why-card{
    display:flex; gap:16px; align-items:flex-start;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:24px;
    transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.why-card:hover{ border-color:rgba(39,240,138,.4); transform:translateY(-4px); }
.why-card .check{
    flex:none; width:34px; height:34px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    color:var(--green); border:1px solid rgba(39,240,138,.35);
    background:rgba(39,240,138,.06);
}
.why-card span{ color:var(--txt); font-size:1.02rem; line-height:1.5; }

/* ==== CONTACT ==== */
.contact{ text-align:center; }
.contact-shell{
    max-width:560px; margin:40px auto 0;
    background:linear-gradient(180deg, var(--surface), var(--bg-2));
    border:1px solid var(--line); border-radius:var(--radius);
    padding:40px clamp(22px,4vw,42px);
}
#contact-form{ display:flex; flex-direction:column; gap:14px; text-align:left; }
#contact-form label{
    font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--txt-dim); margin-bottom:-6px;
}
#contact-form input, #contact-form textarea{
    width:100%; padding:14px 16px; border-radius:10px;
    background:var(--bg); color:var(--txt-bright);
    border:1px solid var(--line-2); outline:none;
    font-family:var(--body); font-size:1rem; transition:.2s var(--ease);
}
#contact-form textarea{ min-height:130px; resize:vertical; }
#contact-form input::placeholder, #contact-form textarea::placeholder{ color:#566377; }
#contact-form input:focus, #contact-form textarea:focus{
    border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,.12);
}
#contact-form button{
    margin-top:6px; padding:15px; border:none; border-radius:10px;
    background:var(--cyan); color:#04060B; cursor:pointer;
    font-family:var(--mono); font-weight:500; letter-spacing:.1em; text-transform:uppercase;
    box-shadow:0 0 22px rgba(0,229,255,.3); transition:.25s var(--ease);
}
#contact-form button:hover{ box-shadow:0 0 36px rgba(0,229,255,.55); transform:translateY(-2px); }
.form-status{ margin-top:6px; font-family:var(--mono); font-size:.82rem; }
.form-status.success{ color:var(--green); }
.form-status.error{ color:var(--pink); }

/* ==== PAGES LEGALES ==== */
.legal{ max-width:840px; margin:0 auto; padding:80px 24px 40px; }
.legal h1{
    font-family:var(--mono); font-size:.9rem; font-weight:500;
    letter-spacing:.06em; color:var(--cyan); text-transform:uppercase;
    margin:38px 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.legal h1:first-of-type{ margin-top:0; }
.legal p{ color:var(--txt); margin-bottom:6px; }
.legal strong{ color:var(--cyan-soft); }
.legal a.btn{ margin-top:40px; }

/* ==== FOOTER ==== */
footer{
    border-top:1px solid var(--line);
    background:var(--bg-2);
    padding:44px 24px 36px;
    text-align:center;
}
.footer-inner{ max-width:var(--maxw); margin:0 auto; }
.footer-brand{
    font-family:var(--display); color:var(--txt-bright); font-size:1.1rem;
    letter-spacing:.04em; margin-bottom:14px;
}
.footer-brand span{ color:var(--cyan); }
.footer-links{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.footer-links a{
    font-family:var(--mono); font-size:.74rem; letter-spacing:.05em;
    text-transform:uppercase; color:var(--txt-dim); text-decoration:none;
    padding:6px 12px; border:1px solid var(--line); border-radius:7px;
    transition:.2s var(--ease);
}
.footer-links a:hover{ color:var(--cyan); border-color:var(--glow-line); }
.footer-copy{ color:var(--txt-dim); font-size:.84rem; font-family:var(--mono); letter-spacing:.04em; }

/* ==== CYBER AI WIDGET ==== */
#cyber-ai-widget{
    position:fixed; bottom:22px; right:22px; width:330px; max-height:440px;
    background:linear-gradient(180deg, rgba(8,11,20,.97), rgba(4,6,11,.97));
    border:1px solid var(--glow-line); border-radius:16px;
    box-shadow:0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(0,229,255,.08);
    font-family:var(--body); display:flex; flex-direction:column;
    z-index:9999; overflow:hidden; transition:max-height .35s var(--ease), transform .3s var(--ease);
}
#cyber-ai-widget.collapsed{ max-height:54px; }
#cyber-ai-header{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:15px 16px; cursor:pointer; user-select:none;
    border-bottom:1px solid var(--line);
    background:linear-gradient(90deg, rgba(0,229,255,.08), transparent);
}
#cyber-ai-header .title{
    display:flex; align-items:center; gap:9px;
    font-family:var(--mono); font-size:.78rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--cyan); font-weight:500;
}
#cyber-ai-header .title .dot{
    width:7px; height:7px; border-radius:50%; background:var(--green);
    box-shadow:0 0 8px var(--green); animation:pulse 2s ease-in-out infinite;
}
#cyber-ai-toggle{ color:var(--txt-dim); font-size:1rem; line-height:1; transition:transform .3s var(--ease); }
#cyber-ai-widget.collapsed #cyber-ai-toggle{ transform:rotate(180deg); }
#cyber-ai-body{ flex:1; display:flex; flex-direction:column; padding:10px; overflow:hidden; }
#cyber-ai-messages{ flex:1; overflow-y:auto; margin-bottom:10px; padding-right:4px; }
#cyber-ai-messages::-webkit-scrollbar{ width:6px; }
#cyber-ai-messages::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:4px; }
.cyber-ai-message{
    margin:6px 0; padding:9px 12px; border-radius:10px;
    font-size:.9rem; line-height:1.45; white-space:pre-line; word-wrap:break-word;
    max-width:88%; opacity:0; animation:fadeIn .4s forwards;
}
@keyframes fadeIn{ to{ opacity:1; } }
.cyber-ai-user{
    margin-left:auto; background:var(--cyan); color:#04060B; border-bottom-right-radius:3px;
}
.cyber-ai-bot{
    margin-right:auto; background:var(--surface-2); color:var(--txt);
    border:1px solid var(--line); border-bottom-left-radius:3px;
}
.cyber-ai-message.typing{ display:inline-flex; gap:5px; padding:14px; }
.cyber-ai-message.typing::after{
    content:"●  ●  ●"; letter-spacing:2px; color:var(--cyan);
    animation:blink 1.2s infinite; font-size:.7rem;
}
@keyframes blink{ 0%,100%{opacity:.3;} 50%{opacity:1;} }
#cyber-ai-input-container{ display:flex; gap:6px; }
#cyber-ai-input{
    flex:1; padding:11px 12px; border-radius:9px;
    border:1px solid var(--line-2); background:var(--bg); color:var(--txt-bright);
    outline:none; font-family:var(--body); font-size:.95rem; transition:.2s var(--ease);
}
#cyber-ai-input:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,.12); }
#cyber-ai-send{
    padding:11px 14px; border:none; border-radius:9px; cursor:pointer;
    background:var(--cyan); color:#04060B; font-weight:700; transition:.2s var(--ease);
}
#cyber-ai-send:hover{ box-shadow:0 0 16px rgba(0,229,255,.5); }

/* ==== ACCESSIBILITÉ ==== */
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
    *{ animation:none !important; scroll-behavior:auto !important; transition:none !important; }
}

/* ==== RESPONSIVE ==== */
@media (max-width:860px){
    .nav-links{
        position:fixed; inset:62px 0 auto 0;
        flex-direction:column; align-items:stretch; gap:0;
        background:rgba(4,6,11,.98); border-bottom:1px solid var(--line);
        padding:8px 24px 18px; transform:translateY(-130%); transition:transform .35s var(--ease);
    }
    .nav-links.open{ transform:translateY(0); }
    .nav-links a{ padding:14px 0; border-bottom:1px solid var(--line); }
    .nav-cta{ margin-top:10px; text-align:center; border-bottom:none !important; }
    .nav-burger{ display:inline-block; }
}
@media (max-width:560px){
    body{ font-size:17px; }
    section.block{ padding:70px 0; }
    .hero{ padding:90px 20px 80px; }
    #cyber-ai-widget{ width:calc(100vw - 32px); right:16px; bottom:16px; }
}

/* ============================================================
   AJOUTS : cartes cliquables, modale détails, diagnostic IA
   ============================================================ */

/* ==== AFFORDANCE CARTE SERVICE ==== */
.service{ cursor:pointer; }
.service-more{
    display:inline-block; margin-top:16px;
    font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--cyan);
    opacity:.6; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.service:hover .service-more, .service:focus-visible .service-more{ opacity:1; transform:translateX(4px); }

/* ==== MODALE ==== */
.modal-overlay{
    position:fixed; inset:0; z-index:10000; display:none;
    align-items:center; justify-content:center; padding:24px;
    background:rgba(2,4,9,.78); backdrop-filter:blur(8px);
}
.modal-overlay.open{ display:flex; animation:overlayIn .25s var(--ease); }
@keyframes overlayIn{ from{ opacity:0; } to{ opacity:1; } }
.modal{
    position:relative; width:min(680px, 100%); max-height:88vh; overflow-y:auto;
    background:linear-gradient(180deg, var(--surface), var(--bg-2));
    border:1px solid var(--line-2); border-top:2px solid var(--cyan);
    border-radius:18px; padding:38px clamp(22px,4vw,44px) 34px;
    box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(0,229,255,.06);
    animation:modalIn .32s var(--ease);
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(22px) scale(.98); } to{ opacity:1; transform:none; } }
.modal::-webkit-scrollbar{ width:8px; }
.modal::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:4px; }
.modal-close{
    position:absolute; top:16px; right:16px;
    width:38px; height:38px; border-radius:10px; cursor:pointer;
    background:rgba(255,255,255,.03); border:1px solid var(--line-2);
    color:var(--txt-dim); font-size:1rem; transition:.2s var(--ease);
}
.modal-close:hover{ color:var(--cyan); border-color:var(--glow-line); background:rgba(0,229,255,.08); }
.modal-tag{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.24em;
    text-transform:uppercase; color:var(--cyan); display:block; margin-bottom:8px;
}
.modal-title{
    font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,1.1rem+1.6vw,2rem);
    color:var(--txt-bright); margin-bottom:14px; line-height:1.1;
}
.modal-intro{ color:var(--txt-dim); margin-bottom:8px; }
.modal-section{ margin-top:30px; }
.modal-section h3{
    font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--violet); margin-bottom:14px; padding-bottom:10px;
    border-bottom:1px solid var(--line);
}
.modal-section p{ color:var(--txt); }

/* étapes méthodologie */
.modal-steps{ list-style:none; counter-reset:step; padding:0; }
.modal-steps li{
    counter-increment:step; position:relative;
    padding:0 0 22px 52px; color:var(--txt);
}
.modal-steps li:not(:last-child)::after{ /* ligne verticale */
    content:""; position:absolute; left:17px; top:36px; bottom:-2px; width:1px;
    background:linear-gradient(var(--glow-line), transparent);
}
.modal-steps li::before{
    content:counter(step,decimal-leading-zero); position:absolute; left:0; top:0;
    width:36px; height:36px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--cyan);
    background:rgba(0,229,255,.06); border:1px solid var(--glow-line);
}
.modal-steps li b{ display:block; color:var(--txt-bright); font-weight:600; margin-bottom:2px; }

/* livrables */
.modal-livrables{ list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; }
.modal-livrables li{
    position:relative; padding:10px 14px 10px 38px; color:var(--txt);
    background:var(--bg); border:1px solid var(--line); border-radius:10px; font-size:.96rem;
}
.modal-livrables li::before{
    content:"✓"; position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--green); font-weight:700;
}
.modal-note{
    margin-top:24px; padding:14px 16px; border-radius:10px;
    background:rgba(255,46,110,.06); border:1px solid rgba(255,46,110,.3);
    color:#ffb3c8; font-size:.9rem;
}
.modal-cta{ margin-top:30px; width:100%; justify-content:center; }
body.modal-open{ overflow:hidden; }

/* ==== CARTE DE DIAGNOSTIC (chat IA) ==== */
.cyber-ai-bot.rich{
    max-width:100%; width:100%; background:transparent; border:none; padding:0;
}
.diag-card{
    background:var(--surface-2); border:1px solid var(--line-2);
    border-left:3px solid var(--diag-c, var(--cyan));
    border-radius:12px; padding:14px; font-size:.88rem;
}
.diag-head{
    display:flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
    color:var(--txt-bright); text-transform:uppercase; margin-bottom:8px;
}
.diag-head .ico{ font-size:1rem; }
.diag-line{ color:var(--txt); margin-bottom:12px; line-height:1.45; }

/* indice de criticité animé */
.vuln{ margin-bottom:12px; }
.vuln-top{
    display:flex; justify-content:space-between; align-items:baseline;
    font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--txt-dim); margin-bottom:6px;
}
.vuln-num{ color:var(--diag-c, var(--cyan)); font-size:.95rem; font-weight:700; }
.vuln-bar{
    height:8px; border-radius:6px; overflow:hidden;
    background:rgba(255,255,255,.06); position:relative;
}
.vuln-fill{
    display:block; height:100%; width:0%;
    background:var(--diag-c, var(--cyan));
    border-radius:6px; transition:width 1s var(--ease);
    box-shadow:0 0 12px var(--diag-c, var(--cyan));
}
.vuln-label{
    margin-top:6px; font-family:var(--mono); font-size:.66rem;
    letter-spacing:.06em; color:var(--txt-dim);
}

/* demande pré-écrite */
.diag-pref{
    background:var(--bg); border:1px dashed var(--line-2); border-radius:9px;
    padding:10px 12px; margin-bottom:12px;
}
.diag-pref .pref-h{
    font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--cyan); margin-bottom:6px;
}
.diag-pref .pref-text{ color:var(--txt); font-size:.84rem; line-height:1.5; }

/* boutons du diagnostic */
.diag-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.diag-btn{
    flex:1; min-width:120px; padding:9px 12px; border-radius:8px; cursor:pointer;
    font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
    transition:.2s var(--ease); border:1px solid transparent;
}
.diag-btn.solid{ background:var(--cyan); color:#04060B; }
.diag-btn.solid:hover{ box-shadow:0 0 16px rgba(0,229,255,.5); }
.diag-btn.ghost{ background:transparent; color:var(--cyan); border-color:var(--glow-line); }
.diag-btn.ghost:hover{ background:rgba(0,229,255,.08); }

/* ==== MINI-POPUP : DEMANDE DE PRESTATION ==== */
.modal.modal-sm{ width:min(480px, 100%); }
.req-form{ display:flex; flex-direction:column; gap:13px; margin-top:24px; }
.req-form label{
    font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--txt-dim); margin-bottom:-7px;
}
.req-form input, .req-form textarea{
    width:100%; padding:13px 15px; border-radius:10px;
    background:var(--bg); color:var(--txt-bright);
    border:1px solid var(--line-2); outline:none;
    font-family:var(--body); font-size:1rem; transition:.2s var(--ease);
}
.req-form textarea{ min-height:104px; resize:vertical; }
.req-form input::placeholder, .req-form textarea::placeholder{ color:#566377; }
.req-form input:focus, .req-form textarea:focus{
    border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,.12);
}
.req-submit{ margin-top:6px; width:100%; justify-content:center; border:none; cursor:pointer; }
.req-done{
    margin-top:24px; text-align:center; padding:26px 18px;
    border:1px solid rgba(39,240,138,.35); border-radius:12px;
    background:rgba(39,240,138,.06);
}
.req-done .big{ font-size:2rem; }
.req-done p{ color:var(--txt-bright); margin-top:8px; }
.req-done span{ color:var(--txt-dim); font-size:.92rem; }

/* ==== RÉFÉRENCES & CERTIFICATIONS ==== */
.refs .ref-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:42px; }
.ref-card{
    display:flex; align-items:center; gap:16px;
    background:linear-gradient(100deg, rgba(157,123,255,.12), rgba(0,229,255,.08));
    border:1px solid var(--line-2); border-radius:var(--radius); padding:22px 24px;
}
.ref-logo{ flex:none; display:flex; align-items:center; justify-content:center; }
.ref-logo.white{
    width:56px; height:56px; border-radius:12px; background:#fff; padding:6px;
    box-shadow:0 0 16px rgba(255,255,255,.12);
}
.ref-logo.white img{ width:100%; height:100%; object-fit:contain; }
.ref-ic{
    width:50px; height:50px; flex:none; border:1px solid var(--line-2); border-radius:12px;
    background:rgba(0,229,255,.06); display:flex; align-items:center; justify-content:center; color:var(--cyan);
}
.ref-ic svg{ width:26px; height:26px; }
.ref-lab{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--violet); margin-bottom:7px; }
.ref-lab.cyan{ color:var(--cyan); }
.ref-val{ color:var(--txt); font-size:.98rem; line-height:1.45; }
.ref-val b{ color:var(--cyan-soft); font-weight:600; }
.ref-link{ display:inline-block; margin-top:8px; font-family:var(--mono); font-size:.78rem; color:var(--cyan); text-decoration:none; letter-spacing:.04em; transition:.2s var(--ease); }
.ref-link:hover{ text-shadow:0 0 12px rgba(0,229,255,.5); transform:translateX(3px); }
.ref-score{
    margin-left:auto; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:76px; height:76px; border-radius:50%; border:2px solid var(--green);
    background:rgba(39,240,138,.08); box-shadow:0 0 22px rgba(39,240,138,.3);
}
.ref-score b{ font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--green); line-height:1; }
.ref-score em{ font-style:normal; font-family:var(--mono); font-size:.6rem; letter-spacing:.05em; color:var(--txt-dim); margin-top:3px; }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; }
.trust-item{
    display:flex; align-items:center; gap:14px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
    transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.trust-item:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.trust-item span{ font-size:.95rem; color:var(--txt); line-height:1.35; }
.trust-item span b{ color:var(--cyan-soft); font-weight:600; }
@media (max-width:860px){
    .refs .ref-grid{ grid-template-columns:1fr; }
    .trust-grid{ grid-template-columns:1fr; }
    .ref-card{ flex-wrap:wrap; }
}

/* ==== POURQUOI NOUS — version vendeuse ==== */
.why-us .lead{ margin-top:-4px; }
.value-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:18px; margin-top:40px; }
.value-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;
    position:relative; overflow:hidden;
    transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.value-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--cyan), var(--violet)); opacity:0; transition:opacity .3s var(--ease);
}
.value-card:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 22px rgba(0,229,255,.12); }
.value-card:hover::before{ opacity:1; }
.value-card .vic{
    width:46px; height:46px; border-radius:11px; border:1px solid var(--line-2); background:rgba(0,229,255,.05);
    display:flex; align-items:center; justify-content:center; color:var(--cyan); margin-bottom:18px;
}
.value-card .vic svg{ width:24px; height:24px; }
.value-card h3{ font-family:var(--display); font-weight:500; font-size:1.02rem; color:var(--txt-bright); margin-bottom:10px; letter-spacing:.01em; }
.value-card p{ color:var(--txt-dim); font-size:.96rem; line-height:1.4; }

.why-cta{
    margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    background:linear-gradient(100deg, rgba(0,229,255,.14), rgba(157,123,255,.10));
    border:1px solid var(--line-2); border-radius:var(--radius); padding:26px 30px;
    box-shadow:0 0 40px rgba(0,229,255,.12);
}
.why-cta .txt{ flex:1; min-width:260px; }
.why-cta .txt b{ font-family:var(--display); font-weight:700; color:var(--txt-bright); font-size:1.25rem; display:block; margin-bottom:5px; text-shadow:0 0 20px rgba(0,229,255,.3); }
.why-cta .txt b span{ color:var(--cyan); }
.why-cta .txt p{ color:var(--cyan-soft); font-size:.96rem; }
@media (max-width:560px){ .why-cta{ flex-direction:column; align-items:flex-start; } .why-cta .btn{ width:100%; justify-content:center; } }


/* ==== LOGO WORDMARK (image) ==== */
.hero-logo{ width:min(560px, 84%); height:auto; margin:6px auto 6px; display:block;
    filter:drop-shadow(0 0 30px rgba(0,229,255,.4)); }
.footer-logo{ width:210px; height:auto; margin:0 auto 16px; display:block;
    filter:drop-shadow(0 0 10px rgba(0,229,255,.4)); }
@media (max-width:560px){ .hero-logo{ width:92%; } .brand img{ width:130px; } }

.incident-cta{
    margin-top:40px;
    text-align:center;
}

.incident-btn{
    display:inline-block;
    color:var(--accent); /* ou #00d9ff */
    font-weight:700;
    font-size:1.05rem;
    text-decoration:none;
    transition:.25s ease;
}

.incident-btn:hover{
    color:#fff;
    transform:translateY(-2px);
}