/* * Page d'accueil — reprise de maquette-accueil-4.html, adaptée en page * autonome (voir templates/accueil.php). Classes préfixées * mavipro-home- (et mavipro-hero- pour la capsule animée du hero) : * cette page charge aussi capsule.css/annuaire.css (pour la section * "Explorer", vrai aperçu de l'annuaire) — .capsule et .eyebrow y sont * déjà utilisés avec un sens différent, d'où le renommage systématique * plutôt que de réutiliser les noms bruts de la maquette. * * RAPPEL PIÈGE (voir annuaire.css) : jamais un astérisque suivi d'une * barre oblique dans un commentaire CSS ici non plus. */ body.mavipro-accueil-page { --mvh-bg: #060B16; --mvh-bg-2: #0A1224; --mvh-bg-3: #0E1A33; --mvh-blue: #3B82F6; --mvh-blue-hi: #60A5FA; --mvh-cyan: #22D3EE; --mvh-cyan-soft: #67E8F9; --mvh-white: #F2F6FF; --mvh-ink: #0A0F1C; --mvh-glass: rgba(255, 255, 255, 0.055); --mvh-glass-2: rgba(255, 255, 255, 0.09); --mvh-glass-line: rgba(255, 255, 255, 0.14); --mvh-glass-hi: rgba(255, 255, 255, 0.45); --mvh-text: #E6EDFB; --mvh-text-mut: #93A2C4; --mvh-text-dim: #5E7099; --mvh-grey: #8B9CB6; --mvh-border: rgba(255, 255, 255, 0.08); --mvh-card-bg: #111827; --mvh-fd: 'Space Grotesk', system-ui, sans-serif; --mvh-fb: 'Inter', system-ui, sans-serif; --mvh-ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --mvh-ease-glass: cubic-bezier(0.65, 0, 0.35, 1); font-family: var(--mvh-fb); background: var(--mvh-bg); color: var(--mvh-text); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; margin: 0; } /* overflow-x sur , pas seulement : sur Safari (WebKit), `overflow-x:hidden` sur body seul ne suffit pas à empêcher un défilement horizontal de page causé par des descendants absolus qui débordent (halos d'ambiance, slides du diaporama hors-champ) — un défaut connu de WebKit, invisible sous Chromium (qui gère ça correctement sans ce filet). Vécu en pratique : page glissable vers la droite sur iPhone réel alors qu'aucun débordement n'apparaissait en émulation Chromium — reproduit seulement avec le moteur WebKit de Playwright, jamais avec Chromium. accueil.css n'est chargé que sur la page d'accueil (is_front_page()), sans risque pour les autres pages. */ html { scroll-behavior: smooth; overflow-x: hidden; } body.mavipro-accueil-page :focus-visible { outline: 2px solid var(--mvh-cyan); outline-offset: 3px; border-radius: 6px; } /* Non scopé à dessein (spécificité 0,0,1, un seul élément) : sinon ce reset battait .mavipro-home-btn--primary { color: #04121b; } (une seule classe, 0,1,0) sur tous les boutons — texte clair hérité au lieu du noir attendu sur fond cyan. Page 100% autonome, aucun risque de fuite vers autre chose. */ a { color: inherit; text-decoration: none; } body.mavipro-accueil-page section { position: relative; z-index: 2; } /* --- Ambiance --- */ .mavipro-home-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .mavipro-home-halo { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .4; } .mavipro-home-halo--1 { width: 600px; height: 600px; top: -160px; left: -100px; background: radial-gradient(circle, rgba(59, 130, 246, 0.5), transparent 62%); } .mavipro-home-halo--2 { width: 520px; height: 520px; top: 40%; right: -140px; background: radial-gradient(circle, rgba(34, 211, 238, 0.32), transparent 65%); } .mavipro-home-halo--3 { width: 480px; height: 480px; bottom: -120px; left: 30%; background: radial-gradient(circle, rgba(99, 102, 241, 0.28), transparent 65%); } .mavipro-home-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 50% at 50% 20%, #000 20%, transparent 75%); } .mavipro-home-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); } .mavipro-home-eyebrow { font-family: var(--mvh-fd); font-size: .76rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--mvh-cyan-soft); margin-bottom: 1rem; } .mavipro-home-section-title { font-family: var(--mvh-fd); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--mvh-white); } .mavipro-home-section-lead { margin-top: 1rem; color: var(--mvh-text-mut); font-weight: 300; max-width: 52ch; } .mavipro-home-btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mvh-fd); font-weight: 500; font-size: .95rem; padding: .85rem 1.6rem; border-radius: 100px; cursor: pointer; transition: transform .3s var(--mvh-ease-soft), box-shadow .3s var(--mvh-ease-soft), background .3s; border: none; } .mavipro-home-btn--primary { background: var(--mvh-cyan); color: #04121b; } .mavipro-home-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(34, 211, 238, 0.35); } .mavipro-home-btn--ghost { border: 1px solid var(--mvh-glass-line); color: var(--mvh-white); background: transparent; } .mavipro-home-btn--ghost:hover { border-color: var(--mvh-cyan); background: rgba(34, 211, 238, 0.06); } .mavipro-home-btn--lg { padding: 1rem 2.2rem; font-size: 1.05rem; } /* --- Nav --- */ .mavipro-home-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(20px, 5vw, 64px); transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; } .mavipro-home-nav.is-scrolled { background: rgba(6, 11, 22, 0.82); backdrop-filter: blur(14px); border-bottom-color: var(--mvh-glass-line); } /* display:flex + gap sans wrapper autour du texte espacerait aussi "MaVi" et "Pro" (rendu "MaVi Pro") — l'espacement vit sur __mark uniquement. */ .mavipro-home-nav__brand { font-family: var(--mvh-fd); font-weight: 600; font-size: 1.2rem; color: #fff; display: flex; align-items: center; } .mavipro-home-nav__brand span { color: var(--mvh-cyan); } .mavipro-home-brand-accent { color: var(--mvh-cyan); } .mavipro-home-nav__mark { width: 12px; height: 16px; border-radius: 8px; background: linear-gradient(160deg, var(--mvh-cyan-soft), var(--mvh-blue)); display: inline-block; margin-right: .5rem; } .mavipro-home-nav__links { display: flex; gap: 1.8rem; font-size: .9rem; color: var(--mvh-text-mut); } .mavipro-home-nav__links a:hover { color: var(--mvh-white); } @media (max-width: 860px) { .mavipro-home-nav__links { display: none; } } .mavipro-home-nav__actions { display: flex; align-items: center; gap: 1.2rem; } .mavipro-home-nav__espace { font-family: var(--mvh-fd); font-size: .88rem; font-weight: 500; color: var(--mvh-cyan-soft); } .mavipro-home-nav__espace:hover { color: var(--mvh-cyan-soft); } /* Sur mobile, "Mon espace" en texte est trop serré à côté du bouton Créer ma Capsule : remplacé par une icône seule, après le bouton (même repère 860px que le repli de .mavipro-home-nav__links). */ .mavipro-home-nav__espace-icon { display: none; width: 38px; height: 38px; border-radius: 50%; flex: none; align-items: center; justify-content: center; border: 1px solid var(--mvh-glass-line); color: var(--mvh-text-mut); } .mavipro-home-nav__espace-icon svg { width: 18px; height: 18px; } .mavipro-home-nav__espace-icon:hover { color: var(--mvh-cyan-soft); border-color: var(--mvh-cyan); } @media (max-width: 860px) { .mavipro-home-nav__espace { display: none; } .mavipro-home-nav__espace-icon { display: flex; } } /* Bouton hamburger : masqué sur desktop, placé avant le logo dans le DOM pour qu'il tombe naturellement à sa gauche (pas besoin d'ordre flex). */ .mavipro-home-nav__burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; margin-right: .8rem; padding: 0; border: none; background: none; cursor: pointer; flex: none; } .mavipro-home-nav__burger span { width: 75%; height: 2px; background: var(--mvh-white); border-radius: 2px; transition: transform .25s, opacity .25s, width .25s; } .mavipro-home-nav__burger span:nth-child(3) { width: 40%; } .mavipro-home-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .mavipro-home-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .mavipro-home-nav__burger[aria-expanded="true"] span:nth-child(3) { width: 75%; transform: translateY(-6px) rotate(-45deg); } /* Panneau mobile : reprend les liens du menu desktop (voir templates/ accueil.php, $nav_links, boucle partagée pour ne jamais diverger). */ .mavipro-home-nav-mobile { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; z-index: 49; background: rgba(6, 11, 22, 0.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--mvh-glass-line); padding: .5rem clamp(20px, 5vw, 64px) 1rem; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); } .mavipro-home-nav-mobile[hidden] { display: none; } .mavipro-home-nav-mobile a { padding: .9rem 0; font-size: 1rem; color: var(--mvh-text-mut); border-bottom: 1px solid var(--mvh-border); } .mavipro-home-nav-mobile a:last-child { border-bottom: none; } .mavipro-home-nav-mobile a:hover { color: var(--mvh-white); } @media (min-width: 861px) { .mavipro-home-nav-mobile { display: none !important; } } @media (max-width: 860px) { .mavipro-home-nav__burger { display: flex; } } /* --- Hero --- */ .mavipro-home-hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 2rem; min-height: 92vh; padding: 2rem clamp(20px, 5vw, 64px) 4rem; max-width: 1180px; margin: 0 auto; } @media (max-width: 900px) { .mavipro-home-hero { grid-template-columns: 1fr; text-align: center; min-height: auto; padding-top: 3rem; } } .mavipro-home-hero__title { font-family: var(--mvh-fd); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--mvh-white); margin: 1rem 0; } .mavipro-home-hero__title .line { display: block; } .mavipro-home-hero__title .line--accent { color: var(--mvh-cyan); } .mavipro-home-hero__sub { color: var(--mvh-text-mut); font-weight: 300; font-size: 1.1rem; max-width: 46ch; margin-bottom: 2rem; } @media (max-width: 900px) { .mavipro-home-hero__sub { margin-left: auto; margin-right: auto; } } .mavipro-home-hero__tagline { font-family: var(--mvh-fd); font-weight: 600; font-size: 1.3rem; color: var(--mvh-white); margin: 0 0 1.4rem; } .mavipro-home-hero__list { list-style: none; display: flex; flex-direction: column; gap: .6rem; max-width: 46ch; margin-bottom: 2rem; } .mavipro-home-hero__list li { display: flex; align-items: baseline; gap: .65rem; color: var(--mvh-text-mut); font-weight: 300; font-size: .98rem; line-height: 1.5; } .mavipro-home-hero__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mvh-cyan); box-shadow: 0 0 8px var(--mvh-cyan); flex: none; margin-top: .5em; } .mavipro-home-hero__list strong { color: var(--mvh-white); font-weight: 600; } @media (max-width: 900px) { .mavipro-home-hero__list { margin-left: auto; margin-right: auto; text-align: left; } } .mavipro-home-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; } @media (max-width: 900px) { .mavipro-home-hero__actions { justify-content: center; } } .mavipro-home-hero__hint { margin-top: 1.6rem; font-size: .86rem; color: var(--mvh-text-dim); display: flex; align-items: center; gap: .5rem; } @media (max-width: 900px) { .mavipro-home-hero__hint { justify-content: center; } } .mavipro-home-hint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mvh-cyan); box-shadow: 0 0 12px var(--mvh-cyan); animation: mavipro-home-pulse 2s infinite; } @keyframes mavipro-home-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } /* --- Capsule signature du hero (décorative, pas la vraie Capsule) --- */ .mavipro-home-stage { position: relative; height: 560px; display: flex; align-items: center; justify-content: center; perspective: 1400px; } @media (max-width: 900px) { .mavipro-home-stage { height: 460px; } } .mavipro-hero-capsule { position: relative; width: 260px; height: 440px; transform-style: preserve-3d; cursor: pointer; transform: translateY(-120px) rotateX(6deg); opacity: 0; transition: transform 1.4s var(--mvh-ease-soft), opacity 1.2s var(--mvh-ease-soft); } .mavipro-hero-capsule.is-loaded { opacity: 1; transform: translateY(0) rotateX(6deg); animation: mavipro-hero-float 7s ease-in-out infinite 1.4s; } @keyframes mavipro-hero-float { 0%, 100% { transform: translateY(0) rotateX(6deg) rotateZ(-1deg); } 50% { transform: translateY(-22px) rotateX(6deg) rotateZ(1deg); } } .mavipro-hero-capsule__shell { position: absolute; inset: 0; transform-style: preserve-3d; } .mavipro-hero-capsule__half { position: absolute; left: 0; right: 0; height: 50%; background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 42%, rgba(59, 130, 246, 0.05)); border: 1px solid var(--mvh-glass-line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -30px 60px rgba(34, 211, 238, 0.10), 0 30px 80px rgba(0, 0, 0, 0.55); overflow: hidden; transition: transform 1.1s var(--mvh-ease-glass); will-change: transform; } .mavipro-hero-capsule__half--top { top: 0; border-radius: 130px 130px 22px 22px; } .mavipro-hero-capsule__half--bottom { bottom: 0; border-radius: 22px 22px 130px 130px; } .mavipro-hero-capsule__gloss { position: absolute; top: -20%; left: -30%; width: 60%; height: 140%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: rotate(8deg); filter: blur(6px); animation: mavipro-hero-sweep 6s ease-in-out infinite; } @keyframes mavipro-hero-sweep { 0%, 100% { transform: translateX(-40%) rotate(8deg); opacity: .35; } 50% { transform: translateX(220%) rotate(8deg); opacity: .8; } } .mavipro-hero-capsule__seam { position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, var(--mvh-glass-hi), transparent); z-index: 3; } .mavipro-hero-capsule__core { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%) translateZ(-40px); background: radial-gradient(circle, rgba(34, 211, 238, 0.55), rgba(59, 130, 246, 0.15) 55%, transparent 72%); filter: blur(14px); animation: mavipro-hero-core-breath 4s ease-in-out infinite; } @keyframes mavipro-hero-core-breath { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) translateZ(-40px) scale(1); } 50% { opacity: .9; transform: translate(-50%, -50%) translateZ(-40px) scale(1.15); } } .mavipro-hero-capsule.is-open .mavipro-hero-capsule__half--top { transform: translateY(-90px); } .mavipro-hero-capsule.is-open .mavipro-hero-capsule__half--bottom { transform: translateY(90px); } .mavipro-hero-capsule__floor { position: absolute; left: 50%; bottom: -70px; width: 240px; height: 40px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(34, 211, 238, 0.4), transparent 70%); filter: blur(16px); animation: mavipro-hero-floor-pulse 7s ease-in-out infinite 1.4s; } @keyframes mavipro-hero-floor-pulse { 0%, 100% { opacity: .55; transform: translateX(-50%) scaleX(1); } 50% { opacity: .35; transform: translateX(-50%) scaleX(0.82); } } .mavipro-hero-cards { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; } .mavipro-hero-card { position: absolute; left: 50%; top: 50%; width: 150px; padding: 1rem 1rem 1.1rem; border-radius: 20px; background: var(--mvh-glass-2); border: 1px solid var(--mvh-glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28); color: var(--mvh-white); transform: translate(-50%, -50%) translateY(calc(var(--i) * -6px)) translateZ(calc(var(--i) * 6px)) rotate(calc((var(--i) - 1.5) * 2deg)); transition: transform 1.1s var(--mvh-ease-glass), opacity .8s var(--mvh-ease-soft); opacity: 0; } .mavipro-hero-capsule.is-loaded .mavipro-hero-card { opacity: 1; animation: mavipro-hero-card-shuffle 6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.4s + 1.6s); } @keyframes mavipro-hero-card-shuffle { 0%, 100% { transform: translate(-50%, -50%) translateY(calc(var(--i) * -6px)) translateZ(calc(var(--i) * 6px)) rotate(calc((var(--i) - 1.5) * 2deg)); } 50% { transform: translate(-50%, -50%) translateY(calc(var(--i) * -6px - 8px)) translateZ(calc(var(--i) * 6px)) rotate(calc((var(--i) - 1.5) * 3.4deg)); } } .mavipro-hero-card__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: .7rem; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--mvh-glass-line); } .mavipro-hero-card__icon svg { width: 22px; height: 22px; } /* h2 (pas h3) depuis le 4 sept. 2026 : retour audit accessibilité, voir templates/accueil.php — sélecteur mis à jour en même temps, sinon ces titres perdent cette règle et retombent sur la taille par défaut du navigateur pour un h2 (bien plus grande), débordant de la carte (régression constatée le 5 sept. 2026 sur "Services"/"Contact"). */ .mavipro-hero-card h2 { font-family: var(--mvh-fd); font-size: 1rem; font-weight: 600; } .mavipro-hero-card p { font-size: .78rem; color: var(--mvh-text-mut); margin-top: .1rem; } .mavipro-hero-card--identite .mavipro-hero-card__icon { color: var(--mvh-cyan-soft); } .mavipro-hero-card--services .mavipro-hero-card__icon { color: var(--mvh-blue-hi); } .mavipro-hero-card--realisations .mavipro-hero-card__icon { color: #A5B4FC; } .mavipro-hero-card--contact .mavipro-hero-card__icon { color: var(--mvh-white); } .mavipro-hero-capsule.is-open .mavipro-hero-card { animation: none; pointer-events: auto; } .mavipro-hero-capsule.is-open .mavipro-hero-card--identite { transform: translate(-50%, -50%) translate(-165px, -120px) rotate(-6deg); } .mavipro-hero-capsule.is-open .mavipro-hero-card--services { transform: translate(-50%, -50%) translate(165px, -120px) rotate(6deg); } .mavipro-hero-capsule.is-open .mavipro-hero-card--realisations { transform: translate(-50%, -50%) translate(-165px, 120px) rotate(6deg); } .mavipro-hero-capsule.is-open .mavipro-hero-card--contact { transform: translate(-50%, -50%) translate(165px, 120px) rotate(-6deg); } @media (max-width: 520px) { .mavipro-hero-capsule { width: 200px; height: 340px; } .mavipro-hero-capsule__half--top { border-radius: 100px 100px 18px 18px; } .mavipro-hero-capsule__half--bottom { border-radius: 18px 18px 100px 100px; } .mavipro-hero-card { width: 120px; padding: .8rem; } .mavipro-hero-capsule.is-open .mavipro-hero-card--identite { transform: translate(-50%, -50%) translate(-95px, -140px) rotate(-6deg); } .mavipro-hero-capsule.is-open .mavipro-hero-card--services { transform: translate(-50%, -50%) translate(95px, -140px) rotate(6deg); } .mavipro-hero-capsule.is-open .mavipro-hero-card--realisations { transform: translate(-50%, -50%) translate(-95px, 140px) rotate(6deg); } .mavipro-hero-capsule.is-open .mavipro-hero-card--contact { transform: translate(-50%, -50%) translate(95px, 140px) rotate(-6deg); } } .mavipro-home-sec { padding: clamp(4rem, 9vw, 7rem) 0; } .mavipro-home-shead { max-width: 640px; margin: 0 auto 3rem; text-align: center; } .mavipro-home-shead .mavipro-home-section-lead { margin-left: auto; margin-right: auto; } /* --- Pourquoi --- */ .mavipro-home-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1rem; } @media (max-width: 820px) { .mavipro-home-why__grid { grid-template-columns: 1fr; } } .mavipro-home-why__cell { background: var(--mvh-card-bg); border: 1px solid var(--mvh-border); border-radius: 18px; padding: 2rem 1.7rem; } .mavipro-home-why__num { font-family: var(--mvh-fd); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mvh-cyan-soft); display: block; } .mavipro-home-why__cell h3 { font-family: var(--mvh-fd); font-weight: 600; font-size: 1.25rem; color: var(--mvh-cyan-soft); margin: .3rem 0 .7rem; } .mavipro-home-why__cell p { color: var(--mvh-text-mut); font-weight: 300; font-size: .95rem; } /* --- Exemple mini-site (diaporama) --- */ .mavipro-home-minisite-section { padding: clamp(4rem, 9vw, 7rem) 48px; max-width: 1200px; margin: 0 auto; } @media (max-width: 768px) { .mavipro-home-minisite-section { padding: 60px 24px; } } .mavipro-home-minisite-demo { border-radius: 16px; overflow: hidden; border: 1px solid var(--mvh-border); background: #0d1420; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5); } .mavipro-home-minisite-topbar { background: #070b14; border-bottom: 1px solid var(--mvh-border); padding: 12px 20px; display: flex; align-items: center; gap: 12px; } .mavipro-home-topbar-dots { display: flex; gap: 6px; } .mavipro-home-topbar-dots span { width: 10px; height: 10px; border-radius: 50%; } .mavipro-home-topbar-url { flex: 1; background: rgba(255, 255, 255, 0.06); border-radius: 6px; padding: 5px 12px; font-size: .75rem; color: var(--mvh-grey); font-family: monospace; text-align: center; } /* Vraie Capsule embarquée (iframe sur single-capsule.php) : la hauteur fixe donne à la Capsule un vrai budget de viewport pour son 100vh/88vh interne — assez large (1100px dispo dans .mavipro-home-minisite-section) pour déclencher son propre rendu desktop 2 colonnes. */ .mavipro-home-minisite-frame { width: 100%; height: 640px; background: #08090C; } .mavipro-home-minisite-frame iframe { width: 100%; height: 100%; border: 0; display: block; } /* En dessous de 917px, la Capsule embarquée bascule sur son propre rendu mobile (zéro-scroll) : le cadre fait `écran − 96px` (marges fixes de la section), et jusqu'à 916px d'écran ça reste ≤ 820px, le seuil mobile de la Capsule (capsule.css, max-width:820px, inclusif). À 917px et au-delà, le cadre dépasse 820px, la Capsule bascule sur son rendu desktop 2 colonnes, pour lequel les 640px de la règle de base conviennent (inchangé au-delà de cette plage). Une seule hauteur fixe pour toute la plage ≤916px (téléphones ET tablettes en portrait), pas un aspect-ratio : la Capsule interne plafonne de toute façon sa propre carte à 760px (.capsule, capsule.css, min(86vh,760px)) — au-delà d'un certain point, donner plus de hauteur au cadre ne sert plus à rien, juste du fond uni invisible (#08090C, strictement la même couleur des deux côtés). Une première version en aspect-ratio 9/22 (30-31 juillet 2026, correctif Pixel 8) grandissait avec la largeur du cadre alors que le vrai besoin est plafonné — elle donnait déjà 950-1050px sur la plupart des vrais téléphones (bien au-delà du nécessaire), d'où un rendu perçu comme trop étiré en conditions réelles (retour propriétaire, 1er août 2026). 980px = 86vh de 843px, soit ~80px de marge au-dessus du plafond de 760px — volontairement plus large que le minimum strict (884px de cadre) pour absorber un profil pro rempli au maximum (8 services, présentation longue, horaires complets sur 7 jours), où la théorie des limites de caractères peut s'écarter légèrement du rendu réel. */ @media (max-width: 916px) { .mavipro-home-minisite-frame { height: 980px; } } /* --- Parcours (timeline) --- */ .mavipro-home-timeline { list-style: none; position: relative; max-width: 900px; margin: 0 auto; } .mavipro-home-timeline::before { content: ""; position: absolute; left: 34px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(var(--mvh-cyan), var(--mvh-blue), transparent); opacity: .5; } .mavipro-home-tl { display: flex; gap: 2rem; align-items: flex-start; padding: 1.6rem 0; position: relative; } .mavipro-home-tl__index { flex: 0 0 auto; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mvh-fd); font-size: 1.25rem; font-weight: 600; color: var(--mvh-white); background: var(--mvh-glass-2); border: 1px solid var(--mvh-glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 6px var(--mvh-bg), 0 10px 30px rgba(0, 0, 0, 0.4); position: relative; z-index: 2; transition: transform .5s var(--mvh-ease-soft), box-shadow .5s var(--mvh-ease-soft), color .5s; } .mavipro-home-tl:hover .mavipro-home-tl__index { transform: scale(1.08); color: var(--mvh-cyan-soft); box-shadow: 0 0 0 6px var(--mvh-bg), 0 0 40px rgba(34, 211, 238, 0.4); } .mavipro-home-tl__body { padding-top: .6rem; } .mavipro-home-tl__body h3 { font-family: var(--mvh-fd); font-size: 1.5rem; font-weight: 500; color: var(--mvh-white); letter-spacing: -0.01em; margin-bottom: .4rem; } .mavipro-home-tl__body p { color: var(--mvh-text-mut); font-weight: 300; max-width: 48ch; font-size: .95rem; } @media (max-width: 520px) { .mavipro-home-tl { gap: 1.2rem; } .mavipro-home-tl__index { width: 56px; height: 56px; font-size: 1.05rem; } } /* --- Tarifs --- */ .mavipro-home-pricing-card { background: var(--mvh-card-bg); border: 1px solid var(--mvh-blue); border-radius: 20px; padding: 2.6rem 2.2rem; position: relative; background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, var(--mvh-card-bg) 100%); box-shadow: 0 0 0 1px var(--mvh-cyan), 0 24px 70px rgba(34, 211, 238, 0.14); } .mavipro-home-featured-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--mvh-cyan); color: #04121b; font-family: var(--mvh-fd); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 16px; border-radius: 100px; } .mavipro-home-pricing-tier { font-family: var(--mvh-fd); font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mvh-cyan-soft); margin-bottom: 12px; } .mavipro-home-pricing-price { font-family: var(--mvh-fd); font-size: 3rem; font-weight: 700; line-height: 1; color: #fff; letter-spacing: -0.02em; } .mavipro-home-pricing-price span { font-size: 1rem; font-weight: 400; color: var(--mvh-grey); } .mavipro-home-pricing-monthly { font-family: var(--mvh-fb); font-size: .82rem; color: var(--mvh-cyan-soft); margin-top: 6px; } .mavipro-home-pricing-desc { color: var(--mvh-grey); font-size: .9rem; margin: 10px 0 26px; line-height: 1.6; } .mavipro-home-pricing-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; padding: 0; } .mavipro-home-pricing-features li { font-size: .95rem; display: flex; gap: 12px; align-items: flex-start; color: var(--mvh-text); } .mavipro-home-pricing-features li::before { content: '✓'; color: var(--mvh-cyan); font-weight: 700; flex-shrink: 0; } .mavipro-home-pricing-card .mavipro-home-btn { width: 100%; justify-content: center; } /* --- CTA --- */ .mavipro-home-cta { text-align: center; padding: clamp(4rem, 10vw, 8rem) 0; position: relative; } .mavipro-home-cta__glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(34, 211, 238, 0.18), transparent 70%); filter: blur(40px); pointer-events: none; } .mavipro-home-cta__title { font-family: var(--mvh-fd); font-weight: 700; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; color: #fff; position: relative; } .mavipro-home-cta__sub { color: var(--mvh-text-mut); font-weight: 300; max-width: 44ch; margin: 1.2rem auto 2rem; position: relative; } /* --- Contact --- */ .mavipro-home-contact-section { padding: clamp(4rem, 9vw, 7rem) 0; background: var(--mvh-card-bg); border-top: 1px solid var(--mvh-border); border-bottom: 1px solid var(--mvh-border); } .mavipro-home-contact-form { max-width: 640px; margin: 0 auto; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--mvh-border); border-radius: 16px; padding: 36px; position: relative; } .mavipro-home-section-label { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mvh-fd); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mvh-cyan-soft); } .mavipro-home-form-group { margin-bottom: 18px; } .mavipro-home-form-group label { display: block; font-size: .8rem; font-weight: 600; color: var(--mvh-grey); margin-bottom: 8px; letter-spacing: .04em; } .mavipro-home-form-group input, .mavipro-home-form-group textarea, .mavipro-home-form-group select { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--mvh-border); border-radius: 8px; padding: 12px 16px; color: var(--mvh-white); font-family: var(--mvh-fb); font-size: .92rem; outline: none; transition: border-color .2s; } .mavipro-home-form-group input:focus, .mavipro-home-form-group textarea:focus, .mavipro-home-form-group select:focus { outline: none; box-shadow: none; border-color: var(--mvh-blue); } /* Safari/Chrome dessinent leur propre halo de focus sur