/*
 * Crown On Me — système visuel du MVP.
 * Les tokens pilotent la DA, les composants restent sobres et les états visuels
 * passent exclusivement par data-state afin de garder le contrat HTML/JS lisible.
 */

:root {
  color-scheme: light;
  --ink: #161513;
  --ivory: #efe8dd;
  --paper: #d5c7b6;
  --cacao: #523423;
  --terracotta: #9f5a2f;
  --terracotta-dark: #8c3a18;
  --ochre: #c37931;
  --bronze: #c69567;
  --sand: #c9b39c;
  --stone: #645d57;
  --white: #fffaf3;
  --danger: #9d3b2f;
  --font-display: "Bodoni Moda", Georgia, serif;
  --font-ui: "Manrope", Arial, sans-serif;
  --radius-xs: 4px;
  --radius-sm: 9px;
  --page-pad: clamp(1.15rem, 5vw, 2rem);
  --nav-height: 4.2rem;
  --ease: cubic-bezier(.22, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ivory); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100dvh; overflow: hidden; background: var(--ivory); color: var(--ink); font-family: var(--font-ui); font-weight: 500; -webkit-font-smoothing: antialiased; }
.fatal-error { display: grid; min-height: 100dvh; place-content: center; padding: 2rem; text-align: center; }
button, input { font: inherit; }
button { color: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
img { display: block; width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: .98; letter-spacing: -.03em; }
h1 { margin-bottom: 1.4rem; font-size: clamp(3.1rem, 13vw, 6rem); }
h2 { font-size: clamp(2rem, 8vw, 3.5rem); }
h3 { font-size: 1.8rem; }
em { font-weight: 500; }
fieldset { margin: 0; padding: 0; border: 0; }
legend { margin-bottom: .8rem; font-weight: 700; }

.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; translate: 0 -200%; padding: .7rem 1rem; background: var(--ink); color: var(--ivory); }
.skip-link:focus { translate: 0; }

.app-shell { position: relative; width: 100%; height: 100dvh; overflow: hidden; background: var(--ivory); }
.screen { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; background: var(--ivory); visibility: hidden; translate: 3% 0; transition: translate .38s var(--ease), visibility 0s; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.screen[data-state="active"] { z-index: 2; visibility: visible; translate: 0; transition-delay: 0s; }
.screen[data-state="leaving"] { translate: -2% 0; }
.page-body { max-width: 70rem; margin: 0 auto; padding: 1.5rem var(--page-pad) calc(8rem + env(safe-area-inset-bottom)); }

.brand-lockup { display: inline-flex; min-width: 0; align-items: center; gap: .45rem; font-family: var(--font-display); font-size: .94rem; font-weight: 600; letter-spacing: -.02em; text-transform: uppercase; }
.brand-lockup img { width: 2.2rem; height: 1.72rem; object-fit: contain; }
.brand-lockup--light { color: var(--white); }
.brand-lockup--light img { width: 2rem; height: 1.3rem; object-fit: contain; }
.button-logo { width: 1.8rem; height: 1.4rem; object-fit: contain; }
.eyebrow { margin-bottom: .75rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.microcopy { margin: .8rem 0 0; color: var(--stone); font-size: .72rem; line-height: 1.5; text-align: center; }
.demo-pill { display: inline-flex; min-height: 1.8rem; align-items: center; padding: .25rem .6rem; border: 1px solid currentColor; border-radius: 99px; font-size: .61rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.demo-pill--dark { margin-bottom: .9rem; color: var(--terracotta-dark); }

.page-header, .brand-header { position: sticky; z-index: 8; top: 0; display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; padding: calc(.7rem + env(safe-area-inset-top)) var(--page-pad) .7rem; background: color-mix(in srgb, var(--ivory) 94%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.page-header--editorial { border-bottom: 0; }
.home-header { position: sticky; z-index: 8; top: 0; display: grid; min-height: 4.6rem; grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem; align-items: center; padding: calc(.65rem + env(safe-area-inset-top)) var(--page-pad) .65rem; background: color-mix(in srgb, var(--ivory) 96%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.home-mark { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid color-mix(in srgb, var(--ink) 36%, transparent); border-radius: 50%; }
.home-mark img { width: 1.9rem; height: 1.35rem; object-fit: contain; }
.home-wordmark, .search-brand { font-family: var(--font-display); font-weight: 600; letter-spacing: .015em; }
.home-wordmark { margin: 0; font-size: 1.02rem; text-align: center; text-transform: uppercase; }
.home-header__balance { width: 2.75rem; height: 2.75rem; }
/* Lien discret « Terminer » (fin du test, D.29) : colonnes latérales élargies à 5.5rem pour garder le titre centré. */
.home-header .home-finish { justify-self: end; border-bottom: 0; color: var(--stone); text-decoration: underline; text-underline-offset: .22rem; }
.page-header--overlay { position: absolute; right: 0; left: 0; color: var(--white); background: transparent; border: 0; }
.header-spacer { width: 2.75rem; }
.icon-button { display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 50%; background: transparent; font-size: 1.15rem; cursor: pointer; }
.icon-button--light { border-color: rgba(255,255,255,.58); color: var(--white); }
.text-button { min-width: 2.75rem; min-height: 2.75rem; padding: .2rem 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font-size: .75rem; font-weight: 700; cursor: pointer; }
.text-button--light { color: var(--white); }
.button { display: inline-flex; min-height: 3.3rem; align-items: center; justify-content: center; padding: .8rem 1.3rem; border: 1px solid transparent; border-radius: var(--radius-xs); font-size: .74rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.button:active { transform: scale(.985); }
.button--ink, .button--terracotta { background: var(--terracotta-dark); color: var(--ivory); }
.button--outline { border-color: var(--ink); background: transparent; }
.button--wide { width: 100%; }
.button--floating { position: fixed; z-index: 9; right: var(--page-pad); bottom: calc(1rem + env(safe-area-inset-bottom)); left: var(--page-pad); background: var(--ivory); color: var(--ink); }

/* Ouverture */
.screen--splash { overflow: hidden; background: var(--ivory); color: var(--ink); opacity: 1; transition: opacity var(--splash-screen-duration, 260ms) ease; }
.screen--splash[data-phase="leaving"] { opacity: 0; }
.splash-story { position: absolute; z-index: 1; inset: 0; overflow: hidden; background: var(--ivory); opacity: 1; }
.splash-story[data-state="hidden"] { opacity: 0; pointer-events: none; }
.splash-strand { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.splash-strand__path { fill: none; stroke: var(--ink); stroke-dasharray: 1000; stroke-dashoffset: 1000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.splash-jc { position: absolute; z-index: 2; top: 0; left: 0; width: 72px; height: 55.06px; opacity: 0; will-change: transform; }
.splash-jcy, .splash-jcz, .splash-jcs { width: 100%; height: 100%; transform-origin: 50% 92.3077%; will-change: transform; }
.splash-jcz { transform: scale(.75); }
.splash-traveling-crown { display: block; width: 100%; height: 100%; overflow: visible; }
.splash-crown-dots { fill: none; stroke: var(--terracotta-dark); stroke-dasharray: .01 2.1; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.splash-crown-fill { fill: var(--terracotta-dark); stroke: var(--terracotta-dark); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; opacity: 0; }
.splash-crown-fill__base { fill: none; }
.splash-traveling-crown mask path { fill: none; stroke: white; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.4; }
.splash-signature { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 30px; padding: 1.5rem; background: transparent; opacity: 0; pointer-events: none; }
.splash-signature[data-state="visible"] { opacity: 1; }
.splash-crown-disc { display: grid; width: 124px; height: 124px; place-items: center; border-radius: 50%; background: var(--paper); opacity: 0; transform: scale(.8); }
.splash-signature[data-state="visible"] .splash-crown-disc { opacity: 1; transform: none; }
.splash-crown { display: block; width: 72px; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.splash-wordmark { min-height: 2rem; margin: 0; font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; letter-spacing: .015em; line-height: 1; text-transform: uppercase; opacity: 0; }
.splash-wordmark span { display: inline-block; }
.splash-signature[data-state="visible"] .splash-wordmark { opacity: 1; }
.splash-action { position: absolute; z-index: 4; right: 24px; bottom: calc(18px + env(safe-area-inset-bottom)); left: 24px; display: flex; align-items: stretch; flex-direction: column; gap: 10px; visibility: hidden; opacity: 0; transform: translateY(14px); transition: opacity var(--splash-action-duration, 420ms) ease, transform var(--splash-action-duration, 420ms) cubic-bezier(.2,.8,.2,1), visibility 0s var(--splash-action-duration, 420ms); }
.splash-action[data-state="visible"] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.splash-action .button { width: 100%; height: 52px; }
.splash-action p { margin: 0; color: var(--stone); font-size: 12px; line-height: 1.45; text-align: center; }
.splash-action a { color: inherit; text-underline-offset: 2px; }
.screen--splash[data-mode="short"] .splash-story, .screen--splash[data-mode="short"] .splash-action { display: none; }
.screen--content[data-launch-reveal="active"] { animation: splash-home-reveal 500ms ease both; }

@keyframes splash-home-reveal { from { opacity: 0; } to { opacity: 1; } }

/* Onboarding */
.screen--onboarding { display: grid; grid-template-rows: auto 1fr auto; }
.brand-header { position: relative; background: transparent; border: 0; }
.onboarding-stage { position: relative; min-height: 0; margin: .5rem var(--page-pad); overflow: hidden; }
.onboarding-card { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; background: var(--sand); transform-origin: center bottom; transition: transform .55s var(--ease), opacity .4s ease; }
.onboarding-card[data-state="active"] { z-index: 3; transform: translateY(0) rotate(0); opacity: 1; }
.onboarding-card[data-state="next"] { z-index: 2; transform: translateY(1.1rem) rotate(1.4deg) scale(.96); opacity: .65; }
.onboarding-card[data-state="queued"] { z-index: 1; transform: translateY(2.1rem) rotate(-1deg) scale(.92); opacity: .35; }
.onboarding-card[data-state="past"] { z-index: 4; transform: translateX(-115%) rotate(-4deg); opacity: 0; }
.onboarding-card[data-state="leaving-like"], .onboarding-card[data-state="leaving-dislike"] { z-index: 4; transition-duration: 360ms; }
.onboarding-card[data-state="leaving-like"] { transform: translateX(125%) rotate(12deg); opacity: 0; }
.onboarding-card[data-state="leaving-dislike"] { transform: translateX(-125%) rotate(-12deg); opacity: 0; }
.onboarding-card img { height: 100%; min-height: 0; object-fit: cover; }
.onboarding-card > div { padding: 1.4rem; background: var(--ivory); }
.onboarding-card h1, .onboarding-card h2 { margin-bottom: .8rem; font-size: clamp(2rem, 8vw, 3.5rem); }
.onboarding-card p:last-child { margin-bottom: 0; color: var(--stone); line-height: 1.55; }
.step-number { position: absolute; z-index: 2; top: 1rem; left: 1rem; display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: 50%; background: var(--ivory); font-size: .65rem; }
.onboarding-reaction { position: absolute; z-index: 5; top: 42%; left: 50%; display: grid; width: 4.75rem; height: 4.75rem; place-items: center; border-radius: 50%; background: var(--ivory); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.55); }
.onboarding-reaction svg { width: 2.1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.onboarding-card[data-reaction="like"] .onboarding-reaction, .onboarding-card[data-reaction="dislike"] .onboarding-reaction { opacity: 1; animation: onboarding-thumb 260ms cubic-bezier(.3,1.6,.5,1) both; }
.onboarding-card[data-reaction="dislike"] .onboarding-reaction svg { transform: rotate(180deg); }
.onboarding-controls { display: flex; flex-direction: column; gap: .75rem; padding: .75rem var(--page-pad) calc(1rem + env(safe-area-inset-bottom)); }
.progress-dots { display: flex; gap: .4rem; }
.progress-dots span { width: .42rem; height: .42rem; border-radius: 50%; background: var(--sand); }
.progress-dots span[data-state="active"] { width: 1.5rem; border-radius: 1rem; background: var(--terracotta); }
.onboarding-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.onboarding-choice { display: inline-flex; min-width: 0; height: 52px; align-items: center; justify-content: center; gap: .45rem; padding: .5rem .65rem; border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); border-radius: var(--radius-xs); background: transparent; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
.onboarding-choice:first-child svg { transform: rotate(180deg); }
.onboarding-choice svg { width: 1.25rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.onboarding-choice:active { transform: scale(.98); }
.onboarding-choice:disabled { cursor: default; opacity: .55; }
.brand-header .text-button:disabled { cursor: default; opacity: .45; }
.onboarding-complete { position: absolute; z-index: 20; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.6rem; padding: 1.5rem; background: var(--ivory); text-align: center; transition: opacity 260ms ease; }
.onboarding-complete[data-state="hidden"] { visibility: hidden; opacity: 0; pointer-events: none; }
.onboarding-complete[data-state="visible"] { visibility: visible; opacity: 1; }
.onboarding-complete__crown { width: 4rem; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
.onboarding-complete__crown path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.onboarding-complete[data-state="visible"] .onboarding-complete__crown path { animation: onboarding-crown-draw 700ms ease forwards; }
.onboarding-complete p { max-width: 18rem; margin: 0; font-size: 20px; line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity 360ms ease 260ms, transform 360ms var(--ease) 260ms; }
.onboarding-complete[data-state="visible"] p { opacity: 1; transform: none; }
@keyframes onboarding-thumb { 0% { transform: translate(-50%, -50%) scale(.55); } 72% { transform: translate(-50%, -50%) scale(1.08); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes onboarding-crown-draw { to { stroke-dashoffset: 0; } }

/* Accueil, cartes et listes */
.page-header--editorial + .page-body, .home-header + .page-body { padding-top: .25rem; }
.screen--content h1 em { color: var(--terracotta-dark); }
.segmented { display: flex; margin: 1.8rem 0; border-bottom: 1px solid var(--sand); }
.home-tabs { margin: .4rem 0 1.15rem; }
.segmented button { position: relative; min-height: 2.9rem; flex: 1; border: 0; background: transparent; color: var(--stone); font-size: .73rem; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.segmented button[aria-selected="true"] { color: var(--ink); }
.segmented button[aria-selected="true"]::after { position: absolute; right: 12%; bottom: -1px; left: 12%; height: 2px; background: var(--terracotta-dark); content: ""; }
.editorial-grid, .model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.45rem .65rem; }
.model-card { min-width: 0; }
.model-card__visual { position: relative; display: block; width: 100%; aspect-ratio: 4/5; overflow: hidden; padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; }
.model-card__visual img { height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.model-card__visual:hover img { transform: scale(1.025); }
.ai-badge { display: inline-flex; min-height: 1.65rem; align-items: center; padding: .2rem .5rem; border: 1px solid currentColor; border-radius: 99px; background: var(--ivory); color: var(--ink); font-size: .54rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.source-badge { display: inline-flex; min-height: 1.7rem; align-items: center; gap: .32rem; padding: .22rem .48rem; border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 99px; background: var(--ivory); color: var(--ink); font-size: .55rem; font-weight: 700; letter-spacing: .055em; line-height: 1; text-transform: uppercase; }
.source-badge { white-space: nowrap; }
.source-badge__icon { position: relative; display: inline-block; width: .74rem; height: .74rem; flex: 0 0 auto; }
.source-badge[data-state="instagram"] .source-badge__icon { border: 1.2px solid currentColor; border-radius: 3px; }
.source-badge[data-state="instagram"] .source-badge__icon::before { position: absolute; top: 50%; left: 50%; width: .28rem; height: .28rem; border: 1px solid currentColor; border-radius: 50%; content: ""; translate: -50% -50%; }
.source-badge[data-state="instagram"] .source-badge__icon::after { position: absolute; top: .09rem; right: .09rem; width: .1rem; height: .1rem; border-radius: 50%; background: currentColor; content: ""; }
.source-badge[data-state="partenaire"] .source-badge__icon { border: 1.2px solid currentColor; border-radius: 50%; }
.source-badge[data-state="partenaire"] .source-badge__icon::before { position: absolute; top: 50%; left: 50%; width: .22rem; height: .22rem; border-radius: 50%; background: currentColor; content: ""; translate: -50% -50%; }
.source-badge[data-state="pinterest"] .source-badge__icon { border: 1.2px solid currentColor; border-radius: 50%; }
.source-badge[data-state="pinterest"] .source-badge__icon::before { position: absolute; top: 18%; left: 45%; width: 1.2px; height: 72%; background: currentColor; content: ""; rotate: 12deg; }
.source-badge[data-state="autre"] .source-badge__icon { display: none; }
.source-badge[data-state="ai"] .source-badge__icon { background: currentColor; clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%); }
.model-card__visual .source-badge { position: absolute; right: .5rem; bottom: .5rem; }
/* Tag « À essayer » : modèles projetables (D.26), masqué quand les 3 essais sont utilisés (D.24). */
.try-tag { position: absolute; z-index: 1; top: .5rem; left: .5rem; display: inline-flex; min-height: 1.7rem; align-items: center; padding: .22rem .55rem; border-radius: 99px; background: var(--terracotta-dark); color: var(--white); font-size: .55rem; font-weight: 700; letter-spacing: .055em; line-height: 1; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 8px rgba(22,21,19,.18); }
.try-tag[hidden], :root[data-essais="epuises"] .try-tag { display: none; }
.model-card__meta { display: flex; align-items: start; justify-content: space-between; gap: .5rem; padding-top: .65rem; }
.model-card__meta > button:first-child { min-height: 2.75rem; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.model-card__meta strong { display: block; font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; line-height: 1.08; }
.model-card__meta small { display: block; margin-top: .18rem; color: var(--stone); font-size: .64rem; font-weight: 600; line-height: 1.3; text-transform: uppercase; }
.model-card__price { display: block; margin-top: .28rem; color: var(--terracotta-dark); font-size: .72rem; font-weight: 700; line-height: 1.35; }
.favorite-button { min-width: 2.75rem; min-height: 2.75rem; border: 0; background: transparent; font-size: 1.5rem; cursor: pointer; }
.favorite-button[data-state="active"] { color: var(--terracotta-dark); }
.empty-state { padding: 4rem 1.2rem; border: 1px solid var(--sand); text-align: center; }
.empty-state[data-state="hidden"] { display: none; }
.empty-state > span { font-family: var(--font-display); font-size: 3rem; }
.empty-state p { color: var(--stone); line-height: 1.5; }

.explore-body { padding-top: 0; }
.explore-tabs { margin: 0 0 1.35rem; }
.explore-tabs button { min-height: 3.25rem; font-size: .75rem; text-transform: none; }
.explore-panel[data-state="hidden"] { display: none; }
.explore-photos .result-count { margin-top: 0; }
.screen--explore .model-card__meta small, .screen--explore .source-badge { font-size: .75rem; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 1.8rem 0 1rem; border-bottom: 1px solid var(--ink); }
.section-heading:first-child { margin-top: 0; }
.section-heading h2 { margin-bottom: .75rem; font-size: 2.1rem; }
.family-rail { display: grid; grid-auto-columns: 52%; grid-auto-flow: column; gap: .65rem; overflow-x: auto; padding-bottom: .8rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.family-card { position: relative; aspect-ratio: 3/4; overflow: hidden; padding: 0; border: 0; background: var(--paper); scroll-snap-align: start; cursor: pointer; }
.family-card::after { position: absolute; inset: 52% 0 0; background: rgba(22,21,19,.78); content: ""; }
.family-card img { height: 100%; object-fit: cover; }
.family-card > span { position: absolute; z-index: 1; right: .75rem; bottom: .7rem; left: .75rem; color: var(--white); text-align: left; }
.family-card strong { display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; line-height: 1.05; }
.family-card small { display: block; font-size: .75rem; line-height: 1.3; text-transform: none; }
.family-card__count { margin-top: .35rem; font-weight: 700; }
.family-card__description { display: -webkit-box !important; margin-top: .35rem; overflow: hidden; color: var(--paper); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.collection-list { display: grid; gap: 1rem; }
.list-empty { display: none; margin: 0; padding: 1.2rem 0; color: var(--stone); font-size: .85rem; line-height: 1.5; }
.collection-list:empty, .occasion-groups:empty { display: none; }
.collection-list:empty + .list-empty, .occasion-groups:empty + .list-empty { display: block; }
.collection-card button { position: relative; display: grid; width: 100%; min-height: 18rem; align-items: end; overflow: hidden; padding: 0; border: 0; background: var(--cacao); color: var(--white); text-align: left; cursor: pointer; }
.collection-card img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.collection-card button::after { position: absolute; right: 0; bottom: 0; left: 0; height: 36%; background: rgba(22,21,19,.8); content: ""; }
.collection-card div { position: relative; z-index: 1; width: 100%; padding: 1.25rem; }
.collection-card h3 { margin: 0; font-size: clamp(2rem, 9vw, 3rem); }
.occasion-rail { display: grid; grid-auto-columns: 72%; grid-auto-flow: column; gap: .75rem; overflow-x: auto; padding: .25rem 0 .8rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.occasion-group + .occasion-group { margin-top: 1.6rem; }
.occasion-heading { margin-top: 0; }
.occasion-card { scroll-snap-align: start; }
.occasion-card button { position: relative; display: grid; width: 100%; aspect-ratio: 4/5; align-items: end; overflow: hidden; padding: 0; border: 0; border-radius: var(--radius-xs); background: var(--cacao); color: var(--white); text-align: left; cursor: pointer; }
.occasion-card img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.occasion-card button::after { position: absolute; right: 0; bottom: 0; left: 0; height: 38%; background: rgba(22,21,19,.82); content: ""; }
.occasion-card div { position: relative; z-index: 1; width: 100%; padding: 1.1rem; }
.occasion-card h3 { margin: 0; font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.04; }
.occasion-card span { display: block; margin-top: .55rem; font-size: .75rem; font-weight: 700; }

/* Collection */
.screen--dark-hero { background: var(--cacao); color: var(--white); }
.collection-hero { position: relative; height: 70dvh; min-height: 32rem; }
.collection-hero::after { position: absolute; inset: 52% 0 0; background: rgba(22,21,19,.72); content: ""; }
.collection-hero > img { height: 100%; object-fit: cover; }
.collection-hero > div { position: absolute; z-index: 1; right: var(--page-pad); bottom: 2rem; left: var(--page-pad); }
.collection-hero h1 { margin-bottom: 1rem; }
.collection-hero p:last-child { max-width: 30rem; margin-bottom: 0; color: var(--paper); line-height: 1.5; }
.collection-content { padding: 1.2rem 0 calc(2rem + env(safe-area-inset-bottom)); background: var(--ivory); color: var(--ink); }
.collection-carousel { display: grid; grid-auto-columns: 72%; grid-auto-flow: column; gap: .8rem; overflow-x: auto; padding: 0 var(--page-pad) 1.3rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-card { display: block; min-height: 2.75rem; overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--ink); scroll-snap-align: start; text-align: left; cursor: pointer; }
.carousel-card img { aspect-ratio: 4/5; object-fit: cover; }
.carousel-card > span { display: block; padding: .75rem .15rem 0; }
.carousel-card strong { display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; line-height: 1.1; }
.carousel-card small { display: block; margin-top: .3rem; color: var(--stone); font-size: .75rem; }
.collection-grid-button { width: calc(100% - (2 * var(--page-pad))); margin: 0 var(--page-pad); }

/* Recherche */
.screen--search { background: var(--ivory); }
.search-intro { position: absolute; inset: 0; transition: opacity 260ms ease, transform 260ms var(--ease), visibility 0s; }
.search-intro[data-state="hidden"] { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.search-brand { display: flex; min-height: calc(72px + env(safe-area-inset-top)); align-items: center; justify-content: center; padding-top: env(safe-area-inset-top); font-size: 16px; }
.search-intro__body { margin-top: 70px; padding: 0 24px calc(7rem + env(safe-area-inset-bottom)); }
.search-intro h1 { max-width: 260px; margin: 0 0 22px; font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.search-intro h1 em { color: var(--terracotta-dark); font-weight: 500; }
.quick-search { display: flex; align-items: flex-start; flex-direction: column; gap: 10px; }
.quick-search button { display: inline-flex; width: fit-content; height: 46px; align-items: center; gap: 9px; padding: 8px 10px 8px 8px; border: 0; border-radius: 4px; background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer; }
.quick-search img { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 3px; object-fit: cover; }
.search-crown { position: absolute; top: clamp(25rem, 62%, 34rem); left: 50%; width: 132px; height: 102px; opacity: 0; visibility: hidden; transform: translate(-50%, -50%); transition: opacity 200ms ease, visibility 0s 200ms; }
.search-crown[data-state="visible"] { opacity: .72; visibility: visible; transition-delay: 0s; }
.search-crown img { width: 132px; height: 102px; object-fit: contain; animation: search-crown-float 4s ease-in-out infinite; }
.search-results-shell { min-height: 100%; padding: 12px 12px calc(8rem + env(safe-area-inset-bottom)); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 420ms ease, transform 420ms var(--ease), visibility 0s 420ms; }
.search-results-shell[data-state="visible"] { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.search-results-shell .result-count { margin: 0 0 12px; color: var(--stone); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.model-grid.search-results { display: block; max-width: 52rem; margin: 0 auto; column-count: 2; column-gap: 10px; }
.search-results .model-card { display: inline-block; width: 100%; margin: 0 0 10px; break-inside: avoid; }
.search-results .model-card__visual { aspect-ratio: auto; border-radius: 4px; }
.search-results .model-card__visual img { height: auto; }
.search-results .model-card__visual .source-badge { top: .5rem; right: .5rem; bottom: auto; }
.search-empty { min-height: calc(100dvh - 8rem); place-items: center; padding: 2rem; border: 0; }
.search-empty[data-state="visible"] { display: grid; }
.search-empty p { max-width: 22rem; margin: 0; color: var(--stone); font-size: 14px; font-weight: 500; line-height: 1.55; }
.tag-list span { flex: 0 0 auto; min-width: 2.75rem; min-height: 2.75rem; padding: .45rem .65rem; border: 1px solid var(--sand); border-radius: 99px; background: transparent; font-size: .62rem; text-transform: uppercase; }
.result-count { margin: 1.2rem 0; color: var(--stone); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }

/* Fiche modèle : sur mobile, le ratio naturel garantit qu'aucun visage ni cheveu n'est coupé. */
.screen--model { display: flex; overflow-y: auto; flex-direction: column; background: var(--ivory); }
.model-visual { position: relative; width: 100%; flex: 0 0 auto; margin: 0; overflow: hidden; background: var(--ivory); }
.model-gallery { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.model-gallery::-webkit-scrollbar { display: none; }
.model-gallery__track { display: flex; width: 100%; align-items: flex-start; }
.model-gallery__slide { width: 100%; flex: 0 0 100%; scroll-snap-align: start; }
.model-gallery__slide img { height: auto; }
.model-gallery__control { position: absolute; z-index: 3; top: 50%; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(22,21,19,.56); color: var(--white); cursor: pointer; translate: 0 -50%; }
.model-gallery__control--previous { left: var(--page-pad); }
.model-gallery__control--next { right: var(--page-pad); }
.model-gallery__control:disabled { opacity: .28; cursor: default; }
.model-gallery__pagination { position: absolute; z-index: 3; right: 0; bottom: 1rem; left: 0; display: flex; justify-content: center; }
.model-gallery__dot { position: relative; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.model-gallery__dot::after { position: absolute; top: 50%; left: 50%; width: .38rem; height: .38rem; border: 1px solid var(--white); border-radius: 50%; background: transparent; content: ""; translate: -50% -50%; }
.model-gallery__dot[data-state="active"]::after { background: var(--white); }
.model-visual[data-state="single"] .model-gallery__control, .model-visual[data-state="single"] .model-gallery__pagination { display: none; }
.model-visual figcaption { display: none; }
/* Le panneau suit la photo dans le flux et la chevauche juste assez pour conserver l'effet éditorial. */
.model-sheet { position: relative; z-index: 4; flex: 0 0 auto; margin-top: -1.15rem; }
.model-sheet__source[href] { text-decoration: none; }
.model-sheet__source[href]::after { content: "↗"; font-size: .8em; }
.model-sheet__source[href]::before { position: absolute; inset: -.45rem -.3rem; content: ""; }
.model-sheet__source[href]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.model-sheet__source { position: absolute; z-index: 2; top: 0; right: var(--page-pad); min-height: 2rem; padding: .3rem .62rem; border-color: color-mix(in srgb, var(--ink) 18%, transparent); transform: translateY(calc(-100% - .75rem)); }
.model-sheet__content { padding: 1.2rem var(--page-pad) calc(1rem + env(safe-area-inset-bottom)); border-radius: 1.15rem 1.15rem 0 0; background: var(--ivory); }
.model-sheet h1 { margin-bottom: .65rem; font-size: clamp(2.25rem, 8vw, 2.75rem); text-wrap: balance; }
.model-description { display: -webkit-box; margin-bottom: .8rem; overflow: hidden; color: var(--stone); font-size: .88rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.tag-list--model { flex-wrap: nowrap; gap: .35rem; margin-bottom: .85rem; overflow-x: auto; scrollbar-width: none; }
.tag-list--model::-webkit-scrollbar { display: none; }
.tag-list--model span { min-width: auto; min-height: 1.75rem; padding: .3rem .55rem; border: 0; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--paper) 70%, transparent); font-size: .56rem; }
.model-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: .9rem 0 .3rem; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.model-facts div { min-width: 0; padding: 0 .35rem; text-align: center; }
.model-facts div:first-child { padding-left: 0; }
.model-facts div:last-child { padding-right: 0; }
.model-facts dd { margin: 0 0 .3rem; color: var(--ink); font-size: .78rem; font-weight: 700; line-height: 1.25; }
.model-facts dt { color: var(--stone); font-size: .58rem; line-height: 1.35; }
.estimates-disclosure { text-align: center; }
.estimates-disclosure__trigger { min-height: 2.75rem; padding: .3rem .4rem; border: 0; background: transparent; color: var(--stone); font-size: .64rem; cursor: pointer; }
.estimates-disclosure__note { max-width: 22rem; max-height: 0; margin: 0 auto; overflow: hidden; color: var(--stone); font-size: .64rem; line-height: 1.45; opacity: 0; transition: max-height 260ms var(--ease), opacity 200ms ease, margin 260ms var(--ease); }
.estimates-disclosure__note[data-state="visible"] { max-height: 4rem; margin-bottom: .65rem; opacity: 1; }
.model-actions { display: grid; gap: .2rem; margin-top: clamp(1.5rem, 3vh, 2rem); }
.model-adjust { min-height: 2.75rem; padding: .5rem; border: 0; background: transparent; color: var(--ink); font-size: .72rem; font-weight: 600; text-decoration: underline; text-underline-offset: .22rem; cursor: pointer; }
/* La couronne transforme le reliquat des très grands écrans en fin de page volontaire, sans étirer la fiche. */
.model-page-end { display: grid; min-height: 0; flex: 1 0 0; place-items: center; overflow: hidden; }
.model-page-end img { width: 3.75rem; height: 2.75rem; object-fit: contain; opacity: .72; }

/* Préparation */
.screen--prepare { overflow: hidden; background: var(--ink); }
.prepare-canvas { position: absolute; inset: 0; overflow: hidden; background: var(--ink); cursor: pointer; isolation: isolate; }
.prepare-canvas img { position: absolute; inset: 0; width: 100%; height: 100%; }
.prepare-backdrop { display: none; }
/* Le cadrage plein écran privilégie la coiffure et accepte une coupe latérale de la tenue. */
.prepare-model-image { z-index: 1; object-fit: cover; object-position: center center; }
.prepare-header { position: absolute; z-index: 12; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem; align-items: center; padding: calc(.85rem + env(safe-area-inset-top)) var(--page-pad) .75rem; color: var(--white); }
.prepare-header__button { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(22,21,19,.26); color: var(--white); cursor: pointer; }
.prepare-header__button svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.prepare-heading { min-width: 0; padding: .42rem .65rem; text-align: center; }
.prepare-heading p { margin: 0 0 .18rem; font-size: .56rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.prepare-heading h1 { overflow: hidden; margin: 0; font-family: var(--font-ui); font-size: .86rem; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.prepare-photo { position: relative; }
.prepare-photo img { display: none; width: 100%; height: 100%; object-fit: cover; }
.prepare-photo[data-state="photo"] svg { display: none; }
.prepare-photo[data-state="photo"] img { display: block; }
.prepare-panel { position: absolute; z-index: 11; right: var(--page-pad); bottom: calc(7rem + env(safe-area-inset-bottom)); left: var(--page-pad); max-width: 32rem; margin: 0 auto; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: .9rem; background: var(--ivory); color: var(--ink); opacity: 1; transform: translateY(0); transition: opacity 200ms ease, transform 300ms var(--ease), visibility 0s; }
.prepare-panel[data-state="closed"] { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(.75rem); transition-delay: 0s, 0s, 300ms; }
.prepare-panel__content { padding: 1rem; }
.prepare-panel__content[data-state="hidden"] { display: none; }
.prepare-panel__heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.prepare-panel__heading strong { font-size: .8rem; }
.prepare-panel__heading span { color: var(--stone); font-size: .7rem; }
.prepare-swatches { display: flex; align-items: start; justify-content: space-between; gap: .65rem; }
.prepare-swatches button { position: relative; display: grid; width: 3rem; min-width: 3rem; height: 3rem; place-items: end center; padding: 0 0 .16rem; border: 4px solid var(--ivory); border-radius: 50%; color: var(--white); cursor: pointer; outline: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.prepare-swatches button[data-state="active"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.prepare-swatches button span { padding: .12rem .25rem; border-radius: 99px; background: rgba(22,21,19,.6); font-size: .5rem; font-weight: 700; line-height: 1; }
.step-control { padding: 0; border: 0; }
.step-control + .step-control { margin-top: 1rem; }
.step-control legend { margin-bottom: .55rem; font-size: .7rem; font-weight: 700; }
.step-control > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.step-control:last-child > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step-control button { min-height: 2.75rem; padding: .35rem .2rem; border: 1px solid var(--sand); border-radius: var(--radius-xs); background: transparent; color: var(--stone); font-size: .63rem; cursor: pointer; }
.step-control button[data-state="active"] { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.prepare-toolbar { position: absolute; z-index: 12; right: 0; bottom: calc(.75rem + env(safe-area-inset-bottom)); left: 0; display: flex; align-items: end; justify-content: center; gap: 1.1rem; pointer-events: none; }
.prepare-action { position: relative; display: grid; width: 4.25rem; justify-items: center; gap: .35rem; padding: 0; border: 0; background: transparent; color: var(--white); cursor: pointer; pointer-events: auto; }
.prepare-action small { font-size: .61rem; font-weight: 600; }
.prepare-action__circle { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 50%; background: var(--ivory); color: var(--ink); }
.prepare-action__circle svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.prepare-action__color i { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #21150f; }
.prepare-action[data-state="active"] .prepare-action__circle { outline: 2px solid var(--ivory); outline-offset: 3px; }
.prepare-action--project { width: 5rem; }
.prepare-action--project .prepare-action__circle { width: 4.35rem; height: 4.35rem; border-color: var(--ink); background: var(--ink); }
.prepare-action--project img { width: 3.8rem; height: 2.7rem; object-fit: contain; }
.prepare-tutorial { position: absolute; z-index: 20; inset: 0; }
.prepare-tutorial[data-state="hidden"] { display: none; }
.prepare-tutorial__scrim { position: absolute; inset: 0; background: rgba(22,21,19,.56); }
.prepare-tutorial__card { position: absolute; z-index: 2; bottom: calc(8rem + env(safe-area-inset-bottom)); left: var(--page-pad); width: min(17.5rem, calc(100% - 2 * var(--page-pad))); padding: 1rem; border-radius: .9rem; background: var(--ivory); color: var(--ink); transition: left 260ms var(--ease), right 260ms var(--ease), transform 260ms var(--ease); }
.prepare-tutorial[data-step="1"] .prepare-tutorial__card { left: 50%; transform: translateX(-50%); }
.prepare-tutorial[data-step="2"] .prepare-tutorial__card { right: var(--page-pad); left: auto; }
.prepare-tutorial__card > small { color: var(--ochre); font-size: .58rem; }
.prepare-tutorial__card p { margin: .55rem 0 1rem; font-size: .85rem; line-height: 1.45; }
.prepare-tutorial__card > div { display: flex; align-items: center; justify-content: space-between; }
.prepare-tutorial__card button { min-height: 2.75rem; padding: .5rem .75rem; border: 0; border-radius: var(--radius-xs); background: transparent; font-size: .7rem; cursor: pointer; }
.prepare-tutorial__card button:last-child { background: var(--ink); color: var(--ivory); font-weight: 700; }
.prepare-toolbar[data-tutorial-step] { z-index: 21; }
.prepare-toolbar[data-tutorial-step] .prepare-action { opacity: .34; pointer-events: none; }
.prepare-toolbar[data-tutorial-step="0"] .prepare-action:nth-child(1), .prepare-toolbar[data-tutorial-step="1"] .prepare-action:nth-child(2), .prepare-toolbar[data-tutorial-step="2"] .prepare-action:nth-child(3) { opacity: 1; }
.prepare-toolbar[data-tutorial-step="0"] .prepare-action:nth-child(1) .prepare-action__circle, .prepare-toolbar[data-tutorial-step="1"] .prepare-action:nth-child(2) .prepare-action__circle, .prepare-toolbar[data-tutorial-step="2"] .prepare-action:nth-child(3) .prepare-action__circle { outline: 4px solid var(--ivory); outline-offset: 4px; }

/* Chargement */
.screen--loading { display: grid; place-items: center; padding: 24px; background: var(--ivory); color: var(--ink); text-align: center; }
.projection-loading { display: flex; width: 100%; align-items: center; justify-content: center; flex-direction: column; transition: opacity 180ms ease, transform 180ms var(--ease); }
.projection-loading[data-state="hidden"], .projection-error[data-state="hidden"] { display: none; }
.screen--loading[data-mode="revealing"] .projection-loading { opacity: 0; transform: translateY(-4px); }
.loading-crown { width: 168px; height: 107px; margin-bottom: -48px; object-fit: contain; transform-origin: 50% 78%; animation: loading-crown-drop 2.4s var(--ease) infinite; }
.projection-status { width: 100%; }
.loading-message { margin: 30px 0 0; font-family: var(--font-ui); font-size: 20px; font-weight: 600; line-height: 1.3; }
.loading-fact-block { max-width: 280px; margin: 14px auto 0; color: var(--stone); }
.loading-fact-block[data-state="hidden"] { display: none; }
.loading-fact-block p { display: -webkit-box; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.loading-fact-block cite { display: block; margin-top: 8px; font-size: 11px; font-style: normal; line-height: 1.4; }
.projection-error { width: min(100%, 22rem); }
.projection-error h1 { margin: 0; font-family: var(--font-ui); font-size: 20px; font-weight: 600; line-height: 1.4; }
.projection-error > div { display: grid; gap: .65rem; margin-top: 2rem; }
@keyframes loading-crown-drop {
  0%, 8% { opacity: 0; transform: translateY(-48px) rotate(0deg) scale(1); }
  18% { opacity: 1; }
  30% { transform: translateY(0) rotate(0deg) scale(1.16,.78); }
  42% { transform: translateY(-11px) rotate(0deg) scale(.96,1.05); }
  52% { transform: translateY(0) rotate(0deg) scale(1); }
  64% { transform: translateY(0) rotate(12deg) scale(1); }
  74% { transform: translateY(0) rotate(-6deg) scale(1); }
  84%, 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

/* Résultat */
.screen--result { display: grid; overflow: hidden; grid-template-rows: minmax(0, 1fr) auto; background: var(--ivory); }
.screen--result .compare, .screen--result .result-sheet { transition: opacity 500ms ease, transform 500ms var(--ease); }
.screen--result[data-reveal="entering"] .compare { opacity: 0; transform: scale(1.018); }
.screen--result[data-reveal="entering"] .result-sheet { opacity: 0; transform: translateY(6px); }
.screen--result[data-reveal="entering"] .compare input { pointer-events: none; }
.screen--result[data-reveal="ready"] .compare, .screen--result[data-reveal="ready"] .result-sheet { opacity: 1; transform: none; }
.result-header { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
.result-header .brand-lockup { justify-self: center; }
.result-share { transition: transform 150ms ease; }
.result-share[data-state="pressed"] { transform: scale(.9); }
.compare { position: relative; min-height: 0; overflow: hidden; background: var(--paper); touch-action: pan-y; isolation: isolate; }
.compare-layer { position: absolute; inset: 0; overflow: hidden; background: var(--paper); }
.compare-layer img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.compare[data-source="composite"] .compare-layer img { width: 200%; max-width: none; }
.compare[data-source="composite"] .compare-layer--before img { object-position: left center; }
.compare-layer--after { clip-path: inset(0 0 0 var(--split)); }
.compare[data-source="composite"] .compare-layer--after img { transform: translateX(-50%); object-position: right center; }
.compare input { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare-handle { position: absolute; z-index: 5; top: 50%; left: var(--split); display: flex; width: 2.7rem; height: 2.7rem; align-items: center; justify-content: center; gap: .15rem; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 50%; background: var(--ivory); color: var(--ink); box-shadow: 0 3px 12px rgba(22,21,19,.12); font-size: 1.05rem; line-height: 1; pointer-events: none; translate: -50% -50%; }
.compare::after { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--split); width: 1px; background: var(--ivory); box-shadow: 0 0 0 1px rgba(22,21,19,.08); content: ""; pointer-events: none; }
.compare-label { position: absolute; z-index: 5; top: calc(5.25rem + env(safe-area-inset-top)); min-height: 1.8rem; padding: .35rem .65rem; border-radius: 99px; background: var(--ivory); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.1; }
.compare-label--before { left: var(--page-pad); }
.compare-label--after { right: var(--page-pad); }
.result-settings { position: absolute; z-index: 7; bottom: .8rem; left: 50%; display: flex; gap: 1rem; translate: -50% 0; }
.result-setting-action { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 50%; background: var(--ivory); color: var(--ink); box-shadow: 0 3px 12px rgba(22,21,19,.12); cursor: pointer; }
.result-setting-action svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.result-setting-action__color { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #21150f; }
.result-setting-action[data-state="active"] { outline: 2px solid var(--ivory); outline-offset: 3px; }
.result-settings-panel { position: absolute; z-index: 7; right: var(--page-pad); bottom: 5.2rem; left: var(--page-pad); max-width: 32rem; margin: 0 auto; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: .9rem; background: var(--ivory); color: var(--ink); box-shadow: 0 8px 28px rgba(22,21,19,.16); opacity: 1; transform: none; transition: opacity 200ms ease, transform 300ms var(--ease), visibility 0s; }
.result-settings-panel[data-state="closed"] { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(.75rem); transition-delay: 0s, 0s, 300ms; }
.result-settings-panel__content { padding: 1rem; }
.result-settings-panel__content[data-state="hidden"] { display: none; }
.result-settings-panel__apply { min-height: 2.85rem; margin-top: 1rem; }
.result-sheet { position: relative; z-index: 6; padding: 1rem var(--page-pad) calc(.7rem + env(safe-area-inset-bottom)); background: var(--ivory); }
.result-sheet .demo-pill { min-height: 1.65rem; margin-bottom: .55rem; font-size: .56rem; }
.result-sheet h1 { margin-bottom: .45rem; font-size: clamp(2rem, 9vw, 2.65rem); line-height: 1; text-wrap: balance; }
.result-sheet > p:not(.demo-pill) { max-width: 34rem; margin-bottom: .85rem; color: var(--stone); font-size: 14px; line-height: 1.45; }
.result-actions { display: grid; gap: .15rem; }
.result-actions .button { min-height: 3.25rem; }
.result-rerun { justify-self: center; border-bottom: 0; text-decoration: underline; text-underline-offset: .22rem; }

/* Navigation flottante */
.floating-controls { --keyboard-offset: 0px; position: fixed; z-index: 20; bottom: calc(.75rem + env(safe-area-inset-bottom)); left: 50%; display: flex; max-width: calc(100vw - 2rem); align-items: center; justify-content: center; transform: translate(-50%, calc(-1 * var(--keyboard-offset))); transition: transform 360ms var(--ease), opacity 220ms ease; }
.floating-controls > * { pointer-events: auto; }
.floating-controls[data-state="hidden"] { pointer-events: none; opacity: 0; transform: translate(-50%, calc(1.5rem - var(--keyboard-offset))); }
.floating-controls[data-state="hidden"] > * { pointer-events: none; }
.floating-nav, .filter-fab { border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); background: var(--ivory); color: var(--ink); }
.floating-nav { position: relative; width: 268px; height: 58px; flex: 0 0 auto; overflow: hidden; border-radius: 29px; transition: width 380ms var(--ease), opacity 200ms ease; }
.floating-nav[data-state="compact"] { width: 172px; }
.floating-nav[data-state="search"] { width: min(34rem, calc(100vw - 6.125rem)); }
.floating-nav__destinations { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 .35rem; transition: opacity 180ms ease, transform 300ms var(--ease); }
.nav-destination { position: relative; display: flex; min-width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; flex-direction: column; gap: .16rem; padding: .25rem; border: 0; border-radius: 29px; background: transparent; color: var(--stone); cursor: pointer; }
.nav-destination[data-state="active"] { color: var(--ink); }
.nav-destination[data-state="active"]::after { position: absolute; bottom: .34rem; left: 50%; width: 1rem; height: 2px; border-radius: 2px; background: currentColor; content: ""; translate: -50% 0; }
.nav-icon { width: 1.18rem; height: 1.18rem; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; transition: stroke-width 160ms ease; }
.nav-destination[data-state="active"] .nav-icon { stroke-width: 2.15; }
.nav-label { max-height: .95rem; overflow: hidden; color: currentColor; font-size: .66rem; font-weight: 500; line-height: 1.2; opacity: 1; transition: max-height 260ms var(--ease), opacity 200ms ease, margin 260ms var(--ease); }
.floating-nav[data-state="compact"] .nav-label { max-height: 0; margin: 0; opacity: 0; }
.floating-nav[data-state="compact"] .nav-destination { gap: 0; }
.floating-nav[data-state="compact"] .nav-destination[data-state="active"]::after { bottom: .48rem; }
.floating-nav[data-state="search"] .floating-nav__destinations { pointer-events: none; opacity: 0; transform: scale(.88); }
.floating-search { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 .42rem 0 .9rem; opacity: 0; pointer-events: none; transform: scale(.96); transition: opacity 200ms ease, transform 300ms var(--ease); }
.floating-nav[data-state="search"] .floating-search { opacity: 1; pointer-events: auto; transform: scale(1); transition-delay: 100ms; }
.floating-search__action { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.floating-search__action svg, .filter-fab svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.floating-search__field { min-width: 0; flex: 1 1 auto; }
.floating-search__field input { width: 100%; height: 2.75rem; padding: 0 .25rem 0 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: var(--font-ui); font-size: .875rem; }
.floating-search__field input::placeholder { color: var(--stone); opacity: 1; }
.floating-search__field input::-webkit-search-cancel-button { display: none; }
.floating-search__clear[data-state="hidden"] { display: none; }
.floating-search__clear svg { width: 1.4rem; height: 1.4rem; padding: .28rem; border-radius: 50%; background: var(--ink); color: var(--ivory); stroke: currentColor; stroke-width: 2.2; }
.filter-fab { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; margin-left: .5rem; padding: 0; border-radius: 50%; cursor: pointer; transition: width 320ms var(--ease), margin 320ms var(--ease), opacity 200ms ease, transform 320ms var(--ease); }
.filter-fab[data-state="hidden"] { width: 0; margin-left: 0; overflow: hidden; border-width: 0; opacity: 0; pointer-events: none; transform: scale(.35); }
.filter-fab__close { display: none; }
.filter-fab[data-state="close"] .filter-fab__filter { display: none; }
.filter-fab[data-state="close"] .filter-fab__close { display: block; }
.nav-destination:focus-visible, .floating-search__action:focus-visible, .filter-fab:focus-visible { outline: 2px solid var(--terracotta-dark); outline-offset: -3px; }
.floating-search__field input:focus-visible { outline: 0; }
.floating-nav:has(.floating-search__field input:focus-visible) { border-color: var(--terracotta-dark); outline: 2px solid color-mix(in srgb, var(--terracotta-dark) 45%, transparent); outline-offset: 2px; }

/* Dialogues, feuilles et états système */
dialog { color: var(--ink); font-family: var(--font-ui); }
dialog::backdrop { background: rgba(22,21,19,.58); }
.bottom-sheet { width: min(100%, 37rem); max-width: none; max-height: 86dvh; margin: auto auto 0; padding: 0; overflow: hidden; border: 0; border-radius: 1rem 1rem 0 0; background: var(--ivory); }
.bottom-sheet[open] { animation: sheet-in .35s var(--ease); }
.bottom-sheet form, .bottom-sheet > div { display: grid; gap: 1.3rem; max-height: 86dvh; overflow-y: auto; padding: 1.3rem var(--page-pad) calc(1rem + env(safe-area-inset-bottom)); }
.bottom-sheet header { display: flex; align-items: start; justify-content: space-between; }
.bottom-sheet h2 { margin-bottom: 0; }
.sheet-copy { margin: -.4rem 0 0; color: var(--stone); line-height: 1.5; }
.sheet-grab { justify-self: center; width: 2.5rem; height: .25rem; border-radius: 99px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.choice-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice-chips label input { position: absolute; opacity: 0; }
.choice-chips label span { display: inline-flex; min-height: 2.75rem; align-items: center; padding: .55rem .8rem; border: 1px solid var(--sand); border-radius: 99px; font-size: .67rem; cursor: pointer; }
.choice-chips label input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.choice-chips label input[type="checkbox"]:checked + span::before { content: "✓"; margin-right: .35rem; }
.choice-chips label input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.sheet-actions { display: flex; align-items: center; justify-content: space-between; }
.photo-sheet > div { gap: .75rem; }
.photo-sheet header { margin-bottom: .2rem; }
.photo-sheet header > div { display: grid; gap: .45rem; }
.photo-sheet h2 { font-family: var(--font-ui); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.photo-sheet .sheet-copy { margin: 0; font-size: .75rem; }
.media-choice { display: grid; min-height: 3.6rem; grid-template-columns: 2.5rem 1fr; padding: .65rem .2rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: transparent; text-align: left; cursor: pointer; }
.media-choice > span { display: grid; grid-row: 1 / 3; align-self: center; place-items: center; }
.media-choice svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.media-choice strong { font-size: .85rem; font-weight: 600; }
.media-choice small { color: var(--stone); font-size: .68rem; }
.photo-sheet__cancel { min-height: 3rem; margin-top: .4rem; border: 0; border-radius: .7rem; background: color-mix(in srgb, var(--paper) 45%, var(--ivory)); font-weight: 700; cursor: pointer; }
.consent-dialog { width: min(100%, 37rem); max-width: none; height: 100dvh; max-height: none; margin: auto; padding: 0; border: 0; background: var(--ivory); }
.consent-dialog__content { display: flex; min-height: 100%; flex-direction: column; padding: calc(3rem + env(safe-area-inset-top)) var(--page-pad) calc(1rem + env(safe-area-inset-bottom)); }
.consent-dialog__shield { display: grid; width: 4rem; height: 4rem; place-items: center; margin-top: clamp(3.5rem, 10dvh, 7rem); border-radius: 50%; background: color-mix(in srgb, var(--paper) 35%, var(--ivory)); }
.consent-dialog__shield svg, .consent-dialog li svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.consent-dialog__shield svg { width: 1.55rem; height: 1.55rem; }
.consent-dialog h2 { margin: 1.6rem 0 1rem; font-family: var(--font-ui); font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
.consent-dialog ul { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.consent-dialog li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .55rem; font-size: .82rem; line-height: 1.5; }
.consent-dialog li svg { width: 1.05rem; height: 1.05rem; margin-top: .18rem; }
.consent-dialog li:last-child { color: var(--terracotta-dark); font-style: italic; }
/* Champ du code de session : seul champ texte hors capsule de recherche. */
.access-code-field { width: 100%; min-height: 3.3rem; margin-top: 1.25rem; padding: 0 1rem; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: var(--radius-xs); background: var(--white); color: var(--ink); font-family: var(--font-ui); font-size: 1rem; font-weight: 600; letter-spacing: .08em; }
.access-code-field:focus-visible { border-color: var(--terracotta-dark); outline: 2px solid color-mix(in srgb, var(--terracotta-dark) 45%, transparent); outline-offset: 2px; }
.consent-dialog__actions { display: grid; gap: .45rem; margin-top: auto; padding-top: 2rem; }
.consent-dialog__actions .text-button { justify-self: center; border-bottom: 0; }
.rating-dialog, .summary-dialog { width: min(calc(100% - 2rem), 30rem); padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--ivory); }
.rating-dialog form, .summary-dialog form { display: grid; gap: 1rem; padding: 1.4rem; }
.rating-dialog h2, .summary-dialog h2 { margin-bottom: 0; }
.rating-dialog p:not(.eyebrow), .summary-dialog p:not(.eyebrow) { color: var(--stone); line-height: 1.5; }
button:disabled { cursor: not-allowed; opacity: .42; }
.rating-scale > span { display: block; margin: .35rem 0; color: var(--stone); font-size: .6rem; }
.rating-scale > span:last-child { text-align: right; }
.rating-scale > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.rating-scale label input { position: absolute; opacity: 0; }
.rating-scale label span { display: grid; min-height: 3rem; place-items: center; border: 1px solid var(--sand); cursor: pointer; }
.rating-scale label input:checked + span { background: var(--ink); color: var(--ivory); }
/* Texte du parcours partagé par la testeuse (D.29), une rubrique par ligne. */
.summary-parcours { margin: 0; padding: .8rem; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--paper) 45%, var(--ivory)); font-size: .78rem; white-space: pre-line; }
.summary-dialog dl { display: grid; grid-template-columns: repeat(2,1fr); gap: .4rem; margin: 0; }
.summary-dialog dl div { padding: .8rem .4rem; background: var(--paper); text-align: center; }.summary-dialog dt { font-size: .58rem; text-transform: uppercase; }.summary-dialog dd { margin: .25rem 0 0; font-family: var(--font-display); font-size: 1.5rem; }
.toast { position: fixed; z-index: 70; right: 50%; bottom: calc(6rem + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 2rem); padding: .75rem 1rem; border-radius: 99px; background: var(--ink); color: var(--white); font-size: .7rem; translate: 50% 0; transition: opacity .2s ease, transform .25s var(--ease); }
.toast[data-state="hidden"] { pointer-events: none; opacity: 0; transform: translateY(.8rem); }
.offline-banner { position: fixed; z-index: 80; top: 0; right: 0; left: 0; padding: calc(.55rem + env(safe-area-inset-top)) 1rem .55rem; background: var(--terracotta-dark); color: var(--white); font-size: .68rem; text-align: center; }
.offline-banner[data-state="hidden"] { display: none; }
.overlay { display: none; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes search-crown-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Bureau : l'application conserve une présence mobile, enrichie d'espace éditorial. */
@media (min-width: 760px) {
  .splash-action { right: max(24px, calc(50vw - 18rem)); left: max(24px, calc(50vw - 18rem)); }
  .screen--onboarding { grid-template-columns: minmax(0, 1fr); }
  .onboarding-stage { width: min(36rem, 60vw); justify-self: center; }
  .onboarding-controls { width: min(36rem, 60vw); justify-self: center; }
  .editorial-grid, .model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1rem; }
  .family-rail { grid-auto-columns: 26%; }
  .occasion-rail { grid-auto-columns: 30%; }
  .collection-list { width: min(100%, 44rem); margin-right: auto; margin-left: auto; }
  .collection-hero > div { left: max(var(--page-pad), calc((100vw - 70rem)/2)); }
  .collection-carousel { grid-auto-columns: 28%; padding-right: max(var(--page-pad), calc((100vw - 70rem)/2)); padding-left: max(var(--page-pad), calc((100vw - 70rem)/2)); }
  .model-visual, .compare { right: 42%; bottom: 0; }
  /* Résultat sur grand écran : comparaison à gauche, texte à droite (même découpe que la fiche). */
  .screen--result .compare { position: absolute; top: 0; left: 0; }
  .screen--model { overflow: hidden; background: var(--ink); }
  .model-visual { position: absolute; top: 0; left: 0; height: 100%; }
  .model-gallery, .model-gallery__track, .model-gallery__slide { height: 100%; }
  .model-gallery__slide img { height: 100%; object-fit: cover; }
  .result-sheet { position: absolute; top: 0; right: 0; left: auto; display: flex; width: 42%; height: 100%; max-height: none; flex-direction: column; justify-content: center; padding: 5vw; }
  .model-sheet { position: absolute; top: 0; right: 0; left: auto; width: 42%; height: 100%; margin-top: 0; }
  .model-sheet__content { display: flex; width: 100%; height: 100%; max-height: none; flex-direction: column; justify-content: center; overflow-y: auto; padding: 5vw; border-radius: 0; }
  .model-sheet__source { top: auto; right: calc(100% + var(--page-pad)); bottom: var(--page-pad); transform: none; }
  .model-page-end { display: none; }
  .consent-dialog { width: min(calc(100% - 3rem), 30rem); height: min(calc(100dvh - 3rem), 52rem); border-radius: 1.3rem; }
  .page-header--overlay { right: 42%; }
  .screen--dark-hero .page-header--overlay { right: 0; }
  .result-actions { margin-top: 1rem; }
  .button--floating { right: auto; left: 50%; width: 20rem; translate: -50% 0; }
  /* Recherche : intro alignée sur le champ centré en bas d'écran. */
  .search-intro__body { width: min(calc(100% - 48px), 37rem); margin-right: auto; margin-left: auto; padding-right: 0; padding-left: 0; }
}

@media (max-width: 300px) {
  .floating-nav[data-state="search"] { width: calc(100vw - 5rem); }
  .filter-fab[data-state="close"] { width: 52px; height: 52px; flex-basis: 52px; }
}

@media (max-height: 720px) and (max-width: 759px) {
  .result-sheet { padding-top: .75rem; }
  .result-sheet .demo-pill { margin-bottom: .35rem; }
  .result-sheet h1 { margin-bottom: .3rem; font-size: 1.85rem; }
  .result-sheet > p:not(.demo-pill) { margin-bottom: .55rem; font-size: 12px; }
  .result-actions .button { min-height: 3rem; }
  .result-rerun { min-height: 2.6rem; }
  .result-settings-panel { bottom: 4.85rem; }
  .result-setting-action { width: 3.25rem; height: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .onboarding-card[data-state="leaving-like"], .onboarding-card[data-state="leaving-dislike"] { transform: none; opacity: 0; }
  .onboarding-card[data-reaction="like"] .onboarding-reaction, .onboarding-card[data-reaction="dislike"] .onboarding-reaction { animation: none !important; transform: translate(-50%, -50%); }
  .onboarding-complete__crown path { animation: none !important; stroke-dashoffset: 0; }
  .splash-story { display: none !important; }
  .splash-crown-disc, .splash-wordmark { opacity: 1 !important; transform: none !important; animation: none !important; }
  .loading-crown { animation: none !important; opacity: 1; transform: none; }
  .screen--result .compare, .screen--result .result-sheet { transition: opacity 200ms ease !important; transform: none !important; }
}

@media (forced-colors: active) {
  .button, .icon-button, .choice-chips label span { border: 1px solid ButtonText; }
}