/*
Theme Name: Theme Archipicture
Theme URI: https://archipicture.fr/
Description: Thème enfant basé sur Hello Elementor, personnalisé par Archipicture
Author: Archipicture
Author URI: https://archipicture.fr/
Template: hello-elementor
Version: 2.0.0
Text Domain: theme-archipicture
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
 * TABLE DES MATIÈRES
 * ══════════════════════════════════════════════════════════════════
 *  0.  BASE               Typographie globale (gras, polices)
 *  1.  HEADER             Header transparent + effet scroll
 *  2.  PAIEMENT MONETICO  Page de transition redirect paiement
 *  3.  LIENS & GRAS       Surlignement dégradé + correction strong
 *  4.  PRODUITS INDISPO   Classe .pas-encore-dispo (pointer-events)
 *  5.  OUVERTURE BOUTIQUE Message "Ouverture le..."
 *  6.  WP GRID BUILDER    Titre de facette (.wpgb-facet-title)
 * ══════════════════════════════════════════════════════════════════
 *
 * Note : Les styles des widgets Elementor personnalisés (sucrosité,
 * accords mets/vins, titre produit, timeline checkout) sont dans
 * /widgets/widgets.css — chargé uniquement sur les pages qui en ont besoin.
 *
 * La police Google Fonts (Fira Sans Condensed) est chargée via
 * wp_enqueue_style dans functions.php § 2. Pas d'@import ici.
 */

/* ══════════════════════════════════════════════════════════════════
   0. BASE — TYPOGRAPHIE
   ══════════════════════════════════════════════════════════════════ */

/* Force le gras sur strong/b avec la police du site */
strong,
b {
    font-weight: 700 !important;
    font-family: 'Fira Sans Condensed', sans-serif;
}

/* ══════════════════════════════════════════════════════════════════
   1. HEADER TRANSPARENT AU SCROLL
   La classe .header-transparent est appliquée manuellement sur le
   conteneur header dans Elementor. Le JS (assets/js/header-scroll.js)
   ajoute .header-scrolled après 50px de scroll.
   ══════════════════════════════════════════════════════════════════ */

/* État initial : transparent et fixe en haut de page */
.header-transparent {
    background-color: transparent !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: background-color 0.4s ease;
}

/* État scrollé : fond sombre #1D1D1B (couleur brand Jaegler) */
.header-transparent.header-scrolled {
    background-color: #1D1D1B !important;
}

/* ══════════════════════════════════════════════════════════════════
   2. PAGE DE TRANSITION PAIEMENT (MONETICO)
   WooCommerce affiche une page intermédiaire avant la redirection
   vers Monetico. Ce CSS masque tout le contenu natif et affiche
   uniquement un message en blanc centré, style H2.
   ══════════════════════════════════════════════════════════════════ */

/* Masque tout le contenu natif */
body.woocommerce-order-pay * {
    color: transparent !important;
    font-size: 0 !important;
    opacity: 0 !important;
    text-shadow: none !important;
}

/* Affiche uniquement le message de redirection */
body.woocommerce-order-pay .woocommerce::before {
    content: "Vous allez être redirigé vers la page de paiement...";
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    font-family: "ariana-pro", "Helvetica", "Arial", sans-serif !important;
    font-size: clamp(2rem, 5vw, 3rem) !important;
    font-weight: 800 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    padding-top: 25vh !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════
   3. LIENS & GRAS
   Surlignement en dégradé doré sur les liens dans les paragraphes.
   Variante sombre pour les sections sur fond foncé (classe .texte-blanc).
   ══════════════════════════════════════════════════════════════════ */

/* Surlignement dégradé doré par défaut */
p a {
    color: var(--e-global-color-text) !important;
    text-decoration: none !important;
    background-image: linear-gradient(
        to right,
        rgba(207, 172, 119, 0.5),
        rgba(227, 149, 71, 0.5)
    );
    background-repeat: no-repeat;
    background-size: 100% 0.4em;
    background-position: 0 95%;
    transition: background-size 0.3s ease;
}

p a:hover {
    background-size: 100% 88%;
    color: var(--e-global-color-text) !important;
}

/* Variante sur fond sombre — ajouter la classe .texte-blanc sur le conteneur Elementor */
.texte-blanc p a,
.texte-blanc p a:hover {
    color: white !important;
    background-image: linear-gradient(
        to right,
        rgba(162, 86, 81, 0.8),
        rgba(162, 86, 91, 0.95)
    );
}

/* Correction du gras dans les paragraphes */
p strong {
    font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════
   4. PRODUITS INDISPONIBLES (.pas-encore-dispo)
   La classe est ajoutée via functions.php § 6 si le champ ACF
   "pas_encore_dispo" est coché sur le produit.
   Désactive visuellement les liens image et les boutons panier.
   ══════════════════════════════════════════════════════════════════ */

.pas-encore-dispo .elementor-widget-image a {
    pointer-events: none;
    cursor: default;
}

.pas-encore-dispo .elementor-widget-button a,
.pas-encore-dispo .elementor-widget-button .elementor-button,
.pas-encore-dispo .single_add_to_cart_button {
    pointer-events: none;
    cursor: default;
    opacity: 0.7;
}

button.btn-bientot-dispo,
button.btn-bientot-dispo:disabled,
button.btn-bientot-dispo:hover {
    background-color: #808080 !important;
    background-image: none !important;
    border-color: #808080 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   5. OUVERTURE BOUTIQUE
   Message affiché sous le titre produit avant l'ouverture.
   Logique dans functions.php § 5.
   ══════════════════════════════════════════════════════════════════ */

.shop-opening-notice {
    font-style: italic;
    opacity: 0.8;
    margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════════════
   6. WP GRID BUILDER — TITRE DE FACETTE
   Force l'affichage block du <span> titre (rendu en inline par défaut).
   Logique dans functions.php § 7.
   ══════════════════════════════════════════════════════════════════ */

.wpgb-facet-title {
    display: block;
    margin-bottom: 20px;
}