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

.section-title{

    display:inline-block;

    margin-bottom:var(--space-6);

    color:var(--primary);

    font-size:var(--font-size-sm);

    font-weight:var(--font-weight-bold);

    text-transform:uppercase;

    letter-spacing:.12em;

}

/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:var(--space-2);

    padding:.9rem 1.4rem;

    border:none;

    border-radius:var(--radius-sm);

    font:inherit;

    font-weight:var(--font-weight-semibold);

    transition:var(--transition-normal);

    cursor:pointer;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);

}

/* ==========================================================
   HEADER BADGES
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.42rem .9rem;

    border-radius:999px;

    font-size:var(--font-size-xs);

    font-weight:var(--font-weight-semibold);

    white-space:nowrap;

}

/* Couleurs uniquement dans le Header */

.badge.php{

    background:#777BB4;

    color:#fff;

}

.badge.symfony{

    background:#111827;

    color:#fff;

}

.badge.doctrine{

    background:#3B3B98;

    color:#fff;

}

.badge.mysql{

    background:#005C84;

    color:#fff;

}

.badge.git{

    background:#F05133;

    color:#fff;

}

.badge.bootstrap{

    background:#7952B3;

    color:#fff;

}

.badge.twig{

    background:#84CC16;

    color:#fff;

}

.badge.wordpress{

    background:#21759B;

    color:#fff;

}

.badge.cakephp{

    background:#D33C43;

    color:#fff;

}

/* ==========================================================
   TAGS
========================================================== */

.tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.35rem .8rem;

    border-radius:999px;

    background:var(--primary-soft);

    color:var(--primary);

    font-size:var(--font-size-xs);

    font-weight:var(--font-weight-semibold);

    white-space:nowrap;

    margin-top: 0.3rem;

}

/* ==========================================================
   STATUS
========================================================== */

.hero-status{

    display:inline-flex;

    align-items:center;

    gap:var(--space-3);

    padding:.7rem 1.3rem;

    border-radius:999px;

    background:var(--success-soft);

    color:var(--success-dark);

    font-size:var(--font-size-sm);

    font-weight:var(--font-weight-semibold);

}

.hero-status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--success);

}

/* ==========================================================
   CARD TITLE
========================================================== */

.card-title{

    display:flex;

    align-items:center;

    gap:var(--space-2);

    font-size:var(--font-size-md);

    font-weight:var(--font-weight-bold);

}

.card-title i{

    width:18px;

    text-align:center;

    color:var(--primary);

    font-size:.95rem;

}

.download-btn{
    margin-top: 1.5rem;
}