/* ==================================================================
   PAGE "MÉTHODE PRISME" — replay gratuit (lead magnet)
   Page dédiée, pas la mise en page article (blog.css) ni la one-page
   (hola-page.css) : ses propres classes .hnp-*, variables de style.css
   uniquement. Chargée seulement sur methode-prisme et merci-prisme
   (voir astra_child_enqueue_methode_prisme() dans functions.php).
   ================================================================== */

/* 960px et non les 760px d'origine : sans sidebar (contrairement à
   .hnb-page + .hnb-layout, 1160px, utilisé par Le Grand Jour), un conteneur
   aussi étroit laissait une marge vide énorme de chaque côté sur un grand
   écran et donnait une impression de contenu serré. Le texte lui-même reste
   lisible : la règle globale `p { max-width: 680px }` (style.css) continue
   de le borner à l'intérieur de ce conteneur plus large. */
.hnp-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px 100px;
}

.hnp-hero {
    text-align: center;
    padding: 64px 0 40px;
}

.hnp-hero__title {
    /* Voir .hnp-article h2 plus bas pour l'explication : répartit le H1
       sur des lignes de longueur proche au lieu d'une ligne très longue
       suivie d'une très courte. */
    text-wrap: balance;
}

.hnp-hero__subtitle {
    max-width: 560px;
    /* margin-top propre : h1 (style.css) n'a pas de margin-bottom, le titre
       et le sous-titre se touchaient presque. Demandé "partout" par
       Nathalie : plus d'air entre chaque titre et sa description. */
    margin: 20px auto 32px;
}

.hnp-hero__trust {
    font-size: 13px;
    color: var(--color-text-primary);
    margin: 16px 0 0;
    /* Explicite plutôt que compter sur l'héritage de .hnp-hero
       (text-align: center) : signalé aligné à gauche par Nathalie. */
    text-align: center;
}

/* Formulaire : même recette que .hnb-newsletter__* (blog.css), reprise ici
   plutôt que partagée, cette page ne chargeant pas blog.css. */
.hnp-form {
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.hnp-form__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.hnp-form__input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(22, 16, 58, 0.15);
    border-radius: 9999px;
    font: inherit;
    font-size: 15px;
    color: var(--color-text-primary);
    background: var(--color-surface);
}

.hnp-form__input:focus {
    outline: 2px solid var(--color-action-hover);
    outline-offset: 2px;
}

.hnp-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-primary);
    margin: 4px 0 2px;
}

.hnp-form__consent input {
    flex-shrink: 0;
    margin-top: 3px;
}

.hnp-form__consent a {
    color: #B25547;
}

.hnp-form__caption {
    text-align: center;
    margin: 0;
}

.hnp-form__feedback {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    min-height: 1em;
    text-align: center;
}

/* Bouton : même recette que les 4 boutons du site (CLAUDE.md — repos
   --color-action-hover + blanc, survol --color-action + --color-action-text),
   dupliquée ici plutôt que dépendante de blog.css. */
.hnp-cta__button {
    display: inline-block;
    width: 100%;
    background-color: var(--color-action-hover);
    color: #fff !important;
    border: 0;
    border-radius: 9999px;
    padding: 14px 26px;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.hnp-cta__button:hover {
    background-color: var(--color-action);
    color: var(--color-action-text) !important;
}

.hnp-cta__button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Le CTA répété en bas de page est un lien, pas un bouton submit : largeur
   naturelle, pas 100%. */
a.hnp-cta__button {
    width: auto;
    padding: 14px 32px;
}

.hnp-article {
    font-size: 15px;
    line-height: 1.6;
}

/* Espacement explicite entre paragraphes consécutifs (le bloc "Ce qui
   t'attend dans le replay" en tient quatre à la suite) : sans cette règle,
   ils ne prennent que la marge par défaut du navigateur, trop serrée pour
   des paragraphes de cette longueur. Même mesure que .hnp-audience li. */
.hnp-article p {
    margin: 0 0 20px;
}

.hnp-article p:last-child {
    margin-bottom: 0;
}

.hnp-article h2 {
    text-align: center;
    /* 20px (style.css, global) -> 32px : plus d'air entre chaque titre et
       la description qui suit, demandé "partout" par Nathalie. */
    margin-bottom: 32px;
    /* Répartit le texte sur 2 lignes de longueur proche plutôt qu'une
       première ligne très longue et une deuxième très courte (signalé sur
       "Tes clients n'achètent pas..."). Support navigateur correct
       aujourd'hui (Chrome, Safari 17.4+, Firefox 121+) ; sans effet,
       jamais cassant, ailleurs. */
    text-wrap: balance;
}

/* Icône à côté d'un titre : même recette que .hn-methode__card-title
   (hola-page.css) — display flex + ::before 32px — mais avec
   justify-content: center, ce titre restant centré (text-align: center
   ci-dessus, sans effet une fois le titre passé en flex). Enregistrée
   dans hn_icones_registre() (functions.php) comme les icônes de
   l'accueil : modifiable depuis Apparence > Personnaliser > Icônes de
   section. */
.hnp-heading--replay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hnp-heading--replay::before {
    content: '';
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--hn-icone-prisme-replay, url('assets/icon-prisme-replay.png'));
}

/* "Ce replay est pour toi si..." : alignée sur les mêmes bords que le menu
   (.hn-nav, hola-page.css), pas sur .hnp-page (960px). Même formule que
   .hn-nav (--hn-rail-width/--hn-rail-gutter, déjà globales), adaptée pour un
   élément en flux normal plutôt qu'en position fixe : margin-left: 50% amène
   le bord gauche au centre du parent (donc au centre de l'écran, .hnp-page
   étant lui-même centré), puis translateX(-50%) recentre sur sa propre
   largeur déjà plafonnée par max-width — contrairement à un centrage par
   margin en vw, ce calcul reste juste même une fois max-width appliqué. */
.hnp-rail {
    width: calc(100vw - (var(--hn-rail-gutter) * 2));
    max-width: var(--hn-rail-width);
    margin-left: 50%;
    transform: translateX(-50%);
    /* Ce wrapper sert à l'alignement, pas à un encadré : pas de cadre sur la
       section entière, seules les trois cartes (.hnp-pillar, plus bas)
       doivent en avoir un. */
    border: none;
    background: none;
}

/* Pour qui : liste simple, pas de carte — le contenu est court, une carte
   ajouterait une bordure sans rien à séparer. Puce à coche (check-circle
   Lucide Apricot #F2994A), même icône et même recette que .hn-pills li,
   .hn-offers__card ul.wp-block-list li et .hn-contact__list li
   (hola-page.css) : règle du site, toute nouvelle vignette réutilise cette
   icône, jamais une puce ronde par défaut ni une icône inédite. Pas de
   max-width propre ici : le texte doit atteindre les bords de .hnp-rail
   ci-dessus, pas s'arrêter avant (voir aussi l'annulation du plafond
   générique `.wp-block-list li { max-width: 680px }` plus bas). */
.hnp-audience {
    list-style: none;
    padding: 0;
}

.hnp-rail .hnp-audience,
.hnp-rail .hnp-audience li {
    max-width: none;
}

/* ".hnp-rail" sert aussi à la section "Ce qui t'attend dans le replay"
   (le bloc entier, texte d'intro + cartes) : mêmes paragraphes en flux
   direct, même annulation du plafond générique — sauf les paragraphes
   d'intro (.hnp-intro juste dessous), volontairement recentrés et
   plafonnés comme le sous-titre du H1. */
.hnp-rail > p {
    max-width: none;
}

/* Centrée et mesurée comme .hnp-hero__subtitle, demandé par Nathalie pour
   que toute description de titre (H2) reprenne le même traitement. Écrit
   "p.hnp-intro" et non ".hnp-intro" seul : même spécificité que
   ".hnp-rail > p" ci-dessus (classe + balise), donc départagé par l'ordre
   du fichier plutôt que par la spécificité — nécessaire pour s'appliquer
   aussi bien dans .hnp-rail (comme "Ce qui t'attend...") qu'en dehors
   (le paragraphe "Tes clients n'achètent pas...", qui n'est pas dans un
   .hnp-rail). */
p.hnp-intro {
    /* 65ch et non un px fixe : largeur de ligne constante en nombre de
       caractères (mesure de lisibilité recommandée, 45-75 caractères),
       quelle que soit la taille d'écran — remplace le 900px empirique
       trouvé précédemment par tâtonnement. text-wrap: pretty (ignoré,
       sans casse, sur les navigateurs qui ne le connaissent pas encore)
       évite qu'un mot isolé termine seul la dernière ligne. */
    max-width: 65ch;
    text-wrap: pretty;
    margin: 0 auto 20px;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.hnp-audience li {
    position: relative;
    padding-left: 28px;
    /* 20px et non les 6px repris à l'origine de .hn-offers__card (pensée
       pour des puces courtes "label : description") : ici chaque item est
       une phrase complète, il lui faut plus d'air entre deux. */
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
}

.hnp-audience li:last-child {
    margin-bottom: 0;
}

.hnp-audience li::marker {
    content: none;
}

.hnp-audience li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 17px;
    height: 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2994A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Piliers : même schéma que .hngj-pillars (blog.css), 4 cartes en grille,
   dupliqué ici pour la même raison que le bouton ci-dessus. */
.hnp-pillars {
    display: grid;
    /* 3 cartes (site / LinkedIn / vidéo) et non 4 depuis le 29/08/2026 :
       une colonne par carte plutôt que 2, qui aurait laissé la 3e orpheline
       sur sa propre ligne. */
    grid-template-columns: repeat(3, 1fr);
    /* align-items: stretch (valeur par défaut) essayé puis retiré le
       29/08/2026 : Nathalie voulait les titres alignés entre eux (voir
       min-height sur .hnp-pillar h3 plus bas, qui suffit à ça), pas les
       cartes forcées à la même hauteur totale — stretch étirait les
       cartes plus courtes et laissait un vide en bas. */
    align-items: start;
    gap: 20px;
    margin: 32px 0 40px;
    /* Pas de cadre sur la grille elle-même, seulement sur chaque carte
       (.hnp-pillar ci-dessous) : sans cette annulation, le bloc "constrained"
       hérite d'un encadré par défaut qui entoure les trois cartes en plus de
       leur propre cadre individuel. */
    border: none;
    background: none;
}

.hnp-pillar {
    background: var(--color-surface);
    border: 1px solid rgba(22, 16, 58, 0.1);
    border-radius: 16px;
    padding: 24px;
    box-sizing: border-box;
}

.hnp-pillar h3 {
    /* 8px -> 20px : plus d'air avant le texte de la carte, demandé
       "partout" par Nathalie. */
    margin: 0 0 20px;
    /* Réserve la hauteur de 2 lignes (line-height 1.3, style.css) même
       quand le titre n'en tient qu'une ("Ton site aujourd'hui ?", 1 ligne,
       contre les deux autres titres sur 2) : sans ça, le corps de chaque
       carte démarre à une hauteur différente, désalignement signalé par
       Nathalie ("titres non alignés", carte 1 "plus en haut"). */
    min-height: 2.6em;
    /* Répartit un titre de carte sur 2 lignes de longueur proche, comme
       .hnp-article h2 et .hnp-hero__title. */
    text-wrap: balance;
    /* Icône à côté du titre de carte : même recette flex + ::before que
       .hnp-heading--replay ci-dessus, sans justify-content (titres de
       carte alignés à gauche, pas centrés). */
    display: flex;
    align-items: center;
    gap: 10px;
}

.hnp-pillar-title--site::before {
    content: '';
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--hn-icone-prisme-site, url('assets/icon-prisme-site.png'));
}

.hnp-pillar-title--linkedin::before {
    content: '';
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--hn-icone-prisme-linkedin, url('assets/icon-prisme-linkedin.png'));
}

.hnp-pillar-title--video::before {
    content: '';
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--hn-icone-prisme-video, url('assets/icon-prisme-video.png'));
}

.hnp-pillar p {
    margin: 0 0 16px;
    max-width: none;
    /* Même retrait que le texte de la vignette juste en dessous
       (.hnp-audience li, padding-left: 28px) : sans lui, le paragraphe
       partait plus à gauche que le texte de la puce, désalignement
       signalé par Nathalie. */
    padding-left: 28px;
}

.hnp-pillar p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .hnp-pillars {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .hnp-pillars {
        grid-template-columns: 1fr;
    }
}

.hnp-cta-wrap {
    text-align: center;
    max-width: none;
}

.hnp-cta-caption {
    display: block;
    font-size: 13px;
    color: var(--color-text-primary);
    max-width: 420px;
    margin: 12px auto 0;
}

/* Page merci-prisme : reprend .hnb-confirm (hola-page.css), élargie pour
   laisser respirer le wp:embed du replay. */
.hnp-confirm {
    max-width: 720px;
}