/* ============================================================================= PILOM — Site vitrine (thème SOMBRE, charte EXACTE de l'app v2.pilom.net) Bleu nuit + accent BLEU #0ea5e9 (l'encre du logo). Manrope auto-hébergée (RGPD). Ne restent ici que les jetons du site, la remise à plat de la page et les pièces COMMUNES à plusieurs pages (ruban de logos, retour en haut, voyage de la marge, scènes orbitale et radio, « Contactez-nous », FAQ, « À lire ensuite ») : chaque page porte ses propres styles, préfixés. ============================================================================= */ @font-face { font-family:'Manrope'; font-weight:400; font-display:swap; src:url('/vitrine/fonts/manrope-400.woff2') format('woff2'); } @font-face { font-family:'Manrope'; font-weight:500; font-display:swap; src:url('/vitrine/fonts/manrope-500.woff2') format('woff2'); } @font-face { font-family:'Manrope'; font-weight:600; font-display:swap; src:url('/vitrine/fonts/manrope-600.woff2') format('woff2'); } @font-face { font-family:'Manrope'; font-weight:700; font-display:swap; src:url('/vitrine/fonts/manrope-700.woff2') format('woff2'); } @font-face { font-family:'Manrope'; font-weight:800; font-display:swap; src:url('/vitrine/fonts/manrope-800.woff2') format('woff2'); } :root { /* Accent BLEU SKY — charte exacte du SaaS (#0EA5E9 = l'encre du logo). */ --b-200:#bae6fd; --b-300:#7dd3fc; --b-400:#38bdf8; --b-500:#0ea5e9; --b-600:#0284c7; --grad:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 45%,#0284c7 100%); --grad-soft:linear-gradient(135deg,rgba(14,165,233,.18),rgba(56,189,248,.08)); /* Palette du SaaS (couleur des modules / des états) — donnée, pas style : inchangée. */ --c-danger:#FF5C5C; --c-emerald:#10b981; /* Fonds : les jetons de tokens.css, à l'identique. */ --bg:#0B1220; --bg-soft:#0F1829; --bg-soft2:#16213A; --navy:#0A1120; /* barre latérale de l'app */ --card:#111A2B; --card-2:#16213A; --line:#1E2A44; --line-2:#2A3A5C; --ink:#F1F5F9; --text:#CBD5E1; --muted:#94A3B8; --faint:#64748B; --pos:#1FC187; --pos-bg:rgba(31,193,135,.14); --pos-line:rgba(31,193,135,.3); --amber:#F59E0B; --amber-bg:rgba(245,158,11,.14); /* ⭐⭐ LES TROIS ROLES DE L EQUIPAGE, AUX COULEURS EXACTES DU SAAS (rolePresets.js) : l OR des galons pour le Capitaine, le BLEU de l action pour le Pilote, l AMBRE des chiffres pour l Ingenieur. ⛔ Recopier une teinte approchante ferait une deuxieme verite : quelqu un qui passe de la page au logiciel doit retrouver la MEME couleur sur le meme mot. */ --role-capitaine:#CA8A04; --role-pilote:#0EA5E9; --role-ingenieur:#F59E0B; --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:32px; --r-full:999px; --shadow-lg:0 50px 100px -30px rgba(0,0,0,.75), 0 20px 40px -24px rgba(0,0,0,.6); --shadow-brand:0 20px 50px -16px rgba(14,165,233,.55); --container:1180px; --nav-h:72px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; background:var(--bg); } body { margin:0; font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--text); background:var(--bg); line-height:1.62; font-size:17px; font-weight:450; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } img { max-width:100%; display:block; } a { color:inherit; text-decoration:none; } button { font-family:inherit; cursor:pointer; } h1,h2,h3,h4 { margin:0; font-weight:800; letter-spacing:-.022em; line-height:1.08; color:var(--ink); text-wrap:balance; } p { margin:0; } ::selection { background:var(--b-500); color:#fff; } :focus-visible { outline:3px solid var(--b-400); outline-offset:2px; border-radius:6px; } /* Thème AMBRE réutilisable (scope .sm) : remappe l'accent bleu → ambre pour toute la sous-arborescence. */ .sm { --b-200:#fde68a; --b-300:#fcd34d; --b-400:#fbbf24; --b-500:#f59e0b; --b-600:#d97706; --grad:linear-gradient(135deg,#fbbf24 0%,#f59e0b 45%,#d97706 100%); --grad-soft:linear-gradient(135deg,rgba(245,158,11,.20),rgba(251,191,36,.08)); --shadow-brand:0 20px 50px -16px rgba(245,158,11,.55); } /* Ruban des logos clients (`vitrine.partials.logos`) — défilement continu, fondu sur les bords, arrêt au survol. */ .marquee { margin-top:22px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } /* ⛔⛔ LA MARGE EST SUR CHAQUE LOGO, PAS UN `gap` SUR LA PISTE (Kevin, 25/09/2026 : « la boucle des logos saute toute seule, c'est buggé »). C'est LE bug classique du ruban infini, et il est arithmétique : l'animation ramène la piste de 0 à −50 % de sa largeur, or avec un `gap` la piste de 44 logos mesure 44 logos + 43 espaces. Sa moitié vaut donc 22 logos + 21,5 espaces, alors que la première copie en occupe 22. Il manque un demi-espace à chaque tour — d'où le saut, toutes les cinquante secondes, toujours au même endroit. ⭐⭐ AVEC UNE MARGE PORTÉE PAR CHAQUE ÉLÉMENT, la piste vaut 44 fois (logo + marge) : les deux moitiés sont rigoureusement identiques, et −50 % tombe exactement sur la seconde copie. La boucle devient invisible. */ .marquee__track { display:flex; align-items:center; width:max-content; will-change:transform; animation:marquee 46s linear infinite; } .marquee:hover .marquee__track { animation-play-state:paused; } @keyframes marquee { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } } /* ⛔⛔ PLUS DE `brightness(0) invert(1)` (Kevin, 25/09/2026 : « bug logo interface », capture de rectangles gris pleins). Cette paire écrase TOUT en noir puis inverse en blanc : un logo sur fond transparent devient une belle silhouette blanche, mais un logo livré sur fond opaque — et la moitié le sont — devient un RECTANGLE blanc plein. On ne voyait plus une seule marque. ⭐ `grayscale` seul respecte la transparence et l'opacité fait le reste : les logos se lisent, sans voler le regard au bouton d'essai. Au survol, celui qu'on vise retrouve ses couleurs. */ /* ⭐⭐ CHAQUE LOGO EST POSÉ SUR UNE PLAQUE MÉTALLIQUE (Kevin, 25/09/2026 : « fais une plaque métallique en fond uniquement pour les logos, car il faut bien les voir »). ⛔⛔ LA VRAIE CAUSE DU PROBLÈME : ces logos ont été dessinés pour du PAPIER BLANC. Sur un fond de nuit, ceux qui sont noirs ou gris foncé disparaissent — aucun filtre ne rattrape ça, et les deux tentatives précédentes l'ont prouvé (l'inversion en blanc faisait des rectangles pleins, le gris les laissait illisibles). Ce n'est pas un réglage d'affichage, c'est un problème de support : il leur faut le fond clair pour lequel ils ont été faits. ⭐ LA PLAQUE EST CELLE DE LA MAISON — tôle brossée, liseré clair en haut, ombre portée : le même objet que les plaques du logiciel. Le ruban cesse d'être une bande de taches grises et devient une rangée de plaques vissées sur la coque. ⚠️ PLUS DE `grayscale` NI D'OPACITÉ : sur la plaque, les logos sont lisibles et c'est ce qu'on veut — « il faut bien les voir ». C'est la plaque, sobre et répétée, qui empêche le ruban de voler le regard au bouton d'essai, pas l'effacement des marques. */ /* ⛔⛔ LARGEUR FIXE, ET C'EST CE QUI REND LA BOUCLE PARFAITE (Kevin, 25/09/2026 : « faire un défilement fluide avec une boucle parfaite »). DEUX CAUSES DE SAUT, ET LA SECONDE EST LA PLUS SOURNOISE : 1. Un `gap` sur la piste — corrigé plus haut : 44 logos + 43 espaces, dont la moitié ne vaut pas la première copie. C'était de l'arithmétique. 2. `width:auto` + `loading="lazy"` : tant qu'une image n'est pas chargée, elle n'a PAS sa largeur finale. Les copies de droite se chargent quand elles entrent à l'écran — c'est-à-dire EN PLEIN DÉFILEMENT — et la piste change alors de longueur sous l'animation. Le décalage se voit comme un accroc, à un moment qui dépend de la connexion : impossible à reproduire deux fois pareil. ⭐⭐ UNE PLAQUE DE TAILLE FIXE règle les deux d'un coup : la piste a sa longueur définitive dès le premier rendu, avant même qu'un seul logo soit arrivé, et `object-fit:contain` centre chaque marque dans sa plaque quelle que soit sa forme. ⚠️ Ne pas remettre `width:auto` : un ruban qui dépend du chargement des images ne peut pas boucler proprement. */ .marquee img { width:146px; height:66px; object-fit:contain; flex-shrink:0; margin-right:clamp(14px,1.9vw,26px); padding:10px 16px; border-radius:11px; background:#FFFFFF; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.12), 0 6px 16px -8px rgba(0,0,0,.85); transition:transform .3s, box-shadow .3s; } .marquee img:hover { transform:translateY(-2px) scale(1.04); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px -8px rgba(0,0,0,.95); } @media (prefers-reduced-motion:reduce){ .marquee__track { animation:none; flex-wrap:wrap; justify-content:center; } } /* Bouton « haut de page » (apparaît après 1000px de défilement) */ /* ⭐⭐ LE RETOUR EN HAUT, REDESSINÉ AUX CODES DU SITE (Kevin, 25/09/2026 : « revoir le design pour que ça s'intègre parfaitement »). C'était un carré de bleu plein avec une ombre fluo — le seul aplat de couleur franche de tout le site, posé sur un ciel de nuit : il se lisait comme un bouton d'une autre application. ⚠️ Il reprend donc les trois signes de la charte du site : la PASTILLE ronde (comme les ancres et le plan du pied), la TÔLE (arête claire en haut, sombre en bas, liseré `--line-2`) et la VITRE floutée qui laisse deviner le ciel derrière. Seule la flèche est bleue. ⚠️ 46 px : au doigt, une cible plus petite se rate. */ .to-top { position:fixed; right:22px; bottom:22px; z-index:65; width:46px; height:46px; border-radius:var(--r-full); border:1px solid var(--line-2); background:linear-gradient(155deg,var(--bg-soft2),var(--bg-soft)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--b-300); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 34px -18px rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease), border-color .2s, color .2s; } .to-top.show { opacity:1; transform:none; pointer-events:auto; } /* ⚠️ LE LISERÉ S'ÉPAISSIT PAR UN ANNEAU INTERNE (Kevin, 25/09/2026 : « plus grosse bordure au survol »), jamais en changeant `border-width` : un pixel de bordure en plus rétrécirait la boîte d'autant, et le bouton sauterait sous le curseur au moment précis où l'on vise. */ .to-top:hover { transform:translateY(-2px); border-color:var(--b-400); color:var(--ink); box-shadow:inset 0 0 0 2px var(--b-400), inset 0 1px 0 rgba(255,255,255,.12), 0 20px 40px -18px rgba(0,0,0,.95); } .to-top svg { width:20px; height:20px; } /* Responsive */ @media (max-width:560px){ body { font-size:16px; } } @media (prefers-reduced-motion:reduce){ *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* ⭐⭐ LE VOYAGE DANS LA MARGE DE DROITE — le vaisseau monte avec le défilement. ⚠️ Le nez du dessin pointe à droite : −90° pour qu'il monte, flamme vers le bas. ⚠️ La transition ADOUCIT le déplacement sans jamais l'initier : rien ne bouge si l'on ne défile pas. Elle est coupée quand on demande moins d'animations. */ .vt__vaisseau { transform: translateX(-50%) rotate(-90deg); transition: top .18s linear; } @media (prefers-reduced-motion:reduce) { .vt__vaisseau { transition:none; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ ⭐⭐ LA TRAJECTOIRE DU VOYAGE (25/09/2026) — pointillés devant, trait plein derrière. ⚠️ `--fait` (0 → 1) est posé par le script sur `.vt__voyage` ; tout le reste est du CSS, donc rien n'est tenu en double. ⚠️ La trace couvre EXACTEMENT la course du vaisseau : de 15 % (arrivée, sous la lune) à 78 % (départ). Un trait plus long donnerait une jauge qui ne se remplit jamais tout à fait. ═══════════════════════════════════════════════════════════════════════════════════════════ */ .vt__voyage { --fait: 0; } .vt__trace { position:absolute; left:50%; top:15%; bottom:84px; width:0; border-left:2px dashed rgba(148,163,184,.34); transform:translateX(-1px); } /* La part parcourue : un trait plein qui monte depuis le bas, derrière le vaisseau. */ .vt__trace i { position:absolute; left:-2px; bottom:0; width:2px; display:block; height:calc(var(--fait) * 100%); background:linear-gradient(to top,var(--b-600),var(--b-300)); } /* ⭐ L'ARRIVÉE. Trois ondes qui partent de la lune, puis plus rien : une récompense, pas une animation de fond. Le vaisseau, lui, stationne — un flottement lent, de trois pixels. ⛔ Rien de tout cela ne se joue si l'on a demandé moins d'animations. */ .vt__halo { position:absolute; left:50%; top:96px; width:78px; height:78px; margin-left:-39px; border-radius:var(--r-full); opacity:0; pointer-events:none; } .vt__voyage.is-arrive .vt__halo { animation:vt-onde 1.9s var(--ease) 3; } .vt__voyage.is-arrive .vt__vaisseau { animation:vt-flotte 3.4s ease-in-out infinite; } @keyframes vt-onde { 0% { opacity:.55; box-shadow:0 0 0 0 rgba(56,189,248,.55); } 100% { opacity:0; box-shadow:0 0 0 46px rgba(56,189,248,0); } } @keyframes vt-flotte { 0%,100% { transform:translateX(-50%) rotate(-90deg) translateX(0); } 50% { transform:translateX(-50%) rotate(-90deg) translateX(3px); } } @media (prefers-reduced-motion:reduce) { .vt__voyage.is-arrive .vt__halo, .vt__voyage.is-arrive .vt__vaisseau { animation:none; } } /* ⭐⭐ LA FLÈCHE DE RETOUR EST LA BASE DE LA TRAJECTOIRE (Kevin, 25/09/2026 : « la flèche qui remonte vers le haut doit être placée en bas de la ligne bleue »). Alignée sur l'axe du voyage, elle ferme la figure : le trait part d'elle et monte jusqu'à la lune — une flèche entière. ⚠️ SEULEMENT AU-DESSUS DE 1 280 px : en dessous, le voyage n'existe pas et le bouton reprend sa place habituelle, au coin. Le centre de l'axe est à `2.5vw + 56px` du bord droit ; le bouton fait 46 px, on retire donc 23 px pour le centrer dessus. */ @media (min-width:1280px) { .to-top { right:calc(2.5vw + 33px); bottom:26px; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ ⭐⭐ LA SCÈNE ORBITALE (25/09/2026) — le vaisseau au centre, ce que l'entreprise manipule autour. Voir le composant `SceneOrbite` dans `resources/js/vitrine.jsx` pour le pourquoi. ⚠️ Toutes les rotations sont des animations CSS : le navigateur les met en pause tout seul quand l'onglet part en arrière-plan, et `prefers-reduced-motion` les coupe d'un bloc. ═══════════════════════════════════════════════════════════════════════════════════════════ */ .sc { position:relative; height:440px; display:flex; align-items:center; justify-content:center; margin:clamp(10px,2vw,20px) auto 0; overflow:hidden; } .sc__halo { position:absolute; left:50%; top:50%; width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:var(--r-full); background:radial-gradient(50% 50% at 50% 50%, rgba(14,165,233,.22), transparent 70%); filter:blur(26px); animation:sc-respire 6.5s ease-in-out infinite; } @keyframes sc-respire { 0%,100% { transform:scale(1); opacity:.85; } 50% { transform:scale(1.08); opacity:1; } } .sc__orbite { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } /* ⚠️ L'anneau est dessiné par une BORDURE, pas par un fond : un disque masquerait le ciel. */ .sc__trace { position:absolute; inset:0; border-radius:var(--r-full); border:1px solid rgba(148,163,184,.16); } .sc__tourne { position:absolute; inset:0; animation:sc-tour linear infinite; } @keyframes sc-tour { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } .sc__pt { position:absolute; left:50%; top:50%; width:0; height:0; } /* La pastille contre-tourne pour rester droite, et porte la tôle du site. */ .sc__jeton { position:absolute; left:-19px; top:-19px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-full); border:1px solid var(--line-2); background:linear-gradient(155deg,var(--bg-soft2),var(--bg-soft)); color:var(--b-300); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 22px -14px rgba(0,0,0,.9); animation:sc-tour linear infinite; } .sc__coeur { position:relative; z-index:2; width:96px; height:58px; animation:sc-levite 5s ease-in-out infinite; } @keyframes sc-levite { 0%,100% { transform:translateY(0) rotate(-90deg); } 50% { transform:translateY(-10px) rotate(-90deg); } } @media (max-width:760px) { .sc { height:330px; } /* ⛔ Le troisième anneau sort du cadre sur un téléphone : il est masqué plutôt que rogné. */ .sc__orbite:nth-child(4) { display:none; } } @media (prefers-reduced-motion:reduce) { .sc__halo, .sc__tourne, .sc__jeton, .sc__coeur { animation:none; } } /* ⭐⭐ LE COSMONAUTE « CONTACTEZ-NOUS » (Kevin, 25/09/2026) — le pendant du retour en haut, à l'autre coin. Même tôle, même pastille, même poids visuel. ⛔ Masqué sous 900 px : au téléphone, deux pastilles flottantes mordent sur la lecture, et le pied porte déjà le téléphone et l'adresse. */ .vt__contact { position:fixed; left:22px; bottom:22px; z-index:65; display:none; align-items:center; border-radius:var(--r-full); border:1px solid var(--line-2); background:linear-gradient(155deg,var(--bg-soft2),var(--bg-soft)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 34px -18px rgba(0,0,0,.9); color:var(--ink); text-decoration:none; transition:border-color .2s, transform .2s; } @media (min-width:900px) { .vt__contact { display:inline-flex; } } .vt__contact:hover { transform:translateY(-2px); border-color:var(--b-400); box-shadow:inset 0 0 0 2px var(--b-400), inset 0 1px 0 rgba(255,255,255,.12), 0 20px 40px -18px rgba(0,0,0,.95); } /* ⚠️ Le cosmonaute déborde de sa boîte (les ondes de l'antenne, au-dessus de la tête) : on lui laisse la place plutôt que de le rogner. */ .vt__contact svg { overflow:visible; } /* ⛔⛔ LE VAISSEAU PART D'EN BAS, MÊME AVANT LE SCRIPT (bug Kevin, 25/09/2026 : « je vois le vaisseau apparaître sur les notes 0,5 seconde »). Sa position verticale est posée par le script au premier calcul ; entre le rendu du décor et ce calcul, il n'avait AUCUN `top` — il se collait donc en haut du calque, pile sur la note Google, le temps d'une demi-seconde à chaque page. ⚠️ La valeur doit rester celle du départ dans `vitrine.jsx` (84 %) : deux endroits, une seule vérité — si l'un bouge, l'autre bouge. */ .vt__vaisseau { top:84%; } /* Les ondes du robot, au centre de la scène de « Contact ». */ .sc__coeur--robot { width:120px; height:120px; } .sc__onde { position:absolute; left:50%; top:4px; width:64px; height:64px; margin-left:-32px; border-radius:var(--r-full); border:1px solid var(--b-400); opacity:0; animation:sc-onde 2.7s var(--ease) infinite; } @keyframes sc-onde { 0% { opacity:.6; transform:scale(.6); } 100% { opacity:0; transform:scale(2.2); } } /* ⭐ Le cosmonaute « Contactez-nous », version soignée : halo, personnage entier, deux lignes et une flèche qui dit que ça mène quelque part. */ .vt__contact { overflow:visible; } .vt__contact-halo { position:absolute; border-radius:var(--r-full); background:radial-gradient(50% 50% at 50% 50%, rgba(14,165,233,.35), transparent 70%); filter:blur(12px); pointer-events:none; } .vt__contact-perso { position:relative; display:flex; justify-content:center; } .vt__contact-txt { position:relative; display:flex; flex-direction:column; line-height:1.15; } .vt__contact-sur { font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--b-300); } .vt__contact-t { margin-top:3px; font-size:.98rem; font-weight:800; letter-spacing:-.01em; white-space:nowrap; color:var(--ink); } .vt__contact-fl { position:relative; width:17px; height:17px; color:var(--b-300); flex:0 0 17px; transition:transform .2s; } .vt__contact:hover .vt__contact-fl { transform:translateX(3px); } @media (prefers-reduced-motion:reduce) { .sc__onde { animation:none; } } /* ⛔ LE ROBOT NE SE COUCHE PAS (bug Kevin, 25/09/2026 : « le robot est à l'envers »). L'animation du cœur portait `rotate(-90deg)` — le vaisseau en a besoin, son nez pointant à droite dans le dessin ; le robot, lui, est déjà debout. Une animation par pièce, et non une rotation héritée. */ .sc__coeur--robot { animation:sc-levite-droit 5s ease-in-out infinite; } @keyframes sc-levite-droit { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } } /* ⭐ LA SCÈNE DE « CONTACT » EST EN AMBRE (Kevin, 25/09/2026) : la même composition, une autre teinte — on comprend d'un coup d'œil qu'on n'est plus sur la même page. */ .sc--ambre .sc__halo { background:radial-gradient(50% 50% at 50% 50%, rgba(245,158,11,.20), transparent 70%); } .sc--ambre .sc__jeton { color:var(--amber); } .sc--ambre .sc__onde { border-color:var(--amber); } .sc--ambre .sc__trace { border-color:rgba(245,158,11,.20); } /* ⛔⛔ LE COSMONAUTE TIENT ENTIER DANS LE BOUTON (bug Kevin, 25/09/2026 : « on voit la coupure sur le cosmonaute en bas »). Sa boîte était carrée et il y était collé EN BAS : son dessin, plus haut que large (viewBox 52 × 54), débordait donc sous le fond de la pastille et se lisait comme une image coupée. ⚠️ On contraint par la HAUTEUR et on laisse la largeur suivre — l'inverse de ce qui était écrit. Les anneaux de la liaison, eux, peuvent continuer de déborder : ils sont transparents et c'est ce débordement qui fait l'effet d'émission. */ .vt__contact-perso { align-items:center; } .vt__contact-perso svg { height:100%; width:auto; overflow:visible; } /* ⭐⭐ LE FAISCEAU DE LIAISON — du robot vers les cartes de coordonnées (Kevin, 25/09/2026). ⛔ La scène passe en `overflow:visible` pour lui : la lumière doit SORTIR du cadre et éclairer un bloc qui vit en dessous. Les anneaux (408 px) tiennent dans les 440 px de la scène, ils ne débordent donc pas de leur côté. ⚠️ Il est posé SOUS les pastilles (z-index 0) : un cône de lumière par-dessus les icônes les aurait délavées. */ .sc--ambre { overflow:visible; } .sc__rai { position:absolute; left:50%; top:52%; width:min(560px,86%); height:340px; z-index:0; transform:translateX(-50%); pointer-events:none; clip-path:polygon(47% 0, 53% 0, 100% 100%, 0 100%); background:linear-gradient(to bottom, rgba(245,158,11,.30), rgba(245,158,11,.10) 46%, rgba(245,158,11,0)); animation:sc-rai 5.5s ease-in-out infinite; } @keyframes sc-rai { 0%,100% { opacity:.85; } 50% { opacity:1; } } @media (prefers-reduced-motion:reduce) { .sc__rai { animation:none; } } /* ⭐ LE COSMONAUTE S.ANIME AU SURVOL (Kevin, 25/09/2026 : « je veux comme le tchat du SaaS », « au survol »). Au repos il se tient tranquille ; quand la souris arrive, il sursaute et ses ondes radio repartent — le geste des réactions du tchat. ⛔ RIEN NE BOUGE TANT QU.ON NE SURVOLE PAS : une pastille qui s.agite en permanence dans un coin de l.écran tire l.œil hors de la lecture, et c.est le défaut qu.on a déjà corrigé sur le vaisseau de la marge. ⚠️ Le mouvement porte sur le PERSONNAGE, jamais sur le bouton : une cible qui monte et descend sous le curseur devient difficile à viser. */ .vt__contact-perso { padding-top:6px; } .vt__contact .cosmo-sos { animation-play-state:paused; } .vt__contact:hover .cosmo-sos { animation-play-state:running; } .vt__contact:hover .vt__contact-perso { animation:vt-flotte-cosmo .9s ease-in-out 2; } @keyframes vt-flotte-cosmo { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } } @media (prefers-reduced-motion:reduce) { .vt__contact-perso { animation:none; } } /** * ⭐⭐ LE COSMONAUTE S'INTÈGRE AU BOUTON (Kevin, 25/09/2026 : « descends le cosmonaute, je ne veux * pas qu'on voie son torse coupé » puis « il doit être intégré »). * * ⛔⛔ LA COUPURE EST DANS LE DESSIN, PAS DANS LE CADRAGE : la brique {@see Cosmonaute} finit son * buste par un dôme « coupé net en bas », volontairement — posé sur un ciel, le personnage SORT * du cadre et c'est ce qui lui donne sa présence. Posé sur une plaque de trois centimètres, le * même trait devient un torse tranché à l'équerre. ⛔ On ne redessine pas la brique pour ça : * elle sert à six endroits du site et de l'application. * * ⭐ DEUX GESTES, AUCUN SUR LE DESSIN : il descend de dix pixels (sa coupe passe sous la ligne du * texte), et un dégradé de masque efface ses derniers pixels. Le buste ne finit plus : il se perd * dans la plaque. C'est ce que « intégré » veut dire. * * ⚠️ `mask-image` SUR LE SVG SEUL, et surtout pas `overflow:hidden` sur son conteneur : les ondes * de l'antenne vivent dans ce conteneur et sortent de ses bords — un rognage les aurait décapitées. * ⚠️ Là où `mask-image` manque, le masque est simplement ignoré : le cosmonaute reste descendu, * donc déjà mieux cadré qu'avant. Jamais de trou. */ .vt__contact-perso svg { -webkit-mask-image:linear-gradient(to bottom, #000 56%, rgba(0,0,0,.5) 80%, transparent 99%); mask-image:linear-gradient(to bottom, #000 56%, rgba(0,0,0,.5) 80%, transparent 99%); } /* ⚠️ BOUTON DE CONTACT RESSERRÉ (Kevin, 25/09/2026 : « réduis la hauteur »). Il était devenu la pièce la plus haute du coin bas-gauche, au-dessus de la flèche de retour en haut — un bouton d'appoint qui prenait la place d'un bloc principal. ⛔ La largeur, elle, ne bouge pas : c'est le texte qui la fixe, et le rogner ferait passer « Contactez-nous » sur deux lignes. */ .vt__contact { padding:7px 16px 7px 8px; gap:10px; } .vt__contact-perso { height:56px; width:56px; flex:0 0 56px; } .vt__contact-perso svg { margin-bottom:-7px; } .vt__contact-halo { width:74px; height:74px; left:10px; bottom:4px; } /** * ⭐⭐ LA FAQ DU SITE — un seul aspect pour toutes les pages (reco 6, 25/09/2026). * * ⛔ L'ACCUEIL AVAIT LE SIEN (`.xpl__faq`), ET LUI SEUL : les autres pages n'avaient pas de FAQ du * tout. Plutôt que d'en recopier le style cinq fois, il est sorti ici — même dessin, une seule * déclaration, et {@see vitrine.partials.faq} y ajoute le balisage `FAQPage` que l'accueil * n'avait jamais eu. * ⚠️ `list-style:none` ET `::-webkit-details-marker` : il faut les DEUX pour effacer le triangle * natif de `` — l'un vaut pour les navigateurs modernes, l'autre pour Safari. */ .fq { margin-top:34px; } .fq h2 { margin-bottom:16px; } .fq__liste { display:flex; flex-direction:column; gap:9px; } .fq__item { background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); transition:border-color .18s ease, background .18s ease; } .fq__item[open] { border-color:var(--b-500); } .fq__q { cursor:pointer; list-style:none; padding:13px 17px; font-weight:700; color:var(--ink); font-size:.96rem; display:flex; justify-content:space-between; gap:14px; align-items:center; transition:color .18s ease; } .fq__q::-webkit-details-marker { display:none; } .fq__q::after { content:'+'; color:var(--b-300); font-weight:800; font-size:1.05rem; line-height:1; transition:transform .18s ease, color .18s ease; } /* ⭐⭐ L'ÉTAT DE SURVOL (Kevin, 25/09/2026 : « faire un état hover »). Cinquante questions fermées, toutes identiques, sans aucune réaction au passage de la souris : rien ne disait qu'elles étaient cliquables, et une liste de cinquante blocs muets se lit comme un tableau, pas comme un sommaire. ⚠️ Le survol vit sur l'ITEM, pas sur le résumé : le cadre entier doit s'éclairer, sinon seule la ligne de texte réagit et la carte reste inerte autour d'elle. ⚠️ Le « + » grandit un peu : c'est le seul signe qui dit ce qui va se passer au clic. */ .fq__item:hover { border-color:var(--b-400); background:color-mix(in srgb, var(--b-500) 9%, var(--card)); } .fq__item:hover .fq__q { color:#fff; } .fq__item:hover .fq__q::after { color:var(--b-200); transform:scale(1.25); } /* ⚠️ Le focus clavier reprend le même dessin : sans lui, la navigation au clavier traverse cinquante questions sans qu'aucune ne se signale. */ .fq__q:focus-visible { outline:2px solid var(--b-400); outline-offset:2px; border-radius:var(--r-sm); } .fq__item[open] .fq__q::after { content:'–'; } .fq__r { padding:0 17px 15px; font-size:.92rem; line-height:1.6; color:var(--muted); } .fq__r p { margin:0 0 9px; } .fq__r p:last-child { margin-bottom:0; } .fq__r a { color:var(--b-300); } /** * ⭐⭐ « À LIRE ENSUITE » — le maillage interne (reco 1, 25/09/2026). * * ⛔⛔ MESURÉ AVANT : HUIT liens internes par page, et les MÊMES partout — les sept onglets plus le * logo. Autrement dit, aucun lien éditorial : les neuf pages métier n'étaient atteignables que * depuis « Pour qui », et un moteur juge l'importance d'une page au nombre de liens qui y * mènent. Les pages qui vendent le mieux en avaient UN. * ⚠️ Trois liens, pas dix : une liste de liens en bas de page qu'on ne peut pas embrasser du * regard ne se lit pas, et dilue ce qu'elle veut pousser. */ /* ⛔⛔ LE BLOC PORTE SON PROPRE GABARIT (Kevin, 25/09/2026 : « padding », capture d'un « À lire ensuite » collé au bord gauche). Il est appelé en FIN de `@section`, donc HORS du cadre de la page — sans marge à lui, il se colle aux deux bords de l'écran pendant que tout le reste de la page respire. ⚠️ La largeur du site (`--container`) et 24 px de marge : un bloc de pied qui s'aligne à un pixel près sur le texte au-dessus, sinon le trait de séparation trahit le décalage. */ .suite { margin-top:34px; padding-top:22px; border-top:1px solid var(--line); width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; } .suite__t { font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--b-300); margin-bottom:14px; } .suite__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } /* ⭐ « À lire ensuite », plus vivant (Kevin, 10/10/2026 : « effet whaou ») : une flèche qui avance au survol, un liseré bleu-vert en haut, une lueur sous la carte. ⛔ Rien ne bouge au repos : c'est une fin de page, pas une scène. */ .suite__l { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:5px; padding:16px 44px 16px 18px; border-radius:14px; border:1px solid var(--line-2); background:radial-gradient(90% 120% at 0% 0%, rgba(56,189,248,.08), transparent 60%), linear-gradient(155deg,var(--bg-soft2),var(--bg-soft)); text-decoration:none; transition:border-color .25s, transform .25s, box-shadow .25s; } .suite__l::before { content:''; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,#38BDF8,#4ADE9D); transform:scaleX(0); transform-origin:left center; transition:transform .35s ease-out; } .suite__l::after { content:'→'; position:absolute; right:16px; top:50%; margin-top:-.6em; font-size:1.1rem; font-weight:800; line-height:1.2; color:var(--b-300); transition:transform .25s, color .25s; } .suite__l:hover { border-color:rgba(56,189,248,.5); transform:translateY(-3px); box-shadow:0 20px 36px -22px rgba(14,165,233,.8); } .suite__l:hover::before { transform:scaleX(1); } .suite__l:hover::after { transform:translateX(4px); color:#4ADE9D; } @media (prefers-reduced-motion:reduce) { .suite__l, .suite__l::before, .suite__l::after { transition:none; } .suite__l:hover { transform:none; } } .suite__n { font-size:.95rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; } .suite__p { font-size:.85rem; line-height:1.5; color:var(--muted); } @media (max-width:760px) { .suite__grid { grid-template-columns:1fr; } } /* ⭐⭐ LE LOGO AU CŒUR DE LA SCÈNE ORBITALE (Kevin, 25/09/2026, demandé trois fois). Tout gravite autour de PILOM : c'est la phrase du titre, rendue en image. ⚠️ Un halo derrière lui, sinon le symbole sombre se perd sur un fond de nuit. */ .sc__logo { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 22px rgba(56,189,248,.55)) drop-shadow(0 0 48px rgba(14,165,233,.3)); animation:sc-logo 5.4s ease-in-out infinite; } @keyframes sc-logo { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } } /* ⭐ LE PIVOT — un calque qui NE FAIT QUE tourner (Kevin, 25/09/2026 : « fais tourner lentement le logo PILOM sur lui-même »). ⛔ Il existe parce que `.sc__logo` anime déjà `transform` pour sa respiration : deux animations sur la même propriété, la seconde gagne et la première disparaît sans un mot. Un calque par geste, c'est la seule façon de les cumuler. */ .sc__pivot { display:block; width:100%; height:100%; animation:sc-pivot 26s linear infinite; } @keyframes sc-pivot { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { .sc__logo, .sc__pivot { animation:none; } } /** * ⭐⭐ LA STATION RADIO DE « CONTACT » (Kevin, 25/09/2026 : « faire une autre animation à propos du * contact radio, avec robot en VERT, des ondes radio »). * * ⭐⭐ ELLE DIT UNE SEULE CHOSE : on vous répond. Quatre ondes partent du robot, et les trois * postes — téléphone, e-mail, messagerie — s'allument l'un après l'autre à mesure qu'elles les * atteignent. La liaison s'établit sous les yeux, personne n'a besoin de lire. * * ⭐ LE VERT EST CELUI DE L'ENCAISSÉ, le seul de la charte : sur ce site, c'est la couleur de ce * qui est acquis. Une liaison verte dit « c'est passé » là où l'ambre disait « attention ». * ⚠️ Les ondes naissent à 28 % de la hauteur, là où est l'antenne — centrées, elles sortiraient du * ventre du robot. */ .rd { position:relative; width:100%; min-height:clamp(260px,34vw,330px); } .rd__onde { position:absolute; left:50%; top:28%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:999px; border:1.5px solid var(--pos); opacity:0; pointer-events:none; animation:rd-onde 3.6s cubic-bezier(.2,.6,.4,1) infinite; } @keyframes rd-onde { 0% { opacity:.85; transform:scale(.3); } 70% { opacity:.18; } 100% { opacity:0; transform:scale(4.6); } } /* Le mât et son feu : ce qui fait une STATION plutôt qu'un robot posé là. */ .rd__mat { position:absolute; left:50%; top:9%; width:2px; height:14%; margin-left:-1px; background:linear-gradient(180deg, var(--pos), transparent); } .rd__feu { position:absolute; left:50%; top:-5px; width:8px; height:8px; margin-left:-4px; border-radius:999px; background:var(--pos); box-shadow:0 0 12px var(--pos); animation:rd-feu 1.6s ease-in-out infinite; } @keyframes rd-feu { 0%,100% { opacity:1; } 50% { opacity:.3; } } .rd__robot { position:absolute; left:50%; top:22%; width:clamp(74px,12vw,108px); height:auto; transform:translateX(-50%); display:block; } /* ⚠️ Chaque poste s'allume au passage de l'onde, puis RESTE allumé : une liaison qui clignote sans fin dirait qu'elle ne tient pas. */ .rd__poste { position:absolute; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--r-full); white-space:nowrap; border:1px solid var(--pos-line); background:rgba(4,14,10,.72); color:var(--ink); font-size:.78rem; font-weight:700; opacity:0; animation:rd-poste 3.6s ease-out infinite; } .rd__pt { width:6px; height:6px; border-radius:999px; background:var(--pos); box-shadow:0 0 8px var(--pos); } @keyframes rd-poste { 0%,8% { opacity:.25; transform:translate(-50%,-50%) scale(.94); } 16% { opacity:1; transform:translate(-50%,-50%) scale(1.04); } 24%,92% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:.25; transform:translate(-50%,-50%) scale(.94); } } .rd__etat { position:absolute; left:50%; bottom:2%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--pos); } .rd__etat i { width:7px; height:7px; border-radius:999px; background:var(--pos); box-shadow:0 0 10px var(--pos); animation:rd-feu 1.6s ease-in-out infinite; } @media (prefers-reduced-motion:reduce) { .rd__onde { animation:none; opacity:.2; transform:scale(2.4); } .rd__feu, .rd__etat i { animation:none; } .rd__poste { animation:none; opacity:1; } } /* ⚠️ « REVOIR L ANIMATION » DISPARAIT SUR TELEPHONE (Kevin, 26/09/2026 : « supprimer ce bouton sur smartphone »). Elle etait deja pensee comme un plaisir de pied de page, pas comme un appel a l action ; sur un ecran ou chaque ligne se merite, un lien qui relance un film de trente secondes n a pas sa place. ⭐ Le logo la relance toujours, pour qui la cherche. */ @media (max-width:640px) { .pe__rejouer { display:none !important; } } /* ⭐⭐ LE SYSTEME SOLAIRE DES MODULES, SUR TELEPHONE (Kevin, 26/09/2026 : « reduire un peu taille animation et la centrer parfaitement, et enlever la lune en fond sur mobile »). ⛔ LE HALO EST « LA LUNE EN FOND » : un disque de 420 px qui deborde largement de la scene sur un ecran de 390. Au centre d une grande page il fait une lueur ; dans un cadre plus etroit que lui, il devient une tache claire posee dans un coin, et c est exactement ce qu on y voit. ⭐ La scene est reduite et RECENTREE : sa hauteur suivait la largeur de l ecran mais pas son contenu, et les anneaux se retrouvaient decales vers le bas. */ @media (max-width:560px) { .sc { height:270px; } .sc__halo, .sc__rai { display:none; } .sc__orbite:nth-child(3) { display:none; } } /* ⚠️ La Terre du decor de fond ne s affiche pas sur telephone : calee sur le bas d une fenetre etroite, sa courbure devient une bande claire sous le pied de page ({@see resources/js/vitrine.jsx}). */ @media (max-width:760px) { .vt__terre { display:none !important; } } /* ⛔⛔ LE DÉCENTRAGE VENAIT D’UNE MARGE NÉGATIVE (Kevin, 26/09/2026 : « l’animation est pas centrée parfaitement sur mobile, un peu décalée sur la droite, le logo doit être au milieu »). Mesuré en direct en 375 px : la scène s’étendait de 24 à 381, donc centrée sur 203 quand la fenêtre l’est sur 187. Elle débordait de six pixels à droite et en gardait vingt-quatre à gauche. La cause n’était ni dans la scène ni dans le logo — tous deux parfaitement centrés l’un sur l’autre — mais dans un margin-right de -30 px posé sur leur CONTENEUR, là où la scène doit déborder du cadre sur grand écran. ⭐ LA LEÇON : quand un élément est centré dans son parent et pourtant décalé à l’écran, ce n’est pas lui qu’il faut regarder, c’est la chaîne de ses parents. */ @media (max-width:760px) { .xpl__hero-scene { margin-right:0 !important; } } /* ⭐ « REVOIR / REJOUER L’ANIMATION » — déplacé ici depuis `partials/pied-essai.blade.php` (CHECK du 09/10/2026) : le bouton est aussi EN HAUT de /concept, et son style, écrit dans le pied, n’arrivait qu’en bas de page — le bouton s’affichait d’abord nu, puis bougeait (décalage de mise en page compté par Google). Dans cette feuille, il est là avant le premier dessin. */ .pe__rejouer { display:inline-flex; align-items:center; gap:7px; margin-top:16px; padding:6px 13px 6px 10px; border-radius:var(--r-full); border:1px solid var(--line-2); background:var(--card); color:var(--muted); font-size:.76rem; font-weight:700; text-decoration:none; transition:border-color .2s, color .2s, transform .2s; } .pe__rejouer:hover { border-color:var(--c-danger); color:var(--ink); transform:translateY(-1px); } /* ⭐ LA PASTILLE EST ROUGE, PAS LE BOUTON (Kevin, 25/09/2026 : « non, c'était le rond que je voulais rouge »). J'avais peint tout le bouton en aplat : il prenait alors le poids d'un appel à l'action et concurrençait l'essai, juste au-dessus. La bulle reste discrète — seul le point qui bat passe au rouge, et c'est lui qui dit « ça se rejoue ». */ .pe__rejouer-p { width:7px; height:7px; border-radius:var(--r-full); background:var(--c-danger); box-shadow:0 0 8px var(--c-danger); animation:pe-bat 2.4s ease-in-out infinite; } @keyframes pe-bat { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.82); } } @media (prefers-reduced-motion:reduce) { .pe__rejouer-p { animation:none; } }