/* ═══════════════════════════════════════════
   PROJET MATISSE — Design system tokens
   ═══════════════════════════════════════════ */
:root {
  /* Interface colours (from Figma design system) */
  --white:       #FFFFFF;
  --grey-50:     #E8E6E6;
  --grey-100:    #D1CDCD;
  --grey-200:    #BAB5B4;
  --grey-300:    #A39C9B;
  --grey-500:    #756B69;
  --grey-800:    #3A3534;
  --grey-900:    #272323;
  --brand-500:   #0043A2;
  --brand-700:   #00337A;
  --brand-800:   #0B3166;
  --delete-accent: #FF614D;

  /* Shape palette (12 colours) */
  --fog-grey:       #DDD8D4;
  --carbon-black:   #1F1F1F;
  --clay:           #946128;
  --lagoon-teal:    #009E95;
  --royal-blue:     #0043A2;
  --sky-azure:      #009DC7;
  --pine-green:     #00673E;
  --sage-mist:      #91AE94;
  --sunset-orange:  #FF4400;
  --honey-gold:     #F2AD0C;
  --blush-pink:     #EE93AC;
  --berry-plum:     #A72E67;

  /* Spacing scale (base 4px) */
  --sp-100:  4px;
  --sp-200:  8px;
  --sp-300:  12px;
  --sp-400:  16px;
  --sp-500:  20px;
  --sp-600:  24px;
  --sp-800:  32px;
  --sp-1000: 40px;
  --sp-1200: 48px;
  --sp-2000: 80px;
  --sp-3000: 120px;

  /* Border radii */
  --radius-pill: 100px;
  --radius-lg:   16px;
  --radius-xl:   24px;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: neulis-neue, sans-serif;
  background: var(--white);
  color: var(--grey-800);
}

/* ═══════════════════════════════════════════
   PAGE HOME
   ═══════════════════════════════════════════ */
#page-home {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--white);
}

/* Central content block — centré */
.home-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-1000);
  padding: 0 var(--sp-3000);
  max-width: 1040px;
}

.home-title {
  font-family: roca, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: clamp(52px, 8vw, 104px);
  line-height: 1.15;
  color: var(--grey-800);
  max-width: 800px;
}

.home-subtitle {
  font-family: neulis-neue, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 32px;
  color: var(--grey-800);
  max-width: 700px;
}

/* ── Primary button ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-500) var(--sp-800);
  background: var(--brand-500);
  border: 2px solid var(--brand-500);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: neulis-neue, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  line-height: 32px;
  color: var(--white);
  transition: background 0.12s ease, border-color 0.12s ease;
  flex-shrink: 0;
}

.btn-primary:hover  { background: var(--brand-700); border-color: var(--brand-700); }
.btn-primary:active { background: var(--brand-800); border-color: var(--brand-800); }

/* ── Clusters décoratifs ── */
.deco-desktop,
.deco-mobile {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.deco-mobile { display: none; }

.deco-cluster { position: absolute; }
.deco-cluster svg { position: absolute; }

.deco-tl { left: -29px; top: -29px;  width: 334px; height: 377px; }
.deco-tr { right: -80px; top: -44px; width: 276px; height: 261px; }
.deco-br { right: -87px; bottom: -44px; width: 326px; height: 326px; }

.deco-m-tl { left: -10px; top: -30px; width: 210px; height: 182px; }
.deco-m-tr { right: -14px; top: -35px; width: 210px; height: 182px; }
.deco-m-br { right: -65px; bottom: -135px; width: 308px; height: 294px; }

/* ═══════════════════════════════════════════
   PAGE CRÉATION
   ═══════════════════════════════════════════ */
#page-creation {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--white);
  overflow: hidden;
}

/* ── Toile ── */
#canvas {
  position: absolute;
  inset: 0;
  /* Empêche le pincer-zoomer natif du navigateur : le geste à deux doigts
     sur une forme sélectionnée est entièrement piloté en JS. */
  touch-action: none;
}

.canvas-shape {
  position: absolute;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.canvas-shape.dragging {
  cursor: grabbing;
}

.canvas-shape svg {
  display: block;
  pointer-events: none; /* les clics passent au wrapper, pas au path */
  width: 100%;
  height: 100%;
}

/* ── Placeholder toile vide ── */
.canvas-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.canvas-placeholder.is-hiding {
  opacity: 0;
}

.canvas-placeholder-bg {
  position: absolute;
  inset: 0;
  background-image: url('/matisse/Elements/Matisse-placeholder.svg');
  background-size: 488px 549px; /* taille réelle du SVG, jamais agrandie/rétrécie */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
}

.canvas-placeholder-text {
  position: relative;
  max-width: 260px;
  font-family: neulis-neue, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--grey-900);
  text-align: center;
}

/* ── Cadre de sélection ── */
#selection-frame {
  position: absolute;
  border: 1px dashed var(--grey-900);
  pointer-events: none;
  display: none;
  z-index: 50;
}

.sel-handle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--grey-50);
  border: 1px solid var(--grey-900);
  pointer-events: all; /* les poignées restent cliquables même si le cadre ne l'est pas */
  touch-action: none;
}

.sel-tl { top: -3px;    left: -3px;  cursor: nwse-resize; }
.sel-tr { top: -3px;    right: -3px; cursor: nesw-resize; }
.sel-bl { bottom: -3px; left: -3px;  cursor: nesw-resize; }
.sel-br { bottom: -3px; right: -3px; cursor: nwse-resize; }

.sel-handle::before {
  content: '';
  position: absolute;
  inset: -10px; /* zone de clic 25×25px autour du visuel 5×5px */
}

/* ── Poignée de rotation (côté droit) ── */
.sel-rotate-connector {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 8px;
  height: 0;
  border-top: 1px dashed var(--grey-900);
  transform: translateY(-50%);
  pointer-events: none;
}

.sel-rotate {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 8px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--grey-900);
  pointer-events: all;
  touch-action: none;
}

/* ── Panneau d'édition desktop (flottant, positionné par JS) ── */
.edit-panel-desktop {
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: center;
  width: 248px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--grey-100);
  border-radius: 12px;
  overflow: hidden;
  z-index: 200;
}

.edit-panel-desktop.is-active { display: flex; }

.edit-row     { order: 1; }
.edit-divider { order: 2; }
.edit-colors  { order: 3; }

.edit-panel-desktop.placement-up .edit-row    { order: 3; }
.edit-panel-desktop.placement-up .edit-colors { order: 1; }

.edit-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 8px;
}

.edit-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 4px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: neulis-neue, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--grey-900);
  transition: background-color 0.18s ease;
}

/* Flash bref au tap/clic : confirme visuellement que l'action a été reçue,
   même quand elle n'a pas d'effet immédiat visible sur la toile. */
.edit-btn.is-tapped {
  background-color: var(--grey-100);
  transition: none;
}

.edit-btn--color { padding: 4px 12px; }

.edit-btn .icon-wrap {
  position: relative;
  display: flex;
  width: 20px;
  height: 20px;
}

.edit-btn .icon-wrap svg {
  position: relative;
  z-index: 1;
}

.edit-btn .accent-dot {
  position: absolute;
  top: 6px;
  right: 2px;
  bottom: -2px;
  left: 2px;
  border-radius: 50%;
  opacity: 0.8;
  display: none;
}

.edit-btn .accent-dot.accent-color  { background: var(--blush-pink); }
.edit-btn .accent-dot.accent-front  { background: var(--honey-gold); }
.edit-btn .accent-dot.accent-back   { background: var(--sage-mist); }
.edit-btn .accent-dot.accent-delete { background: var(--delete-accent); }

.edit-btn:hover .accent-dot,
.edit-btn.is-active .accent-dot { display: block; }

.edit-btn:hover span:last-child,
.edit-btn.is-active span:last-child { font-weight: 500; }

.edit-divider {
  width: 100%;
  height: 1px;
  background: var(--grey-100);
}

.edit-divider[hidden] { display: none; }

.edit-colors {
  width: 208px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}

.edit-colors[hidden] { display: none; }

.edit-colors-row {
  display: flex;
  gap: 8px;
}

/* ── Nuancier de couleurs (partagé desktop / mobile) ── */
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--grey-100);
  padding: 0;
  cursor: pointer;
  transition: transform 0.1s ease;
  flex-shrink: 0;
}

.color-swatch:hover  { transform: scale(1.08); }

.color-swatch.active {
  outline: 2px solid var(--grey-900);
  outline-offset: 2px;
}

#edit-colors-mobile .color-swatch {
  width: 46px;
  height: 46px;
}

/* ── Bouton téléchargement (desktop, coin haut-droit, hors panneau du bas) ── */
.btn-download-desktop {
  position: fixed;
  top: var(--sp-800);
  right: var(--sp-800);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-100);
  padding: var(--sp-300) var(--sp-500);
  background: var(--brand-500);
  border: 2px solid var(--brand-500);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: neulis-neue, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: var(--white);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.btn-download-desktop:hover  { background: var(--brand-700); border-color: var(--brand-700); }
.btn-download-desktop:active { background: var(--brand-800); border-color: var(--brand-800); }

.btn-download-desktop .icon-wrap {
  display: flex;
  width: 24px;
  height: 24px;
}

/* ── Menu principal (formes + tout effacer) ── */
#bottom-menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-bottom: 24px;
  pointer-events: none; /* la zone vide autour du panneau flottant laisse passer les clics */
}

#bottom-menu > * {
  pointer-events: auto;
}

.shape-tile {
  width: 52px;
  height: 52px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  cursor: pointer;
  transition: background 0.1s ease, transform 0.15s ease;
}

.shape-tile:hover {
  background: var(--grey-50);
}

/* Léger agrandissement au survol, desktop uniquement (pas de hover tactile) */
.shape-menu-desktop .shape-tile:hover {
  transform: scale(1.06);
}

.shape-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Desktop : panneau flottant ── */
.shape-menu-desktop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--grey-100);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.shape-grid {
  display: grid;
  grid-template-columns: repeat(6, 52px);
  grid-template-rows: repeat(2, 52px);
  gap: 8px;
}

.menu-separator {
  align-self: stretch;
  width: 1px;
  background: var(--grey-200);
  flex-shrink: 0;
}

.btn-clear-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: neulis-neue, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: var(--grey-900);
  flex-shrink: 0;
}

.btn-clear-all .icon-wrap {
  position: relative;
  display: flex;
  width: 24px;
  height: 24px;
}

.btn-clear-all .icon-wrap svg {
  position: relative;
  z-index: 1;
}

.btn-clear-all .accent-dot {
  position: absolute;
  top: 6px;
  right: 2px;
  bottom: -2px;
  left: 2px;
  border-radius: 50%;
  background: var(--delete-accent);
  opacity: 0.8;
  display: none;
}

.btn-clear-all:hover .accent-dot     { display: block; }
.btn-clear-all:hover span:last-child { font-weight: 700; }

/* ── Mobile : barre fixe + tiroir de formes ── */
.shape-menu-mobile {
  display: none;
  flex-direction: column;
  width: 100%;
}

.mobile-shape-tray {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 20px 40px;
  background: rgba(255, 255, 255, 0.8);
  border-top: 1px solid var(--grey-100);
}

.mobile-shape-tray[hidden] { display: none; }

.mobile-shape-tray .shape-tile {
  flex: 0 0 52px;
}

.mobile-menu-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  height: 90px;
  padding: 12px 40px;
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid var(--grey-100);
}

.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 56px;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: neulis-neue, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--grey-900);
  white-space: nowrap;
}

.mobile-menu-btn.active { font-weight: 500; }

/* Flash bref au tap : confirme que l'action a été reçue, même quand elle n'a
   pas d'effet visuel immédiat (menu principal et panneau d'édition mobile) —
   voir .edit-btn.is-tapped. */
.mobile-menu-btn {
  border-radius: 8px;
  transition: background-color 0.18s ease;
}

.mobile-menu-btn.is-tapped {
  background-color: var(--grey-100);
  transition: none;
}

.icon-toggle-plus .icon-plus-full { display: none; }
.icon-toggle-plus.is-open .icon-plus      { display: none; }
.icon-toggle-plus.is-open .icon-plus-full { display: block; }

/* ── Mobile : panneau d'édition (remplace le menu principal) ── */
.edit-panel-mobile {
  display: none;
  flex-direction: column;
  width: 100%;
}

.edit-panel-mobile-close-row {
  display: flex;
  justify-content: flex-end;
  padding: 8px 4px 0;
  margin-bottom: 4px;
}

.edit-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 100px;
  background: var(--white);
  border: 1px solid var(--grey-100);
  cursor: pointer;
  color: var(--grey-900);
}

.mobile-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding: 12px 40px;
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid var(--grey-100);
}

#panel-color-mobile .icon-color      { display: none; }
#panel-color-mobile.is-open .icon-color-full { display: none; }
#panel-color-mobile.is-open .icon-color      { display: block; }
#panel-color-mobile.is-open span:last-child  { font-weight: 600; }

@media (max-width: 768px) {
  #bottom-menu { padding-bottom: 0; }
  .btn-download-desktop { display: none; }
  .shape-menu-desktop { display: none; }
  .shape-menu-mobile  { display: flex; }
  .shape-menu-mobile.is-hidden { display: none; }
  .edit-panel-mobile.is-active { display: flex; }
  .edit-panel-desktop.is-active { display: none; }

  /* Page d'accueil : décor compact sur mobile */
  .home-content {
    padding: 0 40px;
  }

  .home-title {
    max-width: 340px;
  }

  .home-subtitle {
    font-size: 18px;
    line-height: 26px;
    max-width: 320px;
  }

  .deco-desktop { display: none; }
  .deco-mobile  { display: block; }
}