/* DeveloppIA : site vitrine. Style épuré, grands titres, effets doux. Règles : tout est lisible sans JavaScript ; on n'anime que l'opacité et les transformations ; le masquage initial ne s'applique que sous html.reveal-actif (posée par le script d'en-tête, retirée après 5 s). */ @font-face { font-family: "Geist"; src: url("polices/Geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --police: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; --noir: #0B0B10; --noir-2: #131320; --encre: #1D1D1F; --gris: #6E6E73; --gris-clair: #F5F5F7; --blanc: #FFFFFF; --ligne: rgba(0, 0, 0, .08); --ligne-clair: rgba(255, 255, 255, .12); --bleu: #4F7CFF; --bleu-texte: #3661E0; /* le même bleu, assez foncé pour un petit texte sur blanc (contraste 5,3) */ --violet: #8B5CF6; --cyan: #22D3EE; --degrade: linear-gradient(100deg, #4F7CFF 0%, #8B5CF6 50%, #22D3EE 100%); --courbe: cubic-bezier(.22, 1, .36, 1); --duree: .9s; --section: clamp(5rem, 11vw, 9.5rem); --rayon: 22px; --largeur: 1180px; } * { box-sizing: border-box; } /* scroll-padding-top : la barre est fixe et haute de 64 px ; sans cette marge, tout lien d'ancre (« Accueil », « Exemples », les questions, les titres des guides) amenait le titre visé sous la barre. */ html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--police); font-size: 17px; line-height: 1.55; color: var(--encre); background: var(--blanc); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } picture { display: block; height: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } b { font-weight: 600; } .int { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; } .pc { display: none; } @media (min-width: 900px) { .pc { display: inline; } } .saut { position: absolute; left: -999px; top: 0; background: var(--noir); color: #fff; padding: .6rem 1rem; z-index: 200; } .saut:focus { left: 1rem; top: 1rem; } /* ---------- Typographie commune ---------- */ .sur { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #2F5FE8; margin-bottom: 1.1rem; } .sur--clair { color: var(--cyan); } .sur--puces { margin-top: 2rem; margin-bottom: .8rem; } .titre { font-size: clamp(2.1rem, 5vw, 3.9rem); max-width: 22ch; margin-bottom: 1.4rem; } .titre--clair { color: #fff; } .texte { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--gris); max-width: 60ch; } .texte + .texte { margin-top: 1rem; } .texte--centre { margin-inline: auto; text-align: center; } .texte--clair { color: rgba(255, 255, 255, .72); } .degrade { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; } html.anime .degrade { animation: degrade-glisse 6s ease-in-out infinite alternate; } @keyframes degrade-glisse { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } /* Sections centrées (titre au milieu) */ .constat .int > .sur, .methode > .int:first-child > .sur, .offre .sur, .realisations > .int:first-child > .sur, .equipe > .int:first-child > .sur, .parcours .sur { text-align: center; } .constat .titre, .methode > .int:first-child > .titre, .offre .titre, .realisations > .int:first-child > .titre, .equipe > .int:first-child > .titre, .parcours .titre { margin-inline: auto; text-align: center; max-width: 26ch; } .souligne { color: var(--encre); font-weight: 600; background: linear-gradient(transparent 62%, rgba(79,124,255,.28) 62%, rgba(139,92,246,.28)); padding: 0 .12em; border-radius: 3px; } /* ---------- Boutons ---------- */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: 1rem; transition: transform .5s var(--courbe), box-shadow .5s var(--courbe), background .3s, color .3s; white-space: nowrap; } .bouton--plein { background: var(--encre); color: #fff; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); } .bouton--plein:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55); } .hero .bouton--plein, .parcours .bouton--plein, .contact .bouton--plein { background: #fff; color: var(--encre); box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 12px 40px -12px rgba(79, 124, 255, .5); } .hero .bouton--plein:hover, .parcours .bouton--plein:hover, .contact .bouton--plein:hover { box-shadow: 0 0 40px -6px rgba(139, 92, 246, .55); } .bouton--grand { padding: 1.15rem 2rem; font-size: 1.08rem; } .bouton--lien { padding-inline: .6rem; color: rgba(255, 255, 255, .8); } .bouton--lien:hover { color: #fff; } .bouton--contour { border: 1px solid rgba(255, 255, 255, .28); color: #fff; } .bouton--contour:hover { background: rgba(255, 255, 255, .08); } .bouton--nav { padding: .6rem 1.1rem; font-size: .9rem; background: var(--encre); color: #fff; } .bouton--nav:hover { background: #000; } /* ---------- Navigation ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .4s, border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; color: #fff; } .nav--solide { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-color: var(--ligne); color: var(--encre); } .nav-int { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; height: 64px; display: flex; align-items: center; justify-content: space-between; } .marque { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; } .marque-logo { width: 30px; height: 30px; } .nav-liens { display: none; align-items: center; gap: 1.35rem; font-size: .95rem; font-weight: 500; } .nav-liens a { opacity: .8; transition: opacity .3s; } .nav-liens > a, .nav-groupe-b { white-space: nowrap; } .nav-liens a:hover { opacity: 1; } .nav-liens .bouton--nav { opacity: 1; } /* Le bouton passe en blanc seulement quand la barre est transparente au-dessus du grand visuel sombre. Menu du téléphone ouvert, la barre devient blanche : sans le second :not, le bouton restait blanc sur blanc et devenait invisible. */ .nav:not(.nav--solide):not(.menu-ouvert) .bouton--nav { background: #fff; color: var(--encre); } .burger { display: grid; place-content: center; gap: 5px; background: none; border: 0; padding: 0; width: 44px; height: 44px; cursor: pointer; } .burger span { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .4s var(--courbe), opacity .3s; } .burger[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); } .nav-liens.ouvert { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; /* Absolu par rapport à la barre (elle-même fixe) : un « fixed » ici se ferait piéger par le backdrop-filter de la barre et perdrait sa hauteur et son fond. */ position: absolute; top: 64px; left: 0; right: 0; height: calc(100vh - 64px); height: calc(100svh - 64px); padding: 2rem 1.25rem; overflow-y: auto; background: #fff; color: var(--encre); font-size: 1.3rem; } .nav.menu-ouvert { background: #fff; color: var(--encre); border-color: var(--ligne); -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---------- Sous-menu « Prestations » ---------- Les liens sont dans le HTML servi, jamais posés par script : les robots des IA, qui ne lisent pas le JavaScript, les voient. Le panneau s'ouvre au survol, à la tabulation (:focus-within) et au clic (aria-expanded), donc il fonctionne aussi sans JavaScript et au clavier. Sur téléphone, il est simplement déplié. */ .nav-groupe { position: relative; } .nav-groupe-b { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; opacity: .8; transition: opacity .3s; } .nav-groupe-b:hover, .nav-groupe:focus-within .nav-groupe-b { opacity: 1; } .nav-chevron { transition: transform .3s var(--courbe); } .nav-groupe-b[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); } .nav-panneau { position: absolute; top: calc(100% + .9rem); left: -1rem; z-index: 60; width: 21.5rem; padding: .55rem; display: grid; gap: 1px; background: #fff; color: var(--encre); border: 1px solid var(--ligne); border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(11, 11, 16, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--courbe), transform .22s var(--courbe), visibility .22s; } .nav-groupe:hover .nav-panneau, .nav-groupe:focus-within .nav-panneau, .nav-groupe-b[aria-expanded="true"] + .nav-panneau { opacity: 1; visibility: visible; transform: translateY(0); } .nav-panneau .nav-p { display: grid; gap: .1rem; padding: .6rem .75rem; border-radius: 11px; opacity: 1; } .nav-panneau .nav-p:hover, .nav-panneau .nav-p:focus-visible { background: var(--gris-clair); } .nav-p-nom { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; } .nav-p-sous { font-size: .8rem; color: var(--gris); font-weight: 400; } .nav-panneau-titre { margin: .5rem .75rem .15rem; padding-top: .6rem; border-top: 1px solid var(--ligne); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); } .nav-panneau--court { width: 19rem; } .nav-panneau .nav-o { padding: .45rem .75rem; border-radius: 11px; font-size: .9rem; opacity: 1; } .nav-panneau .nav-o:hover, .nav-panneau .nav-o:focus-visible { background: var(--gris-clair); } /* Le menu complet demande environ 860 px avec le logo : en dessous de 1 040 px de fenêtre il se serrait, « Nos outils » passait sur deux lignes et le bouton touchait le bord. On garde donc le menu du téléphone jusque là. */ @media (min-width: 1040px) { .nav-liens { display: flex; } .burger { display: none; } } /* Sur téléphone, le menu occupe l'écran : le panneau y est déplié, sans carte. Le nom du groupe reste affiché, en petite étiquette : sans lui, les douze liens formaient une liste plate où « Accueil » et « Exemples » passaient pour des intertitres. */ @media (max-width: 1039px) { .nav-liens.ouvert { gap: 1.15rem; } .nav-liens.ouvert > a { opacity: 1; font-weight: 500; } .nav-liens.ouvert .nav-groupe { width: 100%; display: grid; gap: .85rem; } .nav-liens.ouvert .nav-groupe-b { display: block; cursor: default; opacity: 1; text-align: left; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); } .nav-liens.ouvert .nav-chevron { display: none; } .nav-liens.ouvert .nav-panneau { position: static; width: 100%; padding: 0; gap: 1.15rem; background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .nav-liens.ouvert .nav-panneau .nav-p { padding: 0; } .nav-liens.ouvert .nav-p-nom { font-size: 1.3rem; font-weight: 500; } .nav-liens.ouvert .nav-p-sous { display: none; } .nav-liens.ouvert .nav-panneau-titre { margin: .3rem 0 0; font-size: .7rem; } .nav-liens.ouvert .nav-panneau .nav-o { padding: 0; font-size: 1.3rem; } } /* ---------- Ouverture ---------- */ .hero { position: relative; min-height: 100svh; display: grid; align-items: center; background: var(--noir); color: #fff; overflow: hidden; padding: 7.5rem 0 4rem; } .hero-fond { position: absolute; inset: 0; pointer-events: none; } .orbe { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; } .orbe-1 { width: 55vw; height: 55vw; left: -12vw; top: -18vw; background: radial-gradient(circle, #4F7CFF, transparent 62%); } .orbe-2 { width: 50vw; height: 50vw; right: -14vw; top: 8vw; background: radial-gradient(circle, #8B5CF6, transparent 62%); } .orbe-3 { width: 40vw; height: 40vw; left: 30vw; bottom: -20vw; background: radial-gradient(circle, #22D3EE, transparent 62%); opacity: .35; } html.anime .orbe-1 { animation: orbe-a 18s ease-in-out infinite alternate; } html.anime .orbe-2 { animation: orbe-b 22s ease-in-out infinite alternate; } html.anime .orbe-3 { animation: orbe-c 26s ease-in-out infinite alternate; } @keyframes orbe-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(12vw, 8vw) scale(1.15); } } @keyframes orbe-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(-10vw, 10vw) scale(.9); } } @keyframes orbe-c { from { transform: translate(0, 0); } to { transform: translate(-14vw, -8vw); } } #etoiles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; } .grille { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%); } .hero-int { position: relative; width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; text-align: center; } .hero-sur { font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 1.4rem; } .hero-titre .degrade { white-space: nowrap; } .hero-titre { font-size: clamp(2.5rem, 7.2vw, 5.6rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.0; margin-inline: auto; } .hero-texte { font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: rgba(255, 255, 255, .72); max-width: 58ch; margin: 1.6rem auto 0; } .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; justify-content: center; margin-top: 2.2rem; } /* Le texte d'accueil n'est JAMAIS caché : c'est lui que Google mesure en LCP. Le titre, sa surtitre et son paragraphe montent sans passer par opacité 0 ; seuls les boutons et le faux appareil, qui ne comptent pas dans le LCP, gardent le fondu. Avant : le h1 partait d'opacité 0 avec un retard de 1,99 s à la première visite, donc aucun LCP possible avant deux secondes pour un serveur qui répond en 0,17 s. */ html.reveal-actif [data-hero] { animation: hero-monte 1.3s var(--courbe) both; animation-delay: calc(.2s + var(--i, 0) * .14s); } @keyframes hero-monte { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } html.reveal-actif .hero-sur[data-hero], html.reveal-actif .hero-titre[data-hero], html.reveal-actif .hero-texte[data-hero] { animation-name: hero-monte-visible; } @keyframes hero-monte-visible { from { transform: translateY(20px); } to { transform: none; } } /* Le faux appareil : une réponse d'IA qui s'écrit */ .hero-appareil { margin: 3.5rem auto 0; max-width: 640px; text-align: left; border-radius: 24px; padding: 1px; background: linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,.06) 40%, rgba(139,92,246,.35)); box-shadow: 0 40px 80px -30px rgba(79, 124, 255, .35), 0 0 0 1px rgba(255,255,255,.03) inset; transform-style: preserve-3d; } .hero-appareil > * { background: rgba(14, 14, 22, .85); } .appareil-barre { display: flex; gap: 6px; padding: 12px 16px; border-radius: 23px 23px 0 0; border-bottom: 1px solid rgba(255,255,255,.07); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .appareil-barre span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); } .appareil-corps { padding: 1.2rem 1.25rem 1.35rem; border-radius: 0 0 23px 23px; display: grid; gap: .9rem; } .bulle { border-radius: 16px; padding: .85rem 1rem; font-size: .98rem; line-height: 1.5; } .bulle-qui { display: flex; align-items: center; gap: .45rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .35rem; font-weight: 600; } .bulle--patient { background: rgba(255,255,255,.07); margin-left: 16%; margin-right: 0; border-bottom-right-radius: 5px; text-align: right; } .bulle--patient .bulle-qui { justify-content: flex-end; } .bulle--ia { background: linear-gradient(135deg, rgba(79,124,255,.16), rgba(139,92,246,.12)); border: 1px solid rgba(139,92,246,.25); margin-left: 0; margin-right: 10%; border-bottom-left-radius: 5px; } .bulle--ia p { min-height: 3.1em; } .pastille-ia { width: 8px; height: 8px; border-radius: 50%; background: var(--degrade); display: inline-block; box-shadow: 0 0 10px rgba(139,92,246,.8); } .bulle-source { display: flex; align-items: center; gap: .45rem; margin-top: .75rem; font-size: .82rem; color: rgba(255,255,255,.65); } .source-puce { width: 18px; height: 18px; border-radius: 6px; background: var(--degrade); display: inline-block; flex: none; } .source-sep { opacity: .5; } .curseur { display: inline-block; width: 2px; height: 1em; background: var(--cyan); vertical-align: -.15em; margin-left: 2px; animation: clignote 1s steps(2) infinite; } @keyframes clignote { to { opacity: 0; } } /* ---------- Bandeau défilant ---------- */ .bandeau { background: var(--noir); color: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); overflow: hidden; padding: 1.1rem 0; } .bandeau-piste { display: flex; width: max-content; font-weight: 500; letter-spacing: .02em; font-size: 1.05rem; } /* L'espace est porté par chaque nom (pas de gap) : un groupe mesure exactement une période, la boucle ne saute pas. */ .bandeau-groupe { display: flex; flex-shrink: 0; } .bandeau-piste span { white-space: nowrap; position: relative; padding-left: 1.4rem; margin-right: 3.5rem; } .bandeau-piste span::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--degrade); } html.anime .bandeau-piste { animation: defile 184s linear infinite; } @keyframes defile { to { transform: translateX(-50%); } } /* ---------- Le constat ---------- */ .constat { padding: var(--section) 0; } .chiffres { display: grid; gap: 1rem; margin-top: 3rem; } .chiffre { background: var(--gris-clair); border-radius: var(--rayon); padding: 2rem 1.7rem; } .chiffre-nb { font-size: clamp(2.4rem, 4.5vw, 3.6rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; } .chiffre-nb--date { font-size: clamp(1.7rem, 2.9vw, 2.3rem); line-height: 1.08; } .chiffre-texte { margin-top: .9rem; font-size: 1.02rem; color: var(--encre); } .chiffre-source { margin-top: .8rem; font-size: .8rem; color: var(--gris); } @media (min-width: 700px) { .chiffres { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .chiffres { grid-template-columns: repeat(4, 1fr); } } /* ---------- La voie unique ---------- */ .voie { padding: var(--section) 0; background: var(--gris-clair); } .voie-grille { display: grid; gap: 3rem; align-items: center; } .puces { display: grid; gap: .9rem; margin-top: 1.8rem; } .puces li { position: relative; padding-left: 1.8rem; color: var(--gris); } .puces li b { color: var(--encre); } .puces li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--degrade); } .voie-image { position: relative; margin: 0; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.35); } .voie-image img { width: 100%; aspect-ratio: 4/5; object-fit: cover; } .voie-etiquette { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 16px; padding: .9rem 1.1rem; display: grid; gap: .15rem; } .etiquette-titre { font-weight: 600; } .etiquette-sous { color: var(--gris); font-size: .9rem; } @media (min-width: 900px) { .voie-grille { grid-template-columns: 1.15fr .85fr; gap: 5rem; } /* width: 100% indispensable avec justify-self : sans largeur définie, le cadre se dimensionne sur son contenu et reste à 0 tant que la photo n'est pas chargée (colonne vide, puis saut de mise en page). */ .voie-image { width: 100%; max-width: 440px; justify-self: end; } } /* ---------- Manifeste ---------- */ .manifeste { padding: var(--section) 0; background: var(--noir); color: #fff; } .manifeste-texte { font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.22; max-width: 24ch; margin-inline: auto; text-align: center; } .manifeste-texte span { transition: opacity .5s ease, color .5s ease; } html.manifeste-actif .manifeste-texte span { opacity: .38; } html.manifeste-actif .manifeste-texte span[data-allume] { opacity: 1; } /* ---------- La méthode ---------- */ .methode { padding: var(--section) 0; } .methode-grille { display: grid; gap: 3rem; margin-top: 4rem; } .methode-etapes { display: grid; gap: 2.2rem; } .etape { padding: 1.6rem 0 0; border-top: 1px solid var(--ligne); transition: opacity .5s; } .etape-nb { font-size: .85rem; font-weight: 600; letter-spacing: .1em; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; } .etape h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: .5rem 0 .7rem; } .etape p { color: var(--gris); max-width: 50ch; } .methode-visuels { display: none; } .methode-cadre { position: sticky; top: 100px; height: min(560px, calc(100vh - 140px)); border-radius: var(--rayon); background: linear-gradient(160deg, #F5F5F7, #EAEAF2); overflow: hidden; border: 1px solid var(--ligne); box-shadow: 0 40px 100px -50px rgba(79, 124, 255, .35); } .methode-visuel { position: absolute; inset: 0; padding: 2rem; display: grid; align-content: center; gap: 1rem; opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .7s var(--courbe), transform .7s var(--courbe); } .methode-visuel.actif { opacity: 1; transform: none; } @media (min-width: 960px) { .methode-grille { grid-template-columns: 1fr 1.05fr; gap: 5rem; align-items: stretch; } .methode-etapes { gap: 0; } .etape { padding: 3.2rem 0; min-height: 44vh; display: grid; align-content: center; } .etape:first-child { border-top: 0; padding-top: 0; } .etape.dim { opacity: .35; } .methode-visuels { display: block; align-self: stretch; } } @media (min-width: 960px) and (max-width: 1200px) { .methode-visuel { padding: 1.4rem; } } /* Visuel 01 : diagnostic */ .visuel-diag, .visuel-site, .visuel-carte, .visuel-ia, .visuel-suivi { font-size: .95rem; } .diag-tete, .suivi-tete { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); } .diag-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .jauge { position: relative; background: #fff; border-radius: 18px; padding: 1.2rem 1rem 1rem; text-align: center; box-shadow: 0 10px 30px -20px rgba(0,0,0,.3); } .jauge svg { width: 110px; height: 110px; margin-inline: auto; display: block; transform: rotate(-90deg); } .jauge-fond { fill: none; stroke: #EDEDF2; stroke-width: 10; } .jauge-trait { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: calc(326.7 - 326.7 * var(--val) / 100); transition: stroke-dashoffset 1.6s var(--courbe); } .methode-visuel:not(.actif) .jauge-trait { stroke-dashoffset: 326.7; } .jauge-trait--google { stroke: #FF7A59; } .jauge-trait--ia { stroke: #8B5CF6; } .jauge-nb { position: absolute; top: 3.5rem; left: 0; right: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; } .jauge-nb small { font-size: .8rem; color: var(--gris); font-weight: 500; } .jauge-nom { margin-top: .4rem; font-size: .85rem; color: var(--gris); } .diag-liste { display: grid; gap: .45rem; } .diag-liste li { background: #fff; border-radius: 10px; padding: .55rem .8rem .55rem 2rem; position: relative; font-size: .9rem; } .diag-liste li::before { content: ""; position: absolute; left: .8rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; } .diag-liste .rouge::before { background: #FF3B30; } .diag-liste .orange::before { background: #FF9500; } /* Visuel 02 : site */ .visuel-site { background: #fff; margin: 2rem; border-radius: 16px; inset: 0; padding: 1.2rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); align-content: start; } .site-nav { display: flex; align-items: center; gap: .6rem; } .site-nav span { height: 8px; width: 34px; border-radius: 4px; background: #E5E5EA; } .site-logo { width: 22px !important; height: 22px !important; border-radius: 7px !important; background: var(--degrade) !important; } .site-btn { margin-left: auto; width: 60px !important; height: 20px !important; border-radius: 10px !important; background: var(--encre) !important; } .site-hero { margin-top: 1.4rem; display: grid; gap: .55rem; } .site-h1 { height: 20px; width: 70%; border-radius: 6px; background: #1D1D1F; } .site-h1--court { width: 45%; } .site-p { height: 9px; width: 60%; border-radius: 4px; background: #E5E5EA; margin-top: .3rem; } .site-cta { height: 26px; width: 150px; border-radius: 13px; background: var(--degrade); margin-top: .4rem; } .site-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1.3rem; } .site-cartes div { aspect-ratio: 4/3; border-radius: 10px; background: linear-gradient(160deg, #F0F0F5, #E1E1EA); } .site-prix { margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--ligne); border-radius: 10px; padding: .6rem .8rem; font-size: .85rem; } .site-prix-nb { font-weight: 600; } /* Visuel 03 : carte */ .carte-recherche { display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: 999px; padding: .6rem 1rem; font-size: .9rem; box-shadow: 0 8px 24px -14px rgba(0,0,0,.3); } .carte-loupe { width: 14px; height: 14px; border: 2px solid var(--gris); border-radius: 50%; position: relative; } .carte-loupe::after { content: ""; position: absolute; width: 2px; height: 6px; background: var(--gris); right: -4px; bottom: -5px; transform: rotate(-45deg); } .carte-fond { position: relative; height: 170px; border-radius: 14px; background-color: #E8EEF3; background-image: linear-gradient(rgba(255,255,255,.7) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.7) 2px, transparent 2px); background-size: 48px 48px; } .carte-pin { position: absolute; display: flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; } .carte-pin i { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #C7C7CC; display: block; } .carte-pin--vous { left: 42%; top: 40%; } .carte-pin--vous i { background: var(--degrade); width: 20px; height: 20px; box-shadow: 0 0 0 6px rgba(79,124,255,.18); } .methode-visuel.actif .carte-pin--vous { animation: pin-saute 1.4s var(--courbe) .4s both; } @keyframes pin-saute { 0% { transform: translateY(-40px); opacity: 0; } 60% { transform: translateY(6px); opacity: 1; } 100% { transform: none; } } .carte-liste { display: grid; gap: .4rem; } .carte-liste li { display: flex; gap: .5rem; align-items: center; background: #fff; border-radius: 10px; padding: .55rem .8rem; font-size: .9rem; } .carte-liste li span { margin-left: auto; color: var(--gris); font-size: .8rem; } .carte-vous { border: 1px solid rgba(79,124,255,.4); box-shadow: 0 0 0 3px rgba(79,124,255,.12); } /* Visuel 04 : IA */ .ia-tete { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); } .ia-q { background: #fff; border-radius: 14px; padding: .8rem 1rem; font-weight: 500; } .ia-r { background: linear-gradient(135deg, rgba(79,124,255,.10), rgba(139,92,246,.10)); border: 1px solid rgba(139,92,246,.25); border-radius: 14px; padding: 1rem; display: grid; gap: .55rem; } .ia-ligne { height: 10px; border-radius: 5px; background: rgba(29,29,31,.14); width: 92%; } .ia-ligne--l { width: 100%; } .ia-ligne--c { width: 60%; } .ia-cite { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font-weight: 600; font-size: .9rem; } .ia-cite-src { margin-left: auto; font-weight: 400; font-size: .8rem; color: var(--gris); } .ia-signaux { display: flex; flex-wrap: wrap; gap: .4rem; } .ia-signaux span { font-size: .78rem; background: #fff; border-radius: 999px; padding: .3rem .7rem; border: 1px solid var(--ligne); } .methode-visuel.actif .ia-signaux span { animation: monte-doux .8s var(--courbe) both; } .methode-visuel.actif .ia-signaux span:nth-child(2) { animation-delay: .1s; } .methode-visuel.actif .ia-signaux span:nth-child(3) { animation-delay: .2s; } .methode-visuel.actif .ia-signaux span:nth-child(4) { animation-delay: .3s; } @keyframes monte-doux { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Visuel 05 : suivi */ .suivi-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; } .suivi-kpi div { background: #fff; border-radius: 14px; padding: 1rem .9rem; display: grid; gap: .2rem; } .suivi-kpi b { font-size: 1.7rem; letter-spacing: -.03em; line-height: 1; } .suivi-kpi sup { font-size: .5em; } .suivi-kpi span { font-size: .78rem; color: var(--gris); } .suivi-courbe { width: 100%; height: 130px; background: #fff; border-radius: 14px; padding: .6rem; } .suivi-trait { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 2s var(--courbe) .3s; } .suivi-aire { opacity: 0; transition: opacity 1.2s ease 1s; } .methode-visuel.actif .suivi-trait { stroke-dashoffset: 0; } .methode-visuel.actif .suivi-aire { opacity: 1; } /* ---------- Ce que vous recevez (sombre) ---------- */ .offre { padding: var(--section) 0; background: var(--noir); color: #fff; position: relative; overflow: hidden; } .offre::before { content: ""; position: absolute; width: 70vw; height: 70vw; left: 50%; top: -35vw; transform: translateX(-50%); background: radial-gradient(circle, rgba(139,92,246,.28), transparent 60%); filter: blur(40px); pointer-events: none; } .cartes { position: relative; display: grid; gap: 1rem; margin-top: 3.5rem; } .carte { position: relative; border-radius: var(--rayon); padding: 1.9rem 1.7rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); overflow: hidden; transition: border-color .4s, transform .6s var(--courbe); } .carte::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(79,124,255,.22), transparent 45%); } .carte:hover { border-color: rgba(255,255,255,.2); transform: translateY(-3px); } .carte:hover::before { opacity: 1; } .carte-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, rgba(79,124,255,.25), rgba(139,92,246,.25)); border: 1px solid rgba(255,255,255,.12); margin-bottom: 1.3rem; } .carte-icone svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .carte h3 { font-size: 1.25rem; margin-bottom: .6rem; letter-spacing: -.02em; } .carte p { color: rgba(255,255,255,.66); font-size: .98rem; } .carte-lien { display: inline-block; margin-top: .9rem; font-weight: 600; font-size: .95rem; color: #fff; text-decoration: none; } .carte-lien:hover, .carte-lien:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .carte--large { background: linear-gradient(135deg, rgba(79,124,255,.16), rgba(139,92,246,.14), rgba(34,211,238,.10)); border-color: rgba(139,92,246,.35); } @media (min-width: 700px) { .cartes { grid-template-columns: 1fr 1fr; } .carte--large { grid-column: span 2; } } @media (min-width: 1000px) { .cartes { grid-template-columns: repeat(3, 1fr); } .carte--large { grid-column: span 3; display: grid; grid-template-columns: auto 1fr; gap: 0 1.6rem; align-items: center; } .carte--large .carte-icone { grid-row: span 2; margin: 0; } .carte--large h3 { font-size: 1.5rem; } .carte--large p { max-width: 70ch; } } /* ---------- Bouton WhatsApp ---------- Discret : petit, en bas à droite, il ne recouvre jamais un bouton d'appel à l'action. Le libellé n'apparaît qu'au survol et à la tabulation. */ .wa { position: fixed; right: clamp(.9rem, 2.5vw, 1.6rem); bottom: clamp(.9rem, 2.5vw, 1.6rem); z-index: 90; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem; border-radius: 999px; background: var(--noir); color: #fff; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 12px 28px -12px rgba(79,124,255,.55), 0 2px 8px rgba(0,0,0,.22); transition: transform .45s var(--courbe), box-shadow .45s var(--courbe), padding .45s var(--courbe); } /* Le halo dégradé de la charte, derrière le bouton, comme sous le logo. */ .wa::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; background: var(--degrade); opacity: .55; filter: blur(6px); transition: opacity .45s var(--courbe); } .wa svg { width: 22px; height: 22px; flex: none; } .wa-mot { max-width: 0; overflow: hidden; white-space: nowrap; font-size: .92rem; font-weight: 600; transition: max-width .45s var(--courbe), margin .45s var(--courbe); } .wa:hover, .wa:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(139,92,246,.6), 0 2px 8px rgba(0,0,0,.22); padding-right: .95rem; } .wa:hover::before, .wa:focus-visible::before { opacity: .9; } .wa:hover .wa-mot, .wa:focus-visible .wa-mot { max-width: 12rem; margin-right: .1rem; } @media (prefers-reduced-motion: reduce) { .wa, .wa-mot { transition: none; } } @media print { .wa { display: none; } } /* ---------- Page réseaux sociaux : les blocs qui donnent envie de lire ---------- */ .rs-reseaux { display: grid; gap: 1rem; margin: 2.4rem 0 1rem; } @media (min-width: 760px) { .rs-reseaux { grid-template-columns: repeat(3, 1fr); } } .rs-reseau { border-radius: 18px; padding: 1.5rem 1.4rem; border: 1px solid var(--ligne); background: #fff; position: relative; overflow: hidden; transition: transform .5s var(--courbe), box-shadow .5s var(--courbe); } .rs-reseau:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(11,11,16,.4); } .rs-reseau::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--teinte, var(--degrade)); } .rs-reseau h3 { font-size: 1.15rem; margin: .9rem 0 .4rem; } .rs-reseau p { color: var(--gris); font-size: .97rem; } .rs-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--teinte); } .rs-logo svg { width: 22px; height: 22px; } .rs-insta { --teinte: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); } .rs-face { --teinte: linear-gradient(135deg, #1877F2, #0B5FD0); } .rs-yt { --teinte: linear-gradient(135deg, #FF0000, #C4302B); } .rs-tt { --teinte: linear-gradient(135deg, #25F4EE, #111 48%, #FE2C55); } /* Quatre réseaux : deux colonnes sur tablette, quatre sur grand écran. */ @media (min-width: 640px) { .rs-reseaux--quatre { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .rs-reseaux--quatre { grid-template-columns: repeat(4, 1fr); } } /* La preuve : les vraies vignettes de nos vidéos, en 9:16 */ .rs-vignettes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin: 2.2rem 0 1rem; } @media (min-width: 760px) { .rs-vignettes { grid-template-columns: repeat(4, 1fr); } } /* Les carrousels sont en 4:5, et leur titre est déjà dans l'image : la légende passe dessous au lieu de se superposer à ce qui est écrit sur la page. */ .rs-vignettes--carre .rs-vignette { aspect-ratio: auto; border-radius: 0; overflow: visible; box-shadow: none; display: grid; gap: .5rem; } .rs-vignettes--carre .rs-vignette picture { display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 44px -28px rgba(11,11,16,.55); } .rs-vignettes--carre .rs-vignette img { aspect-ratio: 4 / 5; object-position: 50% 50%; } .rs-vignette-sous { font-size: .84rem; font-weight: 600; color: var(--gris); } .rs-vignettes--carre .rs-vignette:hover .rs-vignette-sous { color: var(--encre); } .rs-vignette { /* margin: 0 indispensable : le navigateur donne 17 px en haut et 40 px de chaque côté à une
, et les quatre vignettes sortaient à 80 px au lieu de 160 px de large. */ position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 9 / 16; box-shadow: 0 20px 44px -28px rgba(11,11,16,.55); transition: transform .5s var(--courbe); } .rs-vignette:hover { transform: translateY(-4px) scale(1.012); } .rs-vignette img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .rs-vignette figcaption, .rs-vignette-nom { position: absolute; inset: auto 0 0 0; padding: 2.6rem .8rem .8rem; color: #fff; font-size: .84rem; font-weight: 600; background: linear-gradient(to top, rgba(10,12,18,.88), rgba(10,12,18,0)); } /* Les vignettes sont des liens : chacune ouvre SA vidéo dans le compte de démonstration (liens profonds #p1, #p5, #p9, #p14). */ a.rs-vignette { display: block; } a.rs-vignette:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; } a.rs-vignette:hover .rs-lecture, a.rs-vignette:focus-visible .rs-lecture { background: #fff; transform: translate(-50%, -50%) scale(1.1); } .rs-lecture { transition: transform .35s var(--courbe), background .35s; } .rs-lecture { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #15151c; } .rs-lecture svg { width: 15px; height: 15px; margin-left: 2px; } /* Le compte de démonstration, montré et pas seulement décrit */ .rs-demo { display: grid; gap: 1.8rem; align-items: center; margin: 2.4rem 0 1rem; } @media (min-width: 860px) { .rs-demo { grid-template-columns: 1.05fr 1fr; } } /* Le second exemple renvoie l'écran de l'autre côté : deux blocs identiques à la file se liraient comme un seul pavé. L'ordre du HTML reste écran puis texte, pour que le téléphone montre l'exemple en premier dans les deux cas. */ @media (min-width: 860px) { .rs-demo--inverse { grid-template-columns: 1fr 1.05fr; } .rs-demo--inverse .rs-demo-ecran { order: 2; } .rs-demo--inverse .rs-demo-mot { order: 1; } } .rs-demo-ecran { border-radius: 20px; overflow: hidden; box-shadow: 0 34px 70px -40px rgba(11,11,16,.5); } .rs-demo-ecran img { width: 100%; height: auto; display: block; } .rs-demo-mot .sur { margin-bottom: .7rem; } /* Le temps du praticien, en trois nombres */ .rs-compte { display: grid; gap: .9rem; margin: 2rem 0 1rem; } @media (min-width: 700px) { .rs-compte { grid-template-columns: repeat(3, 1fr); } } .rs-compte div { border: 1px solid var(--ligne); border-radius: 16px; padding: 1.3rem 1.2rem; background: var(--gris-clair); } .rs-compte--fort b { font-size: 2.6rem; } @media (min-width: 700px) { .rs-compte--fort b { font-size: 3.1rem; } } .rs-compte--fort div { background: rgba(79,124,255,.05); border-color: rgba(79,124,255,.2); } .rs-compte b { display: block; font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; } .rs-compte span { display: block; margin-top: .4rem; color: var(--gris); font-size: .95rem; } /* ---------- Carrousel ---------- Une section entière tient sur un écran : les cartes défilent au lieu de s'empiler. Sans JavaScript, la piste reste défilable au doigt et à la molette, et les flèches disparaissent. Le défilement automatique s'arrête au survol, au doigt, au clavier, et ne démarre jamais si l'utilisateur a demandé moins d'animations. */ /* Le ruban occupe toute la largeur de la grille des cartes, pas une colonne. */ .cartes--carrousel { display: block; } /* min-width: 0 : le ruban est un enfant de grille dont le contenu flex n'est pas compressible. Sans cette ligne, la grille lui donne sa largeur intrinsèque (la somme des cartes clonées) et il déborde de son conteneur. */ .carrousel { position: relative; margin-top: 3rem; min-width: 0; } .carrousel-piste { min-width: 0; } /* Ruban à défilement infini. ⚠️ margin-right sur les cartes, JAMAIS gap : la boucle se fait en ramenant la position d'exactement une largeur de groupe, et un gap ajoute un espace entre les groupes que le calcul ne voit pas, donc un trou visible à chaque tour. Pas de scroll-snap non plus : il se battrait avec l'avance continue. */ /* ⚠️ overflow-x: auto force overflow-y à « auto » : tout ce qui dépasse en hauteur est coupé. Les cartes montent de 3 px au survol et portent une ombre portée : sans cette réserve en haut et en bas, le survol rognait le trait du dessus de la carte. La marge négative annule la réserve du haut, pour que rien ne bouge à l'écran. */ .carrousel-piste { display: flex; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-top: 12px; padding-bottom: 20px; margin-top: -12px; overscroll-behavior-x: contain; scroll-behavior: auto; cursor: grab; -webkit-overflow-scrolling: touch; } .carrousel-piste.est-pris { cursor: grabbing; user-select: none; } .carrousel-piste:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; } .carrousel-piste::-webkit-scrollbar { display: none; } .carrousel-piste > * { flex: 0 0 82%; margin-right: 1rem; } @media (min-width: 700px) { .carrousel-piste > * { flex-basis: 44%; } } @media (min-width: 1000px) { .carrousel-piste > * { flex-basis: 30%; } } /* Les exemples sont des captures d'écran : plus larges, sinon on ne lit rien. */ @media (min-width: 1000px) { .carrousel--large .carrousel-piste > * { flex-basis: 46%; } } /* Un dégradé sur les bords : on voit que ça continue au-delà de l'écran. */ .carrousel[data-actif] { --voile: 3.5rem; } @media (min-width: 700px) { .carrousel[data-actif] { --voile: 6rem; } } .carrousel[data-actif] .carrousel-piste { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--voile), #000 calc(100% - var(--voile)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--voile), #000 calc(100% - var(--voile)), transparent); } /* La marge du bas n'est pas décorative : sans elle, la barre touchait exactement le bloc suivant (mesuré à 0 px d'écart) et les flèches avaient l'air posées dessus. */ .carrousel-barre { display: none; align-items: center; justify-content: center; gap: .9rem; margin: 1.4rem 0 2.4rem; } .carrousel[data-actif] .carrousel-barre { display: flex; } .carrousel-fleche { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: none; border: 1px solid currentColor; color: inherit; opacity: .4; transition: opacity .3s, transform .3s var(--courbe); } .carrousel-fleche svg { width: 13px; height: 13px; } .carrousel-fleche:hover, .carrousel-fleche:focus-visible { opacity: 1; transform: scale(1.06); } /* Le point visible fait 7 px, mais la zone à toucher en fait 24 : un bouton de 7 px est impossible à viser au doigt. */ .carrousel-points { display: flex; gap: 0; } .carrousel-point { width: 24px; height: 24px; display: grid; place-items: center; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; } .carrousel-point::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .25; transition: opacity .3s, transform .3s var(--courbe); } .carrousel-point[aria-current="true"]::before { opacity: 1; transform: scale(1.5); } .carrousel-point:hover::before, .carrousel-point:focus-visible::before { opacity: .6; } /* ---------- Réalisations ---------- */ .realisations { padding: var(--section) 0; background: var(--gris-clair); } .realisations-grille { display: grid; gap: 1.6rem; margin-top: 3.5rem; } .realisation { display: grid; background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); transition: transform .6s var(--courbe), box-shadow .6s var(--courbe); transform-style: preserve-3d; } .realisation:hover { box-shadow: 0 50px 90px -40px rgba(79,124,255,.35); } .realisation-ecran { position: relative; aspect-ratio: 3/2; overflow: hidden; background: linear-gradient(160deg, #EDEDF2, #DCDCE6); } .realisation-ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--courbe); } .realisation:hover .realisation-ecran img { transform: scale(1.04); } .realisation-texte { padding: 1.5rem 1.6rem 1.7rem; display: grid; gap: .45rem; } .realisation-type { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu-texte); } .realisation h3 { font-size: 1.4rem; letter-spacing: -.02em; } .realisation p { color: var(--gris); font-size: .97rem; } .realisation-lien { margin-top: .5rem; font-weight: 600; font-size: .95rem; } .realisations-note { margin-top: 2.5rem; text-align: center; color: var(--gris); font-size: .95rem; max-width: 70ch; margin-inline: auto; } @media (min-width: 900px) { .realisations-grille { grid-template-columns: repeat(2, 1fr); } } /* ---------- L'équipe ---------- */ .equipe { padding: var(--section) 0; } .equipe-grille { display: grid; gap: 2rem; margin-top: 3.5rem; } .fondateur { display: grid; gap: 1.4rem; align-items: start; } .fondateur-photo { max-width: 260px; } @media (min-width: 800px) { .fondateur { grid-template-columns: 200px 1fr; gap: 1.6rem; align-items: stretch; } .fondateur h3 { font-size: 1.45rem; } /* La photo prend toute la hauteur du texte : haut et bas alignés (demande de Léo, 19/09). */ .fondateur-photo { max-width: none; position: relative; min-height: 260px; } .fondateur-photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; } } @media (min-width: 1100px) { .fondateur { grid-template-columns: 230px 1fr; gap: 2rem; } } .fondateur-photo { border-radius: var(--rayon); overflow: hidden; background: var(--gris-clair); box-shadow: 0 40px 80px -50px rgba(0,0,0,.4); } .fondateur-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; transition: transform 1.4s var(--courbe); } .fondateur:hover .fondateur-photo img { transform: scale(1.03); } .fondateur h3 { font-size: 1.7rem; } .fondateur-role { margin: .3rem 0 .9rem; font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; } .fondateur-texte p:last-child { color: var(--gris); } .equipe-image { margin: 2.5rem 0 0; border-radius: var(--rayon); overflow: hidden; } .equipe-image img { width: 100%; aspect-ratio: 16/8; object-fit: cover; } @media (min-width: 800px) { .equipe-grille { grid-template-columns: 1fr 1fr; gap: 3rem; } } /* ---------- Notre histoire ---------- */ .histoire { padding: var(--section) 0; background: var(--gris-clair); } .histoire-grille { display: grid; gap: 2rem; } .histoire-recit { display: grid; gap: 1.2rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--encre); } .histoire-recit p { max-width: 62ch; } .histoire-reperes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; padding-top: 1.8rem; border-top: 1px solid var(--ligne); } .histoire-reperes div { display: grid; gap: .25rem; } .histoire-reperes b { font-size: 1.5rem; letter-spacing: -.03em; } .histoire-reperes span { font-size: .85rem; color: var(--gris); } @media (min-width: 900px) { .histoire-grille { grid-template-columns: .8fr 1.2fr; gap: 5rem; } .histoire-colonne:first-child { position: sticky; top: 110px; align-self: start; } } /* ---------- Comment ça se passe (sombre) ---------- */ .parcours { padding: var(--section) 0; background: var(--noir-2); color: #fff; position: relative; overflow: hidden; } .parcours::after { content: ""; position: absolute; width: 60vw; height: 60vw; right: -25vw; bottom: -35vw; background: radial-gradient(circle, rgba(34,211,238,.22), transparent 60%); filter: blur(40px); pointer-events: none; } .parcours-liste { position: relative; display: grid; gap: 1.2rem; margin-top: 3.5rem; max-width: 820px; margin-inline: auto; } .parcours-liste li { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: start; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: var(--rayon); padding: 1.6rem 1.6rem; } .parcours-nb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--degrade); color: #fff; } .parcours-liste h3 { font-size: 1.25rem; margin-bottom: .5rem; letter-spacing: -.02em; } .parcours-liste p { color: rgba(255,255,255,.68); } @media (min-width: 900px) { /* Trois colonnes alignées : la pastille, le titre et le texte partagent les mêmes lignes d'une carte à l'autre (subgrid sur deux niveaux). Un navigateur qui ignore subgrid retrouve simplement l'empilement normal. */ .parcours-liste { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto 1fr; max-width: none; align-items: stretch; } .parcours-liste li { grid-template-columns: 1fr; grid-row: span 3; grid-template-rows: subgrid; gap: .8rem; padding: 1.7rem 1.5rem; } .parcours-liste li > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; } .parcours-liste li > div h3 { margin-bottom: 0; } } .parcours-action { position: relative; text-align: center; margin-top: 3rem; } .parcours-sous { margin-top: 1rem; font-size: .9rem; color: rgba(255,255,255,.55); } /* ---------- Questions ---------- */ .questions { padding: var(--section) 0; } .questions-grille { display: grid; gap: 2.5rem; } .faq { border-top: 1px solid var(--ligne); } .faq details { border-bottom: 1px solid var(--ligne); } .faq summary { list-style: none; cursor: pointer; padding: 1.3rem 3rem 1.3rem 0; font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: rotate(45deg); transition: transform .4s var(--courbe); } .faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .faq-rep { padding: 0 0 1.4rem; color: var(--gris); max-width: 62ch; } .faq-rep p { animation: faq-monte .5s var(--courbe) both; } @keyframes faq-monte { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (min-width: 900px) { .questions-grille { grid-template-columns: .8fr 1.2fr; gap: 5rem; } .questions-grille > div:first-child { position: sticky; top: 110px; align-self: start; } } /* ---------- Contact ---------- */ .contact { padding: var(--section) 0; background: var(--noir); color: #fff; } .contact-int { display: grid; gap: 3rem; align-items: center; } .contact-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } .contact-image { margin: 0; border-radius: var(--rayon); overflow: hidden; } .contact-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } @media (min-width: 900px) { .contact-int { grid-template-columns: 1.1fr .9fr; gap: 5rem; } } /* ---------- Pied de page ---------- */ .pied { background: var(--noir); color: rgba(255,255,255,.6); border-top: 1px solid rgba(255,255,255,.08); padding: 3.5rem 0 2rem; font-size: .92rem; } .pied-int { display: grid; gap: 2.5rem; } /* auto 1fr, jamais auto auto : un enfant qui traverse les deux colonnes (le paragraphe) élargirait sinon la première et détacherait le D du nom. */ /* align-content: start : la colonne est étirée à la hauteur de la plus haute du pied, et sans cela les trois lignes auto s'écartaient pour remplir le vide. */ .pied-marque { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; align-content: start; justify-items: start; color: #fff; font-weight: 600; font-size: 1.1rem; } .pied-marque p, .pied-marque .pied-social { grid-column: 1 / -1; } .pied-marque p { margin: .2rem 0 0; color: rgba(255,255,255,.55); font-weight: 400; font-size: .92rem; max-width: 34ch; } .pied-marque .pied-social { margin-top: .6rem; } .pied-liens, .pied-contact { display: grid; gap: .6rem; align-content: start; } /* min-height 24 px : le minimum qu'un doigt doit pouvoir viser. */ .pied-liens a, .pied-contact a { display: inline-flex; align-items: center; min-height: 24px; } .pied-liens a:hover, .pied-contact a:hover { color: #fff; } .pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .82rem; color: rgba(255,255,255,.5); } @media (min-width: 800px) { .pied-int { grid-template-columns: 1.4fr 1fr 1fr; } } .pied-titre { color: #fff; font-weight: 600; margin-bottom: .2rem; } .pied-int--4 { gap: 2rem; } @media (min-width: 800px) { .pied-int--4 { grid-template-columns: 1.3fr 1fr 1fr 1fr; } } .puces li a { border-bottom: 1.5px solid rgba(79,124,255,.5); transition: border-color .3s; } .puces li a:hover { border-color: var(--bleu); } .faq-rep a { color: var(--encre); border-bottom: 1.5px solid rgba(79,124,255,.5); } /* « Voir le compte d'exemple » sur la carte Instagram */ .rs-voir { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font-size: .9rem; font-weight: 600; color: var(--encre); border-bottom: 1.5px solid rgba(79,124,255,.5); transition: border-color .3s, gap .3s; } .rs-voir:hover, .rs-voir:focus-visible { border-color: var(--bleu); gap: .55rem; } .rs-sous-cartes { color: var(--gris); } /* La capture du compte est cliquable, avec son étiquette au survol */ a.rs-demo-ecran { position: relative; display: block; } a.rs-demo-ecran:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; } .rs-demo-ouvrir { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .6rem 1.1rem; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--encre); font-size: .9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 12px 30px -12px rgba(11,11,16,.5); opacity: 0; transition: opacity .35s var(--courbe), transform .35s var(--courbe); } a.rs-demo-ecran:hover .rs-demo-ouvrir, a.rs-demo-ecran:focus-visible .rs-demo-ouvrir { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } /* Sans survol (écran tactile) ou sur un petit écran, l'étiquette reste visible : sinon rien n'indique que la capture est cliquable. */ @media (hover: none), (max-width: 760px) { .rs-demo-ouvrir { opacity: 1; } } /* Les trois portes de fin de page : le mur, une vidéo, les stories */ .rs-portes { display: grid; gap: .9rem; margin: 2.2rem 0 1.4rem; } @media (min-width: 760px) { .rs-portes { grid-template-columns: repeat(3, 1fr); } } .rs-porte { display: grid; align-content: start; gap: .25rem; padding: 1.3rem 1.2rem; border: 1px solid var(--ligne); border-radius: 18px; background: #fff; transition: transform .4s var(--courbe), box-shadow .4s var(--courbe), border-color .4s; } .rs-porte:hover, .rs-porte:focus-visible { transform: translateY(-3px); border-color: transparent; box-shadow: 0 26px 50px -30px rgba(11,11,16,.4); } .rs-porte-quoi { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu-texte); } .rs-porte-nom { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; color: var(--encre); } .rs-porte-nom::after { content: " ↗"; font-weight: 400; color: var(--gris); } .rs-porte-sous { color: var(--gris); font-size: .94rem; } @media (prefers-reduced-motion: reduce) { a.rs-vignette:hover .rs-lecture, .rs-porte:hover { transform: none; } } /* La maquette des cinq étapes montre un faux tableau de bord : l'étiquette dit que ce sont des chiffres d'exemple, pas un résultat obtenu chez un client. */ .methode-visuels { position: relative; } .methode-exemple { position: absolute; z-index: 3; top: .8rem; right: .8rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(11,11,16,.62); color: #fff; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Les trois étapes de la page réseaux : numérotées, courtes, lisibles d'un œil */ .rs-etapes { counter-reset: e; display: grid; gap: .9rem; margin: 2rem 0 1.4rem; padding: 0; list-style: none; } .rs-etapes li { counter-increment: e; position: relative; padding: 1.1rem 1.2rem 1.1rem 3.6rem; border: 1px solid var(--ligne); border-radius: 16px; color: var(--gris); transition: background .35s, border-color .35s, transform .35s var(--courbe); } .rs-etapes li::before { content: counter(e); position: absolute; left: 1.1rem; top: 1rem; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--degrade); color: #fff; font-size: .85rem; font-weight: 600; } .rs-etapes li b { color: var(--encre); } /* ---------- Survol : un fond bleuté sur toutes les cartes cliquables ou non */ .parcours-liste li, .carte, .rs-reseau, .rs-etapes li, .guide-carte, .rs-porte, .chiffre, .rs-compte div { transition: background .35s, border-color .35s, transform .35s var(--courbe), box-shadow .35s var(--courbe); } .carte:hover, .rs-etapes li:hover, .rs-compte div:hover, .chiffre:hover { background: rgba(79,124,255,.06); border-color: rgba(79,124,255,.28); } .rs-reseau:hover, .guide-carte:hover, .rs-porte:hover { background: rgba(79,124,255,.05); } /* Sur fond noir, le même bleu mais en lumière */ .parcours-liste li:hover, .offre .carte:hover, .methode .etape:hover { background: rgba(79,124,255,.12); border-color: rgba(120,160,255,.38); } @media (prefers-reduced-motion: reduce) { .rs-etapes li:hover { transform: none; } } /* ---------- Apparitions au défilement ---------- */ [data-reveal] { transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe); transition-delay: calc(var(--i, 0) * .1s); } html.reveal-actif [data-reveal]:not([data-vu]) { opacity: 0; transform: translateY(28px); } /* Les cartes d'un carrousel entrent l'une après l'autre quand le bloc est vu. Remplissage « backwards » et non « both » : à la fin de l'animation l'élément reprend ses styles normaux, donc le survol et le défilement restent à lui. */ html.anime .carrousel[data-vu] .carrousel-piste > * { animation: carte-monte .55s var(--courbe) backwards; } html.anime .carrousel[data-vu] .carrousel-piste > *:nth-child(1) { animation-delay: .1s; } html.anime .carrousel[data-vu] .carrousel-piste > *:nth-child(2) { animation-delay: .2s; } html.anime .carrousel[data-vu] .carrousel-piste > *:nth-child(3) { animation-delay: .3s; } html.anime .carrousel[data-vu] .carrousel-piste > *:nth-child(n+4) { animation-delay: .38s; } @keyframes carte-monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* Le bouton WhatsApp s'annonce une seconde après l'arrivée, sans insister. */ html.anime .wa { animation: wa-entre .55s var(--courbe) 1.4s backwards; } @keyframes wa-entre { from { opacity: 0; transform: translateY(16px) scale(.8); } to { opacity: 1; transform: none; } } /* Apparitions des pages de service, sans une ligne de JavaScript : l'animation est pilotée par la position de l'élément dans la fenêtre (animation-timeline). @supports protège les navigateurs qui ne la connaissent pas : ils affichent le contenu normalement, il n'y a aucun risque de bloc invisible. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .rs-reseaux > *, .rs-vignettes > *, .rs-compte > *, .rs-demo > * { animation: carte-monte 1s linear both; animation-timeline: view(); /* Fini dès que le bloc est à moitié entré : un texte long ne doit jamais rester à demi transparent pendant qu'on le lit. */ animation-range: entry 0% entry 52%; } } } /* L'en-tête d'une page de service entre à l'arrivée (elle est toujours visible, donc pas besoin de la lier au défilement). Remplissage « backwards ». */ html.anime .page-hero .sur { animation: bloc-entre .7s var(--courbe) .05s backwards; } html.anime .page-hero h1 { animation: bloc-entre .8s var(--courbe) .14s backwards; } html.anime .page-hero .texte { animation: bloc-entre .8s var(--courbe) .26s backwards; } html.anime .page-hero .page-meta { animation: bloc-entre .8s var(--courbe) .36s backwards; } @keyframes bloc-entre { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html.anime .carrousel[data-vu] .carrousel-piste > *, html.anime .wa { animation: none; } } /* ---------- Intro d'ouverture (2,3 s) ---------- Rendue dans le HTML, escamotée par le script d'en-tête (session déjà vue, onglet caché, animations réduites) et par