/* ========================================================================== TEEMLAN — Couche d'amélioration "Dynamic Pro" Animations professionnelles, micro-interactions et profondeur visuelle. Respecte la charte : dégradé bleu (#294c98 → #1c6eb7 → #1090d4) + gris. 100% transform/opacity (GPU), accessible (prefers-reduced-motion). ========================================================================== */ :root { --fx-ease: cubic-bezier(.22, .61, .36, 1); --fx-ease-out: cubic-bezier(.16, 1, .3, 1); --fx-spring: cubic-bezier(.34, 1.56, .64, 1); --fx-blue-soft: rgba(28, 110, 183, .12); --fx-glow: 0 26px 60px -22px rgba(28, 110, 183, .55); --fx-sheen: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%); } /* -------------------------------------------------------------------------- 1. Typographie pro (display technique + corps lisible) -------------------------------------------------------------------------- */ /* Polices chargées via dans le (performance) */ body { font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: -0.005em; } h1, h2, h3, .hero h1, .section-head h2, .metrics strong, .brand-lockup strong { font-family: "Sora", "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: -0.02em; } /* -------------------------------------------------------------------------- 2. Révélations au scroll (directionnelles + cascade) -------------------------------------------------------------------------- */ .is-enhanced .fx-reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--fx-ease-out), transform .9s var(--fx-ease-out); transition-delay: var(--fx-delay, 0ms); will-change: transform, opacity; } .is-enhanced .fx-reveal[data-fx="left"] { transform: translateX(-46px); } .is-enhanced .fx-reveal[data-fx="right"] { transform: translateX(46px); } .is-enhanced .fx-reveal[data-fx="scale"] { transform: scale(.92); } .is-enhanced .fx-reveal[data-fx="zoom"] { transform: translateY(28px) scale(.96); } .is-enhanced .fx-reveal[data-fx="fade"] { transform: none; } .is-enhanced .fx-reveal[data-fx="blur"] { filter: blur(8px); transform: translateY(22px); } .fx-reveal.is-in { opacity: 1 !important; transform: none !important; filter: none !important; } /* -------------------------------------------------------------------------- 3. Héros : fond dégradé animé, parallaxe, profondeur -------------------------------------------------------------------------- */ .hero { isolation: isolate; } /* Halo dégradé animé (charte) derrière le contenu */ .hero::before { content: ""; position: absolute; z-index: 0; inset: -25% -10% auto auto; width: 60vw; height: 60vw; max-width: 780px; max-height: 780px; background: radial-gradient(circle at 30% 30%, rgba(16, 144, 212, .30), transparent 60%), radial-gradient(circle at 70% 70%, rgba(41, 76, 152, .26), transparent 62%); filter: blur(10px); opacity: .9; pointer-events: none; animation: fxHeroAura 16s ease-in-out infinite alternate; } @keyframes fxHeroAura { 0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } 50% { transform: translate3d(-4%, 3%, 0) scale(1.08) rotate(8deg); } 100% { transform: translate3d(3%, -3%, 0) scale(1.04) rotate(-6deg); } } /* Grille technique subtile (identité ingénierie) */ .hero__grid::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(28, 110, 183, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 110, 183, .05) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 70%); pointer-events: none; } /* Parallaxe douce du média de fond */ .hero__media { will-change: transform; transform: translate3d(0, var(--fx-parallax, 0), 0) scale(1.06); transition: transform .1s linear; } /* Apparition du contenu au chargement */ .is-enhanced .hero__content > * { opacity: 0; transform: translateY(26px); animation: fxRiseIn .9s var(--fx-ease-out) forwards; } .is-enhanced .hero__content > *:nth-child(1) { animation-delay: .10s; } .is-enhanced .hero__content > *:nth-child(2) { animation-delay: .20s; } .is-enhanced .hero__content > *:nth-child(3) { animation-delay: .30s; } .is-enhanced .hero__content > *:nth-child(4) { animation-delay: .40s; } .is-enhanced .hero__content > *:nth-child(5) { animation-delay: .50s; } @keyframes fxRiseIn { to { opacity: 1; transform: none; } } /* Révélation mot à mot du H1 (injectée par JS) */ .fx-word { display: inline-block; opacity: 0; transform: translateY(110%) rotate(4deg); animation: fxWordUp .85s var(--fx-ease-out) forwards; animation-delay: calc(.18s + var(--fx-i, 0) * .07s); } .fx-word__inner { display: inline-block; } @keyframes fxWordUp { to { opacity: 1; transform: none; } } /* Pastilles de signaux : pop séquencé + survol */ .hero__signals span { transition: transform .35s var(--fx-spring), box-shadow .35s var(--fx-ease), border-color .35s; } .hero__signals span:hover { transform: translateY(-3px); border-color: var(--blue-2); box-shadow: 0 10px 24px -10px rgba(28, 110, 183, .5); } /* Mot mission : soulignement dégradé animé */ #mission-word { position: relative; background: linear-gradient(90deg, var(--blue-3), var(--blue-2), var(--blue)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fxGradShift 6s ease infinite; } #mission-word::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; border-radius: 3px; background: var(--brand-gradient); transform: scaleX(.2); transform-origin: left; opacity: .65; animation: fxUnderline 2.6s var(--fx-ease) infinite alternate; } @keyframes fxGradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes fxUnderline { from { transform: scaleX(.2); } to { transform: scaleX(1); } } /* -------------------------------------------------------------------------- 4. Boutons : balayage lumineux + relief -------------------------------------------------------------------------- */ .btn { position: relative; overflow: hidden; transition: transform .35s var(--fx-spring), box-shadow .35s var(--fx-ease), background .35s var(--fx-ease); will-change: transform; } .btn::after { content: ""; position: absolute; inset: 0; background: var(--fx-sheen); transform: translateX(-130%) skewX(-18deg); transition: transform .7s var(--fx-ease); pointer-events: none; } .btn:hover::after { transform: translateX(130%) skewX(-18deg); } .btn:hover { transform: translateY(-3px); } .btn:active { transform: translateY(-1px) scale(.99); } .btn-primary { background: var(--blue); background-image: var(--brand-gradient); background-size: 180% 100%; background-position: 0% 50%; transition: transform .35s var(--fx-spring), box-shadow .35s var(--fx-ease), background-position .6s var(--fx-ease); } .btn-primary:hover { background-position: 100% 50%; box-shadow: 0 22px 44px -16px rgba(28, 110, 183, .7); } /* CTA navigation : même langage */ .nav-cta { position: relative; overflow: hidden; transition: transform .35s var(--fx-spring), box-shadow .35s var(--fx-ease); } .nav-cta:hover { transform: translateY(-2px); box-shadow: var(--fx-glow); } /* -------------------------------------------------------------------------- 5. Cartes : spotlight au curseur + relief + zoom image -------------------------------------------------------------------------- */ .service-directory-card, .expertise-card, .sector-card, .technical-demand-card, .portal-signature__console article { position: relative; transition: transform .45s var(--fx-ease-out), box-shadow .45s var(--fx-ease), border-color .45s var(--fx-ease); } /* Lueur radiale qui suit le curseur */ .fx-spotlight::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 260px circle at var(--mx, 50%) var(--my, 0%), rgba(16, 144, 212, .16), transparent 60% ); opacity: 0; transition: opacity .4s var(--fx-ease); pointer-events: none; z-index: 0; } .fx-spotlight:hover::before { opacity: 1; } .fx-spotlight > * { position: relative; z-index: 1; } .service-directory-card:hover, .technical-demand-card:hover { transform: translateY(-6px); box-shadow: var(--fx-glow); border-color: var(--blue-2); } .service-directory-card__media img { transition: transform 1.1s var(--fx-ease-out); } .service-directory-card:hover .service-directory-card__media img { transform: scale(1.08); } /* Icônes de cartes : rebond léger */ .service-directory-card i, .expertise-card__icon, .technical-demand-card i { transition: transform .45s var(--fx-spring); } .service-directory-card:hover i, .expertise-card:hover .expertise-card__icon, .technical-demand-card:hover i { transform: translateY(-4px) scale(1.08) rotate(-3deg); } /* -------------------------------------------------------------------------- 6. Titres de section : trait dégradé + eyebrow animée -------------------------------------------------------------------------- */ .section-head h2 { position: relative; } .section-head--left h2::after, .section-head h2.fx-underline::after { content: ""; display: block; width: 0; height: 4px; margin-top: 16px; border-radius: 4px; background: var(--brand-gradient); transition: width 1s var(--fx-ease-out) .15s; } .section-head--left.is-in h2::after, .fx-underline.is-in::after { width: 84px; } .eyebrow::before { transition: width .8s var(--fx-ease-out); } .fx-reveal:not(.is-in) .eyebrow::before { width: 0; } /* -------------------------------------------------------------------------- 7. Bandeau marquee (expertises défilantes) -------------------------------------------------------------------------- */ .fx-marquee { position: relative; overflow: hidden; padding: 18px 0; background: var(--brand-gradient); color: #fff; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .fx-marquee__track { display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; will-change: transform; animation: fxMarquee 32s linear infinite; } .fx-marquee:hover .fx-marquee__track { animation-play-state: paused; } .fx-marquee__track span { display: inline-flex; align-items: center; gap: 18px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; opacity: .96; } .fx-marquee__track span::after { content: "◆"; font-size: 9px; opacity: .65; } @keyframes fxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 8. Métriques : chiffres en dégradé + soulignement -------------------------------------------------------------------------- */ .metrics strong { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; font-size: clamp(38px, 4.4vw, 50px); } .metrics article { position: relative; transition: transform .4s var(--fx-ease); } .metrics article:hover { transform: translateY(-4px); } .metrics article::before { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 3px; border-radius: 3px; background: var(--brand-gradient); transition: width .7s var(--fx-ease-out); } .metrics article:hover::before { width: 48px; } /* -------------------------------------------------------------------------- 9. Navigation : soulignement animé + en-tête compacte au scroll -------------------------------------------------------------------------- */ .main-nav a { position: relative; } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--brand-gradient); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--fx-ease); } .main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; } .site-header { transition: padding .35s var(--fx-ease), box-shadow .35s var(--fx-ease), background .35s var(--fx-ease); } .site-header.is-scrolled { box-shadow: 0 12px 34px -14px rgba(16, 49, 96, .22); } /* Bande d'accès rapide : effet glissé au survol */ .service-strip__inner a { position: relative; transition: color .3s var(--fx-ease), transform .3s var(--fx-ease); } .service-strip__inner a:hover { transform: translateY(-1px); color: var(--blue-2); } /* Barre de progression : lueur renforcée */ .scroll-progress span { box-shadow: 0 0 16px rgba(16, 144, 212, .6), 0 0 4px rgba(16, 144, 212, .9); } /* -------------------------------------------------------------------------- 10. Plateforme 3D & studio : flottement vivant -------------------------------------------------------------------------- */ .bet-studio { transition: transform .5s var(--fx-ease-out), box-shadow .5s var(--fx-ease); } /* Logo : pulsation discrète au survol */ .brand img { transition: transform .5s var(--fx-spring); } .brand:hover img { transform: scale(1.06) rotate(-2deg); } /* Liens sociaux : pivot */ .footer-social-links a, .social-link { transition: transform .35s var(--fx-spring), color .35s; } .footer-social-links a:hover { transform: translateY(-3px) scale(1.12); } /* Retour-haut (injecté par JS) */ .fx-top { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 48px; height: 48px; display: grid; place-items: center; border: none; border-radius: 50%; color: #fff; font-size: 20px; background: var(--brand-gradient); box-shadow: var(--fx-glow); opacity: 0; transform: translateY(20px) scale(.7); pointer-events: none; transition: opacity .4s var(--fx-ease), transform .4s var(--fx-spring); } .fx-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .fx-top:hover { transform: translateY(-3px) scale(1.06); } /* -------------------------------------------------------------------------- 11. Accessibilité : neutraliser le mouvement si demandé -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .is-enhanced .fx-reveal, .is-enhanced .hero__content > *, .fx-word { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; } .hero::before, .fx-marquee__track, #mission-word, #mission-word::after { animation: none !important; } .btn::after { display: none; } .hero__media { transform: scale(1.06) !important; } } /* -------------------------------------------------------------------------- 12. Ajustements responsive -------------------------------------------------------------------------- */ @media (max-width: 720px) { .hero::before { width: 90vw; height: 90vw; inset: -20% -20% auto auto; } .fx-marquee__track span { font-size: 13px; } .fx-top { right: 14px; bottom: 14px; width: 44px; height: 44px; } } /* ========================================================================== 13. RECHERCHE — habillage professionnel ========================================================================== */ .site-search { padding-top: 8vh; background: rgba(8, 20, 40, .62) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .site-search:not([hidden]) .site-search__panel { animation: fxSearchIn .45s var(--fx-ease-out); } @keyframes fxSearchIn { from { opacity: 0; transform: translateY(-18px) scale(.98); } to { opacity: 1; transform: none; } } .site-search__panel { border-radius: 18px !important; border: 1px solid rgba(255, 255, 255, .6) !important; box-shadow: 0 50px 120px -30px rgba(8, 20, 40, .75) !important; background: linear-gradient(#fff, #fff) padding-box, var(--brand-gradient) border-box !important; } .site-search__panel .eyebrow { color: var(--blue-2); } .site-search__panel h2 { font-family: "Sora", sans-serif; } .site-search__field { border-radius: 12px !important; border: 2px solid var(--line) !important; background: #fff !important; grid-template-columns: 22px minmax(0, 1fr) auto !important; transition: border-color .3s var(--fx-ease), box-shadow .3s var(--fx-ease); } .site-search__field:focus-within { border-color: var(--blue-2) !important; box-shadow: 0 0 0 4px rgba(16, 144, 212, .14); } .site-search__field > i { color: var(--blue-2); font-size: 19px; } .site-search__esc { font: 700 11px/1 "Manrope", sans-serif; color: var(--muted); padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--gray-050); } .site-search__suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .site-search__suggest > span { color: var(--muted); font-weight: 700; font-size: 13px; } .site-search__suggest button { padding: 7px 13px; border: 1px solid var(--line); border-radius: 100px; background: var(--soft); color: var(--blue-3); font-weight: 700; font-size: 13px; transition: all .25s var(--fx-ease); } .site-search__suggest button:hover { color: #fff; background-image: var(--brand-gradient); border-color: transparent; transform: translateY(-2px); } .site-search__count { margin-top: 18px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .site-search__results a { display: grid !important; grid-template-columns: 46px minmax(0, 1fr) 22px !important; align-items: center !important; gap: 14px !important; padding: 14px 16px !important; border-radius: 12px !important; background: #fff; } .site-search__results a:hover { border-color: var(--blue-2) !important; background: var(--soft); box-shadow: 0 14px 30px -16px rgba(28, 110, 183, .5); } .site-search__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 11px; color: #fff; font-size: 20px; background-image: var(--brand-gradient); } .site-search__body { min-width: 0; display: grid; gap: 3px; } .site-search__body strong { font-family: "Sora", sans-serif; } .site-search__body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-search__go { color: var(--blue-2); opacity: 0; transform: translateX(-6px); transition: all .3s var(--fx-ease); } .site-search__results a:hover .site-search__go { opacity: 1; transform: none; } .site-search__hint { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--gray-100); color: var(--muted); font-size: 13px; } .site-search__hint kbd { font: 700 11px/1 "Manrope", sans-serif; padding: 4px 7px; margin: 0 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--gray-050); color: var(--gray-800); } /* ========================================================================== 14. COOKIES — popup professionnel avec fond assombri ========================================================================== */ .fx-cookie-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(8, 20, 40, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s var(--fx-ease); } .fx-cookie-backdrop.is-visible { opacity: 1; } .cookie-consent.fx-cookie { position: fixed !important; left: 50% !important; top: 50% !important; bottom: auto !important; right: auto !important; transform: translate(-50%, -44%) scale(.96) !important; z-index: 95 !important; width: min(540px, calc(100% - 32px)) !important; max-width: none !important; display: block !important; padding: 0 !important; border: none !important; border-radius: 20px !important; background: linear-gradient(#fff, #fff) padding-box, var(--brand-gradient) border-box !important; border: 1.5px solid transparent !important; box-shadow: 0 50px 110px -30px rgba(8, 20, 40, .7) !important; opacity: 0; transition: opacity .4s var(--fx-ease), transform .55s var(--fx-spring) !important; } .cookie-consent.fx-cookie.is-visible { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; } .fx-cookie__card { padding: 26px 26px 22px; } .fx-cookie__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .fx-cookie__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; color: #fff; font-size: 22px; background-image: var(--brand-gradient); } .fx-cookie__head strong { font-family: "Sora", sans-serif; font-size: 18px; color: var(--ink); } .cookie-consent.fx-cookie p { margin: 0 0 18px !important; color: var(--muted) !important; font-size: 14px !important; line-height: 1.6; } .cookie-consent.fx-cookie .cookie-consent__actions { display: flex !important; flex-wrap: wrap; gap: 10px !important; } .cookie-consent.fx-cookie .cookie-consent__actions button { flex: 1 1 auto; min-width: 120px; padding: 12px 16px !important; border-radius: 10px !important; font-weight: 800 !important; font-size: 13.5px !important; transition: transform .25s var(--fx-spring), box-shadow .25s var(--fx-ease), background .25s !important; } .cookie-consent.fx-cookie button[data-cookie-choice="accepted"] { color: #fff !important; background-image: var(--brand-gradient) !important; border: none !important; box-shadow: 0 14px 30px -14px rgba(28, 110, 183, .7) !important; } .cookie-consent.fx-cookie button[data-cookie-choice="essential"] { color: var(--blue-3) !important; background: var(--soft) !important; border: 1px solid var(--line) !important; } .cookie-consent.fx-cookie button[data-cookie-choice="declined"] { color: var(--gray-800) !important; background: #fff !important; border: 1px solid var(--line) !important; } .cookie-consent.fx-cookie button:hover { transform: translateY(-2px); } @media (max-width: 540px) { .cookie-consent.fx-cookie .cookie-consent__actions button { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .cookie-consent.fx-cookie, .fx-cookie-backdrop, .site-search:not([hidden]) .site-search__panel { transition: none !important; animation: none !important; } } /* ========================================================================== 15. CONTACT — habillage professionnel & console de demande ========================================================================== */ .contact-page .contact-page-hero { position: relative; overflow: hidden; background: radial-gradient(110% 130% at 100% -20%, rgba(16, 144, 212, .12), transparent 55%), linear-gradient(180deg, var(--soft), #fff); } .contact-page .contact-page-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(28, 110, 183, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 110, 183, .05) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at 95% 0%, #000, transparent 60%); mask-image: radial-gradient(circle at 95% 0%, #000, transparent 60%); pointer-events: none; } .contact-page .contact-page-hero .shell { position: relative; z-index: 1; } .contact-page .contact-page-hero h1 { font-family: "Sora", sans-serif; } /* Carte itinéraire */ .contact-page .contact-command { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(150deg, #0b1f3a, #1c6eb7); color: #fff; padding: 26px; border: none; } .contact-page .contact-command::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 160px; height: 160px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .25); animation: rxSpin 50s linear infinite; } .contact-page .contact-command__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: rgba(255, 255, 255, .16); font-size: 24px; margin-bottom: 14px; } .contact-page .contact-command strong { display: block; font-family: "Sora", sans-serif; font-size: 17px; margin-bottom: 8px; } .contact-page .contact-command p { color: rgba(255, 255, 255, .85); margin: 0 0 14px; } .contact-page .contact-command a { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #fff; border-bottom: 2px solid rgba(255, 255, 255, .4); padding-bottom: 2px; transition: gap .3s var(--fx-ease); } .contact-page .contact-command a:hover { gap: 14px; } /* Grille principale contact */ .contact-page .contact-page-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 28px; align-items: start; } /* Annuaire de contact */ .contact-page .contact-directory-card { padding: 30px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px -36px rgba(11, 31, 58, .5); } .contact-page .contact-directory-card h2 { font-family: "Sora", sans-serif; } .contact-page .contact-directory { display: grid; gap: 12px; margin: 18px 0 22px; } .contact-page .contact-directory__row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--gray-050); transition: transform .35s var(--fx-ease), border-color .35s, box-shadow .35s, background .35s; } .contact-page .contact-directory__row:hover { transform: translateX(4px); border-color: var(--blue-2); background: #fff; box-shadow: 0 16px 34px -22px rgba(28, 110, 183, .55); } .contact-page .contact-directory__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; color: #fff; font-size: 20px; background-image: var(--brand-gradient); } .contact-page .contact-directory__icon--whatsapp { background: var(--whatsapp); background-image: none; } .contact-page .contact-directory__row span:last-child { display: grid; min-width: 0; } .contact-page .contact-directory__row small { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .contact-page .contact-directory__row em { font-style: normal; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; } /* QR WeChat propre */ .contact-page .contact-wechat-clean { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 14px; border: 1px dashed var(--gray-300); background: var(--soft); } .contact-page .contact-wechat-clean img { width: 92px; height: 92px; border-radius: 10px; border: 1px solid var(--line); background: #fff; } .contact-page .contact-wechat-clean span { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--wechat); } /* Console de demande (formulaire) */ .contact-page .request-console { position: relative; padding: 32px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 70px -40px rgba(11, 31, 58, .6); } .contact-page .request-console::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; border-radius: 20px 20px 0 0; background-image: var(--brand-gradient); } .contact-page .request-console__head h2 { font-family: "Sora", sans-serif; margin: 4px 0 8px; } .contact-page .request-console__head > p { color: var(--muted); margin: 0 0 18px; } /* Chips de type de demande (toggle) */ .contact-page .request-console__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .contact-page .need-btn { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--gray-050); color: var(--gray-800); font-weight: 700; font-size: 13.5px; transition: all .25s var(--fx-ease); } .contact-page .need-btn:hover { border-color: var(--blue-2); transform: translateY(-2px); } .contact-page .need-btn.is-active { color: #fff; border-color: transparent; background-image: var(--brand-gradient); box-shadow: 0 12px 26px -14px rgba(28, 110, 183, .8); } /* Champs */ .contact-page .form-grid-pro { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .contact-page .contact-form label { display: grid; gap: 7px; } .contact-page .contact-form label > span { font-size: 13px; font-weight: 800; color: var(--gray-800); } .contact-page .contact-form input, .contact-page .contact-form select, .contact-page .contact-form textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--gray-050); color: var(--ink); font-size: 15px; transition: border-color .3s var(--fx-ease), box-shadow .3s var(--fx-ease), background .3s; } .contact-page .contact-form input:focus, .contact-page .contact-form select:focus, .contact-page .contact-form textarea:focus { outline: none; background: #fff; border-color: var(--blue-2); box-shadow: 0 0 0 4px rgba(16, 144, 212, .14); } .contact-page .message-field { display: grid; gap: 7px; margin-bottom: 20px; } .contact-page .contact-form textarea { resize: vertical; min-height: 130px; } .contact-page .request-console .btn-primary { width: 100%; min-height: 54px; font-size: 15px; } /* Demandes fréquentes (cartes accordéon-like) */ .contact-page .contact-request-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .contact-page .contact-request-grid .download-faq-item { padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: transform .4s var(--fx-ease-out), box-shadow .4s, border-color .4s; } .contact-page .contact-request-grid .download-faq-item:hover { transform: translateY(-6px); border-color: var(--blue-2); box-shadow: 0 26px 54px -30px rgba(28, 110, 183, .6); } .contact-page .contact-request-grid summary { display: flex; align-items: center; gap: 10px; list-style: none; font-family: "Sora", sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 10px; } .contact-page .contact-request-grid summary span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; font-size: 13px; color: #fff; background-image: var(--brand-gradient); } .contact-page .contact-request-grid p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 14px; } .contact-page .contact-request-grid a { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--blue); font-size: 14px; } .contact-page .contact-request-grid a::after { content: "\2192"; transition: transform .3s var(--fx-ease); } .contact-page .contact-request-grid a:hover::after { transform: translateX(5px); } @media (max-width: 900px) { .contact-page .contact-page-grid { grid-template-columns: 1fr; } .contact-page .contact-request-grid { grid-template-columns: 1fr; } .contact-page .form-grid-pro { grid-template-columns: 1fr; } } /* keyframe partagé (rotation décor) */ @keyframes rxSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .contact-page .contact-command::after { animation: none !important; } } /* ========================================================================== 16. CORRECTIF — éviter que ne devienne bloc conteneur des éléments position:fixed (le keyframe d'origine laissait une transform résiduelle). On redéfinit l'entrée en opacité seule (chargé après teemlan-dynamic.css). ========================================================================== */ @keyframes teemlanPageIn { from { opacity: 0; } to { opacity: 1; } } /* Correctifs ergonomie contact - chargés après le CSS principal */ .contact-page .contact-desk { padding-top: clamp(22px, 2.4vw, 34px) !important; padding-bottom: clamp(28px, 3vw, 44px) !important; } .contact-page .contact-page-grid { gap: clamp(12px, 1.6vw, 18px) !important; } .contact-page .contact-directory-card, .contact-page .request-console { padding: clamp(16px, 1.55vw, 22px) !important; border-radius: 14px !important; } .contact-page .request-console { gap: 10px !important; min-height: 0 !important; } .contact-page .contact-form--page { min-height: 0 !important; } .contact-page .contact-directory-card h2, .contact-page .request-console__head h2 { font-size: clamp(1.22rem, 1.7vw, 1.62rem) !important; line-height: 1.2 !important; margin: 0 0 4px !important; } .contact-page .contact-directory-card__intro, .contact-page .request-console__head > p { font-size: .91rem !important; line-height: 1.48 !important; margin-bottom: 8px !important; } .contact-page .contact-directory { gap: 7px !important; margin: 10px 0 12px !important; } .contact-page .contact-directory__row { gap: 9px !important; padding: 9px 10px !important; border-radius: 10px !important; } .contact-page .contact-directory__icon { width: 36px !important; height: 36px !important; border-radius: 8px !important; font-size: 17px !important; } .contact-page .contact-directory__row small { font-size: 10.5px !important; } .contact-page .contact-directory__row em { font-size: .89rem !important; } .contact-page .contact-wechat-clean { gap: 10px !important; padding: 10px !important; border-radius: 10px !important; } .contact-page .contact-wechat-clean img { width: 72px !important; height: 72px !important; } .contact-page .request-console__head { margin-bottom: 6px !important; } .contact-page .request-console__chips { gap: 6px !important; margin-bottom: 9px !important; } .contact-page .need-btn { padding: 7px 10px !important; font-size: 12px !important; } .contact-page .form-grid-pro { gap: 8px !important; margin-bottom: 8px !important; } .contact-page .contact-form label { gap: 4px !important; } .contact-page .contact-form label > span { font-size: 11.8px !important; } .contact-page .contact-form input, .contact-page .contact-form select, .contact-page .contact-form textarea { min-height: 39px !important; padding: 8px 10px !important; border-radius: 8px !important; font-size: 13.5px !important; } .contact-page .message-field { gap: 4px !important; margin: 8px 0 10px !important; } .contact-page .contact-form textarea { min-height: 82px !important; } .contact-page .request-console .btn-primary { min-height: 42px !important; font-size: 13.5px !important; } @media (min-width: 761px) { .contact-page .contact-page-grid { grid-template-columns: minmax(245px, .72fr) minmax(0, 1.28fr) !important; } .contact-page .form-grid-pro { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px) { .contact-page .contact-page-grid, .contact-page .form-grid-pro { grid-template-columns: 1fr !important; } } /* ========================================================================== 17. PRO3 — Icône WhatsApp blanche sur CTA, finitions d'alignement & amplification des effets dynamiques sur toutes les pages. ========================================================================== */ /* 17.1 — CTA WhatsApp : icône en blanc (corrige le vert sur vert) */ .whatsapp-pulse-cta i, .whatsapp-pulse-cta .bi-whatsapp { color: #fff !important; } .whatsapp-pulse-cta { gap: 10px; font-weight: 800; } .whatsapp-pulse-cta i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .22); font-size: 1rem; } /* 17.2 — Finitions d'alignement & lisibilité (global) */ h1, h2, h3 { text-wrap: balance; } p, li { text-wrap: pretty; } /* éviter tout débordement de texte */ .service-directory-card *, .expertise-card *, .rx-card *, .internal-link-card *, .value-card *, .sector-card * { overflow-wrap: anywhere; } /* eyebrow centré quand le bloc est centré */ .section-head:not(.section-head--left):not(.section-head--row) { text-align: center; } .section-head:not(.section-head--left):not(.section-head--row) .eyebrow { display: inline-flex; align-items: center; justify-content: center; } /* cartes : hauteurs homogènes + corps aligné en bas */ .service-directory-card, .expertise-card, .internal-link-card, .sector-card, .value-card { display: flex; flex-direction: column; } .service-directory-card > strong, .internal-link-card > strong { margin-top: auto; } /* images logos : meilleur cadrage (évite le recadrage agressif) */ .service-directory-card__media { display: grid; place-items: center; } .service-directory-card__media img { width: 100%; } /* 17.3 — Effets dynamiques étendus à toutes les pages */ /* entrée du héros de page intérieure */ .is-enhanced .page-hero .shell > *, .is-enhanced .page-hero__grid > * { opacity: 0; transform: translateY(24px); animation: fxRiseIn .85s var(--fx-ease-out) forwards; } .is-enhanced .page-hero .shell > *:nth-child(2), .is-enhanced .page-hero__grid > *:nth-child(2) { animation-delay: .08s; } .is-enhanced .page-hero .shell > *:nth-child(3), .is-enhanced .page-hero__grid > *:nth-child(3) { animation-delay: .16s; } .is-enhanced .page-hero .shell > *:nth-child(4) { animation-delay: .24s; } .is-enhanced .page-hero .shell > *:nth-child(5) { animation-delay: .32s; } /* halo dégradé animé sur les héros de pages intérieures */ .page-hero { position: relative; overflow: hidden; isolation: isolate; } .page-hero::after { content: ""; position: absolute; z-index: -1; inset: -30% -10% auto auto; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle at 30% 30%, rgba(16, 144, 212, .22), transparent 60%), radial-gradient(circle at 70% 70%, rgba(41, 76, 152, .18), transparent 62%); filter: blur(12px); pointer-events: none; animation: fxHeroAura 18s ease-in-out infinite alternate; } /* cartes de liens internes & valeurs : relief + survol */ .internal-link-card, .value-card, .standard-card, .doc-card, .download-faq-item, .mep-detail, .toc-card a { transition: transform .4s var(--fx-ease-out), box-shadow .4s var(--fx-ease), border-color .4s, color .3s; } .internal-link-card:hover, .value-card:hover, .standard-card:hover, .doc-card:hover, .mep-detail:hover { transform: translateY(-5px); border-color: var(--blue-2); box-shadow: var(--fx-glow); } .internal-link-card strong i, .internal-link-card:hover strong i { transition: transform .35s var(--fx-spring); } .internal-link-card:hover strong i { transform: translateX(5px); } /* TOC : indicateur actif animé */ .toc-card a { position: relative; border-radius: 8px; } .toc-card a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand-gradient); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--fx-ease); } .toc-card a.is-active::before, .toc-card a:hover::before { transform: scaleY(1); } .toc-card a.is-active { color: var(--blue); } /* puces "check" animées */ .mep-detail li i, .check-list li i { transition: transform .3s var(--fx-spring); } .mep-detail li:hover i, .check-list li:hover i { transform: scale(1.25); } /* titres de section : trait dégradé animé (centré aussi) */ .section-head h2::after { margin-left: auto; margin-right: auto; } .section-head--left h2::after { margin-left: 0; } @media (prefers-reduced-motion: reduce) { .is-enhanced .page-hero .shell > *, .is-enhanced .page-hero__grid > * { opacity: 1 !important; transform: none !important; animation: none !important; } .page-hero::after { animation: none !important; } } /* ========================================================================== 18. PRO3 — Passe RESPONSIVE / MOBILE dédiée ========================================================================== */ @media (max-width: 820px) { /* 18.1 Topline compacte (au lieu de 4 lignes pleine largeur) */ .topline { font-size: 12px; } .topline__inner { justify-content: center; gap: 6px 16px; padding: 7px 0; } .topline__inner a, .topline__inner span { flex: 0 1 auto !important; max-width: none !important; justify-content: center; } /* on masque l'adresse (présente dans le footer) pour gagner de la hauteur */ .topline__inner a[href*="maps"] { display: none; } /* 18.2 Menu mobile : overlay plein écran, lisible et aéré */ .main-nav { top: 0 !important; bottom: 0; height: 100dvh; padding: 104px 22px 110px !important; overflow-y: auto; background: rgba(255, 255, 255, .985) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none !important; border-bottom: 0 !important; gap: 2px; } .main-nav a { padding: 16px 6px !important; font-size: 18px; font-family: "Sora", sans-serif; font-weight: 600; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; } .main-nav a::after { content: "\F285"; font-family: "bootstrap-icons"; position: static; width: auto; height: auto; transform: none; background: none; color: var(--blue-2); opacity: .5; font-size: 14px; } .main-nav a.is-active { color: var(--blue); } /* CTA "Demander un devis" cloné en bas du menu mobile */ .main-nav .nav-menu-cta { display: inline-flex !important; width: 100%; justify-content: center; margin-top: 20px; min-height: 54px; border-radius: 12px; background-image: var(--brand-gradient); color: #fff; font-size: 16px; } /* le burger devient une croix nette quand ouvert */ body.nav-open .nav-toggle i::before { content: "\F62A"; } /* 18.3 Hauteurs/typo du héros sur mobile */ .hero { min-height: auto; } .hero__grid { padding: 30px 0 44px; gap: 28px; } .hero h1 { font-size: clamp(30px, 8.4vw, 40px); } .hero__lead { font-size: 16px; } .hero__actions .btn { width: 100%; } .page-hero__grid { gap: 22px; } /* 18.4 Sections : padding vertical réduit, titres ajustés */ .section, .section-soft, .section-tight { padding-top: 42px; padding-bottom: 42px; } .section-head h2, .page-hero h1 { font-size: clamp(26px, 6.6vw, 34px); } /* 18.5 CTA flottants : ne pas se chevaucher */ .whatsapp-pulse-cta { bottom: 78px; } .fx-top { bottom: 16px; } /* 18.6 Marquee plus discret */ .fx-marquee { padding: 13px 0; } } @media (max-width: 480px) { /* topline : email tronqué proprement + 2 colonnes max */ .topline__inner a[href^="mailto"] { max-width: 100%; } .hero__signals { gap: 8px; } .hero__signals span { font-size: 12px; padding: 7px 10px; } .shell { width: min(1160px, calc(100% - 28px)); } /* cartes : padding interne resserré */ .service-directory-card, .expertise-card, .rx-card__body, .internal-link-card, .contact-directory-card, .request-console { padding-left: 18px; padding-right: 18px; } .metrics strong { font-size: clamp(32px, 11vw, 42px); } /* boutons pleine largeur cohérents */ .reference-cta .btn, .request-console .btn-primary { width: 100%; } } /* Confort tactile : zones cliquables d'au moins 44px sur tactile */ @media (hover: none) and (pointer: coarse) { .main-nav a, .service-strip a, .footer a, .btn { min-height: 44px; } .rx-filter, .need-btn { min-height: 42px; } } /* CTA menu mobile : caché par défaut (desktop) */ .nav-menu-cta { display: none; } /* Menu mobile : fond opaque + masquer la bande métiers à l'ouverture */ @media (max-width: 820px) { .main-nav { background: #fff !important; padding-top: 150px !important; } body.nav-open .service-strip { display: none !important; } body.nav-open .site-header { box-shadow: none; } } /* ========================================================================== 19. BLOG — index magazine + pages d'articles (BlogPosting) ========================================================================== */ /* --- Index : article à la une --- */ .blog-featured-wrap { margin-bottom: 30px; } .blog-featured { display: grid; grid-template-columns: 1.15fr .85fr; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 70px -38px rgba(11, 31, 58, .55); transition: transform .5s var(--fx-ease-out), box-shadow .5s var(--fx-ease); } .blog-featured:hover { transform: translateY(-5px); box-shadow: 0 40px 84px -36px rgba(28, 110, 183, .55); } .blog-featured__media { position: relative; min-height: 320px; overflow: hidden; } .blog-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--fx-ease-out); } .blog-featured:hover .blog-featured__media img { transform: scale(1.08); } .blog-featured__badge { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(11, 31, 58, .55); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .25); } .blog-featured__badge i { color: #ffd34d; } .blog-featured__body { padding: 34px; display: flex; flex-direction: column; justify-content: center; } .blog-featured__body h2 { font-family: "Sora", sans-serif; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; margin: 12px 0 12px; color: var(--ink); } .blog-featured__body > p { color: var(--muted); margin: 0 0 16px; } .blog-featured__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--blue); margin-top: 6px; } .blog-featured__more i { transition: transform .3s var(--fx-ease); } .blog-featured:hover .blog-featured__more i { transform: translateX(5px); } /* --- Filtres --- */ .blog-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .blog-filter { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--gray-800); font-weight: 700; font-size: 14px; transition: all .3s var(--fx-ease); } .blog-filter:hover { border-color: var(--blue-2); transform: translateY(-2px); } .blog-filter.is-active { color: #fff; background-image: var(--brand-gradient); border-color: transparent; box-shadow: 0 12px 26px -12px rgba(28, 110, 183, .8); } /* --- Grille de cartes --- */ .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .blog-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 0 22px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 40px -30px rgba(11, 31, 58, .5); transition: transform .45s var(--fx-ease-out), box-shadow .45s var(--fx-ease), border-color .45s; } .blog-card:hover { transform: translateY(-6px); border-color: var(--blue-2); box-shadow: var(--fx-glow); } .blog-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gray-100); } .blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--fx-ease-out); } .blog-card:hover .blog-card__media img { transform: scale(1.09); } .blog-card > :not(.blog-card__media) { margin-left: 20px; margin-right: 20px; } .blog-card__cat { align-self: flex-start; margin-top: 18px; padding: 5px 11px; border-radius: 8px; font-size: 12px; font-weight: 800; color: #fff; background-image: var(--brand-gradient); } .blog-card__cat--guide { color: var(--blue-3); background: var(--soft); background-image: none; border: 1px solid var(--line); } .blog-card h3 { font-family: "Sora", sans-serif; font-size: 18px; line-height: 1.18; margin: 0; color: var(--ink); } .blog-card p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; flex: 1; } .blog-card .article-meta { margin-top: 4px; } .blog-card__more { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--blue); font-size: 14px; margin-top: 4px; } .blog-card__more i { transition: transform .3s var(--fx-ease); } .blog-card:hover .blog-card__more i { transform: translateX(5px); } .blog-card.is-hidden { display: none; } /* meta réutilisable */ .article-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--gray-700); font-size: 13px; font-weight: 600; } .article-meta span { display: inline-flex; align-items: center; gap: 6px; } .article-meta i { color: var(--blue-2); } /* ====================== PAGE ARTICLE ====================== */ .article-hero { padding: 26px 0 18px; position: relative; } .article-hero__cat { display: inline-flex; margin: 6px 0 12px; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff; background-image: var(--brand-gradient); } .article-hero h1 { font-family: "Sora", sans-serif; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.08; margin: 0 0 16px; max-width: 920px; } .article-cover { margin: 8px auto 30px; } .article-cover img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 70px -38px rgba(11, 31, 58, .55); } .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; padding-bottom: 30px; } .article-body { font-size: 17px; line-height: 1.8; color: var(--gray-900); min-width: 0; } .article-lead { font-size: 20px; line-height: 1.6; color: var(--ink); font-weight: 600; margin: 0 0 26px; padding-left: 18px; border-left: 4px solid; border-image: var(--brand-gradient) 1; } .article-body h2 { font-family: "Sora", sans-serif; font-size: 25px; line-height: 1.2; margin: 34px 0 14px; color: var(--ink); } .article-body p { margin: 0 0 18px; } .article-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; } .article-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--gray-800); } .article-list li i { color: var(--blue-2); font-size: 19px; flex: none; margin-top: 2px; } .article-callout { display: flex; gap: 14px; align-items: flex-start; margin: 26px 0; padding: 20px 22px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); border-left: 4px solid var(--blue-2); } .article-callout i { color: var(--blue); font-size: 24px; flex: none; margin-top: 2px; } .article-callout p { margin: 0; font-weight: 600; color: var(--gray-900); } .article-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; padding: 28px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #0b1f3a, #1c6eb7); } .article-cta strong { font-family: "Sora", sans-serif; font-size: 19px; display: block; } .article-cta p { margin: 6px 0 0; color: rgba(255, 255, 255, .85); } .article-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; } .article-cta .btn-secondary { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); } /* aside */ .article-aside { position: sticky; top: 110px; display: grid; gap: 18px; } .article-author { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 40px -30px rgba(11, 31, 58, .45); text-align: center; } .article-author__avatar { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; font-size: 30px; background-image: var(--brand-gradient); margin-bottom: 12px; } .article-author strong { display: block; font-family: "Sora", sans-serif; font-size: 17px; color: var(--ink); } .article-author > span { display: block; color: var(--blue-2); font-weight: 700; font-size: 13px; margin-bottom: 8px; } .article-author p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; } .article-share { padding: 20px 24px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line); } .article-share strong { display: block; font-family: "Sora", sans-serif; margin-bottom: 12px; } .article-share div { display: flex; gap: 10px; } .article-share a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--blue-3); background: #fff; border: 1px solid var(--line); font-size: 19px; transition: all .3s var(--fx-spring); } .article-share a:hover { color: #fff; background-image: var(--brand-gradient); border-color: transparent; transform: translateY(-3px); } .article-related-section { padding-top: 16px; } .blog-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* responsive blog/article */ @media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-featured { grid-template-columns: 1fr; } .blog-featured__media { min-height: 220px; } .article-layout { grid-template-columns: 1fr; gap: 28px; } .article-aside { position: static; grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .blog-grid, .blog-grid--related { grid-template-columns: 1fr; } .article-aside { grid-template-columns: 1fr; } .article-cover img { max-height: 280px; } } /* ========================================================================== 20. MOBILE UNIQUEMENT — allègement, fluidité & finitions (Tout est sous media query : le rendu desktop n'est pas modifié.) ========================================================================== */ @media (max-width: 820px) { /* 20.1 Bannière haute : une seule ligne fine, défilable, discrète */ .topline { font-size: 11px; line-height: 1; } .topline__inner { flex-wrap: nowrap !important; justify-content: flex-start; gap: 18px !important; padding: 6px 4px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .topline__inner::-webkit-scrollbar { display: none; } .topline__inner a, .topline__inner span { flex: 0 0 auto !important; white-space: nowrap; opacity: .96; } /* 20.2 On masque la bande de liens "métiers" sur mobile (déjà dans le menu) → page nettement moins chargée */ .service-strip { display: none !important; } /* 20.3 CTA WhatsApp : bouton rond compact, toujours dans le cadre */ .whatsapp-pulse-cta { right: 16px !important; bottom: 84px !important; width: 54px; height: 54px; padding: 0 !important; gap: 0; border-radius: 50% !important; justify-content: center; box-shadow: 0 14px 30px rgba(37, 211, 102, .42); } .whatsapp-pulse-cta span { display: none; } /* on garde l'icône seule */ .whatsapp-pulse-cta i { width: auto; height: auto; background: none; font-size: 1.5rem; } /* 20.4 Héros allégé : pastilles plus discrètes, plus d'air */ .hero__signals { gap: 8px; margin-top: 16px; } .hero__signals span { font-size: 11.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .7); } .hero__lead { color: #44566c; } /* 20.5 Marquee plus fin et plus doux */ .fx-marquee { padding: 11px 0; } .fx-marquee__track span { font-size: 12px; letter-spacing: .03em; } /* 20.6 Cartes plus légères : ombres douces, coins arrondis, plus d'espace */ .service-directory-card, .expertise-card, .internal-link-card, .sector-card, .value-card, .blog-card, .rx-card, .technical-demand-card, .doc-card, .download-faq-item { border-radius: 16px; box-shadow: 0 10px 26px -18px rgba(11, 31, 58, .35) !important; } /* 20.7 Respiration : grilles en 1 colonne avec espacement confortable */ .service-directory, .expertise-grid, .blog-grid, .rx-grid, .download-faq-grid, .technical-demand-showcase, .diagnostic-grid, .insight-grid { grid-template-columns: 1fr !important; gap: 16px !important; } /* 20.8 Titres plus compacts et équilibrés */ .section-head { margin-bottom: 6px; } .section-head p:not(.eyebrow) { font-size: 15px; } .eyebrow { font-size: 12px; } /* 20.9 Fluidité : défilement doux + désactiver les survols lourds (parallaxe et tilt n'ont pas de sens au doigt) */ html { scroll-behavior: smooth; } .tilt-3d { transform: none !important; } .hero__media { transform: scale(1.04) !important; } /* 20.10 En-tête plus fin et net */ .nav-shell { height: 64px !important; } .site-header { backdrop-filter: blur(12px); } } @media (max-width: 480px) { /* Boutons héros : un seul accent fort + un secondaire discret */ .hero__actions { gap: 10px; } .hero h1 { line-height: 1.05; } /* Réduire encore la densité des sections */ .section, .section-soft, .section-tight { padding-top: 34px !important; padding-bottom: 34px !important; } .shell { width: min(1160px, calc(100% - 24px)); } /* La bannière : on n'affiche que l'essentiel pour gagner en légèreté */ .topline { font-size: 11px; } } /* Topline mobile : masque dégradé sur les bords (indice de défilement discret) */ @media (max-width: 820px) { .topline { position: relative; } .topline__inner { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); } } /* Garde-fou anti-débordement horizontal (mobile uniquement, ne casse pas le sticky) */ @media (max-width: 820px) { html, body { overflow-x: clip; } .hero, .page-hero, .rf-hero, .topline, .fx-marquee { overflow-x: clip; } } /* ========================================================================== 21. MOBILE-LITE — expérience mobile moderne, légère et fluide (100% sous media query : la version web/desktop n'est pas modifiée) Objectif : moins de texte, pas de 3D complexe, navigation souple, on garde les grandes lignes + les mots-clés métier. ========================================================================== */ @media (max-width: 820px) { /* 21.1 — Retirer les visuels 3D complexes (rendu instable sur mobile) */ .hero .bet-studio, .engineering-3d, .engineering-3d__viewport, .services-signature-visual, .services-orbit, .bet-node, .engineering-tower, .engineering-plate, .engineering-axis, .mep-path { display: none !important; } /* 21.2 — Héros épuré : titre + accroche courte + actions + mots-clés */ .hero__grid { grid-template-columns: 1fr !important; padding: 22px 0 34px !important; } .hero__lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 12px; } /* 21.3 — Moins d'écriture : on plie les paragraphes secondaires (le texte reste dans le HTML → contenu conservé, juste réduit à l'écran) */ .service-directory-card p, .expertise-card p, .sector-card p, .internal-link-card p, .technical-demand-card p, .blog-card p, .rx-card__desc, .value-card p, .doc-card p, .editorial-card p, .diagnostic-grid p, .method-step p, .insight-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; } .section-head p:not(.eyebrow), .page-hero__lead, .engineering-index__intro p, .portal-signature__content p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .founder-word__content p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* 21.4 — Masquer les micro-descriptions (on garde les libellés/mots-clés) */ .portal-signature__console article small, .bet-studio__metrics dd, .service-strip, .hero__signals { /* signaux : on garde via 21.5 ci-dessous, ré-affichés */ } .portal-signature__console article small { display: none !important; } /* on garde les pastilles mots-clés du héros mais compactes */ .hero__signals { display: flex !important; gap: 7px; margin-top: 14px; } .hero__signals span { font-size: 11px; padding: 6px 10px; background: rgba(255,255,255,.72); } /* 21.5 — Masquer les sections purement rédactionnelles sur mobile → l'écran devient confortable ; le contenu reste indexable dans le HTML */ #guide, #conformite, .portal-home-section--signature .portal-signature__content > p { /* #guide & #conformite = blocs de texte long, peu utiles au doigt */ } #guide { display: none !important; } /* 21.6 — Cartes services : format "app" (icône + titre + flèche), on garde la description courte clampée déjà appliquée */ .service-directory-card { padding: 16px !important; } .service-directory-card__media { display: none !important; } /* photos décoratives lourdes */ .service-directory { gap: 12px !important; } /* 21.7 — Navigation souple & animations modernes */ html { scroll-behavior: smooth; } @supports (scroll-behavior: smooth) { body { -webkit-overflow-scrolling: touch; } } /* entrée douce et rapide des sections au scroll */ .is-enhanced .fx-reveal { transition-duration: .55s !important; } /* feedback tactile sur les éléments cliquables */ .btn, .service-directory-card, .blog-card, .rx-card, .expertise-card, .internal-link-card, .nav-cta, .rx-filter, .blog-filter, .need-btn { -webkit-tap-highlight-color: transparent; transition: transform .25s var(--fx-spring), box-shadow .25s var(--fx-ease); } .btn:active, .service-directory-card:active, .blog-card:active, .rx-card:active, .expertise-card:active, .internal-link-card:active { transform: scale(.97); } /* 21.8 — Respiration générale (style app) */ .section, .section-soft, .section-tight { padding-top: 36px !important; padding-bottom: 36px !important; } .section-head { text-align: left; } .section-head h2 { font-size: clamp(23px, 6.2vw, 30px); line-height: 1.15; } .metrics__grid, .metrics__grid--strong { gap: 12px !important; } /* 21.9 — Désactiver les transforms 3D au survol (sans effet au doigt) */ .tilt-3d { transform: none !important; } } /* ========================================================================== 22. MOBILE — correctifs menu, bandeau Références & topline sur une ligne (100% sous media query : desktop inchangé) ========================================================================== */ @media (max-width: 820px) { /* 22.1 — CORRECTIF MENU : le backdrop-filter du header créait un bloc conteneur qui plaçait le menu (position:fixed) hors de l'écran au scroll. À l'ouverture, on neutralise ce filtre → le menu se cale sur la fenêtre. */ body.nav-open .site-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #fff !important; } body.nav-open .topline { display: none !important; } .main-nav { position: fixed !important; inset: 0 !important; height: 100dvh !important; z-index: 35 !important; padding: 86px 22px 40px !important; /* dégage le header, pas de grand vide */ justify-content: flex-start !important; gap: 0 !important; } /* plus de grand espace : la liste occupe le haut, le CTA suit naturellement */ .main-nav a { padding: 15px 4px !important; } .main-nav .nav-menu-cta { margin-top: 22px !important; } /* 22.2 — Masquer la barre de filtres/compteur des Références sur mobile */ .rf-toolbar, #rf-toolbar { display: none !important; } .references-page .rf-featured { padding-top: 26px; } /* 22.3 — TOPLINE compacte : les 3 infos tiennent sur UNE ligne dans le cadre */ .topline { font-size: 10px !important; line-height: 1; } .topline__inner { flex-wrap: nowrap !important; overflow: visible !important; justify-content: space-between !important; gap: 5px !important; padding: 6px 10px !important; -webkit-mask-image: none !important; mask-image: none !important; } .topline__inner a, .topline__inner span { flex: 0 0 auto !important; min-width: 0; white-space: nowrap; gap: 3px !important; } /* icônes plus petites pour gagner de la place (on garde le texte) */ .topline__inner a i { font-size: 10px; margin-right: 2px; } } @media (max-width: 390px) { /* petits écrans : police un peu plus fine + icônes masquées → tout reste sur 1 ligne */ .topline { font-size: 9.3px !important; } .topline__inner { gap: 4px !important; padding: 6px 8px !important; } .topline__inner a i { display: none !important; } }