/* ──────────────────────────────────────────────
   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); }

/* Lien "Mon compte" remplacé par une icône user (avec flèche dropdown conservée) */
.pc-header .nav-link.nav-account {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .4rem .6rem !important;
}
.pc-header .nav-link.nav-account svg { display: block; }
/* La flèche du dropdown Bootstrap se met juste après l'icône SVG */
.pc-header .nav-link.nav-account::after { margin-left: .15rem; vertical-align: middle; }

/* 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 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: 32px; }
    .pc-header .nav-link {
        padding: .35rem .55rem !important;
        font-size: .75rem;
    }
    .pc-header .navbar-nav { gap: .1rem; }
}
/* Au breakpoint xl (1200–1399px), idem mais plus léger — le menu commence à se charger
   avec les 5 entrées principales + Contact + compte. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .pc-header .nav-link {
        padding: .45rem .85rem !important;
        font-size: .85rem;
    }
}

/* ── 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 */
/* flex-wrap + center : la pagination passe à la ligne au lieu de déborder sur petit écran. */
.pagination { gap: .2rem; flex-wrap: wrap; justify-content: center; }
/* Sur mobile : boutons plus compacts pour que tout tienne sans débordement. */
@media (max-width: 480px) {
    .pagination .page-link { padding: .3rem .55rem; font-size: .8rem; }
}
.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; }
}

/* ── Cards documents (onduleurs / stockage / IRVE / modules) ──
   La grille interne des PDFs est en 2 colonnes (1fr 1fr). Par défaut un item de
   grille a min-width:auto → un libellé long ("Impédance"…) empêche la colonne de
   rétrécir et déborde de la card. On force min-width:0 + coupure des mots longs.
   (Les classes sont définies inline dans chaque template ; ces propriétés ne sont
   déclarées qu'ici, donc aucun conflit de spécificité.) */
.onduleur-pdfs .pdf      { min-width: 0; }
.onduleur-pdfs .pdf-meta { min-width: 0; overflow-wrap: anywhere; }
.onduleur-pdfs .pdf-lien { overflow-wrap: anywhere; }
/* Capacité max. — petit texte gris sous la capacité (card stockage) */
.onduleur-card .onduleur-cap-max { font-size: .72rem; color: var(--pc-gray2); white-space: nowrap; line-height: 1.2; }

/* Photo produit en tête de card */
.onduleur-card .onduleur-photo { text-align: center; }
.onduleur-card .onduleur-photo img {
    max-width: 100%; max-height: 130px; object-fit: contain; border-radius: 6px;
}
/* Bouton "Voir plus / Voir moins" — collé en bas de la card, lien jaune souligné */
.onduleur-card .pc-voir-plus {
    margin-top: auto; align-self: center;
    background: none; border: none; cursor: pointer;
    color: var(--pc-dark); font-weight: 700; font-size: .85rem;
    text-decoration: underline; text-decoration-color: var(--pc-yellow);
    text-decoration-thickness: 2px; text-underline-offset: 4px;
    padding: .5rem 0 0;
}
.onduleur-card .pc-voir-plus:hover { color: var(--pc-dark2); }
/* Sur mobile (< 576px) : les PDFs passent sur une seule colonne (sinon trop serré
   dans la card étroite). Sélecteur .onduleur-card .onduleur-pdfs (spécificité 0,2,0)
   pour battre la règle inline .onduleur-pdfs (0,1,0) malgré son ordre de chargement. */
@media (max-width: 575.98px) {
    .onduleur-card .onduleur-pdfs { grid-template-columns: 1fr; }
}

/* ── ONGLETS FRONT (pc-tabs) ── Style "card" : conteneur blanc arrondi + pills ── */
.pc-tabs {
    display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
    background: #fff;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    padding: .5rem;
    margin-bottom: 1.25rem;
}
.pc-tabs .pc-tab {
    padding: .55rem 1.2rem; font-weight: 600; font-size: .9rem;
    color: var(--pc-gray); text-decoration: none;
    border-radius: 999px;
    transition: color .15s, background .15s;
}
.pc-tabs .pc-tab:hover { color: var(--pc-dark); background: var(--pc-light); }
.pc-tabs .pc-tab.is-active { color: var(--pc-dark); background: var(--pc-yellow); font-weight: 700; }

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