/**
 * Page « Fonctionnalités » (template-features.php) — chargée uniquement sur ce modèle.
 * Préfixe hpf- ; réutilise les variables et composants du thème (section, card, grid, btn).
 * Propriétés logiques (inline/block) : correctes aussi en écriture de droite à gauche (arabe).
 */

/* Hero plus compact que celui de l'accueil (qui occupe tout l'écran) */
.hpf-hero {
    min-height: auto;
    padding-block: var(--space-2xl) var(--space-lg);
    justify-content: center;
    text-align: center;
}

.hpf-hero .hero-content {
    max-width: 900px;
    margin-inline: auto;
}

.hpf-hero h1 {
    font-size: 3rem;
}

.hpf-intro-section {
    padding-block: 0 var(--space-xl);
}

/* Encadré de l'essai gratuit */
.hpf-trial {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    background: var(--hp-white);
    border: 2px solid var(--hp-orange);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
}

.hpf-trial-icon {
    font-size: 48px;
    color: var(--hp-orange);
    flex-shrink: 0;
}

.hpf-trial-body {
    flex: 1;
}

.hpf-trial-body p {
    margin: 0;
    color: var(--hp-dark-grey);
}

.hpf-trial-body .hpf-trial-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    margin-block-end: var(--space-xs);
    color: var(--hp-blue-navy);
}

.hpf-trial-btn {
    flex-shrink: 0;
}

.hpf-trial .btn-accent {
    color: var(--hp-dark-grey);
}

/* 1.0.81 : « Télécharger HiveProtect » puis « Voir les tarifs », l'un sous l'autre, de même largeur */
.hpf-trial-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
    flex-shrink: 0;
}

/* Vidéo « toutes les fonctionnalités » (1.0.59) : sous l'encadré de l'essai, au-dessus du sommaire. Même cadre et mêmes boutons
   que la vidéo de l'accueil (style.css, .video-b-*), à la largeur de l'encadré. */
.hpf-video {
    margin-block-start: var(--space-xl);
}

.hpf-video .video-b-cadre {
    max-width: none;
}

/* Sommaire */
.hpf-toc {
    margin-block-start: var(--space-xl);
}

.hpf-toc-title {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-block-end: var(--space-sm);
    color: var(--hp-blue-navy);
}

.hpf-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hpf-toc a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--hp-blue-light);
    border-radius: 999px;
    color: #2A6AB5 !important; /* !important : la règle globale des liens (a:not(#wpadminbar a)…) l'emporterait */
    text-decoration: none;
    font-size: 0.9375rem;
    background: var(--hp-white);
    transition: background var(--transition-normal), color var(--transition-normal);
}

.hpf-toc a:hover,
.hpf-toc a:focus-visible {
    background: #2A6AB5;
    color: var(--hp-white) !important;
}

/* Sections : les ancres ne passent pas sous l'en-tête fixe */
.hpf-section {
    scroll-margin-top: calc(var(--header-height) + var(--space-sm));
}

.hpf-section-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-block-end: var(--space-xl);
}

.hpf-section-icon {
    font-size: 40px;
    color: var(--hp-blue);
    flex-shrink: 0;
    margin-block-start: 4px;
}

.hpf-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.hpf-section-heading h2 {
    margin: 0;
}

.hpf-tabs {
    margin: var(--space-xs) 0 0;
    color: var(--hp-medium-grey);
    font-size: 0.9375rem;
}

/* Cartes */
.hpf-card h3 {
    font-size: 1.25rem;
    margin-block: var(--space-xs);
}

.hpf-card p {
    margin: 0;
    color: var(--hp-dark-grey);
}

.hpf-lead {
    font-size: 1.125rem;
    max-width: 900px;
    color: var(--hp-dark-grey);
}

.hpf-note {
    margin-block-start: var(--space-md);
    color: var(--hp-medium-grey);
    font-size: 0.9375rem;
}

/* Badges Gratuit / Avec licence */
.hpf-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.hpf-badge-free {
    background: #e6f4ea;
    color: #1e7e34;
}

.hpf-badge-license {
    background: #e8f0fb;
    color: #2A6AB5;
}

/* Tableau comparatif */
.hpf-table-wrap {
    position: relative; /* ancêtre positionné des .hpf-sr : sinon ils élargissent la page sur téléphone */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.hpf-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    background: var(--hp-white);
}

.hpf-table th,
.hpf-table td {
    padding: 12px 16px;
    border-block-end: 1px solid #e9ecef;
    text-align: start;
}

.hpf-table thead th {
    background: var(--hp-blue-navy);
    color: var(--hp-white);
    font-family: var(--font-heading);
    font-weight: 600;
}

.hpf-table thead th:not(:first-child),
.hpf-table td {
    text-align: center;
    width: 22%;
}

.hpf-table tbody th {
    font-weight: 400;
}

.hpf-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.hpf-yes {
    color: var(--hp-success);
    font-size: 24px;
    vertical-align: middle;
}

.hpf-no {
    color: #adb5bd;
    font-weight: 700;
}

/* FAQ */
.hpf-faq-item {
    background: var(--hp-white);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-block-end: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.hpf-faq-item h3 {
    font-size: 1.125rem;
    margin: 0 0 var(--space-xs);
}

.hpf-faq-item p {
    margin: 0;
    color: var(--hp-dark-grey);
}

/* Texte réservé aux lecteurs d'écran */
.hpf-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .hpf-hero h1 {
        font-size: 2.25rem;
    }
}

@media (max-width: 600px) {
    .hpf-hero h1 {
        font-size: 1.875rem;
    }

    .hpf-grid {
        grid-template-columns: 1fr;
    }

    .hpf-trial {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .hpf-trial-actions {
        align-self: stretch;
    }

    .hpf-section-header {
        gap: var(--space-sm);
    }

    .hpf-section-icon {
        font-size: 32px;
    }

    .hpf-faq-item {
        padding: var(--space-sm) var(--space-md);
    }
}