/* Clic'N Start — Landing Création de site. Scopé .cns-creation ; réutilise la grammaire de accueil.css (chargé avant). */
.cns-creation{min-height:100vh;margin:0;background:#f3f2f2 repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/12 - 1px),rgba(32,30,29,.055) calc(100%/12 - 1px),rgba(32,30,29,.055) calc(100%/12));color:#201e1d;font-family:"Archivo",system-ui,sans-serif;font-size:16px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
.cns-creation *,.cns-creation *::before,.cns-creation *::after{box-sizing:border-box}
.cns-creation h1,.cns-creation h2,.cns-creation h3,.cns-creation p{margin:0;padding:0}
.cns-creation a{color:#ae4a2c;text-decoration:none}
.cns-creation a:focus-visible,.cns-creation input:focus-visible,.cns-creation summary:focus-visible,.cns-creation button:focus-visible{outline:2px solid #e2673f;outline-offset:2px}

/* fil d'ariane */
.cns-crumb{margin:0 0 40px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cns-crumb a{color:inherit}

/* hero inversé */
.cns-hero-dark{background:#201e1d;color:#f3f2f2}
.cns-hero-dark .cns-crumb{color:#9b9797}.cns-hero-dark .cns-crumb span:last-child{color:#f3f2f2}
.cns-hero-dark-grid{display:grid;grid-template-columns:8fr 4fr;gap:40px;align-items:end;padding:48px 24px}
.cns-hero-dark .cns-h1,.cns-hero-dark .cns-spec strong,.cns-hero-dark h1{color:#f3f2f2}
.cns-hero-dark .cns-h1{font-size:clamp(44px,8vw,128px);line-height:.9}
.cns-hero-dark .cns-h1 em{color:#f8a58a}
.cns-hero-dark .cns-lead{color:#c9c5c5;font-size:clamp(17px,1.5vw,21px);line-height:1.4}
.cns-hero-dark .cns-spec{border-top:2px solid #f3f2f2}
.cns-hero-dark .cns-spec > div{border-right:1px solid #605d5d}
.cns-hero-dark .cns-spec small{color:#9b9797}
.cns-spec-cta{padding:24px;background:#f8a58a;color:#201e1d;display:flex;flex-direction:column;justify-content:space-between;gap:12px;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.cns-spec-cta:hover{background:#f3f2f2}
.cns-spec-cta span:last-child{font-size:28px;line-height:1;align-self:flex-end}

/* fiche technique comparée */
.cns-offres-head{padding:72px 24px 40px;max-width:800px}
.cns-offres-head .cns-h2{margin-bottom:18px}
.cns-fiche{border-top:2px solid #201e1d}
.cns-fiche-head,.cns-fiche-row,.cns-fiche-foot{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr}
.cns-fiche-head{border-bottom:2px solid #201e1d}
.cns-fiche-head > span{padding:22px 24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#605d5d;border-right:2px solid #201e1d}
.cns-fiche-head > div{position:relative;padding:28px 24px 22px;border-right:2px solid #201e1d}
.cns-fiche-head > div:last-child,.cns-fiche-row > span:last-child,.cns-fiche-foot > div:last-child{border-right:0}
.cns-fiche-head p{margin:8px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#605d5d}
.cns-fiche-head h3{font-weight:800;font-size:clamp(20px,1.9vw,26px);line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.cns-badge{position:absolute;top:-2px;left:24px;background:#e2673f;color:#f3f2f2;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:6px 12px}
.cns-fiche-row{border-bottom:1px solid #201e1d;transition:background .2s}
.cns-fiche-row:hover{background:#eae9e9}
.cns-fiche-row > span{padding:16px 24px;font-size:15px;border-right:2px solid #201e1d;color:#444141}
.cns-fiche-row > span:first-child{font-weight:600;color:#201e1d}
.cns-fiche-foot{border-bottom:2px solid #201e1d}
.cns-fiche-foot > span{padding:28px 24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#605d5d;border-right:2px solid #201e1d}
.cns-fiche-foot > div{padding:24px;border-right:2px solid #201e1d;display:grid;gap:16px;align-content:start}
.cns-price{font-weight:800;font-size:clamp(30px,3vw,44px);letter-spacing:-.04em;line-height:1}
.cns-price small{font-weight:400;font-size:.4em;letter-spacing:.08em;margin-left:8px}
.cns-delay{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.cns-offer-btn{display:flex;justify-content:space-between;gap:12px;padding:16px 20px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;border:2px solid #201e1d;color:#201e1d;transition:background .2s,color .2s}
.cns-offer-btn:hover{background:#201e1d;color:#f3f2f2}
.cns-featured{background:#201e1d;color:#f3f2f2}
.cns-featured p,.cns-fiche-head .cns-featured p{color:#f8a58a}
.cns-fiche-row > span.cns-featured{background:#eae9e9;color:#201e1d}
.cns-featured .cns-offer-btn{background:#f8a58a;border-color:#f8a58a;color:#201e1d}
.cns-featured .cns-offer-btn:hover{background:#f3f2f2;border-color:#f3f2f2}
/* fiche mobile : une carte par offre */
.cns-fiche-mobile{display:none;border-top:2px solid #201e1d}
.cns-fiche-mobile article{padding:28px 24px 32px;border-bottom:2px solid #201e1d;display:grid;gap:14px}
.cns-fiche-mobile .cns-badge{position:static;justify-self:start}
.cns-fiche-mobile p.cns-who{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#605d5d}
.cns-fiche-mobile .cns-featured p.cns-who{color:#f8a58a}
.cns-fiche-mobile h3{font-weight:800;font-size:26px;line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.cns-fiche-mobile ul{list-style:none;margin:0;padding:0;border-top:1px solid currentColor}
.cns-fiche-mobile li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid currentColor;font-size:15px}
.cns-fiche-mobile li::before{content:"→";color:#e2673f;font-weight:800}

/* réalisations : bande */
.cns-works-head{padding:72px 24px 40px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px}
.cns-works-head > div{max-width:720px}
.cns-works-hint{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#605d5d}
.cns-strip{container-type:inline-size;display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px 40px;border-top:2px solid #201e1d;background:#201e1d;scrollbar-width:none}
.cns-strip::-webkit-scrollbar{display:none}
.cns-work{flex:0 0 min(680px,86cqw);scroll-snap-align:start;display:grid;grid-template-rows:auto 1fr;color:#201e1d;background:#f3f2f2}
.cns-work figure{margin:0;aspect-ratio:16/10;overflow:hidden;border-bottom:2px solid #201e1d;background:#eae9e9}
.cns-work img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .5s ease}
.cns-work:hover img{transform:scale(1.03)}
.cns-work-body{padding:22px 24px 26px;display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:start}
.cns-work-body small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#e2673f;grid-column:1/-1}
.cns-work-body h3{font-weight:800;font-size:clamp(24px,2.4vw,32px);line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.cns-work-body span{font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.cns-work-body p{font-size:15px;color:#444141;line-height:1.5;grid-column:1/-1;max-width:520px}
.cns-strip-end{flex:0 0 24px}

/* processus */
.cns-process-head{padding:72px 24px 40px;max-width:760px}
.cns-process{list-style:none;margin:0;padding:0;border-top:2px solid #201e1d}
.cns-process li{padding:28px 24px 32px;border-right:2px solid #201e1d;display:grid;gap:14px;align-content:start;transition:background .2s}
.cns-process li:hover{background:#eae9e9}
.cns-process li:last-child{border-right:0}
.cns-process li > span{font-weight:800;font-size:40px;line-height:1;color:#e2673f;letter-spacing:-.03em}
.cns-process h3{font-weight:800;font-size:19px;letter-spacing:-.01em;line-height:1.15}
.cns-process p{color:#444141;line-height:1.5;font-size:15px}
.cns-process small{display:block;margin-top:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#605d5d}

/* comparatif 4 colonnes */
.cns-cmp4 .cns-cmp-head,.cns-cmp4 .cns-cmp-row{grid-template-columns:1.1fr 1fr 1fr 1fr}
.cns-cmp4 .cns-cmp-row > span:nth-child(3),.cns-cmp4 .cns-cmp-row > span:nth-child(4){color:#7d7979}

/* upsell */
.cns-upsell{background:#eae9e9}
.cns-upsell .cns-2col{grid-template-columns:7fr 5fr}
.cns-upsell-body{padding:64px 40px 64px 24px;border-right:2px solid #201e1d}
.cns-upsell-body .cns-h2{font-size:clamp(28px,3.4vw,46px);margin-bottom:18px}
.cns-upsell-body .cns-lead{max-width:600px}
.cns-upsell .cns-poster-cta{min-height:220px}

@media (max-width:820px){
  .cns-hero-dark-grid{grid-template-columns:1fr;gap:24px}
  .cns-fiche{display:none}
  .cns-fiche-mobile{display:grid}
  .cns-work{flex-basis:min(680px,86cqw)}
  .cns-process li{border-right:0;border-bottom:2px solid #201e1d}
  .cns-process li:last-child{border-bottom:0}
  .cns-cmp4 .cns-cmp-row{grid-template-columns:1fr}
  .cns-cmp4 .cns-cmp-row > span:nth-child(3)::before{content:"Freelance : ";font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-top:4px}
  .cns-cmp4 .cns-cmp-row > span:nth-child(4)::before{content:"Wix / Squarespace : ";font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-top:4px}
  .cns-cmp4 .cns-cmp-row > span:last-child::before{content:"Wix / Squarespace : "}
  .cns-upsell-body{border-right:0;border-bottom:2px solid #201e1d}
}