/* ===== Démo V6 — hero nuit + zones d'intervention (copie non destructive) ===== Ne s'applique qu'à index-v6.html. Aucun fichier d'origine n'est modifié. Réécrit intégralement le 08/09 : des suppressions successives par expression régulière avaient mangé deux accolades fermantes, et tout ce qui suivait était avalé silencieusement. Un CSS déséquilibré ne lève aucune erreur — il rend juste la moitié du fichier inerte. */ /* ------------------------------------------------------------------ 1. Toile 3D — apparition hero3d.js se charge avec son éclairage d'origine (orange vif) et v6.js ne rebranche la nuit qu'une fois XRKUKA prêt : sans ça on voit un flash orange puis le noir. On garde donc la toile invisible jusqu'à ce que la nuit soit posée. Garde-fou : v6.js allume `xr-night` sur minuterie même si la 3D échoue, sinon on masquerait aussi l'image de repli de hero3d.js. ------------------------------------------------------------------ */ #stage3d { opacity: 0; transition: opacity .8s var(--ease); } .xr-night #stage3d { opacity: 1; } /* ------------------------------------------------------------------ 2. Entrée du hero Le site a 24 [data-reveal] et AUCUN dans le hero : l'écran que tout le monde voit en premier était le seul figé. Même grammaire que le reste du site (fondu + montée), en cascade. Garde-fou : l'état caché est sous `.js` — sans JavaScript le texte s'affiche. ------------------------------------------------------------------ */ .js .hero--v6 .hero__copy > * { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--sd, 0ms); } .js .hero--v6.is-lit .hero__copy > * { opacity: 1; transform: none; } .hero--v6 .hero__copy > :nth-child(1) { --sd: 80ms; } .hero--v6 .hero__copy > :nth-child(2) { --sd: 200ms; } .hero--v6 .hero__copy > :nth-child(3) { --sd: 380ms; } .hero--v6 .hero__copy > :nth-child(4) { --sd: 520ms; } .hero--v6 .hero__copy > :nth-child(5) { --sd: 640ms; } /* Le bouton principal répond à la souris : il se soulève, la flèche part. */ .hero--v6 .btn--primary:hover { transform: translateY(-2px); } .hero--v6 .btn--primary:hover .ico { transform: translateX(4px); } /* ------------------------------------------------------------------ 3. Trois effets repris du catalogue React Bits / Magic UI, refaits en CSS pur : on garde l'idée, pas la dépendance React/Tailwind/Framer Motion. ------------------------------------------------------------------ */ /* « Animated Shiny Text » — un reflet balaye la pastille. Un ::after en surimpression, pas de background-clip : la pastille garde bordure et fond. */ .hero--v6 .pill { position: relative; overflow: hidden; } .hero--v6 .pill::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 232, 190, .38) 48%, transparent 61%); transform: translateX(-120%); animation: xr-shine 4.5s var(--ease) 1.6s infinite; } @keyframes xr-shine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } } /* « Magic Card » / « Glare Hover » — une lueur suit le curseur sur les cartes. v6.js pose --mx/--my ; sans JS, rien ne s'affiche. */ .cards .card { position: relative; isolation: isolate; } .cards .card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease); background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 176, 32, .20), transparent 70%); } .cards .card:hover::before, .cards .card:focus-within::before { opacity: 1; } /* La bordure réagit aussi, sinon la lueur seule flotte. */ .cards .card:hover, .cards .card:focus-within { border-color: rgba(255, 176, 32, .28); } /* « Marquee » — les marques défilent au lieu d'être une liste figée. v6.js met les
  • deux fois dans UNE piste ; -50 % fait défiler exactement un jeu, la boucle est invisible. */ .hero--v6 .hero__brands.is-marquee { display: block; overflow: hidden; white-space: nowrap; --mask: linear-gradient(90deg, transparent, #000 8%, #000 82%, transparent); -webkit-mask-image: var(--mask); mask-image: var(--mask); } .hero--v6 .hero__brands.is-marquee .xr-track { display: inline-flex; /* width: max-content + flex: none sur les enfants — sans quoi WebKit contraint la piste à la largeur visible et comprime chaque élément. Un mot résiste (sa largeur minimale est celle du mot) ; une image se laisse écraser à zéro. Les logos étaient donc invisibles sur iPhone, sans erreur, alors que Chrome, qui dimensionne la piste sur son contenu, les affichait. */ width: max-content; /* Les cinq logos n'ont pas la même hauteur : sans ça ils s'alignent par le haut et flottent chacun à sa propre ligne. */ align-items: center; animation: xr-marquee 26s linear infinite; } .hero--v6 .hero__brands.is-marquee .xr-track > li { flex: 0 0 auto; } .hero--v6 .hero__brands.is-marquee li { display: inline-block; padding-right: 44px; opacity: 1; transform: none; transition: color .3s; } /* Logos constructeurs : calés sur une hauteur commune, pas sur une largeur — les cinq n'ont ni le même format ni la même graisse. Hauteur optique réduite pour MITSUBISHI, dont le losange monte plus haut que les lettres des autres. */ /* Hors du sélecteur .is-marquee : sans ça, en mouvement réduit (pas de piste défilante) les logos revenaient à leur taille d'origine et débordaient. */ /* Largeur ET hauteur données pour chacun : avec `width: auto`, Safari a besoin du rapport intrinsèque du SVG, et deux de ces fichiers n'avaient pas de viewBox — il calculait alors une largeur nulle et les logos disparaissaient. Les valeurs ci-dessous suivent le viewBox réel de chaque fichier. */ /* Hauteurs calées sur la hauteur des LETTRES, pas sur celle du fichier : chaque logo a un vide interne différent (KUKA remplit sa boîte, YASKAWA n'en occupe que 81 %). À boîte égale, les lettres n'auraient pas la même taille. Cible : 17 px de lettre pour tous. MITSUBISHI est un bloc losange + deux lignes, il ne peut pas suivre la règle sans devenir énorme : réglé à l'œil. */ .hero--v6 .hero__brands img { display: block; vertical-align: middle; } .hero--v6 .hero__brands img[alt="ABB"] { height: 18px; width: 45px; } .hero--v6 .hero__brands img[alt="FANUC"] { height: 18px; width: 106px; } .hero--v6 .hero__brands img[alt="KUKA"] { height: 17px; width: 99px; } .hero--v6 .hero__brands img[alt="YASKAWA"] { height: 21px; width: 116px; } .hero--v6 .hero__brands img[alt^="MITSUBISHI"] { height: 30px; width: 98px; } .hero--v6 .hero__brands.is-marquee:hover .xr-track { animation-play-state: paused; } @keyframes xr-marquee { to { transform: translateX(-50%); } } /* ------------------------------------------------------------------ 4. Zones d'intervention Remplace le globe filaire. Quatre points sur une grille sans continents ne désignaient rien : personne ne pouvait lire « Paris » dedans. Ici l'information EST le visuel — trois territoires en grand, ce que la section dit depuis le début. ------------------------------------------------------------------ */ .zones { position: relative; background: var(--bg); padding: clamp(88px, 11vw, 160px) 0; overflow: clip; } /* La toile occupe la moitie droite. Elle debordait de 6 vw, ce qui rognait le 3e robot : ici les trois doivent tenir dans le cadre puisque la camera ne tourne plus. */ .zones__canvas { position: absolute; right: 0.5vw; top: 50%; transform: translateY(-50%); width: min(58vw, 880px); aspect-ratio: 1; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease); } .zones__canvas.is-on { opacity: 1; } /* Contexte WebGL perdu (telephone a court de memoire graphique) : la toile disparait de la mise en page au lieu de laisser un rectangle noir. */ .zones__canvas.is-perdu { display: none; } .zones__in { position: relative; z-index: 1; } .zones__in { display: grid; gap: clamp(40px, 6vw, 72px); } .zones__head h2 { max-width: 14ch; } .zones__list { list-style: none; display: grid; max-width: 46ch; } .zones__list li { display: flex; align-items: baseline; gap: clamp(18px, 3vw, 44px); padding: clamp(18px, 2.4vw, 30px) 0; border-top: 1px solid var(--line); font-stretch: 62%; font-weight: 700; font-size: clamp(2.6rem, 9vw, 7rem); line-height: .95; letter-spacing: -.02em; color: var(--fg); transition: color .4s var(--ease), border-color .4s; } .zones__list li:last-child { border-bottom: 1px solid var(--line); } .zones__list li:hover { color: var(--amber); border-color: rgba(255, 176, 32, .3); } .zones__n { flex: none; font-stretch: 100%; font-weight: 600; font-size: .72rem; letter-spacing: .16em; color: var(--amber); } .zones__lede { color: var(--fg2); max-width: 52ch; } /* ------------------------------------------------------------------ 5. Mouvement réduit ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .hero--v6 .pill::after { animation: none; opacity: 0; } .hero--v6 .hero__brands.is-marquee .xr-track { animation: none; } } /* ------------------------------------------------------------------ 6. Zones sur telephone La toile etait posee en absolu sur la moitie droite : a 390 px elle tombait a 226 px de cote, trois robots et une enseigne coinces derriere les mots geants — illisible, et le logo de l'enseigne disparaissait (remontee du 10/09). Elle repasse dans le flux, en bandeau, avant le titre. Le carre est conserve : la camera du parc est calee sur un rapport 1 (`camera.aspect = 1` dans v6.js), un bandeau large etirerait les robots. ------------------------------------------------------------------ */ @media (max-width: 899px) { .zones__canvas { position: static; transform: none; /* `display: block` obligatoire : une est un remplacé EN LIGNE, et l'espace blanc du HTML qui la suit ajoutait 4 px a la ligne — la page defilait lateralement de 4 px sur iPhone. */ display: block; width: min(100%, 520px); /* Marges negatives : le carre de la scene est vide sur son tiers haut (le plafond de l'atelier) et sur son quart bas (le sol). Sans ca, la section s'ouvrait sur 200 px de noir avant l'enseigne. On ne rogne rien de visible, on reprend le vide. */ margin: clamp(-80px, -18vw, -48px) auto clamp(-52px, -11vw, -28px); /* Le bas se fond dans la section au lieu de s'arreter au couteau. */ --mask-b: linear-gradient(180deg, #000 76%, transparent); -webkit-mask-image: var(--mask-b); mask-image: var(--mask-b); } }