/* Eorys Boutique : styles des outils (galerie, carte, roue, vignettes). Couleurs et polices viennent du thème. */
:root {
	--eo-fond: var(--wp--preset--color--fond, #F4F1EB);
	--eo-papier: var(--wp--preset--color--papier, #FBFAF7);
	--eo-encre: var(--wp--preset--color--encre, #1E1C19);
	--eo-gris: var(--wp--preset--color--gris, #6A645B);
	--eo-trait: var(--wp--preset--color--trait, #DCD6CB);
	--eo-terre: var(--wp--preset--color--terre, #9B4A2B);
	--eo-titre: var(--wp--preset--font-family--titre, 'Cormorant Garamond', serif);
	--eo-cote: var(--wp--preset--font-family--cote, Caveat, cursive);
	--eo-sign: var(--wp--preset--font-family--signature, cursive);
}
/* La grille fournie par WooCommerce reste pour les moteurs de recherche ; on l'efface quand l'outil est actif. */
body.eo-actif .eorys-grille, body.eo-actif main .wp-block-woocommerce-product-collection:not(.eo-garder) { display: none !important; }

#eorys-outils { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
#eorys-outils button { font-family: inherit; cursor: pointer; }
#eorys-outils button:focus-visible, #eorys-outils a:focus-visible, .eo-carte:focus-visible { outline: 2px solid var(--eo-terre); outline-offset: 2px; }
.eo-cache, #eorys-outils [hidden], .eo-carte [hidden] { display: none !important; }

/* Deux entrées : œuvres d'art / villes et lieux */
.eo-modes { display: grid; grid-template-columns: 1fr 1fr; box-shadow: inset 0 0 0 1px var(--eo-encre); }
.eo-mode { min-height: 60px; padding: 6px 8px; border: 0; background: transparent; color: var(--eo-encre); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.eo-mode[aria-pressed="true"] { background: var(--eo-encre); color: var(--eo-fond); }
.eo-mode-nom { font-family: var(--eo-titre); font-size: 1.3rem; line-height: 1; }
.eo-mode-detail { font-size: 0.6875rem; color: var(--eo-gris); }
.eo-mode[aria-pressed="true"] .eo-mode-detail { color: #C4BDB1; }

/* Recherche */
.eo-recherche { position: relative; }
.eo-loupe { position: absolute; left: 0; top: 13px; color: var(--eo-encre); display: flex; }
.eo-champ { width: 100%; height: 48px; padding: 0 0 0 32px !important; border: 0 !important; border-bottom: 1px solid var(--eo-encre) !important; border-radius: 0 !important; background: none !important; font: inherit; font-size: 16px !important; color: var(--eo-encre); box-sizing: border-box; }
.eo-champ:focus { outline: none; border-bottom-width: 2px !important; }
.eo-suggestions { position: absolute; left: 0; right: 0; top: 49px; z-index: 30; background: var(--eo-papier); box-shadow: 0 14px 28px rgba(20, 18, 15, .16); display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.eo-sug { min-height: 48px; padding: 6px 14px; border: 0; border-bottom: 1px solid #ECE7DD; background: none; text-align: left; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--eo-encre); }
.eo-sug.eo-on, .eo-sug:hover { background: var(--eo-fond); }
.eo-sug-nom { font-family: var(--eo-titre); font-size: 1.2rem; }
.eo-sug-detail { font-size: 0.75rem; color: var(--eo-gris); text-align: right; }

/* Rayon de recherche : sous le champ */
.eo-rayons { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: -4px; }
.eo-rayons-txt { font-size: 0.8125rem; }
.eo-rayons-txt strong { font-family: var(--eo-titre); font-size: 1.15rem; font-weight: 500; }
.eo-rayons-choix { display: flex; gap: 4px; }
.eo-tuile-txt { min-height: 40px; min-width: 52px; padding: 0 6px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px #8B857B; color: var(--eo-encre); font-size: 0.75rem; }
.eo-tuile-txt[aria-pressed="true"] { background: var(--eo-encre); color: var(--eo-fond); box-shadow: none; }

/* Mots soulignés (sous-catégories, choix d'une même famille) */
.eo-sous, .eo-choix, .eo-accords, .eo-legende { display: flex; flex-wrap: wrap; gap: 0 16px; }
.eo-legende .eo-point-leg, .eo-choix .eo-point-leg { width: 8px; height: 8px; }
.eo-sous { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: -6px; }
.eo-mot { min-height: 44px; padding: 0; border: 0; background: none; color: var(--eo-gris); font-family: var(--eo-titre); font-size: 1.15rem; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.eo-mot.eo-petit { font-family: inherit; font-size: 0.8125rem; min-height: 40px; }
.eo-mot[aria-pressed="true"] { color: var(--eo-encre); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.eo-mot.eo-petit[aria-pressed="true"] { text-underline-offset: 4px; }
.eo-mot:disabled { opacity: .4; cursor: default; }
.eo-point-leg { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Les quatre filtres, avec leur croix quand ils sont actifs */
.eo-outils { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 5px; }
.eo-outil { display: flex; align-items: stretch; box-shadow: inset 0 0 0 1px #8B857B; min-width: 0; }
.eo-outil.eo-on { box-shadow: inset 0 0 0 1.5px var(--eo-encre); }
.eo-outil.eo-ouvert { background: var(--eo-encre); }
.eo-outil-btn { flex: 1; min-width: 0; min-height: 48px; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; border: 0; background: none; color: var(--eo-encre); font-size: 0.8125rem; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.eo-outil.eo-ouvert .eo-outil-btn, .eo-outil.eo-ouvert .eo-outil-x { color: var(--eo-fond); }
.eo-outil-x { flex: none; width: 24px; padding: 0; border: 0; border-left: 1px solid rgba(139, 133, 123, .5); background: none; color: var(--eo-encre); display: flex; align-items: center; justify-content: center; }
.eo-panneau { background: var(--eo-papier); padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.eo-panneau-txt { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #3F3B35; }

/* Taches d'aquarelle : un pochoir posé sur une couleur */
.eo-aq { display: block; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.eo-aq1 { -webkit-mask-image: var(--eo-aq1); mask-image: var(--eo-aq1); }
.eo-aq2 { -webkit-mask-image: var(--eo-aq2); mask-image: var(--eo-aq2); }
.eo-aq3 { -webkit-mask-image: var(--eo-aq3); mask-image: var(--eo-aq3); }
.eo-aq.eo-mini { width: 15px; height: 15px; }
.eo-aq.eo-moitie { background: linear-gradient(135deg, #FFFFFF 50%, #1E1C19 50%) !important; }
.eo-aq.eo-bord { box-shadow: inset 0 0 0 1px rgba(30, 28, 25, .15); border-radius: 50%; }

/* La roue des couleurs */
.eo-roue { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto; }
.eo-roue-cercle { position: absolute; inset: 9%; border-radius: 50%; border: 1px solid #E2DCD0; }
.eo-roue-centre { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -62%); display: flex; align-items: center; justify-content: center; }
.eo-roue-tache { position: absolute; inset: 0; transition: background .35s ease; }
.eo-roue-centre.eo-nb .eo-roue-tache { background: linear-gradient(135deg, #FFFFFF 50%, #1E1C19 50%); }
.eo-roue-txt { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--eo-encre); padding: 0 6px; }
.eo-roue-txt.eo-clair { color: #FBFAF7; }
.eo-roue-sur { font-size: 0.5625rem; letter-spacing: .18em; text-transform: uppercase; }
.eo-roue-nom { font-family: var(--eo-titre); font-size: 1.25rem; line-height: 1.05; }
.eo-teinte { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; }
.eo-teinte .eo-aq { width: 36px; height: 36px; transition: transform .2s ease; }
.eo-teinte.eo-neutre { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.eo-teinte.eo-neutre .eo-aq { width: 26px; height: 26px; }
/* Le blanc sur fond blanc : un fin contour, posé sur le bouton (le pochoir effacerait un contour posé sur la tache elle-même). */
/* Le blanc sur fond clair : un rond net cerné d'un trait fin (le pochoir d'aquarelle laisserait voir le fond au travers). */
.eo-aq.eo-blanc { -webkit-mask-image: none !important; mask-image: none !important; border-radius: 48% 52% 50% 50% / 52% 47% 53% 48%; box-shadow: inset 0 0 0 1px #BDB5A8; background-color: #FFFFFF; }
.eo-teinte:hover .eo-aq { transform: scale(1.08); }
.eo-crayon { position: absolute; inset: -3px; color: var(--eo-encre); pointer-events: none; }
.eo-crayon svg { width: 100%; height: 100%; transform: rotate(-12deg); }
.eo-crayon.eo-leger { color: #9A9387; }
.eo-teinte.eo-neutre .eo-crayon { inset: 0; }

/* Puces des filtres actifs */
.eo-ligne-puces { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 34px; }
.eo-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.eo-puce { min-height: 34px; padding: 0 9px 0 11px; border: 0; background: var(--eo-encre); color: var(--eo-fond); font-size: 0.75rem; display: inline-flex; align-items: center; gap: 8px; }
.eo-compte { flex: none; font-size: 0.8125rem; color: var(--eo-gris); padding-top: 8px; }

/* Carte */
.eo-carte-hote { margin: 0 calc(-1 * var(--wp--style--root--padding-left, 20px)); }
.eo-carte { position: relative; height: clamp(260px, 62vw, 520px); overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; background: var(--eo-papier); }
.eo-carte.eo-glisse { cursor: grabbing; }
.eo-calque { position: absolute; left: 0; top: 0; width: 512px; height: 242.66px; transform-origin: 0 0; will-change: transform; }
.eo-fond { position: absolute; left: 0; top: 0; width: 512px !important; height: 242.66px !important; max-width: none !important; display: block; pointer-events: none; }
.eo-tuiles img { position: absolute; max-width: none !important; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.eo-tuiles img.eo-ok { opacity: 1; }
.eo-points, .eo-bateaux, .eo-zone-couche { position: absolute; inset: 0; }
.eo-point { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; transform: scale(var(--inv)); transform-origin: 50% 50%; z-index: 1; }
.eo-pastille { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(251, 250, 247, .95), 0 1px 3px rgba(20, 18, 15, .35); opacity: .35; transition: transform .2s ease, opacity .2s ease; }
.eo-point.eo-actif .eo-pastille { opacity: 1; }
.eo-point.eo-choisi { z-index: 3; }
.eo-point.eo-choisi .eo-pastille { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; box-shadow: 0 0 0 2px #FBFAF7, 0 0 0 3.5px var(--eo-terre); }
.eo-point:hover .eo-pastille { transform: scale(1.25); }
.eo-point .eo-nom { position: absolute; left: 31px; top: 13px; padding: 2px 6px 1px; background: rgba(251, 250, 247, .94); font-size: 12px; line-height: 1.3; white-space: nowrap; color: var(--eo-encre); display: none; }
.eo-carte.eo-proche .eo-point.eo-actif .eo-nom, .eo-point.eo-choisi .eo-nom, .eo-point:hover .eo-nom { display: block; }
.eo-zone-ecran { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.eo-zone { position: absolute; border-radius: 50%; box-sizing: border-box; border: 1.2px dashed var(--eo-terre); background: rgba(155, 74, 43, .07); }
.eo-calque-anime ~ .eo-zone-ecran .eo-zone { transition: all 1s cubic-bezier(.22,.8,.2,1); }
.eo-repere { position: absolute; width: 0; height: 0; transform: scale(var(--inv)); }
.eo-repere-rond { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; box-sizing: border-box; border: 1.5px solid var(--eo-terre); border-radius: 50%; background: #FBFAF7; }
.eo-repere-pouls { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid var(--eo-terre); border-radius: 50%; animation: eo-pouls 1.9s ease-out infinite; }
.eo-repere-nom { position: absolute; left: 12px; top: -28px; font-family: var(--eo-cote); font-size: 20px; line-height: 1; color: #7A3A20; white-space: nowrap; transform: rotate(-4deg); }
.eo-bateau { position: absolute; width: 0; height: 0; transform: scale(calc(var(--inv) * .9)); }
.eo-bateau img { position: absolute; left: -11px; top: -11px; width: 22px !important; height: 22px; max-width: none !important; animation: eo-houle 4.5s ease-in-out infinite; animation-delay: inherit; }
.eo-grain { position: absolute; inset: 0; pointer-events: none; background-size: 96px 96px; mix-blend-mode: multiply; opacity: .6; }
.eo-nuages { position: absolute; inset: 0; pointer-events: none; transition: opacity .8s ease; overflow: hidden; }
.eo-nuage { position: absolute; max-width: none !important; filter: drop-shadow(0 12px 10px rgba(52, 58, 76, .16)); opacity: 0; }
.eo-nuage-1 { left: -10%; top: 2%; width: 95%; animation: eo-nuage-a 46s ease-in-out infinite; }
.eo-nuage-2 { left: 30%; top: 46%; width: 110%; animation: eo-nuage-b 58s ease-in-out infinite; animation-delay: -18s; }
.eo-nuage-3 { left: -30%; top: 60%; width: 70%; animation: eo-nuage-a 38s ease-in-out infinite; animation-delay: -27s; }
.eo-vignettage { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 66% 64% at 50% 50%, rgba(244, 241, 235, 0) 52%, rgba(244, 241, 235, .82) 84%, var(--eo-fond) 100%); }
.eo-zoom { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; }
.eo-rond { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--eo-papier); box-shadow: 0 4px 12px rgba(20, 18, 15, .16); color: var(--eo-encre); display: flex; align-items: center; justify-content: center; }
.eo-retirer { position: absolute; left: 12px; top: 12px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--eo-papier); box-shadow: 0 4px 12px rgba(20, 18, 15, .14); color: var(--eo-encre); font-size: 0.75rem; display: inline-flex; align-items: center; gap: 7px; }
.eo-aide { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--eo-gris); pointer-events: none; }
.eo-legende { margin-top: -6px; }

/* Résultats */
.eo-resultats { position: relative; display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px; }
.eo-titre-resultats { margin: 4px 0 0; font-family: var(--eo-titre); font-weight: 400; font-size: 1.75rem; line-height: 1.05; }
.eo-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 10px; }
@media (min-width: 900px) { .eo-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 18px; } }
.eo-vide { margin: 0; font-family: var(--eo-titre); font-style: italic; font-size: 1.35rem; line-height: 1.25; }
.eo-esprit { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }

/* Vignettes */
.eo-carte-oeuvre { display: flex; flex-direction: column; min-width: 0; }
.eo-vig { position: relative; aspect-ratio: 4 / 5; background: #E9E3D8; overflow: hidden; }
.eo-piste { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; text-decoration: none; }
.eo-piste::-webkit-scrollbar { display: none; }
.eo-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; position: relative; overflow: hidden; }
.eo-slide > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eo-mur { display: flex !important; align-items: center; justify-content: center; }
.eo-mur, .eo-acc-mur, .eo-scene { background-image: var(--eo-platre); background-size: cover; background-position: center; background-blend-mode: multiply; }
.eo-mur.eo-mur-blanc, .eo-acc-mur.eo-mur-blanc, .eo-scene.eo-mur-blanc { background-image: none; }
.eo-mur::before { content: ''; position: absolute; inset: 0; background-image: var(--eo-platre); background-size: cover; mix-blend-mode: multiply; opacity: 0; }
.eo-mur.eo-mur-blanc::before, .eo-acc-mur.eo-mur-blanc::before, .eo-scene.eo-mur-blanc::before { opacity: .12 !important; }
.eo-mur::after, .eo-acc-mur::after { content: ''; position: absolute; left: -45%; top: -25%; width: 190%; height: 150%; background: var(--eo-ombre-fenetre) center / contain no-repeat; mix-blend-mode: multiply; opacity: .2; pointer-events: none; animation: eo-glisse 18s ease-in-out infinite alternate; z-index: 1; }
.eo-mur img.eo-oeuvre { position: relative; width: 56% !important; height: auto !important; aspect-ratio: 3 / 4; object-fit: cover; outline: 4px solid transparent; box-shadow: 5px 8px 10px 3px rgba(20, 18, 15, .22), 2px 3px 3px 3px rgba(20, 18, 15, .16); }
.eo-indic { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.eo-indic span { width: 5px; height: 5px; border-radius: 50%; background: rgba(251, 250, 247, .55); box-shadow: 0 0 0 1px rgba(30, 28, 25, .3); }
.eo-indic span.eo-on { background: #FBFAF7; }
.eo-etiq { position: absolute; left: 0; top: 12px; padding: 5px 9px 4px; background: var(--eo-papier); font-size: 0.625rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.eo-etiq.eo-promo { background: var(--eo-terre); color: #fff; }
.eo-coeur { position: absolute; right: 0; top: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--eo-encre); display: flex; align-items: center; justify-content: center; }
.eo-coeur svg { width: 30px; height: 30px; padding: 6.5px; border-radius: 50%; background: rgba(251, 250, 247, .9); box-sizing: border-box; fill: none; }
.eo-coeur.eo-on svg { fill: var(--eo-encre); }
.eo-teintes-cadre { display: flex; margin-left: -10px; }
.eo-teintes-cadre button { width: 32px; height: 38px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; }
.eo-teintes-cadre span { width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; border: 1px solid #8B857B; }
.eo-teintes-cadre .eo-on span { box-shadow: 0 0 0 2px var(--eo-fond), 0 0 0 3px var(--eo-encre); }
.eo-nom-oeuvre { font-family: var(--eo-titre); font-size: 1.25rem; line-height: 1.15; text-decoration: none; color: var(--eo-encre); }
.eo-prix { margin-top: 3px; font-size: 0.8125rem; color: var(--eo-gris); }

/* Encarts entre les rangées */
.eo-rupture { grid-column: 1 / -1; }
.eo-conseil { padding: 22px 20px 16px; background: #FFFFFF; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: center; }
.eo-conseil-chiffre { display: flex; align-items: center; gap: 10px; font-family: var(--eo-titre); font-size: 2.25rem; line-height: 1; }
.eo-conseil p { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.eo-surtitre { font-size: 0.6875rem !important; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--eo-terre); margin-bottom: 4px !important; }
.eo-signature { display: block; width: 118px; margin: 6px 0 0 auto; }
.eo-entrees { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eo-entree { padding: 16px 14px; border: 0; background: var(--eo-papier); text-align: left; display: flex; flex-direction: column; gap: 10px; color: var(--eo-encre); }
.eo-entree-taches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.eo-entree-taches .eo-aq { aspect-ratio: 1; }
.eo-entree-carte { display: block; height: 56px; background-size: 260% auto; background-position: 46% 26%; background-repeat: no-repeat; }
.eo-entree-titre { font-family: var(--eo-sign); font-size: 2rem; line-height: .9; padding-top: 4px; }
.eo-entree-txt { font-size: 0.8125rem; color: var(--eo-gris); line-height: 1.4; }

/* Bascule « En situation / Sur votre mur », toujours à portée de doigt */
.eo-bascule-hote { position: sticky; bottom: 16px; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; pointer-events: none; }
.eo-bascule { pointer-events: auto; display: flex; background: var(--eo-encre); color: var(--eo-fond); border-radius: 999px; padding: 4px; box-shadow: 0 10px 24px rgba(20, 18, 15, .28); }
.eo-bascule.eo-appel { animation: eo-appel 6s ease-in-out 2s infinite; }
.eo-bascule-btn { min-height: 44px; padding: 0 15px 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--eo-fond); font-size: 0.8125rem; display: flex; align-items: center; gap: 8px; }
.eo-bascule-btn[aria-pressed="true"] { background: var(--eo-fond); color: var(--eo-encre); }
.eo-bascule-mur { min-height: 44px; padding: 0 12px 0 10px; border: 0; background: none; color: var(--eo-fond); display: flex; align-items: center; gap: 7px; }
.eo-rond-mur { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--eo-fond); }
.eo-palette { pointer-events: auto; width: min(320px, 100%); padding: 12px 10px 6px; background: var(--eo-papier); box-shadow: 0 14px 30px rgba(20, 18, 15, .22); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 4px; }
.eo-palette button { padding: 0 0 4px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--eo-encre); }
.eo-palette .eo-aq { width: 38px; height: 38px; }
.eo-palette-nom { font-size: 0.625rem; line-height: 1.15; text-align: center; }
.eo-palette button[aria-pressed="true"] .eo-palette-nom { text-decoration: underline; text-underline-offset: 3px; }

@keyframes eo-pouls { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes eo-houle { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-2px) rotate(6deg); } }
@keyframes eo-nuage-a { 0% { transform: translate3d(-12%, 2%, 0) scale(.96); opacity: 0; } 20% { opacity: .9; } 75% { opacity: .85; } 100% { transform: translate3d(18%, -3%, 0) scale(1.04); opacity: 0; } }
@keyframes eo-nuage-b { 0% { transform: translate3d(10%, 0, 0); opacity: 0; } 25% { opacity: .75; } 70% { opacity: .7; } 100% { transform: translate3d(-20%, 4%, 0); opacity: 0; } }
@keyframes eo-appel { 0%, 84%, 100% { transform: scale(1); } 88% { transform: scale(1.07); } 92% { transform: scale(.98); } 96% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .eo-nuage, .eo-bateau img, .eo-repere-pouls, .eo-bascule.eo-appel { animation: none !important; } .eo-nuage { opacity: .6; } }

/* ---------- Fiche produit : simulateur et options ---------- */
body.eo-simulateur-actif .eorys-resume table.variations, body.eo-simulateur-actif .woocommerce-variation-price, body.eo-simulateur-actif .reset_variations { display: none !important; }
#eorys-simulateur { margin: 6px 0 4px; }
.eo-sim { display: flex; flex-direction: column; gap: 10px; }
.eo-sim button { font-family: inherit; cursor: pointer; }
.eo-sim-titre { margin: 8px 0 -4px; font-family: var(--eo-sign); font-size: 2.6rem; line-height: .9; padding-top: 6px; }
.eo-sim-pieces { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.eo-sim-murs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin: -6px -4px -2px; }
.eo-sim-mur { width: 100%; height: 40px; padding: 0; border: 0; background: none; position: relative; display: flex; align-items: center; justify-content: center; }
.eo-sim-mur .eo-aq { width: min(26px, 85%); aspect-ratio: 1; height: auto; }
.eo-sim-mur.eo-on::after { content: ''; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 1.3px solid var(--eo-encre); border-radius: 50%; transform: rotate(-8deg); }
.eo-scene { position: relative; width: 100%; aspect-ratio: 358 / 356; overflow: hidden; container-type: inline-size; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: background-color .45s ease; opacity: 0; transform: translateY(24px); }
.eo-scene.eo-vue { opacity: 1; transform: none; transition: background-color .45s ease, opacity .8s ease, transform .8s ease; }
.eo-scene::before { content: ''; position: absolute; inset: 0; background-image: var(--eo-platre); background-size: cover; mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
.eo-scene > img { position: absolute; max-width: none !important; pointer-events: none; }
.eo-sim-ombre { left: -14cqw; top: -25cqw; width: 128cqw; height: auto; mix-blend-mode: multiply; transition: opacity 1.4s ease; animation: eo-derive 9s ease-in-out infinite alternate, eo-souffle 7s ease-in-out infinite; }
.eo-sim-ombre.eo-ombre-1, .eo-sim-ombre.eo-ombre-3 { animation: eo-glisse 16s ease-in-out infinite alternate, eo-souffle 11s ease-in-out infinite; }
.eo-scene.eo-soir .eo-sim-ombre { opacity: 0 !important; }
.eo-sim-halo { inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.4s ease; z-index: 1; }
.eo-scene.eo-soir .eo-sim-halo { opacity: 1; }
.eo-sim-papier { position: absolute; z-index: 2; background: #FBFAF7; box-sizing: border-box; box-shadow: .5cqw .8cqw 1cqw rgba(20, 18, 15, .22), .15cqw .25cqw .3cqw rgba(20, 18, 15, .18); transition: all .35s ease; }
.eo-sim-papier.eo-encadre { outline: var(--face) solid var(--cadre); outline-offset: calc(var(--face) * -0.25); box-shadow: .6cqw 1cqw 1.2cqw calc(var(--face) * .75) rgba(20, 18, 15, .24), .15cqw .3cqw .35cqw calc(var(--face) * .75) rgba(20, 18, 15, .2); }
.eo-sim-papier img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; }
.eo-sim-papier.eo-marge { padding: var(--pad); }
.eo-scene.eo-soir .eo-sim-papier { filter: brightness(.86); }
.eo-cote { position: absolute; z-index: 2; font-family: var(--eo-cote); font-size: 4.6cqw; line-height: 1; color: #3A3632; white-space: nowrap; transition: all .35s ease; }
.eo-cote-l { transform: translateX(-50%); }
.eo-scene.eo-soir .eo-cote { color: #F4F1EB; }
.eo-sim-meubles { left: 0; bottom: 0; width: 100% !important; height: auto; z-index: 3; transition: opacity 1.4s ease; }
.eo-sim-nuit { opacity: 0; }
.eo-scene.eo-soir .eo-sim-nuit { opacity: 1; }
.eo-scene.eo-soir .eo-sim-meubles:not(.eo-sim-nuit) { opacity: 0; }
.eo-sim-lampe { z-index: 4; height: auto; transform-origin: 50% 0; transform: translateY(-120%) rotate(14deg); opacity: 0; transition: transform .9s cubic-bezier(.5, -.3, .7, .3), opacity .5s ease .4s; }
.eo-scene.eo-soir .eo-sim-lampe { opacity: 1; transition: opacity .2s ease; animation: eo-balance 2.6s cubic-bezier(.3, .6, .3, 1) both; }
.eo-sim-lumiere { position: absolute; right: 2cqw; top: 2cqw; z-index: 5; display: flex; padding: 0 5px; background: #F6F3EC; filter: drop-shadow(0 2px 3px rgba(20, 18, 15, .25)); clip-path: polygon(0% 8%, 6% 3%, 15% 7%, 27% 2%, 40% 6%, 54% 1%, 68% 6%, 81% 2%, 92% 7%, 100% 4%, 99% 91%, 93% 97%, 82% 93%, 70% 99%, 55% 94%, 41% 100%, 27% 94%, 13% 99%, 2% 93%); }
.eo-sim-lumiere button { min-height: 44px; padding: 0 9px; border: 0; background: none; font-size: 0.6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #8B857B; }
.eo-sim-lumiere button[aria-pressed="true"] { color: var(--eo-encre); text-decoration: underline; text-underline-offset: 5px; }
.eo-sim-lib { margin: 6px 0 -4px; font-size: 0.8125rem; }
.eo-sim-lib span { color: var(--eo-gris); }
.eo-sim-options { display: grid; gap: 6px; }
.eo-sim-tailles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eo-sim-cadres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eo-sim-finitions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eo-sim-tuile { min-height: 58px; padding: 6px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px #8B857B; color: var(--eo-encre); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 0.8125rem; text-align: center; }
.eo-sim-cadres .eo-sim-tuile { flex-direction: row; justify-content: flex-start; gap: 9px; text-align: left; }
.eo-sim-tuile[aria-pressed="true"] { background: var(--eo-encre); color: var(--eo-fond); box-shadow: none; }
.eo-sim-po { font-size: 0.6875rem; color: var(--eo-gris); }
.eo-sim-prix { font-size: 0.75rem; }
.eo-sim-tuile[aria-pressed="true"] .eo-sim-po { color: #C4BDB1; }
.eo-sim-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.eo-sim-pastille { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(139, 133, 123, .9); }
.eo-sim-pastille.eo-sans { box-shadow: none; border: 1px dashed #8B857B; box-sizing: border-box; }
.eo-sim-note { margin: -2px 0 0; font-size: 0.75rem; color: var(--eo-gris); }
.eo-sim-recap { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--eo-trait); display: flex; flex-direction: column; gap: 4px; }
.eo-sim-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.875rem; }
.eo-sim-ligne > span:last-child { flex: none; }
.eo-gris { color: var(--eo-gris); }
.eo-sim-pays { min-height: 40px; padding: 0; border: 0; background: none; color: var(--eo-encre); font-size: 0.875rem; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 4px; }
.eo-sim-paysbox { background: var(--eo-papier); padding: 4px 12px 6px; }
.eo-sim-liste { display: flex; flex-direction: column; }
.eo-sim-totalligne { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--eo-trait); }
.eo-sim-total { font-family: var(--eo-titre); font-size: 2rem; line-height: 1; }
.eo-sim-alerte { margin: 6px 0; padding: 10px 12px; background: #F6E9E3; color: #7A3A20; font-size: 0.875rem; }
.eo-sim-petit { margin: 2px 0 0; font-size: 0.75rem; color: var(--eo-gris); line-height: 1.45; }
.flex-control-thumbs li.eo-raccourci button { width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; }
.eo-raccourci-mur { width: 64px; height: 46px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(30, 28, 25, .12); }
.eo-raccourci-cadre { width: 14px; height: 19px; background: #FBFAF7; outline: 2px solid #C9A77A; box-shadow: 0 3px 4px rgba(20, 18, 15, .25); }
.eo-raccourci-txt { font-size: 0.625rem; line-height: 1.1; color: var(--eo-encre); }
@keyframes eo-derive { 0% { transform: translate3d(-4cqw, -2cqw, 0) rotate(-3deg) scale(1.02); } 50% { transform: translate3d(1cqw, 2cqw, 0) rotate(1deg) scale(1.07); } 100% { transform: translate3d(5cqw, 3cqw, 0) rotate(3.5deg) scale(1.03); } }
@keyframes eo-glisse { from { transform: translate3d(-8cqw, -1cqw, 0) skewX(-3deg); } to { transform: translate3d(7cqw, 2cqw, 0) skewX(4deg); } }
@keyframes eo-souffle { 0%, 100% { opacity: .16; } 50% { opacity: .34; } }
@keyframes eo-balance { 0% { transform: translateY(-120%) rotate(16deg); } 35% { transform: translateY(0) rotate(-11deg); } 55% { transform: translateY(0) rotate(7deg); } 72% { transform: translateY(0) rotate(-4deg); } 86% { transform: translateY(0) rotate(2deg); } 100% { transform: translateY(0) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .eo-sim-ombre, .eo-scene.eo-soir .eo-sim-lampe { animation: none !important; } .eo-scene { opacity: 1; transform: none; } }
.eo-scene.eo-depart .eo-sim-lampe { opacity: 1; animation: eo-remonte 1.2s ease-in both; }
@keyframes eo-remonte { 0% { transform: translateY(0) rotate(0); } 25% { transform: translateY(0) rotate(-9deg); } 45% { transform: translateY(-6%) rotate(6deg); } 100% { transform: translateY(-130%) rotate(14deg); } }

/* ---------- Accueil ---------- */
#eorys-couleurs-accueil, #eorys-carte-accueil { max-width: 1280px; margin-left: auto !important; margin-right: auto !important; }
.eo-acc { display: flex; flex-direction: column; gap: 12px; padding: 34px 0 30px; }
.eo-acc-titre { margin: 0; font-family: var(--eo-sign); font-weight: 400; font-size: 3rem; line-height: .85; padding-top: 8px; }
.eo-acc-txt { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--eo-gris); }
.eo-acc-mur { position: relative; margin: 4px calc(-1 * var(--wp--style--root--padding-left, 20px)) 0; height: 270px; display: flex; align-items: center; justify-content: center; gap: 18px; transition: background-color .45s ease; overflow: hidden; }
.eo-acc-mur::before { content: ''; position: absolute; inset: 0; background-image: var(--eo-platre); background-size: cover; mix-blend-mode: multiply; opacity: 0; }
.eo-acc-oeuvre { position: relative; display: block; }
.eo-acc-oeuvre img { width: 88px !important; height: 117px !important; max-width: none !important; object-fit: cover; display: block; outline: 4px solid #C9A77A; box-shadow: 6px 9px 11px 4px rgba(20, 18, 15, .22), 2px 3px 3px 4px rgba(20, 18, 15, .16); }
.eo-acc-oeuvre { z-index: 2; }
.eo-acc-lien { align-self: flex-start; padding: 10px 0 4px; font-size: 0.6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--eo-encre); text-decoration: none; border-bottom: 1px solid var(--eo-encre); }
.eo-acc-carte { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 0 36px; padding: 16px; background: var(--eo-papier); color: var(--eo-encre); text-decoration: none; }
.eo-acc-carte-img { height: 82px; background-size: 330% auto; background-position: 47% 27%; background-repeat: no-repeat; }
.eo-acc-carte-txt { display: flex; flex-direction: column; gap: 4px; }
.eo-acc-carte-titre { font-family: var(--eo-titre); font-size: 1.45rem; line-height: 1.05; }

.eo-sim-monde { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.eo-sim-monde > img { position: absolute; max-width: none !important; pointer-events: none; }
.eo-coeur.eo-coeur-fiche { position: absolute; right: 8px; top: 52px; z-index: 5; }
.woocommerce-product-gallery__trigger { z-index: 6; }
/* Page Favoris */
#eorys-favoris { display: flex; flex-direction: column; gap: 18px; }
.eo-fav-mur { position: relative; margin: 0 calc(-1 * var(--wp--style--root--padding-left, 20px)); min-height: 300px; padding: 34px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 16px; overflow: hidden; transition: background-color .45s ease; }
.eo-fav-mur::before { content: ''; position: absolute; inset: 0; background-image: var(--eo-platre); background-size: cover; mix-blend-mode: multiply; opacity: 0; }
.eo-fav-mur.eo-mur-blanc::before { opacity: .12; }
.eo-fav-mur:not(.eo-mur-blanc) { background-image: var(--eo-platre); background-size: cover; background-blend-mode: multiply; }
.eo-fav-mur::after { content: ''; position: absolute; left: -45%; top: -25%; width: 190%; height: 150%; background: var(--eo-ombre-feuilles) center / contain no-repeat; mix-blend-mode: multiply; opacity: .18; pointer-events: none; animation: eo-derive 12s ease-in-out infinite alternate; z-index: 1; }
.eo-fav-mur a { position: relative; z-index: 2; display: block; }
.eo-fav-mur img { display: block; width: auto !important; max-width: none !important; object-fit: cover; outline: 3px solid #C9A77A; box-shadow: 5px 8px 10px 3px rgba(20, 18, 15, .22), 2px 3px 3px 3px rgba(20, 18, 15, .16); }
.eo-fav-vide { margin: 0; font-family: var(--eo-titre); font-style: italic; font-size: 1.35rem; line-height: 1.3; }
.eo-fav-lien { align-self: flex-start; padding: 10px 0 4px; font-size: 0.6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--eo-encre); text-decoration: none; border-bottom: 1px solid var(--eo-encre); }

/* Ça va bien ensemble (fiche produit) */
#eorys-ensemble { margin: 26px 0 8px; }
.eo-ens { display: flex; flex-direction: column; gap: 12px; }
.eo-ens-titre { margin: 0; font-family: var(--eo-titre); font-weight: 400; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.02; }
.eo-ens-mur { position: relative; margin: 6px calc(-1 * var(--wp--style--root--padding-left, 20px)) 0; height: 290px; display: flex; align-items: center; justify-content: center; gap: 18px; overflow: hidden; }
.eo-ens-mur:not(.eo-mur-blanc) { background-image: var(--eo-platre); background-size: cover; background-blend-mode: multiply; }
.eo-ens-mur::after { content: ''; position: absolute; left: -45%; top: -25%; width: 190%; height: 150%; background: var(--eo-ombre-feuilles) center / contain no-repeat; mix-blend-mode: multiply; opacity: .18; pointer-events: none; animation: eo-derive 12s ease-in-out infinite alternate; z-index: 1; }
.eo-ens-col { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 2; }
.eo-ens-mur a { position: relative; z-index: 2; display: block; }
.eo-ens-mur img { display: block; max-width: none !important; object-fit: cover; aspect-ratio: 3 / 4; outline: 3px solid #C9A77A; box-shadow: 5px 8px 10px 3px rgba(20, 18, 15, .22), 2px 3px 3px 3px rgba(20, 18, 15, .16); }

/* Ombre des murs : l'image d'ombre déborde largement du mur, son bord ne se voit jamais. */
.eo-mur::after, .eo-acc-mur::after, .eo-fav-mur::after, .eo-ens-mur::after { left: -30%; top: -30%; width: 160%; height: 160%; background-size: cover; background-position: center; animation: eo-ombre-mur 18s ease-in-out infinite alternate; }
@keyframes eo-ombre-mur { from { transform: translate3d(-6%, -2%, 0) skewX(-3deg); } to { transform: translate3d(6%, 3%, 0) skewX(3deg); } }

/* « Sur votre mur » clignote doucement tant qu'on ne l'a pas essayé */
.eo-bascule.eo-appel { animation: none; }
.eo-bascule-btn.eo-appel { animation: eo-clignote 2.6s ease-in-out infinite; }
@keyframes eo-clignote { 0%, 100% { transform: scale(1); background-color: rgba(244, 241, 235, 0); } 50% { transform: scale(1.07); background-color: rgba(244, 241, 235, .26); } }
.eo-bascule-zone { position: relative; pointer-events: auto; }
.eo-indice { position: absolute; left: 22%; bottom: calc(100% - 4px); display: flex; align-items: flex-start; color: #7A3A20; pointer-events: none; }
.eo-indice-txt { margin-top: 2px; padding: 1px 8px 2px; border-radius: 40% 55% 45% 60% / 60% 45% 55% 40%; background: rgba(251, 250, 247, .93); font-family: var(--eo-cote); font-size: 1.6rem; line-height: 1; white-space: nowrap; transform: rotate(-5deg); animation: eo-apparait .6s ease-out both; }
.eo-indice-fleche { display: block; width: 50px; height: 54px; margin-left: -4px; filter: drop-shadow(0 0 1.5px #FBFAF7) drop-shadow(0 0 1px #FBFAF7); }
.eo-indice-fleche svg { width: 100%; height: 100%; }
.eo-indice .eo-trait { stroke-dasharray: 1; stroke-dashoffset: 1; animation: eo-trace .9s ease-out .35s forwards; }
.eo-indice .eo-pointe { stroke-dasharray: 1; stroke-dashoffset: 1; animation: eo-trace .35s ease-out 1.2s forwards; }
.eo-indice.eo-fixe .eo-indice-txt { animation: none; }
.eo-indice.eo-fixe .eo-trait, .eo-indice.eo-fixe .eo-pointe { animation: none; stroke-dashoffset: 0; }
@keyframes eo-trace { to { stroke-dashoffset: 0; } }
@keyframes eo-apparait { from { opacity: 0; transform: translateY(6px) rotate(-5deg); } to { opacity: 1; transform: rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) { .eo-bascule-btn.eo-appel, .eo-indice-txt { animation: none !important; } .eo-indice .eo-trait, .eo-indice .eo-pointe { animation: none !important; stroke-dashoffset: 0; } .eo-mur::after, .eo-acc-mur::after, .eo-fav-mur::after, .eo-ens-mur::after { animation: none !important; } }

/* Favoris : teinte du mur et suggestions */
.eo-fav-murs { margin: 0 -4px; }
.eo-fav-suite { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }

/* « Sur votre mur » : seul un contour blanc clignote */
.eo-bascule-btn.eo-appel { animation: none; position: relative; }
.eo-bascule-btn.eo-appel::after { content: ''; position: absolute; inset: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #FFFFFF; animation: eo-contour 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes eo-contour { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* Les indications manuscrites disparaissent 1 s toutes les 6 s */
.eo-indice, .eo-guide.eo-vu { animation: eo-respire 6s ease-in-out 2.4s infinite; }
@keyframes eo-respire { 0%, 78% { opacity: 1; } 81%, 97% { opacity: 0; } 100% { opacity: 1; } }

/* Fiche : guide « Choisissez votre pièce » */
.eo-sim-tete { position: relative; display: flex; align-items: flex-end; justify-content: space-between; min-height: 56px; }
.eo-guide { position: relative; display: flex; align-items: flex-start; color: #7A3A20; opacity: 0; pointer-events: none; margin-bottom: -26px; }
.eo-guide.eo-vu { opacity: 1; }
.eo-guide.eo-fini { display: none; }
.eo-guide-txt { font-family: var(--eo-cote); font-size: 1.25rem; line-height: 1; text-align: right; transform: rotate(-4deg); padding-top: 2px; }
.eo-guide-fleche { display: block; width: 34px; height: 40px; margin: 14px 0 0 2px; }
.eo-guide-fleche svg, .eo-panier-fleche svg { width: 100%; height: 100%; }
.eo-guide .eo-trait, .eo-guide .eo-pointe, .eo-panier-indice .eo-trait, .eo-panier-indice .eo-pointe { stroke-dasharray: 1; stroke-dashoffset: 1; }
.eo-guide.eo-vu .eo-trait, .eo-panier-ligne.eo-vu .eo-trait { animation: eo-trace .9s ease-out .3s forwards; }
.eo-guide.eo-vu .eo-pointe, .eo-panier-ligne.eo-vu .eo-pointe { animation: eo-trace .35s ease-out 1.15s forwards; }

/* Cotes manuscrites : sombres sur un mur clair, claires sur un mur sombre */
.eo-scene .eo-cote, .eo-scene.eo-soir .eo-cote { color: #2A2622; text-shadow: 0 0 3px rgba(251, 250, 247, .7); }
.eo-scene.eo-cote-claire .eo-cote { color: #FBFAF7; text-shadow: 0 0 3px rgba(20, 18, 15, .45); }
.eo-sim-papier.eo-marge { padding: var(--pad); }

/* Ça va bien ensemble : le titre en grand, le trio en dessous */
.eo-ens-titre { font-size: clamp(2.2rem, 8vw, 3rem); }
.eo-ens-trio { margin: -4px 0 0; font-family: var(--eo-titre); font-style: italic; font-size: 1.25rem; line-height: 1.2; color: var(--eo-gris); }
.eo-autour { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }

/* Panier : le mockup du choix exact, et « Ajoutez-le au panier ! » */
.eo-panier-ligne { position: relative; display: flex; align-items: stretch; gap: 12px; width: 100%; }
.eo-panier-ligne .single_add_to_cart_button { flex: 1; width: auto !important; }
.eo-panier-mockup, .eo-panier-indice { display: none; }
.eo-panier-ligne.eo-avec-mockup { margin-top: 58px; }
.eo-panier-ligne.eo-avec-mockup .eo-panier-mockup { display: block; flex: 0 0 74px; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 3px 5px 8px rgba(20, 18, 15, .2); }
.eo-panier-mockup img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eo-panier-ligne.eo-avec-mockup .eo-panier-indice { display: flex; position: absolute; left: 34px; bottom: calc(100% - 6px); align-items: flex-end; color: #7A3A20; pointer-events: none; opacity: 0; }
.eo-panier-ligne.eo-vu .eo-panier-indice { opacity: 1; transition: opacity .4s ease; }
.eo-panier-txt { font-family: var(--eo-cote); font-size: 1.45rem; line-height: 1; transform: rotate(-4deg); white-space: nowrap; margin-bottom: 26px; }
.eo-panier-fleche { display: block; width: 62px; height: 36px; margin-left: 2px; }

/* Vidéo dans la galerie */
.flex-control-thumbs li.eo-video-mini button { width: 64px; height: 64px; padding: 0; border: 0; background: var(--eo-encre); color: var(--eo-fond); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.flex-control-thumbs li.eo-video-mini .eo-raccourci-txt { color: var(--eo-fond); }
.eo-video { position: absolute; inset: 0; z-index: 7; background: #000; }
.eo-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.eo-video-x { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(251, 250, 247, .92); color: var(--eo-encre); display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Rubrique pas encore disponible */
.eo-bientot { padding: 26px 0 40px; display: flex; flex-direction: column; gap: 10px; }
.eo-bientot p { margin: 0; }
.eo-bientot-titre { font-family: var(--eo-titre); font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.05; }
.eo-bientot-txt { font-size: .9375rem; color: var(--eo-gris); line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .eo-indice, .eo-guide.eo-vu, .eo-bascule-btn.eo-appel::after { animation: none !important; } .eo-guide .eo-trait, .eo-guide .eo-pointe, .eo-panier-indice .eo-trait, .eo-panier-indice .eo-pointe { stroke-dashoffset: 0; animation: none !important; } }

/* Flèches manuscrites : elles se tracent à chaque apparition et s'effacent à chaque disparition (cycle de 6 s) */
.eo-cycle.eo-cycle { animation: none; opacity: 1; }
.eo-cycle.eo-cycle .eo-cycle-txt { animation: eo-c-txt 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.eo-cycle.eo-cycle .eo-trait { stroke-dasharray: 1; stroke-dashoffset: 1; animation: eo-c-trait 6s linear infinite; animation-delay: var(--d, 0s); }
.eo-cycle.eo-cycle .eo-pointe { stroke-dasharray: 1; stroke-dashoffset: 1; animation: eo-c-pointe 6s linear infinite; animation-delay: var(--d, 0s); }
@keyframes eo-c-txt { 0% { opacity: 0; } 8%, 80% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes eo-c-trait { 0%, 4% { stroke-dashoffset: 1; } 18%, 72% { stroke-dashoffset: 0; } 82%, 100% { stroke-dashoffset: -1; } }
@keyframes eo-c-pointe { 0%, 18% { stroke-dashoffset: 1; } 23%, 70% { stroke-dashoffset: 0; } 74%, 100% { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce) { .eo-cycle.eo-cycle .eo-cycle-txt, .eo-cycle.eo-cycle .eo-trait, .eo-cycle.eo-cycle .eo-pointe { animation: none !important; opacity: 1; stroke-dashoffset: 0; } }

/* Offre en cours (panier, favoris) */
.eo-offre { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; background: var(--eo-papier); font-size: .9375rem; line-height: 1.4; }
.eo-offre-signe { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--eo-terre); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--eo-titre); font-size: 1.25rem; }
#eorys-panier-plus { display: flex; flex-direction: column; gap: 18px; margin: 10px auto 40px; }

/* Accueil : le lieu proche du visiteur */
.eo-acc-ici { position: absolute; left: 50%; top: calc(100% + 9px); transform: translateX(-50%) rotate(-3deg); font-family: var(--eo-cote); font-size: 1.05rem; line-height: 1; white-space: nowrap; color: #3A3632; }
.eo-acc-ici.eo-clair { color: #FBFAF7; }

/* Carte : « Près de chez moi » */
.eo-position { position: absolute; left: 12px; bottom: 30px; min-height: 40px; padding: 0 13px 0 11px; border: 0; border-radius: 999px; background: var(--eo-encre); color: var(--eo-fond); box-shadow: 0 4px 12px rgba(20, 18, 15, .2); font-size: 0.75rem; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; z-index: 2; }
.eo-position:disabled { opacity: .75; cursor: wait; }

/* Fiche : L'œuvre, Le lieu, Chez vous, Caractéristiques */
.eo-fiche { display: grid; grid-template-columns: 1fr; gap: 30px; margin: 34px auto 6px; }
@media (min-width: 900px) { .eo-fiche { grid-template-columns: 1fr 1fr; gap: 40px 56px; } }
.eo-fiche-bloc h2 { margin: 0 0 10px; font-family: var(--eo-titre); font-weight: 400; font-size: 1.75rem; line-height: 1.1; }
.eo-fiche-texte p { margin: 0 0 .8em; font-size: .9375rem; line-height: 1.65; }
.eo-fiche-liens { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px !important; }
.eo-fiche-liens a { font-size: .8125rem; color: var(--eo-encre); text-underline-offset: 3px; }
.eo-carac { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.5; }
.eo-carac th, .eo-carac td { padding: 9px 0; border-bottom: 1px solid var(--eo-trait); text-align: left; vertical-align: top; }
.eo-carac th { width: 32%; padding-right: 14px; font-weight: 500; color: var(--eo-gris); }
.eo-carac a { color: var(--eo-encre); text-underline-offset: 3px; }

/* Mockups en direct */
.eo-live-boite { position: relative; width: 100%; overflow: hidden; background: #E9E3D8; }
.eo-live-scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; isolation: isolate; }
.eo-live-scene > img, .eo-live-scene > .eo-live-design { position: absolute; left: 0; top: 0; max-width: none !important; }
.eo-live-scene > img { width: 100% !important; height: 100% !important; pointer-events: none; user-select: none; }
.eo-live-design { transform-origin: 0 0; overflow: hidden; }
.eo-live-papier { overflow: hidden; }
.eo-live-papier img { max-width: none !important; display: block; }

/* Grande image : « Votre choix » en direct (la scène couvre le carré, centrée) */
.eo-live-vue { position: absolute; inset: 0; z-index: 6; overflow: hidden; background: #E9E3D8; }
.eo-live-vue[hidden] { display: none; }
.eo-live-cadre { position: absolute; inset: 0; overflow: hidden; }
.eo-live-cadre .eo-live-boite { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; transform: translate(-50%, -50%); }
.eo-live-bandeau { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 8px 7px 12px; background: rgba(251, 250, 247, .94); font-size: .75rem; }
.eo-live-sur { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .625rem; color: var(--eo-terre); }
.eo-live-txt { flex: 1; min-width: 0; }
.eo-live-photos { border: 0; background: none; padding: 6px 4px; font-size: .75rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--eo-encre); }
.eo-panier-mockup { position: relative; }

/* ---------- Configurateur : grande vue + vignette de l'autre vue ---------- */
.eo-vues { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: #E9E3D8; }
.eo-vue-grande { position: absolute; inset: 0; }
.eo-vue-grande > .eo-scene, .eo-vue-petite > .eo-scene { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.eo-vue-petite { position: absolute; right: 10px; bottom: 10px; z-index: 5; width: 34%; aspect-ratio: 1; padding: 0; border: 3px solid #FBFAF7; background: #E9E3D8; box-shadow: 0 6px 16px rgba(20, 18, 15, .3); overflow: hidden; cursor: pointer; }
.eo-vue-petite .eo-sim-lumiere, .eo-vue-petite .eo-cote { display: none; }
.eo-vue-nom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 4px 4px 3px; background: rgba(251, 250, 247, .94); font-size: .5625rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--eo-encre); pointer-events: none; }
.eo-vues .eo-guide { position: absolute; right: calc(34% + 14px); bottom: 21%; z-index: 6; margin: 0; align-items: flex-end; flex-direction: column; }
.eo-vues .eo-guide-txt { padding: 2px 8px 3px; border-radius: 40% 55% 45% 60% / 60% 45% 55% 40%; background: rgba(251, 250, 247, .93); text-align: center; }
.eo-vues .eo-guide-fleche { width: 40px; height: 46px; margin: 2px -14px 0 0; filter: drop-shadow(0 0 1.5px #FBFAF7) drop-shadow(0 0 1px #FBFAF7); }
.eo-reglages-mur { display: flex; flex-direction: column; gap: 6px; }
.eo-reglages-mur[hidden] { display: none; }

/* Galerie : bandeau d'une ligne, vignette « Votre choix » */
.eo-live-bandeau { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.eo-live-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex-control-thumbs li.eo-raccourci .eo-mini-choix { position: relative; inset: auto; display: block; width: 64px; height: 46px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(30, 28, 25, .12); }

/* Panier : grand aperçu « Votre choix actuel », plein écran au toucher */
.eo-panier-ligne { display: grid; grid-template-columns: 1fr; align-items: end; gap: 12px; }
.eo-panier-ligne.eo-avec-mockup { grid-template-columns: 42% minmax(0, 1fr); margin-top: 34px; }
.eo-panier-ligne .single_add_to_cart_button { width: 100% !important; min-height: 54px; }
.eo-panier-apercu { display: none; }
.eo-panier-ligne.eo-avec-mockup .eo-panier-apercu { display: flex; flex-direction: column; gap: 6px; }
.eo-panier-lib { font-size: .625rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--eo-terre); }
.eo-panier-ligne.eo-avec-mockup .eo-panier-mockup { display: block; position: relative; width: 100%; flex: none; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 3px 5px 10px rgba(20, 18, 15, .22); cursor: zoom-in; }
.eo-panier-mockup::after { content: ''; position: absolute; right: 6px; bottom: 6px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background: rgba(251, 250, 247, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1C19' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M15 4h5v5M9 20H4v-5M20 4l-6 6M4 20l6-6'/%3E%3C/svg%3E") center / 14px no-repeat; }
.eo-panier-ligne.eo-avec-mockup .eo-panier-indice { left: calc(42% + 22px); bottom: 64px; flex-direction: column; align-items: flex-start; }
.eo-panier-ligne.eo-avec-mockup .eo-panier-txt { margin: 0 0 2px; }
.eo-panier-ligne.eo-avec-mockup .eo-panier-fleche { transform: rotate(28deg); margin-left: 34px; }
.eo-plein { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 18px; background: rgba(20, 18, 15, .97); }
.eo-plein-tete { display: flex; align-items: center; gap: 10px; color: #FBFAF7; }
.eo-plein-tete .eo-live-sur { color: #D9A98F; }
.eo-plein-txt { flex: 1; min-width: 0; font-size: .8125rem; }
.eo-plein-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #FBFAF7; color: var(--eo-encre); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.eo-plein-corps { position: relative; flex: 1; min-height: 0; }
.eo-plein-corps > img { width: 100%; height: 100%; object-fit: contain; }
.eo-plein-corps > .eo-live-cadre { position: absolute; inset: 0; overflow: visible; }
.eo-plein-mur { align-self: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #FBFAF7; color: var(--eo-encre); font-size: .8125rem; cursor: pointer; }
html.eo-sans-defil { overflow: hidden; }

/* Ordinateur : la galerie reste visible pendant qu'on fait défiler les options */
@media (min-width: 900px) { .single-product .wp-block-columns > .wp-block-column:has(.woocommerce-product-gallery) { position: sticky; top: 24px; align-self: flex-start; } }

/* Favoris : décor de collection en grand, mur dessiné en vignette (ou l'inverse) */
.eo-fav-vues { margin: 0 calc(-1 * var(--wp--style--root--padding-left, 20px)); width: auto; }
.eo-vues .eo-fav-mur { position: absolute; inset: 0; margin: 0; min-height: 0; padding: 6%; container-type: inline-size; }
.eo-fav-mur img { height: 27cqw !important; outline-width: .9cqw !important; }
.eo-fav-mur img.eo-fav-grand { height: 40cqw !important; }
.eo-vues .eo-fav-mur { gap: 4cqw 3.5cqw; }
.eo-fav-infos { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -6px 0 0; font-size: .8125rem; color: var(--eo-gris); }
.eo-fav-infos:empty { display: none; }
.eo-fav-decor { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--eo-encre); color: var(--eo-fond); font-size: .75rem; cursor: pointer; }
.eo-fav-ajouts { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--eo-papier); }
.eo-fav-ajouts-liste { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.eo-fav-ajout { display: inline-flex; align-items: center; gap: 2px; font-family: var(--eo-titre); font-size: 1.15rem; }
.eo-fav-ajout a { color: var(--eo-encre); text-underline-offset: 4px; }
.eo-fav-ajout .eo-coeur { position: static; width: 40px; height: 40px; }

/* Bandeau « Votre choix actuel » : deux lignes, jamais coupé */
.eo-live-bandeau { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 2px; white-space: normal; overflow: visible; padding: 8px 12px 9px; }
.eo-live-txt { overflow: visible; text-overflow: clip; white-space: normal; font-size: .8125rem; line-height: 1.35; }
.eo-live-note { font-size: .6875rem; color: var(--eo-gris); }
.eo-live-note:empty { display: none; }

/* Favoris : le décor en grand, puis « Votre mur » en grand (plus de vignette superposée) */
.eo-fav-photo { margin: 0 calc(-1 * var(--wp--style--root--padding-left, 20px)); }
.eo-fav-photo > .eo-live-cadre { position: relative; inset: auto; overflow: visible; }
.eo-fav-photo .eo-live-boite { position: relative; left: auto; top: auto; width: 100%; height: auto; transform: none; }
.eo-fav-titre-mur { margin-top: 18px; }
.eo-fav-mur { container-type: inline-size; }
@media (min-width: 900px) { .eo-fav-photo { margin: 0; max-width: 820px; } .eo-fav-mur { max-width: 820px; margin-left: 0; margin-right: 0; } }

/* ---------- Un seul grand aperçu + pilule « Votre cadre | Chez vous » ---------- */
.eo-config-apercu { display: flex; flex-direction: column; gap: 10px; }
.eo-bascule-config { align-self: center; pointer-events: auto; }
.eo-bascule-config .eo-bascule-btn { padding: 0 18px; }
.eo-config-options { display: flex; flex-direction: column; gap: 10px; }
.eo-reglages-mur { margin-top: 6px; }
/* Disposition « collant » : l'aperçu reste en haut pendant le défilement des options */
.eo-dispo-collant .eo-config-apercu { position: sticky; top: 0; z-index: 8; margin: 0 calc(-1 * var(--wp--style--root--padding-left, 20px)); padding: 6px var(--wp--style--root--padding-left, 20px) 10px; background: var(--eo-fond); box-shadow: 0 8px 12px -10px rgba(20, 18, 15, .35); }
.eo-dispo-collant .eo-vues { aspect-ratio: 10 / 9; }
@media (min-width: 900px) { .eo-dispo-collant .eo-config-apercu { margin: 0; padding: 6px 0 10px; } }
/* Disposition « tiroir » : configurateur plein écran */
.eo-dispo-tiroir .eo-sim-config > .eo-config-options { display: none; }
.eo-config-ouvrir { min-height: 54px; border: 1.5px solid var(--eo-encre); background: transparent; color: var(--eo-encre); font-size: .8125rem; cursor: pointer; }
.eo-tiroir-couche { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; background: var(--eo-fond); }
.eo-tiroir-tete { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 6px 16px; }
.eo-tiroir-titre { font-family: var(--eo-titre); font-size: 1.4rem; }
.eo-tiroir-tete .eo-plein-x { background: var(--eo-papier); box-shadow: inset 0 0 0 1px var(--eo-trait); }
.eo-tiroir-haut { flex: none; padding: 0 0 10px; }
.eo-tiroir-haut .eo-vues { aspect-ratio: auto; height: calc(50vh - 70px); transition: height .3s ease; }
.eo-tiroir-grand .eo-tiroir-haut .eo-vues { height: 24vh; }
.eo-tiroir { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; background: var(--eo-papier); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 24px rgba(20, 18, 15, .12); }
.eo-tiroir-poignee { position: sticky; top: 0; z-index: 2; display: block; width: 100%; height: 30px; border: 0; background: var(--eo-papier); cursor: grab; }
.eo-tiroir-poignee::before { content: ''; position: absolute; left: 50%; top: 11px; width: 46px; height: 5px; margin-left: -23px; border-radius: 3px; background: var(--eo-trait); }
.eo-tiroir-ajouter { position: sticky; bottom: 0; width: 100%; min-height: 54px; margin-top: 16px; border: 0; background: var(--eo-encre); color: var(--eo-fond); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }

/* Disposition retenue (aperçu collant), aperçu un peu réduit : toutes les options restent visibles dessous */
.eo-dispo-collant .eo-vues { aspect-ratio: 7 / 6; }
.eo-dispo-collant .eo-config-apercu { gap: 8px; padding-bottom: 8px; }
.eo-bascule-config .eo-bascule-btn { min-height: 38px; }
/* « Chez vous » : l'aquarelle entière à gauche, les couleurs du mur à droite, les pièces dessous */
.eo-vues.eo-mur-en-grand { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 4px 6px; background: transparent; overflow: visible; }
.eo-vues.eo-mur-en-grand .eo-vue-grande { position: relative; inset: auto; grid-column: 1; grid-row: 1; height: 100%; aspect-ratio: 1; overflow: hidden; }
.eo-vues.eo-mur-en-grand .eo-sim-murs { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 36px)); align-content: center; justify-content: center; gap: 2px 2px; margin: 0; }
.eo-vues.eo-mur-en-grand .eo-sim-mur { height: 36px; }
.eo-vues.eo-mur-en-grand .eo-sim-pieces { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 6px; overflow: visible; }
.eo-vues.eo-mur-en-grand .eo-sim-pieces .eo-mot { min-height: 34px; font-size: 1.05rem; }
.eo-cote.eo-cote-cote { transform: none; }

/* « Chez vous » (version 3) : réglages du mur en lignes au-dessus, aquarelle entière sur toute la largeur, ancrée en haut */
.eo-vues.eo-mur-en-grand { display: block; aspect-ratio: 358 / 356; overflow: hidden; background: #E9E3D8; }
.eo-vues.eo-mur-en-grand .eo-vue-grande { position: absolute; inset: 0; height: auto; aspect-ratio: auto; grid-column: auto; grid-row: auto; }
.eo-reglages-mur { display: flex; flex-direction: column; gap: 0; margin: 0 0 4px; }
.eo-reglages-mur .eo-sim-pieces { justify-content: space-between; gap: 8px; }
.eo-reglages-mur .eo-sim-murs { margin: -2px -4px 0; }

/* Le bloc qui contient l'aperçu collant (il s'arrête avant le récapitulatif et le panier) */
.eo-sim-config { display: flex; flex-direction: column; gap: 10px; }
/* « Chez vous » rogné par le haut : la scène garde ses proportions, ancrée en bas */
.eo-vues.eo-mur-en-grand .eo-vue-grande > .eo-scene { inset: auto 0 0 0; height: auto; aspect-ratio: 358 / 356; }
.eo-vue-grande > .eo-sim-lumiere { position: absolute; right: 2cqw; top: 2cqw; }
.eo-vues.eo-mur-en-grand .eo-vue-grande { container-type: inline-size; }
/* Pilule un peu plus basse */
.eo-bascule-config { padding: 3px; }
.eo-bascule-config .eo-bascule-btn { min-height: 34px; padding: 0 16px; font-size: .75rem; }
.eo-dispo-collant .eo-config-apercu { gap: 6px; padding-bottom: 6px; }

/* Visionneuse plein écran : toucher = zoom ×2 */
.eo-vision { position: fixed; inset: 0; z-index: 100001; display: flex; flex-direction: column; background: #14120F; color: #FBFAF7; }
.eo-vision-tete { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 12px 8px 16px; }
.eo-vision-titres { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eo-vision-titres .eo-live-sur { color: #D9A98F; }
.eo-vision-sous, .eo-vision-compteur { font-size: .8125rem; color: #E7E1D6; }
.eo-vision-cadre { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.eo-vision-cadre.eo-vision-zoom { cursor: grab; }
.eo-vision-contenu { position: relative; flex: none; transform-origin: 50% 50%; will-change: transform; }
.eo-vision-contenu > img { width: 100% !important; height: 100% !important; max-width: none !important; display: block; object-fit: contain; pointer-events: none; }
.eo-vision-contenu > .eo-vision-direct { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.eo-vision-pied { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 6px 12px 14px; }
.eo-vision-aide { margin: 0; flex: 1; text-align: center; font-size: .75rem; color: #B9B2A6; }
.eo-vision-aide[hidden] { visibility: hidden; display: block; }
.eo-vision-fleche { flex: none; width: 44px; height: 44px; border: 1px solid rgba(251, 250, 247, .35); border-radius: 50%; background: transparent; color: #FBFAF7; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.eo-vision-fleche:disabled { opacity: .25; cursor: default; }

/* Petits téléphones (≤ 360 px) : tuiles d'options plus compactes, « Ajoutez-le au panier ! » qui tient dans l'écran */
@media (max-width: 360px) {
	.eo-sim-tuile { font-size: .75rem; padding: 5px 3px; }
	.eo-sim-tailles .eo-sim-cm { white-space: nowrap; font-size: .6875rem; }
	.eo-sim-cadres .eo-sim-tuile { gap: 6px; }
	.eo-sim-pastille { width: 15px; height: 15px; }
	.eo-panier-ligne.eo-avec-mockup .eo-panier-indice { left: calc(42% + 8px); right: 0; }
	.eo-panier-txt { font-size: 1.15rem; white-space: normal; }
	.eo-panier-ligne.eo-avec-mockup .eo-panier-fleche { width: 48px; height: 28px; margin-left: 20px; }
}

.eo-vision-niveau { flex: none; min-width: 34px; font-size: .8125rem; font-weight: 500; color: #FBFAF7; text-align: center; }
.eo-vision-niveau:empty { display: none; }

/* L'aperçu « Votre affiche » s'ouvre en plein écran au toucher */
.eo-config-apercu .eo-vues { cursor: zoom-in; }
.eo-vision-direct > .eo-scene { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; opacity: 1; transform: none; }

/* Icône « plein écran » (deux flèches diagonales) : aperçu « Votre affiche » et galerie, même dessin partout */
.eo-agrandir { position: absolute; right: 8px; bottom: 8px; z-index: 6; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(251, 250, 247, .94); color: var(--eo-encre); box-shadow: 0 2px 6px rgba(20, 18, 15, .2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.woocommerce-product-gallery__trigger { background: rgba(251, 250, 247, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1C19' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center / 16px no-repeat !important; box-shadow: 0 2px 6px rgba(20, 18, 15, .2); }
.woocommerce-product-gallery__trigger::before, .woocommerce-product-gallery__trigger::after { display: none !important; content: none !important; }
.woocommerce-product-gallery__trigger > span { opacity: 0; }
.eo-panier-mockup::after { background-size: 15px; width: 32px; height: 32px; }