/**
 * Page « Christophe Picciotto » (nectar 1.0.76) : portrait dans une alvéole, frise du parcours, ruche des produits. Chargée sur cette page
 * SEULEMENT, après content.css. Jetons du thème (style.css, :root) ; propriétés LOGIQUES (inline / block) : une langue de droite à gauche
 * retourne la page d'elle-même.
 * États de départ des animations : SEULEMENT sous .hpc-anime, classe posée par assets/js/profil.js. Sans script, ou avec le réglage
 * « réduire les animations » (le script ne la pose pas, ou la retire si le réglage change page ouverte), tout s'affiche dans son état final.
 * Seule exception aux propriétés logiques : la position des points d'attaque (.hpc-attaque), donnée par le script dans le repère PHYSIQUE du
 * SVG du bouclier, qui est symétrique : correcte aussi de droite à gauche.
 * Contrastes WCAG AA : texte courant ≥ 4,5:1 ; titres ≥ 18,66 px en gras (« grand texte ») ≥ 3:1.
 */

/* ── Portrait : la photo dans une alvéole, un bouclier hexagonal autour ─────────────────────────────── */
.hpc-portrait {
    display: grid;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
    margin-block-end: var(--space-md);
}

.hpc-portrait-scene {
    position: relative;
    aspect-ratio: 1;
}

/* Alvéole de la photo : hexagone régulier, pointe en haut (mêmes sommets que le bouclier, rayon 92 sur 200) */
.hpc-portrait-photo {
    position: absolute;
    inset: 4% 10%;
    display: block;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--hp-light-grey);
}

/* height en !important : la règle globale des images du thème (style.css, « img:not(#wpadminbar img):not(.emoji) », spécificité 1,1,2 à cause de
   l'identifiant dans :not) impose height:auto ; la photo gardait son rapport (480 × 476) et laissait vide le bas de l'alvéole */
.hpc-portrait-photo img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

/* Bouclier : par-dessus la photo, un trait un peu plus grand qu'elle (rayon 97) */
.hpc-bouclier {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.hpc-bouclier-trait {
    fill: none;
    stroke: var(--hp-blue);
    stroke-width: 4;
    stroke-linejoin: round;
    transition: stroke 0.25s ease, stroke-width 0.25s ease;
}

.hpc-bouclier.est-touche .hpc-bouclier-trait {
    stroke: var(--hp-orange);
    stroke-width: 7;
}

/* Le trait se dessine à l'apparition (longueur ramenée à 100 par pathLength) */
.hpc-portrait-scene.hpc-anime .hpc-bouclier-trait {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.2s ease-out, stroke 0.25s ease, stroke-width 0.25s ease;
}

.hpc-portrait-scene.hpc-anime.est-visible .hpc-bouclier-trait {
    stroke-dashoffset: 0;
}

/* Attaques : un point rouge qui fonce vers le bouclier, puis un éclat orange à l'impact */
.hpc-attaque {
    position: absolute;
    inline-size: 10px;
    block-size: 10px;
    margin: -5px 0 0 -5px;
    border-radius: var(--radius-full);
    background: var(--hp-error);
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.55);
    pointer-events: none;
}

.hpc-attaque.hpc-impact {
    background: var(--hp-orange);
    box-shadow: 0 0 14px rgba(255, 173, 51, 0.8);
}

.hpc-portrait-texte > :last-child {
    margin-block-end: 0;
}

/* ── Frise : un rail vertical, une alvéole par étape ─────────────────────────────────────────────── */
.hpc-frise {
    position: relative;
    max-width: 820px;
    margin: 0;
    padding: 0;
    padding-inline-start: 56px;
    list-style: none;
}

/* Le rail (::before) et sa partie remplie (::after) : centrés à 21 px du bord ; complets sans script */
.hpc-frise::before,
.hpc-frise::after {
    content: '';
    position: absolute;
    inset-block-start: 6px;
    inset-inline-start: 19px;
    inline-size: 4px;
    border-radius: 2px;
}

.hpc-frise::before {
    block-size: var(--frise-rail, calc(100% - 12px));
    background: rgba(74, 144, 226, 0.18);
}

.hpc-frise::after {
    block-size: var(--frise-progres, var(--frise-rail, calc(100% - 12px)));
    background: linear-gradient(to bottom, var(--hp-blue), var(--hp-blue-navy));
    transition: block-size 0.7s ease;
}

.hpc-frise-etape {
    position: relative;
    padding-block-end: var(--space-lg);
}

.hpc-frise-etape:last-child {
    padding-block-end: 0;
}

/* Alvéole de l'étape : un hexagone bleu, son cœur orange (allumé) */
.hpc-frise-marque {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -48px;
    inline-size: 26px;
    block-size: 30px;
    z-index: 1;                       /* au-dessus du rail (::after de la liste, peint après les étapes) */
    background: var(--hp-blue);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    transition: transform 0.25s ease;
}

.hpc-frise-marque::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: var(--hp-orange);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    transition: background-color 0.4s ease;
}

.hpc-frise-etape:hover .hpc-frise-marque {
    transform: scale(1.18);
}

.hpc-frise-annee {
    margin: 0 0 2px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--hp-blue-navy);       /* 11,5:1 (#3A7BC8 : 4,17:1, sous le seuil de 4,5 à 15,2 px) */
}

.hpc-frise-etape h3 {
    margin: 0 0 var(--space-xs);
    font-size: 1.17rem;               /* 18,72 px en gras = « grand texte » : le bleu du thème (3,17:1) y passe le seuil de 3:1 */
}

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

/* Animée : l'étape monte et apparaît ; son alvéole reste blanche jusque-là */
.hpc-frise.hpc-anime .hpc-frise-etape {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.hpc-frise.hpc-anime .hpc-frise-etape.est-visible {
    opacity: 1;
    transform: none;
}

.hpc-frise.hpc-anime .hpc-frise-etape:not(.est-visible) .hpc-frise-marque::after {
    background: var(--hp-white);
}

/* ── Ruche : HiveProtect au centre, les autres produits autour ──────────────────────────────────── */
.hpc-ruche {
    position: relative;
    container-type: inline-size;      /* les alvéoles hexagonales se décident sur la largeur du bloc EN em (voir plus bas) */
}

.hpc-ruche-liste {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Téléphone et tablette : des cartes, le centre en premier */
.hpc-alveole-cadre {
    height: 100%;
    transition: transform 0.25s ease;
}

.hpc-alveole-forme {
    height: 100%;
    padding: var(--space-md);
    overflow-wrap: break-word;        /* un mot plus long que la carte (russe, texte agrandi à 200 % ; toutes langues à 300 %) se coupe au lieu de déborder */
    background: var(--hp-white);
    border: 2px solid rgba(74, 144, 226, 0.35);
    border-radius: var(--radius-lg);
}

.hpc-alveole h3 {
    margin: 0 0 var(--space-xs);
    font-size: 1.17rem;               /* « grand texte » (voir la frise) */
}

.hpc-alveole p {
    margin: 0;
    font-size: 0.95rem;
}

.hpc-alveole .hpc-alveole-lien {
    margin-block-start: var(--space-xs);
    font-weight: 600;
}

/* !important : la règle globale des liens du thème (style.css, a:not(…), spécificité 1,3,2) l'emporterait — même parade que features.css */
.hpc-alveole-lien a {
    color: var(--hp-blue-navy) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.hpc-alveole--centre .hpc-alveole-forme {
    background: var(--hp-blue-navy);
    border-color: var(--hp-blue-navy);
}

.hpc-alveole--centre h3 {
    color: var(--hp-orange);
}

.hpc-alveole--centre p {
    color: var(--hp-white);
}

.hpc-alveole:hover .hpc-alveole-cadre,
.hpc-alveole:focus-within .hpc-alveole-cadre {
    transform: translateY(-4px);
}

/* Traits entre le centre et les alvéoles : tracés par profil.js, visibles seulement en disposition « ruche » */
.hpc-ruche-liens {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.hpc-ruche-liens line {
    stroke: rgba(74, 144, 226, 0.5);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke 0.25s ease, stroke-width 0.25s ease, stroke-dashoffset 0.9s ease 0.35s;
}

.hpc-ruche-liens line.est-active {
    stroke: var(--hp-orange);
    stroke-width: 3;
}

.hpc-ruche-liens circle {
    fill: var(--hp-orange);
}

/* Ordinateur : la ruche en nid d'abeille. Les rangées se resserrent : une alvéole déborde sur la rangée voisine, jamais dans sa colonne.
   - 3 alvéoles autour du centre (la page « Christophe Picciotto ») : deux en haut, le centre remonté d'une demi-hauteur entre elles, la
     troisième sous le centre ;
   - 4 alvéoles : en X autour du centre.
   Requête de CONTENEUR en em, pas de fenêtre en px : 50em = 800 px au texte normal ; dès que le texte grossit (zoom du
   texte seul, extension, police système), le seuil grandit avec lui et la ruche passe en cartes, qui ne rognent jamais rien.
   Les tailles de la ruche sont en rem, pas en px : elle grandit AVEC son texte (en px, le texte à 130 % sortait de l'alvéole de Prospect Hub,
   mesuré le 09/10). Mesure au texte normal : marge du texte au bord de l'hexagone 14,6 px au seuil, 27,9 px à pleine largeur. */
@container (min-width: 50em) {
    .hpc-ruche--3 .hpc-ruche-liste,
    .hpc-ruche--4 .hpc-ruche-liste {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 var(--space-md);
        max-width: 55rem;
        margin-inline: auto;
        margin-block-start: var(--space-md);
    }

    .hpc-ruche--3 .hpc-ruche-liste {
        grid-template-areas:
            "a . b"
            ". c ."
            ". d .";
    }

    .hpc-ruche--3 .hpc-alveole--1 { grid-area: a; }
    .hpc-ruche--3 .hpc-alveole--2 { grid-area: b; }
    .hpc-ruche--3 .hpc-alveole--3 { grid-area: d; }

    /* Une marge en % d'un élément de grille se mesure sur la LARGEUR de sa zone : -43,3 % = la moitié de la hauteur d'une alvéole
       (hauteur = largeur ÷ 1,1547) ; la troisième garde l'écart des colonnes, ramené à la verticale (× 0,866) */
    .hpc-ruche--3 .hpc-alveole--centre {
        grid-area: c;
        margin-block-start: -43.3%;
    }

    .hpc-ruche--3 .hpc-alveole--3 {
        margin-block-start: calc(var(--space-md) * 0.866);
    }

    .hpc-ruche--4 .hpc-ruche-liste {
        grid-template-rows: repeat(3, 10.75rem);
        grid-template-areas:
            "a . b"
            ". c ."
            "d . e";
        padding-block: 2.125rem;
    }

    .hpc-ruche--4 .hpc-alveole {
        align-self: center;
    }

    .hpc-ruche--4 .hpc-alveole--centre { grid-area: c; }
    .hpc-ruche--4 .hpc-alveole--1 { grid-area: a; }
    .hpc-ruche--4 .hpc-alveole--2 { grid-area: b; }
    .hpc-ruche--4 .hpc-alveole--3 { grid-area: d; }
    .hpc-ruche--4 .hpc-alveole--4 { grid-area: e; }

    .hpc-ruche--3 .hpc-alveole,
    .hpc-ruche--4 .hpc-alveole {
        filter: drop-shadow(0 4px 10px rgba(30, 58, 95, 0.12));
        transition: filter 0.25s ease;
    }

    .hpc-ruche--3 .hpc-alveole:hover,
    .hpc-ruche--3 .hpc-alveole:focus-within,
    .hpc-ruche--4 .hpc-alveole:hover,
    .hpc-ruche--4 .hpc-alveole:focus-within {
        filter: drop-shadow(0 10px 18px rgba(30, 58, 95, 0.28));
    }

    /* Hexagone régulier, pointes à gauche et à droite : un cadre bleu de 2 px, la forme blanche dedans */
    .hpc-ruche--3 .hpc-alveole-cadre,
    .hpc-ruche--4 .hpc-alveole-cadre {
        aspect-ratio: 1.1547;
        height: auto;
        padding: 2px;
        background: rgba(74, 144, 226, 0.55);
        clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    }

    .hpc-ruche--3 .hpc-alveole--centre .hpc-alveole-cadre,
    .hpc-ruche--4 .hpc-alveole--centre .hpc-alveole-cadre {
        background: var(--hp-blue-navy);
    }

    .hpc-ruche--3 .hpc-alveole-forme,
    .hpc-ruche--4 .hpc-alveole-forme {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 6% 19%;
        border: 0;
        border-radius: 0;
        text-align: center;
        clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    }

    .hpc-ruche--3 .hpc-alveole p,
    .hpc-ruche--4 .hpc-alveole p {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .hpc-ruche--3 .hpc-ruche-liens,
    .hpc-ruche--4 .hpc-ruche-liens {
        display: block;
    }
}

/* Animée : les alvéoles éclosent l'une après l'autre, le centre d'abord */
.hpc-alveole--1 { --n: 1; }
.hpc-alveole--2 { --n: 2; }
.hpc-alveole--3 { --n: 3; }
.hpc-alveole--4 { --n: 4; }
.hpc-alveole--5 { --n: 5; }
.hpc-alveole--6 { --n: 6; }

.hpc-ruche.hpc-anime .hpc-alveole {
    opacity: 0;
    transform: scale(0.86);
    /* le délai d'éclosion porte sur l'opacité et l'échelle SEULEMENT : l'ombre au survol réagit tout de suite */
    transition: opacity 0.5s ease calc(var(--n, 0) * 130ms), transform 0.55s cubic-bezier(0.2, 0.8, 0.25, 1.25) calc(var(--n, 0) * 130ms),
        filter 0.25s ease 0s;
}

.hpc-ruche.hpc-anime.est-visible .hpc-alveole {
    opacity: 1;
    transform: none;
}

/* ── Téléphone ─────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .hpc-portrait {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-md);
    }

    .hpc-portrait-scene {
        justify-self: center;
        inline-size: min(210px, 70%);
    }

    .hpc-frise {
        padding-inline-start: 48px;
    }

    .hpc-frise::before,
    .hpc-frise::after {
        inset-inline-start: 15px;
    }

    .hpc-frise-marque {
        inset-inline-start: -44px;
    }
}

/* ── Réglage « réduire les animations » activé PAGE OUVERTE : le script retire hpc-anime ; aucune transition vers l'état final ── */
@media (prefers-reduced-motion: reduce) {
    .hpc-portrait-scene,
    .hpc-portrait-scene *,
    .hpc-frise,
    .hpc-frise *,
    .hpc-ruche,
    .hpc-ruche * {
        transition: none !important;
    }

    .hpc-attaque {
        display: none;
    }
}

/* ── Impression : tout est affiché, rien de décoratif ──────────────────────────────────────────── */
@media print {
    .hpc-anime .hpc-frise-etape,
    .hpc-anime .hpc-alveole {
        opacity: 1 !important;
        transform: none !important;
    }

    .hpc-anime,
    .hpc-anime * {
        transition: none !important;
    }

    .hpc-anime .hpc-frise-marque::after {
        background: var(--hp-orange) !important;
    }

    .hpc-frise::after {
        block-size: var(--frise-rail, calc(100% - 12px)) !important;
    }

    .hpc-attaque,
    .hpc-ruche-liens {
        display: none !important;
    }
}