/* ═════════════════════════════════════════════
   UNE SEULE CARTE — trois tons à comparer (data-look = dark | light | mix)
   Même composant partout : rayon 28, même ombre, aura qui suit la main, onglet « CL · 0X ».
   ═════════════════════════════════════════════ */
:root{--u-isl:#171514;--u-on:#f4f1ec}
/* toutes les cartes du site */
html[data-look] :is(.piece--screen,.piece--type,.piece--chips,.piece--catalog,.film__stat,.tile--text,.tile--value,.pcard,.tile--process,.tile--service,.tile--service-wide,.tile--chan,.tile--form,.tile--agenda){border-radius:28px}
html[data-look] :is(.piece--chips){border-radius:999px}

/* ── onglet numéroté sur les tuiles (comme les pièces de l'atelier) ── */
.section{counter-reset:cl}
html[data-look] :is(.film__stat,.tile--text,.tile--value,.pcard,.tile--process,.tile--service,.tile--service-wide,.tile--chan,.tile--form,.tile--agenda){counter-increment:cl;overflow:visible;position:relative}
html[data-look] :is(.film__stat,.tile--text,.tile--value,.pcard,.tile--process,.tile--service,.tile--service-wide,.tile--chan,.tile--form,.tile--agenda)::before{
  content:"CL · " counter(cl,decimal-leading-zero);position:absolute;left:22px;top:-11px;z-index:3;height:20px;padding:0 9px;border-radius:999px;
  background:#f4f1ec;color:#1a1817;font:600 10px/20px var(--font);letter-spacing:.08em;box-shadow:0 0 0 1px rgba(26,24,23,.08);white-space:nowrap;display:block;width:auto;opacity:1;transform:none;filter:none}
.bento{padding-top:12px}

/* ── surface SOMBRE (identique aux pièces de l'atelier) ── */
html[data-look][data-look][data-look][data-look] .u-dark.u-dark{
  --ink:#f4f1ec;--ink-2:rgba(244,241,236,.74);--ink-3:rgba(244,241,236,.5);--line:rgba(244,241,236,.1);--line-2:rgba(244,241,236,.16);
  --bg:rgba(244,241,236,.06);--bg-2:rgba(244,241,236,.1);--white:#171514;--craie-2:rgba(244,241,236,.1);
  --accent-soft:color-mix(in oklch,var(--accent) 28%,#171514);--accent-ink:var(--accent-2);
  background:
    radial-gradient(240px circle at var(--mx,88%) var(--my,0%),color-mix(in oklch,var(--accent) 55%,transparent),transparent 65%),
    radial-gradient(70% 90% at 0% 100%,color-mix(in oklch,var(--accent) 16%,transparent),transparent 70%),
    #171514!important;
  color:#f4f1ec!important;box-shadow:0 30px 50px -28px rgba(26,24,23,.55),inset 0 0 0 1px rgba(244,241,236,.09)!important}
html[data-look] .u-dark::after{opacity:.55}
html[data-look] .u-dark :is(.pcard__btn,.btn--dark){background:#f4f1ec;color:#171514}
html[data-look] .u-dark .tile--form input:focus,html[data-look] .u-dark :is(input,textarea):focus{background:rgba(244,241,236,.1)}
html[data-look] .u-dark .agenda__grid button.is-sel{color:#171514}
html[data-look] .u-dark .agenda__nav:hover{color:#171514}
html[data-look] .u-dark .screen__pill--ghost{box-shadow:inset 0 0 0 1.5px rgba(244,241,236,.3);color:#f4f1ec}
html[data-look] .u-dark .frame__bar{background:transparent;border-color:rgba(244,241,236,.1)}
html[data-look] .u-dark .vc{background:rgba(244,241,236,.08)}
html[data-look] .u-dark.piece--catalog{background:#171514!important}

/* ── surface CLAIRE (aura F) ── */
html[data-look][data-look][data-look][data-look] .u-light.u-light{
  background:radial-gradient(280px circle at var(--mx,85%) var(--my,8%),color-mix(in oklch,var(--accent) 24%,#fff),#fff 72%)!important;
  color:#1a1817!important;box-shadow:0 1px 2px rgba(26,24,23,.04),0 12px 40px -12px rgba(26,24,23,.14)!important}
/* tuiles qui étaient noires, remises en clair */
html[data-look] .u-light.tile--process .tile__kick{color:var(--ink-3)}
html[data-look] .u-light.tile--process .process li{border-top-color:var(--line-2)}
html[data-look] .u-light.tile--process .process small{color:var(--ink-2)}
html[data-look] .u-light.tile--service-wide .checks{color:var(--ink-2)}
html[data-look] .u-light.tile--service-wide .tile__note{color:var(--ink-3);border-color:var(--line)}
html[data-look] .u-light.tile--service-wide .btn--light{background:var(--ink);color:#fff}
html[data-look] .u-light.tile--service-wide .btn--light .btn__go{background:var(--accent);color:#fff}
/* pièces de l'atelier en version claire */
html[data-look] .ap-isl.u-light{--isl:#fff;--on:#1a1817;--mut:#8a8681;--hair:rgba(26,24,23,.1)}
html[data-look] .ap-isl.u-light .ap-btn{color:#fff}
html[data-look] .ap-isl.u-light .ap-btn.ap-ghost{color:#1a1817}
html[data-look] .ap-isl.u-light .ap-mono{color:#fff}
html[data-look] .ap-isl.u-light .ap-mono::after{border-color:rgba(255,255,255,.4)}
html[data-look] .ap-isl.u-light .ap-play{color:#fff}
html[data-look] .ap-isl.u-light .lang{background:rgba(26,24,23,.06)}
html[data-look] .ap-isl.u-light .lang__btn.is-active{color:#fff}
html[data-look] .ap-isl.u-light .ap-hand svg{stroke:#fff}

/* textes sur fond craie à l'intérieur d'une carte sombre : toujours en encre */
html[data-look] .ap-tab{color:#1a1817}
html[data-look] .u-dark :is(.ap-btn:not(.ap-ghost),.ap-mono,.ap-play,.btn--light){color:#1a1817}
html[data-look] .u-dark .ap-mono::after{border-color:rgba(26,24,23,.35)}
html[data-look] .u-dark .lang__btn.is-active{color:#1a1817}
html[data-look] .u-dark .btn--light .btn__go{background:var(--accent);color:#fff}