/* ──────────────────────────────────────────────
   Theme POwR Certifications — surcouche Bootstrap 5
   ────────────────────────────────────────────── */

:root {
    --pc-yellow: #ffd407;
    --pc-yellow-hover: #ffdb0d;
    --pc-yellow-light: #fff8d6;
    --pc-dark: #18181b;
    --pc-dark2: #27272a;
    --pc-gray: #6b7280;
    --pc-gray2: #9ca3af;
    --pc-light: #f2f2f2;
    --pc-border: #e5e7eb;
    --pc-radius: 25px;
    --pc-radius-sm: 16px;

    /* Overrides Bootstrap vars */
    --bs-primary: var(--pc-yellow);
    --bs-primary-rgb: 255, 212, 7;
    --bs-body-color: var(--pc-dark);
    --bs-body-bg: #ffffff;
    --bs-link-color: var(--pc-dark);
    --bs-link-hover-color: var(--pc-dark2);
    --bs-border-color: var(--pc-border);
    --bs-border-radius: var(--pc-radius-sm);
    --bs-border-radius-lg: var(--pc-radius);
    --bs-font-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@font-face {
    font-family: 'Open Sans';
    src: url("../fonts/OpenSans-Regular-YJS7EYg.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url("../fonts/OpenSans-Bold-5UQWGJ9.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    background: #ffffff;
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    background: var(--pc-light);
}

/* ── HEADER ── */
.pc-header {
    background: #ffffff;
    border-bottom: 1px solid var(--pc-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / .08);
}
.pc-header .navbar-brand img { height: 44px; width: auto; }
.pc-header .nav-link {
    padding: .5rem 1.1rem !important;
    border-radius: 999px;
    color: var(--pc-gray);
    font-size: .925rem;
    font-weight: 500;
    white-space: nowrap; /* un libellé de lien ne doit jamais casser sur 2 lignes (ex. "Certifications fixations") */
    transition: color .15s, background .15s;
}
.pc-header .nav-link:hover { color: var(--pc-dark); background: var(--pc-light); }
.pc-header .nav-link.active {
    color: var(--pc-dark) !important;
    background: var(--pc-yellow);
    font-weight: 700;
}
.pc-header .nav-link.active:hover { background: var(--pc-yellow-hover); }

/* Au breakpoint Bootstrap lg (992–1199px), l'espace horizontal est juste pour tout faire tenir
   sur une ligne. On resserre le padding et on réduit légèrement la typo pour éviter que
   le libellé actif (qui a un pill de fond) ne déborde et force un retour à la ligne. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pc-header .navbar-brand img { height: 36px; }
    .pc-header .nav-link {
        padding: .4rem .7rem !important;
        font-size: .82rem;
    }
    .pc-header .navbar-nav { gap: .15rem; }
}

/* ── HERO (style "wave" du blog) ── */
.pc-hero {
    background: var(--pc-dark);
    color: white;
    position: relative;
    padding: 4rem 2rem 6rem;
    text-align: center;
}
.pc-hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--pc-light);
    clip-path: ellipse(60% 100% at 50% 100%);
}
.pc-hero h1 {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
}
.pc-hero h1 em {
    font-style: normal;
    color: var(--pc-yellow);
}
.pc-hero p {
    color: rgba(255,255,255,0.7);
    font-size: 1.05rem;
    max-width: 520px;
    margin: 0 auto;
}

/* ── BADGE & BOUTONS POwR ── */
.btn-pc {
    background: var(--pc-yellow);
    color: var(--pc-dark);
    border: none;
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-weight: 700;
    font-size: .85rem;
}
.btn-pc:hover { background: var(--pc-yellow-hover); color: var(--pc-dark); }

.btn-pc-outline {
    background: #ffffff;
    color: var(--pc-dark);
    border: 1px solid var(--pc-dark);
    border-radius: 999px;
    padding: .5rem 1rem;
    font-weight: 600;
    font-size: .875rem;
    text-decoration: none;
}
.btn-pc-outline:hover { background: var(--pc-dark); color: #ffffff; }

/* Variante rouge — même forme/dimensions que .btn-pc-outline. Pour l'action « Supprimer ». */
.btn-pc-danger-outline {
    background: #ffffff;
    color: #b91c1c;
    border: 1px solid #b91c1c;
    border-radius: 999px;
    padding: .5rem .75rem;       /* un peu plus serré horizontalement, prévu pour icône seule */
    font-weight: 600;
    font-size: .875rem;
    /* line-height : on hérite du 1.5 de .btn → même hauteur exacte que .btn-pc-outline */
}
.btn-pc-danger-outline:hover { background: #b91c1c; color: #ffffff; }

.pc-badge {
    display: inline-block;
    background: var(--pc-yellow);
    color: var(--pc-dark);
    font-size: .75rem;
    font-weight: 700;
    padding: .3rem .9rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* ── CARDS ── */
.pc-card {
    background: #ffffff;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.pc-card:hover {
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    transform: translateY(-3px);
}
.pc-card-body { padding: 1.5rem 1.75rem; }
.pc-card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin-bottom: .6rem; color: var(--pc-dark); }
.pc-card-excerpt { color: var(--pc-gray); font-size: .9rem; line-height: 1.55; }

/* ── SECTION LABEL ── */
.pc-section-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--pc-gray2);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.pc-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--pc-border);
}

/* ── FLASH ── */
.pc-flash {
    padding: 1rem 1.25rem;
    border-radius: 999px;
    margin: 1rem auto;
    max-width: 1100px;
    font-size: .9rem;
}
.pc-flash-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.pc-flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* ── FOOTER ── */
.pc-footer {
    background: var(--pc-dark);
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 2.5rem 1rem;
    font-size: .85rem;
}
.pc-footer strong { color: var(--pc-yellow); font-weight: 700; }
.pc-footer a { color: rgba(255,255,255,0.25); font-size: .75rem; text-decoration: none; }
.pc-footer a:hover { color: var(--pc-yellow); }

/* ── TRI : liens cliquables (calque WP) ── */
.pc-sort-links {
    font-size: .9rem;
    color: var(--pc-gray);
    margin: 1rem 0 1.5rem;
    display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
}
.pc-sort-links .pc-sort-label { font-weight: 500; margin-right: .25rem; }
.pc-sort-links .pc-sort-link {
    color: var(--pc-dark);
    text-decoration: none;
    padding: .15rem .35rem;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.pc-sort-links .pc-sort-link:hover { color: var(--pc-dark2); text-decoration: underline; }
.pc-sort-links .pc-sort-link.is-active {
    color: var(--pc-dark);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--pc-yellow);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}
.pc-sort-links .pc-sort-sep { color: var(--pc-gray2); margin: 0 .15rem; }
.pc-sort-links .pc-sort-dir {
    display: inline-block; margin-left: .15rem; font-weight: 700;
    color: var(--pc-dark); font-size: .85rem; line-height: 1;
}

/* ── PAGINATION (KnpPaginator + Bootstrap) ── Surcharge des bleus Bootstrap aux couleurs POwR */
.pagination { gap: .2rem; }
.pagination .page-link {
    color: var(--pc-dark);
    background: #ffffff;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-sm) !important;
    padding: .4rem .75rem;
    font-size: .9rem;
    font-weight: 600;
    transition: background .15s, color .15s, border-color .15s;
}
.pagination .page-link:hover {
    color: var(--pc-dark);
    background: var(--pc-yellow-light);
    border-color: var(--pc-yellow);
    z-index: 1;
}
.pagination .page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 212, 7, .35);
    outline: none;
}
.pagination .page-item.active .page-link {
    color: var(--pc-dark);
    background: var(--pc-yellow);
    border-color: var(--pc-yellow);
    font-weight: 700;
}
.pagination .page-item.disabled .page-link {
    color: var(--pc-gray2);
    background: var(--pc-light);
    border-color: var(--pc-border);
    cursor: not-allowed;
}

/* ── Bandeau "Besoin d'un nouveau X ?" — utilisé en haut des pages métier ── */
.pc-demande-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--pc-yellow-light); border: 1px solid var(--pc-yellow);
    border-radius: var(--pc-radius-sm); padding: 1rem 1.5rem;
    margin-bottom: 1.25rem;
    text-decoration: none; color: var(--pc-dark);
    transition: box-shadow .2s;
}
.pc-demande-banner:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); color: var(--pc-dark); }
.pc-demande-banner .pc-demande-titre { font-weight: 700; font-size: 1rem; }
@media (max-width: 600px) {
    .pc-demande-banner { flex-direction: column; align-items: flex-start; }
}

/* ── RESPONSIVE TWEAKS ── */
@media (max-width: 680px) {
    .pc-hero h1 { font-size: 1.9rem; }
}