BLOC ACUILLE - BonneAnnonce

<style>

/* ========== RESET IONOS ========== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { margin: 0; padding: 0; overflow-x: hidden; }

img { max-width: 100%; height: auto; display: block; }

p, div, section { word-wrap: break-word; overflow-wrap: break-word; }

/* ========== FONTS ========== */

@import url(‘https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap’);

:root {

–noir: #0A0A0A;

–noir-carte: #18181B;

–electric: #3B82F6;

–mint: #06D6A0;

–violet: #A855F7;

–blanc: #ffffff;

–font-display: ‘Sora’, sans-serif;

–font-body: ‘DM Sans’, sans-serif;

}

/* ========== BOUCLES INFINIES ========== */

@keyframes hexFloat1 {

0%, 100% { transform: translateY(0) rotate(0deg); }

50% { transform: translateY(-25px) rotate(10deg); }

}

@keyframes hexFloat2 {

0%, 100% { transform: translateY(0) rotate(0deg); }

50% { transform: translateY(-18px) rotate(-8deg); }

}

@keyframes adwBlink {

0%, 100% { opacity: 1; }

50% { opacity: 0; }

}

/* ========== SCROLL ANIMATIONS ========== */

.adw3-anim-up {

opacity: 0; transform: translateY(80px);

transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);

}

.adw3-anim-left {

opacity: 0; transform: translateX(-100px);

transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);

}

.adw3-anim-right {

opacity: 0; transform: translateX(100px);

transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);

}

.adw3-anim-scale {

opacity: 0; transform: scale(0.7);

transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}

.adw3-visible { opacity: 1 !important; transform: none !important; }

.adw3-d1 { transition-delay: 0.05s; }

.adw3-d2 { transition-delay: 0.18s; }

.adw3-d3 { transition-delay: 0.32s; }

.adw3-d4 { transition-delay: 0.46s; }

.adw3-d5 { transition-delay: 0.6s; }

.adw3-d6 { transition-delay: 0.74s; }

/* ========== SECTION ========== */

.adw3 {

background: var(–noir);

padding: 140px 20px 100px;

overflow: hidden;

font-family: var(–font-body);

position: relative;

}

/* ===========================================================

TEXTE GÉANT OUTLINE EN FOND

=========================================================== */

.adw3-bg-text {

position: absolute;

top: 50px;

left: -2%;

width: 104%;

z-index: 0;

pointer-events: none;

overflow: hidden;

white-space: nowrap;

}

.adw3-bg-text span {

font-family: var(–font-display);

font-size: clamp(120px, 20vw, 280px);

font-weight: 900;

letter-spacing: -8px;

color: transparent;

display: block;

line-height: 0.85;

user-select: none;

}

.adw3-bg-text .adw3-bg-l1 {

-webkit-text-stroke: 2.5px rgba(59, 130, 246, 0.35);

text-shadow: 0 0 60px rgba(59, 130, 246, 0.08);

}

.adw3-bg-text .adw3-bg-l2 {

-webkit-text-stroke: 2.5px rgba(6, 214, 160, 0.3);

text-shadow: 0 0 60px rgba(6, 214, 160, 0.06);

margin-left: 5%;

}

/* ========== DÉCO ========== */

.adw3-hex { position: absolute; z-index: 0; pointer-events: none; }

.adw3-hex-1 {

top: 80px; right: 5%;

width: 95px; height: 106px;

background: var(–electric);

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

opacity: 0.9;

animation: hexFloat1 6s ease-in-out infinite;

}

.adw3-hex-2 {

top: 240px; right: 9%;

width: 58px; height: 65px;

background: var(–mint);

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

opacity: 0.7;

animation: hexFloat2 5s ease-in-out infinite 1s;

}

.adw3-hex-3 {

bottom: 350px; left: 2%;

width: 70px; height: 78px;

background: var(–electric);

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

opacity: 0.5;

animation: hexFloat2 7s ease-in-out infinite 2s;

}

.adw3-hex-4 {

bottom: 180px; right: 3%;

width: 52px; height: 58px;

background: var(–mint);

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

opacity: 0.6;

animation: hexFloat1 5.5s ease-in-out infinite 0.5s;

}

.adw3-vline {

position: absolute;

left: 4%; top: 180px;

width: 5px; height: 500px;

background: linear-gradient(180deg, var(–electric), var(–mint), transparent);

border-radius: 5px; z-index: 0;

}

.adw3-cross {

position: absolute;

top: 110px; right: 18%;

font-size: 55px; font-weight: 200;

color: var(–electric); z-index: 0;

opacity: 0.5;

}

.adw3-inner {

max-width: 1200px;

margin: 0 auto;

position: relative;

z-index: 1;

}

/* ===========================================================

HERO — TITRE MASSIF + TYPEWRITER + HIGHLIGHTS

=========================================================== */

.adw3-hero { margin-bottom: 110px; }

.adw3-surtitle {

font-family: var(–font-display);

font-size: 16px;

font-weight: 800;

letter-spacing: 6px;

text-transform: uppercase;

color: var(–blanc);

margin-bottom: 35px;

display: flex;

align-items: center;

gap: 16px;

}

.adw3-surtitle::before {

content: »;

width: 55px; height: 3px;

background: var(–electric);

}

.adw3-cursor {

display: inline-block;

width: 5px;

height: 0.82em;

background: var(–electric);

margin-left: 4px;

vertical-align: middle;

animation: adwBlink 0.7s step-end infinite;

}

.adw3-mega-title {

font-family: var(–font-display);

font-weight: 900;

line-height: 0.92;

letter-spacing: -6px;

margin-bottom: 45px;

}

.adw3-mega-title .t-line { display: block; margin-bottom: 8px; }

.adw3-mega-title .t-white {

font-size: clamp(64px, 12vw, 150px);

color: var(–blanc);

}

.adw3-mega-title .t-blue-wrap {

font-size: clamp(64px, 12vw, 150px);

}

.adw3-mega-title .t-hl-blue {

color: var(–blanc);

background: #E91E8C;

padding: 0 16px;

display: inline;

box-decoration-break: clone;

-webkit-box-decoration-break: clone;

}

.adw3-mega-title .t-mint-wrap {

font-size: clamp(64px, 12vw, 150px);

}

.adw3-mega-title .t-hl-mint {

color: var(–blanc);

background: var(–mint);

padding: 0 16px;

display: inline;

box-decoration-break: clone;

-webkit-box-decoration-break: clone;

}

.adw3-hero-desc {

font-size: clamp(20px, 2.5vw, 26px);

color: var(–blanc);

max-width: 720px;

line-height: 1.7;

}

.adw3-hero-desc strong {

color: var(–electric);

font-weight: 700;

}

/* ===========================================================

3 CARTES — TITRES HIGHLIGHT COLORÉS

=========================================================== */

.adw3-cards {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 28px;

margin-bottom: 100px;

}

.adw3-card {

background: var(–noir-carte);

border: 2px solid rgba(59, 130, 246, 0.08);

border-radius: 24px;

overflow: hidden;

position: relative;

transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}

.adw3-card::before {

content: »;

position: absolute;

top: 0; left: 0; right: 0;

height: 5px;

background: linear-gradient(90deg, var(–electric), var(–mint));

transform: scaleX(0);

transform-origin: left;

transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}

.adw3-card:hover::before { transform: scaleX(1); }

.adw3-card:hover {

transform: translateY(-14px);

border-color: var(–electric);

box-shadow: 0 30px 70px rgba(59, 130, 246, 0.18);

}

.adw3-card-num {

font-family: var(–font-display);

font-size: 160px; font-weight: 900;

line-height: 1;

position: absolute;

top: -30px; right: 10px; z-index: 0;

color: transparent;

-webkit-text-stroke: 1.5px rgba(59, 130, 246, 0.18);

pointer-events: none;

transition: -webkit-text-stroke-color 0.4s ease;

}

.adw3-card:hover .adw3-card-num { -webkit-text-stroke-color: rgba(6, 214, 160, 0.25); }

.adw3-card-vis {

display: flex;

justify-content: center;

padding: 35px 30px 0;

position: relative; z-index: 1;

}

.adw3-card-circle {

width: 190px; height: 190px;

border-radius: 50%;

overflow: hidden;

border: 3px solid var(–electric);

box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.06), 0 12px 45px rgba(0,0,0,0.5);

transition: border-color 0.4s ease, box-shadow 0.4s ease;

}

.adw3-card:hover .adw3-card-circle {

border-color: var(–mint);

box-shadow: 0 0 0 10px rgba(6, 214, 160, 0.08), 0 12px 45px rgba(0,0,0,0.5), 0 0 35px rgba(6, 214, 160, 0.12);

}

.adw3-card-circle img {

width: 100%; height: 100%;

object-fit: cover;

transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}

.adw3-card:hover .adw3-card-circle img { transform: scale(1.1); }

.adw3-card-body {

padding: 28px 28px 36px;

position: relative; z-index: 1;

}

.adw3-card-tag {

display: inline-block;

font-family: var(–font-display);

font-size: 11px; font-weight: 800;

letter-spacing: 2.5px;

text-transform: uppercase;

padding: 8px 18px;

border-radius: 10px;

margin-bottom: 18px;

background: linear-gradient(135deg, var(–electric), #2563eb);

color: var(–blanc);

box-shadow: 0 5px 18px rgba(59, 130, 246, 0.35);

}

.adw3-card-h3 {

font-family: var(–font-display);

font-size: clamp(28px, 3.8vw, 42px);

font-weight: 900;

margin-bottom: 16px;

line-height: 1.15;

letter-spacing: -1.5px;

display: inline;

}

.adw3-card:nth-child(1) .adw3-card-h3 {

color: var(–blanc);

background: var(–electric);

padding: 2px 12px;

box-decoration-break: clone;

-webkit-box-decoration-break: clone;

}

.adw3-card:nth-child(2) .adw3-card-h3 {

color: var(–blanc);

background: var(–mint);

padding: 2px 12px;

box-decoration-break: clone;

-webkit-box-decoration-break: clone;

}

.adw3-card:nth-child(3) .adw3-card-h3 {

color: var(–blanc);

background: rgba(255,255,255,0.1);

padding: 2px 12px;

box-decoration-break: clone;

-webkit-box-decoration-break: clone;

}

.adw3-card-h3-wrap {

display: block;

margin-bottom: 16px;

}

.adw3-card-p {

font-size: 16px;

color: var(–blanc);

line-height: 1.8;

}

.adw3-card-p strong { color: var(–electric); font-weight: 700; }

.adw3-card:nth-child(2) .adw3-card-p strong { color: var(–mint); }

/* ===========================================================

BANDEAU CHIFFRES

=========================================================== */

.adw3-stats {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 22px;

margin-bottom: 100px;

}

.adw3-stat {

text-align: center;

padding: 40px 18px;

border: 2px solid rgba(59, 130, 246, 0.1);

border-radius: 20px;

background: var(–noir-carte);

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.adw3-stat:hover {

border-color: var(–electric);

transform: translateY(-8px);

box-shadow: 0 20px 50px rgba(59, 130, 246, 0.15);

}

.adw3-stat-n {

font-family: var(–font-display);

font-size: clamp(48px, 7vw, 80px);

font-weight: 900;

color: var(–electric);

line-height: 1;

margin-bottom: 12px;

letter-spacing: -3px;

}

.adw3-stat:nth-child(2) .adw3-stat-n { color: var(–mint); }

.adw3-stat:nth-child(4) .adw3-stat-n { color: var(–mint); }

.adw3-stat-l {

font-family: var(–font-display);

font-size: 15px;

color: var(–blanc);

font-weight: 700;

}

/* ===========================================================

BLOC CTA — TITRE MASSIF

=========================================================== */

.adw3-cta {

position: relative;

border-radius: 30px;

padding: 90px 50px;

text-align: center;

overflow: hidden;

background: var(–noir-carte);

border: 2px solid rgba(59, 130, 246, 0.2);

}

.adw3-cta::after {

content: »;

position: absolute;

top: 0; left: 0; right: 0;

height: 5px;

background: linear-gradient(90deg, var(–electric), var(–violet), var(–mint));

}

.adw3-cta-in { position: relative; z-index: 1; }

/* ✅ FIX CAP 3 — OFFRE UNIQUE : gradient violet→mint moderne */

.adw3-cta-eye {

font-family: var(–font-display);

font-size: clamp(22px, 3.5vw, 32px);

font-weight: 900;

letter-spacing: 5px;

text-transform: uppercase;

color: var(–mint) !important;

background: linear-gradient(135deg, var(–violet), var(–electric), var(–mint));

-webkit-background-clip: text !important;

-webkit-text-fill-color: transparent !important;

background-clip: text !important;

margin-bottom: 40px;

}

/* ✅ FIX CAP 4 — Titre CTA blanc !important */

.adw3-cta-h3 {

font-family: var(–font-display);

font-size: clamp(40px, 7vw, 86px);

font-weight: 900;

color: #ffffff !important;

-webkit-text-fill-color: #ffffff !important;

line-height: 1.1;

margin-bottom: 12px;

letter-spacing: -3px;

text-shadow: 0 2px 20px rgba(0,0,0,0.4);

}

.adw3-cta-h3 em {

font-style: normal;

color: #ffffff !important;

-webkit-text-fill-color: #ffffff !important;

background: #E91E8C;

padding: 2px 18px;

box-decoration-break: clone;

-webkit-box-decoration-break: clone;

text-shadow: none;

}

.adw3-cta-h3-line {

display: block;

width: 180px;

height: 4px;

margin: 24px auto 0;

background: linear-gradient(90deg, var(–electric), var(–mint));

border-radius: 5px;

}

.adw3-cta-desc {

font-size: 21px;

color: #ffffff !important;

-webkit-text-fill-color: #ffffff !important;

max-width: 750px;

margin: 0 auto 48px;

line-height: 1.7;

}

.adw3-cta-btns {

display: flex;

justify-content: center;

gap: 22px;

flex-wrap: wrap;

}

/* ✅ FIX CAP 5 — Texte boutons blanc !important */

.adw3-btn-1 {

display: inline-flex;

align-items: center;

gap: 10px;

background: linear-gradient(135deg, var(–electric), #1d4ed8);

color: #ffffff !important;

-webkit-text-fill-color: #ffffff !important;

font-family: var(–font-display);

font-size: 19px; font-weight: 800;

padding: 24px 52px;

border-radius: 16px;

text-decoration: none;

border: none; cursor: pointer;

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

box-shadow: 0 10px 40px rgba(59, 130, 246, 0.5);

}

.adw3-btn-1:hover {

transform: translateY(-6px) scale(1.03);

box-shadow: 0 20px 55px rgba(59, 130, 246, 0.6);

}

.adw3-btn-2 {

display: inline-flex;

align-items: center;

gap: 10px;

background: transparent;

color: #ffffff !important;

-webkit-text-fill-color: #ffffff !important;

font-family: var(–font-display);

font-size: 19px; font-weight: 800;

padding: 24px 52px;

border-radius: 16px;

text-decoration: none;

border: 2.5px solid var(–mint);

cursor: pointer;

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.adw3-btn-2:hover {

background: rgba(6, 214, 160, 0.12);

transform: translateY(-6px);

box-shadow: 0 20px 50px rgba(6, 214, 160, 0.25);

}

/* ===========================================================

✅ FIX CAP 2 — AVANTAGES BENTO GRID HARMONISÉ

3 lignes pleines : [1——1][2] / [3][4——4] / [5——5][6]

=========================================================== */

.adw3-perks {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-template-rows: auto auto auto;

gap: 18px;

margin-top: 80px;

}

/* Span 2 sur items 1, 4, 5 → chaque ligne complète */

.adw3-perk:nth-child(1) { grid-column: span 2; }

.adw3-perk:nth-child(4) { grid-column: span 2; }

.adw3-perk:nth-child(5) { grid-column: span 2; }

.adw3-perk {

position: relative;

padding: 32px;

border-radius: 22px;

border: 1.5px solid rgba(59, 130, 246, 0.12);

background: linear-gradient(135deg, rgba(24, 24, 27, 0.95), rgba(15, 23, 42, 0.85));

overflow: hidden;

transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}

.adw3-perk::before {

content: »;

position: absolute;

top: -30px; left: -30px;

width: 110px; height: 110px;

background: radial-gradient(circle, rgba(59, 130, 246, 0.22) 0%, transparent 70%);

pointer-events: none;

transition: all 0.5s ease;

}

.adw3-perk:hover::before {

width: 160px; height: 160px;

background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);

}

.adw3-perk:nth-child(even)::before {

background: radial-gradient(circle, rgba(6, 214, 160, 0.22) 0%, transparent 70%);

}

.adw3-perk:nth-child(even):hover::before {

background: radial-gradient(circle, rgba(6, 214, 160, 0.4) 0%, transparent 70%);

}

.adw3-perk:hover {

border-color: var(–electric);

transform: translateY(-8px);

box-shadow: 0 20px 50px rgba(59, 130, 246, 0.15);

}

.adw3-perk:nth-child(even):hover {

border-color: var(–mint);

box-shadow: 0 20px 50px rgba(6, 214, 160, 0.15);

}

.adw3-perk-ico {

width: 62px; height: 62px;

border-radius: 18px;

background: linear-gradient(135deg, var(–electric), var(–mint));

display: flex;

align-items: center;

justify-content: center;

font-size: 28px;

margin-bottom: 20px;

box-shadow: 0 8px 28px rgba(59, 130, 246, 0.35);

}

.adw3-perk h4 {

font-family: var(–font-display);

font-size: 22px; font-weight: 900;

color: var(–blanc);

margin-bottom: 10px;

letter-spacing: -0.5px;

}

.adw3-perk p {

font-size: 16px;

color: var(–blanc);

line-height: 1.7;

opacity: 0.85;

}

.adw3-perk-number {

position: absolute;

top: 18px; right: 22px;

font-family: var(–font-display);

font-size: 64px; font-weight: 900;

color: transparent;

-webkit-text-stroke: 1.5px rgba(59, 130, 246, 0.15);

pointer-events: none;

line-height: 1;

}

.adw3-perk:nth-child(even) .adw3-perk-number {

-webkit-text-stroke-color: rgba(6, 214, 160, 0.15);

}

/* ========== SEO ========== */

.adw3-phantom {

position: absolute;

left: -9999px; top: -9999px;

height: 1px; width: 1px;

overflow: hidden;

}

/* ===========================================================

RESPONSIVE

=========================================================== */

@media (max-width: 992px) {

.adw3-cards { grid-template-columns: 1fr; gap: 24px; }

.adw3-stats { grid-template-columns: repeat(2, 1fr); }

.adw3-perks { grid-template-columns: 1fr; }

.adw3-perk:nth-child(1),

.adw3-perk:nth-child(4),

.adw3-perk:nth-child(5) { grid-column: span 1; }

.adw3-hex-1, .adw3-hex-2 { display: none; }

.adw3-vline { display: none; }

.adw3-cross { display: none; }

.adw3-bg-text span { font-size: clamp(80px, 14vw, 180px); }

}

@media (max-width: 768px) {

.adw3 { padding: 80px 15px 60px; }

.adw3-mega-title { letter-spacing: -3px; }

.adw3-mega-title .t-white,

.adw3-mega-title .t-blue-wrap,

.adw3-mega-title .t-mint-wrap { font-size: 50px; }

.adw3-card-circle { width: 160px; height: 160px; }

.adw3-card-num { font-size: 100px; }

.adw3-card-h3 { font-size: 28px !important; }

.adw3-cta { padding: 55px 20px; }

.adw3-cta-h3 { font-size: 38px; letter-spacing: -2px; }

.adw3-cta-eye { font-size: 18px; letter-spacing: 3px; }

.adw3-cta-btns { flex-direction: column; align-items: center; }

.adw3-btn-1, .adw3-btn-2 { width: 100%; justify-content: center; text-align: center; max-width: 400px; }

.adw3-hex-3, .adw3-hex-4 { display: none; }

.adw3-stat-n { font-size: 44px; }

.adw3-hero { margin-bottom: 70px; }

.adw3-cards { margin-bottom: 70px; }

.adw3-stats { margin-bottom: 70px; }

.adw3-cursor { width: 4px; }

.adw3-bg-text span { font-size: clamp(60px, 12vw, 120px); }

}

@media (max-width: 480px) {

.adw3-mega-title .t-white,

.adw3-mega-title .t-blue-wrap,

.adw3-mega-title .t-mint-wrap { font-size: 40px; letter-spacing: -2px; }

.adw3-stats { gap: 12px; }

.adw3-stat { padding: 24px 12px; }

.adw3-stat-n { font-size: 36px; }

.adw3-card-body { padding: 22px 22px 28px; }

.adw3-card-num { font-size: 80px; }

.adw3-card-h3 { font-size: 24px !important; }

.adw3-cta-h3 { font-size: 32px; letter-spacing: -1.5px; }

.adw3-perks { gap: 14px; }

.adw3-perk { padding: 20px; }

.adw3-bg-text span { font-size: 55px; }

.adw3-bg-text { top: 20px; }

}

</style>

<span class= »adw3-bg-l1″>AGENCE</span>

<span class= »adw3-bg-l2″>DUWEB</span>

</div>

<div class= »adw3-surtitle »>Inclus avec chaque site</div>

<span class= »t-line t-white »>Votre Site Web.</span>

</h2>

Chez <strong>Agence-DuWeb</strong>, chaque création de site inclut une stratégie de

référencement naturel complète. Résultat : vous êtes

<strong>visible sur Google dès le lancement</strong>. Pas d’option cachée.

Le SEO fait partie de notre ADN.

</p>

</div>

</div>

<span class= »adw3-card-tag »>Stratégie SEO</span>

<div class= »adw3-card-h3-wrap »><h3 class= »adw3-card-h3″>Analyse & Mots-Clés</h3></div>

Avant de coder une seule ligne, on analyse votre marché, vos concurrents et les

<strong>mots-clés qui génèrent du CA</strong>. Chaque page est

architecturée pour capturer le trafic qualifié. Votre site sera

<strong>conçu pour convertir</strong>.

</p>

</div>

</div>

<span class= »adw3-card-tag »>SEO Technique</span>

<div class= »adw3-card-h3-wrap »><h3 class= »adw3-card-h3″>Performance & Indexation</h3></div>

Vitesse ultra-rapide, <strong>balisage Schema.org</strong>, données structurées,

sitemap optimisé, responsive mobile-first. Tout ce que Google adore,

on l’intègre <strong>nativement</strong>. Du code propre, zéro plugin miracle.

</p>

</div>

</div>

<span class= »adw3-card-tag »>Résultats</span>

<div class= »adw3-card-h3-wrap »><h3 class= »adw3-card-h3″>1ère Page Google</h3></div>

Objectif : <strong>vous positionner là où vos clients cherchent</strong>.

Contenu optimisé, maillage stratégique, Google My Business configuré.

Chaque site est une <strong>machine d’acquisition</strong> dès le Jour 1.

</p>

</div>

<div class= »adw3-stat-l »>Sites livrés avec SEO</div>

</div>

<div class= »adw3-stat-l »>Position Google local</div>

</div>

<div class= »adw3-stat-l »>Trafic à 6 mois</div>

</div>

<div class= »adw3-stat-l »>Supplément SEO</div>

</div>

<div class= »adw3-cta-eye »>⚡ Offre unique en France</div>

Votre concurrent est déjà en<br /><em>première page</em>. Et vous ?

</h3>

Chaque jour sans site optimisé, ce sont des clients qui choisissent quelqu’un d’autre.

On ne vend pas du SEO en option — on le construit dans les fondations de votre site.

</p>

<a href= »/contact/ » class= »adw3-btn-1″>🚀 Demander un Devis Gratuit</a>

<a href= »/nos-realisations/ » class= »adw3-btn-2″>👁 Voir Nos Résultats</a>

</div>

<h4>Audit de mots-clés offert</h4>

<p>Analyse complète de votre secteur, identification des requêtes à fort potentiel commercial</p>

</div>

<h4>Vitesse optimale garantie</h4>

<p>Score PageSpeed > 90 sur mobile et desktop, code ultra-léger sans plugins lourds. Chaque milliseconde compte pour Google et vos visiteurs.</p>

</div>

<h4>Analytics + Search Console</h4>

<p>Configuration complète pour mesurer chaque visite, chaque conversion, chaque euro</p>

</div>

<h4>SEO Local optimisé</h4>

<p>Fiche Google Business, données structurées LocalBusiness, géolocalisation précise</p>

</div>

<h4>Contenu rédactionnel SEO</h4>

<p>Textes optimisés pour vos visiteurs ET pour Google, mots-clés intégrés naturellement. Du copywriting qui vend.</p>

</div>

<h4>Balisage Schema.org</h4>

<p>Rich snippets Google pour booster votre taux de clic et dominer les résultats</p>

</div>

<p>agence web création site internet SEO référencement naturel complet inclus première page Google optimisation moteurs de recherche agence digitale développement web sur mesure site vitrine ecommerce responsive mobile stratégie digitale mots-clés positionnement Google Analytics Search Console données structurées Schema.org audit SEO performance PageSpeed trafic organique conversion leads marketing digital Agence-DuWeb référencement local Google My Business SEO local copywriting</p>

</div>

</section>

(function() {

var els = document.querySelectorAll(‘[data-adw]’);

if (‘IntersectionObserver’ in window) {

var obs = new IntersectionObserver(function(entries) {

entries.forEach(function(e) {

if (e.isIntersecting) {

e.target.classList.add(‘adw3-visible’);

obs.unobserve(e.target);

if (e.target.classList.contains(‘adw3-hero’)) { lancerTW(); }

}

});

}, { threshold: 0.1, rootMargin: ‘0px 0px -20px 0px’ });

els.forEach(function(el) { obs.observe(el); });

} else {

els.forEach(function(el) { el.classList.add(‘adw3-visible’); });

lancerTW();

}

var twOk = false;

function lancerTW() {

if (twOk) return;

twOk = true;

bouclerTW();

}

function bouclerTW() {

var l1 = ‘SEO Complet.’;

var l2 = ‘Zéro Surprise.’;

var e1 = document.getElementById(‘adwType1’);

var e2 = document.getElementById(‘adwType2’);

var c1 = document.getElementById(‘adwCursor1’);

var c2 = document.getElementById(‘adwCursor2’);

e1.textContent = »;

e2.textContent = »;

c1.style.display = ‘inline-block’;

c2.style.display = ‘none’;

typeIt(e1, l1, 65, function() {

setTimeout(function() {

c1.style.display = ‘none’;

c2.style.display = ‘inline-block’;

typeIt(e2, l2, 65, function() {

setTimeout(function() {

c2.style.display = ‘none’;

setTimeout(function() {

deleteIt(e2, 40, function() {

deleteIt(e1, 40, function() {

setTimeout(bouclerTW, 500);

});

}, 300);

}, 2500);

});

}, 350);

});

}

function typeIt(el, txt, spd, cb) {

var i = 0;

(function go() {

if (i < txt.length) {

el.textContent += txt.charAt(i);

i++;

setTimeout(go, spd);

} else if (cb) cb();

})();

}

function deleteIt(el, spd, cb) {

(function go() {

var t = el.textContent;

if (t.length > 0) {

el.textContent = t.slice(0, -1);

setTimeout(go, spd);

} else if (cb) cb();

})();

}

})();

</script>