/*
Theme Name:     Child Papillon'Idea
Theme URI:      n/a
Template:       kadence
Author:         Amaury P.
Author URI:     n/a
Description:    Child Theme
Version:        1.1
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ============================================================
   CSS UNIFIÉ PAPILLON'IDEA — Design System v2.1
   Mis à jour le 30/03/2026

   APPROCHE HYBRIDE :
   Ce fichier = COUCHE 2 (child theme style.css)
   Uniquement ce que Kadence ne gère pas nativement.
   La COUCHE 1 = réglages Kadence Customizer (voir checklist).

   STRUCTURE :
   - Section A : Variables (tokens — 6 couleurs uniquement)
   - Section B : TangeCarlo natif sur les H1
   - Section C–D : Supprimés (ancien header/footer custom)
   - Section E : Noms scientifiques
   - Section F : Boutons / CTA (or primaire, rose secondaire, capitalize)
   - Section G : WooCommerce surcharges
   - Section H : Piliers accueil
   - Section I : Utilitaires
   ============================================================ */


/* ===========================================
   A. TOKENS DU DESIGN SYSTEM
   =========================================== */
:root {
    /* Palette — 6 couleurs uniquement (validée 30/03/2026) */
    --pp-vert-foret:    #476347;  /* titres, CTA texte, nav, footer */
    --pp-or-vegetal:    #C7C172;  /* prix, hover accents, bordure CTA primaire */
    --pp-gris-lecture:  #333333;  /* texte courant (paragraphes) */
    --pp-beige-sable:   #F5ECE5;  /* fonds sections, overlays — JAMAIS en bordure */
    --pp-blanc:         #FFFFFF;  /* fond principal */
    --pp-rose-poudre:   #D4A0A0;  /* bordure CTA secondaire — JAMAIS en fond ou texte */

    /* Dérivées (transparences des 6 couleurs ci-dessus) */
    --pp-blanc-semi:    rgba(250, 250, 250, 0.75);  /* fond boutons CTA */
    --pp-beige-semi:    rgba(245, 236, 229, 0.55);  /* overlay sections */

    /* Typographie */
    --pp-font-tangecarlo: 'TangeCarlo', cursive;
    --pp-font-titre: 'Cormorant Garamond', serif;
    --pp-font-corps: 'Lato', sans-serif;

    /* Échelle typo (design system) */
    --pp-text-xs:   0.8125rem;  /* 13px */
    --pp-text-sm:   0.9375rem;  /* 15px */
    --pp-text-base: 1.0625rem;  /* 17px */
    --pp-text-lg:   1.25rem;    /* 20px */
    --pp-text-xl:   1.75rem;    /* 28px */
    --pp-text-2xl:  2.5rem;     /* 40px */
    --pp-text-3xl:  3.5rem;     /* 56px */

    /* Espacements (multiples de 8) */
    --pp-space-1: 8px;
    --pp-space-2: 16px;
    --pp-space-3: 24px;
    --pp-space-4: 32px;
    --pp-space-5: 40px;
    --pp-space-6: 48px;
    --pp-space-8: 64px;
    --pp-space-12: 96px;

    /* Conteneur */
    --pp-container-max: 1200px;
    --pp-container-text: 800px;
    --pp-container-pad: 24px;
}


/* ===========================================
   B. H1 — GÉRÉ PAR KADENCE CUSTOMIZER
   =========================================== */

/*
   Les H1 sont désormais 100% pilotés par Kadence > Apparence > Typographie.
   TangeCarlo est défini dans le JSON functions.php (h1_font).
   Plus de !important ici = le Customizer reprend la main.
   Ancien bloc CSS H1 supprimé le 03/04/2026 (écrasait le Customizer).
*/


/* ===========================================
   C–D. SUPPRIMÉS (30/03/2026)
   Ancien bloc HTML custom header/footer remplacé
   par Logo & Titre natif Kadence.
   =========================================== */


/* ===========================================
   E. NOMS SCIENTIFIQUES (Cormorant Garamond Italic)
   =========================================== */

/* Via <mark> — méthode actuelle qui fonctionne */
mark,
mark span {
    font-family: var(--pp-font-titre);
    font-style: italic;
    font-size: 1.2em !important;
    background: none;
    color: var(--pp-gris-lecture) !important; /* Gris pour noms latins */
}

/* Classe dédiée (alternative plus propre, à utiliser à terme) */
.nom-scientifique {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.15em !important;
    color: inherit;
}
/* ===========================================
   F. BOUTONS / CTA — Design System v2.1
   Validé 30/03/2026 : or primaire, rose secondaire,
   capitalize (plus de uppercase)
   =========================================== */

/* Reset hover shadow sur tous les boutons */
button:hover, button:focus, button:active,
.button:hover, .button:focus, .button:active,
.wp-block-button__link:hover {
    box-shadow: none !important;
}

/* --- Bouton Primaire — bordure or, hover → rose --- */
/* Usage Kadence : ajouter la classe "pp-btn-primary" au bloc bouton */
.pp-btn-primary .wp-block-button__link,
a.pp-btn-primary {
    background: var(--pp-blanc-semi);
    color: var(--pp-vert-foret);
    border: 1.5px solid var(--pp-or-vegetal);
    border-radius: 999px; /* pill */
    padding: 20px 25px;
    font-family: var(--pp-font-corps);
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 2px;
    transition: border-color 0.3s ease;
    text-decoration: none;
}

.pp-btn-primary .wp-block-button__link:hover,
a.pp-btn-primary:hover {
    background: var(--pp-blanc-semi); /* PAS de changement de fond */
    border-color: var(--pp-rose-poudre); /* Hover = bordure rose */
    color: var(--pp-vert-foret);
}

/* --- Bouton Secondaire — bordure rose, hover → or --- */
.pp-btn-secondary .wp-block-button__link,
a.pp-btn-secondary {
    background: var(--pp-blanc-semi);
    color: var(--pp-vert-foret);
    border: 1.5px solid var(--pp-rose-poudre);
    border-radius: 999px;
    padding: 20px 25px;
    font-family: var(--pp-font-corps);
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 2px;
    transition: border-color 0.3s ease;
    text-decoration: none;
}

.pp-btn-secondary .wp-block-button__link:hover,
a.pp-btn-secondary:hover {
    background: var(--pp-blanc-semi);
    border-color: var(--pp-or-vegetal); /* Hover = bordure or */
    color: var(--pp-vert-foret);
}

/* --- Bouton Lien texte --- */
.pp-btn-text,
a.pp-btn-text {
    background: none;
    border: none;
    color: var(--pp-vert-foret);
    font-family: var(--pp-font-corps);
    font-size: var(--pp-text-sm);
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 2px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.pp-btn-text::after,
a.pp-btn-text::after {
    content: ' →';
    transition: transform 0.3s ease;
    display: inline-block;
}

.pp-btn-text:hover,
a.pp-btn-text:hover {
    color: var(--pp-or-vegetal); /* Hover = or */
}

.pp-btn-text:hover::after,
a.pp-btn-text:hover::after {
    transform: translateX(4px);
}

/* CTA Archives (familles, taxonomies) — gérés dans PSM comme les autres CTA */


/* ===========================================
   G. WOOCOMMERCE — Corrigé design system
   =========================================== */

/* Titre produit grilles boutique —
   Géré par PSM inline (psm-wc-cta-css) pour bypass LiteSpeed.
   Doublon CSS supprimé le 03/04/2026. */

/* Prix */
.price {
    color: var(--pp-or-vegetal) !important;
    font-size: var(--pp-text-base) !important; /* 17px au lieu de 1.3em */
    font-family: var(--pp-font-corps) !important;
    font-weight: 400 !important;
}

/* CTA WooCommerce — TOUS les styles pill gérés dans PSM plugin (papillon-svg-manager.php)
   Source unique : psm_wc_inject_cta_css() → <style id="psm-wc-cta-css">
   Bordure : or #C7C172 → hover rose #D4A0A0 épaissie
   NE PAS ajouter de CSS CTA WooCommerce ici — PSM est l'autorité */

/* Hover icône compte */
.site-header-item .header-account-wrap .header-account-button:hover {
    color: var(--pp-or-vegetal) !important;
}

/* Dropdown panier header */
.header-cart-wrap ul.sub-menu {
    background: var(--pp-blanc) !important;
}

/* ----------------------------------------------------------
   G.2 — Page produit single : image espèce (papillon)

   Cible le <img> du shortcode [espece_image_produit] dans un
   bloc Gutenberg "Code court" auquel on a ajouté la classe
   pp-img-espece via le panneau Avancé > Classe(s) CSS
   additionnelle(s) du bloc.

   Valeurs validées Amaury 22/05/2026 :
   - radius TL/TR/BL/BR Gutenberg : 30 / 10 / 10 / 60
     (CSS shorthand clockwise TL TR BR BL : 30px 10px 60px 10px)
   - max-width : 600px desktop / 400px tab (≤1024px) / 300px mob (≤480px)
   - aspect-ratio 1:1 forcé, object-fit cover (couvre sans déformation)
   ---------------------------------------------------------- */
.pp-img-espece img {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 30px 10px 60px 10px;
}

@media (max-width: 1024px) {
    .pp-img-espece img { max-width: 400px; }
}
@media (max-width: 480px) {
    .pp-img-espece img { max-width: 300px; }
}


/* ===========================================
   H. PILIERS ACCUEIL — Hover overlay (inchangé)
   =========================================== */

.inner_piliers {
    position: relative;
    z-index: 1;
}

.inner_piliers::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--pp-beige-semi); /* Beige Sable semi-transparent */
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.inner_piliers .wp-block-kadence-iconlist {
    opacity: 0;
    transition: opacity 0.4s ease;
    position: relative;
    z-index: 2;
}

.inner_piliers:hover { z-index: 10; }
.inner_piliers:hover::before { opacity: 1; }
.inner_piliers:hover .wp-block-kadence-iconlist { opacity: 1; }

.kadence-column1816_965018-5a,
.kadence-column1816_c3f4c7-c5,
.kadence-column1816_487471-80 {
    position: relative;
    z-index: 1;
}

.kadence-column1816_965018-5a:hover,
.kadence-column1816_c3f4c7-c5:hover,
.kadence-column1816_487471-80:hover {
    z-index: 10;
}

.kt-row-column-wrap {
    overflow: visible !important;
}

@media (max-width: 767px) {
    .inner_piliers::before { opacity: 0.55; }
    .inner_piliers .wp-block-kadence-iconlist { opacity: 1; }
}


/* ===========================================
   I. UTILITAIRES
   =========================================== */

[data-tippy-root] {
    z-index: 9999 !important;
}

/* #titre-entete-papillon supprimé — ancien bloc HTML custom */


/* ===========================================
   NOTES D'INTÉGRATION
   ===========================================

   1. CE FICHIER REMPLACE :
      - Le child theme style.css actuel (tout le contenu après l'en-tête du thème)
      - Le CSS additionnel du Customizer (à vider après intégration)
      → Plus de doublons, plus de conflits de priorité

   2. CLASSES DE BOUTONS :
      Dans Kadence, ajouter la classe CSS appropriée au bloc bouton :
      - pp-btn-primary  → bouton principal (bordure or, hover rose)
      - pp-btn-secondary → bouton secondaire (bordure rose, hover or)
      - pp-btn-text → lien texte avec flèche
      IMPORTANT : text-transform: capitalize (plus de uppercase)

   3. POLICES REQUISES DANS KADENCE CUSTOM FONTS :
      - TangeCarlo (Normal 400) — police fusionnée woff2
      - Cormorant Garamond (Light 300, Regular 400, Italic)
      - Lato (Regular 400, Bold 700)
*/