/*
Theme Name: Astra Child — Pitcheurs Prêcheurs
Theme URI: https://pitcheurs-precheurs.com
Description: Thème enfant Astra pour Pitcheurs Prêcheurs. Migration depuis Blocksy Child v1.12.0 le 10 mai 2026. Le design system global (palette, typographie, boutons, header, footer) est désormais géré via Astra Customizer + blocs Spectra. Ce style.css conserve uniquement les overrides fonctionnels (WooCommerce, blog, boîte à outils, rôles, scroll-to-top) qui ne peuvent pas être exprimés via le Customizer.
Author: Stéphane Chotard / Claude
Author URI: https://pitcheurs-precheurs.com
Template: astra
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child-pp
*/

/* =========================================================
   PITCHEURS PRÊCHEURS — Design System (Astra child)
   ---------------------------------------------------------
   v2.0.0 (10 mai 2026) — migration Blocksy → Astra
   ---------------------------------------------------------
   Table des matières :

   1.  Variables de marque P&P (palette + typo)
   2.  Boutons custom (.pp-btn-primary / .pp-btn-secondary)
   3.  Sections génériques (.pp-section-light / -white / -dark)
   4.  Animations signature (pp-fade-in / pp-slide-in-right)

   --- WooCommerce ---
   5.  Overrides généraux (boutons WC, prix, titres)
   6.  Fiche produit single — Carnet payant (variations cards radio)
   7.  Formulaire ressource gratuite (reply-to-receive)
   8.  Grille /ressources-gratuites/ (page ID 1912)
   9.  Fiches produit single — texte paragraphe noir
   10. Checkout block flash (dormant — page /commander/ en shortcode)
   11. Checkout shortcode — masquer "(facultatif)" sur cases à cocher

   --- Blog "Grain de Sel" (page ID 1401 + single posts) ---
   12. Hero blog + strip pastilles émotion
   13. Grille articles (wp:latest-posts) + badges émotion + hover
   14. Encadré newsletter bas de page blog
   15. Single post — template lecture

   --- Newsletter homepage (réutilisable hors home) ---
   16. Section newsletter Brevo (gradient violet + boîte crème)

   --- Boîte à outils + rôles utilisateurs (v1.12.0) ---
   17. Boîte à outils (/mon-compte/boite-a-outils/) + modal vidéo
   18. Choix Parent / Enseignant — checkbox cards

   --- UX globale ---
   19. Bouton scroll-to-top global
   20. Header sticky (Astra free fallback — Phase 3)
   21. Header menu items + Mon compte icon (Phase 3)
   22. Footer 3 colonnes lilas + signature (Phase 3)
   ========================================================= */


/* =========================================================
   1. Variables de marque P&P
   ---------------------------------------------------------
   Note : la palette + la typo sont aussi configurées dans
   Astra Customizer (Global > Colors + Global > Typography)
   pour que les blocs Spectra et les pages WP héritent
   automatiquement. Ces variables CSS restent utilisées par
   les classes custom de ce fichier.
   ========================================================= */
:root {
    --pp-violet:        #5a028f;
    --pp-violet-dark:   #3d0160;
    --pp-violet-soft:   #e8d5f5;
    --pp-or:            #d4aa00;
    --pp-or-light:      #f5e9a0;
    --pp-bg-light:      #F7F5FA;
    --pp-white:         #FFFFFF;
    --pp-text:          #1a0a2e;
    --pp-text-soft:     #6b6575;

    --pp-font-heading:  'Playfair Display', Georgia, 'Times New Roman', serif;
    --pp-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* =========================================================
   2. Boutons custom — .pp-btn-primary / .pp-btn-secondary
   ---------------------------------------------------------
   Ces classes sont utilisées dans le markup PHP (boîte à
   outils, modal vidéo, fiches produit, formulaires custom).
   Elles cohabitent avec le bouton Astra natif (configuré
   via Customizer > Global > Buttons).
   ========================================================= */
.pp-btn-primary {
    background-color: var(--pp-violet);
    color: var(--pp-white) !important;
    border: 2px solid var(--pp-violet);
    padding: 14px 28px;
    border-radius: 8px;
    font-family: var(--pp-font-body);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}
.pp-btn-primary:hover {
    background-color: var(--pp-violet-dark);
    border-color: var(--pp-violet-dark);
    color: var(--pp-white) !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(90, 2, 143, 0.25);
}

.pp-btn-secondary {
    background-color: transparent;
    color: var(--pp-violet) !important;
    border: 2px solid var(--pp-or);
    padding: 14px 28px;
    border-radius: 8px;
    font-family: var(--pp-font-body);
    font-weight: 600;
    font-size: 16px;
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}
.pp-btn-secondary:hover {
    background-color: var(--pp-or);
    color: var(--pp-text) !important;
    border-color: var(--pp-or);
    transform: translateY(-1px);
}


/* =========================================================
   3. Sections génériques (utilisables comme classes
       additionnelles sur des blocs Spectra/Container)
   ========================================================= */
.pp-section-light    { background-color: var(--pp-bg-light); }
.pp-section-white    { background-color: var(--pp-white); }
.pp-section-dark     {
    background-color: var(--pp-text);
    color: var(--pp-violet-soft);
}
.pp-section-dark h1,
.pp-section-dark h2,
.pp-section-dark h3  { color: var(--pp-white); }


/* =========================================================
   4. Animations signature P&P
   ---------------------------------------------------------
   À appliquer comme classes additionnelles sur les blocs
   Spectra/Container : .pp-animate-fade-in, .pp-animate-slide-right.
   Délais échelonnés disponibles : .pp-delay-0/150/300/450/600.
   ========================================================= */
@keyframes pp-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pp-slide-in-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.pp-animate-fade-in    { animation: pp-fade-in 0.7s ease-out both; }
.pp-animate-slide-right{ animation: pp-slide-in-right 0.8s ease-out both; }
.pp-delay-0   { animation-delay:   0ms; }
.pp-delay-150 { animation-delay: 150ms; }
.pp-delay-300 { animation-delay: 300ms; }
.pp-delay-450 { animation-delay: 450ms; }
.pp-delay-600 { animation-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
    .pp-animate-fade-in,
    .pp-animate-slide-right {
        animation: none;
    }
}


/* =========================================================
   5. WooCommerce — overrides généraux
   ========================================================= */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page button.button {
    background-color: var(--pp-violet) !important;
    color: var(--pp-white) !important;
    border-radius: 8px;
    font-weight: 600;
    padding: 12px 24px !important;
    transition: all 0.2s ease;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--pp-violet-dark) !important;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--pp-violet);
    font-weight: 700;
    font-family: var(--pp-font-heading);
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--pp-text);
    font-family: var(--pp-font-heading);
    font-weight: 600;
}


/* =========================================================
   6. WooCommerce — Fiche produit single (Carnet payant + Ressource gratuite)
   ---------------------------------------------------------
   Optim conversion : UGS masqué, prix range masqué, variations
   en cards radio, prix de la variation sélectionnée en gros
   sous les cards.
   ========================================================= */

/* 6.1 Masquer UGS + catégories sous le bouton "Ajouter au panier" */
.woocommerce div.product .product_meta { display: none; }

/* 6.2 Masquer le prix range par défaut (ex. "14,90 € – 24,90 €") */
.woocommerce div.product > p.price,
.woocommerce div.product .summary > .price {
    display: none;
}

/* 6.3 Masquer le <select> natif Format (remplacé par cards radio via JS) */
.woocommerce .variations td.value select { display: none !important; }

/* 6.4 Nettoyage de la table des variations */
.woocommerce table.variations,
.woocommerce table.variations td,
.woocommerce table.variations th {
    border: none;
    background: transparent;
    padding: 0;
}
.woocommerce table.variations th.label { display: none; }
.woocommerce table.variations .reset_variations { display: none; }

/* 6.5 Cards radio pour les variations Format */
.pp-variation-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 8px 0 16px;
}
.pp-variation-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    border: 2px solid #e6e1eb;
    border-radius: 10px;
    background: #fff !important;
    color: var(--pp-text) !important;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
/* Hover / focus / active : bg lavender clair (le violet plein venait
   d'un user-agent style <button>:active ou d'une règle Astra Pro qui
   l'emportait — !important verrouille le bg clair). */
.pp-variation-card:hover,
.pp-variation-card:focus,
.pp-variation-card:focus-visible,
.pp-variation-card:active {
    background: #faf5ff !important;
    border-color: var(--pp-violet) !important;
    color: var(--pp-text) !important;
    box-shadow: 0 4px 14px rgba(90, 2, 143, 0.10);
    transform: translateY(-1px);
    outline: none;
}
.pp-variation-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pp-variation-card.is-selected {
    background: #f3eaf9 !important;
    border-color: var(--pp-violet) !important;
    color: var(--pp-text) !important;
    box-shadow: 0 0 0 3px rgba(90, 2, 143, 0.18);
}
.pp-card-icon { font-size: 22px; margin-bottom: 6px; }
.pp-card-label {
    font-weight: 600;
    font-size: 15px;
    color: var(--pp-text);
    margin-bottom: 4px;
}
.pp-card-meta {
    font-size: 13px;
    color: #6b6575;
    line-height: 1.4;
}
.pp-card-price {
    margin-top: 8px;
    font-weight: 700;
    color: var(--pp-violet);
    font-family: var(--pp-font-heading);
    font-size: 16px;
}

/* 6.6 Prix de la variation sélectionnée : XL, violet, au-dessus du bouton */
.woocommerce .single_variation_wrap .woocommerce-variation-price .price {
    font-size: 2rem;
    color: var(--pp-violet);
    font-weight: 800;
    font-family: var(--pp-font-heading);
    display: block;
    margin: 8px 0 16px;
    line-height: 1.1;
}
.woocommerce .single_variation_wrap .woocommerce-variation-price .price del {
    opacity: 0.55;
    font-size: 1.2rem;
    font-weight: 500;
    margin-right: 8px;
}

/* Variations cards en colonne sur mobile */
@media (max-width: 768px) {
    .pp-variation-cards { grid-template-columns: 1fr; }
}


/* =========================================================
   7. WooCommerce — Formulaire "Ressource gratuite" (reply-to-receive)
   ========================================================= */
.pp-free-resource-form {
    background: #faf7fd;
    border: 1px solid #e6e1eb;
    border-radius: 12px;
    padding: 20px 22px;
    margin: 16px 0 20px;
}
.pp-free-resource-form .pp-badge-free {
    display: inline-block;
    background: #f5e9a0;
    color: #6b4a00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.pp-free-resource-form h3 {
    margin: 0 0 6px;
    font-family: var(--pp-font-heading);
    font-size: 18px;
    color: var(--pp-text);
}
.pp-free-resource-form p.pp-form-intro {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #6b6575;
}
.pp-free-resource-form .pp-field { margin-bottom: 10px; }
.pp-free-resource-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-text);
    margin-bottom: 4px;
}
.pp-free-resource-form input[type="text"],
.pp-free-resource-form input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #d7d2dc;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
    box-sizing: border-box;
}
.pp-free-resource-form input:focus {
    border-color: var(--pp-violet);
    outline: none;
    box-shadow: 0 0 0 3px rgba(90, 2, 143, 0.08);
}
.pp-free-resource-form .pp-optin {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0;
    font-size: 13px;
    color: #6b6575;
    line-height: 1.45;
}
.pp-free-resource-form button[type="submit"] {
    width: 100%;
    background: var(--pp-violet);
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.pp-free-resource-form button[type="submit"]:hover { background: var(--pp-violet-dark); }
.pp-free-resource-form .pp-success-msg {
    background: #e8f5e9;
    border-left: 4px solid #43a047;
    border-radius: 6px;
    padding: 14px 16px;
    color: #1b5e20;
    font-size: 14px;
    line-height: 1.5;
}
.pp-free-resource-form .pp-error-msg {
    background: #ffebee;
    border-left: 4px solid #e53935;
    border-radius: 6px;
    padding: 12px 14px;
    color: #b71c1c;
    font-size: 13px;
    margin-bottom: 12px;
}

/* Masquer le formulaire natif "Ajouter au panier" sur les fiches produit
   de la catégorie "Ressource gratuite". Le formulaire reply-to-receive
   prend le relais via woocommerce_single_product_summary. La classe
   product_cat-<slug> est injectée par pp_add_product_cat_body_classes
   (functions.php). */
body.single-product.product_cat-ressource-gratuite form.cart {
    display: none !important;
}


/* =========================================================
   8. WooCommerce — Grille /ressources-gratuites/ (page ID 1912)
   ---------------------------------------------------------
   Cards 100% cliquables, bouton "Ajouter au panier" masqué,
   prix €0.00 remplacé par badge "Gratuit", grille 3/2/1.
   ========================================================= */

body.page-id-1912 ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    list-style: none;
    padding: 0;
    margin: 32px 0 56px;
}
@media (max-width: 1024px) {
    body.page-id-1912 ul.products { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 768px) {
    body.page-id-1912 ul.products { grid-template-columns: 1fr; gap: 18px; margin: 24px 0 40px; }
}

body.page-id-1912 li.product.product_cat-ressource-gratuite {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pp-white);
    border: 1px solid #ece7f1;
    border-radius: 14px;
    overflow: hidden;
    padding: 0 0 18px;
    margin: 0 !important;
    width: auto !important;
    list-style: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

@media (hover: hover) {
    body.page-id-1912 li.product.product_cat-ressource-gratuite:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(26,10,46,.08);
        border-color: var(--pp-violet-soft);
    }
    body.page-id-1912 li.product.product_cat-ressource-gratuite:hover .woocommerce-loop-product__title a {
        color: var(--pp-violet);
    }
}

body.page-id-1912 li.product.product_cat-ressource-gratuite figure {
    margin: 0 0 14px;
    background: #faf7fd;
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
body.page-id-1912 li.product.product_cat-ressource-gratuite figure a {
    display: block;
    width: 100%;
    height: 100%;
}
body.page-id-1912 li.product.product_cat-ressource-gratuite figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.page-id-1912 li.product.product_cat-ressource-gratuite h2.woocommerce-loop-product__title {
    font-family: var(--pp-font-heading);
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 0 18px 12px;
    padding: 0;
}
body.page-id-1912 li.product.product_cat-ressource-gratuite h2.woocommerce-loop-product__title a {
    color: var(--pp-text);
    text-decoration: none;
    transition: color .15s ease;
}

/* Overlay clic : carte 100% cliquable. L'ancre du titre est static,
   son ::after en absolute s'ancre sur le <li> (premier ancêtre positionné). */
body.page-id-1912 li.product.product_cat-ressource-gratuite h2.woocommerce-loop-product__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
}

body.page-id-1912 li.product.product_cat-ressource-gratuite ul.entry-meta {
    display: none !important;
}
body.page-id-1912 li.product.product_cat-ressource-gratuite .add_to_cart_button,
body.page-id-1912 li.product.product_cat-ressource-gratuite .button.product_type_simple {
    display: none !important;
}

/* Prix : badge "Gratuit" à la place du montant €0.00 */
body.page-id-1912 li.product.product_cat-ressource-gratuite .price {
    margin: 0 18px;
    padding: 0;
    line-height: 1;
    font-size: 0;
    position: relative;
    z-index: 1;
}
body.page-id-1912 li.product.product_cat-ressource-gratuite .price .woocommerce-Price-amount {
    display: none;
}
body.page-id-1912 li.product.product_cat-ressource-gratuite .price::after {
    content: 'Gratuit';
    display: inline-block;
    background: var(--pp-or-light);
    color: #6b4a00;
    font-family: var(--pp-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
    line-height: 1.2;
}

@media (max-width: 480px) {
    body.page-id-1912 li.product.product_cat-ressource-gratuite h2.woocommerce-loop-product__title {
        font-size: 1.05rem;
        margin: 0 14px 10px;
    }
    body.page-id-1912 li.product.product_cat-ressource-gratuite .price {
        margin: 0 14px;
    }
}


/* =========================================================
   9. Fiches produit single — texte paragraphe en noir
   ---------------------------------------------------------
   Décision Stéphane : noir franc sur tous les textes
   paragraphe des fiches produit (descriptions, onglets,
   short-description, listes). Titres/prix/boutons inchangés.
   ========================================================= */
body.single-product p,
body.single-product li,
body.single-product .woocommerce-product-details__short-description,
body.single-product .woocommerce-product-details__short-description p,
body.single-product .woocommerce-product-details__short-description li,
body.single-product .summary p,
body.single-product .summary li,
body.single-product #tab-description,
body.single-product #tab-description p,
body.single-product #tab-description li,
body.single-product .woocommerce-Tabs-panel,
body.single-product .woocommerce-Tabs-panel p,
body.single-product .woocommerce-Tabs-panel li,
body.single-product .woocommerce-product-attributes td,
body.single-product .product .entry-summary p,
body.single-product .product .entry-summary li {
    color: #000 !important;
}


/* =========================================================
   10. Checkout block flash (DORMANT)
   ---------------------------------------------------------
   Page /commander/ (ID 1397) utilise le shortcode classique
   [woocommerce_checkout] depuis le 19/04/2026 — ces sélecteurs
   visent le Checkout Block Gutenberg et sont donc dormants.
   Conservés ici pour réactivation si bascule future vers le Block.
   ========================================================= */
.wp-block-woocommerce-checkout.is-loading .wc-block-components-notice-banner.is-error,
.wp-block-woocommerce-checkout.is-loading .wc-block-checkout__no-payment-methods,
.wc-block-checkout.is-loading .wc-block-components-notice-banner.is-error,
.wc-block-checkout.is-loading .wc-block-checkout__no-payment-methods {
    display: none !important;
}


/* =========================================================
   11. Checkout shortcode — masquer "(facultatif)" sur cases à cocher
   ---------------------------------------------------------
   v1.9.1 — WooCommerce affiche automatiquement
   <span class="optional">(facultatif)</span> sur tout champ
   non-required. Sur notre checkout allégé, les seules cases
   non-required sont :
     1. Opt-in newsletter Brevo
     2. Soupape B2B "Je commande au nom d'une entreprise"
   Afficher "(facultatif)" sur une case à cocher est maladroit
   UX (la case dit déjà que c'est optionnel). On le masque.
   ========================================================= */
body.woocommerce-checkout .form-row label > .optional,
body.woocommerce-checkout .form-row.woocommerce-validated label .optional,
body.woocommerce-checkout label:has(input[type="checkbox"]) .optional,
body.woocommerce-checkout .woocommerce-form__label-for-checkbox .optional {
    display: none !important;
}


/* =========================================================
   12. Page Blog "Grain de Sel" (ID 1401) — Hero + Strip émotions
   ---------------------------------------------------------
   v1.9.3 — Refonte éditoriale "parcours par émotion".
   ========================================================= */

/* 12.1 Cacher le titre auto-généré (sur Astra : page-title via
   Customizer ; on garde aussi les sélecteurs core WP pour sécurité) */
body.page-id-1401 .page-title,
body.page-id-1401 .entry-title,
body.page-id-1401 .entry-header,
body.page-id-1401 h1.entry-title,
body.page-id-1401 .page-header,
body.page-id-1401 header.page-header {
    display: none !important;
}

/* 12.2 Hero blog dédié */
body.page-id-1401 .pp-blog-hero {
    text-align: center;
    padding: 48px 24px 28px;
    max-width: 780px;
    margin: 0 auto;
}
body.page-id-1401 .pp-blog-hero h1 {
    font-family: var(--pp-font-heading);
    color: var(--pp-text);
    font-size: clamp(2rem, 3.8vw, 2.8rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 14px;
}
body.page-id-1401 .pp-blog-hero p {
    color: var(--pp-text-soft);
    font-size: 1.1rem;
    font-family: var(--pp-font-body);
    line-height: 1.6;
    margin: 0;
}

/* 12.3 Strip pastilles "parcours par émotion" */
body.page-id-1401 .pp-blog-emotions {
    max-width: 1180px;
    margin: 8px auto 36px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
body.page-id-1401 .pp-blog-emotions__label {
    font-family: var(--pp-font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pp-text);
    letter-spacing: 0.01em;
}
body.page-id-1401 .pp-blog-emotions__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
body.page-id-1401 .pp-blog-emotions__list li { margin: 0; }
body.page-id-1401 .pp-blog-emotion {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-family: var(--pp-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none !important;
    border: 1.5px solid transparent;
    transition: all .2s ease;
    white-space: nowrap;
    background: var(--pp-white);
    box-shadow: 0 1px 4px rgba(26, 10, 46, 0.05);
}
body.page-id-1401 .pp-blog-emotion:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(90, 2, 143, 0.12);
}
body.page-id-1401 .pp-emotion--peur          { color: #5a028f; border-color: #e8d5f5; }
body.page-id-1401 .pp-emotion--peur:hover    { background: #5a028f; color: #fff; border-color: #5a028f; }
body.page-id-1401 .pp-emotion--colere        { color: #c0392b; border-color: #f5d5ce; }
body.page-id-1401 .pp-emotion--colere:hover  { background: #c0392b; color: #fff; border-color: #c0392b; }
body.page-id-1401 .pp-emotion--pardon        { color: #8a6a00; border-color: #f5e9a0; }
body.page-id-1401 .pp-emotion--pardon:hover  { background: #d4aa00; color: #1a0a2e; border-color: #d4aa00; }
body.page-id-1401 .pp-emotion--noir          { color: #3d0160; border-color: #d4c2e8; }
body.page-id-1401 .pp-emotion--noir:hover    { background: #3d0160; color: #fff; border-color: #3d0160; }
body.page-id-1401 .pp-emotion--jalousie      { color: #1e6091; border-color: #cee2f2; }
body.page-id-1401 .pp-emotion--jalousie:hover{ background: #1e6091; color: #fff; border-color: #1e6091; }
body.page-id-1401 .pp-emotion--perseverance  { color: #0f7b4c; border-color: #c8ead9; }
body.page-id-1401 .pp-emotion--perseverance:hover { background: #0f7b4c; color: #fff; border-color: #0f7b4c; }


/* =========================================================
   13. Page Blog — Grille articles (wp:latest-posts)
   ---------------------------------------------------------
   v1.9.6 — Sélecteurs `.wp-block-latest-posts > li` (les <li>
   du bloc n'ont aucune classe ; cf. README §4.6). Badges émotion
   via :has() sur le href du titre (Chrome 105+ / Safari 15.4+ /
   Firefox 121+, déployé largement en 2026).
   ========================================================= */
body.page-id-1401 .wp-block-latest-posts {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px !important;
    list-style: none !important;
    padding: 0 24px !important;
    margin: 0 auto !important;
    max-width: 1240px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
body.page-id-1401 .wp-block-latest-posts::before,
body.page-id-1401 .wp-block-latest-posts::after {
    display: none !important;
    content: none !important;
}
@media (max-width: 768px) {
    body.page-id-1401 .wp-block-latest-posts {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding: 0 18px !important;
    }
}

body.page-id-1401 .wp-block-latest-posts > li {
    position: relative !important;
    background: var(--pp-white) !important;
    border: 1px solid #ece7f1 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(26, 10, 46, 0.04) !important;
    transition: transform .35s cubic-bezier(.2,.8,.2,1),
                box-shadow .35s cubic-bezier(.2,.8,.2,1),
                border-color .35s ease,
                background .35s ease !important;
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    width: 100% !important;
    padding: 0 0 26px !important;
}

@media (hover: hover) {
    body.page-id-1401 .wp-block-latest-posts > li:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 22px 40px rgba(90, 2, 143, 0.18),
                    0 4px 10px rgba(90, 2, 143, 0.08) !important;
        border-color: var(--pp-violet) !important;
        background: linear-gradient(180deg, #ffffff 0%, var(--pp-violet-soft) 100%) !important;
    }
    body.page-id-1401 .wp-block-latest-posts > li:hover .wp-block-latest-posts__post-title {
        color: var(--pp-violet) !important;
    }
    body.page-id-1401 .wp-block-latest-posts > li .wp-block-latest-posts__post-title {
        position: relative !important;
    }
    body.page-id-1401 .wp-block-latest-posts > li .wp-block-latest-posts__post-title::after {
        content: '';
        position: absolute;
        left: 0; bottom: -4px;
        height: 3px;
        width: 100%;
        background: var(--pp-or);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .4s cubic-bezier(.2,.8,.2,1);
    }
    body.page-id-1401 .wp-block-latest-posts > li:hover .wp-block-latest-posts__post-title::after {
        transform: scaleX(1);
    }
    body.page-id-1401 .wp-block-latest-posts > li .wp-block-latest-posts__featured-image img {
        transition: transform .5s cubic-bezier(.2,.8,.2,1) !important;
    }
    body.page-id-1401 .wp-block-latest-posts > li:hover .wp-block-latest-posts__featured-image img {
        transform: scale(1.04) !important;
    }
    body.page-id-1401 .wp-block-latest-posts > li:hover .wp-block-latest-posts__read-more {
        background: var(--pp-violet) !important;
        color: #fff !important;
        transform: translateX(4px);
    }
}

body.page-id-1401 .wp-block-latest-posts__featured-image {
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: block !important;
    background: #faf7fd !important;
    position: relative !important;
    margin: 0 0 18px !important;
    width: 100% !important;
}
body.page-id-1401 .wp-block-latest-posts__featured-image a {
    display: block;
    height: 100%;
    width: 100%;
}
body.page-id-1401 .wp-block-latest-posts__featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

body.page-id-1401 .wp-block-latest-posts > li:not(:has(.wp-block-latest-posts__featured-image)) {
    padding-top: 56px !important;
}
body.page-id-1401 .wp-block-latest-posts > li:not(:has(.wp-block-latest-posts__featured-image))::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background: linear-gradient(90deg, var(--pp-violet-soft), var(--pp-or-light));
}

/* Badges émotion par href de l'article (mapping ID-article → libellé + couleur) */
body.page-id-1401 .wp-block-latest-posts > li::before {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--pp-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(26, 10, 46, 0.10);
    pointer-events: none;
}
body.page-id-1401 .wp-block-latest-posts > li:has(a[href*="histoire-du-soir-pour-enfant-anxieux"])::before           { content: 'Peur · courage';   color: #5a028f; }
body.page-id-1401 .wp-block-latest-posts > li:has(a[href*="livre-enfant-gestion-de-la-colere"])::before             { content: 'Colère';           color: #c0392b; }
body.page-id-1401 .wp-block-latest-posts > li:has(a[href*="comment-aider-un-enfant-a-comprendre-le-pardon"])::before { content: 'Pardon';            color: #8a6a00; }
body.page-id-1401 .wp-block-latest-posts > li:has(a[href*="peur-du-noir-chez-lenfant"])::before                     { content: 'Peur du noir';     color: #3d0160; }
body.page-id-1401 .wp-block-latest-posts > li:has(a[href*="jalousie-entre-freres-et-soeurs"])::before                { content: 'Jalousie';         color: #1e6091; }
body.page-id-1401 .wp-block-latest-posts > li:has(a[href*="mon-enfant-veut-tout-abandonner"])::before                { content: 'Persévérance';     color: #0f7b4c; }
body.page-id-1401 .wp-block-latest-posts > li:has(a[href*="guide-complet-utiliser-les-recits-bibliques"])::before   { content: 'Guide complet';    color: var(--pp-text); }

body.page-id-1401 .wp-block-latest-posts__post-date {
    font-size: 12px !important;
    color: var(--pp-text-soft) !important;
    font-family: var(--pp-font-body) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
    margin: 0 28px 10px !important;
    display: block !important;
}

body.page-id-1401 .wp-block-latest-posts__post-title {
    font-family: var(--pp-font-heading) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--pp-text) !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin: 0 28px 14px !important;
    transition: color 0.25s ease !important;
}
body.page-id-1401 .wp-block-latest-posts__post-title:hover {
    color: var(--pp-violet) !important;
    text-decoration: none !important;
}

body.page-id-1401 .wp-block-latest-posts__post-excerpt {
    font-size: 15px !important;
    color: var(--pp-text-soft) !important;
    line-height: 1.6 !important;
    margin: 0 28px 18px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.page-id-1401 .wp-block-latest-posts__read-more {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: var(--pp-or);
    color: var(--pp-text) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 22px;
    text-decoration: none !important;
    letter-spacing: 0.02em;
    margin: 0 28px !important;
    align-self: flex-start;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    width: auto !important;
}
body.page-id-1401 .wp-block-latest-posts__read-more:hover {
    background: #e8ba10;
    color: var(--pp-text) !important;
    transform: translateX(3px);
    text-decoration: none !important;
}

@media (max-width: 480px) {
    body.page-id-1401 .wp-block-latest-posts__post-title { font-size: 1.1rem !important; margin: 0 16px 10px !important; }
    body.page-id-1401 .wp-block-latest-posts__post-date { margin: 0 16px 8px !important; }
    body.page-id-1401 .wp-block-latest-posts__post-excerpt { margin: 0 16px 12px !important; }
    body.page-id-1401 .wp-block-latest-posts__read-more { margin: 0 16px !important; }
}


/* =========================================================
   14. Page Blog — Encadré newsletter en bas de page
   ========================================================= */
body.page-id-1401 .entry-content > div[style*="background: #f9f6f0"],
body.page-id-1401 .entry-content > div[style*="border-left"] {
    background: var(--pp-white) !important;
    border-left: 4px solid var(--pp-or) !important;
    border-radius: 12px !important;
    padding: 28px 32px !important;
    max-width: 1180px;
    margin: 48px auto 0 !important;
    box-shadow: 0 2px 10px rgba(26, 10, 46, 0.06);
}
body.page-id-1401 .entry-content > div[style*="border-left"] h3 {
    color: var(--pp-text) !important;
    font-family: var(--pp-font-heading) !important;
    font-size: 1.3rem !important;
    margin-top: 0 !important;
}
body.page-id-1401 .entry-content > div[style*="border-left"] p {
    color: var(--pp-text-soft) !important;
}

@media (max-width: 640px) {
    body.page-id-1401 .entry-content > div[style*="border-left"] {
        padding: 24px 20px !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}


/* =========================================================
   15. Articles single post — Template lecture
   ========================================================= */
body.single-post .entry-content {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    font-size: 17px;
    line-height: 1.8;
    color: var(--pp-text);
}

body.single-post .entry-title {
    font-family: var(--pp-font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    color: var(--pp-text);
    line-height: 1.2;
    margin: 32px auto 16px;
    max-width: 760px;
}

body.single-post .entry-meta,
body.single-post .posted-on,
body.single-post .cat-links {
    font-size: 13px;
    color: var(--pp-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    max-width: 760px;
    margin: 0 auto 32px;
    display: block;
}

body.single-post .post-thumbnail {
    max-width: 900px;
    margin: 0 auto 40px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(26, 10, 46, 0.10);
}
body.single-post .post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

body.single-post .entry-content h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    color: var(--pp-text);
    margin: 48px 0 16px;
    padding-top: 8px;
    border-top: 2px solid var(--pp-violet-soft);
}
body.single-post .entry-content h3 {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: var(--pp-violet);
    margin: 32px 0 12px;
}

body.single-post .entry-content p { margin-bottom: 20px; }
body.single-post .entry-content ul,
body.single-post .entry-content ol {
    margin: 0 0 20px 20px;
    line-height: 1.9;
}
body.single-post .entry-content li { margin-bottom: 6px; }

body.single-post .entry-content blockquote {
    font-family: var(--pp-font-heading);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--pp-violet);
    border-left: 4px solid var(--pp-or);
    padding: 16px 24px;
    margin: 32px 0;
    background: var(--pp-violet-soft);
    border-radius: 0 12px 12px 0;
}

body.single-post .entry-content .pp-cta-boutique {
    background: linear-gradient(135deg, var(--pp-violet) 0%, var(--pp-violet-dark) 100%);
    color: var(--pp-white);
    border-radius: 16px;
    padding: 32px 40px;
    text-align: center;
    margin: 48px 0;
}
body.single-post .entry-content .pp-cta-boutique h3 {
    color: var(--pp-white);
    font-size: 1.4rem;
    margin: 0 0 12px;
}
body.single-post .entry-content .pp-cta-boutique p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 20px;
}

body.single-post .entry-content .sibwp-form,
body.single-post .entry-content .brevo-form-container {
    background: var(--pp-white);
    border-left: 4px solid var(--pp-or);
    border-radius: 12px;
    padding: 28px 32px;
    margin: 48px 0;
    box-shadow: 0 2px 10px rgba(26, 10, 46, 0.06);
}

@media (max-width: 768px) {
    body.single-post .entry-content,
    body.single-post .entry-title {
        padding-left: 20px;
        padding-right: 20px;
    }
    body.single-post .post-thumbnail {
        border-radius: 10px;
        margin-left: 16px;
        margin-right: 16px;
    }
    body.single-post .entry-content .pp-cta-boutique {
        padding: 24px 20px;
    }
}


/* =========================================================
   16. Section Newsletter Brevo (utilisable hors home)
   ---------------------------------------------------------
   v1.8.2 — Wrapper full-width gradient violet + grille 2 col
   (intro + perks à gauche, formulaire Brevo à droite). À
   appliquer comme classe additionnelle sur un Container
   Spectra full-width pour réutiliser le pattern.
   ========================================================= */
.pp-newsletter-section {
    background: linear-gradient(135deg, var(--pp-violet) 0%, #3d0160 55%, #1a0a2e 100%);
    padding: 96px 24px;
    position: relative;
    box-sizing: border-box;
}

.pp-newsletter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.pp-newsletter-intro {
    color: var(--pp-white);
}
.pp-newsletter-intro h2 {
    color: var(--pp-white);
    font-family: var(--pp-font-heading);
    font-size: clamp(2rem, 1rem + 2.6vw, 2.8rem);
    line-height: 1.15;
    margin: 0 0 20px;
}
.pp-newsletter-lead {
    color: #e8d5f5;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 32px;
    max-width: 480px;
}

.pp-newsletter-perks {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 24px 28px;
    max-width: 480px;
    box-sizing: border-box;
}
.pp-newsletter-perks h4 {
    color: var(--pp-or);
    font-family: var(--pp-font-heading);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    margin: 0 0 14px;
    text-transform: uppercase;
}
.pp-newsletter-perks ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: perks;
}
.pp-newsletter-perks ol li {
    counter-increment: perks;
    color: #f5e9ff;
    font-size: 0.95rem;
    line-height: 1.55;
    padding: 8px 0 8px 32px;
    position: relative;
}
.pp-newsletter-perks ol li::before {
    content: counter(perks) ".";
    position: absolute;
    left: 0;
    top: 8px;
    color: var(--pp-or);
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 1.05rem;
}

.pp-newsletter-box {
    background: #f9f6f0;
    padding: 40px 36px;
    max-width: 520px;
    width: 100%;
    margin: 0;
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.pp-newsletter-box h3 {
    margin: 0 0 10px;
    color: #3d2b1f;
    font-family: var(--pp-font-heading);
    font-size: 1.35rem;
    line-height: 1.3;
}
.pp-newsletter-box p {
    color: var(--pp-text);
    margin: 0 0 24px;
    line-height: 1.6;
    font-size: 15px;
}

.pp-newsletter-box .sib-form-block input[type="text"],
.pp-newsletter-box .sib-form-block input[type="email"],
.pp-newsletter-box input[type="text"],
.pp-newsletter-box input[type="email"] {
    padding: 14px 16px !important;
    font-size: 15px !important;
    border: 1.5px solid #e8dcc9 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    transition: border-color 0.2s ease;
}
.pp-newsletter-box .sib-form-block input[type="text"]:focus,
.pp-newsletter-box .sib-form-block input[type="email"]:focus,
.pp-newsletter-box input[type="text"]:focus,
.pp-newsletter-box input[type="email"]:focus {
    border-color: var(--pp-violet) !important;
    outline: none !important;
}

.pp-newsletter-box form [type="submit"],
.pp-newsletter-box .sib-form-block__button,
.pp-newsletter-box .sib-form-block__button-with-loader,
.pp-newsletter-box .sib_form_block_button {
    margin-top: 24px !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    background: var(--pp-violet) !important;
    transition: background 0.2s ease;
}
.pp-newsletter-box form [type="submit"]:hover,
.pp-newsletter-box .sib-form-block__button:hover,
.pp-newsletter-box .sib_form_block_button:hover {
    background: var(--pp-violet-dark) !important;
}

@media (max-width: 1024px) {
    .pp-newsletter-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .pp-newsletter-intro {
        text-align: center;
    }
    .pp-newsletter-lead,
    .pp-newsletter-perks {
        margin-left: auto;
        margin-right: auto;
    }
    .pp-newsletter-perks {
        text-align: left;
    }
    .pp-newsletter-box {
        margin: 0 auto;
    }
}
@media (max-width: 768px) {
    .pp-newsletter-section {
        padding: 64px 20px;
    }
    .pp-newsletter-box {
        padding: 28px 24px;
    }
}


/* =========================================================
   17. Boîte à outils — /mon-compte/boite-a-outils/
   ---------------------------------------------------------
   v1.12.0 — Onglet WC My Account avec CPT pp_ressource,
   filtres pills par type, grille de cards + modal vidéo.
   Code PHP : functions.php (v1.12.0 A à F).
   ========================================================= */

/* 17.1 Intro */
.pp-toolkit-intro h2 {
    font-family: var(--pp-font-heading);
    color: var(--pp-violet);
    font-size: clamp(1.6rem, 1rem + 1.8vw, 2rem);
    margin: 0 0 .5rem;
    line-height: 1.2;
}
.pp-toolkit-intro p {
    color: var(--pp-text-soft);
    margin: 0 0 2rem;
}

/* 17.2 Filtres pills */
.pp-toolkit-filters {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0 0 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--pp-or-light);
}
.pp-toolkit-filters a {
    padding: .55rem 1.1rem;
    border-radius: 999px;
    background: var(--pp-violet-soft);
    color: var(--pp-violet);
    font-weight: 600;
    text-decoration: none;
    font-size: .95rem;
    transition: background .2s ease, color .2s ease, transform .2s ease;
    line-height: 1.2;
}
.pp-toolkit-filters a:hover {
    background: var(--pp-violet);
    color: var(--pp-white);
    transform: translateY(-1px);
}
.pp-toolkit-filters a.active {
    background: var(--pp-violet);
    color: var(--pp-white);
    box-shadow: 0 4px 10px rgba(90, 2, 143, .25);
}

/* 17.3 Grille */
.pp-toolkit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

/* 17.4 Card ressource */
.pp-ressource-card {
    background: var(--pp-white);
    border: 1px solid #ece7f1;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pp-ressource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(90, 2, 143, .14);
    border-color: var(--pp-violet);
}

.pp-ressource-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--pp-violet-soft);
    background-size: cover;
    background-position: center;
}
.pp-ressource-thumb--empty {
    background: linear-gradient(135deg, var(--pp-violet-soft) 0%, var(--pp-or-light) 100%);
}
.pp-play-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--pp-white);
    font-size: 3rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 100%);
    transition: background .25s ease;
}
.pp-ressource-card:hover .pp-play-icon {
    background: linear-gradient(180deg, transparent 0%, rgba(90, 2, 143, .55) 100%);
}

.pp-ressource-body {
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex-grow: 1;
}
.pp-ressource-type {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--pp-or);
    font-weight: 700;
}
.pp-ressource-title {
    font-family: var(--pp-font-heading);
    color: var(--pp-text);
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0;
}
.pp-ressource-excerpt {
    font-size: .92rem;
    color: var(--pp-text-soft);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-ressource-duration {
    font-size: .82rem;
    color: var(--pp-text-soft);
    font-style: italic;
}
.pp-toolkit-cta {
    margin-top: auto;
    align-self: flex-start;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

/* 17.5 Empty state */
.pp-toolkit-empty {
    background: var(--pp-bg-light);
    padding: 2.5rem 1.5rem;
    border-radius: 12px;
    text-align: center;
    color: var(--pp-text-soft);
}
.pp-toolkit-empty p { margin: 0; }

/* 17.6 Modal vidéo (autoplay YouTube nocookie) */
.pp-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
}
.pp-video-modal[hidden] { display: none; }
.pp-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 10, 46, .88);
    backdrop-filter: blur(4px);
}
.pp-video-modal__inner {
    position: relative;
    width: min(960px, 92vw);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.pp-video-modal__player,
.pp-video-modal__player iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}
.pp-video-modal__close {
    position: absolute;
    top: -42px;
    right: 0;
    background: transparent;
    border: 0;
    color: var(--pp-white);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 .25rem;
}
.pp-video-modal__close:hover { color: var(--pp-or-light); }

@media (max-width: 768px) {
    .pp-toolkit-grid { grid-template-columns: 1fr; }
    .pp-video-modal__inner { width: 96vw; }
    .pp-toolkit-filters a { font-size: .9rem; padding: .5rem .9rem; }
}


/* =========================================================
   18. Choix Parent / Enseignant — checkbox cards
   ---------------------------------------------------------
   v1.12.0 — Cases cumulables sur inscription, checkout,
   formulaire ressource gratuite, édition compte. Code PHP :
   functions.php (v1.12.0 G à K).
   ========================================================= */
.pp-role-choice-wrapper {
    margin: 0 0 1.75rem;
}
.pp-role-choice-label {
    font-weight: 600;
    color: var(--pp-text);
    margin: 0 0 .85rem;
    font-size: 1rem;
}
.pp-role-help {
    font-weight: 400;
    color: var(--pp-text-soft);
    font-size: .88rem;
    margin-left: .35rem;
}
.pp-role-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.pp-role-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.4rem 1rem 1.25rem;
    border: 2px solid #ece7f1;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    background: var(--pp-white);
    position: relative;
    margin: 0 !important;
}
.pp-role-card input[type="checkbox"],
.pp-role-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.pp-role-card:hover {
    border-color: var(--pp-violet);
    background: var(--pp-violet-soft);
    transform: translateY(-2px);
}
.pp-role-card:has(input:checked) {
    border-color: var(--pp-violet);
    background: var(--pp-violet-soft);
    box-shadow: 0 6px 18px rgba(90, 2, 143, .18);
}
.pp-role-card:has(input:focus-visible) {
    outline: 2px solid var(--pp-or);
    outline-offset: 2px;
}
/* Check mark dans le coin haut-droit quand la case est cochée */
.pp-role-card::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    border: 2px solid #d6cce0;
    border-radius: 50%;
    background: var(--pp-white);
    transition: all .2s ease;
}
.pp-role-card:has(input:checked)::after {
    background: var(--pp-violet) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 7'/></svg>") center/14px no-repeat;
    border-color: var(--pp-violet);
}
.pp-role-icon {
    color: var(--pp-violet);
    line-height: 1;
    margin-bottom: .65rem;
    display: inline-flex;
}
.pp-role-icon svg {
    display: block;
}
.pp-role-title {
    font-family: var(--pp-font-heading);
    font-weight: 700;
    color: var(--pp-text);
    font-size: 1.1rem;
    line-height: 1.2;
    margin-bottom: .35rem;
}
.pp-role-desc {
    font-size: .85rem;
    color: var(--pp-text-soft);
    line-height: 1.35;
}

.pp-role-choice-checkout {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--pp-bg-light);
    border-radius: 12px;
}
.pp-role-choice-checkout .pp-role-choice-wrapper {
    margin: 0;
}

@media (max-width: 480px) {
    .pp-role-choice { grid-template-columns: 1fr; }
}


/* =========================================================
   19. Bouton scroll-to-top global (v1.9.9)
   ---------------------------------------------------------
   Injecté via wp_footer dans functions.php. Apparition après
   400px de scroll. Z-index 90 (sous Axeptio 999999+ et le
   menu mobile Astra).
   ========================================================= */
.pp-scroll-top {
    position: fixed;
    bottom: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(90, 2, 143, 0.82);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(90, 2, 143, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease;
    z-index: 90;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    line-height: 1;
}
.pp-scroll-top svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pp-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pp-scroll-top:hover,
.pp-scroll-top:focus-visible {
    background: var(--pp-violet);
    color: #fff;
    text-decoration: none;
}
.pp-scroll-top:active {
    transform: translateY(1px);
}

/* Desktop : un poil plus large + plus haut pour respirer */
@media (min-width: 1024px) {
    .pp-scroll-top {
        bottom: 28px;
        right: 28px;
        width: 48px;
        height: 48px;
    }
    .pp-scroll-top svg {
        width: 20px;
        height: 20px;
    }
}

/* Sur le checkout shortcode, on remonte un peu pour ne pas gêner
   le bouton "Commander" en sticky mobile. */
body.woocommerce-checkout .pp-scroll-top {
    bottom: 78px;
}
@media (min-width: 1024px) {
    body.woocommerce-checkout .pp-scroll-top {
        bottom: 28px;
    }
}

/* Smooth scroll global (utilisé par le scroll-to-top et tout lien d'ancrage) */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    .pp-scroll-top {
        transition: opacity .15s ease, visibility .15s;
        transform: none !important;
    }
    html {
        scroll-behavior: auto;
    }
}

/* =========================================================
   18. Home — Hero Spectra rebuild (v2.1.0)
   ========================================================= */
.pp-hero-spectra {
    position: relative;
    min-height: 540px;
    overflow: hidden;
}
.pp-hero-spectra::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(212,170,0,0.12), transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.pp-hero-spectra > .wp-block-columns,
.pp-hero-spectra > * { position: relative; z-index: 1; }

.pp-hero-spectra h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-size: clamp(1.85rem, 1rem + 3vw, 3.75rem);
    margin: 0 0 1.25rem;
}
.pp-hero-spectra .pp-accent {
    color: var(--pp-or, #d4aa00);
    font-style: italic;
    font-weight: 700;
}
.pp-hero-spectra .pp-hero-subtitle {
    color: rgba(255,255,255,0.72);
    font-size: clamp(1rem, 0.6rem + 0.6vw, 1.125rem);
    line-height: 1.65;
    max-width: 540px;
    margin: 0 0 2rem;
}
.pp-hero-spectra .pp-hero-image img {
    width: 115%;
    height: 560px;
    object-fit: contain;
    margin-left: -7.5%;
    max-width: none;
}
.pp-hero-spectra .pp-btn-primary-on-dark {
    background: #fff;
    color: var(--pp-violet, #5a028f);
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background .25s ease, color .25s ease;
}
.pp-hero-spectra .pp-btn-primary-on-dark:hover {
    background: var(--pp-or, #d4aa00);
    color: #1a0a2e;
}
.pp-hero-spectra .pp-btn-primary-on-dark .pp-btn-arrow {
    transition: transform .25s ease;
}
.pp-hero-spectra .pp-btn-primary-on-dark:hover .pp-btn-arrow {
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .pp-hero-spectra { min-height: 0; }
    .pp-hero-spectra .pp-hero-image img {
        width: 100%;
        margin-left: 0;
        height: 440px;
    }
}
@media (max-width: 768px) {
    .pp-hero-spectra .pp-hero-image img { height: 280px; }
}

/* =========================================================
   18b. Home — Hero Spectra fix v2.1.1 (button + top-gap)
   ========================================================= */

/* Kill top spacing on home (wrapper Astra paddings) */
body.page-id-8 #content,
body.page-id-8 #primary,
body.page-id-8 .site-content,
body.page-id-8 .site-content > .ast-container,
body.page-id-8 .entry-content,
body.page-id-8 article.page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.page-id-8 .pp-hero-spectra {
    margin-top: 0 !important;
}

/* Hero CTA button — force pill style + shadow */
.pp-hero-spectra .pp-btn-primary-on-dark {
    background: #fff !important;
    color: var(--pp-violet, #5a028f) !important;
    padding: 16px 32px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 14px 40px rgba(212,170,0,0.18), 0 4px 12px rgba(26,10,46,0.22) !important;
    transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.pp-hero-spectra .pp-btn-primary-on-dark:hover {
    background: var(--pp-or, #d4aa00) !important;
    color: #1a0a2e !important;
    transform: translateY(-2px);
    box-shadow: 0 20px 56px rgba(212,170,0,0.28), 0 6px 14px rgba(26,10,46,0.26) !important;
}
.pp-hero-spectra .pp-btn-primary-on-dark .pp-btn-arrow {
    transition: transform .25s ease;
    font-size: 1.1em;
}
.pp-hero-spectra .pp-btn-primary-on-dark:hover .pp-btn-arrow {
    transform: translateX(4px);
}

/* =========================================================
   19. Home — Section 2 "Le constat" (v2.1.2)
   ========================================================= */
.pp-constat-section {
    text-align: center;
}
.pp-constat-section .pp-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--pp-violet, #5a028f);
    margin: 0 0 0.6rem;
}
.pp-constat-section h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--pp-text, #1a0a2e) !important;
    font-size: clamp(1.75rem, 1rem + 2.2vw, 2.4rem);
    line-height: 1.2;
    margin: 0 auto 1.5rem;
    max-width: 720px;
}
.pp-constat-section .pp-section-intro {
    color: var(--pp-text, #1a0a2e);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}
.pp-constat-section .pp-pullquote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.25rem, 0.7rem + 1.5vw, 1.75rem);
    line-height: 1.4;
    color: var(--pp-violet, #5a028f);
    border-top: 2px solid var(--pp-or, #d4aa00);
    border-bottom: 2px solid var(--pp-or, #d4aa00);
    border-left: 0;
    padding: 1.75rem 1rem;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.pp-constat-section .pp-pullquote p {
    margin: 0;
}

/* =========================================================
   20. Home — Section 3 "La méthode P&P" (v2.1.3)
   ========================================================= */
.pp-methode-section {
    text-align: center;
}
.pp-methode-section h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--pp-text, #1a0a2e) !important;
    font-size: clamp(1.75rem, 1rem + 2.2vw, 2.4rem);
    line-height: 1.2;
    margin: 0 auto 1rem;
    max-width: 720px;
}
.pp-methode-section .pp-section-intro {
    color: var(--pp-text-soft, #6b6575);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 3rem;
}

/* 4 skill cards */
.pp-skills-grid.wp-block-columns {
    gap: 24px !important;
    max-width: 1180px;
    margin: 0 auto 3rem;
}
.pp-skills-grid > .wp-block-column {
    background: #fff;
    border: 1px solid var(--pp-violet-soft, #e8d5f5);
    border-radius: 16px;
    padding: 28px 22px !important;
    text-align: center;
    box-shadow: 0 2px 12px rgba(26,10,46,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.pp-skills-grid > .wp-block-column:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(90,2,143,0.14);
}
.pp-skills-grid figure.pp-skill-icon {
    margin: 0 auto 14px !important;
    text-align: center;
}
.pp-skills-grid figure.pp-skill-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}
.pp-skills-grid h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--pp-violet, #5a028f) !important;
    font-size: 1.35rem;
    line-height: 1.2;
    margin: 0 0 12px;
}
.pp-skills-grid .wp-block-column p {
    color: var(--pp-text-soft, #6b6575);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

/* Pitch spotlight encadré */
.pp-pitch-spotlight {
    background: linear-gradient(135deg, #5a028f 0%, #3d0160 55%, #1a0a2e 100%);
    border-radius: 20px;
    padding: 48px 32px !important;
    text-align: center;
    max-width: 920px;
    margin: 0 auto !important;
    box-shadow: 0 18px 50px rgba(90,2,143,0.22);
}
.pp-pitch-spotlight .pp-pitch-quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    color: #fff !important;
    font-size: clamp(1.4rem, 0.9rem + 1.2vw, 2rem);
    line-height: 1.3;
    margin: 0 0 16px;
}
.pp-pitch-spotlight .pp-pitch-detail {
    color: rgba(255,255,255,0.82) !important;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto !important;
}

/* Responsive */
@media (max-width: 781px) {
    .pp-skills-grid > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* =========================================================
   20b. Home — Fix v2.1.4 (eyebrow global + bigger icons)
   ========================================================= */

/* Généralise .pp-eyebrow sur toute la home (était scopé à .pp-constat-section) */
.pp-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--pp-violet, #5a028f) !important;
    margin: 0 0 0.6rem !important;
}

/* Icônes cerveaux plus grandes */
.pp-skills-grid figure.pp-skill-icon img {
    width: 120px !important;
    height: 120px !important;
}
.pp-skills-grid figure.pp-skill-icon {
    margin: 0 auto 18px !important;
}

/* =========================================================
   21. Home — Section 4 "Jonas featured" (v2.1.5)
   ========================================================= */
.pp-jonas-featured-section .pp-jonas-featured {
    align-items: center;
}
.pp-jonas-featured-section .pp-jonas-image figure img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(90,2,143,0.18);
    height: auto;
}
.pp-jonas-featured-section .pp-jonas-text {
    text-align: left;
}
.pp-jonas-badge {
    display: inline-block !important;
    background: var(--pp-violet-soft, #e8d5f5);
    color: var(--pp-violet, #5a028f) !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 6px 14px;
    border-radius: 999px;
    margin: 0 0 1rem !important;
}
.pp-jonas-featured-section h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--pp-text, #1a0a2e) !important;
    font-size: clamp(1.75rem, 1rem + 2.2vw, 2.4rem);
    line-height: 1.2;
    margin: 0 0 1rem !important;
    text-align: left;
}
.pp-jonas-featured-section .pp-jonas-text > p {
    color: var(--pp-text, #1a0a2e);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 1.25rem;
}
.pp-jonas-features {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 0 1.5rem !important;
}
.pp-jonas-features li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 0.6rem;
    color: var(--pp-text, #1a0a2e);
    font-size: 1rem;
    line-height: 1.5;
    list-style: none;
}
.pp-jonas-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: var(--pp-or, #d4aa00);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.pp-jonas-price {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--pp-violet, #5a028f) !important;
    font-size: 1.5rem !important;
    margin: 0 0 1.5rem !important;
}

/* Responsive : sous 781px les colonnes Gutenberg passent en 1 col */
@media (max-width: 781px) {
    .pp-jonas-featured-section .pp-jonas-text {
        text-align: left;
    }
}

/* =========================================================
   22. Home — Section 5 "Notre histoire" (v2.1.6)
   ========================================================= */
.pp-about-section .pp-about-grid {
    align-items: center;
}
.pp-about-section .pp-about-text h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #fff !important;
    font-size: clamp(1.75rem, 1rem + 2.2vw, 2.4rem);
    line-height: 1.2;
    margin: 0 0 1.5rem !important;
    text-align: left;
}
.pp-about-section .pp-about-text p {
    color: rgba(255,255,255,0.82) !important;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}
.pp-about-section .pp-about-photo figure img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
@media (max-width: 781px) {
    .pp-about-section .pp-about-photo figure img {
        height: 360px;
    }
}

/* =========================================================
   23. Home — Section 6 "Avis parents" (v2.1.7)
   ========================================================= */
.pp-reviews-section {
    text-align: center;
}
.pp-reviews-section .pp-reviews-header {
    margin: 0 auto;
    max-width: 720px;
}
.pp-reviews-section .pp-reviews-header h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--pp-text, #1a0a2e) !important;
    font-size: clamp(1.75rem, 1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 1rem !important;
}
.pp-reviews-section .pp-section-intro {
    color: var(--pp-text-soft, #6b6575);
    font-size: 1.05rem;
    max-width: 640px;
    margin: 0 auto 3rem !important;
    line-height: 1.6;
}
.pp-reviews-grid.wp-block-columns {
    gap: 24px !important;
    max-width: 1180px;
    margin: 0 auto;
    align-items: stretch;
}
.pp-reviews-grid > .wp-block-column.pp-review-card {
    background: #fff;
    border: 1px solid var(--pp-violet-soft, #e8d5f5);
    border-radius: 16px;
    padding: 28px 26px !important;
    text-align: left;
    box-shadow: 0 2px 12px rgba(26,10,46,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.pp-reviews-grid > .wp-block-column.pp-review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(90,2,143,0.10);
}
.pp-review-bubble {
    color: var(--pp-text, #1a0a2e) !important;
    font-size: 0.97rem !important;
    line-height: 1.7 !important;
    margin: 0 0 1.5rem !important;
}
.pp-review-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.pp-review-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pp-violet, #5a028f);
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-review-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.pp-review-meta strong {
    color: var(--pp-text, #1a0a2e);
    font-size: 0.9rem;
    font-weight: 700;
}
.pp-review-meta small {
    color: var(--pp-text-soft, #6b6575);
    font-size: 0.8rem;
}
@media (max-width: 781px) {
    .pp-reviews-grid > .wp-block-column.pp-review-card {
        flex-basis: 100% !important;
    }
}


/* =========================================================
   20. Header sticky (Phase 3 — 10 mai 2026)
   ---------------------------------------------------------
   Astra free n'a pas de sticky natif (Pro feature). On utilise
   position:sticky sur la rangée Primary du Header Builder.
   Compense la WP admin bar pour l'utilisateur connecté.
   ========================================================= */
.site-header#masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--pp-violet-soft);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.site-header .ast-primary-header-bar {
    background: var(--pp-violet-soft);
}
.admin-bar .site-header#masthead {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .site-header#masthead {
        top: 46px;
    }
}

/* Réduction hauteur header (Phase 3 — 10 mai 2026)
   Padding réduit pour compenser un logo plus grand sans
   gonfler la hauteur totale du header. */
.site-header .site-primary-header-wrap.ast-builder-grid-row-container {
    padding-top: 4px;
    padding-bottom: 4px;
}
.site-header .ast-primary-header-bar .site-logo-img img,
.site-header .ast-primary-header-bar .custom-logo-link img {
    max-height: 72px;
    width: auto;
}


/* =========================================================
   21. Header menu items + Mon compte (Phase 3 — 10 mai 2026)
   ---------------------------------------------------------
   Override du bleu Astra par défaut (link-color injecté via
   Customizer inline CSS) — !important nécessaire pour battre
   la spécificité de l'inline CSS. Tous les liens en couleur
   texte P&P, hover/focus + page courante en violet P&P.
   Style Mon compte desktop (icône SVG ronde discrète) + mobile
   drawer (lien texte).
   ========================================================= */
.site-header .main-header-menu .menu-item > a,
.site-header .ast-builder-menu-1 .menu-item > a,
.site-header .ast-nav-menu .menu-item > a {
    color: var(--pp-text) !important;
    font-family: var(--pp-font-body);
    font-weight: 500;
    transition: color 0.2s ease;
}
.site-header .main-header-menu .menu-item > a:hover,
.site-header .main-header-menu .menu-item > a:focus,
.site-header .main-header-menu .menu-item.current-menu-item > a,
.site-header .main-header-menu .menu-item.current_page_item > a,
.site-header .main-header-menu .menu-item.current-menu-ancestor > a,
.site-header .ast-builder-menu-1 .menu-item > a:hover,
.site-header .ast-builder-menu-1 .menu-item > a:focus,
.site-header .ast-builder-menu-1 .menu-item.current-menu-item > a,
.site-header .ast-builder-menu-1 .menu-item.current_page_item > a,
.site-header .ast-builder-menu-1 .menu-item.current-menu-ancestor > a,
.site-header .ast-nav-menu .menu-item > a:hover,
.site-header .ast-nav-menu .menu-item > a:focus,
.site-header .ast-nav-menu .menu-item.current-menu-item > a,
.site-header .ast-nav-menu .menu-item.current_page_item > a,
.site-header .ast-nav-menu .menu-item.current-menu-ancestor > a {
    color: var(--pp-violet) !important;
}

/* Icône user (data URI SVG en mask, contournement filtre kses qui strippe SVG inline) */
.pp-account-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") no-repeat center / contain;
    flex: 0 0 auto;
    vertical-align: middle;
}

/* Mon compte — desktop (rond, icône seule) */
.pp-account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--pp-violet);
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
}
.pp-account-link:hover,
.pp-account-link:focus {
    background: var(--pp-violet-soft);
    color: var(--pp-violet-dark);
}

/* Mon compte — mobile drawer (lien texte plus large) */
.pp-account-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin-top: 12px;
    color: var(--pp-violet);
    font-family: var(--pp-font-body);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border-top: 1px solid var(--pp-violet-soft);
}
.pp-account-mobile:hover,
.pp-account-mobile:focus {
    color: var(--pp-violet-dark);
    background: var(--pp-bg-light);
}


/* =========================================================
   22. Footer v3 — 3 cols + socials in Aide + signature (Phase 3)
   ---------------------------------------------------------
   3 colonnes équilibrées : Découvrir / Aide (+ icônes sociales) / Légal.
   Below row : copyright signé. Above row supprimée.
   Icônes sociales en CSS mask-image (data URI SVG) car kses
   strippe les <svg> inline du contenu HTML stocké en option.
   ========================================================= */
.site-footer .ast-builder-grid-row-container.site-primary-footer-wrap,
.site-footer .ast-builder-grid-row-container.site-below-footer-wrap {
    background-color: var(--pp-violet-soft);
    color: var(--pp-text);
}
.site-footer .ast-builder-grid-row-container.site-below-footer-wrap {
    border-top: none;
}

/* Padding rows */
.site-footer .site-primary-footer-wrap .ast-builder-grid-row {
    padding-top: 48px;
    padding-bottom: 0;
}
.site-footer .site-below-footer-wrap .ast-builder-grid-row {
    padding-top: 0;
    padding-bottom: 14px;
}

/* Wrapper html-1 (grille + ligne sociale) */
.pp-footer-wrap { width: 100%; }

/* Grille 4 cols : Logo / Découvrir / Aide / Légal */
.pp-footer-grid {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1fr 1fr;
    gap: 48px;
    align-items: start;
    width: 100%;
}
.pp-footer-col { color: var(--pp-text); }

/* Col 1 — Logo */
.pp-footer-brand-col {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.pp-footer-brand {
    display: inline-block;
    line-height: 0;
}
.pp-footer-brand img {
    max-width: 130px;
    height: auto;
    display: block;
}

/* Titres colonnes */
.pp-footer-title {
    font-family: var(--pp-font-heading);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--pp-violet-dark);
    margin: 0 0 16px 0;
    line-height: 1.3;
}

/* Liens des colonnes */
.pp-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-footer-links li { margin: 0; padding: 0; }
.pp-footer-links a {
    color: var(--pp-violet);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.2s ease;
    word-break: break-word;
}
.pp-footer-links a:hover,
.pp-footer-links a:focus {
    color: var(--pp-violet-dark);
    text-decoration: underline;
}

/* Réseaux sociaux — ligne centrée sous la grille, avant la signature */
.pp-footer-socials {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 24px;
    padding-top: 0;
    border-top: none;
}
.pp-footer-social {
    display: inline-block;
    width: 26px;
    height: 26px;
    background-color: var(--pp-violet);
    transition: background-color 0.2s ease, transform 0.2s ease;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.pp-footer-social:hover,
.pp-footer-social:focus {
    background-color: var(--pp-violet-dark);
    transform: translateY(-2px);
}
.pp-footer-social-instagram {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/></svg>");
}
.pp-footer-social-facebook {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/></svg>");
}
.pp-footer-social-youtube {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/></svg>");
}

/* Footer-bottom signature */
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p {
    color: var(--pp-text);
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 0;
    text-align: center;
}
.site-footer .ast-footer-copyright a {
    color: var(--pp-violet);
    text-decoration: none;
    font-weight: 500;
}
.site-footer .ast-footer-copyright a:hover,
.site-footer .ast-footer-copyright a:focus {
    color: var(--pp-violet-dark);
    text-decoration: underline;
}

/* Supprime l'espace blanc entre le contenu de page et le footer */
.site-content,
.site-content > .ast-container,
.site-main,
.site-main .ast-container,
.ast-no-sidebar .site-content,
.ast-no-sidebar .site-content #primary,
.ast-no-sidebar .site-content #primary .entry-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.site-content .entry-content > *:last-child,
.site-content article:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.site-footer { margin-top: 0 !important; }

/* Tablet : 2 cols (logo se cale en haut à gauche) */
@media (max-width: 1024px) {
    .pp-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .pp-footer-brand-col {
        grid-column: 1 / -1;
        justify-content: center;
        margin-bottom: 8px;
    }
}

/* Mobile : empilement vertical centré */
@media (max-width: 781px) {
    .site-footer .site-primary-footer-wrap .ast-builder-grid-row {
        padding-top: 8px;
        padding-bottom: 4px;
    }
    .site-footer .site-below-footer-wrap .ast-builder-grid-row {
        padding-top: 0;
        padding-bottom: 10px;
    }
    .pp-footer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        text-align: center;
    }
    .pp-footer-brand-col {
        grid-column: auto;
        justify-content: center;
    }
    .pp-footer-brand img {
        max-width: 110px;
        margin: 0 auto;
    }
    .pp-footer-links {
        align-items: center;
    }
    .pp-footer-socials {
        margin-top: 10px;
        padding-top: 0;
    }
}


/* =========================================================
   24. Single product — Title amélioré + breadcrumb retiré (Phase 4 — 10 mai 2026)
   ---------------------------------------------------------
   Le sticky .summary a été retiré (commit précédent) : Astra ne wrappe
   pas gallery+summary dans une sous-ligne, donc le sticky débordait
   sur les onglets full-width plus bas. À reprendre proprement plus
   tard via un sticky add-to-cart bar en bas de viewport.

   Le breadcrumb WooCommerce est désormais retiré via PHP
   (functions.php — `pp_remove_woo_breadcrumb`).
   ========================================================= */

/* Title produit — désormais hors summary, dans .pp-product-header.
   Section 26 ci-dessous gère le styling complet du nouveau template. */

/* Fil d'Ariane WooCommerce + label catégorie au-dessus du titre — masqués
   tant qu'il n'y a qu'un seul ebook en boutique. Le PHP `remove_action`
   ne suffit pas (Astra/WC réinjectent via d'autres hooks), donc CSS
   en garde-fou. À retirer le jour où on a 2+ produits et qu'on veut
   restaurer la navigation par catégories. */
.single-product .woocommerce-breadcrumb,
.woocommerce-breadcrumb,
.single-product .single-product-category,
.single-product .summary .product_meta .posted_in {
    display: none !important;
}


/* =========================================================
   25. Single product — Carousel galerie Swiper (Phase 1 — 10 mai 2026)
   ---------------------------------------------------------
   Remplace la galerie WC native par un carousel horizontal
   avec navigation, pagination et thumbs synchronisés.
   Le rendu HTML est généré côté PHP (cf. functions.php
   pp_swiper_product_gallery). Swiper.js v11 chargé via CDN.
   ========================================================= */
.pp-product-gallery {
    width: 100%;
    margin-bottom: 24px;
}

/* Carousel principal */
.pp-product-main {
    border-radius: 12px;
    overflow: hidden;
    background: var(--pp-bg-light);
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(26, 10, 46, 0.04);
}
.pp-product-main .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--pp-bg-light);
}
.pp-product-main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
    display: block;
}

/* Boutons navigation : ronds violets discrets */
.pp-product-main .swiper-button-prev,
.pp-product-main .swiper-button-next {
    color: var(--pp-violet);
    background: rgba(255, 255, 255, 0.92);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(26, 10, 46, 0.12);
    transition: background 0.2s ease, transform 0.2s ease;
}
.pp-product-main .swiper-button-prev:hover,
.pp-product-main .swiper-button-next:hover {
    background: var(--pp-violet);
    color: #fff;
    transform: scale(1.05);
}
.pp-product-main .swiper-button-prev:hover::after,
.pp-product-main .swiper-button-next:hover::after { color: #fff; }
.pp-product-main .swiper-button-prev::after,
.pp-product-main .swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
}

/* Pagination dots violets */
.pp-product-main .swiper-pagination {
    bottom: 12px;
}
.pp-product-main .swiper-pagination-bullet {
    background: var(--pp-violet);
    opacity: 0.35;
    width: 8px;
    height: 8px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.pp-product-main .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
}

/* Thumbs strip — object-fit:contain pour respecter ratio des covers
   portrait, box-sizing border-box pour que le border 2px ne déborde pas
   de la hauteur fixe du conteneur. */
.pp-product-thumbs {
    height: 90px;
    padding: 4px 0;
}
.pp-product-thumbs .swiper-slide {
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    background: var(--pp-bg-light);
    height: 100%;
}
.pp-product-thumbs .swiper-slide:hover {
    opacity: 0.85;
}
.pp-product-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border-color: var(--pp-violet);
}
.pp-product-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 4px;
    box-sizing: border-box;
}

/* Cursor zoom-in sur l'image principale pour signifier l'interactivité */
.pp-product-main .swiper-zoom-container {
    cursor: zoom-in;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-product-main .swiper-slide-zoomed .swiper-zoom-container {
    cursor: zoom-out;
}

/* Mobile : padding intérieur réduit */
@media (max-width: 600px) {
    .pp-product-main .swiper-slide img { padding: 12px; }
    .pp-product-main .swiper-button-prev,
    .pp-product-main .swiper-button-next {
        width: 36px;
        height: 36px;
    }
    .pp-product-thumbs {
        height: 64px;
    }
}


/* =========================================================
   26. Single product — Template P&P vertical stack (Phase 1 — 10 mai 2026)
   ---------------------------------------------------------
   Refonte de l'agencement WooCommerce single-product :
       Astra default      →     Template P&P
       ─────────────             ─────────────
       Gallery │ Summary  →     [Titre centré]
       ─────────────             [Carousel centré]
       Tabs full                 [Card Info — prix/CTA]
       Related                   [Onglets full-width]
                                 [Related]

   `display: block` casse le flex 2-col qu'Astra applique sur
   `.product`. Le titre est déplacé hors summary par PHP
   (functions.php — pp_single_product_title_block).

   S'applique à TOUS les produits (sélecteur `.single-product
   div.product` sans ID), pas spécifique à Jonas.
   ========================================================= */

.single-product div.product {
    display: block !important;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 0;
}
.single-product div.product > * {
    width: 100% !important;
    float: none !important;
    clear: both;
}

/* Header — Titre centré, généreux */
.pp-product-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 32px;
    padding: 0 16px;
}
.single-product .pp-product-header .product_title.entry-title {
    font-family: var(--pp-font-heading) !important;
    font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.8rem) !important;
    line-height: 1.2 !important;
    color: var(--pp-violet-dark) !important;
    font-weight: 700 !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Carousel — centré max-width raisonnable */
.single-product .pp-product-gallery {
    max-width: 720px;
    margin: 0 auto 48px !important;
}

/* Card Info — summary devient un bloc CTA centré */
.single-product .summary.entry-summary {
    max-width: 760px !important;
    margin: 0 auto 56px !important;
    padding: 36px 40px !important;
    background: #fff !important;
    border: 1px solid var(--pp-violet-soft) !important;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(26, 10, 46, 0.06);
}

/* Hiérarchie typo dans la card */
.single-product .summary .price {
    font-family: var(--pp-font-heading);
    font-size: 1.6rem !important;
    color: var(--pp-violet-dark) !important;
    margin-bottom: 1.2rem !important;
}
.single-product .summary .woocommerce-product-details__short-description {
    color: var(--pp-text);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}
.single-product .summary .cart {
    margin-top: 1.2rem;
}

/* Onglets (description, etc.) — pleine largeur viewport, sections gérent leur propre espacement */
.single-product .woocommerce-tabs {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Heading "Description" du tab WC — masqué (redondant avec un seul onglet) */
.single-product .woocommerce-tabs > .panel > h2:first-of-type {
    display: none;
}
/* Doublon du titre produit dans .summary (Astra le réinjecte malgré remove_action).
   Le H1 visible reste celui de .pp-product-header en haut de page. */
.single-product .summary > .product_title.entry-title,
.single-product .summary .product_title.entry-title {
    display: none !important;
}
.single-product .woocommerce-tabs .wc-tabs {
    border-bottom: 1px solid var(--pp-violet-soft);
    margin-bottom: 24px;
}
.single-product .woocommerce-tabs .wc-tabs li a {
    color: var(--pp-text-soft);
    font-family: var(--pp-font-body);
    font-weight: 600;
}
.single-product .woocommerce-tabs .wc-tabs li.active a,
.single-product .woocommerce-tabs .wc-tabs li a:hover {
    color: var(--pp-violet-dark);
}
.single-product .woocommerce-tabs .panel {
    color: var(--pp-text);
    line-height: 1.7;
}

/* Related products — full-width centré */
.single-product .related.products {
    max-width: 1100px;
    margin: 56px auto 0 !important;
    padding: 0 20px;
}

/* Mobile : padding card réduit */
@media (max-width: 600px) {
    .single-product div.product { padding: 20px 12px 0; }
    .single-product .summary.entry-summary {
        padding: 24px 20px !important;
        margin-bottom: 32px !important;
    }
    .single-product .pp-product-gallery {
        margin-bottom: 32px !important;
    }
    .pp-product-header { margin-bottom: 24px; }
}


/* =========================================================
   27. Single product — Description longue restructurée (Phase 2 — 10 mai 2026)
   ---------------------------------------------------------
   Sections A→G générées en blocs Gutenberg core (group, columns,
   list, details, buttons) avec classes `pp-product-*`.
   Alternance text/image, 2 cards format, FAQ accordion, CTA banner.
   ========================================================= */

/* Section wrapper — full bleed (bg edge-to-edge viewport).
   Technique : marges négatives qui sortent du conteneur parent
   (.product max-width 1100px) et étendent le bg aux bords du viewport.
   Le contenu interne reste centré max 1140px (800px pour FAQ/CTA). */
.single-product .woocommerce-tabs .panel .pp-product-section {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 64px 0;
    border-bottom: 1px solid var(--pp-violet-soft);
    box-sizing: border-box;
}
.single-product .woocommerce-tabs .panel .pp-product-section:last-child {
    border-bottom: none;
}
/* Contenu interne centré max 1140px pour rester lisible en très grands écrans */
.single-product .woocommerce-tabs .panel .pp-product-section > * {
    max-width: 1140px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
/* FAQ et CTA : contenu interne plus étroit pour lisibilité */
.single-product .pp-product-section-faq > *,
.single-product .pp-product-section-cta > .pp-product-cta {
    max-width: 800px;
}
/* Garde-fou : empêche le scroll horizontal causé par 100vw sur navigateurs
   qui comptent la scrollbar dans le viewport (Windows/Edge surtout). */
body.single-product {
    overflow-x: hidden;
}

/* Heading H2 sections — Playfair, violet-dark */
.single-product .pp-product-h2 {
    font-family: var(--pp-font-heading) !important;
    font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem) !important;
    color: var(--pp-violet-dark) !important;
    line-height: 1.25 !important;
    margin: 0 0 1rem !important;
    font-weight: 700;
}

/* Row text/image — gap, vertical center */
.single-product .pp-product-row {
    gap: 48px !important;
    align-items: center;
    margin: 0 !important;
}
.single-product .pp-product-row.pp-product-row--reverse {
    flex-direction: row-reverse;
}
.single-product .pp-product-row .wp-block-column {
    margin: 0;
}

/* Image : ratio préservé, ombre douce, radius */
.single-product .pp-product-img {
    margin: 0;
}
.single-product .pp-product-img img {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(26, 10, 46, 0.10);
    width: 100%;
    height: auto;
    display: block;
}

/* Liste section D — bullets violets */
.single-product .pp-product-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}
.single-product .pp-product-list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.8rem;
    line-height: 1.6;
}
.single-product .pp-product-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--pp-violet);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
}

/* Section E — 2 cards format/livraison */
.single-product .pp-product-format-cards {
    gap: 24px !important;
    margin: 24px 0 0 !important;
}
.single-product .pp-product-format-card {
    background: #fff;
    border: 1px solid var(--pp-violet-soft);
    border-radius: 16px;
    padding: 32px !important;
    box-shadow: 0 4px 18px rgba(26, 10, 46, 0.05);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.single-product .pp-product-format-card:hover {
    background: #faf5ff;
    border-color: var(--pp-violet);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(90, 2, 143, 0.18);
}
.single-product .pp-product-format-title {
    font-family: var(--pp-font-heading) !important;
    font-size: 1.3rem !important;
    color: var(--pp-violet-dark) !important;
    margin: 0 0 0.8rem !important;
}
.single-product .pp-product-format-price {
    font-family: var(--pp-font-heading);
    font-size: 1.1rem;
    color: var(--pp-violet);
    margin: 0 0 1rem !important;
}
.single-product .pp-product-format-bonus {
    color: var(--pp-text-soft);
    font-size: 0.95rem;
    margin: 1rem 0 0 !important;
}

/* Section F — FAQ accordion (core/details natif) */
.single-product .pp-product-section-faq {
    background: var(--pp-bg-light);
}
.single-product .pp-product-faq-item {
    background: #fff;
    border: 1px solid var(--pp-violet-soft);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.single-product .pp-product-faq-item:hover {
    box-shadow: 0 4px 16px rgba(26, 10, 46, 0.06);
}
.single-product .pp-product-faq-item summary {
    padding: 18px 24px;
    cursor: pointer;
    font-family: var(--pp-font-body);
    font-weight: 600;
    color: var(--pp-violet-dark);
    list-style: none;
    position: relative;
    padding-right: 48px;
}
.single-product .pp-product-faq-item summary::-webkit-details-marker { display: none; }
.single-product .pp-product-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pp-violet);
    font-size: 1.4rem;
    font-weight: 400;
    transition: transform 0.2s ease;
}
.single-product .pp-product-faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}
.single-product .pp-product-faq-item[open] summary {
    border-bottom: 1px solid var(--pp-violet-soft);
}
.single-product .pp-product-faq-item p {
    padding: 18px 24px;
    margin: 0 !important;
    color: var(--pp-text);
    line-height: 1.7;
}

/* Section G — CTA bandeau violet */
.single-product .pp-product-section-cta {
    background: linear-gradient(135deg, var(--pp-violet) 0%, var(--pp-violet-dark) 100%);
    border-bottom: none !important;
}
.single-product .pp-product-cta {
    color: #fff;
    text-align: center;
    padding: 24px 16px;
}
.single-product .pp-product-cta-title {
    font-family: var(--pp-font-heading) !important;
    color: #fff !important;
    font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem) !important;
    line-height: 1.3 !important;
    margin: 0 auto 1rem !important;
    max-width: 600px;
}
.single-product .pp-product-cta-text {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    margin: 0 auto 2rem !important;
    max-width: 540px;
    line-height: 1.6;
}
.single-product .pp-product-cta-button .wp-block-button__link {
    background: var(--pp-or) !important;
    color: var(--pp-text) !important;
    font-weight: 700;
    border: 2px solid var(--pp-or);
    border-radius: 999px;
    padding: 14px 32px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.single-product .pp-product-cta-button .wp-block-button__link:hover {
    background: #fff !important;
    color: var(--pp-violet-dark) !important;
    border-color: #fff;
    transform: translateY(-2px);
}

/* Short description — première phrase stylée comme un sous-titre Playfair (hook) */
.single-product .summary .pp-short-hero {
    font-family: var(--pp-font-heading) !important;
    font-size: clamp(1.3rem, 0.9rem + 1.4vw, 1.85rem) !important;
    line-height: 1.3 !important;
    color: var(--pp-violet-dark) !important;
    font-weight: 700 !important;
    margin: 0 0 1.4rem !important;
}
.single-product .summary .pp-short-hero strong {
    color: var(--pp-violet);
}

/* Short description — bullets de bénéfices dans la card */
.single-product .summary .pp-short-benefits {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}
.single-product .summary .pp-short-benefits li {
    padding: 6px 0;
    line-height: 1.55;
    color: var(--pp-text);
}

/* Mobile : gap réduit, alternance désactivée (stack vertical) */
@media (max-width: 781px) {
    .single-product .woocommerce-tabs .panel .pp-product-section {
        padding: 36px 16px;
    }
    .single-product .pp-product-row {
        gap: 24px !important;
        flex-direction: column !important;
    }
    .single-product .pp-product-row.pp-product-row--reverse {
        flex-direction: column !important;
    }
    .single-product .pp-product-row .wp-block-column {
        flex-basis: 100% !important;
    }
    .single-product .pp-product-format-cards {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .single-product .pp-product-format-card {
        padding: 24px !important;
    }
    .single-product .pp-product-cta { padding: 20px 12px; }
}