/* ==========================================================================
   Simulateur Mini-Jo v4
   Atelier couleur immersif, mobile-first, sans JavaScript inline.
   ========================================================================== */

:root {
  --fond-principal: #F5F2EA;
  --blanc-casse: #FBF9F5;
  --ivoire-doux: #F6F3EE;
  --vert-logo: #94BBA8;
  --vert-logo-fonce: #497266;
  --vert-principal: #274438;
  --vert-profond: #17352B;
  --vert-secondaire: #5E7D6E;
  --beige-pierre: #D9D0C5;
  --terracotta: #C96B3B;
  --terracotta-hover: #AC5128;
  --terracotta-profond: #7D3520;
  --texte: #141B17;
  --texte-doux: rgba(20, 27, 23, 0.78);
  --texte-faint: rgba(20, 27, 23, 0.55);
  --danger: #A0121A;
  --danger-fond: #FBEDEC;
  --ok: #2D6358;
  --ok-fond: #E8F4EE;

  --font-display: 'DM Sans', Arial, sans-serif;
  --font-body: 'DM Sans', system-ui, Arial, sans-serif;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 10px 28px rgba(20, 27, 23, 0.07);
  --shadow-tight: 0 1px 2px rgba(20, 27, 23, 0.05);
  --panel-border: rgba(217, 208, 197, 0.9);
  --surface: rgba(255, 253, 249, 0.96);
  --surface-solid: #FFFDF9;
  --surface-muted: rgba(246, 243, 238, 0.82);
  --line-soft: rgba(31, 49, 41, 0.12);
  --shadow-card: 0 1px 2px rgba(20, 27, 23, 0.05);
  --shadow-control: 0 1px 2px rgba(23, 53, 43, 0.06), inset 0 1px 2px rgba(23, 53, 43, 0.05);
}

.simulator-page,
.simulator-page * ,
.simulator-page *::before,
.simulator-page *::after {
  box-sizing: border-box;
}

.simulator-page {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden; /* garde-fou pour le bandeau nuancier en breakout 100vw */
  font-family: var(--font-body);
  color: var(--texte);
  line-height: 1.55;
  background: linear-gradient(180deg, #FFFDF9 0%, #F7F3EC 52%, #EDE5D9 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.simulator-page [hidden] {
  display: none !important;
}

.simulator-page img {
  display: block;
  max-width: 100%;
}

.simulator-page a {
  color: var(--vert-logo-fonce);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.simulator-page a:hover {
  color: var(--terracotta);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.simulator-page :focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 8px;
}

.site-header {
  border-bottom: 1px solid rgba(217, 208, 197, 0.58);
  background: rgba(255, 253, 249, 0.94);
  box-shadow: 0 1px 0 rgba(251, 249, 245, 0.95);
  backdrop-filter: blur(12px);
}

.site-header__inner {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  gap: 24px;
  padding: 28px 0 30px;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--vert-profond);
}

.brand-rule {
  display: inline-block;
  width: clamp(26px, 8vw, 74px);
  height: 1px;
  background: var(--beige-pierre);
  flex: 0 1 74px;
}

.hero-copy {
  text-align: center;
}

.eyebrow,
.stage-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vert-logo-fonce);
}

.hero-copy h1 {
  margin: 8px 0 0;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(3.2rem, 9vw, 6.6rem);
  font-weight: 400;
  line-height: 0.95;
  color: var(--vert-profond);
}

.hero-copy h1 span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 1.3vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.hero-copy h1 em {
  display: block;
  margin-top: 4px;
  font-style: italic;
  color: var(--terracotta);
  white-space: nowrap;
}

.hero-lead {
  width: min(620px, 100%);
  margin: 18px auto 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  font-weight: 400;
  line-height: 1.62;
  color: var(--texte);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.main {
  width: min(1440px, calc(100% - 28px));
  margin: 0 auto;
  padding: 26px 0 80px;
}

.atelier-shell {
  padding: 8px 0 0;
}

.atelier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.atelier-panel,
.project-card,
.color-guide {
  border: 1px solid rgba(217, 208, 197, 0.72);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.atelier-panel {
  padding: 20px;
}

.photo-panel {
  order: 1;
}

.palette-panel {
  order: 2;
}

.atelier-stage {
  order: 3;
  min-width: 0;
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid rgba(251, 249, 245, 0.16);
  background:
    linear-gradient(160deg, rgba(39, 68, 56, 0.96), rgba(23, 53, 43, 0.98)),
    var(--vert-profond);
  box-shadow: 0 12px 32px rgba(20, 27, 23, 0.14);
  padding: 14px;
}

/* Bouton de lancement detache : voir regle .run-cta-bar / .run-cta-btn
   placee apres .btn-run pour primer dans la cascade (meme specificite). */

.step-head,
.project-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(73, 114, 102, 0.18);
  background: rgba(148, 187, 168, 0.18);
  color: var(--vert-principal);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 900;
  flex: 0 0 auto;
}

.step-title,
.stage-title,
.color-guide h2 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--vert-profond);
}

.step-title {
  font-size: 1.02rem;
  line-height: 1.18;
}

.step-copy,
.form-intro {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--texte-doux);
}

.support-selector {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.support-selector label,
.field label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.support-select,
.field input,
.field textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(31, 49, 41, 0.16);
  border-radius: 14px;
  background-color: var(--surface-solid);
  color: var(--texte);
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 650;
  box-shadow: var(--shadow-control);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.support-select {
  padding: 10px 40px 10px 14px;
  cursor: default;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23497266' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.support-select:hover,
.support-select:focus,
.field input:focus,
.field textarea:focus {
  border-color: var(--vert-logo-fonce);
  background-color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(148, 187, 168, 0.18), var(--shadow-control);
  outline: none;
}

.drop-zone {
  display: grid;
  place-items: center;
  min-height: 226px;
  margin-top: 16px;
  padding: 24px 16px;
  border: 1px dashed rgba(73, 114, 102, 0.42);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(246, 243, 238, 0.78));
  color: var(--texte-doux);
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.drop-zone:hover,
.drop-zone:focus-visible,
.drop-zone.over {
  border-color: var(--terracotta);
  color: var(--terracotta);
  box-shadow: 0 10px 24px rgba(23, 53, 43, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transform: translateY(-1px);
}

.drop-zone.loaded {
  border-color: var(--ok);
  background: rgba(232, 244, 238, 0.82);
  color: var(--ok);
  padding: 12px;
}

.drop-zone.error {
  border-color: var(--danger);
  background: var(--danger-fond);
  color: var(--danger);
}

.dz-icons {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
  opacity: 0.75;
}

.drop-zone.loaded .dz-icons {
  display: none;
}

.upload-preview {
  width: 100%;
  height: auto;
  max-height: min(62vh, 560px);
  margin-bottom: 12px;
  border: 4px solid rgba(255, 253, 249, 0.92);
  border-radius: 14px;
  object-fit: contain;
  background: #EDE6D8;
  box-shadow: 0 10px 22px rgba(23, 53, 43, 0.12);
}

.drop-zone.over {
  cursor: copy;
}

.drop-zone p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.drop-zone p span {
  display: block;
  margin-top: 4px;
  color: var(--texte-doux);
  font-family: var(--font-body);
  font-size: 0.82rem;
}

.upload-choice-actions {
  display: grid;
  width: min(100%, 330px);
  margin-top: 16px;
  gap: 8px;
}

.upload-choice-actions .btn {
  width: 100%;
}

.drop-zone.loaded .upload-choice-actions {
  display: none;
}

.dz-status {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
}

.dz-status.visible {
  display: inline-flex;
}

.dz-status.ok {
  color: var(--ok);
}

.dz-status.ko {
  color: var(--danger);
}

.hint {
  margin: 12px 0 0;
  font-size: 0.76rem;
  color: var(--texte-doux);
}

.photo-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.photo-reset {
  grid-column: 1 / -1;
  min-height: 46px;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid rgba(73, 114, 102, 0.22);
  border-radius: 999px;
  background: var(--surface-solid);
  color: var(--vert-principal);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(23, 53, 43, 0.05);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease, box-shadow 180ms ease;
}

.tool-btn:hover:not(:disabled) {
  border-color: var(--vert-logo-fonce);
  background: var(--vert-principal);
  color: var(--blanc-casse);
  box-shadow: 0 8px 16px rgba(23, 53, 43, 0.14);
}

.tool-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.tool-btn:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 10px 16px;
}

.stage-kicker {
  color: var(--vert-logo);
}

.stage-title {
  margin-top: 5px;
  color: var(--blanc-casse);
  font-size: clamp(1.18rem, 2vw, 1.72rem);
  line-height: 1.14;
}

.stage-note {
  max-width: 220px;
  margin: 2px 0 0;
  color: rgba(251, 249, 245, 0.7);
  font-size: 0.76rem;
  text-align: right;
}

.stage-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tool-btn-light {
  border-color: rgba(251, 249, 245, 0.3);
  background: rgba(251, 249, 245, 0.1);
  color: var(--blanc-casse);
}

.tool-btn-light:hover:not(:disabled) {
  border-color: rgba(251, 249, 245, 0.72);
  background: var(--blanc-casse);
  color: var(--vert-profond);
}

.compare-card {
  padding: 0;
}

.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 360px;
  max-height: 700px;
  border: 8px solid rgba(255, 253, 249, 0.98);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(23, 53, 43, 0.96), rgba(39, 68, 56, 0.88)),
    var(--vert-profond);
  box-shadow: 0 18px 40px rgba(23, 53, 43, 0.2);
  contain: paint;
  isolation: isolate;
  touch-action: pan-y;
  will-change: transform;
}

.compare-before,
.compare-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--vert-profond);
}

.compare-after {
  clip-path: inset(0 0 0 var(--pos, 50%));
}

.compare.teaching .compare-after {
  transition: clip-path 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: var(--blanc-casse);
  box-shadow: 0 0 16px rgba(23, 53, 43, 0.55);
  pointer-events: none;
}

.compare.teaching .compare-divider {
  transition: left 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border: 3px solid var(--blanc-casse);
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 12px 28px rgba(23, 53, 43, 0.28), 0 0 0 6px rgba(251, 249, 245, 0.16);
  transform: translate(-50%, -50%);
}

.compare-handle::before,
.compare-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%);
}

.compare-handle::before {
  left: 9px;
  border-right: 8px solid var(--blanc-casse);
}

.compare-handle::after {
  right: 9px;
  border-left: 8px solid var(--blanc-casse);
}

.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.compare-tag {
  position: absolute;
  top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

.compare-tag-before {
  left: 14px;
  background: rgba(23, 53, 43, 0.82);
  color: var(--blanc-casse);
}

.compare-tag-after {
  right: 14px;
  background: var(--terracotta);
  color: var(--blanc-casse);
}

.compare-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: rgba(251, 249, 245, 0.74);
  text-align: center;
}

.placeholder-inner {
  width: min(420px, 100%);
}

.placeholder-title {
  margin: 0 0 8px;
  color: var(--blanc-casse);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}

.placeholder-inner p:not(.placeholder-title) {
  margin: 0;
  font-size: 0.92rem;
}

.compare.generating .compare-placeholder p {
  visibility: visible;
}

.compare.generating::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border: 4px solid rgba(251, 249, 245, 0.38);
  border-top-color: var(--terracotta);
  border-radius: 50%;
  animation: mj-spin 850ms linear infinite;
}

.compare-card:fullscreen {
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--vert-profond);
}

.compare-card:fullscreen .compare {
  width: min(96vw, 1400px);
  height: min(92vh, 900px);
  max-height: none;
  aspect-ratio: auto;
}

.support-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 187, 168, 0.28);
  background: rgba(148, 187, 168, 0.16);
  color: var(--vert-principal);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.support-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
}

.prompt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  transition: opacity 180ms ease;
}

.prompt-grid.switching {
  opacity: 0;
}

.prompt-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 11px;
  width: 100%;
  min-height: 106px;
  padding: 13px 38px 13px 13px;
  border: 1px solid rgba(31, 49, 41, 0.11);
  border-radius: 15px;
  background: var(--surface-solid);
  color: var(--texte);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(23, 53, 43, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.prompt-card:hover {
  border-color: rgba(73, 114, 102, 0.55);
  box-shadow: 0 12px 24px rgba(23, 53, 43, 0.09);
  transform: translateY(-1px);
}

.prompt-card.active {
  border-color: var(--vert-logo-fonce);
  background: rgba(232, 244, 238, 0.76);
  box-shadow: 0 0 0 3px rgba(148, 187, 168, 0.18), 0 10px 22px rgba(23, 53, 43, 0.08);
}

.prompt-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--beige-pierre);
  border-radius: 50%;
  background: var(--blanc-casse);
}

.prompt-card.active .prompt-check {
  border-color: var(--vert-logo-fonce);
  background: var(--vert-logo-fonce);
}

.prompt-card.active .prompt-check::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--blanc-casse);
}

.prompt-badge {
  grid-row: 1 / span 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 54px;
  border: 2px solid rgba(251, 249, 245, 0.92);
  border-radius: 999px;
  color: var(--vert-profond);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(23, 53, 43, 0.08), 0 6px 14px rgba(23, 53, 43, 0.12);
}

.prompt-card[data-p="A"] .prompt-badge {
  background: #E8E7D6;
}

.prompt-card[data-p="B"] .prompt-badge {
  background: #F7F3E8;
}

.prompt-card[data-p="C"] .prompt-badge {
  background: #C9BAA4;
}

.prompt-card[data-p="D"] .prompt-badge {
  background: #B76549;
  color: var(--blanc-casse);
}

.prompt-name,
.prompt-ref,
.prompt-desc {
  display: block;
}

.prompt-name {
  padding-right: 6px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.18;
  color: var(--vert-principal);
}

.prompt-ref {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--texte-faint);
}

.prompt-swatches {
  display: flex;
  gap: 5px;
  align-items: center;
  min-height: 18px;
}

.prompt-swatch {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(251, 249, 245, 0.92);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(23, 53, 43, 0.14);
}

.prompt-desc {
  font-size: 0.76rem;
  line-height: 1.42;
  color: var(--texte-doux);
  padding-right: 16px;
}

.prompt-help {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(73, 114, 102, 0.28);
  border-radius: 50%;
  background: rgba(251, 249, 245, 0.82);
  color: var(--vert-principal);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.prompt-help:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
}

.palette-help {
  position: relative;
  margin-top: 12px;
  border: 1px solid rgba(73, 114, 102, 0.18);
  border-radius: 15px;
  background: var(--surface-muted);
  padding: 13px 42px 13px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.palette-help-title {
  margin: 0 0 4px;
  color: var(--vert-principal);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 900;
}

.palette-help-copy {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.78rem;
  line-height: 1.45;
}

.palette-help-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(73, 114, 102, 0.24);
  border-radius: 50%;
  background: var(--blanc-casse);
  color: var(--vert-principal);
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: 13px 20px;
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 120ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.btn-cta {
  background: var(--terracotta);
  color: var(--blanc-casse);
  box-shadow: 0 10px 20px rgba(201, 107, 59, 0.18);
}

.simulator-page a.btn-cta,
.simulator-page button.btn-cta {
  color: var(--blanc-casse);
}

.btn-cta:hover:not(:disabled) {
  background: var(--terracotta-hover);
  color: var(--blanc-casse);
  box-shadow: 0 12px 26px rgba(201, 107, 59, 0.24);
}

.btn-secondary {
  border: 1px solid rgba(39, 68, 56, 0.38);
  background: var(--surface-solid);
  color: var(--vert-principal);
  box-shadow: 0 1px 2px rgba(23, 53, 43, 0.05);
}

.simulator-page a.btn-secondary,
.simulator-page button.btn-secondary {
  color: var(--vert-principal);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--vert-principal);
  color: var(--blanc-casse);
}

.simulator-page a.btn-secondary:hover,
.simulator-page button.btn-secondary:hover {
  color: var(--blanc-casse);
}

.btn-run {
  width: 100%;
  margin-top: 14px;
}

/* Bouton de lancement detache de la carte "Votre ambiance" : bandeau plein
   largeur de grille, sous les 3 colonnes, pour rester le geste final et
   incontournable une fois photo + ambiance choisies (2026-07-05). */
.run-cta-bar {
  grid-column: 1 / -1;
  order: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.run-cta-btn {
  width: min(100%, 440px);
  margin-top: 0;
  padding: 18px 28px;
  font-size: 1.05rem;
  box-shadow: 0 6px 18px rgba(201, 107, 59, 0.22);
}

.run-cta-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
}

.run-cta-btn:disabled {
  animation: none;
  box-shadow: none;
}

.run-cta-hint {
  font-size: 0.78rem;
  color: var(--texte-doux);
  text-align: center;
  max-width: 40ch;
}

@keyframes run-cta-pulse {
  0%, 100% {
    box-shadow: 0 16px 36px rgba(201, 107, 59, 0.32), 0 4px 12px rgba(23, 53, 43, 0.14);
  }
  50% {
    box-shadow: 0 20px 48px rgba(201, 107, 59, 0.5), 0 6px 18px rgba(23, 53, 43, 0.18);
  }
}

.spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(251, 249, 245, 0.38);
  border-top-color: var(--blanc-casse);
  border-radius: 50%;
  animation: mj-spin 850ms linear infinite;
}

.btn-run.loading .spinner {
  display: inline-block;
}

@keyframes mj-spin {
  to {
    transform: rotate(360deg);
  }
}

.project-step {
  margin-top: 18px;
}

.project-card {
  display: grid;
  gap: 18px;
  padding: 22px;
  border-color: rgba(201, 107, 59, 0.22);
  box-shadow: var(--shadow-soft);
}

.form-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.field {
  display: grid;
  gap: 7px;
}

.field .optional {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.field input,
.field textarea {
  padding: 10px 14px;
}

.field input.invalid,
.field textarea.invalid {
  border-color: var(--danger);
  background: var(--danger-fond);
}

.consent-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(31, 49, 41, 0.1);
  border-radius: 16px;
  background: var(--surface-muted);
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.consent-box input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--vert-logo-fonce);
  cursor: pointer;
  flex: 0 0 auto;
}

.consent-box label {
  font-size: 0.78rem;
  color: var(--texte-doux);
  cursor: pointer;
}

.consent-box.invalid {
  border-color: var(--danger);
  background: var(--danger-fond);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.form-actions .btn {
  flex: 1 1 240px;
}

.form-hint {
  margin-top: 0;
}

.color-guide {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding: 24px;
}

.color-guide h2 {
  margin-top: 6px;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.12;
}

.guide-copy {
  display: grid;
  gap: 10px;
  color: var(--texte-doux);
  font-size: 0.92rem;
  line-height: 1.68;
}

.guide-copy p {
  margin: 0;
}

.return-home-bar {
  background: linear-gradient(180deg, rgba(251, 249, 245, 0.86), rgba(245, 242, 234, 0.98));
  border-top: 1px solid rgba(217, 208, 197, 0.62);
  padding: 18px 16px;
  text-align: center;
}

.return-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid rgba(39, 68, 56, 0.5);
  border-radius: 999px;
  background: var(--surface-solid);
  color: var(--vert-principal);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  padding: 12px 22px;
  box-shadow: 0 8px 18px rgba(23, 53, 43, 0.08);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.return-home-link:hover,
.return-home-link:focus-visible {
  border-color: var(--terracotta);
  background: var(--terracotta);
  color: var(--blanc-casse);
  box-shadow: 0 12px 24px rgba(201, 107, 59, 0.2);
}

.site-footer-v3 {
  position: relative;
  z-index: 60;
  background-color: var(--terracotta-profond);
  background-image:
    linear-gradient(180deg, rgba(125, 53, 32, 0.74) 0%, rgba(102, 41, 22, 0.82) 100%),
    url("../img/simulateur-bordeaux-ia.webp");
  background-size: cover, cover;
  background-position: center, center top;
  background-repeat: no-repeat, no-repeat;
  color: rgba(251, 249, 245, 0.82);
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

.fv3-body {
  display: grid;
  grid-template-columns: 280px 1px minmax(0, 1fr) 1px 300px;
  align-items: center;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  gap: 0 2.6rem;
  padding: 3.2rem 0 2.6rem;
}

.fv3-sep {
  min-height: 130px;
  align-self: stretch;
  background: rgba(251, 249, 245, 0.14);
}

.fv3-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fv3-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.72);
}

.fv3-mini-title {
  margin: 8px 0 0;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400;
  line-height: 0.92;
  color: var(--blanc-casse);
}

.fv3-mini-title span {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.46em;
  text-indent: 0.46em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.62);
}

.fv3-mini-title em {
  display: block;
  margin-top: 4px;
  font-style: italic;
  color: var(--blanc-casse);
}

.fv3-divider {
  width: 38px;
  height: 1px;
  margin: 0.95rem 0;
  background: rgba(251, 249, 245, 0.35);
}

.fv3-tagline {
  color: rgba(251, 249, 245, 0.75);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fv3-center {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: center;
}

.fv3-social-label {
  margin: 0;
  color: rgba(251, 249, 245, 0.75);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.fv3-socials {
  display: flex;
  justify-content: center;
  gap: 1.9rem;
}

.fv3-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(251, 249, 245, 0.78);
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  transition: color 180ms ease;
}

.simulator-page .fv3-social-link {
  color: rgba(251, 249, 245, 0.78);
}

.fv3-social-link svg {
  opacity: 0.85;
}

.fv3-social-link:hover,
.fv3-social-link:focus-visible {
  color: var(--blanc-casse);
}

.simulator-page .fv3-social-link:hover,
.simulator-page .fv3-social-link:focus-visible {
  color: var(--blanc-casse);
}

.fv3-social-link:hover svg {
  opacity: 1;
}

.fv3-info {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.9;
}

.fv3-info strong,
.fv3-info a {
  color: var(--blanc-casse);
  font-weight: 700;
}

.fv3-info a {
  text-decoration: none;
}

.fv3-trust {
  margin: 0;
  color: rgba(251, 249, 245, 0.75);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.fv3-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.fv3-nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid rgba(251, 249, 245, 0.14);
  border-radius: 999px;
  color: rgba(251, 249, 245, 0.78);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.5rem 1rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  white-space: nowrap;
}

.simulator-page .fv3-nav-link {
  color: rgba(251, 249, 245, 0.78);
}

.fv3-nav-link:hover,
.fv3-nav-link:focus-visible {
  border-color: rgba(251, 249, 245, 0.38);
  background: rgba(251, 249, 245, 0.1);
  color: var(--blanc-casse);
}

.simulator-page .fv3-nav-link:hover,
.simulator-page .fv3-nav-link:focus-visible {
  color: var(--blanc-casse);
}

.fv3-nav-link--cta {
  border-color: var(--blanc-casse);
  background: var(--blanc-casse);
  color: var(--terracotta-profond);
}

.simulator-page .fv3-nav-link--cta {
  color: var(--terracotta-profond);
}

.fv3-nav-link--cta:hover,
.fv3-nav-link--cta:focus-visible {
  background: var(--ivoire-doux);
  color: var(--terracotta-hover);
}

.simulator-page .fv3-nav-link--cta:hover,
.simulator-page .fv3-nav-link--cta:focus-visible {
  color: var(--terracotta-hover);
}

.fv3-nav-link--full {
  grid-column: 1 / -1;
}

.fv3-bottom {
  border-top: 1px solid rgba(251, 249, 245, 0.14);
  color: rgba(251, 249, 245, 0.75);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  padding: 0.9rem 2rem;
  text-align: center;
}

@media (max-width: 1080px) {
  .fv3-body {
    grid-template-columns: 1fr;
    gap: 1.9rem 0;
    padding: 2.4rem 0 2rem;
    text-align: center;
  }

  .fv3-sep {
    display: none;
  }

  .fv3-brand {
    align-items: center;
  }

  .fv3-divider {
    margin: 0.95rem auto;
  }

  .fv3-nav {
    width: min(400px, 100%);
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .return-home-link {
    width: 100%;
    max-width: 330px;
  }

  .fv3-mini-title span {
    letter-spacing: 0.34em;
    text-indent: 0.34em;
  }

  .fv3-socials {
    flex-wrap: wrap;
    gap: 1.1rem;
  }

  .fv3-nav {
    grid-template-columns: 1fr 1fr;
    max-width: 320px;
  }
}

#mini-jo-container {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 260ms ease;
}

#mini-jo-container.active {
  opacity: 1;
  transform: translateY(0);
}

#mini-jo-img {
  width: 78px;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(23, 53, 43, 0.28));
  transition: transform 260ms ease;
}

.jo-bubble {
  max-width: 220px;
  border: 1px solid var(--beige-pierre);
  border-radius: 14px 14px 3px 14px;
  background: rgba(251, 249, 245, 0.86);
  backdrop-filter: blur(8px);
  color: var(--texte);
  box-shadow: var(--shadow-tight);
  padding: 8px 13px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.jo-bubble.active {
  opacity: 1;
  transform: translateY(0);
}

#toast-container {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 100;
  display: flex;
  width: min(480px, calc(100vw - 28px));
  flex-direction: column;
  gap: 8px;
  transform: translateX(-50%);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-sm);
  background: var(--vert-profond);
  color: var(--blanc-casse);
  box-shadow: var(--shadow-soft);
  padding: 12px 14px;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  background: var(--danger);
}

.toast.success {
  background: var(--ok);
}

.toast span {
  flex: 1;
}

.toast-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.72;
}

.toast-close:hover {
  opacity: 1;
}

@media (min-width: 640px) {
  .form-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .color-guide {
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
    align-items: start;
  }
}

@media (min-width: 1100px) {
  .site-header__inner {
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    padding: 34px 0 38px;
  }

  .brand {
    justify-content: flex-start;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-actions {
    justify-content: flex-end;
  }

  .atelier-grid {
    grid-template-columns: minmax(230px, 0.78fr) minmax(440px, 1.72fr) minmax(270px, 0.94fr);
    gap: 18px;
  }

  .photo-panel,
  .palette-panel {
    position: static;
  }

  .photo-panel {
    order: 1;
  }

  .atelier-stage {
    order: 2;
    padding: 16px;
  }

  .palette-panel {
    order: 3;
  }

  .compare {
    min-height: 520px;
  }

  .project-card {
    grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1.4fr);
    align-items: start;
  }

  .project-intro {
    position: sticky;
    top: 18px;
  }

  .form-fields,
  .consent-box,
  .form-actions,
  .form-hint {
    grid-column: 2;
  }
}

@media (min-width: 1220px) {
  .main {
    width: min(1500px, calc(100% - 42px));
  }

  .site-header__inner {
    width: min(1500px, calc(100% - 42px));
  }

  .atelier-grid {
    grid-template-columns: minmax(250px, 0.82fr) minmax(560px, 1.8fr) minmax(300px, 0.98fr);
  }

  .compare {
    min-height: 590px;
  }
}

@media (max-width: 520px) {
  .site-header__inner {
    width: min(100% - 24px, 460px);
    padding-top: 24px;
  }

  .brand {
    gap: 10px;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }

  .brand-rule {
    width: 22px;
  }

  .hero-copy h1 span {
    letter-spacing: 0.34em;
    text-indent: 0.34em;
  }

  .hero-actions .btn {
    flex: 1 1 100%;
  }

  .main {
    width: min(100% - 20px, 460px);
  }

  .atelier-panel,
  .project-card,
  .color-guide {
    border-radius: 16px;
  }

  .atelier-panel {
    padding: 16px;
  }

  .stage-head {
    display: block;
    padding: 8px 6px 14px;
  }

  .stage-note {
    max-width: none;
    margin-top: 8px;
    text-align: left;
  }

  .stage-actions {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .stage-actions .tool-btn {
    flex: 1 1 auto;
  }

  .compare {
    min-height: 330px;
    border-width: 6px;
    border-radius: 18px;
  }

  .prompt-card {
    min-height: 112px;
  }

  #mini-jo-img {
    width: 50px;
  }

  .jo-bubble {
    max-width: 148px;
    padding: 7px 9px;
    font-size: 0.68rem;
    line-height: 1.35;
    box-shadow: 0 8px 16px rgba(23, 53, 43, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .simulator-page *,
  .simulator-page *::before,
  .simulator-page *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══ Bandeau nuancier Naé, sélection Jonathan (2026-07-05, v2) ═════════
   Corrige l'anomalie de la v1 : la carte E imbriquée dans .prompt-grid
   produisait une colonne étroite et un rendu cassé sur tous les écrans.
   Le bandeau est ici une section indépendante en pleine largeur d'écran
   (bleed complet, technique du "breakout" par marges négatives en vw),
   avec un contenu recentré à la largeur du reste de la page. */

.tone-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 22px;
  margin-bottom: 4px;
  padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 56px) clamp(28px, 4.5vw, 44px);
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.55) 0%, rgba(237, 229, 217, 0.85) 100%);
  border-top: 1px solid rgba(217, 208, 197, 0.65);
  border-bottom: 1px solid rgba(217, 208, 197, 0.65);
}

.tone-banner-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.tone-banner-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: clamp(18px, 3vw, 26px);
}

.tone-banner-swatch {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid rgba(251, 249, 245, 0.92);
  box-shadow: 0 6px 14px rgba(23, 53, 43, 0.14);
  background: conic-gradient(
    #F2F1EB 0 60deg, #D9C6A5 0 120deg, #9DAE94 0 180deg,
    #33475A 0 240deg, #B4623D 0 300deg, #3E3E3C 0 360deg);
}

.tone-banner-eyebrow {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vert-logo-fonce);
}

.tone-banner-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  color: var(--vert-profond);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 850;
}

.tone-banner-lead {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--texte-doux);
  max-width: 62ch;
}

/* Grille purement pilotée par la largeur disponible : de 1 colonne sur
   mobile portrait étroit jusqu'à 6 colonnes sur grand écran, sans
   breakpoint dédié (auto-fit s'adapte à desktop, tablette et smartphone,
   portrait comme paysage). */
.tone-banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
}

.tone-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: var(--surface-solid);
  font-family: var(--font-display);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.tone-option:hover {
  transform: translateY(-1px);
  border-color: var(--vert-logo-fonce);
  box-shadow: var(--shadow-tight);
}
.tone-option.active {
  border-color: var(--vert-logo-fonce);
  background: #EDF3EF;
  box-shadow: inset 0 0 0 1px var(--vert-logo-fonce);
}

.tone-chip {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(23, 53, 43, 0.12);
  flex-shrink: 0;
}
.tone-body { display: flex; flex-direction: column; min-width: 0; }
.tone-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--vert-principal);
  line-height: 1.2;
  white-space: nowrap;
}
.tone-ref {
  font-size: 0.68rem;
  color: var(--texte-doux);
  line-height: 1.15;
}

@media (max-width: 480px) {
  .tone-banner-head { gap: 12px; }
  .tone-banner-swatch { width: 34px; height: 34px; }
}

/* ==========================================================================
   Simulateur v5 — intégration des 3 points de construction (2026-07)
   1) Nuancier « Sélection Jonathan » remonté entre l'étape 02 et 03
   2) Comparateur : retour à une double fenêtre avant / après
   3) Filigrane de marque incrusté dans le rendu (logique dans le JS)
   ========================================================================== */

/* ── Point 1 : le nuancier devient une rangée pleine largeur de la grille ── */
.atelier-grid > .tone-step {
  width: auto;
  margin: 0;                              /* annule le breakout 100vw d'origine */
  grid-column: 1 / -1;
  border: 1px solid rgba(217, 208, 197, 0.72);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 28px);
}
.atelier-grid > .tone-step .tone-banner-inner { max-width: none; }

/* Ordre du parcours (mobile-first, colonne unique) :
   Photo → Ambiance → Teinte → Lancer → Résultat */
.atelier-grid { align-items: start; }
.photo-panel   { order: 1; }
.palette-panel { order: 2; }
.tone-step     { order: 3; }
.run-cta-bar   { order: 4; }
.atelier-stage { order: 5; }

@media (min-width: 1100px) {
  /* Deux colonnes d'entrées (photo | ambiance), puis bandeaux pleine largeur */
  .atelier-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Un panneau plus haut que la fenetre doit rester dans le flux pour ne pas
     recouvrir le CTA ni les etapes pleine largeur pendant le defilement. */
  .photo-panel   { order: 1; position: static; top: auto; }
  .palette-panel { order: 2; position: static; top: auto; }
  .tone-step     { order: 3; grid-column: 1 / -1; position: static; }
  .run-cta-bar   { order: 4; grid-column: 1 / -1; }
  .atelier-stage { order: 5; grid-column: 1 / -1; }
}
@media (min-width: 1220px) {
  .atelier-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── Point 2 : double fenêtre avant / après ── */
.compare-duo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.cmp-pane {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.cmp-cap {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.82);
}
.cmp-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.cmp-dot-before { background: rgba(251, 249, 245, 0.5); }
.cmp-dot-after  { background: var(--terracotta); }
.cmp-pane--after .cmp-cap { color: #E2A57F; }

.cmp-frame {
  position: relative;
  height: clamp(360px, 70vh, 760px);
  border: 1px solid rgba(251, 249, 245, 0.16);
  border-radius: 14px;
  overflow: hidden;
  background: var(--vert-profond);
}
.cmp-pane--after .cmp-frame { border-color: rgba(201, 107, 59, 0.5); }
.cmp-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--vert-profond);
}
.cmp-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(251, 249, 245, 0.42);
  text-align: center;
  padding: 12px;
}

/* Placeholder plein cadre avant le premier rendu (masque les libellés vides) */
.compare-duo .compare-placeholder {
  border-radius: 16px;
  z-index: 3;
  background: var(--vert-profond);
}

/* État « génération en cours » sur le conteneur duo */
.compare-duo.generating { min-height: 200px; }
.compare-duo.generating .compare-placeholder p { visibility: visible; }
.compare-duo.generating::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border: 4px solid rgba(251, 249, 245, 0.38);
  border-top-color: var(--terracotta);
  border-radius: 50%;
  animation: mj-spin 850ms linear infinite;
  z-index: 4;
}

/* Plein écran : vertical sur mobile pour préserver la lisibilité des photos. */
.btn-close-fullscreen {
  display: none;
}

.compare-card:fullscreen {
  display: grid;
  place-items: center;
  padding: 68px 16px 16px;
  background: var(--vert-profond);
}

.compare-card:fullscreen .btn-close-fullscreen {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(251, 249, 245, 0.78);
  border-radius: 999px;
  background: var(--blanc-casse);
  color: var(--vert-profond);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.compare-card:fullscreen .compare-duo {
  width: min(100%, 1600px);
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.compare-card:fullscreen .cmp-frame {
  height: min(36vh, 430px);
  min-height: 180px;
  max-height: none;
  aspect-ratio: auto;
}

@media (min-width: 700px) {
  .compare-card:fullscreen { padding: 24px; }

  .compare-card:fullscreen .compare-duo {
    width: min(96vw, 1600px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compare-card:fullscreen .cmp-frame {
    height: auto;
    min-height: 0;
    max-height: 82vh;
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   Phase 3 — élévation haute couture (2026-07)
   Rayons resserrés (rectangles nets, cercles conservés) · panneaux à filets ·
   respiration élargie. Bloc final : prime dans la cascade.
   ========================================================================== */
:root {
  --radius: 8px;
  --radius-sm: 5px;
  --shadow-card: 0 1px 2px rgba(20, 27, 23, 0.04);
}

/* — Rayons resserrés — */
.btn, .run-cta-btn, .tool-btn, .support-pill,
.support-select, .field input, .field textarea, .prompt-card, .prompt-badge,
.drop-zone, .upload-preview, .palette-help, .cmp-frame,
.tone-option, .tone-chip, .compare-duo .compare-placeholder,
.toast {
  border-radius: var(--radius-sm);
}
.atelier-panel, .project-card, .color-guide, .tone-step { border-radius: var(--radius); }
.atelier-stage { border-radius: 10px; }

/* Cercles intentionnels conservés (sinon écrasés par la règle groupée) */
.step-num, .prompt-check, .prompt-swatch, .prompt-help, .palette-help-close,
.cmp-dot, .cmp-dot-before, .cmp-dot-after, .tone-banner-swatch,
#mini-jo-img, .spinner { border-radius: 50%; }

/* — Panneaux quasi plats : le filet remplace l'ombre — */
.atelier-panel, .tone-step, .color-guide, .project-card {
  box-shadow: none;
  border-color: rgba(20, 27, 23, 0.14);
}

/* — Respiration élargie — */
.atelier-grid { gap: 22px; }
.atelier-panel { padding: 26px; }
.tone-step { padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 32px); }
.main { padding-bottom: 104px; }
.color-guide { padding: clamp(24px, 3.2vw, 40px); }

@media (min-width: 1100px) {
  .atelier-grid { gap: 28px; }
  .atelier-panel { padding: 30px; }
}

/* ==========================================================================
   Finitions (2026-07) : barre « Lancer » collante en mobile + mascotte
   ========================================================================== */
@media (max-width: 1099px) {
  /* Hauteur de la barre CTA fixe partagee avec la reserve de bas de page et
     la position de la mascotte, pour ne jamais desynchroniser les 3 valeurs
     (correctif 2026-07-16 : marge insuffisante detectee sur iPhone a encoche,
     revue Codex). Base 96px = bouton ~46px + paddings verticaux 12+12+26px
     de marge de securite, plus la zone sure iOS le cas echeant. */
  :root { --run-cta-bar-height: calc(96px + env(safe-area-inset-bottom, 0px)); }
  body.run-ready { padding-bottom: var(--run-cta-bar-height); }
  body.run-ready .run-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    margin: 0;
    min-height: var(--run-cta-bar-height);
    box-sizing: border-box;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(251, 248, 241, 0.97);
    border-top: 1px solid var(--line-soft);
    box-shadow: 0 -8px 24px rgba(20, 27, 23, 0.12);
    backdrop-filter: blur(8px);
  }
  body.run-ready .run-cta-hint { display: none; }
  body.run-ready .run-cta-btn { width: 100%; max-width: none; }
  /* mascotte relevée au-dessus de la barre pour éviter le chevauchement */
  body.run-ready #mini-jo-container { bottom: calc(var(--run-cta-bar-height) + 4px); }
}

/* ==========================================================================
   Option E — « Sélection Jonathan » intégrée à la suite des cartes A–D
   ========================================================================== */
.ambiance-e {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(31, 49, 41, 0.11);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  box-shadow: 0 1px 2px rgba(23, 53, 43, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.ambiance-e.active {
  border-color: var(--vert-logo-fonce);
  background: rgba(232, 244, 238, 0.76);
  box-shadow: 0 0 0 3px rgba(148, 187, 168, 0.18), 0 10px 22px rgba(23, 53, 43, 0.08);
}
.ambiance-e-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ambiance-e-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 54px;
  flex: 0 0 auto;
  border: 2px solid rgba(251, 249, 245, 0.92);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #4C6B5B, #274438);
  color: var(--blanc-casse);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(23, 53, 43, 0.08), 0 6px 14px rgba(23, 53, 43, 0.12);
}
.ambiance-e-copy { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ambiance-e .prompt-name { font-size: 0.98rem; font-weight: 850; color: var(--vert-principal); line-height: 1.18; }
.ambiance-e .prompt-ref { font-size: 0.68rem; font-weight: 700; color: var(--texte-faint); }
.ambiance-e .tone-banner-swatch {
  width: 32px; height: 32px; margin: 0; flex: 0 0 auto;
}
.ambiance-e-desc {
  margin: 10px 0 12px;
  font-size: 0.76rem;
  line-height: 1.42;
  color: var(--texte-doux);
}
.ambiance-e .tone-banner-grid {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

/* ==========================================================================
   Section 01 — Hero éditorial (fond vert, structure graphique, serif)
   Reprend le langage des couvertures présentées : filet + brand, eyebrow
   terracotta, grand titre DM Serif Display, rangée de repères à filets.
   ========================================================================== */
.hero-editorial {
  background-color: #132A22;
  background-image:
    linear-gradient(168deg, rgba(23, 53, 43, 0.78) 0%, rgba(19, 42, 34, 0.82) 58%, rgba(15, 36, 30, 0.86) 100%),
    url("../img/simulateur-bordeaux-ia.webp");
  background-size: cover, cover;
  background-position: center, right center;
  background-repeat: no-repeat, no-repeat;
  border-bottom: 1px solid rgba(242, 237, 226, 0.12);
  box-shadow: none;
  backdrop-filter: none;
}
.hero-ed-inner {
  width: min(1440px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) 0 clamp(38px, 5vw, 64px);
}
.hero-ed-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(44px, 8vw, 84px);
}
.hero-ed-rule {
  width: clamp(34px, 8vw, 62px);
  height: 1px;
  background: rgba(242, 237, 226, 0.4);
}
.hero-ed-brand {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, 0.75);
}
.hero-ed-eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #C98B63;
}
.hero-ed-title {
  margin: 0;
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  line-height: 0.92;
  color: #F6F1E7;
}
.hero-ed-kicker {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 1.3vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, 0.6);
}
.hero-ed-title em {
  display: block;
  font-style: normal;
  font-size: clamp(3.4rem, 11vw, 7.4rem);
  color: #C98B63;
}
.hero-ed-lead {
  max-width: 560px;
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 400;
  line-height: 1.66;
  color: rgba(242, 237, 226, 0.82);
}
.hero-ed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.btn-hero-ghost {
  border: 1px solid rgba(242, 237, 226, 0.4);
  background: transparent;
  color: #F6F1E7;
}
.simulator-page a.btn-hero-ghost { color: #F6F1E7; }
.btn-hero-ghost:hover {
  background: #F6F1E7;
  color: #132A22;
  border-color: #F6F1E7;
}
.simulator-page a.btn-hero-ghost:hover { color: #132A22; }
.hero-ed-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(46px, 6vw, 76px);
  border-top: 1px solid rgba(242, 237, 226, 0.16);
}
.hero-ed-facts > div { padding: 24px 24px 0 0; }
.hero-ed-facts > div + div {
  border-left: 1px solid rgba(242, 237, 226, 0.16);
  padding-left: 24px;
}
.f-k {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, 0.5);
}
.f-v {
  margin: 0;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(1rem, 1.6vw, 1.32rem);
  line-height: 1.2;
  color: #F6F1E7;
}
@media (max-width: 640px) {
  .hero-ed-facts { grid-template-columns: 1fr; }
  .hero-ed-facts > div { padding: 18px 0 0; }
  .hero-ed-facts > div + div {
    border-left: 0;
    border-top: 1px solid rgba(242, 237, 226, 0.14);
    padding-left: 0;
  }
}

/* ==========================================================================
   Écran Résultat — alignement sur la « Maquette Résultat Mini-Jo » (2026-07)
   La scène passe du vert profond à l'éditorial clair de la maquette :
   surface ivoire, filets 1 px, titres DM Serif Display, eyebrow terracotta,
   double fenêtre avant/après sur fond sable, boutons ghost + plein sombre.
   Bloc final : prime dans la cascade.
   ========================================================================== */

/* — Titres éditoriaux : serif sur toute la page (cohérence hero) — */
.step-title,
.color-guide h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* — La scène devient un panneau clair à filet — */
.atelier-stage {
  background: #FBF8F1;
  border: 1px solid rgba(19, 42, 34, 0.14);
  box-shadow: none;
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px);
}
@media (min-width: 1100px) {
  .atelier-stage { padding: clamp(26px, 3vw, 34px); }
}

.stage-head {
  align-items: flex-end;
  padding: 4px 2px 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(19, 42, 34, 0.12);
}
.stage-kicker { color: var(--terracotta); }
.stage-title {
  margin-top: 6px;
  color: var(--vert-profond);
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
}

/* — Boutons de la scène : ghost sombre + principal plein sombre → terracotta — */
.stage-actions .tool-btn-light {
  border: 1px solid rgba(19, 42, 34, 0.28);
  background: transparent;
  color: var(--vert-profond);
  box-shadow: none;
}
.stage-actions .tool-btn-light:hover:not(:disabled) {
  border-color: var(--vert-profond);
  background: var(--vert-profond);
  color: #FBF8F1;
}
.stage-actions #btn-download-image {
  border-color: var(--vert-profond);
  background: var(--vert-profond);
  color: #FBF8F1;
}
.stage-actions #btn-download-image:hover:not(:disabled) {
  border-color: var(--terracotta);
  background: var(--terracotta);
  color: #FBF8F1;
}

/* — Double fenêtre : légendes sombres, cadres sable à filet — */
.cmp-cap { color: #4A5A50; }
.cmp-pane--after .cmp-cap { color: #A6511F; }
.cmp-dot-before { background: #8A968E; }

.cmp-frame {
  border: 1px solid rgba(19, 42, 34, 0.16);
  border-radius: var(--radius-sm);
  background: #EDE6D8;
}
.cmp-pane--after .cmp-frame { border-color: rgba(201, 107, 59, 0.4); }
.cmp-frame img { background: #EDE6D8; }
.cmp-empty { color: #9AA69E; }

/* — Placeholder plein cadre : sable + texte sombre — */
.compare-duo .compare-placeholder {
  background: #EDE6D8;
  border-radius: var(--radius-sm);
  color: #6A7A70;
}
.compare-duo .placeholder-title { color: var(--vert-profond); }
.compare-duo .placeholder-inner p:not(.placeholder-title) { color: #6A7A70; }

/* — Spinner de génération lisible sur fond clair — */
.compare-duo.generating::after {
  border-color: rgba(19, 42, 34, 0.18);
  border-top-color: var(--terracotta);
}

/* — Plein écran : fond sombre conservé pour la lecture des images — */
.compare-card:fullscreen { background: #132A22; }


/* ══════════════════════════════════════════════════════════════════════════
   Correctif 2026-07-15 : en double fenetre avant/apres, l'image du rendu
   heritait du clip-path du comparateur a curseur (inset gauche 50%) :
   la moitie gauche du rendu etait masquee chez tous les visiteurs.
   Place en fin de fichier pour primer dans la cascade.
   ══════════════════════════════════════════════════════════════════════════ */
.compare-after {
  clip-path: none;
}

/* P5 et P6 : attente lisible, formulaire projet et passage vers le contact. */
.compare.generating .placeholder-inner,
.compare-duo.generating .placeholder-inner {
  transform: translateY(48px);
}

.field textarea {
  min-height: 132px;
  line-height: 1.5;
  resize: vertical;
}

.field-wide {
  grid-column: 1 / -1;
}

.field-help {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.76rem;
  line-height: 1.45;
}

.simulation-notice {
  margin: 18px 2px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--terracotta);
  background: rgba(201, 107, 59, 0.08);
  color: #4A5A50;
  font-size: 0.84rem;
  line-height: 1.55;
}

.simulation-notice strong {
  color: var(--vert-profond);
}

.result-conversion {
  display: grid;
  gap: 18px;
  margin-top: 22px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(19, 42, 34, 0.14);
  background: #F3EBDD;
}

.result-conversion-kicker {
  margin: 0 0 6px;
  color: var(--terracotta-hover);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.result-conversion h3 {
  margin: 0;
  color: var(--vert-profond);
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.12;
}

.result-conversion p:last-child {
  margin: 8px 0 0;
  color: #4A5A50;
  line-height: 1.55;
}

.result-conversion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.result-conversion-actions .btn {
  min-height: 46px;
}

@media (min-width: 860px) {
  .result-conversion {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .result-conversion-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 520px) {
  .cmp-frame {
    height: min(68vh, 540px);
    min-height: 360px;
  }

  .result-conversion-actions .btn {
    width: 100%;
  }
}

/* Correctif de flux final, photo chargee ou non. Les deux panneaux d'entree
   restent dans la premiere ligne de grille. Les etapes suivantes occupent
   ensuite toute la largeur, sans superposition pendant le defilement. */
@media (min-width: 1100px) {
  .atelier-grid > .photo-panel,
  .atelier-grid > .palette-panel {
    position: static;
    top: auto;
    align-self: start;
    grid-row: auto;
  }

  .atelier-grid > .tone-step,
  .atelier-grid > .run-cta-bar,
  .atelier-grid > .atelier-stage {
    grid-column: 1 / -1;
    position: static;
  }
}