/* ============================================================================= HOPELA · couche "wow" des pages informatique (4 pages : infogérance, maintenance de parc, solutions logicielles, informatique Reims). Additive : ne réécrit jamais it-pro.css, elle l'enrichit. Chargée APRÈS lui. Tout est scopé sous .it-pro-page — aucun autre gabarit du site n'est touché. ========================================================================== */ /* --- réglages de la couche ------------------------------------------------ */ .it-pro-page{ --wow-ease: cubic-bezier(.22,.8,.24,1); --wow-lift: -6px; --wow-glow: 0 18px 50px rgba(6,14,10,.16); } /* ========================================================================= 1. Barre de progression de lecture (repère d'avancement, page longue) ====================================================================== */ .it-progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:9999; pointer-events:none; background:transparent; } .it-progress__bar{ height:100%; width:0%; background:linear-gradient(90deg, var(--it-accent), var(--it-accent-2)); box-shadow:0 0 14px rgba(0,0,0,.18); transform-origin:0 50%; } /* ========================================================================= 2. Hero : aurore animée, halo, titre qui se compose, surlignage vivant ====================================================================== */ .it-pro-page .it-hero{ position:relative; isolation:isolate; } .it-pro-page .it-hero > .container{ position:relative; z-index:2; } /* aurore : nappes de couleur qui dérivent lentement derrière la photo */ .it-hero-aurora{ position:absolute; inset:-25%; z-index:1; pointer-events:none; opacity:.5; filter:blur(48px); will-change:transform; background: radial-gradient(38% 52% at 22% 32%, var(--it-accent) 0%, transparent 62%), radial-gradient(34% 46% at 78% 26%, var(--it-accent-2) 0%, transparent 60%), radial-gradient(42% 50% at 62% 78%, var(--it-accent) 0%, transparent 64%); animation: it-aurora 22s ease-in-out infinite alternate; } @keyframes it-aurora{ 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d( 4%, 3%, 0) scale(1.12); } 100%{ transform: translate3d(-2%, 4%, 0) scale(1.05); } } /* voile de grain très léger : casse le côté "photo plate" */ .it-hero-aurora::after{ content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:3px 3px; mix-blend-mode:overlay; } /* titre : les mots se posent un par un */ .it-pro-page .it-hero h1 .it-word{ display:inline-block; opacity:0; transform:translate3d(0,.45em,0); animation: it-word .7s var(--wow-ease) forwards; animation-delay: calc(var(--i,0) * 55ms + 120ms); } @keyframes it-word{ to{ opacity:1; transform:none; } } /* surlignage du titre : dégradé qui respire */ .it-pro-page .it-hero h1 .it-hl{ background-image:linear-gradient(100deg, var(--it-amber), #ff9e4a 40%, var(--it-amber) 80%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: it-hl 7s ease-in-out infinite alternate; } @keyframes it-hl{ to{ background-position:100% 0; } } /* puces du hero : arrivée décalée */ .it-pro-page .it-hero-list li{ opacity:0; transform:translate3d(-10px,0,0); animation: it-slide-in .6s var(--wow-ease) forwards; animation-delay: calc(var(--i,0) * 90ms + 420ms); } @keyframes it-slide-in{ to{ opacity:1; transform:none; } } /* carte contact : légère lévitation à l'arrivée */ .it-pro-page .it-hero-panel{ opacity:0; transform:translate3d(0,26px,0); animation: it-slide-up .8s var(--wow-ease) .35s forwards; box-shadow: var(--it-shadow-lg); } @keyframes it-slide-up{ to{ opacity:1; transform:none; } } /* indicateur de scroll : pulsation discrète */ .it-pro-page .it-hero-scroll{ animation: it-bob 2.4s ease-in-out infinite; } @keyframes it-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(7px) } } /* ========================================================================= 3. Révélations au scroll : plus douces + cascade ====================================================================== */ .it-pro-page .it-reveal{ opacity:0; transform:translate3d(0,24px,0) scale(.99); transition: opacity .75s var(--wow-ease), transform .75s var(--wow-ease); transition-delay: calc(var(--i,0) * 70ms); will-change:opacity, transform; } .it-pro-page .it-reveal.is-visible{ opacity:1; transform:none; } /* ========================================================================= 4. Cartes : relief, halo d'accent et spot lumineux qui suit le curseur ====================================================================== */ .it-pro-page .it-service-card, .it-pro-page .it-suite-card, .it-pro-page .it-signal-grid > article, .it-pro-page .it-crosslink-grid > a, .it-pro-page .it-faq-item{ position:relative; overflow:hidden; transition: transform .45s var(--wow-ease), box-shadow .45s var(--wow-ease), border-color .45s var(--wow-ease); } /* spot lumineux : suit la souris (variables posées par it-wow.js) */ .it-pro-page .it-service-card::before, .it-pro-page .it-suite-card::before, .it-pro-page .it-signal-grid > article::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .4s ease; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.9), transparent 62%); mix-blend-mode:soft-light; } .it-pro-page .it-service-card > *, .it-pro-page .it-suite-card > *, .it-pro-page .it-signal-grid > article > *{ position:relative; z-index:1; } @media (hover:hover){ .it-pro-page .it-service-card:hover, .it-pro-page .it-suite-card:hover, .it-pro-page .it-signal-grid > article:hover, .it-pro-page .it-crosslink-grid > a:hover{ transform:translateY(var(--wow-lift)); box-shadow:var(--wow-glow); border-color:var(--it-accent); } .it-pro-page .it-service-card:hover::before, .it-pro-page .it-suite-card:hover::before, .it-pro-page .it-signal-grid > article:hover::before{ opacity:.55; } } /* liseré d'accent qui se déploie en haut de carte */ .it-pro-page .it-service-card::after, .it-pro-page .it-suite-card::after{ content:""; position:absolute; left:0; top:0; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg, var(--it-accent), var(--it-accent-2)); transition:transform .5s var(--wow-ease); } @media (hover:hover){ .it-pro-page .it-service-card:hover::after, .it-pro-page .it-suite-card:hover::after{ transform:scaleX(1); } } /* ========================================================================= 5. Boutons : reflet qui balaie + aimantation légère ====================================================================== */ .it-pro-page .it-primary-btn, .it-pro-page .it-secondary-btn{ position:relative; overflow:hidden; transition:transform .35s var(--wow-ease), box-shadow .35s var(--wow-ease); } .it-pro-page .it-primary-btn::after, .it-pro-page .it-secondary-btn::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, transparent 28%, rgba(255,255,255,.4) 50%, transparent 72%); transform:translateX(-130%); } @media (hover:hover){ .it-pro-page .it-primary-btn:hover, .it-pro-page .it-secondary-btn:hover{ box-shadow:var(--wow-glow); } .it-pro-page .it-primary-btn:hover::after, .it-pro-page .it-secondary-btn:hover::after{ transition:transform .75s var(--wow-ease); transform:translateX(130%); } } /* ========================================================================= 6. Titres de section : filet qui se trace ====================================================================== */ .it-pro-page .it-section-head .it-kicker{ position:relative; display:inline-flex; align-items:center; gap:.55rem; } .it-pro-page .it-section-head .it-kicker::after{ content:""; display:block; width:0; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--it-accent), transparent); transition:width .8s var(--wow-ease) .15s; } .it-pro-page .it-section-head.is-visible .it-kicker::after{ width:56px; } /* ========================================================================= 7. Chiffres animés : on met le résultat en valeur ====================================================================== */ .it-pro-page .it-count{ font-variant-numeric:tabular-nums; background:linear-gradient(120deg, var(--it-accent), var(--it-accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ========================================================================= 8. Barre d'action collante : le devis reste à portée sur une page longue ====================================================================== */ .it-stickycta{ position:fixed; left:50%; bottom:16px; z-index:900; display:flex; align-items:center; gap:.85rem; padding:.6rem .7rem .6rem 1.1rem; border-radius:999px; background:rgba(11,23,22,.92); color:#fff; border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 44px rgba(6,14,10,.34); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transform:translate(-50%, 160%); opacity:0; transition:transform .55s var(--wow-ease), opacity .35s ease; max-width:calc(100vw - 24px); } .it-stickycta.is-on{ transform:translate(-50%, 0); opacity:1; } .it-stickycta__txt{ font-size:.92rem; line-height:1.25; } .it-stickycta__txt b{ display:block; font-weight:700; } .it-stickycta__txt span{ opacity:.72; font-size:.82rem; } .it-stickycta__btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.45rem; padding:.62rem 1.05rem; border-radius:999px; font-weight:700; font-size:.9rem; color:#fff; text-decoration:none; background:var(--it-grad-cta); transition:transform .3s var(--wow-ease), box-shadow .3s var(--wow-ease); } .it-stickycta__btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(194,84,10,.42); } .it-stickycta__close{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; cursor:pointer; border:0; background:rgba(255,255,255,.1); color:#fff; font-size:15px; line-height:1; } .it-stickycta__close:hover{ background:rgba(255,255,255,.2); } @media (max-width:640px){ .it-stickycta__txt span{ display:none; } .it-stickycta{ width:calc(100vw - 20px); justify-content:space-between; } } /* ========================================================================= 9. Bloc réponse (GEO) : mis en avant, c'est le passage cité par les IA ====================================================================== */ .it-pro-page .it-answer-box{ position:relative; overflow:hidden; border-left:3px solid var(--it-accent); } .it-pro-page .it-answer-box::after{ content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%; pointer-events:none; opacity:.1; background:radial-gradient(circle, var(--it-accent), transparent 70%); } /* ========================================================================= 9 bis. Accroche + repères factuels du bloc réponse. C'est le passage que les moteurs génératifs reprennent : on le rend lisible d'un coup d'œil, et la liste reste un vrai