/** * Product Atelier Styles - Responsive (Mobile et Tablette ≤1200px) * * Surcharges mobiles propres aux fiches "Atelier d'écriture". * Activées via la classe body .is-atelier-product (cf. UAV_Atelier). * * État actuel : le template atelier est une COPIE du template livre, stylé par * products.css comme un livre. Fichier volontairement vide de règles pour * l'instant, prêt à recevoir les surcharges mobiles du modèle atelier. * * @package UneAutreVoix * @author Horizon Signature * @copyright 2026 Horizon Signature * @license Proprietary * @version 0.3.19 * * @changelog * 0.3.19 - Colonne droite "Détails et organisation" : style des 2 blocs h3+texte * (mobile). Liens de la section couverts par le soulignement fin. * 0.3.18 - Description intro : espace paragraphe→liste réduit à l'espace inter-items * (--spacing-3xs) (mobile). * 0.3.17 - Liens des rich texts atelier : soulignement 1px à 3px, retiré au survol (mobile). * 0.3.16 - Section "Détails et organisation" : image sous le texte au format 16/9, * pleine largeur (une seule colonne) (mobile). * 0.3.15 - Section "Détails et organisation" : image au format 4/5, pleine largeur * de colonne, alignée avec le texte (mobile). * 0.3.14 - Lien contact : soulignement affiné (1px, décalé de 3px du texte) (mobile). * 0.3.13 - Lien contact sous le bouton (.uav-atelier-contact) : sobre, centré (mobile). * 0.3.12 - Description intro : puces carrées, texte de liste réduit (0.95em), * espacement entre items resserré (mobile). * 0.3.11 - Encadré : horaires + repas regroupés (.uav-atelier-meta-row, flex-wrap) * sur la même ligne si ça rentre (mobile). * 0.3.10 - Encadré : lignes d'info empilées (flex + justify-content:center) ; * icône meta (horloge/couverts) dimensionnée (mobile). * 0.3.9 - Places restantes : gap au prix/bouton divisé par 2 (marge négative -gap/2). * 0.3.8 - Places restantes : style sobre (small text standard, couleur texte, margin 0). * 0.3.7 - Sous-titre : animation d'entrée mobile (slide-fade-in-up, délai 0.3s). * Places restantes (stock atelier) + bouton "Atelier complet" désactivé. * 0.3.6 - Description : pas de margin-top si le h3 est le premier élément (mobile). * 0.3.5 - Description : margin-top généreux au-dessus des h3 (mobile, une colonne). * 0.3.4 - Groupe .atelier-titre-group : gap nul interne (mobile). * 0.3.3 - Encadré atelier (mobile) : carte non cliquable, lieu non italique + icône/lien, * section détails en une colonne. * 0.3.2 - Description intro : style des listes (puces/indentation/espacements) restauré (mobile). * 0.3.1 - Sous-titre : spécificité (0,4,1) pour surcharge déterministe (mobile). * 0.3.0 - Sous-titre atelier (h2.atelier-sous-titre) en police H3 (mobile). * 0.2.0 - Remise à zéro : template atelier = copie du template livre. Styles * .atelier-* de la v0.1.0 retirés (markup remplacé). Placeholder. * 0.1.0 - Version initiale (stack vertical) — obsolète */ @media (max-width: 1200px) { /* Sous-titre atelier (H2) en police H3, sous le titre. Spécificité (0,4,1) > règle globale (0,3,1) → surcharge déterministe (indépendante de l'ordre). */ .single-product.is-atelier-product .site-main h2.atelier-sous-titre { margin: 0; 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); } /* Description intro (éditeur rich text) : restaure l'indentation/puces des listes (supprimées par le reset global * { padding:0 }) + espacements. */ .is-atelier-product .product-hero-description-intro ul, .is-atelier-product .product-hero-description-intro ol { margin: var(--spacing-sm) 0; padding-left: 24px; list-style-position: outside; font-size: 0.95em; /* texte de liste très légèrement réduit */ } .is-atelier-product .product-hero-description-intro ul { list-style-type: square; } .is-atelier-product .product-hero-description-intro ol { list-style-type: decimal; } .is-atelier-product .product-hero-description-intro li { margin-bottom: var(--spacing-3xs); } .is-atelier-product .product-hero-description-intro li:last-child { margin-bottom: 0; } .is-atelier-product .product-hero-description-intro p { margin-bottom: var(--spacing-sm); } .is-atelier-product .product-hero-description-intro p:last-child { margin-bottom: 0; } /* Espace entre le dernier paragraphe avant une liste et la liste = espace inter-items (--spacing-3xs sur mobile). On traite les deux côtés. */ .is-atelier-product .product-hero-description-intro p:has(+ ul), .is-atelier-product .product-hero-description-intro p:has(+ ol) { margin-bottom: var(--spacing-3xs); } .is-atelier-product .product-hero-description-intro p + ul, .is-atelier-product .product-hero-description-intro p + ol { margin-top: var(--spacing-3xs); } /* Encadré atelier : carte statique + lieu (lien Google Maps) non italique. */ .is-atelier-product .uav-atelier-card { cursor: default; } .is-atelier-product .uav-atelier-card .uav-variation-description { margin-top: var(--spacing-2xs); font-style: normal; display: flex; justify-content: center; align-items: center; gap: 4px; } .is-atelier-product .uav-atelier-lieu { color: inherit; text-decoration: none; } .is-atelier-product .uav-atelier-lieu:hover { text-decoration: underline; } .is-atelier-product .uav-atelier-lieu-icon, .is-atelier-product .uav-atelier-meta-icon { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; } /* Horaires + repas : même ligne si ça rentre, sinon passage à la ligne (mobile). */ .is-atelier-product .uav-atelier-meta-row { margin-top: var(--spacing-2xs); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--spacing-2xs) var(--spacing-sm); } .is-atelier-product .uav-atelier-meta-row .uav-atelier-meta { margin-top: 0; } .is-atelier-product .product-details-columns { display: block; } /* Groupe sur-titre + titre + sous-titre : gap nul entre eux (mobile). */ .is-atelier-product .atelier-titre-group { display: flex; flex-direction: column; gap: 0; } /* Description de l'atelier : une seule colonne sur mobile (lisibilité), mais margin-top généreux au-dessus de chaque h3, cohérent avec le desktop. */ .is-atelier-product .product-details-description h3 { margin-top: var(--spacing-lg); } /* Pas de margin-top si le h3 ouvre la description (premier élément). */ .is-atelier-product .product-details-description h3:first-child { margin-top: 0; } /* Lien contact sous le bouton : sobre, centré, petit (mobile). */ .is-atelier-product .uav-atelier-contact { margin: 0; text-align: center; font-family: var(--font-small-text-family); font-size: var(--font-small-text-size); font-weight: var(--font-small-text-weight); line-height: var(--font-small-text-line-height); } .is-atelier-product .uav-atelier-contact a { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .is-atelier-product .uav-atelier-contact a:hover { text-decoration: none; } /* Section "Détails et organisation" : image sous le texte, format 16/9, pleine largeur (la section est en une seule colonne). */ .is-atelier-product .atelier-organisation-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; margin-top: var(--spacing-md); } /* Colonne droite "Détails et organisation" : blocs h3 + texte (mobile). */ .is-atelier-product .atelier-organisation-aside { display: flex; flex-direction: column; gap: var(--spacing-lg); padding-left: var(--spacing-md); padding-right: var(--spacing-md); } .is-atelier-product .atelier-organisation-bloc-titre { margin: 0 0 var(--spacing-xs) 0; 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); } .is-atelier-product .atelier-organisation-bloc-texte { 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); } .is-atelier-product .atelier-organisation-bloc-texte p { margin: 0 0 var(--spacing-sm) 0; } .is-atelier-product .atelier-organisation-bloc-texte p:last-child { margin-bottom: 0; } .is-atelier-product .atelier-organisation-bloc-texte ul, .is-atelier-product .atelier-organisation-bloc-texte ol { margin: var(--spacing-sm) 0; padding-left: 24px; list-style-position: outside; } .is-atelier-product .atelier-organisation-bloc-texte ul { list-style-type: square; } .is-atelier-product .atelier-organisation-bloc-texte ol { list-style-type: decimal; } .is-atelier-product .atelier-organisation-bloc-texte li { margin-bottom: var(--spacing-3xs); } .is-atelier-product .atelier-organisation-bloc-texte li:last-child { margin-bottom: 0; } /* Liens dans les rich texts atelier : soulignement fin 1px / 3px, retiré au survol. */ .is-atelier-product .product-hero-description-intro a, .is-atelier-product .atelier-organisation-section a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .is-atelier-product .product-hero-description-intro a:hover, .is-atelier-product .atelier-organisation-section a:hover { text-decoration: none; } /* Animation d'entrée du sous-titre, cohérente avec le H1 et le sur-titre (variante mobile slide-fade-in-up). Délai 0.3s = celui de .product-single-author. */ .is-atelier-product h2.atelier-sous-titre { will-change: transform, opacity; animation: uav-product-slide-fade-in-up 1.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both; } /* Places restantes (mobile). Marge verticale négative = -gap/2 du wrapper (--spacing-lg sur mobile) : rapproche les places du prix et du bouton sans toucher l'écart encadré <-> prix géré par le flex gap. */ .is-atelier-product .uav-atelier-stock { margin: calc(var(--spacing-lg) / -2) 0; font-family: var(--font-small-text-family); font-size: var(--font-small-text-size); font-weight: var(--font-small-text-weight); line-height: var(--font-small-text-line-height); color: var(--color-text); } /* Bouton "Atelier complet" : désactivé, sans opacity (interdit). */ .is-atelier-product .uav-add-to-cart-btn--disabled, .is-atelier-product .uav-add-to-cart-btn--disabled:hover, .is-atelier-product .uav-add-to-cart-btn--disabled:focus { cursor: not-allowed; box-shadow: inset 0 0 0 var(--border-thick) var(--color-text-light); color: var(--color-text-light) !important; } .is-atelier-product .uav-add-to-cart-btn--disabled::before { display: none; } }