/* ========================================================================== style.css — Atelier interactif (parc machines) Tout est scopé sous #smad-atelier pour une intégration WordPress sans collision avec les styles du thème / du page builder. ========================================================================== */ /* Police principale (texte courant) + police secondaire (titres) de la charte graphique. @import garde le fichier autonome et copiable tel quel dans un champ CSS personnalisé WordPress — sans dépendre du . */ @import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=Raleway:wght@400;600;700;800&family=Poppins:wght@600;700&display=swap"); #smad-atelier { /* ---- Design tokens : seule source de vérité pour les couleurs/polices ---- */ --smad-font: "PT Sans", Arial, sans-serif; --smad-font-heading: "Raleway", "PT Sans", Arial, sans-serif; /* Charte graphique */ --smad-green: #0c8e36; --smad-green-strong: #0a7530; --smad-green-soft: #bce0b8; --smad-cream: #fbfbef; --smad-slate: #576066; --smad-bg: #efedeb; --smad-bg-alt: #e7e4e0; --smad-surface: #ffffff; --smad-border: rgba(87, 96, 102, 0.2); --smad-text: var(--smad-slate); --smad-text-muted: #7c848a; --smad-accent: var(--smad-green); --smad-accent-strong: var(--smad-green-strong); --smad-accent-soft: var(--smad-green-soft); --smad-accent-contrast: var(--smad-cream); --smad-radius-sm: 8px; --smad-shadow: 0 20px 45px rgba(35, 40, 32, 0.28); --smad-transition: 220ms cubic-bezier(.4,0,.2,1); all: initial; display: block; box-sizing: border-box; font-family: var(--smad-font); color: var(--smad-text); background: var(--smad-bg); overflow: hidden; width: 100%; isolation: isolate; } #smad-atelier *, #smad-atelier *::before, #smad-atelier *::after { box-sizing: border-box; font-family: inherit; } #smad-atelier h1, #smad-atelier h2, #smad-atelier h3, #smad-atelier .smad-nav__tab-label { font-family: var(--smad-font-heading); } #smad-atelier img { max-width: 100%; display: block; } #smad-atelier button { cursor: pointer; } #smad-atelier ul { margin: 0; padding: 0; list-style: none; } #smad-atelier p { margin: 0; } #smad-atelier h1, #smad-atelier h2, #smad-atelier h3 { margin: 0; font-weight: 700; } /* ---------------------------------------------------------------------- */ /* Header / navigation entre zones */ /* ---------------------------------------------------------------------- */ .smad-nav { padding: 28px 32px; background: linear-gradient(180deg, var(--smad-bg-alt), var(--smad-bg)); border-bottom: 1px solid var(--smad-border); } .smad-nav__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: 1080px; margin: 0 auto; } .smad-nav__intro { max-width: 640px; } #smad-atelier .smad-nav__eyebrow { font-family: "Poppins", var(--smad-font-heading); font-size: 30px; color: var(--smad-accent-strong); font-weight: 700; margin-bottom: 6px; } .smad-nav__description { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 36px; } #smad-atelier .smad-nav__description p { font-family: var(--smad-font-heading); font-weight: 400; font-size: 20px; line-height: 1.55; color: #1c1f21; } #smad-atelier .smad-nav__title { font-family: var(--smad-font-heading); font-size: 30px; font-weight: 400; color: var(--smad-accent-strong); line-height: 1.2; } .smad-nav__tabs { display: flex; gap: 8px; background: var(--smad-surface); border: 1px solid var(--smad-border); border-radius: 999px; padding: 6px; } #smad-atelier .smad-nav__tab { font-family: var(--smad-font-heading); appearance: none; border: none; background: transparent; color: var(--smad-text-muted); padding: 10px 20px; border-radius: 999px; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; transition: background var(--smad-transition), color var(--smad-transition); min-width: 140px; } .smad-nav__tab-label { font-weight: 700; font-size: 14px; color: inherit; } .smad-nav__tab-sub { font-size: 12px; opacity: .8; } #smad-atelier .smad-nav__tab:hover { color: var(--smad-text); background: var(--smad-accent-soft); } #smad-atelier .smad-nav__tab.is-active { background: var(--smad-accent); color: var(--smad-accent-contrast); } #smad-atelier .smad-nav__tab.is-active .smad-nav__tab-sub { opacity: .85; } /* ---------------------------------------------------------------------- */ /* Stage / scène */ /* ---------------------------------------------------------------------- */ .smad-stage { position: relative; background: #000; } .smad-hint__mobile { display: none; } .smad-scene { position: relative; width: 100%; aspect-ratio: 1798 / 875; /* ratio réel des fonds fournis */ overflow: hidden; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity 420ms ease; } .smad-scene[data-zone="fond-2"] { aspect-ratio: 1772 / 887; } .smad-scene.is-active { position: relative; opacity: 1; visibility: visible; } .smad-scene__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; } .smad-scene__machines { position: absolute; inset: 0; } @media (prefers-reduced-motion: reduce) { .smad-scene { transition: none; } } /* ---------------------------------------------------------------------- */ /* Machines */ /* ---------------------------------------------------------------------- */ .smad-machine { position: absolute; appearance: none; border: none; background: transparent; /* padding en PX fixes (jamais en %) : un % se calcule sur la largeur de la scène entière, pas sur celle du bouton, et écraserait les machines les plus étroites à quasi 0px de large. */ padding: 10px; margin: -10px; transform-origin: center bottom; transition: transform var(--smad-transition), filter var(--smad-transition); filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); } .smad-machine__img { width: 100%; height: auto; pointer-events: none; } .smad-machine:hover, .smad-machine:focus-visible, .smad-machine.is-highlighted { transform: scale(1.22); filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)) brightness(1.08); z-index: 999 !important; } .smad-machine:focus-visible { outline: none; } /* Indice discret en bas de scène */ .smad-hint { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; font-size: 13px; color: var(--smad-text-muted); background: var(--smad-bg-alt); border-top: 1px solid var(--smad-border); } .smad-hint__icon { color: var(--smad-accent); font-weight: 700; } /* ---------------------------------------------------------------------- */ /* Fiche machine — bulle de BD ancrée près de la machine cliquée */ /* ---------------------------------------------------------------------- */ .smad-modal { position: fixed; inset: 0; z-index: 10000; } .smad-modal[hidden] { display: none; } .smad-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 11, 13, .55); } .smad-modal__panel { position: fixed; background: var(--smad-surface); border: 3px solid var(--smad-text); border-radius: 26px; max-width: 360px; width: calc(100vw - 32px); box-shadow: var(--smad-shadow); animation: smad-pop 200ms cubic-bezier(.2,.8,.2,1); --tail-left: 50%; } /* Pointe de la bulle : deux triangles superposés (bordure + fond) pour garder le même contour épais que le corps de la bulle. */ .smad-modal__panel[data-tail="down"]::after, .smad-modal__panel[data-tail="down"]::before, .smad-modal__panel[data-tail="up"]::after, .smad-modal__panel[data-tail="up"]::before { content: ""; position: absolute; left: var(--tail-left); transform: translateX(-50%); } .smad-modal__panel[data-tail="down"]::after { bottom: -20px; border-width: 20px 15px 0 15px; border-style: solid; border-color: var(--smad-text) transparent transparent transparent; } .smad-modal__panel[data-tail="down"]::before { bottom: -14px; border-width: 15px 11px 0 11px; border-style: solid; border-color: var(--smad-surface) transparent transparent transparent; z-index: 1; } .smad-modal__panel[data-tail="up"]::after { top: -20px; border-width: 0 15px 20px 15px; border-style: solid; border-color: transparent transparent var(--smad-text) transparent; } .smad-modal__panel[data-tail="up"]::before { top: -14px; border-width: 0 11px 15px 11px; border-style: solid; border-color: transparent transparent var(--smad-surface) transparent; z-index: 1; } @keyframes smad-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } } .smad-modal__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--smad-text); background: var(--smad-surface); color: var(--smad-text); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background var(--smad-transition), transform var(--smad-transition); } .smad-modal__close:hover { background: var(--smad-accent); border-color: var(--smad-accent); color: var(--smad-accent-contrast); transform: rotate(90deg); } .smad-modal__head { display: flex; align-items: center; gap: 14px; padding: 20px 44px 0 20px; } .smad-modal__thumb { width: 64px; height: 64px; object-fit: contain; background: var(--smad-accent-soft); border: 2px solid var(--smad-text); border-radius: 14px; padding: 4px; flex-shrink: 0; } .smad-modal__body { padding: 14px 20px 22px; display: flex; flex-direction: column; gap: 12px; } .smad-modal__zone { text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; color: var(--smad-accent-strong); } .smad-modal__title { font-size: 18px; } .smad-modal__block h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--smad-text-muted); margin-bottom: 4px; } .smad-modal__block p { line-height: 1.5; font-size: 14px; } /* ---------------------------------------------------------------------- */ /* Responsive */ /* ---------------------------------------------------------------------- */ @media (max-width: 780px) { .smad-nav { padding: 20px; } .smad-nav__inner { flex-direction: column; align-items: stretch; } .smad-nav__tabs { width: 100%; } .smad-nav__tab { flex: 1; min-width: 0; align-items: center; text-align: center; } /* Cibles tactiles suffisamment grandes malgré la taille visuelle de la machine */ .smad-machine { padding: 10px; margin: -10px; } /* Sur un écran étroit, comprimer la scène panoramique (ratio ~2:1) dans la largeur de l'écran l'écraserait à une bande minuscule et laisserait tout le reste de la page vide. On l'affiche donc à une taille confortable et on la rend défilable horizontalement plutôt que de la rétrécir. */ .smad-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .smad-scene.is-active { width: 900px; max-width: none; scroll-snap-align: start; } /* Indice visuel discret : un dégradé sur le bord droit suggère qu'il y a plus de contenu à découvrir en glissant. */ .smad-stage::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.18)); pointer-events: none; } .smad-hint__desktop { display: none; } .smad-hint__mobile { display: inline; } } @media (max-width: 480px) { .smad-modal__body { padding: 20px; } }