/* Webialy, socle des pages intérieures (bloc 1, 21/09/2026). Téléphone d'abord. Palette bleu doux du 20/09 (bleu.css). */
@font-face{font-family:"Manrope";src:url(polices/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--t2-fond:#fff;--t2-texte:#111;--t2-accent:#4073e7;--t2-ligne:#e4e3dc;--t2-bouton:#111;--t2-bouton-texte:#fff;--blanc:#fbfbf8;--noir:#111111;--gris:#6b6b66;--ligne:#e4e3dc;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--noir);font-family:"Manrope",system-ui,sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.d{font-weight:800;letter-spacing:-.035em}
h1.d{font-family:"Syne","Manrope",sans-serif;letter-spacing:-.03em}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.r{background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.sur{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--bleu);margin-bottom:14px}
.lead{color:var(--gris);font-size:clamp(17px,1.4vw,20px);max-width:52ch}
/* barre du haut */
.nav{position:sticky;top:0;z-index:30;background:var(--noir);color:#fff}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;height:56px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;gap:10px}
.nav #logo svg{height:26px;width:auto;display:block}.nav #logo .lettre,.nav #logo .branche{fill:#fff}.nav #logo .trou{fill:var(--noir)}.nav #logo .fleche{fill:var(--bleu)}
.nav ul{list-style:none;margin:0;padding:0;display:none;gap:22px;align-items:center}
.nav ul a.rouge{color:#8fb4ff}
.nav .droite{display:flex;align-items:center;gap:8px}
.nav .cta{background:var(--degrade);color:#fff;border-radius:999px;padding:9px 14px;font-size:12px;letter-spacing:.04em;white-space:nowrap}
.nav .burger{background:none;border:0;color:#fff;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;padding:0}
.nav .burger i{display:block;width:22px;height:2px;background:#fff;position:relative;transition:.3s}.nav .burger i::before,.nav .burger i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;transition:.3s}.nav .burger i::before{top:-7px}.nav .burger i::after{top:7px}
body.menu-ouvert .nav .burger i{background:transparent}body.menu-ouvert .nav .burger i::before{transform:rotate(45deg);top:0}body.menu-ouvert .nav .burger i::after{transform:rotate(-45deg);top:0}
.menu{position:fixed;inset:56px 0 0;background:var(--noir);color:#fff;z-index:29;padding:24px 20px 40px;overflow:auto;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.35s var(--ease)}
body.menu-ouvert .menu{transform:none;opacity:1;pointer-events:auto}
.menu a{display:block;padding:14px 0;border-bottom:1px solid #2a2a2a;font-family:"Syne","Manrope",sans-serif;font-weight:700;font-size:24px;letter-spacing:-.02em}
.menu .sous{padding:6px 0 10px 16px;display:grid;gap:2px}.menu .sous a{font-family:"Manrope",sans-serif;font-size:16px;font-weight:600;padding:8px 0;border:0;color:#cfcfcf}
.menu .cta{display:inline-block;margin-top:24px;background:var(--degrade);border-radius:999px;padding:16px 24px;font-size:16px;font-weight:800;border:0}
@media(min-width:900px){.nav ul{display:flex}.nav .burger,.menu{display:none}.nav .cta{padding:10px 18px}}
/* fil d'Ariane */
.fil{font-size:13px;color:var(--gris);padding:14px 0 0;display:flex;flex-wrap:wrap;gap:6px}.fil a:hover{color:var(--bleu)}.fil span::before{content:"›";margin:0 2px}
/* héros de page : 4 éléments max */
.hero{padding:clamp(28px,6vw,80px) 0 0;position:relative;overflow:hidden}
.hero .tag{display:inline-block;border:1.5px solid var(--noir);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;margin-bottom:22px;opacity:0;animation:up .8s var(--ease) forwards}
.hero h1{font-size:clamp(32px,6.4vw,72px);line-height:1.02;opacity:0;animation:up .9s var(--ease) .1s forwards}
.hero h1 .r{display:inline}
.hero p.lead{margin:20px 0 26px;opacity:0;animation:up .9s var(--ease) .3s forwards}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:up .9s var(--ease) .45s forwards}
.hero .visuel{margin:34px auto 0;max-width:420px;opacity:0;animation:up 1s var(--ease) .5s forwards}
.hero .visuel img{width:100%;height:auto;display:block;border-radius:22px;box-shadow:0 30px 60px -30px rgba(17,18,20,.45);border:1px solid var(--ligne)}
.hero .visuel figcaption{text-align:center;font-size:13px;color:var(--gris);margin-top:10px}
@media(min-width:900px){.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}.hero .visuel{margin:0;justify-self:end;width:100%}.hero h1{font-size:clamp(40px,4.6vw,64px)}}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--noir);color:#fff;border-radius:999px;padding:16px 26px;font-weight:800;font-size:15px;border:0;cursor:pointer;font-family:inherit;transition:transform .2s}
.btn:hover{transform:scale(1.04)}
.btn.rouge{background:var(--degrade);box-shadow:0 12px 30px -12px rgba(64,115,231,.8)}
.btn.blanc{background:#fff;color:var(--noir);border:1.5px solid var(--noir)}
.btn.fil{background:none;color:var(--noir);padding:16px 6px;text-decoration:underline;text-underline-offset:4px}
section{padding-block:clamp(56px,9vw,120px)}
section.serre{padding-block:clamp(36px,6vw,80px)}
section.fond{background:#fff;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
section.nuit{background:var(--noir) radial-gradient(70% 60% at 50% 0%,rgba(64,115,231,.45),transparent 65%);color:#fff}
section.nuit .lead{color:#c9cdd6}
h2{font-size:clamp(30px,5.4vw,60px);line-height:1}
h3{font-size:clamp(19px,2vw,24px);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.entete{margin-bottom:clamp(26px,4vw,44px)}.entete .lead{margin-top:14px}
/* bande de mots qui défile */
.bande{background:var(--degrade);color:#fff;overflow:hidden;padding:12px 0}
.bande .file{display:flex;gap:40px;width:max-content;white-space:nowrap;font-weight:800;font-size:clamp(16px,2vw,24px);animation:file 30s linear infinite}
.bande .file span::after{content:"✦";margin-left:40px;font-size:.7em;vertical-align:middle}
@keyframes file{to{transform:translateX(-50%)}}
/* les pages de votre site (structure type) */
.pages{display:grid;gap:10px}
.pages>div{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:16px}
.pages b.n{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--bleu-pale);color:var(--bleu);font-size:17px}
.pages h3{font-size:17px}.pages p{color:var(--gris);font-size:15px;margin-top:4px}
@media(min-width:700px){.pages{grid-template-columns:1fr 1fr}}
/* options : communes ou spécifiques au métier */
.options{display:grid;gap:10px}
.opt{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:16px 18px}
.opt b{display:block;font-size:16px}.opt small{display:block;color:var(--gris);font-size:14px;margin-top:2px}
.opt .px{font-weight:800;white-space:nowrap;font-size:15px}.opt .px.maq{color:var(--bleu);font-size:12px;text-transform:uppercase;letter-spacing:.06em;max-width:9ch;text-align:right;line-height:1.2}
.opt.inclus{border-color:var(--bleu);background:var(--bleu-pale)}
.opt.a-chiffrer{grid-template-columns:1fr;gap:8px}.opt.a-chiffrer .px.maq{max-width:none;text-align:left;white-space:normal}
details.plus{margin-top:12px}details.plus summary{cursor:pointer;font-weight:800;color:var(--bleu);list-style:none;padding:12px 0}details.plus summary::-webkit-details-marker{display:none}details.plus summary::after{content:" +";}details.plus[open] summary::after{content:" −"}
@media(min-width:700px){.options{grid-template-columns:1fr 1fr}}
/* frise 4 étapes */
.frise{display:grid;gap:0;position:relative;counter-reset:etape}
.frise>div{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--ligne);counter-increment:etape}
.frise>div::before{content:counter(etape);width:40px;height:40px;border-radius:50%;background:var(--degrade);color:#fff;display:grid;place-items:center;font-weight:800}
.frise h3{font-size:18px}.frise p{color:var(--gris);font-size:15px;margin-top:4px}.frise small{display:inline-block;margin-top:8px;font-size:12px;font-weight:800;color:var(--bleu);text-transform:uppercase;letter-spacing:.08em}
@media(min-width:900px){.frise{grid-template-columns:repeat(4,1fr);gap:24px}.frise>div{grid-template-columns:1fr;border-top:2px solid var(--noir);padding-top:20px}}
/* garanties, 4 cartes */
.garanties{display:grid;gap:10px}
.garanties>div{background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:18px}
.garanties b{display:block;font-size:17px;margin-bottom:4px}.garanties p{color:var(--gris);font-size:15px}
.garanties .ico{width:34px;height:34px;border-radius:10px;background:var(--bleu-pale);color:var(--bleu);display:grid;place-items:center;font-weight:800;margin-bottom:12px}
section.nuit .garanties>div{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}section.nuit .garanties p{color:#c9cdd6}section.nuit .garanties .ico{background:rgba(255,255,255,.12);color:#fff}
@media(min-width:700px){.garanties{grid-template-columns:1fr 1fr}}@media(min-width:1000px){.garanties{grid-template-columns:repeat(4,1fr)}}
/* prix, la grille du socle */
.grille-prix{display:grid;gap:14px}
.carte-prix{background:#fff;border:1.5px solid var(--noir);border-radius:22px;padding:24px 22px;position:relative}
.carte-prix.star{border:0;background:var(--noir);color:#fff;box-shadow:0 30px 60px -30px rgba(64,115,231,.6)}
.carte-prix .etq{position:absolute;top:-12px;left:20px;background:var(--degrade);color:#fff;font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.carte-prix .gros{font-weight:800;font-size:clamp(44px,10vw,64px);letter-spacing:-.05em;line-height:.95;margin:8px 0 4px}.carte-prix .gros small{font-size:16px;letter-spacing:0;font-weight:700}
.carte-prix ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px;font-size:15px}.carte-prix li{display:grid;grid-template-columns:auto 1fr;gap:10px}.carte-prix li::before{content:"→";color:var(--bleu);font-weight:800}
.carte-prix .btn{margin-top:20px;width:100%;justify-content:center}
@media(min-width:900px){.grille-prix{grid-template-columns:1fr 1fr}}
/* tableau du marché */
.marche{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--ligne)}
.marche th,.marche td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--ligne);vertical-align:top}.marche th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--gris)}.marche tr.nous td{background:var(--bleu-pale);font-weight:700}
.tab{overflow-x:auto}
@media(max-width:699px){.marche thead{display:none}.marche,.marche tbody,.marche tr,.marche td{display:block}.marche tr{padding:14px 16px;border-bottom:1px solid var(--ligne)}.marche td{padding:3px 0;border:0}.marche td::before{content:attr(data-l) " : ";font-weight:800;color:var(--gris);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.marche td:first-child{font-weight:800;font-size:17px;padding-bottom:6px}.marche td:first-child::before{content:none}.marche tr.nous td{background:none}.marche tr.nous{background:var(--bleu-pale)}}
/* 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)}
/* exemples : cartes de démos */
.demos{display:grid;gap:14px}
.demo{background:#fff;border:1px solid var(--ligne);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:110px 1fr}
.demo img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;aspect-ratio:3/4}
.demo>div{padding:16px}.demo b{display:block;font-size:17px}.demo small{display:block;color:var(--gris);font-size:14px;margin-top:4px}.demo .pt{display:inline-block;margin-top:10px;font-size:12px;font-weight:800;color:var(--bleu);text-transform:uppercase;letter-spacing:.06em}
.demo .prov{display:inline-block;font-size:11px;font-weight:800;background:#fff3c4;color:#7a5a00;padding:3px 8px;border-radius:999px;margin-top:8px}
@media(min-width:700px){.demos{grid-template-columns:1fr 1fr}}
/* preuves honnêtes */
.honnete{background:#fff;border:1.5px solid var(--noir);border-radius:20px;padding:22px}
.honnete b{display:block;font-size:18px;margin-bottom:8px}.honnete p{color:#3b3b38;font-size:15px}
.honnete p+p{margin-top:8px}
/* FAQ, réservoir de vraies questions */
.faq{border-top:2px solid var(--noir)}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr 28px;gap:12px;align-items:center;padding:18px 0;font-weight:800;font-size:17px;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";width:28px;height:28px;border-radius:50%;border:1.5px solid var(--noir);display:grid;place-items:center;font-weight:700;transition:.25s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--noir);color:#fff}
.faq .rep{padding:0 40px 20px 0;color:#3b3b38;font-size:15px;line-height:1.55}.faq .rep p+p{margin-top:8px}
/* voisins (maillage) */
.voisins{display:grid;gap:10px}
.voisins a{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:10px 14px 10px 10px;transition:.25s var(--ease)}
.voisins a:hover{border-color:var(--bleu);transform:translateX(4px)}
.voisins img{width:64px;height:64px;object-fit:cover;border-radius:12px}
.voisins b{display:block;font-size:16px}.voisins small{color:var(--gris);font-size:13px}.voisins span{font-weight:800;color:var(--bleu)}
@media(min-width:700px){.voisins{grid-template-columns:1fr 1fr}}
/* formulaire */
.form{display:grid;gap:12px;max-width:560px;margin-top:28px}
.form label{display:grid;gap:6px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
.form input,.form textarea,.form select{background:#fff;border:2px solid var(--noir);border-radius:0;padding:16px;font:inherit;font-size:16px;color:var(--noir)}
.form input:focus,.form textarea:focus{outline:3px solid var(--bleu);outline-offset:2px}
.form .note{font-size:13px;color:var(--gris)}
.form .err{color:#b00020;font-weight:700;font-size:14px;display:none}
section.nuit .form input,section.nuit .form textarea{border-color:#fff}
/* texte long (mentions, confidentialité) */
.texte{max-width:70ch}.texte h2{font-size:clamp(22px,3vw,30px);margin:34px 0 10px}.texte p,.texte li{font-size:16px;color:#2b2b28}.texte p+p{margin-top:10px}.texte ul{padding-left:20px;margin:8px 0}
/* pied de page complet */
footer{border-top:2px solid var(--noir);padding:40px 0 30px;font-size:14px}
footer .cols{display:grid;gap:26px}
footer h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--gris)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}footer li a:hover{color:var(--bleu)}
footer .bas{margin-top:30px;padding-top:18px;border-top:1px solid var(--ligne);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;color:var(--gris);font-size:13px}
footer #logo-pied svg{height:24px;width:auto}footer #logo-pied .lettre,footer #logo-pied .branche{fill:var(--noir)}footer #logo-pied .trou{fill:var(--blanc)}footer #logo-pied .fleche{fill:var(--bleu)}
.vitesse{display:inline-flex;align-items:center;gap:6px;font-weight:700}.vitesse i{width:8px;height:8px;border-radius:50%;background:#1db954;display:inline-block}
@media(min-width:700px){footer .cols{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}

/* 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}