/* Aperçu: one white card that changes state (photo and contact → sending → done), a fixed example, and the private
   page of a preview (apercu.html: in preparation / ready / deleted). */
.ai { padding-block-end: clamp(24px, 4vh, 48px); }
.ai__step { padding: clamp(18px, 2.4vw, 32px); border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 20px 50px -30px rgba(18,20,18,.35); animation: aiIn .5s var(--ease-reveal) both; }
.ai__step[data-ai-step="done"] { padding: 0; background: none; box-shadow: none; }
@keyframes aiIn { from { opacity: 0; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .ai__step { animation: none; } }
.ai__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: clamp(24px, 3.4vw, 56px); align-items: start; }
.ai__side { display: grid; gap: 20px; align-content: start; }
.ai__side .q { gap: 10px; }
.ai__hint { margin: -6px 0 0; font: 400 14px/1.45 var(--font-text); color: var(--encre-soft); }
.b.is-wait { opacity: .55; }
@media (max-width: 900px) { .ai__grid { grid-template-columns: minmax(0, 1fr); } }

/* drop zone */
.drop { position: relative; display: grid; gap: 10px; }
.drop__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; }
.drop__zone { display: grid; place-content: center; justify-items: center; gap: 10px; aspect-ratio: 3 / 2; padding: 24px; border: 1.5px dashed rgba(18,20,18,.3); border-radius: 12px; background: #f6f6f2; text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; }
.drop__zone:hover, .drop__zone.is-over { border-color: var(--zellige); background: var(--menthe); }
.drop__input:focus-visible + .drop__zone { outline: 2px solid var(--zellige); outline-offset: 3px; }
.drop__zone svg { inline-size: 40px; block-size: 40px; fill: none; stroke: var(--zellige); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.drop__t { font: 400 clamp(24px, 2.2vw, 32px)/1.1 var(--font-serif); letter-spacing: -.015em; }
.drop__s { font: 400 15px/1.45 var(--font-text); color: var(--encre-soft); } .drop__s u { color: var(--zellige); text-underline-offset: 3px; }
.drop__s + .drop__s { font-size: 13px; }
.drop__prev { margin: 0; display: grid; gap: 10px; }
.drop__prev img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: #ece9e2; }
.drop__prev figcaption { display: flex; justify-content: space-between; gap: 12px; font: 400 14px/1.4 var(--font-text); color: var(--encre-soft); }
.drop__prev figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop__prev .link-btn { flex: none; color: var(--encre); }

/* working */
.work__pic { position: relative; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #ece9e2; }
.work__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.6) brightness(.92); }
.work__scan { position: absolute; inset-inline: 0; block-size: 30%; background: linear-gradient(to bottom, transparent, rgba(220,232,223,.55) 80%, rgba(246,246,242,.9)); border-block-end: 1.5px solid #f6f6f2; animation: scan 2.2s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes scan { from { inset-block-start: -30%; } to { inset-block-start: 100%; } }
@media (prefers-reduced-motion: reduce) { .work__scan { display: none; } }
.bar { --p: 0%; block-size: 6px; border-radius: 99px; background: rgba(18,20,18,.1); overflow: hidden; }
.bar i { display: block; block-size: 100%; inline-size: var(--p); border-radius: inherit; background: var(--zellige); }
.work__steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font: 400 15px/1.4 var(--font-text); }
.work__steps li { display: flex; gap: 12px; align-items: center; color: rgba(18,20,18,.4); transition: color .3s; }
.work__steps li.is-on { color: var(--encre); font-weight: 500; }
.work__steps li.is-done { color: var(--encre-soft); }
.ws__dot { position: relative; flex: none; inline-size: 18px; block-size: 18px; border-radius: 50%; border: 1.5px solid currentColor; }
.is-on .ws__dot { border-color: var(--zellige); border-inline-end-color: transparent; animation: spin .9s linear infinite; }
.is-done .ws__dot { border-color: var(--zellige); background: var(--zellige) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (prefers-reduced-motion: reduce) { .is-on .ws__dot { animation: none; border-inline-end-color: var(--zellige); } }

/* result */
.res { display: grid; gap: 12px; }
.res .ba { aspect-ratio: 3 / 2; border-radius: 12px; }
.res__honest { color: var(--encre-soft); }
.pl { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid rgba(18,20,18,.1); }
.pl li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; border-block-end: 1px solid rgba(18,20,18,.1); }
.pl a { display: flex; align-items: center; gap: 12px; min-inline-size: 0; color: inherit; text-decoration: none; }
.pl a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pl img { inline-size: 40px; block-size: 50px; object-fit: cover; border-radius: 4px; flex: none; }
.pl b { display: block; font: 400 18px/1.15 var(--font-serif); }
.pl small { font: 400 13px/1.3 var(--font-text); color: var(--encre-soft); }
.pl__p { font: 500 15px/1 var(--font-text); white-space: nowrap; }
.res__acts { display: grid; gap: 14px; }
.res__more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; font: 500 15px/1.2 var(--font-text); }
.res__more a.link-btn { color: inherit; }

/* quote */
.quote__pic { aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; } .quote__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.keep { display: flex; gap: 10px; align-items: center; font: 400 15px/1.3 var(--font-text); cursor: pointer; }
.keep input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--zellige); }
.form__end .link-btn { font: 500 15px/1.2 var(--font-text); }
@media (max-width: 900px) { .quote__pic { display: none; } }
/* the tool should show above the fold: a shorter head on this page */
.page-head:has(+ .ai) { padding-block-end: clamp(24px, 4vh, 40px); }
.page-head:has(+ .ai) .h1 { font-size: clamp(42px, 5vw, 76px); }

/* the request form */
.ai .q { border: 0; margin: 0; padding: 0; display: grid; }
.ai .q legend { padding: 0; margin-block-end: 10px; }
.opt-l { font: 400 13px/1 var(--font-text); color: var(--encre-soft); }
.ai__side .field small { font-size: 13px; color: var(--encre-soft); }
.done__link { overflow-wrap: anywhere; }

/* the example */
.ex .sec__head { max-inline-size: 46em; }
.ex__ba { max-inline-size: 980px; border-radius: 14px; }

/* the private page of one preview */
.pv { padding-block-end: clamp(64px, 10vh, 120px); }
.pv__card { display: grid; gap: 18px; }
.pv__photo { margin: 0; display: grid; gap: 10px; max-inline-size: 760px; }
.pv__photo img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: #ece9e2; }
.pv__photo figcaption { font: 400 14px/1.4 var(--font-text); color: var(--encre-soft); }
.pv__note { display: grid; gap: 8px; padding: 18px; border-radius: 12px; background: var(--menthe); }
.pv__note p { margin: 0; font: 400 16px/1.55 var(--font-text); }
.pv__form { display: grid; gap: 16px; }
.pv__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.pv__quote .note { margin: 0; }
.ai__side .row2 { grid-template-columns: minmax(0, 1fr); }
.done .done__link bdi[dir] { white-space: normal; overflow-wrap: anywhere; }
.done .sum { justify-self: stretch; }
.sum dd.done__link { white-space: normal; overflow-wrap: anywhere; min-inline-size: 0; text-align: end; }