/* Blocs 21st.dev posés sur l'accueil Webialy (choix d'Hamadi du 21/09/2026), adaptés au bleu #4073e7, Manrope et nos textes. */

/* ---- (2) 21217 « Us vs Them », en trois colonnes : le faire seul / agence classique / Webialy ---- */
.cmp{display:grid;gap:14px;margin-top:40px}
@media(min-width:900px){.cmp{grid-template-columns:1.15fr 1fr 1fr;align-items:start}}
.cmp article{border-radius:22px;background:#fff;border:1.5px solid var(--ligne);padding:26px 24px;display:flex;flex-direction:column;gap:18px}
.cmp article.nous{border-color:#4073e7;box-shadow:0 0 0 4px rgba(64,115,231,.12),0 24px 50px -30px rgba(64,115,231,.55)}
.cmp article.autre{background:#f6f6f2}
.cmp .cmp-tete{display:flex;flex-direction:column;gap:8px}
.cmp .cmp-tete h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmp .autre .cmp-tete h3{color:var(--gris)}
.cmp .cmp-tete p{margin:0;color:var(--gris);font-size:14px}
.cmp .etiq{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--degrade);color:#fff}
.cmp hr{border:0;border-top:1px solid var(--ligne);margin:0}
.cmp ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cmp li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.4}
.cmp li i{flex:0 0 18px;width:18px;height:18px;border-radius:5px;margin-top:2px;display:inline-flex;align-items:center;justify-content:center}
.cmp li i svg{width:11px;height:11px;display:block}
.cmp .nous li i{background:#4073e7;color:#fff}
.cmp .autre li{color:var(--gris)}
.cmp .autre li i{background:#e6e6e0;color:#8a8a84}
.cmp .cmp-pied{margin-top:auto;padding-top:18px;border-top:1px solid var(--ligne)}
.cmp .cmp-pied .btn{width:100%;justify-content:center;box-sizing:border-box}
.cmp .cmp-src{font-size:12px;color:var(--gris);margin:0}

/* ---- (3) 19861 « How It Works » : les 4 étapes en cartes épinglées, reliées par un fil pointillé ---- */
#etapes{position:relative;padding-top:0;overflow:hidden}
#etapes .papier{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(17,17,17,.09) 1px,transparent 1px);background-size:100% 32px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
#etapes .wrap{position:relative;z-index:1}
.epingles{position:relative;max-width:1000px;margin:44px auto 0;display:grid;gap:26px}
@media(min-width:900px){.epingles{display:block;height:840px}}
.epingles .fil{display:none}
@media(min-width:900px){.epingles .fil{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}}
.epingles .fil path{stroke:#b9c6ea;stroke-width:2;stroke-dasharray:8 6;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:fil 3s linear infinite}
@keyframes fil{to{stroke-dashoffset:-140}}
@media(prefers-reduced-motion:reduce){.epingles .fil path{animation:none}}
.ep{position:relative;width:100%;transition:transform .3s var(--ease)}
.ep:hover{z-index:3;transform:scale(1.04)}
.ep>div{background:#fff;padding:10px;border-radius:26px;border:1px solid var(--ligne);box-shadow:0 18px 40px -22px rgba(17,17,17,.35)}
.ep .pin{width:30px;height:30px;display:block;margin:0 auto 14px;color:#4073e7}
.ep .int{border-radius:16px;padding:18px 16px 16px;background:#e8efff;border:1px solid #d6e2ff;display:flex;flex-direction:column;gap:8px}
.ep.v2 .int{background:#efeaff;border-color:#e0d6ff}.ep.v2 .pin{color:#7b5cf0}.ep.v2 .num{color:#7b5cf0}
.ep.v3 .int{background:#e6f6ff;border-color:#cdeaff}.ep.v3 .pin{color:#2a9fd6}.ep.v3 .num{color:#2a9fd6}
.ep .num{font-family:"Syne","Manrope",sans-serif;font-weight:800;font-size:36px;line-height:1;color:#4073e7;letter-spacing:-.02em}
.ep h3{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.ep p{margin:0;color:var(--gris);font-size:14px;line-height:1.45}
.ep small{align-self:flex-start;margin-top:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--noir);background:#fff;border-radius:999px;padding:4px 10px}
@media(min-width:900px){
  .ep{position:absolute;width:290px;z-index:1}
  .ep.e1{top:0;left:15%;transform:rotate(6deg)}.ep.e2{top:120px;right:15%;transform:rotate(-6deg)}.ep.e3{top:450px;left:15%;transform:rotate(6deg)}.ep.e4{top:570px;right:10%;transform:rotate(-6deg)}
  .ep.e1:hover{transform:rotate(6deg) scale(1.05)}.ep.e2:hover{transform:rotate(-6deg) scale(1.05)}.ep.e3:hover{transform:rotate(6deg) scale(1.05)}.ep.e4:hover{transform:rotate(-6deg) scale(1.05)}
}

/* ---- (4) 6541 « Bento » : une tuile par métier, avec l'option qui compte pour lui. Version claire (retours d'Hamadi du 21/09 : ni noir, ni dégradé sous la photo, on doit lire d'un coup d'œil) ---- */
.bento{display:grid;gap:12px}
@media(min-width:900px){.bento{grid-template-columns:repeat(6,1fr)}.bento>a{grid-column:span 3}.bento>a.b2{grid-column:span 2}}
.bento>a{position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#fff;border:1.5px solid var(--ligne);color:var(--noir);text-decoration:none;min-height:340px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.bento>a:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(64,115,231,.45)}
.bento .img{position:relative;height:200px;flex:none;overflow:hidden}
@media(min-width:900px){.bento .img{height:230px}}
.bento .img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.bento>a:hover .img img{transform:scale(1.05)}
.bento .txt{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.bento .txt b{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#4073e7}
.bento .txt h3{margin:2px 0 0;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--noir)}
.bento .txt p{margin:0;font-size:14px;line-height:1.45;color:var(--gris)}
.bento .txt span{margin-top:auto;padding-top:12px;font-size:13px;font-weight:800;color:#4073e7;display:inline-flex;align-items:center;gap:6px}
.bento .txt span::after{content:"→";transition:transform .25s var(--ease)}
.bento>a:hover .txt span::after{transform:translateX(4px)}
.bento>a.autres{background:var(--degrade);border:0;color:#fff;justify-content:flex-end;min-height:220px}
.bento>a.autres .txt{padding:26px 24px}
.bento>a.autres .txt b{color:rgba(255,255,255,.78)}.bento>a.autres .txt h3{font-size:clamp(24px,2.4vw,32px);color:#fff}.bento>a.autres .txt p{color:rgba(255,255,255,.85)}.bento>a.autres .txt span{color:#fff}

/* ---- (5) 1195 « Stats Section with Text » : nos quatre chiffres, à gauche le texte, à droite 2 × 2 cartes ---- */
#chiffres{padding-top:0}
.chiffres{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.chiffres{grid-template-columns:1fr 1fr;gap:56px}}
.chiffres .lead{margin-top:14px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats>div{border:1.5px solid var(--ligne);border-radius:18px;background:#fff;padding:20px 18px;display:flex;flex-direction:column;gap:2px;min-height:150px}
.stats>div i{width:16px;height:16px;display:block;margin-bottom:auto;color:#4073e7}
.stats>div i svg{width:16px;height:16px;display:block}
.stats>div b{font-family:"Syne","Manrope",sans-serif;font-weight:800;font-size:clamp(32px,3.2vw,44px);letter-spacing:-.03em;line-height:1;margin-top:18px;display:flex;align-items:flex-end;gap:8px;color:var(--noir)}
.stats>div b small{font-family:"Manrope",sans-serif;font-size:13px;font-weight:700;letter-spacing:0;color:#4073e7;padding-bottom:4px}
.stats>div p{margin:6px 0 0;color:var(--gris);font-size:14px;line-height:1.4}
@media(max-width:420px){.stats{gap:8px}.stats>div{padding:16px 14px;min-height:130px}}

/* ---- (6) 18475 « Call to Action » : le dernier appel sobre, une boîte douce, tout centré ---- */
#appel{padding-top:0}
.appel{border-radius:26px;background:#eef2fb;border:1.5px solid #dde5f8;padding:clamp(44px,6vw,80px) 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.appel h2{margin:0;max-width:22ch;text-wrap:balance}
.appel p{margin:0;max-width:56ch;text-wrap:balance;color:var(--gris);font-size:clamp(16px,1.3vw,19px)}
.appel .btn{margin-top:12px}

/* ---- (7) Bandeau « Vous avez déjà un site ? » avec le curseur avant / après (idée du troisième œil, curseur de la proposition 4) ---- */
#refonte{padding-top:0}
.refonte{display:grid;gap:32px;align-items:center;border-radius:26px;background:#fff;border:1.5px solid var(--ligne);padding:clamp(24px,4vw,48px)}
@media(min-width:900px){.refonte{grid-template-columns:1.1fr .9fr;gap:48px}}
.refonte .lead{margin-top:14px}
.refonte .lien{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:800;color:#4073e7;text-decoration:none}
.refonte .lien::after{content:"→";transition:transform .25s var(--ease)}.refonte .lien:hover::after{transform:translateX(4px)}
.refonte .compare{max-width:420px;margin-inline:auto;width:100%}
.refonte>div:last-child{display:flex;flex-direction:column;align-items:center}
.refonte .legende{margin:14px auto 0;max-width:420px;font-size:13px;line-height:1.45;color:var(--gris);text-align:center}
/* avant / après (curseur de la proposition 4) */
.compare{position:relative;border-radius:22px;overflow:hidden;background:#fff;aspect-ratio:4/5;max-width:100%;user-select:none;touch-action:none;box-shadow:0 30px 60px -30px rgba(17,18,20,.45);border:1px solid var(--ligne)}
.compare .apres,.compare .avant{position:absolute;inset:0}
.compare .apres img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.compare .avant{background:#efefef;font-family:"Times New Roman",serif;color:#333;overflow:hidden;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.compare .moche{padding:14px;font-size:13px;line-height:1.35}.compare .moche .barre{display:flex;justify-content:space-between;background:#3b5998;color:#fff;padding:8px;font-weight:700;font-size:12px}.compare .moche h4{margin:14px 0 6px;color:#c00;font-size:18px;text-decoration:underline}.compare .moche .gif{display:inline-block;background:#ff0;border:2px dashed red;padding:4px 8px;font-weight:700;margin-top:10px;animation:clig 1s steps(2) infinite}.compare .moche .compteur{margin-top:18px;font-size:11px;color:#777}
@keyframes clig{to{opacity:.3}}
.compare .barre-v{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.compare .poignee{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--degrade);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 10px 24px rgba(64,115,231,.45);cursor:ew-resize;font-size:18px}
.compare .lab{position:absolute;top:14px;font-size:12px;font-weight:800;padding:6px 10px;border-radius:999px;background:rgba(17,18,20,.8);color:#fff}.compare .lab.a{left:14px}.compare .lab.b{right:14px;background:var(--degrade)}

/* le « après » du curseur : un vrai mini-site, pas une photo (retour d'Hamadi du 21/09) */
.compare .apres{background:#fbfbf8;overflow:hidden}
.compare .neuf{position:absolute;inset:0;display:flex;flex-direction:column;font-family:"Manrope",system-ui,sans-serif;color:#111}
.compare .n-nav{display:flex;justify-content:space-between;align-items:center;background:#111;color:#fff;padding:10px 12px;font-size:12px}.compare .n-nav b{font-weight:800}.compare .n-nav span{background:#4073e7;border-radius:999px;padding:5px 10px;font-weight:800;font-size:11px}
.compare .n-hero{padding:14px 12px 10px}.compare .n-hero small{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#4073e7;margin-bottom:6px}.compare .n-hero h5{margin:0 0 6px;font-size:19px;line-height:1.1;letter-spacing:-.02em;font-weight:800}.compare .n-hero p{margin:0 0 10px;font-size:12px;line-height:1.35;color:#6b6b66}.compare .n-hero i{display:inline-block;font-style:normal;font-weight:800;font-size:12px;color:#fff;background:linear-gradient(135deg,#4073e7,#7b5cf0);border-radius:999px;padding:8px 12px}
.compare .n-avis{margin:0 12px;padding:8px 10px;border-radius:10px;background:#fff3c4;color:#7a5a00;font-size:12px;font-weight:700}.compare .n-avis b{font-weight:800}
.compare .n-photo{margin:10px 12px 0;flex:1;min-height:60px;border-radius:12px;overflow:hidden}.compare .n-photo img{width:100%;height:100%;object-fit:cover;display:block}
.compare .n-pills{display:flex;gap:6px;padding:10px 12px 12px;flex-wrap:wrap}.compare .n-pills span{font-size:11px;font-weight:700;border:1px solid #e4e3dc;border-radius:999px;padding:4px 9px;background:#fff}

.compare .lab{top:auto;bottom:14px}

/* ---- (8) « Ce que vous n'aurez jamais à faire » (idée du troisième œil) : huit corvées barrées, en clair ---- */
#jamais{padding-top:0}
.jamais{display:grid;gap:10px;margin-top:36px}
@media(min-width:700px){.jamais{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.jamais{grid-template-columns:repeat(4,1fr)}}
.jamais>div{background:#fff;border:1.5px solid var(--ligne);border-radius:18px;padding:20px 18px;display:flex;flex-direction:column;gap:10px}
.jamais>div i{width:34px;height:34px;border-radius:10px;background:#eef2fb;color:#4073e7;display:grid;place-items:center}
.jamais>div i svg{width:18px;height:18px}
.jamais>div b{font-size:16px;font-weight:800;letter-spacing:-.01em;text-decoration:line-through;text-decoration-color:#4073e7;text-decoration-thickness:2px}
.jamais>div p{margin:0;font-size:14px;color:var(--gris);line-height:1.4}

/* ---- (9) « La preuve, honnêtement » (idée du troisième œil) : ce qu'on dit sans client, et ce qu'on peut prouver aujourd'hui ---- */
#preuve{padding-top:0}
.preuve{display:grid;gap:28px;align-items:start}
@media(min-width:900px){.preuve{grid-template-columns:1fr 1fr;gap:48px}}
.preuve .honnete{background:#fff;border:1.5px solid var(--noir);border-radius:22px;padding:26px 24px}
.preuve .honnete b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.preuve .honnete p{margin:0;color:#3b3b38;font-size:15px;line-height:1.5}.preuve .honnete p+p{margin-top:10px}
.preuves{display:grid;gap:10px}
.preuves>a,.preuves>div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;background:#fff;border:1.5px solid var(--ligne);border-radius:18px;padding:18px;color:var(--noir);text-decoration:none;transition:border-color .2s}
.preuves>a:hover{border-color:#4073e7}
.preuves i{width:36px;height:36px;border-radius:10px;background:#eef2fb;color:#4073e7;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:15px}
.preuves b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em}
.preuves p{margin:4px 0 0;font-size:14px;color:var(--gris);line-height:1.4}
.preuves span{display:inline-block;margin-top:6px;font-size:13px;font-weight:800;color:#4073e7}

/* (10) la vitesse en grand, 26/09 : d'après Number Ticker 05 (21st.dev, shadcnspace), chiffre mesuré chez le visiteur */
#vitesse{padding-top:0}
.vit{display:grid;gap:26px;align-items:center;border-radius:26px;background:#fff;border:1.5px solid var(--ligne);padding:clamp(24px,4vw,52px)}
@media(min-width:900px){.vit{grid-template-columns:1fr 1fr;gap:56px}}
.vit .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vit-live{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;font-size:14px;font-weight:700;color:var(--gris)}
.pouls{position:relative;width:12px;height:12px;flex:none}
.pouls::before,.pouls::after{content:"";position:absolute;inset:0;border-radius:50%;background:#16a34a}
.pouls::before{opacity:.6;animation:vit-pouls 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes vit-pouls{75%,100%{transform:scale(2.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.pouls::before{animation:none}}
.vit.lent .pouls::before,.vit.lent .pouls::after{background:#ea580c}
.vit-nb{font-family:"Syne","Manrope",sans-serif;font-weight:800;font-size:clamp(96px,24vw,190px);line-height:1;letter-spacing:-.05em;display:flex;align-items:flex-end;margin-top:4px;min-height:1em}
.vit-nb .ch{display:inline-block;height:1em;overflow:hidden}
.vit-nb .pile{display:block;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.vit-nb .pile i{display:block;height:1em;font-style:normal}
.vit-nb .pile i,.vit-nb .virg{background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.vit-nb .u{font-family:"Manrope",sans-serif;font-size:.3em;letter-spacing:0;font-weight:800;color:#4073e7;margin:0 0 .3em .14em}
.vit.lent .vit-nb .pile i,.vit.lent .vit-nb .virg{background:linear-gradient(135deg,#ea580c,#f59e0b);-webkit-background-clip:text;background-clip:text}
.vit.lent .vit-nb .u{color:#ea580c}
.vit-leg{margin:8px 0 0;color:var(--gris);font-size:15px;line-height:1.5;max-width:430px}
.vit .jauge{margin-top:40px}
.vit .piste{position:relative;height:12px;border-radius:999px;background:#eef1f8}
.vit .rempli{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--degrade);transition:width 1.4s cubic-bezier(.16,1,.3,1)}
.vit.lent .rempli{background:linear-gradient(90deg,#f59e0b,#ea580c)}
.vit .seuil{position:absolute;left:83.333%;top:-8px;bottom:-8px;width:2px;border-radius:2px;background:var(--noir)}
.vit .seuil em{position:absolute;bottom:calc(100% + 6px);right:-2px;white-space:nowrap;font-style:normal;font-size:12px;font-weight:800;color:var(--noir)}
.vit .grad{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;font-weight:700;color:var(--gris)}
.vit-note{margin:24px 0 0;font-weight:700;line-height:1.5}
.vit-src{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--gris)}

/* (11) le vérificateur de fiche Google, 26/09 */
.verif{display:grid;gap:30px;align-items:center;border-radius:26px;background:#fff;border:1.5px solid var(--ligne,#e4e3dc);padding:clamp(24px,4vw,52px)}
@media(min-width:900px){.verif{grid-template-columns:1.1fr .9fr;gap:56px}}
.verif .lead{margin-top:14px}
.verif .verif-form{margin-top:24px}
.verif-note{font-size:13px;color:var(--gris);margin:0;line-height:1.45}
.verif-ok{margin-top:24px;border-radius:18px;background:#e8efff;padding:20px 22px;outline:none}
.verif-ok b{font-size:20px;font-weight:800;color:#2d54c8}
.verif-ok p{margin:6px 0 0;line-height:1.5}
.verif-carte{border-radius:22px;background:#fff;border:1.5px solid var(--ligne,#e4e3dc);box-shadow:0 30px 60px -30px rgba(17,18,20,.35);padding:22px;max-width:420px;margin-inline:auto}
.vc-tete{display:flex;align-items:center;gap:12px}
.vc-g{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--degrade);color:#fff;font-weight:800;font-size:15px;flex:none}
.vc-tete b{display:block;font-size:16px}
.vc-tete small{color:var(--gris);font-size:13px}
.vc-etq{margin:18px 0 10px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#4073e7}
.verif-carte ol{margin:0;padding:0;list-style:none;counter-reset:vc;display:grid;gap:14px}
.verif-carte li{counter-increment:vc;display:grid;grid-template-columns:28px 1fr;gap:4px 12px;align-items:start}
.verif-carte li::before{content:counter(vc);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:#e8efff;color:#2d54c8;font-weight:800;font-size:14px;display:grid;place-items:center}
.verif-carte li b{font-size:15px;line-height:1.3}
.verif-carte li span{color:var(--gris);font-size:14px;line-height:1.45}
#fiche{padding-top:0}
/* 28/09/2026 : tuile pleine largeur (la 9e tuile de l’accueil, « Et 17 autres ») */
@media(min-width:900px){.bento>a.large{grid-column:1/-1}}