/* ============================================
   FICHE PRODUIT — PENSEZ SAUVAGE KRAFT
   css/product.css
   ============================================ */


/* Police globale OldNewspaper sur toute la fiche produit */
.ps-single-product,
.ps-single-product p,
.ps-single-product td,
.ps-single-product li,
.ps-single-product span,
.ps-single-product div {
    font-family: 'OldNewspaperTypesALM', Georgia, serif !important;
}


/* Padding intérieur des blocs à fond kraft (Vertus, Récolter,
   "À propos de…"). Utilisé comme enfant de .ps-fiche-texte-long
   et .ps-fiche-technique-wrap. */
.ps-fiche-contenu {
    padding: 1rem;
}


/* ── BLOC 1 : CARTOUCHE PRINCIPAL ────────────
   Flex row : image gauche 45%, infos droite 55%
   ─────────────────────────────────────────── */

.ps-product-cartouche {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: flex-start;
    margin: 1rem 0 1.5rem;
}

.ps-product-image-col {
    flex: 0 0 38%;
    max-width: 38%;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* Boîte maximale carrée — invisible, hauteur dure égale à la largeur */
.ps-product-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-product-infos-col {
    position: relative;
    flex: 0 0 55%;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Badge AB — sceau de certification en haut à droite de la colonne infos */
.ps-product-badge-ab {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(35px, 3.5vw, 50px) !important;
    height: auto !important;
    max-width: none !important;
    pointer-events: none;
}

/* Sur-titre "Graines biologiques de" */
.ps-product-sur-titre {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #2C1810;
    font-size: 1rem;
    margin: 0 0 0.1rem;
    letter-spacing: 0.02em;
}

/* Titre produit */
.ps-product-titre,
.single-product .product_title,
.woocommerce div.product .product_title {
    font-family: 'OldNewspaperTypesALM', Georgia, serif !important;
    color: #D4600A !important;
    font-size: 2rem !important;
    font-weight: 400 !important;
    margin: 0 0 0.3rem !important;
    line-height: 1.15 !important;
}

/* Nom latin */
.ps-product-nom-latin {
    font-family: Georgia, serif;
    color: #6B3A2A;
    font-size: 1rem;
    font-style: italic;
    margin: 0 0 0.5rem;
}

/* Poids du sachet — phrase au-dessus du bouton panier */
.ps-product-poids-sachet {
    font-family: inherit;
    font-weight: 600;
    color: #4C351C;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
}

/* Prix */
.single-product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: 'OldNewspaperTypesALM', Georgia, serif !important;
    color: #D4600A !important;
    font-size: 1.8rem !important;
    font-weight: bold !important;
}

/* Description courte */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-family: Georgia, serif !important;
    color: #2C1810 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0.8rem !important;
}

/* Ligne flex : poids du sachet à gauche, prix à droite */
.ps-poids-prix-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.8rem 0 0.3rem 0;
}

/* Bouton panier + prix — ligne flex */
.ps-panier-ligne {
    display: flex;
    align-items: center;
    margin-top: 0;
    max-width: 100%;
}

/* Bouton ajouter au panier — PNG seau en background, texte kraft centré via flex */
.single-product .single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(180px, 20vw, 240px) !important;
    height: clamp(50px, 5.5vw, 67px) !important;
    padding-right: 25% !important;
    margin: 0 !important;
    background: transparent url('../images/boutonpanier.png') no-repeat center / 100% 100% !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'OldNewspaperTypesALM', Georgia, serif !important;
    font-size: clamp(0.9rem, 1.4vw, 1.15rem) !important;
    font-weight: 400 !important;
    color: #3a2510 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: filter 0.25s ease !important;
}

.single-product .single_add_to_cart_button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
    filter: sepia(0.35) saturate(1.4) hue-rotate(-8deg) brightness(1.05) !important;
}

/* Neutralise la coche ✓ que WC injecte via .added::after
   après ajout AJAX réussi. La confirmation visuelle passe par
   l'akène + minipanier. */
.single_add_to_cart_button.added::after,
.single_add_to_cart_button.added::before {
    content: none !important;
    display: none !important;
}

/* Prix inline à droite du bouton */
.ps-prix-inline {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #2C1810;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Masquer ancien prix */
.woocommerce div.product p.price,
.single-product p.price {
    display: none !important;
}

/* Masquer sélecteur quantité */
.single-product .quantity,
.woocommerce div.product .quantity {
    display: none !important;
}

/* Masquer bandeau de confirmation WooCommerce sur fiche produit uniquement.
   Scopé .single-product pour ne pas masquer les notices d'erreur du checkout
   et autres pages WC (cf. DIAGNOSTIC.md 2026-05-12). */
.single-product .woocommerce-notices-wrapper,
.single-product .woocommerce-message,
.single-product .woocommerce-error,
.single-product .woocommerce-info {
    display: none !important;
}

/* Masquer WP Armour */
.wpa-captcha-container,
.wpa-captcha-wrap,
[class*="wpa-"] {
    display: none !important;
}


/* ── BLOC 3 : PICTOGRAMMES ───────────────────
   Images rondes cliquables, tooltip au survol, centrées
   ─────────────────────────────────────────── */

.ps-pictos-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.8rem 0.5rem;
    justify-content: center;
}

.ps-picto-pastille {
    display: inline-flex;
    position: relative;
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
    transition: transform 0.2s;
}

.ps-picto-pastille:hover {
    transform: scale(1.1);
    background: none;
}

.ps-picto-img {
    width: 65px;
    height: 65px;
    object-fit: contain;
    display: block;
}

/* Tooltip au survol */
.ps-picto-pastille::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(44, 24, 16, 0.88);
    color: #F0D9B5;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 0.78rem;
    white-space: nowrap;
    padding: 3px 8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.ps-picto-pastille:hover::after {
    opacity: 1;
}

/* Masquer labels et valeurs texte */
.ps-picto-label,
.ps-picto-valeur {
    display: none;
}

/* Pictos image — reset des styles hérités */
.ps-picto-image {
    border: none;
    background: none;
    padding: 0;
    border-radius: 0;
    min-width: unset;
    text-align: center;
}


/* ── BLOC 4 : FICHE TECHNIQUE ────────────────
   Tableau deux colonnes label | valeur
   ─────────────────────────────────────────── */

.ps-fiche-technique-wrap {
    position: relative;
    margin: 2rem 0 1.5rem;
    border: 3px solid #4C351C;
    border-image: url('../images/border.png') 24 24 / 20px 20px / 0.1rem 0.2rem round;
    background: rgba(200, 168, 130, 0.25);
    padding: 1.5rem 1rem 1rem;
}

.ps-fiche-technique-titre {
    position: absolute;
    top: -20px;
    left: 1.2rem;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #2C1810;
    font-size: 1.12rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: url('../images/kraft-long.jpg') #C8A882;
    background-size: 6%;
    border: 3px solid #4C351C;
    border-image: url('../images/border.png') 24 24 / 12px 12px / 0 round;
    padding: 5px 18px 7px;
    pointer-events: none;
    display: inline-block;
}

.fiche-technique {
    width: 100%;
    border-collapse: collapse;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 1rem;
    color: #2C1810;
}

.fiche-technique td {
    padding: 0.4rem 0.8rem;
    border-bottom: 1px solid rgba(76, 53, 28, 0.2);
    vertical-align: top;
}

.fiche-technique tr:last-child td {
    border-bottom: none;
}

.fiche-technique .fiche-label {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-weight: bold;
    color: #6B3A2A;
    white-space: nowrap;
    width: 40%;
}

.fiche-technique tr:nth-child(even) {
    background: rgba(200, 168, 130, 0.15);
}


/* ── BLOC 5 : TEXTE LONG ─────────────────────
   Cadre kraft avec titre dynamique à cheval
   ─────────────────────────────────────────── */

.ps-fiche-texte-long {
    position: relative;
    margin: 2rem 0 1.5rem;
    border: 3px solid #4C351C;
    border-image: url('../images/border.png') 24 24 / 20px 20px / 0.1rem 0.2rem round;
    background: rgba(200, 168, 130, 0.25);
    padding: 1.5rem 1rem 1rem;
}

.ps-fiche-texte-long-titre {
    position: absolute;
    top: -20px;
    left: 1.2rem;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #2C1810;
    font-size: 1.12rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: url('../images/kraft-long.jpg') #C8A882;
    background-size: 6%;
    border: 3px solid #4C351C;
    border-image: url('../images/border.png') 24 24 / 12px 12px / 0 round;
    padding: 5px 18px 7px;
    pointer-events: none;
    display: inline-block;
}

.ps-fiche-texte-long .ps-fiche-contenu {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #2C1810;
    font-size: 1rem;
    line-height: 1.75;
}


/* ── BLOC 5-6 : MÉTHODE DE CULTURE + CALENDRIER ─
   Un seul cadre, picto pleine largeur, calendrier dessous
   ─────────────────────────────────────────── */

.ps-methode-culture-wrap {
    position: relative;
    margin: 2rem 0 1.5rem;
    border: 3px solid #4C351C;
    border-image: url('../images/border.png') 24 24 / 20px 20px / 0.1rem 0.2rem round;
    background: rgba(200, 168, 130, 0.25);
    padding: 1.5rem 1rem 1rem;
}

.ps-methode-culture-titre {
    position: absolute;
    top: -20px;
    left: 1.2rem;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #2C1810;
    font-size: 1.12rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: url('../images/kraft-long.jpg') #C8A882;
    background-size: 6%;
    border: 3px solid #4C351C;
    border-image: url('../images/border.png') 24 24 / 12px 12px / 0 round;
    padding: 5px 18px 7px;
    pointer-events: none;
    display: inline-block;
}

/* Bloc d'une méthode de culture (wrapper picto + bouton + texte dépliable) */
.ps-methode-bloc {
    margin-bottom: 1.5rem;
}

.ps-methode-bloc + .ps-methode-bloc {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(76, 53, 28, 0.25);
}

.ps-methode-bloc:last-child {
    margin-bottom: 0;
}

/* Wrapper de la vignette pour positionnement relatif du bouton ⓘ */
.ps-methode-vignette-wrap {
    position: relative;
    margin: 0 auto 0.5rem;
}

/* Bouton info avec icône SVG lunette — pas de fond, pas de bordure, juste l'icône colorée par color (currentColor) */
.ps-methode-info-btn {
    position: absolute;
    bottom: -1.25rem;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: #4C351C;
    opacity: 0.7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.ps-methode-info-btn:hover,
.ps-methode-info-btn:focus {
    background-color: transparent;
    opacity: 1;
    transform: scale(1.15);
    outline: none;
}

.ps-methode-info-btn[aria-expanded="true"] {
    color: #2C1810;
    opacity: 1;
    transform: scale(1.15);
}

/* L'icône SVG à l'intérieur du bouton — currentColor permet la teinte par le bouton parent */
.ps-methode-info-icone {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* Texte du produit (commentaire personnel par produit) */
.ps-methode-texte-produit {
    margin: 1.5rem 0;
    padding: 1rem 1.2rem;
    background: rgba(200, 168, 130, 0.15);
    border-left: 3px solid #4C351C;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #2C1810;
    font-size: 0.95rem;
    line-height: 1.7;
    font-style: italic;
}

/* Picto méthode — pleine largeur */
.ps-methode-picto-grand {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1.5rem;
    object-fit: contain;
}

.ps-methode-texte-depliable {
    display: none;
    margin-top: 1rem;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #2C1810;
    font-size: 0.95rem;
    line-height: 1.7;
    border-top: 1px solid rgba(76, 53, 28, 0.25);
    padding-top: 0.8rem;
}

.ps-methode-texte-depliable.ouvert {
    display: block;
}


/* Conteneur calendrier */
.ps-calendrier {
    margin-top: 1.2rem;
}

.ps-cal-ligne {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.ps-cal-ligne:last-child {
    margin-bottom: 0;
}

.ps-cal-etiquette {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #4C351C;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 70px;
    text-align: right;
}

.ps-cal-mois {
    display: flex;
    flex: 1;
    gap: 2px;
}

.ps-cal-case {
    flex: 1;
    text-align: center;
    padding: 0.35rem 0.1rem;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 0.85rem;
    color: #4C351C;
    background: rgba(200, 168, 130, 0.2);
    border: 1px solid rgba(76, 53, 28, 0.25);
    line-height: 1;
}

.ps-cal-case.ps-cal-semis {
    background: #5a8a3c;
    color: #fff;
    border-color: #3d6128;
    font-weight: bold;
}

.ps-cal-case.ps-cal-recolte {
    background: #D4600A;
    color: #fff;
    border-color: #a8480a;
    font-weight: bold;
}


/* ── BLOC 7 : TAGS CLIQUABLES ────────────────
   Pastilles arrondies inline
   ─────────────────────────────────────────── */

.ps-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ps-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid #4C351C;
    background: rgba(200, 168, 130, 0.5);
    text-decoration: none;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #4C351C;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.ps-tag:hover {
    background: rgba(200, 168, 130, 0.8);
}

.ps-tag-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #7D2B0B;
    letter-spacing: 0.03em;
}

.ps-tag-valeur {
    font-size: 0.95rem;
}


/* ── BLOCS 8-10 : TEXTE + IMAGES ─────────────
   Styles partagés pour les blocs kultur / vertus / récolte
   ─────────────────────────────────────────── */

.ps-methode-picto {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 0 1rem;
}

.ps-methode-texte {
    font-family: Georgia, serif;
    color: #2C1810;
    font-size: 0.95rem;
    line-height: 1.7;
}

.ps-fiche-texte-long .ps-fiche-contenu {
    font-family: Georgia, serif;
    color: #2C1810;
    font-size: 0.95rem;
    line-height: 1.7;
}


/* ── BLOC 11 : VOUS AIMEREZ AUSSI ────────────
   La grille et les vignettes utilisent la structure WooCommerce
   native (ul.products / li.product), stylées globalement dans
   shop.css.

   Spécificités du bloc 11 (par rapport au catalogue) :
   - 6 vignettes générées côté PHP.
   - On affiche autant que la largeur du CONTENEUR le permet
     (pas du viewport — important quand le minipanier apparaît
     et réduit le cadre central).
   - Lot centré horizontalement.
   - Smartphone : 4 vignettes max (2 lignes × 2 colonnes).

   Approche : @container query sur .ps-produits-lies.
   On masque les vignettes au-delà de la capacité de la largeur
   du conteneur. Une vignette catalogue = 220px + 0.5rem×2 marges
   = ~236px. Les seuils sont donc les multiples de 236, arrondis
   un peu au-dessus pour absorber padding/gap.

   Cette approche est immunisée contre les changements de paliers
   dans shop.css : le bloc s'adapte automatiquement à la largeur
   que shop.css lui accorde.
   ─────────────────────────────────────────── */

.ps-produits-lies {
    margin-top: 2rem;
    container-type: inline-size;
    container-name: ps-related;
}

.ps-produits-lies-titre {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #2C1810;
    font-size: 1.4rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 2rem 0 1rem;
    text-align: center;
}

/* Centrage horizontal du lot (par défaut shop.css est flex-start). */
.ps-produits-lies ul.products {
    justify-content: center !important;
}

/* Masquage progressif selon la largeur du CONTENEUR.
   Seuils calculés à partir de la taille d'une vignette catalogue
   (236px = 220 + marges) :
   - <590px (env. 2 vignettes max) : masquer dès la 3e
   - <826px (env. 3 vignettes max) : masquer dès la 4e
   - <1062px (env. 4 vignettes max) : masquer dès la 5e
   - <1298px (env. 5 vignettes max) : masquer dès la 6e
   - ≥1298px : tout afficher (6 vignettes).
   Les seuils sont volontairement un peu au-dessus de N×236 pour
   absorber les paddings du <ul.products> (16px de chaque côté
   d'après shop.css ligne 56) sans coupure visuelle. */
@container ps-related (max-width: 1297px) {
    .ps-produits-lies ul.products li.product:nth-child(n+6) {
        display: none !important;
    }
}
@container ps-related (max-width: 1061px) {
    .ps-produits-lies ul.products li.product:nth-child(n+5) {
        display: none !important;
    }
}
@container ps-related (max-width: 825px) {
    .ps-produits-lies ul.products li.product:nth-child(n+4) {
        display: none !important;
    }
}
@container ps-related (max-width: 589px) {
    .ps-produits-lies ul.products li.product:nth-child(n+3) {
        display: none !important;
    }
}

/* Smartphone (viewport ≤599px) : exception. shop.css fait passer
   les vignettes en 50% de largeur (2 colonnes), donc on autorise
   4 vignettes sur 2 lignes. On utilise une media query (viewport)
   ici parce que c'est shop.css qui change de mode flex, pas
   nous — cohérence garantie. */
@media (max-width: 599px) {
    .ps-produits-lies ul.products li.product:nth-child(-n+4) {
        display: flex !important;
    }
    .ps-produits-lies ul.products li.product:nth-child(n+5) {
        display: none !important;
    }
}


/* ── GALERIE FICHE PRODUIT ───────────────────
   Slideshow avec flèches prev/next
   ─────────────────────────────────────────── */

/* Wrapper galerie — remplit la boîte carrée parente, centre la slide active */
.ps-galerie-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Slides cachées par défaut */
.ps-galerie-slide {
    display: none;
}

.ps-galerie-slide.active {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-galerie-img {
    display: block;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    border: 3px solid #4C351C;
    border-image: url('../images/border.png') 24 24 / 20px 20px / 0.1rem 0.2rem round;
    box-sizing: border-box;
}

/* Flèches navigation galerie — SVG kraft fleche-galerie.svg, retourné pour prev */
.ps-galerie-prev,
.ps-galerie-next {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    background-color: transparent;
    background-image: url('../images/fleche-galerie.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.85;
}

.ps-galerie-prev:hover,
.ps-galerie-prev:focus,
.ps-galerie-prev:active,
.ps-galerie-next:hover,
.ps-galerie-next:focus,
.ps-galerie-next:active {
    background-color: transparent;
    outline: none;
    opacity: 1;
}

/* Flèche suivante — à cheval sur la bordure droite */
.ps-galerie-next {
    right: -20px;
    transform: translateY(-50%);
}

.ps-galerie-next:hover {
    transform: translateY(-50%) scale(1.15);
}

/* Flèche précédente — à cheval sur la bordure gauche, SVG retourné */
.ps-galerie-prev {
    left: -20px;
    transform: translateY(-50%) scaleX(-1);
}

.ps-galerie-prev:hover {
    transform: translateY(-50%) scaleX(-1) scale(1.15);
}


/* ── RESPONSIVE ──────────────────────────────
   ─────────────────────────────────────────── */

@media (max-width: 900px) {
    .ps-product-cartouche {
        flex-direction: column;
    }
    .ps-product-image-col,
    .ps-product-infos-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .ps-cal-case {
        font-size: 0.7rem;
        padding: 0.25rem 0;
    }
    .ps-cal-etiquette {
        min-width: 55px;
        font-size: 0.8rem;
    }
}