@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');:root{--n:#071f3d;--b:#1764d8;--g:#f5f8fc;--t:#1e2937;--m:#657386}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial;color:var(--t);line-height:1.65}.container{width:min(1140px,92%);margin:auto}.header{height:76px;display:flex;align-items:center;background:#fff;box-shadow:0 2px 15px #0001;position:sticky;top:0;z-index:10}.nav{display:flex;align-items:center;justify-content:space-between;width:100%}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--n)}.mark{width:43px;height:43px;background:linear-gradient(135deg,var(--b),var(--n));color:white;display:grid;place-items:center;border-radius:10px;font-size:24px;font-weight:800}.brand b,.brand small{display:block}.brand small{font-size:10px;color:var(--m)}nav{display:flex;gap:24px;align-items:center}nav a{color:var(--t);text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase}.navbtn,.btn{background:var(--b);color:white!important;padding:11px 18px;border-radius:5px}.toggle{display:none;background:none;border:0;font-size:24px}.hero{background:radial-gradient(circle at 80% 20%,#1554a2,var(--n) 60%);color:white}.hero-grid{min-height:560px;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}.tag,.heading span,.pagehero span{color:#75adff;font-size:12px;font-weight:800;letter-spacing:1.4px}h1{font-size:clamp(42px,6vw,68px);line-height:1.08;margin:12px 0 20px}h1 em{color:#4a92ff;font-style:normal}.hero p{color:#d1def0;font-size:17px;max-width:620px}.btn{display:inline-block;border:0;text-decoration:none;font-weight:700;margin-top:15px;cursor:pointer}.terminal{background:#09294d;border:1px solid #3478c5;padding:35px;border-radius:15px;box-shadow:0 25px 60px #0006;transform:rotate(-3deg)}.terminal small{color:#6fa8ff}.terminal pre{color:#dcecff;font-size:17px;line-height:2;margin-top:25px}.section{padding:80px 0}.alt{background:var(--light)}.gray{background:var(--g)}.heading{text-align:center;margin-bottom:40px}.heading h2{font-size:32px;margin:8px 0}.grid{display:grid;gap:20px}.cards{grid-template-columns:repeat(3,1fr)}.card,.project{background:#fff;border:1px solid #e2e9f1;border-radius:10px;padding:27px}.icon{font-size:28px;color:var(--b)}.card p,.project p{color:var(--m);font-size:14px}.card a,.project a{color:var(--b);font-weight:700;text-decoration:none}.band{background:linear-gradient(90deg,#0d3d89,var(--b));color:white}.metrics{display:grid;grid-template-columns:repeat(3,1fr);padding:28px;text-align:center}.metrics b{display:block;font-size:28px}.metrics span{font-size:12px;color:#d8e7ff}.projects{grid-template-columns:repeat(3,1fr)}.project-image{height:160px;background:#e9f0f9;margin:-27px -27px 20px;overflow:hidden}.project-image img{width:100%;height:100%;object-fit:cover}.placeholder{height:100%;display:grid;place-items:center;background:linear-gradient(135deg,var(--n),var(--b));color:white;font-weight:800;font-size:24px}.project small{color:var(--b);font-weight:700}.cta{padding:70px 0;background:var(--n);color:white;text-align:center}.light{background:white;color:var(--b)!important}.pagehero{background:linear-gradient(120deg,var(--n),#16477f);color:white;padding:90px 0}.pagehero h1{font-size:clamp(40px,5vw,58px);max-width:850px}.two{display:grid;grid-template-columns:1fr 1fr;gap:70px}.two aside,.formbox{background:var(--g);padding:35px;border-radius:10px}.list{max-width:900px}.list article{display:grid;grid-template-columns:70px 1fr;gap:25px;padding:28px 0;border-bottom:1px solid #e3eaf2}.list article>b{color:var(--b);font-size:23px}.list h2{margin:0}.formbox label,.editform label{display:block;font-size:13px;font-weight:700;margin-bottom:14px}.formbox input,.formbox textarea,.editform input,.editform textarea{width:100%;margin-top:5px;padding:12px;border:1px solid #d7e0eb;border-radius:5px;font:inherit}.success,.error{padding:12px;border-radius:5px;margin-bottom:15px}.success{background:#def6e7;color:#176b3d}.error{background:#ffe2e2;color:#9b2222}footer{background:#06182f;color:#b8c6d8;padding-top:45px}.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.foot a{display:block;color:#b8c6d8;text-decoration:none;font-size:13px;margin:6px 0}.copy{text-align:center;border-top:1px solid #ffffff18;padding:15px;margin-top:35px;font-size:11px}.admin{background:#f3f6fa}.adminhead{height:65px;background:var(--n);color:white;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.adminhead a{color:white}.adminwrap{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 65px)}.admin aside{background:#0b294d;padding:20px}.admin aside a{display:block;color:#d6e1f1;text-decoration:none;padding:12px}.admincontent{padding:35px;overflow:auto}.dashcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.dashcards div{background:white;padding:25px;border-radius:8px}.dashcards b,.dashcards span{display:block}.dashcards b{font-size:32px;color:var(--b)}table{width:100%;border-collapse:collapse;background:white}th,td{text-align:left;padding:12px;border-bottom:1px solid #e5ebf2;font-size:13px}td a,.smallbtn{color:var(--b)}.editform{max-width:800px;background:white;padding:28px;border-radius:8px}.login{min-height:100vh;background:linear-gradient(135deg,var(--n),var(--b));display:grid;place-items:center}.login form{background:white;padding:40px;border-radius:12px;width:min(400px,90%)}.login input{width:100%;padding:13px;margin:8px 0;border:1px solid #d7e0eb;border-radius:5px}

/* ============================================================
   SECTION À PROPOS
   ============================================================ */

.about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
    align-items: center;
}


/* ============================================================
   CADRE GAUCHE
   ============================================================ */

.about-panel {
    display: flex;
    justify-content: center;
}

.screen {
    width: 100%;
    max-width: 480px;
    min-height: 370px;

    background: #08263D;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 25px 55px rgba(8, 38, 61, 0.25);

    position: relative;
}


/* ============================================================
   BARRE SUPÉRIEURE DU CADRE
   ============================================================ */

.screen-header {
    height: 50px;

    display: flex;
    align-items: center;

    padding: 0 18px;

    background: rgba(255, 255, 255, 0.07);

    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.screen-header span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: rgba(255,255,255,0.55);

    margin-right: 6px;
}

.screen-header small {
    margin-left: 12px;

    color: rgba(255,255,255,0.55);

    font-size: 10px;

    letter-spacing: 1.5px;
}


/* ============================================================
   CONTENU DU CADRE
   ============================================================ */

.screen-content {
    padding: 42px 38px;

    position: relative;
}


/* ============================================================
   LOGO
   ============================================================ */

.screen-logo {
    color: #ffffff;

    font-size: 34px;

    font-weight: 800;

    letter-spacing: 1px;
}

.screen-subtitle {
    color: #F58220;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-top: 5px;
}


/* ============================================================
   LIGNE
   ============================================================ */

.screen-line {
    width: 55px;
    height: 3px;

    background: #F58220;

    margin: 27px 0;
}


/* ============================================================
   TITRE
   ============================================================ */

.screen-title {
    color: #ffffff;

    font-size: 22px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.screen-content > p {
    color: rgba(255,255,255,0.65);

    font-size: 13px;

    line-height: 1.7;

    max-width: 340px;

    margin-top: 8px;
}


/* ============================================================
   SERVICES DANS LE CADRE
   ============================================================ */

.screen-services {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-top: 27px;
}

.screen-services div {
    background: rgba(255,255,255,0.06);

    border-radius: 7px;

    padding: 12px 9px;
}

.screen-services strong {
    display: block;

    color: #F58220;

    font-size: 16px;
}

.screen-services span {
    display: block;

    color: rgba(255,255,255,0.55);

    font-size: 10px;

    margin-top: 3px;
}


/* ============================================================
   STATUT
   ============================================================ */

.screen-status {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 27px;

    color: rgba(255,255,255,0.5);

    font-size: 9px;

    letter-spacing: 1.5px;
}

.screen-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #35d07f;

    box-shadow: 0 0 10px rgba(53,208,127,0.7);
}


/* ============================================================
   TEXTE À DROITE
   ============================================================ */

.about-text h2 {
    color: #08263D;

    font-size: clamp(30px, 3vw, 43px);

    line-height: 1.15;

    margin: 12px 0 20px;
}

.about-text > p {
    color: #5d6b76;

    font-size: 16px;

    line-height: 1.8;

    max-width: 650px;
}


/* ============================================================
   LISTE
   ============================================================ */

.about-text .check {
    list-style: none;

    padding: 0;

    margin: 28px 0;
}

.about-text .check li {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    color: #34495e;

    font-size: 14px;
}

.about-text .check li span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    min-width: 25px;

    border-radius: 50%;

    background: rgba(245,130,32,0.12);

    color: #F58220;

    font-weight: 800;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .about-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-panel {
        order: 1;
    }

    .about-text {
        order: 2;
    }

    .screen {
        max-width: 600px;
    }
}


@media (max-width: 600px) {

    .screen-content {
        padding: 30px 23px;
    }

    .screen-logo {
        font-size: 28px;
    }

    .screen-services {
        grid-template-columns: 1fr;
    }

    .about-text h2 {
        font-size: 31px;
    }

}

@media(max-width:800px){.toggle{display:block}nav{display:none;position:absolute;top:76px;left:0;right:0;background:white;padding:20px;flex-direction:column;align-items:stretch}nav.open{display:flex}.hero-grid,.two{grid-template-columns:1fr;padding:60px 0}.terminal{display:none}.cards,.projects{grid-template-columns:1fr 1fr}.adminwrap{grid-template-columns:1fr}.admin aside{display:flex;overflow:auto;padding:8px}.admin aside a{white-space:nowrap}.foot{grid-template-columns:1fr 1fr}}@media(max-width:500px){.cards,.projects,.foot,.metrics,.dashcards{grid-template-columns:1fr}.section{padding:55px 0}.admincontent{padding:20px}.list article{grid-template-columns:1fr}.pagehero{padding:65px 0}}