:root{

    --apc-primary:#2563eb;
    --apc-primary-dark:#1d4ed8;
    --apc-indigo:#4f46e5;
    --apc-red:#dc2626;
    --apc-text:#1e293b;
    --apc-muted:#64748b;
    --apc-border:#e5e7eb;
    --apc-bg:#f4f7fb;
    --apc-radius-lg:22px;
    --apc-radius-md:16px;
    --apc-radius-sm:12px;
    --apc-shadow:0 10px 24px rgba(15,23,42,.06);
    --apc-shadow-lg:0 12px 30px rgba(15,23,42,.08);

}

/*==================================================
GENERAL
==================================================*/

body{

    background:var(--apc-bg) !important;
    color:var(--apc-text);

}

a{

    text-decoration:none;

}

/*==================================================
SEARCH BAR
==================================================*/

.search-wrapper{

    max-width:860px;
    margin:0 auto 24px;

}

.search-box{

    background:#fff;
    border-radius:var(--apc-radius-md);
    padding:10px;
    box-shadow:var(--apc-shadow);
    border:1px solid var(--apc-border);

}

.search-box .form-control{

    border:none;
    box-shadow:none;
    font-size:15px;

}

.search-box .form-control:focus{

    box-shadow:none;

}

.search-box .btn{

    border-radius:10px;
    padding:10px 24px;
    font-weight:600;

}

/*==================================================
HERO
==================================================*/

.hero{

    position:relative;
    background:linear-gradient(135deg,#eef4ff,#e6edff 55%,#eef2ff);
    border-radius:24px;
    padding:32px;
    margin-bottom:20px;
    border:1px solid var(--apc-border);
    box-shadow:var(--apc-shadow-lg);
    overflow:hidden;

}

.hero::before{

    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 85% 20%, rgba(79,70,229,.08), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(37,99,235,.08), transparent 50%);
    pointer-events:none;

}

.hero__grid{

    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    z-index:1;

}

.hero__content{

    flex:1 1 250px;
    min-width:0;

}

.hero__icon{

    width:64px;
    height:64px;
    border-radius:18px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:var(--apc-primary);
    margin-bottom:16px;
    box-shadow:0 6px 14px rgba(37,99,235,.15);

}

.hero h1{

    font-size:clamp(28px,4vw,44px);
    font-weight:800;
    margin-bottom:8px;
    line-height:1.1;

}

.hero p{

    font-size:clamp(14px,1.6vw,17px);
    color:var(--apc-muted);
    max-width:520px;
    line-height:1.6;
    margin-bottom:0;

}

.hero-tags{

    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;

}

.hero-tag{

    background:#fff;
    border-radius:10px;
    padding:8px 14px;
    border:1px solid var(--apc-border);
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    box-shadow:0 2px 6px rgba(15,23,42,.04);

}

/*==================================================
HERO SIDE / ILLUSTRATION
==================================================*/

.hero__side{

    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    flex:0 0 auto;

}

.hero__illustration{

    position:relative;
    width:150px;
    height:150px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    animation:apc-float 4s ease-in-out infinite;

}

.stack-book{

    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:110px;
    height:22px;
    border-radius:6px;
    box-shadow:0 4px 10px rgba(15,23,42,.12);

}

.stack-book--1{

    bottom:0;
    background:linear-gradient(135deg,var(--apc-primary),var(--apc-primary-dark));

}

.stack-book--2{

    bottom:20px;
    width:96px;
    background:linear-gradient(135deg,#34d399,#10b981);

}

.stack-book--3{

    bottom:40px;
    width:104px;
    background:linear-gradient(135deg,#f8fafc,#e2e8f0);
    border:1px solid var(--apc-border);

}

.stack-cap{

    position:absolute;
    bottom:56px;
    left:50%;
    transform:translateX(-50%);
    width:60px;
    height:60px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--apc-indigo),#1e3a8a);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:26px;
    box-shadow:0 8px 16px rgba(30,58,138,.3);

}

@keyframes apc-float{

    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }

}

@media (prefers-reduced-motion: reduce){

    .hero__illustration{ animation:none; }

}

.hero-create{

    border-radius:12px;
    padding:12px 22px;
    font-weight:700;
    white-space:nowrap;
    box-shadow:0 6px 14px rgba(37,99,235,.25);

}

/*==================================================
QUICK LINKS — toujours 2 colonnes, même sur mobile
==================================================*/

.quick-links{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:36px;

}

.quick-card{

    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border:1px solid var(--apc-border);
    border-radius:var(--apc-radius-md);
    padding:16px;
    box-shadow:var(--apc-shadow);
    transition:.2s ease;
    color:var(--apc-text);
    min-width:0;

}

.quick-card:hover{

    transform:translateY(-3px);
    box-shadow:var(--apc-shadow-lg);

}

.quick-card__icon{

    flex:0 0 auto;
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;

}

.quick-card--red{

    background:#fff5f5;

    border-color:#fecaca;

}

.quick-card--red .quick-card__icon{

    background:#fee2e2;

    color:#dc2626;

}

.quick-card--red:hover{

    background:#ffecec;

}

.quick-card--blue{

    background:#f4f8ff;

    border-color:#bfdbfe;

}

.quick-card--blue .quick-card__icon{

    background:#dbeafe;

    color:#2563eb;

}

.quick-card--blue:hover{

    background:#edf5ff;

}

.quick-card__body{

    min-width:0;
    flex:1 1 auto;

}

.quick-card__body h3{

    font-size:clamp(13px,2.4vw,17px);
    font-weight:700;
    margin:0 0 2px;
    color:var(--apc-text);
}

.quick-card--red .quick-card__body h3{ color:var(--apc-red); }
.quick-card--blue .quick-card__body h3{ color:var(--apc-primary); }

.quick-card__body p{

    font-size:clamp(11px,1.8vw,13px);
    color:var(--apc-muted);
    margin:0;
    line-height:1.4;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;

}

.quick-card__arrow{

    flex:0 0 auto;
    color:var(--apc-muted);
    font-size:14px;

}

/*==================================================
SECTION TITLE
==================================================*/

.section-title{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:8px 0 20px;

}

.section-title h2{

    font-size:clamp(22px,3vw,32px);
    font-weight:800;
    margin:0;

}

/*==================================================
COURSE CARD
==================================================*/

.course-card{

    background:#fff;
    border-radius:var(--apc-radius-lg);
    border:1px solid var(--apc-border);
    overflow:hidden;
    transition:.25s;
    box-shadow:var(--apc-shadow);
    height:100%;
    display:flex;
    flex-direction:column;

}

.course-card:hover{

    transform:translateY(-5px);
    box-shadow:var(--apc-shadow-lg);

}

.course-cover-wrap{

    position:relative;

}

.course-cover{

    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;

}

.course-level-badge{

    position:absolute;
    top:12px;
    right:12px;
    background:rgba(255,255,255,.95);
    color:var(--apc-primary);
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    padding:5px 10px;
    border-radius:8px;
    text-transform:uppercase;
    box-shadow:0 2px 6px rgba(15,23,42,.12);

}

.course-body{

    padding:20px;
    display:flex;
    flex-direction:column;
    flex:1;

}

.course-meta-row{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    gap:8px;

}

.course-title{

    font-weight:700;
    font-size:17px;
    margin-bottom:10px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    line-height:1.4;
    min-height:12px;

}

.course-desc{

    color:var(--apc-muted);
    font-size:14px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    line-height:1.6;
    margin-bottom:5px;
    min-height:calc(1.6em * 3);

}

.course-stats-row{

    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--apc-border);
    border-bottom:1px solid var(--apc-border);
    padding:5px 0;
    margin-bottom:5px;
    font-size:12px;

}

.course-footer-row{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
    gap:8px;

}

.btn-sm-icon{

    font-size:13px;
    padding:6px 12px;
    display:flex;
    align-items:center;
    gap:6px;

}

.course-body .d-grid{

    margin-top:auto;

}

.course-body .btn-primary{

    border-radius:12px;

}

/*==================================================
PAGINATION
==================================================*/

.course-pagination{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin:30px 0 10px;

}

.page-btn{

    min-width:38px;
    height:38px;
    padding:0 10px;
    border-radius:10px;
    border:1px solid var(--apc-border);
    background:#fff;
    color:var(--apc-text);
    font-weight:600;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.15s;
    cursor:pointer;

}

.page-btn:hover{

    border-color:var(--apc-primary);
    color:var(--apc-primary);

}

.page-btn.active{

    background:var(--apc-primary);
    border-color:var(--apc-primary);
    color:#fff;

}

.page-nav{

    background:#fff;

}

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

@media(max-width:992px){

    .hero{ padding:26px; }

    .hero__illustration{ width:120px; height:120px; }

    .stack-book{ width:90px; }
    .stack-book--2{ width:78px; }
    .stack-book--3{ width:84px; }

}

@media(max-width:768px){

    .hero{ padding:20px; border-radius:20px; }

    .hero__grid{ flex-direction:column; align-items:flex-start; gap:18px; }

    .hero__side{ width:100%; flex-direction:row; justify-content:space-between; align-items:center; }

    .hero__illustration{ width:70px; height:70px; }

    .stack-book{ height:14px; width:56px; }
    .stack-book--1{ bottom:0; }
    .stack-book--2{ bottom:12px; width:48px; }
    .stack-book--3{ bottom:24px; width:52px; }

    .stack-cap{ width:36px; height:36px; font-size:16px; bottom:32px; border-radius:10px; }

    .hero-create{ padding:10px 16px; font-size:14px; }

    .hero-tags{ gap:6px; }

    .hero-tag{ padding:6px 10px; font-size:12px; }

    .search-box{ padding:8px; }

    .quick-card{ padding:12px; gap:8px; }

    .quick-card__icon{ width:36px; height:36px; font-size:16px; border-radius:10px; }

    .section-title{ margin:6px 0 16px; }

}

@media(max-width:480px){

    .hero h1{ font-size:26px; }

    .hero p{ font-size:13px; }

    .hero__side{ flex-direction:row; }

    .hero__illustration{ width:56px; height:56px; }

    .stack-cap{ width:30px; height:30px; font-size:14px; bottom:26px; }

    .quick-card__body p{ -webkit-line-clamp:1; }

    .course-title{ font-size:15px; min-height:12px; }

    .course-desc{ font-size:13px; -webkit-line-clamp:2; min-height:calc(1.6em * 2); }

}

@media(min-width:1400px){

    .hero p{ max-width:600px; }

}

/*Highlight Searched*/
mark{

    background:#fde68a;

    color:#92400e;

    padding:1px 3px;

    border-radius:4px;

    font-weight:600;

}

body a{

text-decoration: none;

}


/*==========================================
COMMENTS MODAL
==========================================*/

.comments-scroll{

    max-height:420px;

    overflow-y:auto;

    padding-right:8px;

}

/* Scrollbar Premium */

.comments-scroll::-webkit-scrollbar{

    width:8px;

}

.comments-scroll::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

.comments-scroll::-webkit-scrollbar-track{

    background:transparent;

}

/*==================================================
AVAILABLE VERSION MODAL
==================================================*/

.version-modal .modal-dialog{

max-width:360px;

margin:1rem auto;

}

.version-modal .modal-content{

background:#fff;

border:none;

border-radius:16px;

overflow:hidden;

box-shadow:0 14px 36px rgba(15,23,42,.14);

}

.version-modal .modal-header{

display:flex;

align-items:center;

justify-content:space-between;

padding:14px 18px;

background:linear-gradient(135deg,#2563eb,#4f46e5);

border:0;

}

.version-modal .modal-title{

margin:0;

font-size:1rem;

font-weight:700;

color:#fff;

}

.version-modal .btn-close{

filter:brightness(0) invert(1);

opacity:.9;

box-shadow:none;

}

.version-modal .btn-close:hover{

opacity:1;

}

.version-modal .modal-body{

padding:12px;

background:#f8fafc;

max-height:420px;

overflow-y:auto;

}

/* Scrollbar */

.version-modal .modal-body::-webkit-scrollbar{

width:6px;

}

.version-modal .modal-body::-webkit-scrollbar-thumb{

background:#cbd5e1;

border-radius:999px;

}

.version-modal .modal-body::-webkit-scrollbar-track{

background:transparent;

}

/*==================================================
VERSION ITEM
==================================================*/

.version-item{

display:flex;

align-items:center;

gap:10px;

padding:10px 12px;

margin-bottom:6px;

background:#fff;

border:1px solid #e5e7eb;

border-radius:10px;

text-decoration:none;

color:#1e293b;

font-size:.93rem;

font-weight:600;

transition:all .18s ease;

}

.version-item:last-child{

margin-bottom:0;

}

.version-item:hover{

background:#eff6ff;

border-color:#2563eb;

color:#2563eb;

transform:translateY(-1px);

}

.version-item.active{

background:linear-gradient(135deg,#2563eb,#4f46e5);

border-color:#2563eb;

color:#fff;

}

.version-item.active:hover{

color:#fff;

}

.version-flag{

width:26px;

font-size:1.15rem;

text-align:center;

flex-shrink:0;

}

.version-name{

flex:1;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

.version-arrow{

font-size:.8rem;

opacity:.45;

transition:.18s;

}

.version-item:hover .version-arrow{

opacity:.8;

transform:translateX(3px);

}

.version-item.active .version-arrow{

opacity:1;

}

/*==================================================
MOBILE
==================================================*/

@media(max-width:576px){

.version-modal .modal-dialog{

max-width:calc(100% - 24px);

margin:12px auto;

}

.version-modal .modal-body{

max-height:65vh;

padding:10px;

}

.version-item{

padding:9px 10px;

font-size:.9rem;

}

.version-flag{

width:24px;

font-size:1.05rem;

}

}