/* =====================================================================
   DESIGN « ATELIER » — maquette n° 3 de _design_preview/boutique-accueil-5-maquettes.html
   portée telle quelle (classe .c3 conservée). Cours vedette plein écran sur
   fond forêt, vignettes de sélection, sauge et crème, Manrope.
   Classes renommées : .hd→.hdr .ft→.ftr .tabs→.tabz .kick→.kck .ph→.pho.
   Sur les écrans de service (liste, cours, panier…), le fond reste crème
   et seul l'en-tête garde la bande forêt (.c3.svc). html[data-design=atelier].
   ===================================================================== */
.c3{--forest:#1F3D33;--forest2:#2E5A4B;--sage:#9DBBA6;--cream:#F3F1EA;--ink:#1E2622;--ink2:#5F6B64;color:var(--ink);font-family:'Manrope',sans-serif;min-height:100vh;
 background:linear-gradient(180deg,var(--forest) 0,var(--forest) 560px,var(--forest2) 700px,var(--cream) 980px,var(--cream) 100%)}
.c3 .wrap{max-width:1320px;margin:0 auto;padding:0 28px}
.c3 .hdr{display:flex;align-items:center;gap:18px;height:76px;color:#fff}
.c3 .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px}.c3 .logo i{width:36px;height:36px;border-radius:10px;background:var(--sage);display:block}
.c3 nav{display:flex;gap:2px}.c3 nav button{padding:8px 12px;border-radius:10px;font-weight:600;font-size:14px;color:#D7E4DC}.c3 nav button:hover{background:rgba(255,255,255,.1);color:#fff}
.c3 .sr{margin-left:auto;display:flex;align-items:center;gap:8px;border-radius:12px;padding:0 6px 0 14px;height:44px;width:340px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.c3 .sr input{flex:1;border:0;background:none;min-width:0;color:#fff}.c3 .sr input::placeholder{color:#B9CBC1}.c3 .sr button{background:var(--sage);color:var(--forest);border-radius:8px;height:34px;padding:0 14px;font-weight:800;font-size:13px}
.c3 .feat{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center;color:#fff;padding:26px 0 0}
.c3 .feat .pho{aspect-ratio:16/10;border-radius:26px;box-shadow:0 40px 60px -34px rgba(0,0,0,.6)}
.c3 .feat .pho::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(31,61,51,.6))}
.c3 .feat .kck{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--sage)}
.c3 .feat h1{font-size:40px;font-weight:800;letter-spacing:-.035em;line-height:1.05;margin-top:12px}
.c3 .feat p{color:#CFDDD4;margin-top:12px;font-size:15.5px;max-width:480px}
.c3 .feat .ess{display:flex;gap:22px;margin-top:18px;flex-wrap:wrap}.c3 .feat .ess b{display:block;font-size:20px}.c3 .feat .ess span{font-size:12.5px;color:#B9CBC1}
.c3 .feat .cta{display:flex;gap:10px;margin-top:20px;align-items:center}
.c3 .feat .b1{background:var(--sage);color:var(--forest);border-radius:12px;height:46px;padding:0 20px;font-weight:800;display:inline-flex;align-items:center;gap:8px}
.c3 .feat .b2{border:1px solid rgba(255,255,255,.35);border-radius:12px;height:46px;padding:0 18px;font-weight:700;display:inline-flex;align-items:center;gap:8px;color:#fff}
.c3 .thumbs{display:flex;gap:10px;margin-top:16px}
.c3 .thumbs button{width:92px;border-radius:12px;overflow:hidden;opacity:.6;transition:opacity .15s,transform .15s;border:2px solid transparent}
.c3 .thumbs button .pho{aspect-ratio:4/3}.c3 .thumbs button.on,.c3 .thumbs button:hover{opacity:1;border-color:var(--sage)}
.c3 .tabz{display:flex;gap:8px;flex-wrap:wrap;margin:58px 0 16px}
.c3 .tabz button{padding:9px 16px;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:14px;border:1px solid rgba(255,255,255,.2)}
.c3 .tabz button.on{background:var(--cream);color:var(--forest)}
.c3 .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.c3 .card{background:#fff;border-radius:20px;overflow:hidden;text-align:left;box-shadow:0 14px 34px -26px rgba(31,61,51,.6);transition:transform .15s}.c3 .card:hover{transform:translateY(-4px)}
.c3 .card .pho{aspect-ratio:16/10}
.c3 .card .bd{padding:12px 14px 14px}
.c3 .card .k{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--forest2)}
.c3 .card h3{font-size:15.5px;font-weight:800;line-height:1.3;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c3 .card .m{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2);margin-top:8px}.c3 .card .m b{color:var(--ink);font-size:15px}
.c3 .sec{margin-top:44px}.c3 .sh{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}.c3 .sh h2{font-size:26px;font-weight:800;letter-spacing:-.03em}.c3 .sh span{color:var(--ink2);font-size:14px}.c3 .sh a{margin-left:auto;font-weight:700;color:var(--forest2);font-size:14px;cursor:pointer}
.c3 .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px}
.c3 .steps div{background:#fff;border-radius:20px;padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center}
.c3 .steps i{grid-row:span 2;width:40px;height:40px;border-radius:12px;background:var(--forest);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800}
.c3 .steps b{font-size:15.5px}.c3 .steps p{font-size:13.5px;color:var(--ink2)}
.c3 .ftr{margin-top:60px;padding:30px 0 40px;border-top:1px solid rgba(30,38,34,.1);display:flex;gap:30px;color:var(--ink2);font-size:13.5px}

/* ---- ajouts du portage ---- */
.c3 .hdr .lgb{background:var(--sage);color:var(--forest);border-radius:10px;height:38px;padding:0 16px;font-weight:800;font-size:13.5px;display:inline-flex;align-items:center;text-decoration:none}
.c3.svc{background:var(--cream)}.c3.svc .hdw{background:var(--forest)}
.c3 .pho{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--c,#777),var(--c2,#222));color:#fff;container-type:inline-size}
.c3 .pho img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.c3 .pho .pk{position:absolute;left:6cqw;top:6cqw;font-size:4.2cqw;font-weight:700;background:rgba(0,0,0,.28);padding:.8cqw 2.4cqw;border-radius:99px;z-index:1;color:#fff}
.c3 .pho .pt{position:absolute;left:6cqw;bottom:6cqw;right:8cqw;font-size:7.5cqw;font-weight:800;line-height:1.05;letter-spacing:-.02em;z-index:1;color:#fff}
.c3 .sr.srx{position:relative;max-width:none}.c3 .sr.srx>.ic{position:static;left:auto;top:auto;color:#fff}
.c3 .sr.srx input{height:auto;border-radius:0;padding:0;background:none;border:0;box-shadow:none;width:auto;font-size:14px}
.c3 .sr.srx .sg{top:calc(100% + 8px);color:#1D1D21;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.c3 .hdr .nl{height:auto}.c3 .hdr .nl>button:hover,.c3 .hdr .icb:hover{background:rgba(255,255,255,.12);color:#fff}
.c3 .hdr .icb{width:40px;height:40px;border-radius:50%;color:#fff}
.c3 .hdr .dd{color:#1D1D21;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.c3 .lgrid{grid-template-columns:repeat(3,1fr)}
.c3 nav button,.c3 .hdr .nl>button{white-space:nowrap}
.c3 .ftr .ftl{color:inherit;font:inherit}.c3 .ftr .ftl:hover{text-decoration:underline}
@media (max-width:1000px){.c3 .feat{grid-template-columns:1fr}.c3 .grid,.c3 .lgrid{grid-template-columns:repeat(2,1fr)}.c3 .steps{grid-template-columns:1fr}}
@media (max-width:820px){.c3 .hm{display:none!important}.c3 .wrap{padding:0 16px}.c3 .feat h1{font-size:30px}}