/** * Product Atelier Styles - Desktop * * Surcharges graphiques propres aux fiches "Atelier d'écriture". * Activées via la classe body .is-atelier-product (cf. UAV_Atelier). * * État actuel : le template atelier (single-product-atelier.php) est une COPIE * du template livre. La fiche est donc stylée par products.css exactement comme * un livre. Ce fichier est volontairement vide de règles pour l'instant — il est * prêt à recevoir les surcharges du modèle atelier au fur et à mesure des * ajustements (scoper sous .is-atelier-product pour ne pas toucher les livres). * * @package UneAutreVoix * @author Horizon Signature * @copyright 2026 Horizon Signature * @license Proprietary * @version 0.4.13 * * @changelog * 0.4.13 - Colonne droite "Détails et organisation" : style des 2 blocs h3+texte * (centrés verticalement, titres police H3, listes restaurées). Liens de la * section couverts par le soulignement fin (sélecteur élargi). * 0.4.12 - Description intro : espace entre le dernier paragraphe avant une liste * et la liste réduit à l'espace inter-items (--spacing-2xs). * 0.4.11 - Liens des rich texts atelier (description intro + détails/organisation) : * soulignement 1px à 3px du texte, retiré au survol. * 0.4.10 - Section "Détails et organisation" : retour aux deux colonnes (colonne * droite réservée). Image 16/9 pleine largeur dans la colonne de gauche. * 0.4.9 - Section "Détails et organisation" : passage en une seule colonne ; image * sous le texte au format 16/9, pleine largeur (au lieu de 4/5 colonne droite). * 0.4.8 - Section "Détails et organisation" : image colonne droite au format 4/5, * hauteur 60vh, centrée (réutilise la mise en forme product-avis-*). * 0.4.7 - Lien contact : soulignement affiné (1px, décalé de 3px du texte). * 0.4.6 - Lien contact sous le bouton (.uav-atelier-contact) : sobre, centré, petit. * 0.4.5 - Description intro : puces carrées (list-style-type: square), texte de * liste légèrement réduit (0.95em) et espacement entre items resserré. * 0.4.4 - Encadré : horaires + repas regroupés (.uav-atelier-meta-row, flex-wrap) * sur la même ligne si ça rentre, sinon passage à la ligne. * 0.4.3 - Encadré : lignes d'info (lieu/horaires/repas) empilées (display:flex * + justify-content:center) ; icône meta (horloge/couverts) dimensionnée. * 0.4.2 - Places restantes : gap au prix/bouton divisé par 2 (marge négative * -gap/2 du wrapper) ; écart encadré <-> prix conservé. * 0.4.1 - Places restantes : style sobre (police small text standard, couleur * texte, margin 0) ; suppression du vert/or hors palette et des états low/complet. * 0.4.0 - Sous-titre : animation d'entrée cohérente avec le H1/sur-titre * (slide-fade-in-right, délai 0.2s). Places restantes (stock atelier) : * style accent + états low/complet (couleurs validation/or/erreur). * Bouton "Atelier complet" désactivé (sans opacity). * 0.3.9 - Description : pas de margin-top si le h3 est le premier élément (:first-child). * 0.3.8 - Section détails en pleine largeur (.main-section) : description sur * deux colonnes (column-count: 2, column-gap var(--spacing-xl)) + * margin-top var(--spacing-lg) au-dessus des h3. * 0.3.7 - Colonne infos (.product-hero-infos-produit) centrée verticalement * (align-self: center) au lieu de l'alignement bas du grid. * 0.3.6 - Groupe .atelier-titre-group (sur-titre + H1 + H2) : gap nul interne. * 0.3.5 - Encadré atelier : carte non cliquable (cursor default), lieu non italique * + espace sous la date + icône/lien Google Maps. Section détails en une * colonne (.product-details-columns block) après retrait de la colonne extrait. * 0.3.4 - Description intro : restauration du style des listes (puces + indentation * + espacements) supprimé par le reset global * { padding:0 }, et espacement * des paragraphes. Scopé .is-atelier-product. * 0.3.3 - Sous-titre : spécificité du sélecteur portée à (0,4,1) * (.single-product.is-atelier-product …) pour surcharger la règle globale * h1-standard de façon déterministe, sans dépendre de l'ordre de chargement. * 0.3.2 - Sous-titre atelier (h2.atelier-sous-titre) en police H3, sous le titre. * 0.3.1 - Détails atelier : date et lieu empilés (flex column) au lieu de côte à * côte (trop long sur une ligne). Desktop uniquement (mobile déjà empilé). * 0.3.0 - Hero atelier : image centrée verticalement + horizontalement dans sa * colonne ; bandeau coloré horizontal remplacé par un bandeau VERTICAL * (largeur 22.5vh = ancienne épaisseur), du header au bas de l'écran, * derrière l'image, centré. Centrage via left/margin (pas transform) * pour préserver l'animation d'entrée. Desktop uniquement. * 0.2.0 - Remise à zéro : le template atelier devient une copie du template * livre. Les styles .atelier-* de la v0.1.0 (hero/déroulé/inscription) * sont retirés car leur markup n'existe plus. Placeholder prêt à l'emploi. * 0.1.0 - Version initiale (hero/déroulé/inscription) — obsolète */ @media (min-width: 1201px) { /* Colonne image : pleine hauteur du contenu de la section (95vh - 2*8vh de padding = 79vh), image centrée verticalement ET horizontalement. La colonne infos n'est pas touchée. */ .is-atelier-product .product-hero-image-wrapper { height: 79vh; display: flex; align-items: center; justify-content: center; } /* Annule l'alignement à droite (margin-left:auto) hérité du template livre */ .is-atelier-product .product-hero-main-image { margin-left: 0; } /* Bandeau coloré : vertical, largeur = ancienne épaisseur du bandeau (22.5vh). top/bottom -8vh annulent le padding 8vh de la section → la bande couvre les 95vh visibles (du header au bas de l'écran). Centré derrière l'image via left:50% + margin négatif (et non transform : préserve l'animation d'entrée uav-product-slide-fade-in qui pilote transform). */ .is-atelier-product .product-hero-color-background { top: -8vh; bottom: -8vh; left: 50%; margin-left: -11.25vh; /* moitié de 22.5vh */ width: 22.5vh; height: auto; } /* Détails atelier : date et lieu empilés (l'un sous l'autre) plutôt que côte à côte — trop long sur une seule ligne. Mobile déjà empilé. */ .is-atelier-product .product-single-details-row { flex-direction: column; align-items: flex-start; gap: var(--spacing-2xs); } /* Sous-titre atelier (H2) en police H3, sous le titre. Surcharge la règle globale .single-product .site-main h2:not(.footer-title) (h1-standard). Spécificité (0,4,1) > (0,3,1) → gagne indépendamment de l'ordre de chargement. .single-product et .is-atelier-product cohabitent toujours sur le body atelier. */ .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) : le reset global * { padding:0 } supprime l'indentation des listes → puces débordant à gauche, texte non décalé. On restaure indentation, puces et espacements cohérents. */ .is-atelier-product .product-hero-description-intro ul, .is-atelier-product .product-hero-description-intro ol { margin: 1.5vh 0; padding-left: 3vh; 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-2xs); } .is-atelier-product .product-hero-description-intro li:last-child { margin-bottom: 0; } .is-atelier-product .product-hero-description-intro p { margin-bottom: 1.5vh; } .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-2xs). On traite les deux côtés (les marges se chevauchent). */ .is-atelier-product .product-hero-description-intro p:has(+ ul), .is-atelier-product .product-hero-description-intro p:has(+ ol) { margin-bottom: var(--spacing-2xs); } .is-atelier-product .product-hero-description-intro p + ul, .is-atelier-product .product-hero-description-intro p + ol { margin-top: var(--spacing-2xs); } /* Encadré atelier : carte d'infos statique, pas un choix cliquable. */ .is-atelier-product .uav-atelier-card { cursor: default; } /* Lignes d'info de l'encadré (lieu, horaires, repas) : empilées et centrées. display:flex (et non inline-flex) force chaque ligne sur sa propre ligne ; justify-content:center conserve le centrage de la carte. Non italique. */ .is-atelier-product .uav-atelier-card .uav-variation-description { margin-top: var(--spacing-xs); font-style: normal; display: flex; justify-content: center; align-items: center; gap: 0.6vh; } /* Lieu = lien Google Maps : hérite la couleur, souligné au survol. */ .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: 1.4vh; height: 1.4vh; flex-shrink: 0; fill: currentColor; } /* Horaires + repas : sur la même ligne si ça rentre, sinon passage à la ligne (flex-wrap). La rangée porte l'espacement vertical ; les enfants ne sont plus des lignes pleine largeur mais des éléments dimensionnés par leur contenu. */ .is-atelier-product .uav-atelier-meta-row { margin-top: var(--spacing-xs); 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; } /* Section "Détails de l'atelier" : une seule colonne (colonne extrait retirée). */ .is-atelier-product .product-details-columns { display: block; } /* Groupe sur-titre + titre + sous-titre : gap nul entre eux (le gap de .product-hero-infos-produit ne s'applique plus qu'autour du groupe). */ .is-atelier-product .atelier-titre-group { display: flex; flex-direction: column; gap: 0; } /* Colonne infos centrée verticalement (au lieu de l'alignement bas du grid .product-hero-columns { align-items: end }). align-self ne touche que cette colonne. */ .is-atelier-product .product-hero-infos-produit { align-self: center; } /* Description de l'atelier sur deux colonnes (la section est désormais en pleine largeur .main-section). column-count fait s'écouler le texte sur deux colonnes ; break-inside évite de couper un h3/paragraphe en deux. */ .is-atelier-product .product-details-description { column-count: 2; column-gap: var(--spacing-xl); } .is-atelier-product .product-details-description > * { break-inside: avoid; } /* Espace généreux au-dessus de chaque h3 de la description (sauf s'il ouvre une colonne — géré par column-count). */ .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. */ .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; /* Soulignement fin (hairline) : 1px et décalé de 3px du texte. Le px est le seul rendu net pour un filet aussi fin (la vh le rendrait flou). */ text-decoration-thickness: 1px; text-underline-offset: 3px; } .is-atelier-product .uav-atelier-contact a:hover { text-decoration: none; } /* Section "Détails et organisation" : deux colonnes conservées (la colonne de droite accueillera du contenu ultérieurement). Image sous le texte dans la colonne de gauche, format 16/9, pleine largeur de la colonne. */ .is-atelier-product .atelier-organisation-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; margin-top: var(--spacing-lg); } /* Colonne droite "Détails et organisation" : blocs h3 + texte, centrés verticalement comme la colonne gauche. */ .is-atelier-product .atelier-organisation-aside { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-lg); padding-right: 8vh; } .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; } /* Listes éventuelles (le reset global * { padding:0 } supprime l'indentation). */ .is-atelier-product .atelier-organisation-bloc-texte ul, .is-atelier-product .atelier-organisation-bloc-texte ol { margin: var(--spacing-sm) 0; padding-left: 3vh; 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-2xs); } .is-atelier-product .atelier-organisation-bloc-texte li:last-child { margin-bottom: 0; } /* Liens dans les rich texts atelier (description intro + toute la section "Détails et organisation") : soulignement fin 1px, décalé de 3px du texte. Le px est le seul rendu net pour un filet aussi fin (la vh le rendrait flou). */ .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 (même keyframe slide-fade-in-right, même easing/durée). Délai 0.2s = celui du sur-titre (.product-single-author), pour s'insérer dans la cascade. */ .is-atelier-product h2.atelier-sous-titre { 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; } /* Places restantes (stock WooCommerce) : sous le prix, avant le bouton. Sobre — police small text standard, couleur texte. Marge verticale négative = -gap/2 du wrapper (--spacing-md) : rapproche les places du prix et du bouton (gap divisé par 2 de chaque côté), sans toucher l'écart encadré <-> prix géré par le flex gap. */ .is-atelier-product .uav-atelier-stock { margin: calc(var(--spacing-md) / -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é. Pas d'opacity (interdit) — bordure et texte neutres, fond animé (::before) masqué. Épaisseur de bordure identique au bouton actif (0.4vh) pour rester cohérent. */ .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 0.4vh var(--color-text-light); color: var(--color-text-light) !important; } .is-atelier-product .uav-add-to-cart-btn--disabled::before { display: none; } }