.offre-fil { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; font-size: 12px; color: #526987; } .offre-fil a { color: #416089; } .offre-fil a:hover { text-decoration: underline; } .offre .hero h1 { font-size: clamp(34px,4vw,54px); } html[data-theme="nuit"] .offre-fil, html[data-theme="nuit"] .offre-fil a { color: #b6c9e3; } .offre-visuel { position: relative; align-self: center; padding: 30px; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; background: radial-gradient(circle at 30% 25%, #fff 0, #fff 40%, #dcebff 100%); box-shadow: 0 30px 70px #00102e55; } .offre-visuel img { display: block; width: 100%; height: auto; } .offre-visuel img[src*="/blog-illustre/"] { border-radius: 22px; box-shadow: 0 14px 30px #00102e40; } .offre-visuel img.offre-visuel__fleche { position: absolute; right: -10px; top: -22px; width: 76px; filter: drop-shadow(0 8px 14px #00102e66); } .offre .hero .wrap { min-height: 0; padding-bottom: 52px; } .offre-technos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 22px; } .offre-technos > div { padding: 18px 22px; border: 1px solid #dce5f1; border-radius: 12px; background: #fff; } .offre-technos__titre { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #225fce; } .offre-technos .service-tech { gap: 10px 18px; margin-top: 12px; padding-top: 12px; } .offre-technos .tech-badge { font-size: 13px; color: #42506a; } .offre-technos .tech-badge img { width: 20px; height: 20px; opacity: 1; } .offre-technos .tech-code { font-size: 11px; min-width: 22px; height: 20px; } .offre .work .wrap { max-width: 1400px; } .offre .work .work-grid.offre-realisations { width: 100%; max-width: none; gap: 26px; margin-top: 32px; padding: 0; } .offre-carte { margin: 0 0 22px; } .offre-carte img { display: block; width: 100%; height: auto; border-radius: 22px; } html[data-theme="nuit"] .offre-technos > div { background: #152c4b; border-color: #34516f; } html[data-theme="nuit"] .offre-technos .tech-badge { color: #c8d8f0; } .offre-suite { margin-top: 26px; } .offre-inclus__grille { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 34px 0 0; padding: 0; list-style: none; } .offre-inclus__grille li { padding: 24px; border: 1px solid #dce5f1; border-radius: 12px; background: #fff; } .offre-inclus__grille li.offre-inclus--illustre { position: relative; overflow: hidden; padding-right: 64px; } .offre-inclus--illustre > :not(.offre-inclus__fond) { position: relative; z-index: 1; } .offre-inclus__fond { position: absolute; right: -24px; bottom: -28px; width: 132px; height: 132px; color: #225fce; opacity: .11; transform: rotate(-10deg); pointer-events: none; transition: opacity .3s, transform .3s; } .offre-inclus__fond svg { width: 100%; height: 100%; stroke-width: 1.1; } .offre-inclus--illustre:hover .offre-inclus__fond { opacity: .18; transform: rotate(-4deg) scale(1.04); } html[data-theme="nuit"] .offre-inclus__fond { color: #a3c8ff; } .offre-roles--carte .offre-roles__entete { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: center; } .offre-roles--carte .offre-roles__carte { margin: -80px -40px -70px -10px; pointer-events: none; } .offre-roles--carte .offre-roles__carte img { width: calc(100% + 80px); margin: 0 -40px; } .offre-roles__bouton { margin: 22px 0 0; } .offre .hero .offre-btn-clair { color: #fff; border-color: #8aa9db; } .offre .hero .offre-btn-clair:hover { background: #ffffff14; } .offre-realisations .work-card__link { position: relative; display: block; } @media(max-width:900px) { .offre-roles--carte .offre-roles__entete { grid-template-columns: minmax(0,1fr); } .offre-roles--carte .offre-roles__carte { margin: -10px -16px 0; } .offre-roles--carte .offre-roles__carte img { width: 100%; margin: 0; } } .offre-inclus__icone { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 10px; background: linear-gradient(135deg,#0f69a3,#03358d); color: #fff; font-weight: 700; } .offre-inclus__icone--dessin { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 8px 18px #03358d2e; } .offre-inclus__icone--dessin svg { width: 24px; height: 24px; } .offre-inclus__grille h3 { margin: 0 0 8px; font-size: 18px; } .offre-inclus__grille p { margin: 0; font-size: 14px; color: #4f596a; } .offre-inclus__grille a { color: #03358d; font-weight: 700; text-decoration: underline; } .offre .work-grid.offre-realisations { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: visible; scroll-snap-type: none; } .offre .work-grid.offre-realisations > .work-card { min-width: 0; width: auto; max-width: none; flex: none; } .offre-realisations .work-card p { color: #4f596a; font-size: 13px; } @media(max-width:900px) { .offre .work-grid.offre-realisations { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(max-width:560px) { .offre .work-grid.offre-realisations { grid-template-columns: minmax(0,1fr); } } .offre-zones .split { align-items: center; } .offre-autre { padding: 32px; border: 1px solid #dce5f1; border-radius: 22px 22px 80px 22px; background: #f7f9fd; } .offre-autre h3 { margin: 0 0 12px; font-size: 24px; } .offre-contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; text-align: left; } .offre-contact h2 { margin: 0 0 18px; text-align: left; } .offre-contact .actions { justify-content: flex-start; } .offre-formulaire { padding: 30px; border-radius: 14px; background: #fff; color: #253d5e; text-align: left; } .offre-formulaire :is(label,p) { color: #253d5e; } html[data-theme="nuit"] .offre-visuel { background: radial-gradient(circle at 30% 25%, #1d3a60 0, #152c4b 45%, #10233f 100%); box-shadow: 0 30px 60px #0008, inset 0 0 0 1px #34516f; } html[data-theme="nuit"] :is(.offre-inclus__grille li,.offre-autre,.offre-formulaire) { background: #152c4b; border-color: #34516f; color: #d3e3ff; } html[data-theme="nuit"] :is(.offre-inclus__grille p,.offre-realisations .work-card p,.offre-formulaire :is(label,p)) { color: #c8d8f0; } html[data-theme="nuit"] .offre-inclus__grille a { color: #a3c8ff; } .offre-formules__grille { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; max-width: 980px; margin: 38px auto 0; align-items: stretch; } .offre-formule { position: relative; display: flex; flex-direction: column; padding: 34px 32px 30px; border: 1px solid #dce5f1; border-radius: 22px; background: #fff; box-shadow: 0 18px 40px #03358d12; } .offre-formule h3 { margin: 0; font-size: 24px; } .offre-formule__accroche { margin: 6px 0 0; color: #4f596a; } .offre-formule__prix { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 20px; padding-bottom: 20px; border-bottom: 1px solid #dce5f1; } .offre-formule__prix strong { font-size: 46px; line-height: 1; color: #03358d; letter-spacing: -.02em; } .offre-formule__prix span { font-size: 14px; color: #526987; } .offre-formule ul { flex: 1; margin: 0 0 26px; padding: 0; list-style: none; } .offre-formule li { position: relative; padding: 6px 0 6px 30px; font-size: 15px; } .offre-formule li::before { content: "✓"; position: absolute; left: 0; top: 7px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #e6eefc; color: #03358d; font-size: 12px; font-weight: 700; } .offre-formule li.offre-formule__base { padding-left: 0; font-weight: 700; } .offre-formule li.offre-formule__base::before { content: none; } .offre-formule .btn { align-self: flex-start; } .offre-formule--avant { border: 0; background: linear-gradient(150deg,#0f69a3 0,#03358d 45%,#02225b 100%); color: #fff; box-shadow: 0 30px 60px #00102e40; } .offre-formule--avant :is(h3,.offre-formule__prix strong) { color: #fff; } .offre-formule--avant :is(.offre-formule__accroche,.offre-formule__prix span) { color: #d3e3ff; } .offre-formule--avant .offre-formule__prix { border-color: #ffffff2e; } .offre-formule--avant li::before { background: #ffffff24; color: #fff; } .offre-formule__badge { position: absolute; top: -13px; right: 28px; padding: 6px 14px; border-radius: 999px; background: #fff; color: #03358d; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 8px 18px #00102e30; } html[data-theme="nuit"] .offre-formule:not(.offre-formule--avant) { background: #152c4b; border-color: #34516f; color: #d3e3ff; } html[data-theme="nuit"] .offre-formule:not(.offre-formule--avant) :is(h3,.offre-formule__prix strong) { color: #fff; } html[data-theme="nuit"] .offre-formule:not(.offre-formule--avant) :is(.offre-formule__accroche,.offre-formule__prix span) { color: #c8d8f0; } html[data-theme="nuit"] .offre-formule:not(.offre-formule--avant) .offre-formule__prix { border-color: #34516f; } html[data-theme="nuit"] .offre-formule:not(.offre-formule--avant) li::before { background: #1f3d63; color: #a3c8ff; } html[data-theme="nuit"] .offre-formule--avant { box-shadow: 0 30px 60px #0008, inset 0 0 0 1px #4a74b0; } @media(max-width:767px) { .offre-formules__grille { grid-template-columns: minmax(0,1fr); gap: 30px; } .offre-formule { padding: 30px 22px 24px; } .offre-formule .btn { align-self: stretch; text-align: center; } } .seo-guides .work-card img { aspect-ratio: 3 / 2; object-fit: cover; } .seo-mere .seo-section .seo-copy .btn { margin-top: 8px; } @media(min-width:901px) { .seo-mere .hero .wrap { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); } } .seo-mere .hero .seo-demo { align-self: center; min-height: 0; padding: 30px 22px 20px; box-shadow: 0 30px 70px #00102e55; } .seo-mere .hero .seo-demo__eyebrow { margin-bottom: 22px; } .seo-mere .hero .seo-demo__chart { display: none; } .seo-mere .seo-section .offre-visuel { width: 100%; max-width: 600px; padding: 14px; justify-self: center; } .seo-mere .seo-section .offre-visuel img:not(.offre-visuel__fleche) { max-height: none; } @media(min-width:901px) { .seo-mere .seo-section .split { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); } } @media(min-width:901px) { .offre .hero .wrap:has(.offre-visuel--grand) { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); } } .offre-visuel--grand { padding: 14px; } @media(max-width:767px) { .seo-mere .hero .seo-demo { max-width: 420px; width: 100%; margin: 24px auto 0; } } @media(min-width:901px) { .seo-mere .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(min-width:1101px) { .seo-mere .service-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } } @media(max-width:1024px) { .offre-inclus__grille { grid-template-columns: repeat(2,minmax(0,1fr)); } .offre-contact { gap: 32px; } } @media(max-width:767px) { .offre-technos { grid-template-columns: minmax(0,1fr); } .offre-visuel { max-width: 320px; margin: 24px auto 0; } .offre-inclus__grille,.offre-contact { grid-template-columns: minmax(0,1fr); } .offre-formulaire { padding: 22px 18px; } }