/**
 * Pages de contenu (template-content.php) — composants propres, EN PLUS de features.css (ossature commune hpf-* : en-tête compact,
 * sommaire, sections, cartes, badges, tableau, bloc d'essai). Mêmes variables, rayons, ombres et typographie que le thème : rien de neuf
 * qui n'existe déjà ailleurs sur le site, pour que toutes les pages restent ergonomiquement stables.
 * Propriétés logiques (inline/block) : correctes aussi en arabe. Chargée seulement sur ce modèle, après features.css.
 */

/* Icônes SVG intégrées : elles suivent la taille (font-size) et la couleur du conteneur, comme la police d'icônes des autres pages */
.hpc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.hpc-svg {
    display: block;
    width: 1em;
    height: 1em;
}

/* Texte, listes */
.hpc-text {
    max-width: 900px;
    margin: 0 0 var(--space-md);
    color: var(--hp-dark-grey);
}

.hpc-list {
    max-width: 900px;
    margin: 0 0 var(--space-md);
    padding-inline-start: 1.25rem;
    list-style: disc;
    color: var(--hp-dark-grey);
}

.hpc-list li {
    margin-block-end: var(--space-xs);
}

.hpc-list li::marker {
    color: var(--hp-blue);
}

.hpf-card .hpc-list {
    margin: var(--space-sm) 0 0;
    font-size: 0.9375rem;
}

/* Lien en bas d'une carte (« Découvrir… ») : la couleur, le gras et le survol viennent de la règle globale des liens (style.css).
   Une carte qui porte un lien devient une colonne : le lien se range en bas, à la même hauteur d'une carte à l'autre (sans :has(),
   le lien suit simplement le texte). */
.hpf-card:has(.hpc-card-link) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hpf-card .hpc-card-link {
    margin: auto 0 0;
    padding-block-start: var(--space-sm);
}

/* Un bloc qui SUIT une grille de cartes (encadré, paragraphe, liste…) ne la touche pas : .grid n'a pas de marge basse (style.css). Une grille en fin
   de section n'en reçoit pas (le remplissage de la section suffit) ; suivie du bloc d'aide, la marge du bloc d'aide (plus grande) l'emporte (fusion des marges). */
.hpc-page .hpf-grid:not(:last-child) {
    margin-block-end: var(--space-md);
}

.hpc-page code {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: #eaf2fb;
    color: var(--hp-blue-navy);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

/* Icône d'une carte */
.hpc-card-icon {
    display: inline-flex;
    font-size: 32px;
    color: var(--hp-blue);
    margin-block-end: var(--space-xs);
}

/* Étapes numérotées : le composant « install-step » de l'accueil, empilé en colonne et aligné à gauche */
.hpc-steps {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-sm);
    max-width: 900px;
    margin: var(--space-sm) 0 var(--space-md);
}

.hpc-steps:first-child {
    margin-block-start: 0;
}

.hpc-steps .install-step {
    align-items: flex-start;
    padding: var(--space-sm) var(--space-md);
}

.hpc-steps .install-step p {
    padding-block-start: 6px;
    text-align: start;
}

/* Encadrés « astuce », « attention », « info » */
.hpc-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    max-width: 900px;
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    background: var(--hp-white);
    border-radius: var(--radius-md);
    border-inline-start: 4px solid var(--hp-blue);
    box-shadow: var(--shadow-sm);
}

.hpc-callout--attention {
    border-inline-start-color: var(--hp-orange);
}

.hpc-callout-icon {
    flex-shrink: 0;
    display: inline-flex;
    font-size: 24px;
    color: var(--hp-blue);
    margin-block-start: 2px;
}

.hpc-callout--attention .hpc-callout-icon {
    color: var(--hp-orange-dark);
}

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

.hpc-callout .hpc-callout-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--hp-blue-navy);
    margin-block-end: 2px;
}

/* Questions / réponses déroulantes : la carte « hpf-faq-item » de la page Fonctionnalités, repliable */
.hpc-qr {
    padding: 0;
}

.hpc-qr summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-md);
}

.hpc-qr summary::-webkit-details-marker {
    display: none;
}

.hpc-qr summary h3 {
    margin: 0;
}

.hpc-qr summary:hover h3 {
    color: var(--hp-blue-dark);
}

.hpc-qr summary:focus-visible {
    outline: 3px solid var(--hp-blue-light);
    outline-offset: -3px;
}

.hpc-chevron {
    flex-shrink: 0;
    display: inline-flex;
    font-size: 24px;
    color: var(--hp-blue);
    transition: transform var(--transition-normal);
}

.hpc-qr[open] > summary .hpc-chevron {
    transform: rotate(180deg);
}

.hpc-qr-r {
    padding: 0 var(--space-lg) var(--space-md);
}

/* Écart entre un paragraphe (ou une note) et le bloc suivant : la règle « .hpf-faq-item p » de la page Fonctionnalités le remettait à 0 */
.hpc-qr-r .hpc-text {
    margin: 0 0 var(--space-sm);
}

.hpc-qr-r .hpf-note {
    margin-block-start: var(--space-sm);
}

.hpc-qr-r > :last-child {
    margin-block-end: 0;
}

/* Dans une réponse, le contenu prend toute la largeur de la carte (comme la FAQ de la page Fonctionnalités) */
.hpc-qr-r .hpc-text,
.hpc-qr-r .hpc-list,
.hpc-qr-r .hpc-steps,
.hpc-qr-r .hpc-callout {
    max-width: none;
}

/* Tableau de texte (configuration requise…) : colonnes alignées à gauche, contrairement au comparatif oui/non */
.hpc-table thead th:not(:first-child),
.hpc-table td {
    text-align: start;
    width: auto;
}

.hpc-table tbody th {
    width: 28%;
    font-weight: 600;
}

.hpf-table-wrap {
    margin-block-end: var(--space-md);
}

/* Bloc d'aide : l'encadré de l'essai gratuit, en bleu, à la fin de la dernière section */
.hpc-help {
    margin-block-start: var(--space-xl);
    border-color: var(--hp-blue);
}

.hpc-help .hpf-trial-icon {
    color: var(--hp-blue);
}

.hpc-links {
    margin-block-start: var(--space-sm);
}

@media (max-width: 600px) {
    /* Tableau de texte : une carte par ligne, chaque cellule précédée du nom de sa colonne (attribut data-label), plus de défilement latéral */
    .hpc-table-wrap {
        overflow: visible;
        box-shadow: none;
        border-radius: 0;
    }

    .hpc-table {
        min-width: 0;
        background: transparent;
    }

    .hpc-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .hpc-table,
    .hpc-table tbody,
    .hpc-table tr,
    .hpc-table th,
    .hpc-table td {
        display: block;
        width: 100%;
    }

    .hpc-table tbody tr,
    .hpc-table tbody tr:nth-child(even) {
        margin-block-end: var(--space-sm);
        background: var(--hp-white);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    .hpc-table tbody th {
        width: 100%;
        padding: 12px 16px;
        background: #eef4fb;
        color: var(--hp-blue-navy);
        font-weight: 700;
        border-block-end: 0;
    }

    .hpc-table td {
        padding: 10px 16px 0;
        border-block-end: 0;
    }

    .hpc-table td:last-child {
        padding-block-end: 12px;
    }

    .hpc-table td::before {
        content: attr(data-label);
        display: block;
        margin-block-end: 2px;
        font-family: var(--font-heading);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--hp-blue-dark);
    }

    /* Un nom de cookie ou de fichier très long passe à la ligne au lieu de sortir de sa carte (taille du texte à 200 %) */
    .hpc-table code {
        overflow-wrap: anywhere;
    }

    .hpc-qr summary {
        padding: var(--space-sm) var(--space-md);
    }

    .hpc-qr-r {
        padding: 0 var(--space-md) var(--space-sm);
    }

    .hpc-steps .install-step {
        padding: var(--space-sm) var(--space-md);
    }

    .hpc-callout {
        padding: var(--space-sm) var(--space-md);
    }
}

/* 1.0.64 — page Cookies : ses tableaux à 4 colonnes (noms de cookies insécables) défilaient de côté entre 601 et ~734 px, 4e colonne rognée : ils s'empilent
   en cartes jusqu'à 760 px, comme à 600 px et moins (mêmes règles que le bloc « max-width: 600px » ci-dessus, limitées à cette page) */
@media (min-width: 601px) and (max-width: 760px) {
    .hpc-page--cookies .hpc-table-wrap {
        overflow: visible;
        box-shadow: none;
        border-radius: 0;
    }

    .hpc-page--cookies .hpc-table {
        min-width: 0;
        background: transparent;
    }

    .hpc-page--cookies .hpc-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .hpc-page--cookies .hpc-table,
    .hpc-page--cookies .hpc-table tbody,
    .hpc-page--cookies .hpc-table tr,
    .hpc-page--cookies .hpc-table th,
    .hpc-page--cookies .hpc-table td {
        display: block;
        width: 100%;
    }

    .hpc-page--cookies .hpc-table tbody tr,
    .hpc-page--cookies .hpc-table tbody tr:nth-child(even) {
        margin-block-end: var(--space-sm);
        background: var(--hp-white);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    .hpc-page--cookies .hpc-table tbody th {
        width: 100%;
        padding: 12px 16px;
        background: #eef4fb;
        color: var(--hp-blue-navy);
        font-weight: 700;
        border-block-end: 0;
    }

    .hpc-page--cookies .hpc-table td {
        padding: 10px 16px 0;
        border-block-end: 0;
    }

    .hpc-page--cookies .hpc-table td:last-child {
        padding-block-end: 12px;
    }

    .hpc-page--cookies .hpc-table td::before {
        content: attr(data-label);
        display: block;
        margin-block-end: 2px;
        font-family: var(--font-heading);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--hp-blue-dark);
    }

    .hpc-page--cookies .hpc-table code {
        overflow-wrap: anywhere;
    }
}

/* 1.0.64 — page Contact : deux cartes seulement, la grille à trois colonnes laissait un vide à droite de 901 à 1400 px */
@media (min-width: 901px) {
    .hpc-page--contact .hpf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 1.0.64 — un numéro de téléphone ne se coupe jamais en fin de ligne (Mentions légales, CGV, et les textes des 7 autres langues à venir) */
.hpc-page a[href^="tel:"] {
    white-space: nowrap;
    direction: ltr;           /* 1.0.69 : en arabe (dir="rtl") un numéro à espaces gardait ses groupes dans l'ordre inverse (« 31 66 44 70 09 ») : isolé de gauche à droite, il se lit « 09 70 44 66 31 » */
    unicode-bidi: isolate;
}

/* =====================================================================================================================================
   Page Statut système (élément « statut », dessiné par assets/js/status.js d'après le fichier d'états des sondes hivestatus).
   Propriétés logiques : correct aussi en arabe (la barre la plus ancienne est alors à droite, sens de lecture). Les couleurs de TEXTE d'état sont plus
   foncées que celles des barres (contraste ≥ 4,5:1 sur blanc) ; l'état est toujours aussi écrit en toutes lettres : la couleur n'est jamais seule.
   ===================================================================================================================================== */
.hpc-status {
    --hps-degrade: #c77700;   /* « Dégradé » : 3,46:1 sur blanc (l'orange du thème, #FFAD33, n'en fait que 1,86:1) ; valeur LOCALE au bloc Statut */
    max-width: 900px;
}

.hpc-status-global {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
    padding: var(--space-md);
    background: var(--hp-white);
    border-radius: var(--radius-md);
    border-inline-start: 6px solid var(--hp-medium-grey);
    box-shadow: var(--shadow-sm);
}

.hpc-status-global-texte {
    min-height: 1.5em;   /* la hauteur du bandeau ne change pas quand le script y écrit : pas de saut de page */
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--hp-blue-navy);
}

.hpc-status-puce {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--hp-medium-grey);
}

.hpc-status-global[data-etat="ok"] {
    border-inline-start-color: var(--hp-success);
}

.hpc-status-global[data-etat="ok"] .hpc-status-puce {
    background: var(--hp-success);
}

.hpc-status-global[data-etat="degrade"] {
    border-inline-start-color: var(--hps-degrade);
}

.hpc-status-global[data-etat="degrade"] .hpc-status-puce {
    background: var(--hps-degrade);
}

.hpc-status-global[data-etat="panne"] {
    border-inline-start-color: var(--hp-error);
}

.hpc-status-global[data-etat="panne"] .hpc-status-puce {
    background: var(--hp-error);
}

.hpc-status-services {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hpc-status-service {
    padding: var(--space-md);
    background: var(--hp-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.hpc-status-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-sm);
}

.hpc-status-tete h3 {
    margin: 0;
    font-size: 1.125rem;
}

.hpc-status-etat {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #666666;
}

.hpc-status-service[data-etat="ok"] .hpc-status-etat {
    color: #1e7e34;
}

.hpc-status-service[data-etat="degrade"] .hpc-status-etat {
    color: #8a5300;
}

.hpc-status-service[data-etat="panne"] .hpc-status-etat {
    color: #b02a37;
}

.hpc-status-texte {
    margin: var(--space-xs) 0 var(--space-sm);
    font-size: 0.9375rem;
    color: var(--hp-dark-grey);
}

.hpc-status-barres {
    display: flex;
    gap: 2px;
    min-height: 34px;
}

.hpc-status-barre {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    border-radius: 2px;
    background: #d5dae1;
}

.hpc-status-barre[data-e="ok"] {
    background: var(--hp-success);
}

.hpc-status-barre[data-e="degrade"] {
    background: var(--hps-degrade);
}

.hpc-status-barre[data-e="panne"] {
    background: var(--hp-error);
}

/* Jamais chargé (fichier introuvable) : ni barre vide ni légende */
.hpc-status-barres:empty,
.hpc-status-barres:empty + .hpc-status-legende {
    display: none;
}

.hpc-status-legende {
    display: flex;
    justify-content: space-between;
    margin-block-start: 6px;
    font-size: 0.8125rem;
    color: var(--hp-medium-grey);
}

.hpc-status-maj {
    margin: var(--space-sm) 0 0;
    font-size: 0.875rem;
    color: var(--hp-medium-grey);
}

.hpc-status-incidents {
    margin-block-start: var(--space-lg);
}

.hpc-status-incidents h3 {
    margin: 0 0 var(--space-sm);
    font-size: 1.125rem;
}

.hpc-status-aucun {
    margin: 0;
    color: var(--hp-medium-grey);
}

.hpc-status-incident {
    margin-block-end: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--hp-white);
    border-radius: var(--radius-md);
    border-inline-start: 4px solid var(--hps-degrade);
    box-shadow: var(--shadow-sm);
}

.hpc-status-incident[data-gravite="panne"] {
    border-inline-start-color: var(--hp-error);
}

.hpc-status-incident-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs);
}

.hpc-status-incident h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--hp-blue-navy);
}

.hpc-status-incident-etat {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #666666;
}

.hpc-status-incident[data-ouvert="1"] .hpc-status-incident-etat {
    color: #b02a37;
}

.hpc-status-incident-meta {
    margin: 2px 0 0;
    font-size: 0.875rem;
    color: var(--hp-medium-grey);
}

.hpc-status-incident-texte {
    margin: var(--space-xs) 0 0;
    font-size: 0.9375rem;
    color: var(--hp-dark-grey);
}

/* Un mot sans espace (adresse collée dans un texte d'incident) passe à la ligne au lieu de dépasser de sa carte */
.hpc-status-incident h4,
.hpc-status-incident-meta,
.hpc-status-incident-texte {
    overflow-wrap: anywhere;
}

/* Sans JavaScript, seul le message du <noscript> parle : le bandeau vide reste INVISIBLE mais garde sa place (pas de saut de page quand le script écrit),
   la liste des incidents vide est masquée avec son titre. Deux règles séparées : un navigateur sans :has() ignore l'une sans perdre l'autre. */
.hpc-status-global:has(.hpc-status-global-texte:empty) {
    visibility: hidden;
}

.hpc-status-incidents:has(.hpc-status-incidents-liste:empty) {
    display: none;
}

@media (max-width: 600px) {
    /* 90 barres sur ~310 px : plus fines, séparées d'un pixel */
    .hpc-status-barres {
        gap: 1px;
        min-height: 28px;
    }

    .hpc-status-barre {
        height: 28px;
    }

    .hpc-status-global,
    .hpc-status-service {
        padding: var(--space-sm);
    }
}