/** * Products Styles * * Styles pour les produits WooCommerce en boucle et les archives produits. * * @package UneAutreVoix * @author Horizon Signature * @copyright 2026 Horizon Signature * @license Proprietary * @version 0.1.0 * * @changelog * 0.1.0 — Passage en preprod * 0.0.86 - .uav-cart-modal-shipping-line : mise en forme cohérente avec les lignes du tableau panier * - Conteneur : flex space-between + border-top séparateur + padding 0.6vh 0 * - Label : italique, color-text-light (comme other-variant) * - Valeur : font-cta-family, weight 600, color-text (comme other-price) * - Mobile : font-size → var(--text-size-s) (harmonisation ≥14px) * 0.0.85 - .product-hero-title em : padding-left 0.3em + margin-left -0.3em — fix Safari compositing layer qui clippe * l'overhang italic (bearing négatif du 1er glyphe hors des bounds de la layer). margin-left compense * l'alignement. NE PAS SUPPRIMER. * 0.0.84 - .product-loop-author : width max-content + align-self flex-end * - Corrige l'icône collée à gauche quand le texte auteur passe sur deux lignes * 0.0.83 - Suppression règle .author-section mobile (couverte par sections-responsive.css réactivé) * 0.0.81 - Violations opacity résiduelles : .uav-ebook-modal-hint, .product-avis-vide, .uav-avis-form .uav-form-hint * - padding: 14px 28px mobile → var(--spacing-md) calc(var(--spacing-md) * 2) * 0.0.80 - [4a] Suppression violations opacity sur contenu lisible * - .wmc-currency a desktop + mobile : opacity 0.5 → color var(--color-text-light), transition opacity → color * - .wmc-active a desktop + mobile : opacity 1 → color var(--color-text) * - .uav-brevo-form input::placeholder desktop + mobile : opacity 0.45 supprimée, color → var(--color-text-light) * - .uav-cart-modal-added-variant : opacity 0.7 supprimée, color → var(--color-text-light) * - .uav-cart-modal-others-title : opacity 0.6 supprimée, color → var(--color-text-light) * - .uav-cart-modal-other-variant : opacity 0.6 supprimée, color → var(--color-text-light) * - .uav-cart-modal-other-qty : opacity 0.5 supprimée, color → var(--color-text-light) * - .uav-cart-modal-shipping : opacity 0.55 supprimée, color → var(--color-text-light) * [4b] Couleurs WooCommerce success/danger → variables CSS * - .uav-form-message.success : #28a745 → var(--color-validation), rgba → color-mix * - .uav-form-message.error : #dc3545 → var(--color-error), rgba → color-mix * [4c] Unités px hardcodées mobile → variables CSS * - .product-hero-main-image max-width: 512px → min(512px, 90vw) * - .uav-price-display font-size: 32px → var(--text-size-2xl) * - .uav-add-to-cart-btn padding: 14px → calc((var(--spacing-xs) + var(--spacing-sm)) / 2) * - .uav-format-label font-size: 14px → var(--text-size-s) * - .uav-variation-description font-size: 14px → var(--text-size-s) * 0.0.79 - Corrections violations opacity (règle absolue : opacity interdit sur contenu lisible) * - .product-avis-count : opacity 0.7 → color var(--color-text-light) * - .uav-avis-form input/textarea focus : suppression opacity 0.8 + transition opacity * 0.0.78 - Sélecteur devise Curcy shortcode : CHF | séparateur | EUR * - Séparateur vertical ::before (order: 2) : 0.2vh/2px × align-self stretch * - Labels : opacity 0.5 (inactif) / 1 (actif), font-cta-*, font-weight 600 * - Reset background/color Curcy admin sur .wmc-currency * - flex-direction row, justify-content flex-end, margin-left auto * - Desktop (vh) + Mobile (px) * 0.0.77 - Mobile : font-size ≥ 14px (var(--text-size-s)) sur tous les sélecteurs de modal * - .uav-variation-description, .uav-cart-modal-*, .uav-ebook-modal-hint * - gap: 4vh → var(--spacing-lg) dans .uav-avis-track-wrapper (mobile) * 0.0.76 - Phase 1 refacto : valeurs hardcodées → variables CSS * - transitions 0.2s ease → var(--transition-fast) var(--ease-standard) * - transitions 0.3s ease → var(--transition-normal) var(--ease-standard) * - transitions 0.6s cubic-bezier smooth → var(--transition-smooth) var(--ease-smooth) * - transitions 0.4s cubic-bezier smooth → 0.4s var(--ease-smooth) * - border 0.5vh solid → var(--border-thick) solid (border-width uniquement) * - gap 0.5vh → var(--spacing-2xs) * - #fff → var(--color-white) * 0.0.75 - .archive-products-row élément unique : pas de zigzag + centrage vertical * 0.0.74 - .product-avis-section mobile : padding horizontal 0 (carousel bord-à-bord) * - .product-avis-col-intro mobile : padding horizontal var(--spacing-md) reporté * - .uav-avis-carousel-track : gap 0 (pas d'espace entre slides à la transition) * - .uav-avis-carousel-slide : padding 0 var(--spacing-md) (carte ne touche pas les bords) * 0.0.73 - Cartes avis mobile : vh → variables CSS (border 2px, padding 24px, font-size, gap) * - Carousel avis mobile : wrapper/track/slide/nav/dot CSS * 0.0.72 - .uav-commander-link-btn mobile : align-self center + icône rotate(90deg) (arrow-left → arrow-up) * 0.0.71 - sections-responsive.css désormais chargé sur pages produit (condition is_singular retirée) * - Suppression doublon .column-model-titres-texte-cta (couvert par sections-responsive.css) * - Maintien h2/h3 width 100% (spécifique page produit, absent de sections-responsive.css) * 0.0.70 - Formulaire newsletter + séparateur mobile : copie des styles desktop * - .uav-brevo-form-name en colonne, inputs, placeholders, submit, feedback * 0.0.69 - .product-details-col-extrait mobile : overlap vertical (image 75%, margin-bottom -40%) * - .extrait-contenu : width 100%, padding-top calc(40% + spacing-md), gap spacing-lg * - .uav-audio-player : 44px, flex, gap xs * - .uav-play-btn + SVGs + waveform + timer : copie des styles desktop pour mobile * - .uav-brevo-form-name : flex-direction column * 0.0.68 - .product-details-columns mobile : gap var(--spacing-lg) * - .product-details-col-details mobile : flex column, gap var(--spacing-md) * - .product-details-description p+p mobile : margin-top var(--spacing-sm) * - .product-details-description h3 mobile : margin-bottom var(--spacing-xs) * 0.0.67 - .uav-ebook-modal-buttons mobile : mêmes réglages que modale panier * - gap var(--spacing-xs), flex 1/1, padding var(--spacing-xs), SVG confirm masqué * 0.0.66 - .uav-cart-modal-buttons mobile : gap vh → var(--spacing-xs), flex 50/50 * - .uav-cart-modal-continue + .uav-cart-modal-view : padding → var(--spacing-xs) var(--spacing-md) * - .uav-cart-modal-view mobile : icône SVG masquée (display none) * - .uav-cart-modal-view : box-shadow 0.3vh → 2px * - .uav-cart-modal-continue : text-underline-offset 0.3vh → 3px * 0.0.65 - .produit-infos-achat mobile : display flex column + gap var(--spacing-md) * - .uav-add-to-cart-wrapper mobile : gap var(--spacing-sm) → var(--spacing-md) * 0.0.64 - .infos-paiement mobile : flex column centré, gap xs, font-small-text-* * - .uav-variation-card.is-selected : box-shadow 2px → 3px (contraste sélection plus visible) * - .infos-paiement-securise : flex row, gap xs * - .infos-paiement-icone : 1em * - .infos-paiement-logos : flex centré, gap sm * - Hauteurs logos px : visa 15px, mastercard/apple-pay 20px, twint 18px * 0.0.63 - .produit-infos-contenus mobile : gap var(--spacing-md) → var(--spacing-lg) * 0.0.62 - .produit-infos-contenus mobile : display flex column + gap var(--spacing-md) * 0.0.61 - .uav-variation-name mobile : margin-bottom 0 → var(--spacing-2xs) (nom → description) * - .uav-variation-description mobile : margin-bottom 4px → var(--spacing-xs) (description → prix) * 0.0.60 - .uav-variation-icon mobile : 12px → 1em (suit la taille du texte parent, 18px) * 0.0.59 - .uav-variation-name + .uav-variation-price mobile : var(--font-text-size)/var(--font-cta-size) → var(--text-size-l) (18px) * 0.0.58 - Add to cart mobile : correction tailles illisibles (minimum 14px) * - .uav-format-label : var(--font-small-text-accent-size) = 12px → 14px * - .uav-variation-description : calc(font-text * 0.75) = 12px → 14px * - .uav-currency-label : calc(font-cta * 0.9) = ~14.4px → 14px propre * 0.0.57 - Add to cart mobile complet : * - .uav-add-to-cart-wrapper : width 100% (suppression max-width 50vh) * - .uav-price-display : 4vh → 28px * - Bouton : box-shadow 0.4vh → 2px, padding 1.8vh → 14px * - .uav-commander-link-btn : padding 14px 28px * - .uav-format-label : margin-bottom 1.5vh → 8px * - .uav-variations-selector : gap spacing-lg → spacing-md * - .uav-variation-card : padding 1.5vh → 12px, border-radius 0.4vh → 4px, box-shadows px * - .uav-variation-description : margin-bottom 0.5vh → 4px * - .uav-variation-icon : 1.5vh → 12px * - Toggle devise : 3.6vh×1.8vh → 36px×18px, curseur 1.26vh → 12px, offsets px * 0.0.56 - .product-single-details mobile : flex column gap 2xs * - .product-single-details-row : flex wrap + gap sm * - .product-single-detail-item : flex, gap xs, font-small-text-italic-accent-* * - .product-single-detail-icon : 1em, fill currentColor * - .product-single-detail-item a : color inherit, no decoration * 0.0.55 - .product-hero-columns mobile : gap var(--spacing-xl) → var(--spacing-lg) * 0.0.54 - Image hero mobile : width 90% → 75% * 0.0.53 - .product-hero-infos-produit mobile : display flex column + gap var(--spacing-md) * - .produit-infos-texte mobile : gap var(--spacing-md) → var(--spacing-sm) * 0.0.52 - .produit-infos-texte mobile : display flex column + gap var(--spacing-md) * 0.0.51 - .product-single-author mobile : font-size text-size-s → text-size-l * 0.0.50 - Mobile : .product-hero-color-* définit --product-color hors media desktop * - .product-single-author mobile : flex start, text-size-l, font-small-text-italic, uppercase, text-decoration none * - .product-single-author-icon : 1em, fill --product-color * 0.0.49 - .product-hero-columns mobile : display flex column + gap var(--spacing-xl) (= 8vh desktop) * - .product-hero-columns desktop : gap 8vh → var(--spacing-xl) * 0.0.48 - Fond coloré mobile : width 100% → 90% aligné gauche (left 0) * 0.0.47 - Fond coloré mobile : bottom 0 → bottom 20% (relatif à la hauteur du wrapper image) * 0.0.46 - Image hero mobile : width 90%, max-width 512px, centrée (margin auto), height auto * 0.0.45 - Hero produit mobile : overrides padding déplacés dans components-responsive.css (charge après products.css) * 0.0.44 - Page produit mobile : .product-hero-image-wrapper position relative * - .product-hero-main-image z-index 1 (au-dessus du fond coloré) * - .product-hero-color-background : position absolute, height 150px, z-index 0, bottom 0 * - Couleurs fond coloré (.product-hero-bg-*) définies hors media desktop * 0.0.43 - Déplacement padding-left: 0 hero section : inline → CSS * - html.uav-horizontal-enabled .product-hero-area { padding-left: 0 } * - Suppression style="padding-left: 0;" inline dans single-product.php * 0.0.42 - Harmonisation H2 page produit : h1-standard via .single-product .site-main h2:not(.footer-title) * - Suppression classe h2-large sur les H2 de single-product.php * 0.0.41 - Suppression padding-left 0 sur .product-recommandations-section (conservé sur .product-voyage-section uniquement) * 0.0.40 - Section "Poursuivez le voyage" : width 72.5vh sur .h2-large + padding-left 0 (bord-à-bord gauche) * 0.0.39 - Modale panier : .uav-cart-modal-shipping (mention livraison, centré, opacité 0.55) * 0.0.38 - Étoiles moyenne : rendu par étoile individuelle (.product-avis-etoile + -vide + -pleine) * - --star-fill sur chaque étoile → clip précis sur la fraction, sans erreur de largeur de glyphe * - Suppression ancienne approche globale (.product-avis-etoiles-vides/.pleines) * 0.0.37 - Animation de sortie modales avis, panier et ebook (is-closing + keyframes uav-modal-disappear/backdrop-out) * - Fond blanc sur modales panier et ebook (color-white au lieu de color-background) * - Bouton "Revenir au livre" : uav-avis-modal-close-wrap (caché par défaut, visible en is-submitted) * - Section avis : padding-left 0 bord-à-bord, hauteur 95vh, gap 4vh colonnes et listes * - Cartes avis : fond color-background, bordure 0.5vh couleur produit, police heading 2vh italic * - Contenu avis : line-height 1.8em, margin-bottom 2.5vh * - Étoiles : fond color-background, gap liste 4vh, espacement inter-wrapper corrigé (2.5vh) * - Nom auteur avis 2vh, métier sans opacité (couleur texte pleine) * 0.0.36 - Modale avis : titre avec variables H3, bouton submit identique à uav-cart-modal-view * - Fond modale blanc (color-white), étoiles en couleur produit * 0.0.35 - Modale avis : CSS aligné sur le snippet (font-heading sur titre, uav-form-group, boutons cancel/submit) * 0.0.34 - Centrage vertical section avis : align-items stretch sur la grille, justify-content center sur col-intro * 0.0.33 - Section Avis Lecteurs : cartes, scroll infini, note moyenne, modale formulaire * 0.0.32 - Audio Player revue littéraire : .revue-litteraire (flex column gap 2vh), .uav-audio-player, * .uav-play-btn (bouton rond --player-color), .uav-waveform, .uav-wave-gray/.uav-wave-colored, * .uav-wave-progress, .uav-time (font-text-*) * 0.0.31 - .product-details-col-extrait : layout row, image (45%, margin-right -22.5%, z-index 1) + contenu (75%, fond blanc, padding 6vh sauf gauche 20vh) * 0.0.30 - Animations d'entrée page produit (desktop) : fade-in + slide organique * - Translation 6vh (ample), fond coloré ease-expo 1s (sans rebond), reste spring 0.9s * - Logique "rideau" : fond + h1 démarrent ensemble (0s), image (0.15s), cascade droite serrée * - Gauche : .product-hero-color-background (0s/1s/ease-expo), .product-hero-main-image (0.15s/0.9s/spring) * - Droite : h1 (0s), .product-single-author (0.2s), .product-hero-description-intro (0.3s), * .product-single-details (0.4s), .produit-infos-achat (0.55s), sections (0.75s) * - fill-mode backwards → état from appliqué dès le chargement, zéro CLS * 0.0.29 - .uav-ebook-modal-confirm : display inline-flex + align-items center + gap 0.6em (centrage icône, comme uav-cart-modal-view) * 0.0.28 - Section Détails / Extrait : grid 40fr/60fr, gap 8vh, align-items start * - .product-details-col-details : flex column, gap 2vh * - .product-details-description : font-text-*, line-height comfortable, p + p margin-top 1.5vh * 0.0.27 - .product-single-detail-icon + .infos-paiement-icone : display block (fix centrage SVG inline) * 0.0.26 - Renommage .product-single-payment → .infos-paiement (+ classes enfant) * - .infos-paiement-securise, .infos-paiement-icone, .infos-paiement-logos * - Typo --font-small-text-* appliquée directement sur .infos-paiement (héritage) * 0.0.25 - .product-single-payment .product-single-detail-item : override complet vers --font-small-text-* * - Reset font-weight/style/line-height (annule l'italic-accent du detail-item parent) * 0.0.24 - Logos paiement : hauteurs individuelles par ID (#payment-logo-*) * - Visa 1.5vh, Mastercard 2.5vh, Apple Pay 2.5vh, Twint 2vh * - Gap logos : --spacing-xs → --spacing-sm (2vh) * 0.0.23 - .product-single-payment : align-items center (centrage des deux lignes) * - .product-single-payment .product-single-detail-text : font-size small-text * - .product-single-payment-logos : justify-content center * 0.0.22 - .product-hero-columns : align-items end (colonnes alignées en bas) * 0.0.21 - .uav-add-to-cart-btn : display flex + align-items center + gap 1em (centrage icône) * 0.0.20 - Bloc paiement sécurisé : .product-single-payment + .product-single-payment-logos * - Logos 2.5vh hauteur, gap --spacing-xs * 0.0.19 - Détails produit single : .product-single-details, .product-single-details-row, .product-single-detail-item * - Typo --font-small-text-italic-accent-*, icônes 1em currentColor, liens sans soulignement * 0.0.18 - .product-hero-infos-produit : gap 2vh → var(--spacing-lg) (4vh) * 0.0.17 - .product-single-author : renommé depuis product-loop-author * - justify-content flex-start, font-style normal, text-transform uppercase, font-size 1.75vh * - .product-single-author-icon : 1em * 0.0.16 - Standardisation variables CSS dans le bloc add-to-cart et modales * - .uav-add-to-cart-wrapper : flex column gap --spacing-sm, max-width 50vh * - .uav-format-section : conteneur vertical sans gap * - .uav-variations-selector : gap --spacing-lg (4vh, était 5vh), suppression margin-bottom * - .uav-format-label : font-size → --font-small-text-size, line-height → --line-height-tight * - Line-heights hard-codés → --line-height-tight / --line-height-medium / --line-height-comfortable * - Gaps hard-codés → --spacing-xs / --spacing-2xs dans modales * - Padding modales : 4vh → --spacing-lg, margin-bottom 2vh → --spacing-sm * - .uav-price-row : suppression margin-bottom (géré par gap wrapper) * 0.0.15 - Add to cart : colonnes texte/achat + description intro + bloc UAV_Product_Add_To_Cart * - .product-hero-color-* : classes couleur --product-color sur section * - .produit-infos-texte / .produit-infos-achat : flex 1 * - .product-hero-description-intro : variables --font-text-* * - .uav-add-to-cart-wrapper et sous-composants (variations, prix, devise, bouton) * - Modales globales (hors media query) : ebook + confirmation panier * 0.0.14 - Single product : colonne infos + titre formaté * - .product-hero-infos-produit : flex column, gap 2vh * - .product-hero-title em : italic (dernier mot du titre) * - .produit-infos-contenus : flex row, gap 8vh * 0.0.13 - Single product : product-hero-area + image + fond coloré * - .product-hero-columns : grid 1fr/2fr, gap 8vh * - .product-hero-image-wrapper : position relative * - .product-hero-main-image : 95% largeur, contain, alignée droite, z-index 1 * - .product-hero-color-background : absolu, 100% largeur, 22.5vh, bottom 10vh * - .product-hero-bg-* : couleurs produit (green/blue/pink/gold/text) * 0.0.12 - Padding vertical catégorie : --spacing-2xs desktop, --spacing-xs mobile * 0.0.11 - Zigzag et hover sur archive-products-row * - .product-loop-link : transition transform * - nth-child(odd/even of .product-loop-link) : translateY ±var(--spacing-lg) * - Hover : -1vh supplémentaire dans la direction du zigzag * 0.0.10 - Séparateur et formats * - .product-loop-separator : 0.2vh, --product-color, flex-shrink 0 * - .product-loop-formats : small-text, text-align center * - .product-loop-formats-name : font-weight 500 * 0.0.9 - Icône auteur et graisse texte * - .product-loop-author-icon : fill var(--product-color) * - .product-loop-author-text : font-weight 500 * 0.0.8 - CSS variations images (adapté du shortcode [product_variations_images]) * - .product-variations-images count-1 : single-image 80% centré, translateY(-2.5vh) * - .product-variations-images count-2 : flex align-end, main 80% / secondary 65% superposé * - Styles dans la feuille de styles (au lieu d'inline dans le shortcode) * 0.0.7 - Inner shadow sur .product-loop-images : inset 0.2vh 0.2vh 1.6vh rgba(0,0,0,0.125) * 0.0.6 - Zone images : Contenu-images, Bandeau, Categorie * - .product-loop-images : position relative * - .product-loop-images-bandeau : absolu, centré verticalement, pleine largeur, 10vh * - .product-loop-images-category : absolu bas-gauche, fond color-text, padding 0.25vh 2vh * - Typographie categorie : small text accent * 0.0.5 - Reset structure minimale * 0.0.4 - CSS complet (supprimé) * 0.0.3 - CSS variations images (supprimé) * 0.0.2 - Largeur conteneur archive-products-row * 0.0.1 - Version initiale */ @media (min-width: 1201px) { /* Rangée */ .archive-products-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: var(--spacing-xl); padding: var(--spacing-xl) 0; } /* Carte produit */ .archive-products-row .product-loop-item { flex: 0 0 auto; width: 33.33vh; display: flex; flex-direction: column; border: 1vh solid var(--color-background); box-shadow: 0.2vh 0.2vh 1.6vh rgba(0, 0, 0, 0.125); } .product-loop-link { display: block; text-decoration: none; color: inherit; transition: transform var(--transition-normal) var(--ease-standard); } /* Zigzag */ .archive-products-row > .product-loop-link:nth-child(odd of .product-loop-link) { transform: translateY(calc(-1 * var(--spacing-lg))); } .archive-products-row > .product-loop-link:nth-child(even of .product-loop-link) { transform: translateY(var(--spacing-lg)); } /* Hover */ .archive-products-row > .product-loop-link:nth-child(odd of .product-loop-link):hover { transform: translateY(calc(-1 * var(--spacing-lg) - 1vh)); } .archive-products-row > .product-loop-link:nth-child(even of .product-loop-link):hover { transform: translateY(calc(var(--spacing-lg) - 1vh)); } /* Élément unique : pas de zigzag + centrage vertical */ .archive-products-row > .product-loop-link:nth-child(1 of .product-loop-link):nth-last-child(1 of .product-loop-link) { transform: none; } .archive-products-row > .product-loop-link:nth-child(1 of .product-loop-link):nth-last-child(1 of .product-loop-link):hover { transform: translateY(-1vh); } .archive-products-row:has(> .product-loop-link:nth-child(1 of .product-loop-link):nth-last-child(1 of .product-loop-link)) { align-items: center; } .product-loop-texts { display: flex; flex-direction: column; gap: 1vh; padding: 2vh 2vh 1vh 2vh; } .product-loop-excerpt { font-family: var(--font-small-text-family); font-size: var(--font-small-text-size); font-weight: var(--font-small-text-weight); line-height: var(--line-height-comfortable); color: var(--color-text); } .product-loop-author { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-xs); width: max-content; align-self: flex-end; font-family: var(--font-small-text-italic-family); font-size: var(--font-small-text-italic-size); font-weight: var(--font-small-text-italic-weight); font-style: var(--font-small-text-italic-style); line-height: var(--font-small-text-italic-line-height); color: var(--color-text); } .product-loop-author-icon { width: 1.5vh; height: 1.5vh; flex-shrink: 0; fill: var(--product-color); } .product-loop-author-text { font-weight: 500; } /* Auteur page produit single */ .product-single-author { display: flex; align-items: center; justify-content: flex-start; gap: var(--spacing-xs); font-family: var(--font-small-text-italic-family); font-size: 1.75vh; font-weight: var(--font-small-text-italic-weight); font-style: normal; line-height: var(--font-small-text-italic-line-height); text-transform: uppercase; color: var(--color-text); } .product-single-author-icon { width: 1em; height: 1em; flex-shrink: 0; fill: var(--product-color); } .product-single-author-text { font-weight: 500; } /* Détails produit single (date, catégorie, pages, mention) */ .product-single-details { display: flex; flex-direction: column; gap: var(--spacing-2xs); } .product-single-details-row { display: flex; align-items: center; gap: var(--spacing-sm); } .product-single-detail-item { display: flex; align-items: center; gap: var(--spacing-xs); font-family: var(--font-small-text-italic-accent-family); font-size: var(--font-small-text-italic-accent-size); font-weight: var(--font-small-text-italic-accent-weight); font-style: var(--font-small-text-italic-accent-style); line-height: var(--font-small-text-italic-accent-line-height); color: var(--color-text); } .product-single-detail-icon { display: block; width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; } .product-single-detail-item a { color: inherit; text-decoration: none; } .product-single-detail-item a:hover { text-decoration: underline; } /* Infos paiement */ .infos-paiement { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); font-size: var(--font-small-text-size); font-weight: var(--font-small-text-weight); font-style: var(--font-small-text-style); line-height: var(--font-small-text-line-height); } .infos-paiement-securise { display: flex; align-items: center; gap: var(--spacing-xs); } .infos-paiement-icone { display: block; width: 1em; height: 1em; flex-shrink: 0; } .infos-paiement-logos { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); } .infos-paiement-logos img { height: 2.5vh; width: auto; } #payment-logo-visa img { height: 1.5vh; } #payment-logo-mastercard img { height: 2.5vh; } #payment-logo-apple-pay img { height: 2.5vh; } #payment-logo-twint img { height: 2vh; } /* Séparateur */ .product-loop-separator { width: 100%; height: 0.2vh; background-color: var(--product-color); flex-shrink: 0; } /* Formats */ .product-loop-formats { font-family: var(--font-small-text-family); font-size: var(--font-small-text-size); font-weight: var(--font-small-text-weight); line-height: var(--line-height-comfortable); color: var(--color-text); text-align: center; } .product-loop-formats-name { font-weight: 500; } /* ========================================================= Zone images ========================================================= */ .product-loop-images { position: relative; box-shadow: inset 0.2vh 0.2vh 1.6vh rgba(0, 0, 0, 0.125); } /* ========================================================= Contenu images — layout variations (adapté du shortcode) ========================================================= */ .product-loop-images-content { margin-top: -2vh; position: relative; z-index: 2; } .product-variations-images { position: relative; width: 100%; } .product-variations-images .variation-image img { width: 100%; height: auto; display: block; } /* 1 image : 80% centré, décalé vers le haut */ .product-variations-images.count-1 .single-image { width: 80%; margin: 0 auto; transform: translateY(-2.5vh); } /* 2 images : flex alignées sur le bas */ .product-variations-images.count-2 { display: flex; align-items: flex-end; justify-content: space-between; } .product-variations-images.count-2 .main-variation { width: 80%; z-index: 1; transform: translateY(-2.5vh); } .product-variations-images.count-2 .secondary-variation { width: 65%; z-index: 2; margin-left: -45%; transform: translateY(1vh); } /* Bandeau : absolu, centré verticalement dans la zone images */ .product-loop-images-bandeau { position: absolute; top: 50%; left: 0; width: 100%; height: 10vh; transform: translateY(-50%); background-color: var(--product-color); z-index: 1; } .product-loop-color-green { --product-color: var(--color-green); } .product-loop-color-blue { --product-color: var(--color-blue); } .product-loop-color-pink { --product-color: var(--color-pink); } .product-loop-color-gold { --product-color: var(--color-gold); } .product-loop-color-text { --product-color: var(--color-text); } /* Catégorie : absolu bas-gauche */ .product-loop-images-category { position: absolute; bottom: 0; left: 0; z-index: 3; background-color: var(--color-text); color: var(--color-background); padding: var(--spacing-2xs) 2vh; font-family: var(--font-small-text-accent-family); font-size: var(--font-small-text-accent-size); font-weight: var(--font-small-text-accent-weight); text-transform: var(--font-small-text-accent-text-transform); line-height: var(--font-small-text-accent-line-height); } /* ========================================================= Variant Transmission — design arrondi ========================================================= */ /* Carte : coins arrondis (sans overflow:hidden pour préserver l'effet de flottement) */ .archive-products-row .product-loop-item.product-loop-variant-transmission { border-radius: 3vh; } /* Zone images : coins arrondis + clip des images */ .product-loop-variant-transmission .product-loop-images { border-radius: 2vh; overflow: hidden; } /* Badge catégorie : coins arrondis */ .product-loop-variant-transmission .product-loop-images-category { border-radius: 1vh; } /* Pas de décalage vertical sur les images */ .product-loop-variant-transmission .product-loop-images-content { margin-top: 0; } .product-loop-variant-transmission .product-variations-images.count-1 .single-image { transform: none; } /* ========================================================= Page produit unique — Product Hero Area ========================================================= */ /* Bord-à-bord à gauche : neutralise le padding-left 8vh du scroll horizontal */ html.uav-horizontal-enabled .product-hero-area { padding-left: 0; } .product-hero-columns { display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-xl); width: 100%; align-items: end; } /* Colonne images */ .product-hero-image-wrapper { position: relative; } /* Image principale */ .product-hero-main-image { position: relative; z-index: 1; width: 95%; height: auto; object-fit: contain; display: block; margin-left: auto; } /* Fix Imagify : picture hérite du wrapper, img doit avoir les mêmes dimensions */ .product-hero-main-image img { width: 100%; height: auto; object-fit: contain; display: block; } /* Fond coloré derrière l'image */ .product-hero-color-background { position: absolute; bottom: 10vh; left: 0; width: 100%; height: 22.5vh; z-index: 0; } /* Couleurs */ .product-hero-bg-green { background-color: var(--color-green); } .product-hero-bg-blue { background-color: var(--color-blue); } .product-hero-bg-pink { background-color: var(--color-pink); } .product-hero-bg-gold { background-color: var(--color-gold); } .product-hero-bg-text { background-color: var(--color-text); } /* Colonne infos */ .product-hero-infos-produit { display: flex; flex-direction: column; gap: var(--spacing-lg); } /* Titre formaté */ .product-hero-title em { font-style: italic; /* * FIX SAFARI — NE PAS SUPPRIMER * * Bug : les glyphes italiques sont clippés à gauche après l'animation d'entrée du h1. * * Cause : l'animation CSS (transform + will-change) crée une compositing layer pour * le h1. Safari calcule les bounds de cette layer sur la bounding box layout de * l'élément — sans tenir compte de l'overhang visuel des glyphes italiques (bearing * négatif à gauche du premier caractère de l'). Ce débordement visuel tombe hors * de la layer → il est clippé. * * Fix : padding-left étend la boîte layout de l' vers la gauche, ce qui étend * les bounds de la compositing layer du h1 pour inclure l'overhang italic. * margin-left négatif de même valeur compense visuellement → l'alignement du texte * avec les éléments en-dessous est strictement identique. * * Sans ces deux lignes, le premier caractère italic est coupé sur Safari dès le * chargement de la page produit (Chrome ne présente pas ce bug). */ padding-left: 0.3em; margin-left: -0.3em; } /* Conteneur infos secondaires */ .produit-infos-contenus { display: flex; flex-direction: row; gap: 8vh; } /* Couleurs section single produit — définit --product-color */ .product-hero-color-green { --product-color: var(--color-green); } .product-hero-color-blue { --product-color: var(--color-blue); } .product-hero-color-pink { --product-color: var(--color-pink); } .product-hero-color-gold { --product-color: var(--color-gold); } .product-hero-color-text { --product-color: var(--color-text); } /* Colonnes infos contenus */ .produit-infos-texte, .produit-infos-achat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2vh; } /* Description intro */ .product-hero-description-intro { font-family: var(--font-text-family); font-size: var(--font-text-size); font-weight: var(--font-text-weight); line-height: var(--line-height-comfortable); color: var(--color-text); } /* ========================================================= Add to cart — UAV_Product_Add_To_Cart ========================================================= */ /* Base */ .uav-add-to-cart-wrapper { max-width: 50vh; display: flex; flex-direction: column; gap: var(--spacing-md); } /* Conteneur Format + Variations : flex column sans gap */ .uav-format-section { display: flex; flex-direction: column; } .uav-price-display { font-family: var(--font-cta-family); font-size: 4vh; font-weight: 700; line-height: var(--line-height-tight); color: var(--color-text); } /* Bouton Commander */ .uav-add-to-cart-btn, .uav-commander-link-btn, .uav-add-to-cart-btn:hover, .uav-commander-link-btn:hover, .uav-add-to-cart-btn:focus, .uav-commander-link-btn:focus { width: 100%; background: transparent !important; color: var(--color-text) !important; border: none; box-shadow: inset 0 0 0 0.4vh var(--product-color); padding: 1.8vh; cursor: pointer; font-family: var(--font-cta-family); font-size: var(--font-cta-size); font-weight: 700; text-transform: var(--font-cta-text-transform); text-decoration: none !important; border-radius: 0; box-sizing: border-box; position: relative; overflow: hidden; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 1em; } .uav-add-to-cart-btn::before, .uav-commander-link-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--product-color); z-index: -1; transform: scaleX(1); transform-origin: left; transition: transform var(--transition-smooth) var(--ease-smooth); } .uav-add-to-cart-btn.is-animating-hover::before, .uav-commander-link-btn.is-animating-hover::before { transform: scaleX(0); transform-origin: right; } .uav-commander-link-btn, .uav-commander-link-btn:hover, .uav-commander-link-btn:focus { width: auto; padding: 1.8vh 3.6vh; margin-top: var(--spacing-sm); } .product-avis-col-intro .lvl-2 { align-items: flex-start; } /* Format label (produit variable) */ .uav-format-label { font-family: var(--font-small-text-accent-family); font-size: var(--font-small-text-size); font-weight: 600; line-height: var(--line-height-tight); color: var(--color-text); margin-bottom: 1.5vh; } /* Sélecteur de variations */ .uav-variations-selector { display: flex; gap: var(--spacing-lg); } .uav-variation-card { flex: 1; cursor: pointer; padding: 1.5vh; text-align: center; border-radius: 0.4vh; border: none; box-shadow: inset 0 0 0 0.1vh var(--color-text); background: transparent; transition: box-shadow var(--transition-fast) var(--ease-standard); box-sizing: border-box; } .uav-variation-card.is-selected { box-shadow: inset 0 0 0 0.4vh var(--color-text); } .uav-variation-card:hover { box-shadow: inset 0 0 0 0.2vh var(--color-text); } .uav-variation-card.is-selected:hover { box-shadow: inset 0 0 0 0.4vh var(--color-text); } .uav-variation-card.is-selected .uav-variation-name { font-weight: 600; } .uav-variation-name { display: block; font-family: var(--font-text-family); font-size: var(--font-text-size); font-weight: var(--font-text-weight); line-height: var(--line-height-tight); color: var(--color-text); margin: 0; } .uav-variation-description { display: block; font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.75); font-weight: 300; font-style: italic; line-height: var(--line-height-tight); color: var(--color-text); margin: 0 0 0.5vh 0; } .uav-variation-price-row { display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); } .uav-variation-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5vh; height: 1.5vh; color: var(--color-text); } .uav-variation-icon svg { width: 100%; height: 100%; } .uav-variation-price { font-family: var(--font-cta-family); font-size: var(--font-cta-size); font-weight: var(--font-cta-weight); text-transform: var(--font-cta-text-transform); color: var(--color-text); } .uav-price-row { display: flex; align-items: center; justify-content: space-between; } /* Curcy currency switcher — toggle CHF/EUR */ .uav-price-row .woocommerce-multi-currency.plain-horizontal { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0.45vh; width: auto; margin-left: auto; background: none; padding: 0; } .uav-price-row .woocommerce-multi-currency.plain-horizontal .wmc-current-url { display: none; } .uav-price-row .woocommerce-multi-currency.plain-horizontal .wmc-currency:first-child { order: 1; } /* Reset des couleurs Curcy (admin color picker injecte background/color sur ce sélecteur) */ .uav-price-row .woocommerce-multi-currency.wmc-shortcode .wmc-currency { background: none; color: inherit; } /* Séparateur vertical entre les deux labels */ .uav-price-row .woocommerce-multi-currency.plain-horizontal::before { content: ''; order: 2; display: block; width: 0.2vh; height: 2vh; align-self: center; background-color: var(--color-text); flex-shrink: 0; } .uav-price-row .woocommerce-multi-currency.plain-horizontal .wmc-currency:last-child { order: 3; } .uav-price-row .woocommerce-multi-currency.plain-horizontal .wmc-currency a { font-family: var(--font-cta-family); font-size: var(--font-cta-size); font-weight: 400; text-transform: var(--font-cta-text-transform); color: var(--color-text-light); text-decoration: none; transition: color var(--transition-fast) var(--ease-standard); } .uav-price-row .woocommerce-multi-currency.plain-horizontal .wmc-currency.wmc-active a { color: var(--color-text); } /* ========================================================= Page produit unique — Section Détails / Extrait ========================================================= */ .product-details-columns { display: grid; grid-template-columns: 40fr 60fr; gap: 0; width: 100%; align-items: center; } .product-details-col-details { display: flex; flex-direction: column; gap: 2vh; } .product-details-heading { margin: 0; line-height: var(--line-height-tight); } .product-details-description { font-family: var(--font-text-family); font-size: var(--font-text-size); font-weight: var(--font-text-weight); line-height: var(--line-height-comfortable); color: var(--color-text); } .product-details-description p { margin: 0; } .product-details-description p + p { margin-top: 1.5vh; } .product-details-description h3 { margin-bottom: var(--spacing-xs); } .product-details-col-extrait { display: flex; flex-direction: row; align-items: center; } .extrait-image { width: 45%; flex-shrink: 0; margin-right: -22.5%; position: relative; z-index: 1; pointer-events: none; } .extrait-contenu { width: 75%; flex-shrink: 0; background-color: var(--color-white); padding: 6vh 6vh 6vh 20vh; display: flex; flex-direction: column; gap: var(--spacing-lg); } /* ------------------------------------------------------------------------- Audio Player — Revue littéraire ------------------------------------------------------------------------- */ .revue-litteraire { display: flex; flex-direction: column; gap: var(--spacing-sm); } .uav-audio-player { --player-color: var(--color-pink); display: flex; align-items: center; width: 100%; height: 5vh; gap: var(--spacing-xs); } .uav-audio-player audio { display: none; } .uav-play-btn { width: 5vh; height: 5vh; flex-shrink: 0; border: none; border-radius: 50%; background: var(--player-color); color: var(--color-white); cursor: pointer; display: block; padding: 0; margin: 0; position: relative; } .uav-play-btn svg { width: 65%; height: 65%; position: absolute; top: 50%; left: 50%; pointer-events: none; transition: opacity var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard); } .uav-play-btn .uav-icon-play { opacity: 1; transform: translate(calc(-50% + 4%), -50%); } .uav-play-btn .uav-icon-pause { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } .uav-play-btn.is-playing .uav-icon-play { opacity: 0; transform: translate(calc(-50% + 4%), -50%) scale(0.5); } .uav-play-btn.is-playing .uav-icon-pause { opacity: 1; transform: translate(-50%, -50%) scale(1); } .uav-waveform { flex: 1; height: 100%; position: relative; cursor: pointer; min-width: 0; } .uav-wave-gray { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .uav-wave-progress { position: absolute; top: 0; left: 0; height: 100%; width: 0%; overflow: hidden; will-change: width; } .uav-wave-colored { display: block; height: 100%; } .uav-time { flex-shrink: 0; min-width: 3em; text-align: left; font-family: var(--font-text-family); font-size: var(--font-text-size); font-weight: var(--font-text-weight); line-height: var(--line-height-comfortable); color: var(--color-text); white-space: nowrap; } .extrait-separator { width: 100%; height: var(--border-thin); background-color: var(--color-text); margin-top: var(--spacing-sm); } .inscription-newsletter { display: flex; flex-direction: column; gap: var(--spacing-sm); } .uav-brevo-form { display: flex; flex-direction: column; gap: var(--spacing-sm); } .uav-brevo-form-name { display: flex; flex-direction: row; gap: var(--spacing-sm); } .uav-brevo-form-name input { flex: 1; } .uav-brevo-form input[type="text"], .uav-brevo-form input[type="email"] { width: 100%; font-family: var(--font-small-text-family); font-size: var(--font-small-text-size); font-weight: 500; color: var(--color-text); background-color: transparent; border: var(--border-thin) solid var(--color-text); padding: var(--spacing-xs); outline: none; box-sizing: border-box; transition: border-color var(--transition-fast) var(--ease-standard); } .uav-brevo-form input[type="text"]::placeholder, .uav-brevo-form input[type="email"]::placeholder { font-style: italic; text-transform: uppercase; color: var(--color-text-light); } .uav-brevo-submit { margin-top: var(--spacing-xs); border: none; background: none; cursor: pointer; } .uav-brevo-submit:disabled { opacity: 0.5; cursor: not-allowed; } .uav-brevo-feedback { margin: 0; font-family: var(--font-text-family); font-size: var(--font-small-text-size); font-weight: var(--font-text-weight); min-height: 1em; } .uav-brevo-feedback.is-success { color: var(--color-green); } .uav-brevo-feedback.is-error { color: var(--color-pink); } /* ------------------------------------------------------------------------- Animation d'entrée page produit ------------------------------------------------------------------------- */ @keyframes uav-product-slide-fade-in { from { opacity: 0; transform: translateX(-6vh); } to { opacity: 1; /* transform absent : Safari ne retient pas transform:translateX(0) après animation → pas de compositing layer permanente → pas de clipping des glyphes italiques */ } } @keyframes uav-product-slide-fade-in-right { from { opacity: 0; transform: translateX(6vh); } to { opacity: 1; /* idem : transform absent du to pour éviter layer compositing Safari */ } } /* Fond coloré — ease-expo (fluide, sans rebond), légèrement plus long pour être posé avant l'image */ .product-hero-color-background { will-change: transform, opacity; animation: uav-product-slide-fade-in 1s var(--ease-expo) both; } /* Image — spring, arrive 0.15s après le fond */ .product-hero-main-image { will-change: transform, opacity; animation: uav-product-slide-fade-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; } /* H1 — démarre en même temps que le fond, ancre la droite */ h1.product-hero-title { will-change: transform, opacity; animation: uav-product-slide-fade-in-right 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* Groupe .produit-infos-texte — cascade serrée 0.1s */ .product-single-author { will-change: transform, opacity; animation: uav-product-slide-fade-in-right 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; } .product-hero-description-intro { will-change: transform, opacity; animation: uav-product-slide-fade-in-right 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both; } .product-single-details { will-change: transform, opacity; animation: uav-product-slide-fade-in-right 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both; } /* .produit-infos-achat — parent différent, écart légèrement plus grand */ .produit-infos-achat { will-change: transform, opacity; animation: uav-product-slide-fade-in-right 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both; } /* Sections suivantes */ .product-hero-area ~ .main-section { will-change: transform, opacity; animation: uav-product-slide-fade-in-right 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both; } } /* ========================================================================== PAGE PRODUIT SINGLE — MOBILE (≤1200px) ========================================================================== */ /* --- HERO : colonne image --- */ @media (max-width: 1200px) { /* Variables --product-color (nécessaires hors media desktop) */ .product-hero-color-green { --product-color: var(--color-green); } .product-hero-color-blue { --product-color: var(--color-blue); } .product-hero-color-pink { --product-color: var(--color-pink); } .product-hero-color-gold { --product-color: var(--color-gold); } .product-hero-color-text { --product-color: var(--color-text); } /* Couleurs fond coloré (nécessaires hors media desktop) */ .product-hero-bg-green { background-color: var(--color-green); } .product-hero-bg-blue { background-color: var(--color-blue); } .product-hero-bg-pink { background-color: var(--color-pink); } .product-hero-bg-gold { background-color: var(--color-gold); } .product-hero-bg-text { background-color: var(--color-text); } /* Colonnes hero : stack vertical, gap lg (un cran sous desktop --spacing-xl) */ .product-hero-columns { display: flex; flex-direction: column; gap: var(--spacing-lg); } /* Wrapper : position relative pour ancrer le fond coloré absolu */ .product-hero-image-wrapper { position: relative; } /* Image : centrée, 90% largeur, z-index 1 au-dessus du fond coloré */ .product-hero-main-image { position: relative; z-index: 1; display: block; width: 75%; max-width: min(512px, 90vw); height: auto; margin: 0 auto; } .product-hero-main-image img { position: relative; z-index: 1; width: 100%; height: auto; display: block; } /* Infos produit : stack vertical avec gap md */ .product-hero-infos-produit { display: flex; flex-direction: column; gap: var(--spacing-md); } /* Conteneur texte + achat : stack vertical avec gap lg */ .produit-infos-contenus { display: flex; flex-direction: column; gap: var(--spacing-lg); } /* Colonne texte : stack vertical avec gap sm */ .produit-infos-texte { display: flex; flex-direction: column; gap: var(--spacing-sm); } /* Auteur : même convention que les auteurs du thème sur mobile */ .product-single-author { display: flex; align-items: center; justify-content: flex-start; gap: var(--spacing-xs); font-family: var(--font-small-text-italic-family); font-size: var(--text-size-l); font-weight: 500; font-style: normal; line-height: var(--line-height-comfortable); text-transform: uppercase; text-decoration: none; color: var(--color-text); } .product-single-author-icon { width: 1em; height: 1em; flex-shrink: 0; fill: var(--product-color); } /* Détails produit (date, catégorie, pages, mention) */ .product-single-details { display: flex; flex-direction: column; gap: var(--spacing-2xs); } .product-single-details-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); } .product-single-detail-item { display: flex; align-items: center; gap: var(--spacing-xs); font-family: var(--font-small-text-italic-accent-family); font-size: var(--font-small-text-italic-accent-size); font-weight: var(--font-small-text-italic-accent-weight); font-style: var(--font-small-text-italic-accent-style); line-height: var(--font-small-text-italic-accent-line-height); color: var(--color-text); } .product-single-detail-icon { display: block; width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; } .product-single-detail-item a { color: inherit; text-decoration: none; } /* Colonne achat : stack vertical avec gap md */ .produit-infos-achat { display: flex; flex-direction: column; gap: var(--spacing-md); } /* ========================================================= Add to cart — Mobile ========================================================= */ .uav-add-to-cart-wrapper { width: 100%; display: flex; flex-direction: column; gap: var(--spacing-lg); } .uav-format-section { display: flex; flex-direction: column; } .uav-price-display { font-family: var(--font-cta-family); font-size: var(--text-size-2xl); font-weight: 700; line-height: var(--line-height-tight); color: var(--color-text); } /* Bouton Commander */ .uav-add-to-cart-btn, .uav-commander-link-btn, .uav-add-to-cart-btn:hover, .uav-commander-link-btn:hover, .uav-add-to-cart-btn:focus, .uav-commander-link-btn:focus { width: 100%; background: transparent !important; color: var(--color-text) !important; border: none; box-shadow: inset 0 0 0 2px var(--product-color); padding: calc((var(--spacing-xs) + var(--spacing-sm)) / 2); cursor: pointer; font-family: var(--font-cta-family); font-size: var(--font-cta-size); font-weight: 700; text-transform: var(--font-cta-text-transform); text-decoration: none !important; border-radius: 0; box-sizing: border-box; position: relative; overflow: hidden; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 1em; } .uav-add-to-cart-btn::before, .uav-commander-link-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--product-color); z-index: -1; transform: scaleX(1); transform-origin: left; transition: transform var(--transition-smooth) var(--ease-smooth); } .uav-add-to-cart-btn.is-animating-hover::before, .uav-commander-link-btn.is-animating-hover::before { transform: scaleX(0); transform-origin: right; } .uav-commander-link-btn, .uav-commander-link-btn:hover, .uav-commander-link-btn:focus { width: auto; padding: var(--spacing-md) calc(var(--spacing-md) * 2); margin-top: var(--spacing-sm); align-self: center; } .uav-commander-link-btn svg { transform: rotate(90deg); } /* Format label — var(--font-small-text-accent-size) = 12px sur mobile, minimum var(--text-size-s) = 14px */ .uav-format-label { font-family: var(--font-small-text-accent-family); font-size: var(--text-size-s); font-weight: 600; line-height: var(--line-height-tight); color: var(--color-text); margin-bottom: 8px; } /* Sélecteur de variations */ .uav-variations-selector { display: flex; gap: var(--spacing-md); } .uav-variation-card { flex: 1; cursor: pointer; padding: 12px; text-align: center; border-radius: 4px; border: none; box-shadow: inset 0 0 0 1px var(--color-text); background: transparent; transition: box-shadow var(--transition-fast) var(--ease-standard); box-sizing: border-box; } .uav-variation-card.is-selected { box-shadow: inset 0 0 0 3px var(--color-text); } .uav-variation-card.is-selected .uav-variation-name { font-weight: 600; } .uav-variation-name { display: block; font-family: var(--font-text-family); font-size: var(--text-size-l); font-weight: var(--font-text-weight); line-height: var(--line-height-tight); color: var(--color-text); margin: 0 0 var(--spacing-2xs) 0; } /* calc(--font-text-size * 0.75) = 12px sur mobile, minimum var(--text-size-s) = 14px */ .uav-variation-description { display: block; font-family: var(--font-text-family); font-size: var(--text-size-s); font-weight: 300; font-style: italic; line-height: var(--line-height-tight); color: var(--color-text); margin: 0 0 var(--spacing-xs) 0; } .uav-variation-price-row { display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); } .uav-variation-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; color: var(--color-text); } .uav-variation-icon svg { width: 100%; height: 100%; } .uav-variation-price { font-family: var(--font-cta-family); font-size: var(--text-size-l); font-weight: var(--font-cta-weight); text-transform: var(--font-cta-text-transform); color: var(--color-text); } /* Ligne prix / devise */ .uav-price-row { display: flex; align-items: center; justify-content: space-between; } /* Curcy currency switcher — toggle CHF/EUR (mobile) */ .uav-price-row .woocommerce-multi-currency.plain-horizontal { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 5px; width: auto; margin-left: auto; background: none; padding: 0; } .uav-price-row .woocommerce-multi-currency.plain-horizontal .wmc-currency:first-child { order: 1; } /* Reset des couleurs Curcy (admin color picker injecte background/color sur ce sélecteur) */ .uav-price-row .woocommerce-multi-currency.wmc-shortcode .wmc-currency { background: none; color: inherit; } /* Séparateur vertical entre les deux labels (mobile) */ .uav-price-row .woocommerce-multi-currency.plain-horizontal::before { content: ''; order: 2; display: block; width: 2px; height: 20px; align-self: center; background-color: var(--color-text); flex-shrink: 0; } .uav-price-row .woocommerce-multi-currency.plain-horizontal .wmc-currency:last-child { order: 3; } .uav-price-row .woocommerce-multi-currency.plain-horizontal .wmc-currency a { font-family: var(--font-cta-family); font-size: 16px; font-weight: 400; text-transform: var(--font-cta-text-transform); color: var(--color-text-light); text-decoration: none; transition: color var(--transition-fast) var(--ease-standard); } .uav-price-row .woocommerce-multi-currency.plain-horizontal .wmc-currency.wmc-active a { color: var(--color-text); } /* Infos paiement */ .infos-paiement { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); font-size: var(--font-small-text-size); font-weight: var(--font-small-text-weight); font-style: var(--font-small-text-style); line-height: var(--font-small-text-line-height); } .infos-paiement-securise { display: flex; align-items: center; gap: var(--spacing-xs); } .infos-paiement-icone { display: block; width: 1em; height: 1em; flex-shrink: 0; } .infos-paiement-logos { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); } .infos-paiement-logos img { height: 20px; width: auto; } /* Hauteurs logos en px (1.5vh–2.5vh trop petit sur mobile) */ #payment-logo-visa img { height: 15px; } #payment-logo-mastercard img { height: 20px; } #payment-logo-apple-pay img { height: 20px; } #payment-logo-twint img { height: 18px; } /* Fond coloré : 90% largeur aligné gauche, remonté de 20% de la hauteur du wrapper, derrière l'image */ .product-hero-color-background { position: absolute; bottom: 20%; left: 0; width: 90%; height: 150px; z-index: 0; } } /* --- Section Détails --- */ @media (max-width: 1200px) { .product-details-columns { display: flex; flex-direction: column; gap: var(--spacing-lg); } .product-details-col-details { display: flex; flex-direction: column; gap: var(--spacing-md); } .product-details-description p + p { margin-top: var(--spacing-sm); } .product-details-description h3 { margin-bottom: var(--spacing-xs); } /* Colonne extrait — overlap vertical */ .product-details-col-extrait { display: flex; flex-direction: column; align-items: center; } .extrait-image { width: 75%; margin-right: 0; margin-bottom: -40%; position: relative; z-index: 1; } .extrait-contenu { width: 100%; box-sizing: border-box; background-color: var(--color-white); padding: calc(40% + var(--spacing-md) / 2) var(--spacing-md) var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-lg); } /* Audio player */ .uav-audio-player { display: flex; align-items: center; width: 100%; height: 44px; gap: var(--spacing-xs); } .uav-play-btn { width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--player-color); color: var(--color-white); cursor: pointer; display: block; padding: 0; margin: 0; position: relative; } .uav-play-btn svg { width: 65%; height: 65%; position: absolute; top: 50%; left: 50%; pointer-events: none; transition: opacity var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard); } .uav-play-btn .uav-icon-play { opacity: 1; transform: translate(calc(-50% + 4%), -50%); } .uav-play-btn .uav-icon-pause { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } .uav-play-btn.is-playing .uav-icon-play { opacity: 0; transform: translate(calc(-50% + 4%), -50%) scale(0.5); } .uav-play-btn.is-playing .uav-icon-pause { opacity: 1; transform: translate(-50%, -50%) scale(1); } .uav-waveform { flex: 1; height: 100%; position: relative; cursor: pointer; min-width: 0; } .uav-wave-gray { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .uav-wave-progress { position: absolute; top: 0; left: 0; height: 100%; width: 0%; overflow: hidden; will-change: width; } .uav-wave-colored { display: block; height: 100%; } .uav-time { flex-shrink: 0; min-width: 3em; text-align: left; font-family: var(--font-text-family); font-size: var(--font-text-size); font-weight: var(--font-text-weight); line-height: var(--line-height-comfortable); color: var(--color-text); white-space: nowrap; } /* Séparateur + formulaire inscription newsletter */ .extrait-separator { width: 100%; height: var(--border-thin); background-color: var(--color-text); margin-top: var(--spacing-sm); } .inscription-newsletter { display: flex; flex-direction: column; gap: var(--spacing-sm); } .uav-brevo-form { display: flex; flex-direction: column; gap: var(--spacing-sm); } .uav-brevo-form-name { display: flex; flex-direction: column; gap: var(--spacing-sm); } .uav-brevo-form-name input { flex: 1; } .uav-brevo-form input[type="text"], .uav-brevo-form input[type="email"] { width: 100%; font-family: var(--font-small-text-family); font-size: var(--font-small-text-size); font-weight: 500; color: var(--color-text); background-color: transparent; border: var(--border-thin) solid var(--color-text); padding: var(--spacing-xs); outline: none; box-sizing: border-box; transition: border-color var(--transition-fast) var(--ease-standard); } .uav-brevo-form input[type="text"]::placeholder, .uav-brevo-form input[type="email"]::placeholder { font-style: italic; text-transform: uppercase; color: var(--color-text-light); } .uav-brevo-submit { align-self: flex-start; margin-top: var(--spacing-xs); border: none; background: none; cursor: pointer; } .uav-brevo-submit:disabled { opacity: 0.5; cursor: not-allowed; } .uav-brevo-feedback { margin: 0; font-family: var(--font-text-family); font-size: var(--font-small-text-size); font-weight: var(--font-text-weight); min-height: 1em; } .uav-brevo-feedback.is-success { color: var(--color-green); } .uav-brevo-feedback.is-error { color: var(--color-pink); } } /* ========================================================= Modale panier — Globale (tous breakpoints) ========================================================= */ .uav-cart-modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; align-items: center; justify-content: center; } .uav-cart-modal.is-open { display: flex; } .uav-cart-modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(50, 50, 50, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .uav-cart-modal-content { position: relative; background: var(--color-white); padding: var(--spacing-lg); border-radius: 0.5vh; width: 67vh; max-width: 90vw; text-align: center; box-shadow: 0 1vh 4vh rgba(0, 0, 0, 0.15); animation: uav-modal-appear 0.25s ease; } @keyframes uav-modal-appear { from { opacity: 0; transform: translateY(1vh); } to { opacity: 1; transform: translateY(0); } } @keyframes uav-modal-disappear { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(1vh); } } @keyframes uav-modal-backdrop-out { from { opacity: 1; } to { opacity: 0; } } .uav-cart-modal.is-closing .uav-cart-modal-content { animation: uav-modal-disappear 0.3s ease forwards; } .uav-cart-modal.is-closing .uav-cart-modal-backdrop { animation: uav-modal-backdrop-out 0.3s ease forwards; } .uav-ebook-modal.is-closing .uav-ebook-modal-content { animation: uav-modal-disappear 0.3s ease forwards; } .uav-ebook-modal.is-closing .uav-ebook-modal-backdrop { animation: uav-modal-backdrop-out 0.3s ease forwards; } .uav-cart-modal-title { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 1.2); font-weight: 600; color: var(--color-text); margin-bottom: 2.5vh; } .uav-cart-modal-added { margin-bottom: var(--spacing-sm); } .uav-cart-modal-added-product { display: flex; align-items: center; gap: var(--spacing-sm); padding: 1.5vh 0; text-align: left; } .uav-cart-modal-added-image { width: 8vh; height: 8vh; object-fit: cover; border-radius: 0.3vh; flex-shrink: 0; } .uav-cart-modal-added-info { flex: 1; min-width: 0; } .uav-cart-modal-added-name { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.9); font-weight: 600; color: var(--color-text); line-height: var(--line-height-medium); margin-bottom: 0.2vh; } .uav-cart-modal-added-variant { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.75); font-weight: 400; font-style: italic; color: var(--color-text-light); } .uav-cart-modal-added-price { font-family: var(--font-cta-family); font-size: calc(var(--font-cta-size) * 0.85); font-weight: 700; color: var(--color-text); flex-shrink: 0; text-align: right; } .uav-cart-modal-others { border-top: 0.1vh solid rgba(0, 0, 0, 0.1); padding-top: 1.5vh; margin-bottom: var(--spacing-sm); } .uav-cart-modal-others-title { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.8); font-weight: 500; color: var(--color-text-light); margin-bottom: 1vh; text-align: left; } .uav-cart-modal-others-list { max-height: 15vh; overflow-y: auto; } .uav-cart-modal-other-item { display: flex; justify-content: space-between; align-items: center; padding: 0.6vh 0; text-align: left; gap: var(--spacing-xs); } .uav-cart-modal-other-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--spacing-2xs); } .uav-cart-modal-other-name { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.8); font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uav-cart-modal-other-variant { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.7); font-weight: 400; font-style: italic; color: var(--color-text-light); white-space: nowrap; } .uav-cart-modal-other-qty { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.7); font-weight: 400; color: var(--color-text-light); white-space: nowrap; } .uav-cart-modal-other-price { font-family: var(--font-cta-family); font-size: calc(var(--font-text-size) * 0.8); font-weight: 600; color: var(--color-text); flex-shrink: 0; white-space: nowrap; } .uav-cart-modal-shipping-line { display: flex; justify-content: space-between; align-items: center; padding: 0.6vh 0; border-top: 0.1vh solid var(--product-color); gap: var(--spacing-xs); } .uav-cart-modal-shipping-line-label { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.8); font-weight: 400; font-style: italic; color: var(--color-text-light); } .uav-cart-modal-shipping-line-value { font-family: var(--font-cta-family); font-size: calc(var(--font-text-size) * 0.8); font-weight: 600; color: var(--color-text); flex-shrink: 0; white-space: nowrap; } .uav-cart-modal-total { display: flex; justify-content: space-between; align-items: center; padding: 1.5vh 0; border-top: 0.1vh solid var(--product-color); border-bottom: 0.1vh solid var(--product-color); margin-bottom: 2.5vh; } .uav-cart-modal-total-label { font-family: var(--font-cta-family); font-size: calc(var(--font-cta-size) * 1.1); font-weight: 700; color: var(--color-text); } .uav-cart-modal-total-value { font-family: var(--font-cta-family); font-size: calc(var(--font-cta-size) * 1.1); font-weight: 700; color: var(--color-text); } .uav-cart-modal-shipping { text-align: center; font-size: var(--text-size-small); color: var(--color-text-light); margin: 0 0 var(--spacing-sm); } .uav-cart-modal-buttons { display: flex; gap: 1.5vh; justify-content: center; align-items: center; } /* Bouton Continuer : souligné */ .uav-cart-modal-continue, .uav-cart-modal-continue:hover, .uav-cart-modal-continue:focus { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.9); font-weight: 500; padding: 1.5vh 5vh; border-radius: 0; cursor: pointer; border: none; background: transparent !important; color: var(--color-text) !important; box-shadow: none; outline: none; text-decoration: underline; text-underline-offset: 0.3vh; transition: text-decoration-color var(--transition-normal) var(--ease-standard); } .uav-cart-modal-continue.is-animating-hover { text-decoration-color: transparent; } /* Bouton Voir panier : animation scaleX */ .uav-cart-modal-view, .uav-cart-modal-view:hover, .uav-cart-modal-view:focus { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.9); font-weight: 700; padding: 1.5vh 5vh; border-radius: 0; cursor: pointer; border: none; position: relative; overflow: hidden; z-index: 1; background: transparent !important; color: var(--color-text) !important; box-shadow: inset 0 0 0 0.3vh var(--product-color); outline: none; text-decoration: none !important; display: inline-flex; align-items: center; gap: 0.6em; } .uav-cart-modal-view::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--product-color); z-index: -1; transition: transform 0.4s var(--ease-smooth); transform: scaleX(1); transform-origin: left; } .uav-cart-modal-view.is-animating-hover::before { transform: scaleX(0); transform-origin: right; } /* ========================================================= Modale eBook — Globale (tous breakpoints) ========================================================= */ .uav-ebook-modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; align-items: center; justify-content: center; } .uav-ebook-modal.is-open { display: flex; } .uav-ebook-modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(50, 50, 50, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .uav-ebook-modal-content { position: relative; background: var(--color-white); padding: var(--spacing-lg); border-radius: 0.5vh; width: 67vh; max-width: 90vw; text-align: center; box-shadow: 0 1vh 4vh rgba(0, 0, 0, 0.15); animation: uav-modal-appear 0.25s ease; } .uav-ebook-modal-title { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 1.2); font-weight: 600; color: var(--color-text); margin-bottom: 1.5vh; } .uav-ebook-modal-text { font-family: var(--font-text-family); font-size: var(--font-text-size); font-weight: 400; line-height: var(--line-height-comfortable); color: var(--color-text); margin-bottom: 1vh; text-wrap: balance; } .uav-ebook-modal-text strong { font-weight: 600; } .uav-ebook-modal-hint { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.85); font-weight: 300; font-style: italic; color: var(--color-text-light); margin-bottom: 3vh; text-wrap: balance; } .uav-ebook-modal-buttons { display: flex; gap: 1.5vh; justify-content: center; align-items: center; } /* Bouton Annuler : souligné */ .uav-ebook-modal-cancel, .uav-ebook-modal-cancel:hover, .uav-ebook-modal-cancel:focus { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.9); font-weight: 500; padding: 1.5vh 5vh; border-radius: 0; cursor: pointer; border: none; background: transparent !important; color: var(--color-text) !important; box-shadow: none; outline: none; text-decoration: underline; text-underline-offset: 0.3vh; transition: text-decoration-color var(--transition-normal) var(--ease-standard); } .uav-ebook-modal-cancel.is-animating-hover { text-decoration-color: transparent; } /* Bouton Confirmer : animation scaleX */ .uav-ebook-modal-confirm, .uav-ebook-modal-confirm:hover, .uav-ebook-modal-confirm:focus { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.9); font-weight: 700; padding: 1.5vh 5vh; border-radius: 0; cursor: pointer; border: none; position: relative; overflow: hidden; z-index: 1; background: transparent !important; color: var(--color-text) !important; box-shadow: inset 0 0 0 0.3vh var(--product-color); outline: none; display: inline-flex; align-items: center; gap: 0.6em; } .uav-ebook-modal-confirm::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--product-color); z-index: -1; transition: transform 0.4s var(--ease-smooth); transform: scaleX(1); transform-origin: left; } .uav-ebook-modal-confirm.is-animating-hover::before { transform: scaleX(0); transform-origin: right; } /* ========================================================================== SECTION AVIS LECTEURS ========================================================================== */ /* --- Layout section --- */ @media (min-width: 1201px) { .product-avis-section { --product-avis-col1: 1fr; --product-avis-col2: 1fr; } /* Colonnes bord-à-bord à gauche : neutraliser uniquement le padding gauche */ html.uav-horizontal-enabled .product-avis-section { padding-left: 0; } .product-avis-columns { display: grid; grid-template-columns: var(--product-avis-col1) var(--product-avis-col2); gap: 4vh; align-items: stretch; height: 95vh; } .product-avis-col-intro { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-sm); padding: 8vh; } .product-avis-col-liste { height: 100%; overflow: hidden; } } @media (max-width: 1200px) { .product-avis-columns { display: flex; flex-direction: column; gap: var(--spacing-xl); } /* Le padding horizontal est reporté sur la colonne intro uniquement */ .product-avis-col-intro { padding-left: var(--spacing-md); padding-right: var(--spacing-md); } .column-model-titres-texte-cta h2, .column-model-titres-texte-cta h3 { width: 100%; } } .product-avis-intro-text { display: flex; flex-direction: column; gap: 0; } .product-avis-moyenne { display: flex; flex-direction: column; gap: var(--spacing-2xs); } .product-avis-etoiles { display: inline-flex; gap: 0.3vh; color: var(--product-color, var(--color-text)); font-size: 2.5vh; line-height: 1; } .product-avis-etoile { position: relative; display: inline-block; } .product-avis-etoile-vide { display: block; color: transparent; -webkit-text-stroke: 0.12vh var(--product-color, var(--color-text)); } .product-avis-etoile-pleine { position: absolute; top: 0; left: 0; overflow: hidden; width: var(--star-fill, 0%); white-space: nowrap; } .product-avis-moyenne-texte { font-size: var(--text-size-small); font-weight: 600; } .product-avis-count { font-weight: 400; color: var(--color-text-light); } .product-avis-vide { font-size: var(--text-size-body); font-style: italic; color: var(--color-text-light); } /* --- Liste avis --- */ .uav-avis-liste { display: flex; flex-direction: row; gap: 4vh; height: 100%; } @media (min-width: 1201px) { .uav-avis-colonne { flex: 1; overflow: hidden; position: relative; min-width: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .uav-avis-track { width: 100%; will-change: transform; } .uav-avis-track-wrapper { display: flex; flex-direction: column; gap: 4vh; padding-top: 1.5vh; padding-bottom: 2.5vh; } } @media (max-width: 1200px) { .uav-avis-liste { flex-direction: column; } .uav-avis-track { transform: none !important; } .uav-avis-track-wrapper { display: flex; flex-direction: column; gap: var(--spacing-lg); } .uav-avis-track-wrapper:nth-child(n+2) { display: none !important; } .uav-avis-colonne-bas { display: none; } } @media (max-width: 1200px) { /* --- Cartes avis : remplacement des valeurs vh par variables CSS --- */ .uav-avis-card { border-width: 2px; border-radius: 4px; padding: 24px var(--spacing-md) var(--spacing-md) var(--spacing-md); } .uav-avis-stars-inner { padding: 0 var(--spacing-sm); font-size: var(--text-size-m); letter-spacing: 3px; } .uav-avis-contenu { font-size: var(--text-size-m); margin-bottom: var(--spacing-lg); text-wrap: balance; } .uav-avis-signature { gap: var(--spacing-2xs); } .uav-avis-nom { font-size: var(--text-size-m); } /* --- Carousel avis : structure --- */ .uav-avis-carousel-wrapper { position: relative; overflow: hidden; width: 100%; padding-top: var(--spacing-sm); /* clearance pour les étoiles (.uav-avis-stars) */ } .uav-avis-carousel-track { display: flex; flex-direction: row; gap: 0; transition: transform 0.4s ease; will-change: transform; } .uav-avis-carousel-track.dragging { transition: none !important; } .uav-avis-carousel-slide { flex-shrink: 0; width: 100%; padding: 0 var(--spacing-md); /* carte ne touche pas les bords, mais le slide glisse bord-à-bord */ } /* Navigation dots */ .uav-avis-carousel-nav { display: flex; justify-content: center; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-md) 0 0 0; } .uav-avis-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--product-color, var(--color-text)); opacity: 0.3; cursor: pointer; transition: opacity var(--transition-fast) var(--ease-standard); } .uav-avis-carousel-dot.active { opacity: 1; } } /* --- Carte avis --- */ .uav-avis-card { position: relative; background: var(--color-background); border: var(--border-thick) solid var(--product-color, var(--color-text)); border-radius: 0.5vh; padding: 3.5vh 2vh 2vh 2vh; text-align: center; flex-shrink: 0; width: 100%; box-sizing: border-box; } /* Étoiles à cheval sur la bordure */ .uav-avis-stars { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; } .uav-avis-stars-inner { display: inline-block; background: var(--color-background); padding: 0 1.5vh; color: var(--product-color, var(--color-text)); font-size: 2vh; letter-spacing: 0.3vh; line-height: 1; } .uav-avis-contenu { font-family: var(--font-heading); font-size: 2vh; font-style: italic; line-height: 1.8em; color: var(--color-text); margin-bottom: 2.5vh; text-wrap: balance; } .uav-avis-signature { display: flex; flex-direction: column; gap: 0.3vh; } .uav-avis-nom { font-size: 2vh; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text); } .uav-avis-metier { font-size: var(--text-size-small); color: var(--color-text); } /* Pause au survol */ @media (min-width: 1201px) { .uav-avis-colonne:hover .uav-avis-track { animation-play-state: paused; } } /* ========================================================================== MODALE FORMULAIRE AVIS ========================================================================== */ .uav-avis-modal { display: none; position: fixed; inset: 0; z-index: 999999; align-items: center; justify-content: center; } .uav-avis-modal.is-open { display: flex; } .uav-avis-modal-backdrop { position: fixed; inset: 0; background: rgba(30, 30, 30, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .uav-avis-modal-content { position: relative; background: var(--color-white); padding: var(--spacing-md); border-radius: 0.5vh; width: 90vh; max-width: 92vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 1vh 4vh rgba(0, 0, 0, 0.12); animation: uav-avis-appear 0.25s ease; transition: height 0.4s ease; } @keyframes uav-avis-appear { from { opacity: 0; transform: translateY(1.5vh); } to { opacity: 1; transform: translateY(0); } } @keyframes uav-avis-disappear { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(1.5vh); } } @keyframes uav-avis-backdrop-out { from { opacity: 1; } to { opacity: 0; } } .uav-avis-modal.is-closing .uav-avis-modal-content { animation: uav-avis-disappear 0.3s ease forwards; } .uav-avis-modal.is-closing .uav-avis-modal-backdrop { animation: uav-avis-backdrop-out 0.3s ease forwards; } .uav-avis-modal-title { font-family: var(--font-h3-family); font-size: var(--font-h3-size); font-weight: var(--font-h3-weight); line-height: var(--font-h3-line-height); color: var(--color-text); text-align: center; margin-bottom: var(--spacing-sm); } .uav-avis-form { display: flex; flex-direction: column; gap: var(--spacing-sm); } .uav-avis-form .uav-form-group { display: flex; flex-direction: column; gap: var(--spacing-2xs); } .uav-avis-form .uav-form-group label { font-size: var(--text-size-s); font-weight: 600; color: var(--color-text); } .uav-avis-form .uav-form-hint { font-size: var(--text-size-s); font-style: italic; color: var(--color-text-light); margin-top: -0.3vh; } .uav-avis-form .uav-form-group input[type="text"], .uav-avis-form .uav-form-group textarea { padding: var(--spacing-xs); border: var(--border-thin) solid var(--color-text); font-size: var(--text-size-s); font-weight: 500; color: var(--color-text); background: transparent; width: 100%; box-sizing: border-box; } .uav-avis-form .uav-form-group input[type="text"]:focus, .uav-avis-form .uav-form-group textarea:focus { outline: none; } .uav-avis-form .uav-form-row { display: flex; gap: var(--spacing-sm); } .uav-avis-form .uav-form-row .uav-form-group { flex: 1; } /* Étoiles interactives */ .uav-star-rating { display: flex; gap: 0.5vh; font-size: 3vh; cursor: pointer; } .uav-star { color: rgba(0, 0, 0, 0.2); transition: color 0.15s ease; user-select: none; } .uav-star.is-active, .uav-star.is-hover { color: var(--product-color); } /* Message feedback */ .uav-form-message { font-size: var(--text-size-s); text-align: center; border-radius: 0.3vh; padding: 1.5vh; display: none; } .uav-form-message.success { display: block; background: color-mix(in srgb, var(--color-validation) 10%, transparent); color: var(--color-validation); } .uav-form-message.error { display: block; background: color-mix(in srgb, var(--color-error) 10%, transparent); color: var(--color-error); } /* État soumis : formulaire masqué, message mis en avant */ .uav-avis-modal-close-wrap { display: none; text-align: center; } .uav-avis-modal-content.is-submitted .uav-avis-form { display: none; } .uav-avis-modal-content.is-submitted .uav-avis-modal-close-wrap { display: block; } .uav-avis-modal-content .uav-form-message.success { font-family: var(--font-h3-family); font-size: var(--font-h3-size); font-weight: var(--font-h3-weight); line-height: var(--font-h3-line-height); color: var(--product-color); background: transparent; padding: var(--spacing-sm) var(--spacing-md); text-align: center; } /* Boutons */ .uav-avis-modal-buttons { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); margin-top: var(--spacing-xs); } /* Bouton Annuler : texte souligné avec animation */ .uav-avis-modal-cancel, .uav-avis-modal-cancel:hover, .uav-avis-modal-cancel:focus { font-family: var(--font-body); font-size: var(--text-size-s); font-weight: 500; padding: 1.5vh 5vh; border-radius: 0; cursor: pointer; border: none; background: transparent; color: var(--color-text); box-shadow: none; outline: none; text-decoration: underline; text-underline-offset: 0.3vh; transition: text-decoration-color var(--transition-normal) var(--ease-standard); } .uav-avis-modal-cancel.is-animating-hover { text-decoration-color: transparent; } /* Bouton Envoyer : animation scaleX (style uav-cart-modal-view) */ .uav-avis-modal-submit, .uav-avis-modal-submit:hover, .uav-avis-modal-submit:focus { font-family: var(--font-text-family); font-size: calc(var(--font-text-size) * 0.9); font-weight: 700; padding: 1.5vh 5vh; border-radius: 0; cursor: pointer; border: none; position: relative; overflow: hidden; z-index: 1; background: transparent !important; color: var(--color-text) !important; box-shadow: inset 0 0 0 0.3vh var(--product-color); outline: none; text-decoration: none !important; } .uav-avis-modal-submit::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--product-color); z-index: -1; transition: transform 0.4s var(--ease-smooth); transform: scaleX(1); transform-origin: left; } .uav-avis-modal-submit.is-animating-hover::before { transform: scaleX(0); transform-origin: right; } .uav-avis-modal-submit:disabled { opacity: 0.6; cursor: not-allowed; } @media (max-width: 1200px) { .uav-avis-modal-content { padding: 24px 20px; width: 100%; max-width: 96vw; max-height: 94vh; } .uav-avis-form .uav-form-row { flex-direction: column; } .uav-avis-modal-buttons { flex-direction: column-reverse; } /* Modale panier — boutons */ .uav-cart-modal-buttons { gap: var(--spacing-xs); } .uav-cart-modal-continue { flex: 1; } .uav-cart-modal-view { flex: 1; justify-content: center; } .uav-cart-modal-continue, .uav-cart-modal-continue:hover, .uav-cart-modal-continue:focus { padding: var(--spacing-xs) var(--spacing-xs); text-underline-offset: 3px; } .uav-cart-modal-view, .uav-cart-modal-view:hover, .uav-cart-modal-view:focus { padding: var(--spacing-xs) var(--spacing-xs); box-shadow: inset 0 0 0 2px var(--product-color); } .uav-cart-modal-view svg { display: none; } /* Modale eBook — boutons */ .uav-ebook-modal-buttons { gap: var(--spacing-xs); } .uav-ebook-modal-cancel { flex: 1; } .uav-ebook-modal-cancel, .uav-ebook-modal-cancel:hover, .uav-ebook-modal-cancel:focus { padding: var(--spacing-xs) var(--spacing-xs); text-underline-offset: 3px; } .uav-ebook-modal-confirm { flex: 1; justify-content: center; } .uav-ebook-modal-confirm, .uav-ebook-modal-confirm:hover, .uav-ebook-modal-confirm:focus { padding: var(--spacing-xs) var(--spacing-xs); box-shadow: inset 0 0 0 2px var(--product-color); } .uav-ebook-modal-confirm svg { display: none; } /* Typographie — harmonisation mobile ≥ 14px */ .uav-variation-description, .uav-cart-modal-added-variant, .uav-cart-modal-added-price, .uav-cart-modal-others-title, .uav-cart-modal-other-name, .uav-cart-modal-other-variant, .uav-cart-modal-other-qty, .uav-cart-modal-other-price, .uav-cart-modal-shipping-line-label, .uav-cart-modal-shipping-line-value, .uav-ebook-modal-hint { font-size: var(--text-size-s); } } /* Feedback formulaire Brevo — caché si vide (tous breakpoints) */ .uav-brevo-feedback:empty { display: none; } /* ========================================================================== H2 PAGE PRODUIT — HARMONISATION TYPOGRAPHIQUE ========================================================================== */ /* Tous les H2 de la page produit adoptent le style H1 Standard, footer exclu */ .single-product .site-main h2:not(.footer-title) { font-family: var(--font-h1-standard-family); font-size: var(--font-h1-standard-size); font-weight: var(--font-h1-standard-weight); line-height: var(--font-h1-standard-line-height); } /* ========================================================================== SECTION "POURSUIVEZ LE VOYAGE LITTÉRAIRE" + PRODUITS RECOMMANDÉS ========================================================================== */ @media (min-width: 1201px) { .product-voyage-section h2 { width: 72.5vh; } html.uav-horizontal-enabled .product-voyage-section { padding-left: 0; } }