.atelier{--brand:#111A22;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr);gap:clamp(24px,4vw,64px);align-items:start}
.nameplay .h2{max-width:18ch;margin-bottom:40px}.atelier__controls,.atelier__preview{min-width:0}
.atelier__group{border:0;padding:0;margin:24px 0 0;min-width:0}.atelier__group legend{font:11px var(--f-mono);text-transform:uppercase;letter-spacing:.09em;color:var(--fg-2);margin-bottom:12px}
.atelier__choices{display:flex;flex-wrap:wrap;gap:7px}.atelier__choice{position:relative;cursor:pointer}.atelier__choice input,.atelier__swatch input{position:absolute;width:1px;height:1px;opacity:0}
.atelier__choice span{display:flex;align-items:center;justify-content:center;padding:10px 15px;min-height:44px;border:1px solid var(--rule-strong);border-radius:30px;font-size:14px;transition:background .2s,color .2s}
.atelier__choice input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}.atelier__choice input:focus-visible+span,.atelier__swatch input:focus-visible+span{outline:2px solid var(--ember);outline-offset:4px}.atelier__choice:hover span{border-color:var(--fg)}
.atelier__colors{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.atelier__colors>.micro{margin-left:8px}.atelier__swatch{position:relative;width:38px;height:44px;display:grid;place-items:center;cursor:pointer}.atelier__swatch>span:not(.vh){width:26px;height:26px;border-radius:50%;background:var(--swatch);border:4px solid var(--paper);box-shadow:0 0 0 1px transparent}.atelier__swatch input:checked+span{box-shadow:0 0 0 1px var(--swatch)}
.atelier__details{margin-top:22px;border-top:1px solid var(--rule)}.atelier__details summary{font-size:14px;padding:15px 0;cursor:pointer;display:flex;justify-content:space-between}.atelier__details .atelier__group{margin:0}.atelier__range{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;margin:16px 0}.atelier__range input{width:55%;accent-color:var(--lake);min-height:30px}.atelier__inspire{min-height:44px;font-size:14px}
.atelier__preview{border:1px solid var(--rule);border-radius:5px;background:rgba(255,255,255,.15);overflow:hidden}.atelier__views{display:flex;flex-wrap:wrap;gap:5px;border:0;padding:16px;margin:0;border-bottom:1px solid var(--rule)}.atelier__views .atelier__choice{flex:1}.atelier__views .atelier__choice span{border-color:transparent;padding:8px 12px}
.atelier__canvas{height:420px;padding:24px;background:radial-gradient(ellipse at 50% 35%,#fdfbf7 0%,#ece6dc 100%);color:var(--brand);position:relative}.atelier__scene{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.atelier__scene[hidden]{display:none!important}.atelier__logo{display:block;width:100%;height:auto;flex:none;overflow:visible}.atelier__scene--logo>.atelier__logo{max-width:620px}.atelier__signature{color:var(--stone);font-size:13px;text-align:center;margin:10px 0 0}
.atelier__footer{min-height:56px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--rule)}.atelier__footer p{margin:0}.atelier__footer button{font-size:12px;min-height:32px}
.atelier__card{width:min(95%,440px);aspect-ratio:1.75;perspective:1200px;cursor:pointer;color:var(--brand)}.atelier__card-inner{display:block;height:100%;position:relative;transform-style:preserve-3d;transition:transform .65s var(--ease)}.atelier__card.is-flipped .atelier__card-inner{transform:rotateY(180deg)}.atelier__card-front,.atelier__card-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:3px;padding:24px;box-shadow:0 20px 35px #111a221c;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper)}.atelier__card-tag{font:9px var(--f-mono);text-transform:uppercase;letter-spacing:.2em;margin-top:12px}.atelier__card-back{transform:rotateY(180deg);background:var(--brand);color:var(--paper);gap:16px}.atelier__card-back>span{font-size:12px}.atelier__card-back strong{font:clamp(18px,2vw,28px) var(--f-display);overflow-wrap:anywhere}.atelier__hint{color:var(--stone);font-size:12px;text-align:center;margin:0}
.atelier__shop{width:min(94%,450px);box-shadow:0 15px 25px #111a2212}.atelier__sign{padding:0 20px;background:var(--paper);border:1px solid #cfc7ba}.atelier__sign svg{max-height:94px}.atelier__awning{height:32px;background:repeating-linear-gradient(90deg,var(--brand) 0 25px,#ede7dc 25px 50px);clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)}.atelier__facade{display:grid;grid-template-columns:1fr .7fr 1fr;gap:12px;padding:15px 18px 0;height:140px;background:#e1d9ce}.atelier__facade>span{border:4px solid var(--brand);border-bottom:0;background:linear-gradient(135deg,#d4ded8,#91a9a5)}.atelier__door{display:grid;place-items:start center;padding-top:25px}.atelier__door i{font:10px var(--f-text);padding:4px 7px;color:var(--ink);background:var(--paper)}
.atelier__phone{width:208px;height:355px;border:6px solid var(--ink);border-radius:28px;background:var(--paper);box-shadow:12px 18px 25px #111a2217;overflow:hidden;padding-top:13px}.atelier__phone-top{display:flex;align-items:center;padding:0 12px;gap:8px;border-bottom:1px solid #111a2214}.atelier__phone-top svg{width:calc(100% - 24px)}.atelier__phone-top>span{font-size:16px}.atelier__phone-body{padding:18px 17px}.atelier__phone-body small{font:7px var(--f-mono);letter-spacing:.1em}.atelier__phone-body strong{display:block;font:25px/1.1 var(--f-display);margin:13px 0 8px;overflow-wrap:anywhere;max-height:90px;overflow:auto}.atelier__phone-body p{font-size:10px;margin:0 0 12px}.atelier__phone-cta{background:var(--brand);color:var(--paper);font-size:8px;padding:8px 10px;border-radius:20px;display:inline-block}.atelier__phone-art{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-top:20px;height:55px;border-bottom:1px solid var(--brand)}.atelier__phone-art i{width:36px;height:100%;border:1px solid var(--brand);border-radius:50px 50px 0 0}.atelier__phone-art i:nth-child(2){height:70%;background:var(--brand);opacity:.35}.atelier__phone-art i:nth-child(3){height:45%}
.np__outro .micro{margin-top:12px;max-width:65ch}.projet__intro .h2{font-size:clamp(36px,4.4vw,64px)}.projet__intro .lead{font-size:18px;max-width:36ch}.quiz{padding:clamp(20px,3vw,36px)}.quiz__step{min-height:268px}.quiz__step[hidden],.quiz__result[hidden],.quiz__nav[hidden]{display:none!important}.quiz__q{font-size:clamp(24px,2.3vw,32px);min-height:98px;margin-bottom:20px}.quiz__opt span{min-height:78px;padding:16px}.quiz__nav{margin-top:24px}.quiz__next{padding-inline:22px}.contact__recommendation{background:var(--surface);border-left:2px solid var(--ember);padding:16px 20px;margin-bottom:24px;font-size:16px}
@media(max-width:900px){.atelier{grid-template-columns:1fr 1.2fr;gap:24px}.atelier__choice span{padding:8px 11px;font-size:13px}.atelier__canvas{height:400px;padding:16px}.atelier__views{gap:0;padding:10px}.atelier__views .atelier__choice span{padding:8px}.atelier__footer{align-items:start;flex-direction:column;gap:0}}
@media(max-width:650px){.atelier{grid-template-columns:1fr}.atelier__canvas{height:330px;padding:16px}.atelier__preview{margin-top:0}.atelier__phone{height:295px;width:178px}.atelier__phone-body{padding:12px}.atelier__phone-body strong{font-size:21px}.atelier__phone-art{height:32px;margin-top:12px}.atelier__footer{flex-direction:row;align-items:center}.atelier__views .atelier__choice span{font-size:13px}.nameplay .h2{margin-bottom:28px}.atelier__group{margin-top:18px}.quiz__step{min-height:0}.quiz__q{min-height:0}.quiz__opts{grid-template-columns:1fr 1fr;gap:8px}.quiz__opt span{padding:12px;font-size:14px;min-height:94px}.quiz__nav{gap:8px}.quiz__status{font-size:11px}.quiz__next{font-size:13px;padding:12px 16px;min-height:46px}.quiz__back{font-size:13px}.quiz__next .btn__arrow{display:none}}
@media(prefers-reduced-motion:reduce){.atelier__card-inner{transition:none}.atelier__choice span{transition:none}}

.atelier__phone-body strong{max-height:none;overflow:visible;font-size:21px;line-height:1.15}


/* Signes tirés du nom : vignettes dessinées pour le nom saisi */
.atelier__marks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.atelier__mark{position:relative;cursor:pointer;min-width:0}
.atelier__mark input{position:absolute;width:1px;height:1px;opacity:0}
.atelier__mark>span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border:1px solid var(--rule-strong);border-radius:10px;color:var(--brand);background:rgba(255,255,255,.25);transition:border-color .2s,background .2s}
.atelier__mark svg{width:100%;max-width:46px;aspect-ratio:1;display:block;overflow:visible}
.atelier__mark small{font-size:11px;line-height:1.2;color:var(--fg-2);text-align:center;overflow-wrap:anywhere}
.atelier__mark:hover>span{border-color:var(--fg)}
.atelier__mark input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper)}
.atelier__mark input:checked+span small{color:var(--ink)}
.atelier__mark input:focus-visible+span{outline:2px solid var(--ember);outline-offset:3px}
.atelier__variants{margin-top:12px;min-height:40px;font-size:14px}

/* Téléphone : l'aperçu se place juste sous le nom, puis les réglages */
@media(max-width:650px){
  .atelier{gap:0}
  .atelier__controls{display:contents}
  .atelier__controls>.np__label{order:1}
  .atelier__controls>.np__input{order:2}
  .atelier__preview{order:3;margin:18px 0 4px}
  .atelier__controls>.atelier__group,.atelier__controls>.atelier__details,.atelier__controls>.atelier__inspire{order:4}
  .atelier__canvas{height:270px;padding:12px}
  .atelier__views{padding:8px}
  .atelier__views .atelier__choice span{min-height:38px;padding:6px}
  .atelier__signature,.atelier__hint{display:none}
  .atelier__shop{width:min(92%,330px)}
  .atelier__sign svg{max-height:70px}
  .atelier__awning{height:24px}
  .atelier__facade{height:100px;padding-top:10px}
  .atelier__phone{height:250px;width:160px;border-radius:24px}
  .atelier__phone-body{padding:10px 12px}
  .atelier__phone-body strong{font-size:19px;margin:8px 0 6px}
  .atelier__phone-art{display:none}
  .atelier__footer{min-height:44px;padding:6px 14px}
  .atelier__marks{gap:6px}
  .atelier__mark>span{padding:8px 2px 6px}
  .atelier__mark svg{max-width:38px}
}
@media(prefers-reduced-motion:reduce){.atelier__mark>span{transition:none}}
.atelier__swatch[data-swatch="encre"]{--swatch:#111A22}.atelier__swatch[data-swatch="leman"]{--swatch:#1F4E5A}.atelier__swatch[data-swatch="terre"]{--swatch:#9B4327}.atelier__swatch[data-swatch="foret"]{--swatch:#365743}.atelier__swatch[data-swatch="prune"]{--swatch:#67415C}.atelier__swatch[data-swatch="cobalt"]{--swatch:#304F9B}