/* ═════════════════════════════════════════════
   L'ESTHÉTIQUE DES PIÈCES, SUR TOUT LE SITE
   Onglet « CL · 0X », encre chaude #171514, craie #f4f1ec, un seul accent, aura.
   ═════════════════════════════════════════════ */
:root{--enc:#171514;--cr:#f4f1ec;--cr-mut:rgba(244,241,236,.55);--cr-hair:rgba(244,241,236,.09)}

/* ── kickers de section → onglets comme les pièces ── */
html .kicker,html .section__head--center .kicker{display:inline-flex;width:auto;align-items:center;gap:8px;height:26px;padding:0 12px;border-radius:999px;background:var(--enc);color:var(--cr);font:600 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;margin:0 0 26px;box-shadow:0 10px 20px -12px rgba(23,21,20,.6)}
html .kicker .we-host{display:none}
html .kicker::before{content:"CL · " attr(data-n) " ·";font:600 11px/1 var(--font);letter-spacing:.1em;color:var(--accent-2)}
.section__head--center{display:flex;flex-direction:column;align-items:center}

/* ── hero : les contrôles deviennent des pièces ── */
.piece--seg .seg{background:var(--enc);box-shadow:0 20px 34px -20px rgba(23,21,20,.7),inset 0 0 0 1px var(--cr-hair);border-radius:999px;padding:4px}
.piece--seg .seg button{color:var(--cr-mut);border-radius:999px}
.piece--seg .seg button.on{color:var(--enc)}
.piece--seg .seg__pill{background:var(--cr);border-radius:999px;box-shadow:none}
.piece--toggle .ioknob{background:var(--enc);box-shadow:0 20px 34px -20px rgba(23,21,20,.7),inset 0 0 0 1px var(--cr-hair)}
.piece--toggle .ioknob.is-on{background:var(--accent)}
.piece--btn .btn,.btn--accent{background:var(--enc);color:var(--cr);box-shadow:0 20px 34px -18px rgba(23,21,20,.7),inset 0 0 0 1px var(--cr-hair);padding:0 6px 0 20px;gap:12px}
.piece--btn .btn::after,.btn--accent::after{content:"→";display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-size:14px}
.agenda__foot .btn--accent{height:42px}
.agenda__foot .btn--accent::after{width:30px;height:30px}
.piece--type .type__big{color:var(--cr)}
.piece--type .type__name{color:var(--cr-mut)}
.cursor-hand{border-color:var(--enc);background:rgba(23,21,20,.12)}
.hero__sub b{color:var(--accent)}

/* ── boutons du site : pilule encre + pastille d'accent (comme « Confirmer ») ── */
.btn--dark{background:var(--enc);box-shadow:0 12px 26px -14px rgba(23,21,20,.7),inset 0 0 0 1px var(--cr-hair)}
.btn__go{background:var(--accent)}

/* ── Travaux : chaque projet porte son onglet ── */
#travaux .bento--work{counter-reset:pj}
#travaux .bento--work>.tile{counter-increment:pj;border-radius:28px}
#travaux .bento--work>.tile::before{content:"CL · " counter(pj,decimal-leading-zero);position:absolute;left:16px;top:14px;z-index:6;height:20px;padding:0 9px;border-radius:999px;background:var(--cr);color:var(--enc);font:600 10px/20px var(--font);letter-spacing:.08em;box-shadow:0 4px 12px -4px rgba(0,0,0,.35)}
#travaux .tile--matcha::before,#travaux .tile--lumiere::before,#travaux .tile--mar::before{top:auto;bottom:52px}
#travaux .tile__foot strong{font-weight:600}

/* ── bande de marque : une longue pièce ── */
.band{background:var(--enc);border:0;color:var(--cr)}
.band__track{color:var(--cr)}
.band__track i{background:var(--accent-2)}

/* ── manifeste : le mot en cours prend l'accent clair, comme la pièce 08 ── */
.manif__line .w.now{color:var(--accent)}

/* ── le film : même fond que le site, la scène est la pièce ── */
.section--film{background:transparent}
.film{border-radius:28px;box-shadow:0 40px 70px -40px rgba(23,21,20,.7),inset 0 0 0 1px var(--cr-hair)}

/* ── accessoires flottants : pilules encre ── */
.cards-sw,.color-sw{background:rgba(23,21,20,.92);color:var(--cr-mut);box-shadow:0 20px 40px -20px rgba(23,21,20,.7),inset 0 0 0 1px var(--cr-hair)}
.color-sw button.on{box-shadow:0 0 0 2px var(--enc),0 0 0 4px var(--c)}
.toast{background:var(--enc);box-shadow:0 20px 40px -20px rgba(23,21,20,.7),inset 0 0 0 1px var(--cr-hair)}

/* ── pied de page : le monogramme comme une pièce ── */
.footer__brand .nav__mark,.nav__mark{background:var(--enc)}
html[data-type] .kicker::before,html .kicker::before{content:"CL · " attr(data-n) " ·";font:600 11px/1 var(--font);letter-spacing:.1em;color:var(--accent-2)}
#travaux .tile--fripe::before{top:auto;bottom:52px}

/* ── typographie : Inter Tight partout ; CL Face seulement pour la marque ── */
.screen__lines b{font:700 15px/1.1 var(--font);letter-spacing:-.03em;color:inherit}
.piece--type .type__big{font:600 58px/1 var(--font);letter-spacing:-.06em}
.cv--title{font-family:var(--font);letter-spacing:-.04em;line-height:1;transition:font-weight .4s,opacity .35s}
.tf{font-family:var(--font);font-size:18px}
.sat__aa{font:600 46px/1 var(--font);letter-spacing:-.05em}
.vc__aa{font:600 clamp(16px,2vw,26px)/1 var(--font);letter-spacing:-.04em;color:inherit}
.vc--ink .vc__aa{color:var(--cr)}
.ap-clock{font:500 38px/1 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ap-ticket .ap-stub span{font:600 42px/1 var(--font);letter-spacing:-.05em}
.ap-film .ap-title{font:300 38px/1 var(--font);letter-spacing:-.04em}
.ap-ctl .ap-word{font:400 52px/1 var(--font);letter-spacing:-.05em;transition:font-weight .15s}

/* ── point 2 : le sélecteur de couleur flottant disparaît sur mobile (la pièce 03 et le hero le remplacent) ── */
@media(max-width:640px){.color-sw{display:none!important}}

/* ── point 3 : la maquette immobilière posée dans un cadre encre, comme les autres pièces ── */
#travaux .tile--immo{background:var(--enc);padding:10px}
#travaux .tile--immo .immo__page{inset:10px;border-radius:20px;overflow:hidden;background:#fff}
#travaux .tile--immo::after{left:10px;right:10px;bottom:10px;border-radius:0 0 20px 20px}
#travaux .tile--immo .tile__foot{color:var(--cr);z-index:4}
#travaux .tile--immo .tile__foot::before{content:"";position:absolute;inset:-40px -28px -28px;background:linear-gradient(transparent,rgba(23,21,20,.85));z-index:-1;border-radius:0 0 20px 20px}

/* ── point 4 : Fripe jamais noir pendant le chargement ── */
.tile--fripe .cat{background:#000 url("media/fripe-cat-p/f000.jpg?v=2") 50% 50%/cover no-repeat}
.form__rgpd{margin:4px 0 0;font-size:12px;color:var(--ink-3)}.form__rgpd a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}.is-sending{opacity:.6;pointer-events:none}

/* ── Rendez-vous : une pièce simple, en attendant Cal.com ── */
.tile--rdv{display:flex;flex-direction:column;gap:12px}
.rdv__big{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.rdv__num{font:600 88px/.9 var(--font);letter-spacing:-.06em;color:var(--ink)}
.rdv__unit{font:500 24px var(--font);color:var(--ink-3)}
.rdv__title{font:600 22px/1.15 var(--font);letter-spacing:-.03em;margin:0}
.rdv__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-2)}
.rdv__list li{padding-left:22px;position:relative}
.rdv__list li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:6px;border-left:2px solid var(--accent-2);border-bottom:2px solid var(--accent-2);transform:rotate(-45deg)}
.rdv__btn{align-self:flex-start;margin-top:auto}
/* Travaux : pas de capsules « CL · 0X » sur les projets (ordinateur et mobile) */
#travaux .bento--work>.tile::before{display:none!important}

/* ── hero : l'interrupteur parle comme ses voisines — capsule d'encre, la couleur à l'intérieur
   (comme la flèche de « Réserver » et les pastilles de couleur) ── */
.piece--toggle .ioknob,.piece--toggle .ioknob.is-on{background:var(--enc);box-shadow:0 30px 50px -28px rgba(26,24,23,.55),inset 0 0 0 1px var(--cr-hair)}
.piece--toggle .ioknob b{color:var(--craie);left:26px}
.piece--toggle .ioknob i{left:6px;top:6px;width:40px;height:40px;background:rgba(244,241,236,.18);box-shadow:none;display:grid;place-items:center}
.piece--toggle .ioknob i::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--craie);opacity:.5;transition:opacity .3s}
.piece--toggle .ioknob.is-on i{background:var(--accent);transform:translateX(60px);box-shadow:0 8px 18px -8px var(--accent)}
.piece--toggle .ioknob.is-on i::after{opacity:1}