/* et-dark:done */ /* Effets, ambiances saisonnières, accessibilité, recherche, assistant, météo, vidéo d'accueil */ /* ========================================================= Les Enseignes du Pays de Thann — styles & animations partagés ========================================================= */ @property --p { syntax: ''; inherits: false; initial-value: 0; } @property --n { syntax: ''; inherits: false; initial-value: 0; } /* ---------- Finitions visuelles ---------- */ .et-scope:not(#et-z) ::selection { background: #94C120; color: #1E2F05; } .et-scope:not(#et-z) h1, .et-scope:not(#et-z) h2 { text-wrap: balance; } .et-scope:not(#et-z) p { text-wrap: pretty; } html:not(#et-z) .et-scope .ph, html:not(#et-z) .et-scope.ph { position: relative; } html:not(#et-z) .et-scope .ph::before, html:not(#et-z) .et-scope.ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 82% 88%, rgba(148,193,32,.20), transparent 46%), radial-gradient(circle at 10% 90%, rgba(163,137,122,.18), transparent 40%); pointer-events: none; } html:not(#et-z) .et-scope .phd, html:not(#et-z) .et-scope.phd { background: radial-gradient(120% 120% at 15% 0%, #43362F 0%, #2F2622 55%, #241C18 100%) !important; } /* ---------- Keyframes ---------- */ @keyframes inUp { from { opacity: 0; translate: 0 40px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } } @keyframes ul { to { background-size: 100% .12em; } } @keyframes clipin { from { clip-path: inset(14% 10% 14% 10%); } to { clip-path: inset(0 0 0 0); } } @keyframes pp { to { --p: 100; } } @keyframes show { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } } @keyframes cnt { from { --n: 0; } } @keyframes drift { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 24px -18px; rotate: 8deg; } } @keyframes spin { to { rotate: 360deg; } } @keyframes pop { 0% { scale: .6; opacity: 0; } 70% { scale: 1.08; opacity: 1; } 100% { scale: 1; } } @keyframes pinDrop { from { translate: 0 -60px; opacity: 0; } to { translate: 0 0; opacity: 1; } } @keyframes kb { from { scale: 1; } to { scale: 1.12; translate: -2% -2%; } } @keyframes snowbg { to { background-position: 0 300px, 40px 300px, 80px 300px; } } @keyframes steam { 0% { translate: 0 0; opacity: 0; scale: .8; } 30% { opacity: .55; } 100% { translate: 10px -140px; opacity: 0; scale: 1.6; } } @keyframes shine { 0%, 60% { translate: -120% 0; } 100% { translate: 220% 0; } } @keyframes cloud { from { translate: -20vw 0; } to { translate: 120vw 0; } } @keyframes plane { 0% { translate: -40px 30px; rotate: -10deg; opacity: 0; } 20% { opacity: 1; } 100% { translate: 260px -160px; rotate: 10deg; opacity: 0; } } @keyframes flash { 0% { opacity: .9; } 100% { opacity: 0; } } @keyframes swing { 0%, 100% { rotate: 8deg; } 50% { rotate: -6deg; } } @keyframes conf { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } } /* icônes d'événements */ @keyframes beat { 0%, 100% { scale: 1; } 15% { scale: 1.2; } 30% { scale: 1; } 45% { scale: 1.15; } } @keyframes wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -12deg; } 75% { rotate: 12deg; } } @keyframes flicker { 0%, 100% { scale: 1 1; filter: brightness(1); } 30% { scale: .94 1.08; filter: brightness(1.2); } 60% { scale: 1.05 .95; } } @keyframes twinkle { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .45; scale: .8; } } @keyframes bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } @keyframes bloom { 0%, 100% { rotate: 0deg; scale: 1; } 50% { rotate: 45deg; scale: 1.12; } } @keyframes wave { 0%, 100% { transform: skewY(0deg); } 50% { transform: skewY(-8deg); } } @keyframes clink { 0%, 100% { rotate: 0deg; } 20% { rotate: -14deg; } 40% { rotate: 10deg; } 60% { rotate: 0deg; } } @keyframes eqbar { 0%, 100% { height: 30%; } 50% { height: 100%; } } /* effets saisonniers */ @keyframes fxFall { 0% { transform: translate(0, -12cqh) rotate(0deg); } 100% { transform: translate(var(--dx), 112cqh) rotate(var(--r)); } } @keyframes fxRise { 0% { transform: translate(0, 112cqh) scale(.7); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--dx), -12cqh) scale(1.1); opacity: .85; } } @keyframes fxSwim { 0% { transform: translate(-12cqw, 0) scaleY(1); } 25% { transform: translate(20cqw, -4cqh) scaleY(.7); } 50% { transform: translate(50cqw, 2cqh) scaleY(1); } 75% { transform: translate(80cqw, -3cqh) scaleY(.7); } 100% { transform: translate(112cqw, 0) scaleY(1); } } @keyframes fxBurst { 0% { transform: scale(.1); opacity: 0; } 10% { opacity: 1; } 60% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } } @keyframes bulb { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes greetIn { from { opacity: 0; translate: -50% 30px; } to { opacity: 1; translate: -50% 0; } } /* ---------- Composants ---------- */ .et-scope:not(#et-z) .totop, .et-scope.totop:not(#et-z) { position: fixed; left: 20px; bottom: 20px; z-index: 65; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(#94C120 calc(var(--p) * 1%), rgba(34,26,22,.14) 0); text-decoration: none; box-shadow: 0 14px 30px -14px rgba(34,26,22,.55); transition: scale .25s; } .et-scope:not(#et-z) .totop:hover, .et-scope.totop:hover:not(#et-z) { scale: 1.08; } .et-scope:not(#et-z) .totop > span, .et-scope.totop:not(#et-z) > span { width: 46px; height: 46px; border-radius: 50%; background: #221A16; color: #FFFFFF; display: flex; align-items: center; justify-content: center; } .et-scope:not(#et-z) .stat__n .count, .et-scope.stat__n:not(#et-z) .count { counter-reset: c var(--n); } .et-scope:not(#et-z) .stat__n .count::after, .et-scope.stat__n:not(#et-z) .count::after { content: counter(c); } .et-scope:not(#et-z) .blob, .et-scope.blob:not(#et-z) { position: absolute; border-radius: 50%; pointer-events: none; } /* Barre flottante (réseaux, musique, accessibilité) */ .et-scope:not(#et-z) .dock, .et-scope.dock:not(#et-z) { position: fixed; right: 16px; top: 50%; translate: 0 -50%; z-index: 68; display: flex; flex-direction: column; gap: 6px; padding: 7px; border-radius: 999px; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); border: 1px solid #E7DDD3; box-shadow: 0 20px 44px -22px rgba(34,26,22,.55); } .et-scope:not(#et-z) .dockbtn, .et-scope.dockbtn:not(#et-z) { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; color: #221A16; border: 0; padding: 0; text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s, scale .25s; } .et-scope:not(#et-z) .dockbtn:hover, .et-scope.dockbtn:hover:not(#et-z), .et-scope:not(#et-z) .dockbtn[aria-pressed="true"], .et-scope.dockbtn[aria-pressed="true"]:not(#et-z), .et-scope:not(#et-z) .dockbtn[aria-expanded="true"], .et-scope.dockbtn[aria-expanded="true"]:not(#et-z) { background: #221A16; color: #FFFFFF; scale: 1.06; } .et-scope:not(#et-z) .dockbtn .tip, .et-scope.dockbtn:not(#et-z) .tip { position: absolute; right: 54px; top: 50%; translate: 6px -50%; white-space: nowrap; font: 700 12px Manrope, sans-serif; padding: 6px 10px; border-radius: 999px; background: #221A16; color: #FFFFFF; opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; } .et-scope:not(#et-z) .dockbtn:hover .tip, .et-scope.dockbtn:hover:not(#et-z) .tip, .et-scope:not(#et-z) .dockbtn:focus-visible .tip, .et-scope.dockbtn:focus-visible:not(#et-z) .tip { opacity: 1; translate: 0 -50%; } .et-scope:not(#et-z) .eq, .et-scope.eq:not(#et-z) { display: flex; align-items: flex-end; gap: 3px; height: 18px; } .et-scope:not(#et-z) .eq > i, .et-scope.eq:not(#et-z) > i { width: 4px; height: 30%; border-radius: 2px; background: #94C120; animation: eqbar .9s ease-in-out infinite; } .et-scope:not(#et-z) .eq > i:nth-child(2), .et-scope.eq:not(#et-z) > i:nth-child(2) { animation-delay: -.3s; } .et-scope:not(#et-z) .eq > i:nth-child(3), .et-scope.eq:not(#et-z) > i:nth-child(3) { animation-delay: -.6s; } .et-scope:not(#et-z) .a11y-panel, .et-scope.a11y-panel:not(#et-z) { position: fixed; right: 84px; top: 50%; translate: 0 -50%; z-index: 69; width: min(360px, calc(100vw - 110px)); max-height: calc(100vh - 120px); overflow-y: auto; box-sizing: border-box; padding: 22px; border-radius: 26px; background: #FFFFFF; border: 1px solid #E7DDD3; box-shadow: 0 30px 60px -24px rgba(34,26,22,.55); font-family: Manrope, system-ui, sans-serif; color: #221A16; animation: pop .35s cubic-bezier(.3,1.4,.5,1) both; } .et-scope:not(#et-z) .switch, .et-scope.switch:not(#et-z) { width: 46px; height: 26px; border-radius: 999px; background: #D9CCC0; position: relative; flex: none; transition: background-color .25s; } .et-scope:not(#et-z) .switch::after, .et-scope.switch:not(#et-z)::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; transition: translate .25s cubic-bezier(.3,1.4,.5,1); box-shadow: 0 2px 4px rgba(0,0,0,.2); } .et-scope:not(#et-z) .switch.on, .et-scope.switch.on:not(#et-z) { background: #3F6A0A; } .et-scope:not(#et-z) .switch.on::after, .et-scope.switch.on:not(#et-z)::after { translate: 20px 0; } /* Effets saisonniers */ .et-scope:not(#et-z) .fx-layer, .et-scope.fx-layer:not(#et-z) { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; container-type: size; } .et-scope:not(#et-z) .fx-layer.contained, .et-scope.fx-layer.contained:not(#et-z) { position: absolute; } .et-scope:not(#et-z) .fx, .et-scope.fx:not(#et-z) { position: absolute; display: block; will-change: transform; filter: drop-shadow(0 1px 2px rgba(34,26,22,.28)); } .et-scope:not(#et-z) .fx > svg, .et-scope.fx:not(#et-z) > svg { width: 100%; height: 100%; display: block; } .et-scope:not(#et-z) .fx-fall, .et-scope.fx-fall:not(#et-z) { animation: fxFall linear infinite; } .et-scope:not(#et-z) .fx-rise, .et-scope.fx-rise:not(#et-z) { animation: fxRise linear infinite; } .et-scope:not(#et-z) .fx-swim, .et-scope.fx-swim:not(#et-z) { animation: fxSwim linear infinite; } .et-scope:not(#et-z) .fx-burst, .et-scope.fx-burst:not(#et-z) { animation: fxBurst ease-out infinite; } .et-scope:not(#et-z) .garland, .et-scope.garland:not(#et-z) { position: fixed; left: 0; right: 0; top: 80px; z-index: 49; height: 40px; pointer-events: none; display: flex; justify-content: space-between; padding: 0 10px; border-top: 2px solid rgba(34,26,22,.35); } .et-scope:not(#et-z) .garland.contained, .et-scope.garland.contained:not(#et-z) { position: absolute; top: 0; } .et-scope:not(#et-z) .garland > span, .et-scope.garland:not(#et-z) > span { width: 11px; height: 16px; border-radius: 50% 50% 45% 45%; animation: bulb 1.6s ease-in-out infinite; } .et-scope:not(#et-z) .fx-greet, .et-scope.fx-greet:not(#et-z) { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 66; display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 180px); padding: 10px 10px 10px 18px; border-radius: 999px; background: #221A16; color: #FFFFFF; font: 700 14px Manrope, sans-serif; box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); animation: greetIn .6s cubic-bezier(.2,.7,.2,1) .8s both; } .et-scope:not(#et-z) .fx-greet.contained, .et-scope.fx-greet.contained:not(#et-z) { position: absolute; bottom: 14px; max-width: calc(100% - 28px); } /* Effets signatures des pages */ .et-scope:not(#et-z) .snowfx, .et-scope.snowfx:not(#et-z) { position: relative; } .et-scope:not(#et-z) .snowfx::after, .et-scope.snowfx:not(#et-z)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(3px 3px at 20px 30px, #fff 50%, transparent 52%), radial-gradient(2px 2px at 70px 90px, #fff 50%, transparent 52%), radial-gradient(4px 4px at 120px 160px, rgba(255,255,255,.9) 50%, transparent 52%); background-size: 160px 300px, 120px 300px, 200px 300px; animation: snowbg 6s linear infinite; } .et-scope:not(#et-z) .steamfx, .et-scope.steamfx:not(#et-z) { position: relative; } .et-scope:not(#et-z) .steamfx::before, .et-scope.steamfx:not(#et-z)::before, .et-scope:not(#et-z) .steamfx::after, .et-scope.steamfx:not(#et-z)::after { content: ""; position: absolute; left: 40%; bottom: 30%; width: 60px; height: 90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent); filter: blur(6px); animation: steam 4.5s ease-out infinite; pointer-events: none; } .et-scope:not(#et-z) .steamfx::after, .et-scope.steamfx:not(#et-z)::after { left: 55%; animation-delay: -2.2s; } .et-scope:not(#et-z) .shinefx, .et-scope.shinefx:not(#et-z) { overflow: hidden; } .et-scope:not(#et-z) .shinefx::after, .et-scope.shinefx:not(#et-z)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%); animation: shine 4s ease-in-out infinite; pointer-events: none; } .et-scope:not(#et-z) .cloudsfx, .et-scope.cloudsfx:not(#et-z) { position: relative; } .et-scope:not(#et-z) .cloudsfx::before, .et-scope.cloudsfx:not(#et-z)::before, .et-scope:not(#et-z) .cloudsfx::after, .et-scope.cloudsfx:not(#et-z)::after { content: ""; position: absolute; top: 18%; width: 260px; height: 70px; border-radius: 999px; background: rgba(255,255,255,.65); filter: blur(2px); box-shadow: 60px -26px 0 10px rgba(255,255,255,.6), 130px 4px 0 -4px rgba(255,255,255,.55); animation: cloud 60s linear infinite; pointer-events: none; } .et-scope:not(#et-z) .cloudsfx::after, .et-scope.cloudsfx:not(#et-z)::after { top: 38%; scale: .7; animation-duration: 85s; animation-delay: -40s; } .et-scope:not(#et-z) .kenburns, .et-scope.kenburns:not(#et-z) { animation: kb 18s ease-in-out infinite alternate; } .et-scope:not(#et-z) .swingfx, .et-scope.swingfx:not(#et-z) { transform-origin: 50% 0; animation: swing 2.6s ease-in-out infinite; } .et-scope:not(#et-z) .planefx, .et-scope.planefx:not(#et-z) { animation: plane 2.2s cubic-bezier(.2,.7,.2,1) both; } .et-scope:not(#et-z) .flashfx::after, .et-scope.flashfx:not(#et-z)::after { content: ""; position: absolute; inset: 0; background: #FFFFFF; pointer-events: none; animation: flash .45s ease-out both; } .et-scope:not(#et-z) .confetti, .et-scope.confetti:not(#et-z) { position: absolute; left: 50%; top: 56px; width: 0; height: 0; pointer-events: none; } .et-scope:not(#et-z) .confetti > i, .et-scope.confetti:not(#et-z) > i { position: absolute; width: 9px; height: 14px; border-radius: 2px; background: var(--c); animation: conf 1.6s cubic-bezier(.15,.7,.3,1) both; } .et-scope:not(#et-z) .evico, .et-scope.evico:not(#et-z) { flex: none; width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; } .et-scope:not(#et-z) .evico > svg, .et-scope.evico:not(#et-z) > svg { width: 28px; height: 28px; } .et-scope:not(#et-z) .ev-heart > svg, .et-scope.ev-heart:not(#et-z) > svg { animation: beat 1.6s ease-in-out infinite; } .et-scope:not(#et-z) .ev-egg > svg, .et-scope.ev-egg:not(#et-z) > svg { animation: wobble 2.2s ease-in-out infinite; } .et-scope:not(#et-z) .ev-flame > svg, .et-scope.ev-flame:not(#et-z) > svg { animation: flicker 1.1s ease-in-out infinite; transform-origin: 50% 100%; } .et-scope:not(#et-z) .ev-snow > svg, .et-scope.ev-snow:not(#et-z) > svg { animation: spin 8s linear infinite; } .et-scope:not(#et-z) .ev-tag > svg, .et-scope.ev-tag:not(#et-z) > svg { animation: swing 2s ease-in-out infinite; transform-origin: 30% 10%; } .et-scope:not(#et-z) .ev-star > svg, .et-scope.ev-star:not(#et-z) > svg { animation: twinkle 1.8s ease-in-out infinite; } .et-scope:not(#et-z) .ev-crown > svg, .et-scope.ev-crown:not(#et-z) > svg { animation: bounce 1.6s ease-in-out infinite; } .et-scope:not(#et-z) .ev-flower > svg, .et-scope.ev-flower:not(#et-z) > svg { animation: bloom 3s ease-in-out infinite; } .et-scope:not(#et-z) .ev-tie > svg, .et-scope.ev-tie:not(#et-z) > svg { animation: wobble 2.6s ease-in-out infinite; } .et-scope:not(#et-z) .ev-glass > svg, .et-scope.ev-glass:not(#et-z) > svg { animation: clink 2.4s ease-in-out infinite; transform-origin: 50% 100%; } .et-scope:not(#et-z) .ev-flag > svg, .et-scope.ev-flag:not(#et-z) > svg { animation: wave 1.8s ease-in-out infinite; } .et-scope:not(#et-z) .ev-sale > svg, .et-scope.ev-sale:not(#et-z) > svg { animation: bounce 1.2s ease-in-out infinite; } /* Réseaux sociaux */ .et-scope:not(#et-z) .igtile, .et-scope.igtile:not(#et-z) { position: relative; display: block; overflow: hidden; border-radius: 20px; } .et-scope:not(#et-z) .igtile .igov, .et-scope.igtile:not(#et-z) .igov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(34,26,22,.5); color: #FFFFFF; font: 800 14px Manrope, sans-serif; opacity: 0; transition: opacity .3s; } .et-scope:not(#et-z) .igtile:hover .igov, .et-scope.igtile:hover:not(#et-z) .igov, .et-scope:not(#et-z) .igtile:focus-visible .igov, .et-scope.igtile:focus-visible:not(#et-z) .igov { opacity: 1; } /* Dépôt de fichiers */ .et-scope:not(#et-z) .drop, .et-scope.drop:not(#et-z) { transition: border-color .2s, background-color .2s; } .et-scope:not(#et-z) .drop:hover, .et-scope.drop:hover:not(#et-z) { border-color: #94C120 !important; background: #F2F7E6 !important; } .et-scope:not(#et-z) .drop:focus-within, .et-scope.drop:focus-within:not(#et-z) { outline: 3px solid #94C120; outline-offset: 3px; } .et-scope:not(#et-z) .drop svg, .et-scope.drop:not(#et-z) svg { animation: bounce 1.8s ease-in-out infinite; } /* ---------- Mouvements (désactivés si l'utilisateur réduit les animations) ---------- */ @media (prefers-reduced-motion: no-preference) { .et-scope:not(#et-z) h1 { animation: inUp 1s cubic-bezier(.2,.7,.2,1) .05s both; } .et-scope:not(#et-z) h1 ~ p { animation: inUp 1s cubic-bezier(.2,.7,.2,1) .25s both; } .et-scope:not(#et-z) h1 ~ div, .et-scope:not(#et-z) h1 ~ form { animation: inUp 1s cubic-bezier(.2,.7,.2,1) .4s both; } .et-scope:not(#et-z) h1 em, .et-scope:not(#et-z) h2 em { background: linear-gradient(90deg, #94C120, #94C120) 0 96% / 0% .12em no-repeat; } .et-scope:not(#et-z) h1 em { animation: ul .9s cubic-bezier(.2,.7,.2,1) .9s forwards; } .et-scope:not(#et-z) .lift svg:not(.arrow), .et-scope.lift:not(#et-z) svg:not(.arrow) { transition: rotate .45s cubic-bezier(.3,1.6,.5,1), scale .45s cubic-bezier(.3,1.6,.5,1); } .et-scope:not(#et-z) .lift:hover svg:not(.arrow), .et-scope.lift:hover:not(#et-z) svg:not(.arrow) { rotate: -10deg; scale: 1.15; } .et-scope:not(#et-z) .btn, .et-scope.btn:not(#et-z) { position: relative; overflow: hidden; isolation: isolate; } .et-scope:not(#et-z) .btn::after, .et-scope.btn:not(#et-z)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%); translate: -130% 0; transition: translate .8s ease; pointer-events: none; } .et-scope:not(#et-z) .btn:hover::after, .et-scope.btn:hover:not(#et-z)::after { translate: 130% 0; } .et-scope:not(#et-z) .blob, .et-scope.blob:not(#et-z) { animation: drift 14s ease-in-out infinite; } .et-scope:not(#et-z) .pop, .et-scope.pop:not(#et-z) { animation: pop .5s cubic-bezier(.3,1.6,.5,1) both; } .et-scope:not(#et-z) .pin, .et-scope.pin:not(#et-z) { animation: pinDrop .7s cubic-bezier(.3,1.5,.5,1) both; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .et-scope:not(#et-z) h2 em { animation: ul linear forwards; animation-timeline: view(); animation-range: entry 60% cover 45%; } .et-scope:not(#et-z) .zoom, .et-scope.zoom:not(#et-z) { animation: clipin linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } .et-scope:not(#et-z) .totop, .et-scope.totop:not(#et-z) { animation: show linear both, pp linear both; animation-timeline: scroll(root), scroll(root); animation-range: 0 400px, 0% 100%; } .et-scope:not(#et-z) .stat__n .count, .et-scope.stat__n:not(#et-z) .count { animation: cnt linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; } } } @media (prefers-reduced-motion: reduce) { .et-scope:not(#et-z) .fx-layer, .et-scope.fx-layer:not(#et-z), .et-scope:not(#et-z) .confetti, .et-scope.confetti:not(#et-z), .et-scope:not(#et-z) .planefx, .et-scope.planefx:not(#et-z) { display: none; } .et-scope:not(#et-z) .garland > span, .et-scope.garland:not(#et-z) > span, .et-scope:not(#et-z) .snowfx::after, .et-scope.snowfx:not(#et-z)::after, .et-scope:not(#et-z) .steamfx::before, .et-scope.steamfx:not(#et-z)::before, .et-scope:not(#et-z) .steamfx::after, .et-scope.steamfx:not(#et-z)::after, .et-scope:not(#et-z) .shinefx::after, .et-scope.shinefx:not(#et-z)::after, .et-scope:not(#et-z) .cloudsfx::before, .et-scope.cloudsfx:not(#et-z)::before, .et-scope:not(#et-z) .cloudsfx::after, .et-scope.cloudsfx:not(#et-z)::after, .et-scope:not(#et-z) .kenburns, .et-scope.kenburns:not(#et-z), .et-scope:not(#et-z) .swingfx, .et-scope.swingfx:not(#et-z), .et-scope:not(#et-z) [class*="ev-"] > svg, .et-scope[class*="ev-"]:not(#et-z) > svg, .et-scope:not(#et-z) .eq > i, .et-scope.eq:not(#et-z) > i { animation: none; } } /* ---------- Accessibilité (classes posées par la barre d'accessibilité) ---------- */ html.a11y-t1:not(#et-z) body { zoom: 1.12; } html.a11y-t2:not(#et-z) body { zoom: 1.25; } html.a11y-dys:not(#et-z) body *:not(svg):not(svg *) { font-family: 'Atkinson Hyperlegible', Verdana, sans-serif !important; font-style: normal !important; } html.a11y-space:not(#et-z) body *:not(svg):not(svg *) { line-height: 1.8 !important; letter-spacing: .03em !important; word-spacing: .12em !important; } html.a11y-links:not(#et-z) .et-scope a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; } html.a11y-still:not(#et-z) *, html.a11y-still:not(#et-z) *::before, html.a11y-still:not(#et-z) *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-still:not(#et-z) .et-scope .fx-layer, html.a11y-still:not(#et-z) .et-scope.fx-layer, html.a11y-still:not(#et-z) .et-scope .garland, html.a11y-still:not(#et-z) .et-scope.garland, html.a11y-still:not(#et-z) .et-scope .marquee, html.a11y-still:not(#et-z) .et-scope.marquee { display: none !important; } html.a11y-contrast:not(#et-z) .et-scope :focus-visible, html.a11y-contrast:not(#et-z) .et-scope:focus-visible { outline: 4px solid #1E2F05 !important; outline-offset: 3px; } html.a11y-contrast:not(#et-z) { --et-text: #120C0A; --et-muted: #120C0A; --et-line: #6F5B51; } @media (prefers-color-scheme: dark) { html:not(.et-light).a11y-contrast:not(#et-z) { --et-text: #FFFFFF; --et-muted: #FFFFFF; --et-line: #CBBDB1; } html:not(.et-light):not(#et-z) .et-scope .totop > span, html:not(.et-light):not(#et-z) .et-scope.totop > span { background: #F3ECE6; color: #1C1613; } html:not(.et-light):not(#et-z) .et-scope .dock, html:not(.et-light):not(#et-z) .et-scope.dock { background: rgba(30,24,21,.9); border-color: #3A2F2A; } html:not(.et-light):not(#et-z) .et-scope .dockbtn, html:not(.et-light):not(#et-z) .et-scope.dockbtn { color: #F3ECE6; } html:not(.et-light):not(#et-z) .et-scope .dockbtn:hover, html:not(.et-light):not(#et-z) .et-scope.dockbtn:hover, html:not(.et-light):not(#et-z) .et-scope .dockbtn[aria-pressed="true"], html:not(.et-light):not(#et-z) .et-scope.dockbtn[aria-pressed="true"], html:not(.et-light):not(#et-z) .et-scope .dockbtn[aria-expanded="true"], html:not(.et-light):not(#et-z) .et-scope.dockbtn[aria-expanded="true"] { background: #F3ECE6; color: #1C1613; } html:not(.et-light):not(#et-z) .et-scope .a11y-panel, html:not(.et-light):not(#et-z) .et-scope.a11y-panel { background: #1E1815; border-color: #3A2F2A; color: #F3ECE6; } } html.et-dark.a11y-contrast:not(#et-z) { --et-text: #FFFFFF; --et-muted: #FFFFFF; --et-line: #CBBDB1; } html.et-dark:not(#et-z) .et-scope .totop > span, html.et-dark:not(#et-z) .et-scope.totop > span { background: #F3ECE6; color: #1C1613; } html.et-dark:not(#et-z) .et-scope .dock, html.et-dark:not(#et-z) .et-scope.dock { background: rgba(30,24,21,.9); border-color: #3A2F2A; } html.et-dark:not(#et-z) .et-scope .dockbtn, html.et-dark:not(#et-z) .et-scope.dockbtn { color: #F3ECE6; } html.et-dark:not(#et-z) .et-scope .dockbtn:hover, html.et-dark:not(#et-z) .et-scope.dockbtn:hover, html.et-dark:not(#et-z) .et-scope .dockbtn[aria-pressed="true"], html.et-dark:not(#et-z) .et-scope.dockbtn[aria-pressed="true"], html.et-dark:not(#et-z) .et-scope .dockbtn[aria-expanded="true"], html.et-dark:not(#et-z) .et-scope.dockbtn[aria-expanded="true"] { background: #F3ECE6; color: #1C1613; } html.et-dark:not(#et-z) .et-scope .a11y-panel, html.et-dark:not(#et-z) .et-scope.a11y-panel { background: #1E1815; border-color: #3A2F2A; color: #F3ECE6; } /* ---------- Téléphone ---------- */ @media (max-width: 760px) { .et-scope:not(#et-z) .dock, .et-scope.dock:not(#et-z) { top: auto; bottom: 92px; translate: 0 0; right: 12px; gap: 4px; padding: 5px; } .et-scope:not(#et-z) .dockbtn, .et-scope.dockbtn:not(#et-z) { width: 40px; height: 40px; } .et-scope:not(#et-z) .dockbtn .tip, .et-scope.dockbtn:not(#et-z) .tip { display: none; } .et-scope:not(#et-z) .a11y-panel, .et-scope.a11y-panel:not(#et-z) { right: 12px; left: 12px; top: auto; bottom: 16px; translate: 0 0; width: auto; max-height: 70vh; } .et-scope:not(#et-z) .totop, .et-scope.totop:not(#et-z) { left: 14px; bottom: 14px; width: 50px; height: 50px; } .et-scope:not(#et-z) .totop > span, .et-scope.totop:not(#et-z) > span { width: 40px; height: 40px; } .et-scope:not(#et-z) .fx-greet, .et-scope.fx-greet:not(#et-z) { left: 16px; right: 76px; translate: 0 0; max-width: none; bottom: 80px; animation-name: pop; } .et-scope:not(#et-z) .garland, .et-scope.garland:not(#et-z) { top: 80px; } } /* ---------- Recherche globale ---------- */ .et-scope:not(#et-z) .srch-btn, .et-scope.srch-btn:not(#et-z) { width: 46px; height: 46px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid #E7DDD3; background: rgba(255,255,255,.7); color: #221A16; cursor: pointer; transition: background-color .25s, color .25s, translate .25s; } .et-scope:not(#et-z) .srch-btn:hover, .et-scope.srch-btn:hover:not(#et-z) { background: #221A16; color: #FFFFFF; translate: 0 -2px; } html.srch-lock:not(#et-z) { overflow: hidden; } .et-scope:not(#et-z) .srch-wrap, .et-scope.srch-wrap:not(#et-z) { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; box-sizing: border-box; } .et-scope:not(#et-z) .srch-back, .et-scope.srch-back:not(#et-z) { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(28,22,19,.55); backdrop-filter: blur(6px); cursor: default; animation: srchfade .25s ease both; } .et-scope:not(#et-z) .srch-panel, .et-scope.srch-panel:not(#et-z) { position: relative; width: 100%; max-width: 720px; max-height: 76vh; display: flex; flex-direction: column; background: #FFFFFF; color: #221A16; border-radius: 28px; box-shadow: 0 40px 90px -30px rgba(28,22,19,.7); overflow: hidden; animation: srchin .35s cubic-bezier(.2,.8,.2,1) both; font-family: Manrope, system-ui, sans-serif; } .et-scope:not(#et-z) .srch-bar, .et-scope.srch-bar:not(#et-z) { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 22px; border-bottom: 1px solid #F1E9E0; } .et-scope:not(#et-z) .srch-input, .et-scope.srch-input:not(#et-z) { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 19px; color: inherit; padding: 10px 0; } .et-scope:not(#et-z) .srch-input::-webkit-search-cancel-button, .et-scope.srch-input:not(#et-z)::-webkit-search-cancel-button { display: none; } .et-scope:not(#et-z) .srch-input:focus-visible, .et-scope.srch-input:focus-visible:not(#et-z), .et-scope:not(#et-z) .srch-input:focus, .et-scope.srch-input:focus:not(#et-z) { outline: none !important; } .et-scope:not(#et-z) .srch-bar:focus-within, .et-scope.srch-bar:focus-within:not(#et-z) { box-shadow: inset 0 -3px 0 #94C120; } .et-scope:not(#et-z) .srch-clear, .et-scope.srch-clear:not(#et-z), .et-scope:not(#et-z) .srch-esc, .et-scope.srch-esc:not(#et-z) { flex: none; border: 1px solid #E7DDD3; background: transparent; color: #6F5B51; font: inherit; font-size: 12px; font-weight: 800; padding: 7px 12px; border-radius: 999px; cursor: pointer; } .et-scope:not(#et-z) .srch-clear:hover, .et-scope.srch-clear:hover:not(#et-z), .et-scope:not(#et-z) .srch-esc:hover, .et-scope.srch-esc:hover:not(#et-z) { background: #F1E9E0; color: #221A16; } .et-scope:not(#et-z) .srch-body, .et-scope.srch-body:not(#et-z) { overflow-y: auto; padding: 20px 14px 10px; overscroll-behavior: contain; } .et-scope:not(#et-z) .srch-h, .et-scope.srch-h:not(#et-z) { display: block; padding: 0 10px; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6F5B51; } .et-scope:not(#et-z) .srch-chip, .et-scope.srch-chip:not(#et-z) { border: 1px solid #E7DDD3; background: #FAF7F3; color: inherit; font: inherit; font-size: 14px; font-weight: 700; padding: 9px 15px; border-radius: 999px; cursor: pointer; transition: background-color .2s, border-color .2s; } .et-scope:not(#et-z) .srch-chip:hover, .et-scope.srch-chip:hover:not(#et-z) { background: #EAF2D6; border-color: #94C120; } .et-scope:not(#et-z) .srch-quick, .et-scope.srch-quick:not(#et-z) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-bottom: 10px; } .et-scope:not(#et-z) .srch-item, .et-scope.srch-item:not(#et-z) { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 16px; color: inherit; text-decoration: none; transition: background-color .2s; } .et-scope:not(#et-z) .srch-item:hover, .et-scope.srch-item:hover:not(#et-z), .et-scope:not(#et-z) .srch-item:focus-visible, .et-scope.srch-item:focus-visible:not(#et-z) { background: #F4EEE7; color: inherit; } .et-scope:not(#et-z) .srch-ico, .et-scope.srch-ico:not(#et-z) { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #221A16; } .et-scope:not(#et-z) .srch-t, .et-scope.srch-t:not(#et-z) { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .et-scope:not(#et-z) .srch-s, .et-scope.srch-s:not(#et-z) { font-size: 13px; color: #6F5B51; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .et-scope:not(#et-z) .srch-tag, .et-scope.srch-tag:not(#et-z) { flex: none; font-size: 11px; font-weight: 800; color: #6F5B51; padding: 4px 9px; border-radius: 999px; background: #F4EEE7; } .et-scope:not(#et-z) .srch-count, .et-scope.srch-count:not(#et-z) { margin: 0 10px 14px; font-size: 13px; font-weight: 700; color: #3F6A0A; } .et-scope:not(#et-z) .srch-count:empty, .et-scope.srch-count:empty:not(#et-z) { display: none; } .et-scope:not(#et-z) .srch-foot, .et-scope.srch-foot:not(#et-z) { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 22px; border-top: 1px solid #F1E9E0; background: #FAF7F3; font-size: 12px; color: #6F5B51; } .et-scope:not(#et-z) .srch-foot kbd, .et-scope.srch-foot:not(#et-z) kbd { font: inherit; font-weight: 800; padding: 2px 7px; border-radius: 6px; border: 1px solid #E7DDD3; background: #FFFFFF; color: #221A16; } @keyframes srchfade { from { opacity: 0; } } @keyframes srchin { from { opacity: 0; transform: translateY(-16px) scale(.98); } } @media (prefers-color-scheme: dark) { html:not(.et-light):not(#et-z) .et-scope .srch-btn, html:not(.et-light):not(#et-z) .et-scope.srch-btn { background: rgba(30,24,21,.7); border-color: #3A2F2A; color: #F3ECE6; } html:not(.et-light):not(#et-z) .et-scope .srch-btn:hover, html:not(.et-light):not(#et-z) .et-scope.srch-btn:hover { background: #F3ECE6; color: #1C1613; } html:not(.et-light):not(#et-z) .et-scope .srch-panel, html:not(.et-light):not(#et-z) .et-scope.srch-panel { background: #1E1815; color: #F3ECE6; } html:not(.et-light):not(#et-z) .et-scope .srch-bar, html:not(.et-light):not(#et-z) .et-scope.srch-bar, html:not(.et-light):not(#et-z) .et-scope .srch-foot, html:not(.et-light):not(#et-z) .et-scope.srch-foot { border-color: #3A2F2A; } html:not(.et-light):not(#et-z) .et-scope .srch-foot, html:not(.et-light):not(#et-z) .et-scope.srch-foot { background: #191411; color: #CDBFB3; } html:not(.et-light):not(#et-z) .et-scope .srch-foot kbd, html:not(.et-light):not(#et-z) .et-scope.srch-foot kbd, html:not(.et-light):not(#et-z) .et-scope .srch-chip, html:not(.et-light):not(#et-z) .et-scope.srch-chip { background: #2A221E; border-color: #3A2F2A; color: #F3ECE6; } html:not(.et-light):not(#et-z) .et-scope .srch-chip:hover, html:not(.et-light):not(#et-z) .et-scope.srch-chip:hover { background: #3F6A0A; } html:not(.et-light):not(#et-z) .et-scope .srch-item:hover, html:not(.et-light):not(#et-z) .et-scope.srch-item:hover, html:not(.et-light):not(#et-z) .et-scope .srch-item:focus-visible, html:not(.et-light):not(#et-z) .et-scope.srch-item:focus-visible, html:not(.et-light):not(#et-z) .et-scope .srch-tag, html:not(.et-light):not(#et-z) .et-scope.srch-tag { background: #2A221E; } html:not(.et-light):not(#et-z) .et-scope .srch-s, html:not(.et-light):not(#et-z) .et-scope.srch-s, html:not(.et-light):not(#et-z) .et-scope .srch-h, html:not(.et-light):not(#et-z) .et-scope.srch-h, html:not(.et-light):not(#et-z) .et-scope .srch-tag, html:not(.et-light):not(#et-z) .et-scope.srch-tag, html:not(.et-light):not(#et-z) .et-scope .srch-clear, html:not(.et-light):not(#et-z) .et-scope.srch-clear, html:not(.et-light):not(#et-z) .et-scope .srch-esc, html:not(.et-light):not(#et-z) .et-scope.srch-esc { color: #CDBFB3; } html:not(.et-light):not(#et-z) .et-scope .srch-count, html:not(.et-light):not(#et-z) .et-scope.srch-count { color: #B5D96A; } } html.et-dark:not(#et-z) .et-scope .srch-btn, html.et-dark:not(#et-z) .et-scope.srch-btn { background: rgba(30,24,21,.7); border-color: #3A2F2A; color: #F3ECE6; } html.et-dark:not(#et-z) .et-scope .srch-btn:hover, html.et-dark:not(#et-z) .et-scope.srch-btn:hover { background: #F3ECE6; color: #1C1613; } html.et-dark:not(#et-z) .et-scope .srch-panel, html.et-dark:not(#et-z) .et-scope.srch-panel { background: #1E1815; color: #F3ECE6; } html.et-dark:not(#et-z) .et-scope .srch-bar, html.et-dark:not(#et-z) .et-scope.srch-bar, html.et-dark:not(#et-z) .et-scope .srch-foot, html.et-dark:not(#et-z) .et-scope.srch-foot { border-color: #3A2F2A; } html.et-dark:not(#et-z) .et-scope .srch-foot, html.et-dark:not(#et-z) .et-scope.srch-foot { background: #191411; color: #CDBFB3; } html.et-dark:not(#et-z) .et-scope .srch-foot kbd, html.et-dark:not(#et-z) .et-scope.srch-foot kbd, html.et-dark:not(#et-z) .et-scope .srch-chip, html.et-dark:not(#et-z) .et-scope.srch-chip { background: #2A221E; border-color: #3A2F2A; color: #F3ECE6; } html.et-dark:not(#et-z) .et-scope .srch-chip:hover, html.et-dark:not(#et-z) .et-scope.srch-chip:hover { background: #3F6A0A; } html.et-dark:not(#et-z) .et-scope .srch-item:hover, html.et-dark:not(#et-z) .et-scope.srch-item:hover, html.et-dark:not(#et-z) .et-scope .srch-item:focus-visible, html.et-dark:not(#et-z) .et-scope.srch-item:focus-visible, html.et-dark:not(#et-z) .et-scope .srch-tag, html.et-dark:not(#et-z) .et-scope.srch-tag { background: #2A221E; } html.et-dark:not(#et-z) .et-scope .srch-s, html.et-dark:not(#et-z) .et-scope.srch-s, html.et-dark:not(#et-z) .et-scope .srch-h, html.et-dark:not(#et-z) .et-scope.srch-h, html.et-dark:not(#et-z) .et-scope .srch-tag, html.et-dark:not(#et-z) .et-scope.srch-tag, html.et-dark:not(#et-z) .et-scope .srch-clear, html.et-dark:not(#et-z) .et-scope.srch-clear, html.et-dark:not(#et-z) .et-scope .srch-esc, html.et-dark:not(#et-z) .et-scope.srch-esc { color: #CDBFB3; } html.et-dark:not(#et-z) .et-scope .srch-count, html.et-dark:not(#et-z) .et-scope.srch-count { color: #B5D96A; } @media (max-width: 760px) { .et-scope:not(#et-z) .srch-wrap, .et-scope.srch-wrap:not(#et-z) { padding: 0; } .et-scope:not(#et-z) .srch-panel, .et-scope.srch-panel:not(#et-z) { max-width: none; max-height: none; height: 100%; border-radius: 0; } .et-scope:not(#et-z) .srch-quick, .et-scope.srch-quick:not(#et-z) { grid-template-columns: minmax(0, 1fr); } .et-scope:not(#et-z) .srch-foot, .et-scope.srch-foot:not(#et-z) { display: none; } .et-scope:not(#et-z) .srch-tag, .et-scope.srch-tag:not(#et-z) { display: none; } .et-scope:not(#et-z) .srch-btn, .et-scope.srch-btn:not(#et-z) { width: 48px; height: 48px; border-radius: 14px; background: var(--et-card); } } /* ---------- Infos pratiques en direct ---------- */ .et-scope:not(#et-z) .livedot, .et-scope.livedot:not(#et-z) { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #94C120; flex: none; } .et-scope:not(#et-z) .livedot::after, .et-scope.livedot:not(#et-z)::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #94C120; animation: livepulse 1.8s ease-out infinite; } @keyframes livepulse { from { scale: .5; opacity: 1; } to { scale: 1.6; opacity: 0; } } .et-scope:not(#et-z) .live-tile, .et-scope.live-tile:not(#et-z) { transition: background-color .3s, translate .3s; } .et-scope:not(#et-z) .live-tile:hover, .et-scope.live-tile:hover:not(#et-z) { background: rgba(255,255,255,.1) !important; translate: 0 -3px; } @media (max-width: 760px) { .et-scope:not(#et-z) .live, .et-scope.live:not(#et-z) { padding: 24px !important; border-radius: 28px !important; } } @media (prefers-reduced-motion: reduce) { .et-scope:not(#et-z) .livedot::after, .et-scope.livedot:not(#et-z)::after { animation: none; } } .et-scope:not(#et-z) .hero-srch, .et-scope.hero-srch:not(#et-z) { transition: border-color .25s, box-shadow .25s, translate .25s; } .et-scope:not(#et-z) .hero-srch:hover, .et-scope.hero-srch:hover:not(#et-z) { border-color: #94C120 !important; translate: 0 -2px; box-shadow: 0 24px 48px -26px rgba(63,106,10,.55) !important; } @media (prefers-color-scheme: dark) { html:not(.et-light):not(#et-z) .et-scope .hero-srch, html:not(.et-light):not(#et-z) .et-scope.hero-srch { background: #1E1815 !important; border-color: #3A2F2A !important; color: #CDBFB3 !important; } } html.et-dark:not(#et-z) .et-scope .hero-srch, html.et-dark:not(#et-z) .et-scope.hero-srch { background: #1E1815 !important; border-color: #3A2F2A !important; color: #CDBFB3 !important; } /* ---------- Effets au mouvement de la souris ---------- */ .et-scope:not(#et-z) .cur-ring, .et-scope.cur-ring:not(#et-z), .et-scope:not(#et-z) .cur-dot, .et-scope.cur-dot:not(#et-z) { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; border-radius: 50%; } .et-scope:not(#et-z) .cur-ring, .et-scope.cur-ring:not(#et-z) { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(63,106,10,.55); transition: width .3s, height .3s, margin .3s, background-color .3s, border-color .3s, opacity .3s, scale .15s; display: flex; align-items: center; justify-content: center; } .et-scope:not(#et-z) .cur-dot, .et-scope.cur-dot:not(#et-z) { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #3F6A0A; transition: opacity .3s, scale .2s; } .et-scope:not(#et-z) .cur-ring.hot, .et-scope.cur-ring.hot:not(#et-z) { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(148,193,32,.16); border-color: #94C120; } .et-scope:not(#et-z) .cur-ring.hot + .cur-dot, .et-scope.cur-ring.hot:not(#et-z) + .cur-dot { scale: 0; } .et-scope:not(#et-z) .cur-ring.img, .et-scope.cur-ring.img:not(#et-z) { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(34,26,22,.82); border-color: transparent; } .et-scope:not(#et-z) .cur-ring.img::after, .et-scope.cur-ring.img:not(#et-z)::after { content: attr(data-label); color: #FFFFFF; font: 800 13px Manrope, system-ui, sans-serif; letter-spacing: .04em; } .et-scope:not(#et-z) .cur-ring.press, .et-scope.cur-ring.press:not(#et-z) { scale: .8; } html.curfx-off:not(#et-z) .et-scope .cur-ring, html.curfx-off:not(#et-z) .et-scope.cur-ring, html.curfx-off:not(#et-z) .et-scope .cur-dot, html.curfx-off:not(#et-z) .et-scope.cur-dot { display: none; } .et-scope:not(#et-z) .cur-burst, .et-scope.cur-burst:not(#et-z) { position: fixed; z-index: 121; width: 0; height: 0; pointer-events: none; } .et-scope:not(#et-z) .cur-burst > i, .et-scope.cur-burst:not(#et-z) > i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #94C120; animation: burst .6s cubic-bezier(.2,.7,.2,1) forwards; } .et-scope:not(#et-z) .cur-burst > i:nth-child(odd), .et-scope.cur-burst:not(#et-z) > i:nth-child(odd) { background: #E8B33C; } @keyframes burst { from { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateX(30px) scale(.3); opacity: 0; } } html:not(#et-z) .et-scope .lift, html:not(#et-z) .et-scope.lift, html:not(#et-z) .et-scope .igtile, html:not(#et-z) .et-scope.igtile, html:not(#et-z) .et-scope .live-tile, html:not(#et-z) .et-scope.live-tile { transition: translate .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, rotate .25s ease-out, background-color .3s; } .et-scope:not(#et-z) .tilting::after, .et-scope.tilting:not(#et-z)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.38), rgba(255,255,255,0) 50%); mix-blend-mode: soft-light; z-index: 2; } html:not(#et-z) .et-scope .btn, html:not(#et-z) .et-scope.btn, html:not(#et-z) .et-scope .dockbtn, html:not(#et-z) .et-scope.dockbtn, html:not(#et-z) .et-scope .srch-btn, html:not(#et-z) .et-scope.srch-btn, html:not(#et-z) .et-scope .totop, html:not(#et-z) .et-scope.totop { transition-property: translate, transform, background-color, color, box-shadow; transition-duration: .25s, .35s, .25s, .25s, .25s; transition-timing-function: ease, cubic-bezier(.2,.7,.2,1); } html:not(#et-z) .et-scope .float, html:not(#et-z) .et-scope.float { transition: transform .6s cubic-bezier(.2,.7,.2,1); } .et-scope:not(#et-z) .spot.spot-on, .et-scope.spot.spot-on:not(#et-z) { background-image: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(148,193,32,.16), rgba(148,193,32,0) 60%) !important; } @media (prefers-color-scheme: dark) { html:not(.et-light):not(#et-z) .et-scope .cur-ring, html:not(.et-light):not(#et-z) .et-scope.cur-ring { border-color: rgba(181,217,106,.6); } html:not(.et-light):not(#et-z) .et-scope .cur-dot, html:not(.et-light):not(#et-z) .et-scope.cur-dot { background: #B5D96A; } } html.et-dark:not(#et-z) .et-scope .cur-ring, html.et-dark:not(#et-z) .et-scope.cur-ring { border-color: rgba(181,217,106,.6); } html.et-dark:not(#et-z) .et-scope .cur-dot, html.et-dark:not(#et-z) .et-scope.cur-dot { background: #B5D96A; } @media (prefers-reduced-motion: reduce) { .et-scope:not(#et-z) .cur-ring, .et-scope.cur-ring:not(#et-z), .et-scope:not(#et-z) .cur-dot, .et-scope.cur-dot:not(#et-z), .et-scope:not(#et-z) .cur-burst, .et-scope.cur-burst:not(#et-z) { display: none; } } /* ---------- Écran de chargement & transitions entre pages ---------- */ .et-scope:not(#et-z) .pg-loader, .et-scope.pg-loader:not(#et-z) { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: #FAF7F3; pointer-events: none; } .et-scope:not(#et-z) .pg-inner, .et-scope.pg-inner:not(#et-z) { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 24px; } .et-scope:not(#et-z) .pg-logo, .et-scope.pg-logo:not(#et-z) { display: block; width: min(320px, 70vw); } .et-scope:not(#et-z) .pg-logo img, .et-scope.pg-logo:not(#et-z) img { display: block; width: 100%; height: auto; } .et-scope:not(#et-z) .pg-name, .et-scope.pg-name:not(#et-z) { font-family: Fraunces, Georgia, serif; font-size: 30px; line-height: 1.1; color: #221A16; } .et-scope:not(#et-z) .pg-name em, .et-scope.pg-name:not(#et-z) em { font-style: italic; color: #3F6A0A; } .et-scope:not(#et-z) .pg-tag, .et-scope.pg-tag:not(#et-z) { font: 700 12px Manrope, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6F5B51; } .et-scope:not(#et-z) .pg-bar, .et-scope.pg-bar:not(#et-z) { display: block; width: 180px; height: 3px; border-radius: 999px; background: #EFE6DC; overflow: hidden; } .et-scope:not(#et-z) .pg-bar > i, .et-scope.pg-bar:not(#et-z) > i { display: block; height: 100%; width: 100%; background: #94C120; transform-origin: left; } /* 1re visite : le logo se dévoile de gauche à droite, puis le rideau remonte */ .et-scope:not(#et-z) .pg-loader.full, .et-scope.pg-loader.full:not(#et-z) { animation: pgUp .7s cubic-bezier(.7,0,.2,1) 1.55s forwards; } .et-scope:not(#et-z) .pg-loader.full .pg-logo, .et-scope.pg-loader.full:not(#et-z) .pg-logo { animation: pgReveal 1.1s cubic-bezier(.6,0,.2,1) .1s both; } .et-scope:not(#et-z) .pg-loader.full .pg-name, .et-scope.pg-loader.full:not(#et-z) .pg-name { animation: pgFade .6s ease .7s both; } .et-scope:not(#et-z) .pg-loader.full .pg-tag, .et-scope.pg-loader.full:not(#et-z) .pg-tag { animation: pgFade .6s ease .9s both; } .et-scope:not(#et-z) .pg-loader.full .pg-bar > i, .et-scope.pg-loader.full:not(#et-z) .pg-bar > i { animation: pgBar 1.4s cubic-bezier(.4,0,.2,1) .1s both; } /* pages suivantes : simple rideau qui s'efface */ .et-scope:not(#et-z) .pg-loader.quick, .et-scope.pg-loader.quick:not(#et-z) { background: #221A16; animation: pgUp .55s cubic-bezier(.7,0,.2,1) .12s forwards; } .et-scope:not(#et-z) .pg-loader.quick .pg-logo, .et-scope.pg-loader.quick:not(#et-z) .pg-logo { width: 120px; filter: brightness(0) invert(1); opacity: .9; } .et-scope:not(#et-z) .pg-loader.quick .pg-name, .et-scope.pg-loader.quick:not(#et-z) .pg-name, .et-scope:not(#et-z) .pg-loader.quick .pg-tag, .et-scope.pg-loader.quick:not(#et-z) .pg-tag, .et-scope:not(#et-z) .pg-loader.quick .pg-bar, .et-scope.pg-loader.quick:not(#et-z) .pg-bar { display: none; } @keyframes pgReveal { from { clip-path: inset(0 100% 0 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes pgFade { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } } @keyframes pgBar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes pgUp { to { clip-path: inset(0 0 100% 0); visibility: hidden; } } @media (prefers-color-scheme: dark) { html:not(.et-light):not(#et-z) .et-scope .pg-loader, html:not(.et-light):not(#et-z) .et-scope.pg-loader { background: #1C1613; } html:not(.et-light):not(#et-z) .et-scope .pg-name, html:not(.et-light):not(#et-z) .et-scope.pg-name { color: #F6F0EA; } html:not(.et-light):not(#et-z) .et-scope .pg-name em, html:not(.et-light):not(#et-z) .et-scope.pg-name em { color: #B5D96A; } html:not(.et-light):not(#et-z) .et-scope .pg-bar, html:not(.et-light):not(#et-z) .et-scope.pg-bar { background: #3A2F2A; } } html.et-dark:not(#et-z) .et-scope .pg-loader, html.et-dark:not(#et-z) .et-scope.pg-loader { background: #1C1613; } html.et-dark:not(#et-z) .et-scope .pg-name, html.et-dark:not(#et-z) .et-scope.pg-name { color: #F6F0EA; } html.et-dark:not(#et-z) .et-scope .pg-name em, html.et-dark:not(#et-z) .et-scope.pg-name em { color: #B5D96A; } html.et-dark:not(#et-z) .et-scope .pg-bar, html.et-dark:not(#et-z) .et-scope.pg-bar { background: #3A2F2A; } @media (prefers-reduced-motion: reduce) { .et-scope:not(#et-z) .pg-loader, .et-scope.pg-loader:not(#et-z) { display: none; } } html.a11y-still:not(#et-z) .et-scope .pg-loader, html.a11y-still:not(#et-z) .et-scope.pg-loader { display: none !important; } /* Sur le vrai site WordPress : transition fluide native entre les pages (navigateurs récents) */ @view-transition { navigation: auto; } .et-scope:not(#et-z) header.hdr { view-transition-name: site-header; } ::view-transition-old(root) { animation: vtOut .32s cubic-bezier(.4,0,1,1) both; } ::view-transition-new(root) { animation: vtIn .5s cubic-bezier(0,0,.2,1) both; } @keyframes vtOut { to { opacity: 0; translate: 0 -24px; filter: blur(4px); } } @keyframes vtIn { from { opacity: 0; translate: 0 32px; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ---------- Assistant « questions fréquentes » ---------- */ .et-scope:not(#et-z) .faq-fab, .et-scope.faq-fab:not(#et-z) { position: fixed; right: 18px; bottom: 18px; z-index: 72; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: #221A16; color: #FFFFFF; font: 800 15px Manrope, system-ui, sans-serif; cursor: pointer; box-shadow: 0 20px 40px -18px rgba(34,26,22,.7); animation: pop .6s cubic-bezier(.2,.8,.2,1) 2.4s both; } .et-scope:not(#et-z) .faq-fab::before, .et-scope.faq-fab:not(#et-z)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(148,193,32,.6); animation: faqPing 2.8s ease-out 3s 3; pointer-events: none; } .et-scope:not(#et-z) .faq-fab[aria-expanded="true"], .et-scope.faq-fab[aria-expanded="true"]:not(#et-z) { background: #3F6A0A; } @keyframes faqPing { 0% { box-shadow: 0 0 0 0 rgba(148,193,32,.55); } 100% { box-shadow: 0 0 0 18px rgba(148,193,32,0); } } .et-scope:not(#et-z) .faq-panel, .et-scope.faq-panel:not(#et-z) { position: fixed; right: 18px; bottom: 86px; z-index: 73; width: 380px; max-height: min(620px, calc(100vh - 120px)); display: flex; flex-direction: column; background: #FFFFFF; color: #221A16; border-radius: 26px; border: 1px solid #E7DDD3; box-shadow: 0 40px 80px -30px rgba(28,22,19,.55); overflow: hidden; font-family: Manrope, system-ui, sans-serif; animation: srchin .35s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom right; } .et-scope:not(#et-z) .faq-head, .et-scope.faq-head:not(#et-z) { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 18px; background: #221A16; color: #FFFFFF; } .et-scope:not(#et-z) .faq-av, .et-scope.faq-av:not(#et-z) { width: 44px; height: 44px; flex: none; border-radius: 14px; background: #FAF7F3; display: flex; align-items: center; justify-content: center; overflow: hidden; } .et-scope:not(#et-z) .faq-av img, .et-scope.faq-av:not(#et-z) img { width: 38px; height: auto; display: block; } .et-scope:not(#et-z) .faq-title, .et-scope.faq-title:not(#et-z) { font-family: Fraunces, Georgia, serif; font-size: 20px; line-height: 1.1; } .et-scope:not(#et-z) .faq-sub, .et-scope.faq-sub:not(#et-z) { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #CDBFB3; margin-top: 3px; } .et-scope:not(#et-z) .faq-sub .livedot, .et-scope.faq-sub:not(#et-z) .livedot { width: 7px; height: 7px; } .et-scope:not(#et-z) .faq-x, .et-scope.faq-x:not(#et-z) { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; } .et-scope:not(#et-z) .faq-log, .et-scope.faq-log:not(#et-z) { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #FAF7F3; overscroll-behavior: contain; min-height: 160px; } .et-scope:not(#et-z) .faq-msg, .et-scope.faq-msg:not(#et-z) { max-width: 86%; padding: 11px 14px; border-radius: 18px; font-size: 14px; line-height: 1.5; animation: pgFade .35s ease both; } .et-scope:not(#et-z) .faq-msg.bot, .et-scope.faq-msg.bot:not(#et-z) { align-self: flex-start; background: #FFFFFF; border: 1px solid #EFE6DC; border-bottom-left-radius: 6px; display: flex; flex-direction: column; gap: 8px; } .et-scope:not(#et-z) .faq-msg.user, .et-scope.faq-msg.user:not(#et-z) { align-self: flex-end; background: #3F6A0A; color: #FFFFFF; border-bottom-right-radius: 6px; } .et-scope:not(#et-z) .faq-link, .et-scope.faq-link:not(#et-z) { align-self: flex-start; font-weight: 800; color: #3F6A0A; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: #EAF2D6; } .et-scope:not(#et-z) .faq-link:hover, .et-scope.faq-link:hover:not(#et-z) { background: #94C120; color: #1E2F05; } .et-scope:not(#et-z) .faq-typing, .et-scope.faq-typing:not(#et-z) { flex-direction: row !important; gap: 5px !important; padding: 14px 16px; } .et-scope:not(#et-z) .faq-typing > i, .et-scope.faq-typing:not(#et-z) > i { width: 7px; height: 7px; border-radius: 50%; background: #A3897A; animation: twinkle 1s ease-in-out infinite; } .et-scope:not(#et-z) .faq-typing > i:nth-child(2), .et-scope.faq-typing:not(#et-z) > i:nth-child(2) { animation-delay: .15s; } .et-scope:not(#et-z) .faq-typing > i:nth-child(3), .et-scope.faq-typing:not(#et-z) > i:nth-child(3) { animation-delay: .3s; } .et-scope:not(#et-z) .faq-chips, .et-scope.faq-chips:not(#et-z) { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; border-top: 1px solid #F1E9E0; scrollbar-width: none; } .et-scope:not(#et-z) .faq-chips::-webkit-scrollbar, .et-scope.faq-chips:not(#et-z)::-webkit-scrollbar { display: none; } .et-scope:not(#et-z) .faq-chips:empty, .et-scope.faq-chips:empty:not(#et-z) { display: none; } .et-scope:not(#et-z) .faq-chip, .et-scope.faq-chip:not(#et-z) { flex: none; border: 1px solid #E7DDD3; background: #FFFFFF; color: inherit; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .et-scope:not(#et-z) .faq-chip:hover, .et-scope.faq-chip:hover:not(#et-z) { border-color: #94C120; background: #EAF2D6; } .et-scope:not(#et-z) .faq-form, .et-scope.faq-form:not(#et-z) { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid #F1E9E0; } .et-scope:not(#et-z) .faq-form input, .et-scope.faq-form:not(#et-z) input { flex: 1; min-width: 0; border: 1.5px solid #E7DDD3; border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 15px; color: inherit; background: #FFFFFF; } .et-scope:not(#et-z) .faq-form input:focus, .et-scope.faq-form:not(#et-z) input:focus { outline: none; border-color: #94C120; } .et-scope:not(#et-z) .faq-form button, .et-scope.faq-form:not(#et-z) button { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: #94C120; color: #1E2F05; display: flex; align-items: center; justify-content: center; cursor: pointer; } @media (prefers-color-scheme: dark) { html:not(.et-light):not(#et-z) .et-scope .faq-panel, html:not(.et-light):not(#et-z) .et-scope.faq-panel { background: #1E1815; color: #F3ECE6; border-color: #3A2F2A; } html:not(.et-light):not(#et-z) .et-scope .faq-log, html:not(.et-light):not(#et-z) .et-scope.faq-log { background: #191411; } html:not(.et-light):not(#et-z) .et-scope .faq-msg.bot, html:not(.et-light):not(#et-z) .et-scope.faq-msg.bot, html:not(.et-light):not(#et-z) .et-scope .faq-chip, html:not(.et-light):not(#et-z) .et-scope.faq-chip, html:not(.et-light):not(#et-z) .et-scope .faq-form input, html:not(.et-light):not(#et-z) .et-scope.faq-form input { background: #2A221E; border-color: #3A2F2A; color: #F3ECE6; } html:not(.et-light):not(#et-z) .et-scope .faq-chips, html:not(.et-light):not(#et-z) .et-scope.faq-chips, html:not(.et-light):not(#et-z) .et-scope .faq-form, html:not(.et-light):not(#et-z) .et-scope.faq-form { border-color: #3A2F2A; } html:not(.et-light):not(#et-z) .et-scope .faq-link, html:not(.et-light):not(#et-z) .et-scope.faq-link { background: #3F6A0A; color: #FFFFFF; } html:not(.et-light):not(#et-z) .et-scope .faq-fab, html:not(.et-light):not(#et-z) .et-scope.faq-fab { background: #F3ECE6; color: #1C1613; } } html.et-dark:not(#et-z) .et-scope .faq-panel, html.et-dark:not(#et-z) .et-scope.faq-panel { background: #1E1815; color: #F3ECE6; border-color: #3A2F2A; } html.et-dark:not(#et-z) .et-scope .faq-log, html.et-dark:not(#et-z) .et-scope.faq-log { background: #191411; } html.et-dark:not(#et-z) .et-scope .faq-msg.bot, html.et-dark:not(#et-z) .et-scope.faq-msg.bot, html.et-dark:not(#et-z) .et-scope .faq-chip, html.et-dark:not(#et-z) .et-scope.faq-chip, html.et-dark:not(#et-z) .et-scope .faq-form input, html.et-dark:not(#et-z) .et-scope.faq-form input { background: #2A221E; border-color: #3A2F2A; color: #F3ECE6; } html.et-dark:not(#et-z) .et-scope .faq-chips, html.et-dark:not(#et-z) .et-scope.faq-chips, html.et-dark:not(#et-z) .et-scope .faq-form, html.et-dark:not(#et-z) .et-scope.faq-form { border-color: #3A2F2A; } html.et-dark:not(#et-z) .et-scope .faq-link, html.et-dark:not(#et-z) .et-scope.faq-link { background: #3F6A0A; color: #FFFFFF; } html.et-dark:not(#et-z) .et-scope .faq-fab, html.et-dark:not(#et-z) .et-scope.faq-fab { background: #F3ECE6; color: #1C1613; } @media (max-width: 760px) { .et-scope:not(#et-z) .faq-fab, .et-scope.faq-fab:not(#et-z) { right: 12px; bottom: 14px; width: 52px; height: 52px; padding: 0; justify-content: center; } .et-scope:not(#et-z) .faq-fab-l, .et-scope.faq-fab-l:not(#et-z) { display: none; } .et-scope:not(#et-z) .faq-panel, .et-scope.faq-panel:not(#et-z) { left: 8px; right: 8px; bottom: 76px; width: auto; max-height: calc(100vh - 110px); border-radius: 22px; } } @media (prefers-reduced-motion: reduce) { .et-scope:not(#et-z) .faq-fab, .et-scope.faq-fab:not(#et-z), .et-scope:not(#et-z) .faq-fab::before, .et-scope.faq-fab:not(#et-z)::before, .et-scope:not(#et-z) .faq-panel, .et-scope.faq-panel:not(#et-z), .et-scope:not(#et-z) .faq-msg, .et-scope.faq-msg:not(#et-z) { animation: none; } } /* ---------- Météo ---------- */ .et-scope:not(#et-z) .wx-ico, .et-scope.wx-ico:not(#et-z) { display: block; width: 34px; height: 34px; } .et-scope:not(#et-z) .wx-ico.big, .et-scope.wx-ico.big:not(#et-z) { width: 76px; height: 76px; flex: none; } .et-scope:not(#et-z) .wx-ico svg, .et-scope.wx-ico:not(#et-z) svg { display: block; width: 100%; height: 100%; } .et-scope:not(#et-z) .wx-ico.big svg, .et-scope.wx-ico.big:not(#et-z) svg { animation: fl 6s ease-in-out infinite; } .et-scope:not(#et-z) .wx-day, .et-scope.wx-day:not(#et-z) { transition: background-color .3s, translate .3s; } .et-scope:not(#et-z) .wx-day:hover, .et-scope.wx-day:hover:not(#et-z) { background: rgba(255,255,255,.08) !important; translate: 0 -3px; } @media (max-width: 760px) { .et-scope:not(#et-z) .wx-week, .et-scope.wx-week:not(#et-z) { grid-template-columns: repeat(7, minmax(64px, 1fr)) !important; overflow-x: auto; } .et-scope:not(#et-z) .wx-ico.big, .et-scope.wx-ico.big:not(#et-z) { width: 60px; height: 60px; } } @media (prefers-reduced-motion: reduce) { .et-scope:not(#et-z) .wx-ico.big svg, .et-scope.wx-ico.big:not(#et-z) svg { animation: none; } } /* ---------- Accueil : vidéo drone en fond ---------- */ .et-scope:not(#et-z) .hv-media, .et-scope.hv-media:not(#et-z) { position: absolute; inset: 0; overflow: hidden; } .et-scope:not(#et-z) .hv-video, .et-scope.hv-video:not(#et-z) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .et-scope:not(#et-z) .hv-shade, .et-scope.hv-shade:not(#et-z) { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,15,12,.82) 0%, rgba(20,15,12,.55) 45%, rgba(20,15,12,.15) 100%), linear-gradient(0deg, rgba(20,15,12,.6) 0%, rgba(20,15,12,0) 40%); } /* Simulation d'un survol en attendant la vraie vidéo */ .et-scope:not(#et-z) .hv-sim, .et-scope.hv-sim:not(#et-z) { position: absolute; inset: 0; } .et-scope:not(#et-z) .hv-sky, .et-scope.hv-sky:not(#et-z) { position: absolute; inset: 0; background: linear-gradient(180deg, #2B3A55 0%, #6E7FA0 38%, #E8B98A 72%, #F3D2A6 100%); } .et-scope:not(#et-z) .hv-sun, .et-scope.hv-sun:not(#et-z) { position: absolute; right: 22%; top: 46%; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,228,170,.95), rgba(255,200,120,0) 70%); animation: hvSun 18s ease-in-out infinite alternate; } .et-scope:not(#et-z) .hv-town, .et-scope.hv-town:not(#et-z) { position: absolute; right: -6%; bottom: -4%; width: 82%; max-width: 1300px; height: auto; filter: brightness(.22) sepia(.4); opacity: .95; transform-origin: 70% 90%; animation: hvFly 26s ease-in-out infinite alternate; } .et-scope:not(#et-z) .hv-cloud, .et-scope.hv-cloud:not(#et-z) { position: absolute; height: 60px; border-radius: 999px; background: rgba(255,255,255,.55); filter: blur(18px); } .et-scope:not(#et-z) .hv-cloud.c1, .et-scope.hv-cloud.c1:not(#et-z) { top: 16%; width: 380px; animation: hvCloud 38s linear infinite; } .et-scope:not(#et-z) .hv-cloud.c2, .et-scope.hv-cloud.c2:not(#et-z) { top: 30%; width: 260px; opacity: .7; animation: hvCloud 52s linear -20s infinite; } .et-scope:not(#et-z) .hv-cloud.c3, .et-scope.hv-cloud.c3:not(#et-z) { top: 8%; width: 520px; opacity: .5; animation: hvCloud 70s linear -40s infinite; } .et-scope:not(#et-z) .hv-ph, .et-scope.hv-ph:not(#et-z) { position: absolute; right: 24px; top: 20px; max-width: 360px; text-align: right; font: 700 12px Manrope, system-ui, sans-serif; color: rgba(255,255,255,.75); } .et-scope:not(#et-z) .hv-sim.paused *, .et-scope.hv-sim.paused:not(#et-z) *, .et-scope:not(#et-z) .hv-sim.paused, .et-scope.hv-sim.paused:not(#et-z) { animation-play-state: paused !important; } @keyframes hvFly { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-4%, 2%); } } @keyframes hvCloud { from { left: -40%; } to { left: 110%; } } @keyframes hvSun { from { translate: 0 0; } to { translate: -40px -30px; } } .et-scope:not(#et-z) .hv-ctrl, .et-scope.hv-ctrl:not(#et-z) { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 10px; align-items: center; z-index: 2; } .et-scope:not(#et-z) .hv-chip, .et-scope.hv-chip:not(#et-z) { display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 999px; background: rgba(20,15,12,.5); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); font: 700 12px Manrope, system-ui, sans-serif; letter-spacing: .04em; color: #FFFFFF; } .et-scope:not(#et-z) .hv-chip .livedot, .et-scope.hv-chip:not(#et-z) .livedot { width: 8px; height: 8px; background: #E2526B; } .et-scope:not(#et-z) .hv-chip .livedot::after, .et-scope.hv-chip:not(#et-z) .livedot::after { border-color: #E2526B; } .et-scope:not(#et-z) .hv-btn, .et-scope.hv-btn:not(#et-z) { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(20,15,12,.5); backdrop-filter: blur(10px); color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; } .et-scope:not(#et-z) .hv-btn:hover, .et-scope.hv-btn:hover:not(#et-z) { background: #FFFFFF; color: #1C1613; } .et-scope:not(#et-z) .hero-vid .hv-side > .float, .et-scope.hero-vid:not(#et-z) .hv-side > .float { box-shadow: 0 24px 50px -20px rgba(0,0,0,.6) !important; } .et-scope:not(#et-z) .hero-vid a.btn:hover, .et-scope.hero-vid:not(#et-z) a.btn:hover { color: inherit; } @media (max-width: 760px) { .et-scope:not(#et-z) .hv-side, .et-scope.hv-side:not(#et-z) { display: none; } .et-scope:not(#et-z) .hero-vid .hv-in, .et-scope.hero-vid:not(#et-z) .hv-in { min-height: 640px !important; padding-top: 56px !important; padding-bottom: 96px !important; } .et-scope:not(#et-z) .hv-town, .et-scope.hv-town:not(#et-z) { width: 150%; right: -40%; opacity: .7; } .et-scope:not(#et-z) .hv-shade, .et-scope.hv-shade:not(#et-z) { background: linear-gradient(0deg, rgba(20,15,12,.85) 0%, rgba(20,15,12,.55) 60%, rgba(20,15,12,.35) 100%); } .et-scope:not(#et-z) .hv-ph, .et-scope.hv-ph:not(#et-z) { display: none; } .et-scope:not(#et-z) .hv-ctrl, .et-scope.hv-ctrl:not(#et-z) { right: 16px; bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .et-scope:not(#et-z) .hv-sim *, .et-scope.hv-sim:not(#et-z) * { animation: none !important; } } html.a11y-still:not(#et-z) .hv-sim * { animation: none !important; } .et-scope:not(#et-z) .hero-vid .hv-side > .float:not(.f2), .et-scope.hero-vid:not(#et-z) .hv-side > .float:not(.f2) { color: #221A16; } .et-scope:not(#et-z) .wx-week, .et-scope.wx-week:not(#et-z) { align-content: center; } /* ---------- Ajustements d'intégration ---------- */ .et-scope:not(#et-z) .hv-ctrl, .et-scope.hv-ctrl:not(#et-z) { right: 230px; } @media (max-width: 760px) { .et-scope:not(#et-z) .hv-ctrl, .et-scope.hv-ctrl:not(#et-z) { right: 76px; } } body:has(.cookie-bar:not([hidden])):not(#et-z) .et-scope .faq-fab, body:has(.cookie-bar:not([hidden])):not(#et-z) .et-scope.faq-fab { bottom: 250px; } @media (max-width: 760px) { body:has(.cookie-bar:not([hidden])):not(#et-z) .et-scope .faq-fab, body:has(.cookie-bar:not([hidden])):not(#et-z) .et-scope.faq-fab { bottom: 290px; } } html:not(#et-z) .et-scope .btn, html:not(#et-z) .et-scope.btn, html:not(#et-z) .et-scope .theme-toggle, html:not(#et-z) .et-scope.theme-toggle, html:not(#et-z) .et-scope .wp-block-button__link, html:not(#et-z) .et-scope.wp-block-button__link { transition-property: translate, transform, background-color, color, box-shadow, rotate; transition-duration: .25s, .35s, .25s, .25s, .25s, .5s; }