@charset "UTF-8";
/* CSS Document */



    /* =========================================================
       BASE GLOBALE
       CHARTE_UI_QUIZ_AIDE_V1
       ---------------------------------------------------------
       Contraintes respectées :
       - pas de :root
       - pas de font-family
       ========================================================= */
    *{
        box-sizing:border-box;
    }

    html{
        scroll-behavior:smooth;
    }

    body{
        margin:0;
        color:#1f2937;
        background:
            radial-gradient(circle at top right, rgba(86,130,140,.12), transparent 28%),
            linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
        min-height:100vh;
        padding:24px;
    }

    a{
        color:inherit;
    }

    code{
        background:#eef2f7;
        border:1px solid #dbe4ee;
        border-radius:8px;
        padding:2px 8px;
        font-size:.95em;
    }

    .wrap{
        width:100%;
        max-width:1200px;
        margin:0 auto;
    }

    .card{
        background:#ffffff;
        border:1px solid #e6edf5;
        border-radius:22px;
        box-shadow:0 12px 30px rgba(15,23,42,.06);
        padding:28px;
        overflow:hidden;
    }

    /* =========================================================
       TOPBAR
       ========================================================= */
    .topbar{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:16px;
        margin-bottom:22px;
        padding:18px 20px;
        background:#f8fafc;
        border:1px solid #e6edf5;
        border-radius:18px;
        box-shadow:0 6px 18px rgba(15,23,42,.04);
    }

    .titleBlock{
        display:flex;
        align-items:center;
        gap:14px;
        min-width:0;
    }

    .logoBox{
        width:100px;
        height:auto;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#ffffff;
        border:1px solid #e4ebf3;
        border-radius:14px;
        box-shadow:0 4px 12px rgba(15,23,42,.06);
        overflow:hidden;
        flex:0 0 auto;
    }

    .logoBox img{
        max-width:100%;
        max-height:100%;
        object-fit:contain;
        display:block;
    }

    .titleText{
        min-width:0;
    }

    h1{
        margin:0 0 6px;
        font-size:30px;
        line-height:1.15;
        color:#1f2a37;
    }

    .muted{
        color:#667085;
        font-size:14px;
        line-height:1.5;
    }

    .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        text-decoration:none;
        border-radius:12px;
        padding:11px 16px;
        background:#395359;
        color:#ffffff;
        border:1px solid #395359;
        box-shadow:0 6px 16px rgba(57,83,89,.18);
        transition:
            transform .15s ease,
            box-shadow .15s ease,
            background .15s ease,
            border-color .15s ease;
        white-space:nowrap;
    }

    .btn:hover{
        background:#56828C;
        border-color:#56828C;
        transform:translateY(-1px);
        box-shadow:0 10px 20px rgba(57,83,89,.20);
    }

    /* =========================================================
       HERO LÉGER
       ========================================================= */
    .heroLite{
        position:relative;
        margin-bottom:24px;
        padding:22px 22px 18px;
        border-radius:20px;
        background:
            radial-gradient(circle at top right, rgba(86,130,140,.16), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border:1px solid #e4ebf3;
        box-shadow:0 10px 24px rgba(15,23,42,.05);
    }

    .heroLite h2{
        margin:0 0 10px;
        font-size:18px;
        color:#2b3b45;
    }

    .heroLite p{
        margin:0;
        color:#5f6c76;
        line-height:1.6;
    }

    .pills{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin:14px 0 0;
    }

    .pill{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:8px 12px;
        border-radius:999px;
        background:#f1f5f9;
        border:1px solid #dde6ef;
        color:#395359;
        font-size:13px;
        line-height:1;
        white-space:nowrap;
    }

    /* =========================================================
       SECTION UNIQUE : QUIZ
       ========================================================= */
    .sectionHead{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:16px;
        margin-bottom:14px;
    }

    .sectionTitle{
        margin:0;
        font-size:22px;
        line-height:1.2;
        color:#24333d;
    }

    .sectionDesc{
        margin:6px 0 0;
        color:#667085;
        font-size:14px;
        line-height:1.5;
    }

    .sectionBadge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-width:40px;
        padding:8px 12px;
        border-radius:999px;
        background:#f1f5f9;
        border:1px solid #dde6ef;
        color:#395359;
        font-size:13px;
        white-space:nowrap;
    }

    /* =========================================================
       GRILLE
       ========================================================= */
    .grid{
        display:grid;
        gap:18px;
    }

    .grid.grid-cols-2{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .grid.grid-cols-3{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .grid.grid-cols-4{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }

    /* =========================================================
       TUILES QUIZ
       ========================================================= */
    .tile{
        display:flex;
        flex-direction:column;
        gap:14px;
        min-height:230px;
        border-radius:18px;
        padding:18px;
        box-shadow:0 8px 20px rgba(15,23,42,.05);
        transition:
            transform .15s ease,
            box-shadow .15s ease,
            border-color .15s ease,
            background .15s ease;
    }

    .tile:hover{
        transform:translateY(-3px);
        box-shadow:0 14px 28px rgba(15,23,42,.08);
    }

    .tileHead{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
    }

    .tileIcon{
        font-size:32px;
        line-height:1;
    }

    .tileType{
        display:inline-flex;
        align-items:center;
        padding:7px 10px;
        border-radius:999px;
        border:1px solid #dbe5ef;
        background:#ffffff;
        font-size:12px;
        line-height:1;
        white-space:nowrap;
        box-shadow:0 4px 10px rgba(15,23,42,.04);
    }

    .tileBody{
        flex:1 1 auto;
    }

    .tileTitle{
        margin:0 0 8px;
        font-size:20px;
        line-height:1.3;
        color:#24333d;
    }

    .tileDesc{
        margin:0;
        color:#667085;
        font-size:14px;
        line-height:1.6;
    }

    .tileLinks{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        margin-top:auto;
    }

    .tileBtn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:9px 12px;
        border-radius:12px;
        text-decoration:none;
        border:1px solid #d8e2ec;
        background:#ffffff;
        color:#395359;
        font-size:13px;
        line-height:1;
        box-shadow:0 4px 10px rgba(15,23,42,.04);
        transition:
            transform .15s ease,
            box-shadow .15s ease,
            background .15s ease,
            border-color .15s ease,
            color .15s ease;
    }

    .tileBtn:hover{
        transform:translateY(-1px);
        box-shadow:0 8px 18px rgba(15,23,42,.08);
    }

    /* =========================================================
       THÈME UNIQUE POUR LES QUIZ
       ========================================================= */
    .tileQuiz{
        border:1px solid #d6e6f8;
        background:linear-gradient(180deg, #f4f9ff 0%, #eef6ff 100%);
    }

    .tileQuiz:hover{
        background:linear-gradient(180deg, #f8fbff 0%, #f1f8ff 100%);
        border-color:#c8ddf4;
    }

    .tileQuiz .tileType{
        color:#245b95;
        border-color:#cfe0f4;
        background:#ffffff;
    }

    .tileQuiz .tileBtn:hover{
        background:#e9f3ff;
        border-color:#bfd7f2;
        color:#245b95;
    }

    /* =========================================================
       CALLOUTS
       ========================================================= */
    .callout{
        margin-top:22px;
        padding:14px 16px;
        border-radius:16px;
        border:1px solid #f3d2a2;
        background:#fff7ed;
        color:#8a4b08;
        box-shadow:0 6px 16px rgba(15,23,42,.04);
    }

    .okout{
        margin-top:16px;
        padding:14px 16px;
        border-radius:16px;
        border:1px solid #b7e2c2;
        background:#ecfdf3;
        color:#166534;
        box-shadow:0 6px 16px rgba(15,23,42,.04);
    }

    /* =========================================================
       RESPONSIVE
       ========================================================= */
    @media (max-width: 1100px){
        .grid.grid-cols-4{
            grid-template-columns:repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 900px){
        .topbar,
        .sectionHead{
            flex-direction:column;
            align-items:flex-start;
        }

        .grid.grid-cols-4,
        .grid.grid-cols-3{
            grid-template-columns:repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 640px){
        body{
            padding:16px;
        }

        .card{
            padding:18px;
            border-radius:18px;
        }

        .topbar{
            padding:16px;
            border-radius:16px;
        }

        .heroLite{
            padding:18px;
            border-radius:16px;
        }

        .titleBlock{
            align-items:flex-start;
        }

        .grid.grid-cols-4,
        .grid.grid-cols-3,
        .grid.grid-cols-2{
            grid-template-columns:1fr;
        }

        .tile{
            min-height:auto;
        }

        h1{
            font-size:26px;
        }
    }