/* ============================================================
   PG Questionnaires — Styles v1.2
   Spécificité renforcée (#pgq-root) pour écraser tout thème WP
   ============================================================ */

/* HARD RESET — masquer le chrome du thème WP */
body.pgq-fullwidth { margin:0!important; padding:0!important; background:#f6f5f2!important; }
body.pgq-fullwidth #page, body.pgq-fullwidth .site, body.pgq-fullwidth .site-content,
body.pgq-fullwidth .entry-content, body.pgq-fullwidth .page-content,
body.pgq-fullwidth main, body.pgq-fullwidth article,
body.pgq-fullwidth .wp-block-post-content {
  max-width:none!important; padding:0!important; margin:0!important; width:100%!important;
}
body.pgq-fullwidth header.site-header, body.pgq-fullwidth .site-header,
body.pgq-fullwidth footer.site-footer, body.pgq-fullwidth .site-footer,
body.pgq-fullwidth .wp-site-blocks>header, body.pgq-fullwidth .wp-site-blocks>footer,
body.pgq-fullwidth nav.main-navigation, body.pgq-fullwidth .site-branding,
body.pgq-fullwidth .entry-header, body.pgq-fullwidth .page-header,
body.pgq-fullwidth .entry-footer, body.pgq-fullwidth .post-navigation,
body.pgq-fullwidth .comments-area, body.pgq-fullwidth aside,
body.pgq-fullwidth .sidebar, body.pgq-fullwidth #colophon { display:none!important; }

/* ============================================================
   ROOT
   ============================================================ */
#pgq-root {
  --pgq-bg: #f6f5f2;
  --pgq-surface: #fff;
  --pgq-border: #e2e0db;
  --pgq-border-focus: #1a1a1a;
  --pgq-text: #1a1a1a;
  --pgq-text-muted: #7a7770;
  --pgq-accent: #1a1a1a;
  --pgq-accent-light: #f0efec;
  --pgq-radius: 10px;
  --pgq-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
  --pgq-shadow-hover: 0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
  --pgq-transition: .25s cubic-bezier(.4,0,.2,1);
  --pgq-error: #c0392b;
  --pgq-success: #27ae60;
  background: var(--pgq-bg) !important;
  color: var(--pgq-text) !important;
  line-height: 1.6 !important;
  font-size: 15px !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reset total */
#pgq-root *, #pgq-root *::before, #pgq-root *::after {
  box-sizing: border-box !important;
}
#pgq-root h1, #pgq-root h2, #pgq-root h3, #pgq-root p,
#pgq-root a, #pgq-root span, #pgq-root div, #pgq-root label,
#pgq-root input, #pgq-root textarea, #pgq-root select, #pgq-root button,
#pgq-root footer {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  letter-spacing: normal !important;
}
#pgq-root h1, #pgq-root h2,
#pgq-root .pgq-section-title,
#pgq-root .pgq-header-brand,
#pgq-root .pgq-intro h1 {
  font-family: 'Instrument Serif', Georgia, serif !important;
}
#pgq-root a { color: inherit !important; text-decoration: none !important; }
#pgq-root a:hover { opacity: .85; }

/* ============================================================
   HEADER
   ============================================================ */
#pgq-root .pgq-header {
  position: sticky !important; top: 0 !important; z-index: 100 !important;
  background: rgba(255,255,255,.45) !important;
  backdrop-filter: blur(40px) saturate(1.4) !important; -webkit-backdrop-filter: blur(40px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 1px 12px rgba(0,0,0,.03) !important;
  padding: 14px 40px !important;
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  max-width: none !important; width: 100% !important; margin: 0 !important;
}
#pgq-root .pgq-header-left { display:flex!important; align-items:center!important; gap:14px!important; }
#pgq-root .pgq-header-brand { font-family:'Instrument Serif',Georgia,serif!important; font-size:22px!important; letter-spacing:-.02em!important; color:var(--pgq-text)!important; }
#pgq-root .pgq-header-sub { font-size:11px!important; text-transform:uppercase!important; letter-spacing:.08em!important; color:var(--pgq-text-muted)!important; }
#pgq-root .pgq-header-right { display:flex!important; align-items:center!important; gap:16px!important; font-size:13px!important; color:var(--pgq-text-muted)!important; }
#pgq-root .pgq-location { display:flex!important; align-items:center!important; gap:4px!important; }

#pgq-root .pgq-btn-home {
  display:inline-flex!important; align-items:center!important; gap:6px!important;
  padding:8px 18px!important; border-radius:999px!important;
  font-size:13px!important; font-weight:500!important;
  border:1px solid rgba(255,255,255,.6)!important;
  background:rgba(255,255,255,.65)!important;
  backdrop-filter:blur(20px)!important; -webkit-backdrop-filter:blur(20px)!important;
  color:var(--pgq-text)!important; cursor:pointer!important;
  box-shadow:0 2px 8px rgba(0,0,0,.04)!important;
  transition:all .35s cubic-bezier(.4,0,.2,1)!important;
  text-decoration:none!important;
}
#pgq-root .pgq-btn-home:hover { background:var(--pgq-accent)!important; color:#fff!important; border-color:var(--pgq-accent)!important; transform:translateY(-1px)!important; }

#pgq-root .pgq-cart-badge {
  display:inline-flex!important; align-items:center!important; gap:6px!important;
  padding:8px 16px!important; border-radius:999px!important;
  background:var(--pgq-accent)!important; color:#fff!important;
  font-size:13px!important; font-weight:500!important;
  text-decoration:none!important; cursor:pointer!important;
  box-shadow:0 4px 16px rgba(44,44,44,.2)!important;
  transition: all .35s cubic-bezier(.4,0,.2,1)!important;
}
#pgq-root .pgq-cart-badge:hover { transform:translateY(-1px)!important; box-shadow:0 6px 20px rgba(44,44,44,.25)!important; }

#pgq-root .pgq-header-contact {
  display: inline-flex;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pgq-text) !important;
  text-decoration: none !important;
  background: rgba(255,255,255,.45) !important;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.03) !important;
  transition: all .35s cubic-bezier(.4,0,.2,1) !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 10 !important;
}
#pgq-root .pgq-header-contact:hover {
  border-color: var(--pgq-text) !important;
  background: rgba(255,255,255,.65) !important;
  transform: translateY(-1px) !important;
}
#pgq-root .pgq-header-identity {
  display:inline-flex!important; align-items:center!important; gap:6px!important;
  padding:8px 16px!important; border-radius:999px!important;
  background:rgba(255,255,255,.45)!important; color:var(--pgq-text)!important;
  backdrop-filter:blur(16px)!important; -webkit-backdrop-filter:blur(16px)!important;
  border:1px solid rgba(255,255,255,.6)!important;
  font-size:13px!important; font-weight:500!important;
  text-decoration:none!important; cursor:pointer!important;
  box-shadow:0 1px 4px rgba(0,0,0,.03)!important;
  transition: all .35s cubic-bezier(.4,0,.2,1)!important;
}
#pgq-root .pgq-header-identity:hover { border-color:var(--pgq-accent)!important; transform:translateY(-1px)!important; }
#pgq-root .pgq-header-identity.pgq-identity-filled {
  background:#f0faf0!important; border-color:#c8e6c9!important; color:#2e7d32!important;
}

/* ============================================================
   INTRO & LAYOUT
   ============================================================ */
#pgq-root .pgq-intro {
  text-align: center !important;
  padding: 56px 24px 28px !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}
#pgq-root .pgq-intro h1 {
  font-size: clamp(28px, 5vw, 44px) !important;
  font-weight: 400 !important;
  letter-spacing: -.03em !important;
  line-height: 1.15 !important;
  margin: 0 0 16px 0 !important;
  color: var(--pgq-text) !important;
}
#pgq-root .pgq-intro p {
  color: var(--pgq-text-muted) !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
#pgq-root .pgq-main {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 24px 24px 120px !important;
}

/* ============================================================
   LANDING GRID
   ============================================================ */
#pgq-root .pgq-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 36px !important;
}
#pgq-root .pgq-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 28px 16px !important;
  border: 1px solid var(--pgq-border) !important;
  border-radius: var(--pgq-radius) !important;
  background: var(--pgq-surface) !important;
  text-align: center !important;
  transition: all var(--pgq-transition) !important;
  box-shadow: var(--pgq-shadow) !important;
}
#pgq-root .pgq-card:hover {
  border-color: #ccc !important;
  box-shadow: var(--pgq-shadow-hover) !important;
  transform: translateY(-3px);
}
#pgq-root .pgq-card-highlight {
  border: 2px solid var(--pgq-accent) !important;
  background: var(--pgq-accent-light) !important;
}
#pgq-root .pgq-card-icon { color:var(--pgq-text-muted)!important; }
#pgq-root .pgq-card-icon svg { transition:stroke .4s ease, transform .4s ease!important; }
#pgq-root .pgq-card:hover .pgq-card-icon svg { stroke:#0000ff!important; transform:scale(1.15) rotate(-6deg)!important; }
#pgq-root .pgq-card-label { font-size:13px!important; font-weight:500!important; line-height:1.3!important; margin:0!important; }
#pgq-root .pgq-card-desc { font-size:11px!important; color:var(--pgq-text-muted)!important; line-height:1.4!important; margin:0!important; }

#pgq-root .pgq-card-badge {
  position:absolute!important; top:8px!important; right:8px!important;
  font-size:10px!important; font-weight:500!important;
  padding:3px 8px!important; border-radius:12px!important;
  display:flex!important; align-items:center!important; gap:3px!important;
  margin:0!important;
}
#pgq-root .pgq-badge-done { background:#e8f5e9!important; color:#2e7d32!important; }
#pgq-root .pgq-badge-todo { background:#fff3e0!important; color:#e65100!important; }

/* ============================================================
   CART PANEL
   ============================================================ */
#pgq-root .pgq-cart-panel {
  border:1px solid var(--pgq-border)!important; border-radius:var(--pgq-radius)!important;
  background:var(--pgq-surface)!important; box-shadow:var(--pgq-shadow)!important;
  overflow:hidden!important;
}
#pgq-root .pgq-cart-header {
  display:flex!important; align-items:center!important; gap:8px!important;
  padding:16px 20px!important; border-bottom:1px solid var(--pgq-border)!important; font-size:14px!important;
}
#pgq-root .pgq-cart-item {
  display:flex!important; justify-content:space-between!important; align-items:center!important;
  padding:12px 20px!important; border-bottom:1px solid var(--pgq-accent-light)!important; font-size:13px!important;
  transition:all .25s ease!important; cursor:default!important;
}
#pgq-root .pgq-cart-item:hover {
  background:rgba(0,0,255,.03)!important;
}
#pgq-root .pgq-cart-item:hover .pgq-cart-item-info > svg {
  stroke:#fff!important; background:#0000ff!important;
  border-radius:50%!important; padding:3px!important;
  box-shadow:0 2px 8px rgba(0,0,255,.3)!important;
  transform:scale(1.15)!important;
}
#pgq-root .pgq-cart-item-info > svg {
  transition:all .25s ease!important; flex-shrink:0!important;
}
#pgq-root .pgq-cart-item:last-of-type { border-bottom:1px solid var(--pgq-border)!important; }
#pgq-root .pgq-cart-item-info { display:flex!important; align-items:center!important; gap:8px!important; }
#pgq-root .pgq-cart-item-sub { color:var(--pgq-text-muted)!important; }
#pgq-root .pgq-cart-actions { display:flex!important; gap:8px!important; }
#pgq-root .pgq-cart-action {
  display:flex!important; align-items:center!important; justify-content:center!important;
  width:28px!important; height:28px!important; border-radius:6px!important;
  border:1px solid var(--pgq-border)!important; background:transparent!important;
  color:var(--pgq-text-muted)!important; cursor:pointer!important; transition:all var(--pgq-transition)!important;
}
#pgq-root .pgq-cart-action:hover { background:var(--pgq-accent-light)!important; color:var(--pgq-text)!important; }
#pgq-root .pgq-cart-action.pgq-cart-remove:hover { color:var(--pgq-error)!important; border-color:var(--pgq-error)!important; }
#pgq-root .pgq-cart-footer { padding:16px 20px!important; text-align:right!important; }
#pgq-root .pgq-cart-identity { padding:16px 20px!important; border-top:1px solid #eee!important; }
#pgq-root .pgq-cart-identity-summary { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; padding:8px 0!important; }
#pgq-root .pgq-cart-identity-info { font-size:14px!important; line-height:1.5!important; color:#555!important; }
#pgq-root .pgq-cart-identity-info strong { color:#1a1a1a!important; }
#pgq-root .pgq-cart-identity-form { padding:8px 0!important; }
#pgq-root .pgq-cart-identity-form .pgq-field-group { margin-bottom:10px!important; }
#pgq-root .pgq-cart-identity-form label { font-size:12px!important; color:#888!important; margin-bottom:4px!important; display:block!important; }
#pgq-root .pgq-cart-identity-form input { font-size:14px!important; padding:8px 12px!important; border:1px solid #ddd!important; border-radius:8px!important; width:100%!important; }

/* ============================================================
   CART MODAL
   ============================================================ */
#pgq-root .pgq-cart-modal { display:none; }
#pgq-root .pgq-cart-modal.pgq-cart-modal-open { display:block!important; }
#pgq-root .pgq-cart-modal-backdrop {
  position:fixed!important; inset:0!important; z-index:9998!important;
  background:rgba(0,0,0,.45)!important; backdrop-filter:blur(4px)!important;
  animation:pgqFadeIn .2s ease!important;
}
#pgq-root .pgq-cart-modal-panel {
  position:fixed!important; top:50%!important; left:50%!important;
  transform:translate(-50%,-50%)!important; z-index:9999!important;
  width:90%!important; max-width:520px!important; max-height:85vh!important;
  background:#fff!important; border-radius:16px!important;
  box-shadow:0 20px 60px rgba(0,0,0,.2)!important;
  display:flex!important; flex-direction:column!important;
  animation:pgqSlideUp .25s ease!important;
}
#pgq-root .pgq-cart-modal-head {
  display:flex!important; justify-content:space-between!important; align-items:center!important;
  padding:16px 20px!important; border-bottom:1px solid #eee!important; font-size:16px!important;
}
#pgq-root .pgq-cart-modal-close {
  background:none!important; border:none!important; font-size:24px!important;
  cursor:pointer!important; color:#888!important; line-height:1!important; padding:0 4px!important;
}
#pgq-root .pgq-cart-modal-close:hover { color:#333!important; }
#pgq-root .pgq-cart-modal-body {
  overflow-y:auto!important; flex:1!important; padding:0!important;
}
#pgq-root .pgq-cart-modal-body .pgq-cart-footer { padding:16px 20px!important; text-align:right!important; border-top:1px solid #eee!important; }
@keyframes pgqFadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes pgqSlideUp { from { opacity:0; transform:translate(-50%,-45%) } to { opacity:1; transform:translate(-50%,-50%) } }
@media (max-width:600px) {
  #pgq-root .pgq-cart-modal-panel { width:95%!important; max-height:90vh!important; }
}

/* ============================================================
   IDENTITY REMINDER
   ============================================================ */
#pgq-root .pgq-identity-reminder {
  display:flex!important; justify-content:space-between!important; align-items:center!important;
  background:var(--pgq-accent-light)!important; border:1px solid var(--pgq-border)!important;
  border-radius:var(--pgq-radius)!important; padding:12px 16px!important; margin-bottom:24px!important; font-size:13px!important;
}
#pgq-root .pgq-identity-reminder-left { display:flex!important; align-items:center!important; gap:8px!important; }
#pgq-root .pgq-link-small { font-size:12px!important; color:var(--pgq-text-muted)!important; text-decoration:underline!important; }

/* ============================================================
   SECTIONS
   ============================================================ */
#pgq-root .pgq-section { margin-bottom:32px!important; padding-bottom:16px!important; }
#pgq-root .pgq-section-header { margin-bottom:32px!important; }
#pgq-root .pgq-section-number {
  font-size:12px!important; text-transform:uppercase!important; letter-spacing:.1em!important;
  color:var(--pgq-text-muted)!important; margin-bottom:8px!important;
  display:flex!important; align-items:center!important; gap:8px!important;
}
#pgq-root .pgq-section-number::after { content:''!important; flex:1!important; height:1px!important; background:var(--pgq-border)!important; }
#pgq-root .pgq-section-title {
  font-size:26px!important; font-weight:400!important; letter-spacing:-.02em!important;
  margin:0!important; color:var(--pgq-text)!important;
}
#pgq-root .pgq-section-desc { color:var(--pgq-text-muted)!important; margin-top:6px!important; font-size:14px!important; }

/* ============================================================
   FORM FIELDS
   ============================================================ */
#pgq-root .pgq-field-group { margin-bottom:24px!important; }
#pgq-root .pgq-field-row { display:grid!important; grid-template-columns:1fr 1fr!important; gap:16px!important; }

#pgq-root label {
  display:block!important; font-size:13px!important; font-weight:500!important;
  margin:0 0 7px 0!important; letter-spacing:.01em!important;
  color:var(--pgq-text)!important;
}
#pgq-root .pgq-required { color:var(--pgq-error)!important; margin-left:2px!important; }
#pgq-root .pgq-hint { font-weight:400!important; color:var(--pgq-text-muted)!important; font-size:12px!important; margin-left:4px!important; }

#pgq-root input[type=text],
#pgq-root input[type=email],
#pgq-root input[type=tel],
#pgq-root input[type=url],
#pgq-root input[type=number],
#pgq-root input[type=date],
#pgq-root textarea,
#pgq-root select {
  width:100%!important; padding:11px 14px!important;
  border:1px solid var(--pgq-border)!important;
  border-radius:var(--pgq-radius)!important;
  background:var(--pgq-surface)!important;
  font-size:14px!important; color:var(--pgq-text)!important;
  transition:border-color var(--pgq-transition),box-shadow var(--pgq-transition)!important;
  outline:none!important;
  margin:0!important;
}
#pgq-root input:focus, #pgq-root textarea:focus, #pgq-root select:focus {
  border-color:var(--pgq-border-focus)!important;
  box-shadow:0 0 0 3px rgba(26,26,26,.06)!important;
}
#pgq-root textarea { resize:vertical!important; min-height:100px!important; }
#pgq-root select { appearance:none!important; -webkit-appearance:none!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='2 4 6 8 10 4'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important; background-position:right 14px center!important; padding-right:36px!important; cursor:pointer!important; }

/* ============================================================
   OPTION CARDS (radio/checkbox)
   ============================================================ */
#pgq-root .pgq-option-grid { display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; }
#pgq-root .pgq-option-grid.pgq-three-cols { grid-template-columns:1fr 1fr 1fr!important; }
#pgq-root .pgq-option-grid.pgq-four-cols { grid-template-columns:1fr 1fr 1fr 1fr!important; }
#pgq-root .pgq-option-card { position:relative!important; cursor:pointer!important; }
#pgq-root .pgq-option-card input { position:absolute!important; opacity:0!important; width:0!important; height:0!important; }
#pgq-root .pgq-card-content {
  display:flex!important; flex-direction:column!important; align-items:center!important; gap:8px!important;
  padding:18px 14px!important; border:1px solid var(--pgq-border)!important;
  border-radius:var(--pgq-radius)!important; background:var(--pgq-surface)!important;
  transition:all var(--pgq-transition)!important; text-align:center!important;
}
#pgq-root .pgq-option-card input:checked + .pgq-card-content {
  border-color:var(--pgq-accent)!important; background:var(--pgq-accent-light)!important;
  box-shadow:0 0 0 1px var(--pgq-accent)!important;
}
#pgq-root .pgq-option-card:hover .pgq-card-content { border-color:#ccc!important; }

/* ============================================================
   COLORS CHIPS
   ============================================================ */
#pgq-root .pgq-color-chips { display:flex!important; gap:10px!important; flex-wrap:wrap!important; }
#pgq-root .pgq-color-chip {
  width:44px!important; height:44px!important; border-radius:50%!important;
  cursor:pointer!important; position:relative!important;
  transition:transform var(--pgq-transition),box-shadow var(--pgq-transition)!important;
  border:3px solid transparent!important;
}
#pgq-root .pgq-color-chip:hover { transform:scale(1.1); }
#pgq-root .pgq-color-chip input { position:absolute!important; opacity:0!important; width:0!important; height:0!important; }
#pgq-root .pgq-color-chip:has(input:checked) {
  border-color:var(--pgq-text)!important;
  box-shadow:0 0 0 2px var(--pgq-bg),0 0 0 4px var(--pgq-text)!important;
  transform:scale(1.1);
}

/* ============================================================
   CONDITIONALS
   ============================================================ */
#pgq-root .pgq-conditional { display:none!important; margin-top:16px!important; padding-top:16px!important; border-top:1px solid var(--pgq-border)!important; animation: pgq-fadeIn .3s ease !important; }
#pgq-root .pgq-conditional.pgq-visible { display:block!important; }
#pgq-root .pgq-conditional.pgq-visible + .pgq-conditional.pgq-visible { border-top:none!important; margin-top:0!important; padding-top:0!important; }

/* ============================================================
   FILE UPLOAD
   ============================================================ */
#pgq-root .pgq-file-drop {
  border:2px dashed var(--pgq-border)!important; border-radius:var(--pgq-radius)!important;
  padding:32px!important; text-align:center!important; cursor:pointer!important;
  transition:all var(--pgq-transition)!important; background:var(--pgq-surface)!important;
}
#pgq-root .pgq-file-drop:hover, #pgq-root .pgq-file-drop.pgq-dragover {
  border-color:var(--pgq-accent)!important; background:var(--pgq-accent-light)!important;
}
#pgq-root .pgq-drop-icon { color:var(--pgq-text-muted)!important; margin-bottom:10px!important; }
#pgq-root .pgq-file-drop p { font-size:13px!important; color:var(--pgq-text-muted)!important; margin:0!important; }
#pgq-root .pgq-file-drop p strong { color:var(--pgq-text)!important; }
#pgq-root .pgq-file-list { margin-top:10px!important; display:flex!important; flex-wrap:wrap!important; gap:8px!important; }
#pgq-root .pgq-file-tag {
  display:flex!important; align-items:center!important; gap:6px!important;
  padding:6px 12px!important; background:var(--pgq-accent-light)!important;
  border-radius:20px!important; font-size:12px!important;
}
#pgq-root .pgq-file-tag button {
  background:none!important; border:none!important; cursor:pointer!important;
  color:var(--pgq-text-muted)!important; font-size:14px!important; padding:0!important; line-height:1!important;
}

#pgq-root .pgq-link-upload-box {
  background:var(--pgq-surface)!important; border:1px solid var(--pgq-border)!important;
  border-radius:var(--pgq-radius)!important; padding:16px 20px!important; margin-top:16px!important;
}
#pgq-root .pgq-hint-text { font-size:12px!important; color:var(--pgq-text-muted)!important; margin-bottom:8px!important; }

/* ============================================================
   EXTRA FIELDS
   ============================================================ */
#pgq-root .pgq-extra-field {
  background:var(--pgq-surface)!important; border:1px solid var(--pgq-border)!important;
  border-radius:var(--pgq-radius)!important; padding:16px!important; margin-bottom:12px!important;
  position:relative!important;
}
#pgq-root .pgq-remove-extra {
  position:absolute!important; top:10px!important; right:10px!important;
  background:none!important; border:none!important; cursor:pointer!important;
  color:var(--pgq-text-muted)!important; font-size:18px!important; line-height:1!important; padding:4px!important;
}
#pgq-root .pgq-remove-extra:hover { color:var(--pgq-error)!important; }

/* ============================================================
   BUTTONS
   ============================================================ */
#pgq-root .pgq-btn {
  display:inline-flex!important; align-items:center!important; gap:8px!important;
  padding:12px 28px!important; border-radius:var(--pgq-radius)!important;
  font-size:14px!important; font-weight:500!important;
  border:none!important; cursor:pointer!important;
  transition:all var(--pgq-transition)!important;
  line-height:1.4!important;
}
#pgq-root .pgq-btn-secondary { background:var(--pgq-surface)!important; color:var(--pgq-text)!important; border:1px solid var(--pgq-border)!important; }
#pgq-root .pgq-btn-secondary:hover { background:var(--pgq-accent-light)!important; }
#pgq-root .pgq-btn-primary { background:var(--pgq-accent)!important; color:#fff!important; }
#pgq-root .pgq-btn-primary:hover { background:#333!important; transform:translateY(-1px); box-shadow:var(--pgq-shadow-hover)!important; }

#pgq-root .pgq-btn-add {
  display:inline-flex!important; align-items:center!important; gap:6px!important;
  padding:10px 18px!important; border-radius:var(--pgq-radius)!important;
  font-size:13px!important; font-weight:500!important;
  border:1px dashed var(--pgq-border)!important;
  background:transparent!important; color:var(--pgq-text-muted)!important;
  cursor:pointer!important; transition:all var(--pgq-transition)!important; width:100%!important;
}
#pgq-root .pgq-btn-add:hover { background:var(--pgq-accent-light)!important; color:var(--pgq-text)!important; }

/* ============================================================
   NAVIGATION
   ============================================================ */
#pgq-root .pgq-nav-buttons {
  display:flex!important; justify-content:space-between!important; align-items:center!important;
  margin-top:48px!important; padding-top:24px!important; border-top:1px solid var(--pgq-border)!important;
}
#pgq-root .pgq-nav-right { display:flex!important; gap:10px!important; }

/* ============================================================
   VALIDATION
   ============================================================ */
#pgq-root .pgq-invalid { border-color:var(--pgq-error)!important; box-shadow:0 0 0 3px rgba(192,57,43,.1)!important; }
#pgq-root .pgq-field-error { font-size:12px!important; color:var(--pgq-error)!important; margin-top:4px!important; }

/* ============================================================
   STATUS SCREENS
   ============================================================ */
#pgq-root .pgq-sending-overlay {
  display:none; position:fixed!important; inset:0!important;
  background:rgba(246,245,242,.9)!important; z-index:1000!important;
  justify-content:center!important; align-items:center!important;
  flex-direction:column!important; gap:16px!important;
}
#pgq-root .pgq-sending-overlay.pgq-active { display:flex!important; }
#pgq-root .pgq-spinner {
  width:40px!important; height:40px!important;
  border:3px solid var(--pgq-border)!important;
  border-top-color:var(--pgq-accent)!important;
  border-radius:50%!important; animation:pgq-spin .8s linear infinite;
}
@keyframes pgq-spin { to { transform:rotate(360deg); } }

.pgq-success-screen, .pgq-error-screen {
  display:none; text-align:center!important; padding:80px 24px!important;
  animation:pgq-fadeIn .5s ease;
}
.pgq-success-screen.pgq-active, .pgq-error-screen.pgq-active { display:block!important; }
@keyframes pgq-fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

#pgq-root .pgq-success-icon, #pgq-root .pgq-error-icon {
  width:64px!important; height:64px!important; border-radius:50%!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  margin:0 auto 24px!important;
}
#pgq-root .pgq-success-icon { background:var(--pgq-success)!important; }
#pgq-root .pgq-success-screen h2 {
  font-size:32px!important; font-weight:400!important; margin:0 0 12px 0!important;
}
#pgq-root .pgq-success-screen p {
  color:var(--pgq-text-muted)!important; max-width:400px!important;
  margin:0 auto!important; line-height:1.7!important;
}
#pgq-root .pgq-signature { margin-top:16px!important; font-style:italic!important; }
#pgq-root .pgq-success-actions { display:flex!important; gap:12px!important; justify-content:center!important; margin-top:24px!important; }

/* ============================================================
   AUTOSAVE BADGE
   ============================================================ */
#pgq-root .pgq-autosave-badge {
  position:fixed!important; bottom:20px!important; right:20px!important;
  background:var(--pgq-surface)!important; border:1px solid var(--pgq-border)!important;
  border-radius:20px!important; padding:6px 14px!important;
  font-size:11px!important; color:var(--pgq-text-muted)!important;
  display:none; align-items:center!important; gap:6px!important;
  box-shadow:var(--pgq-shadow)!important; z-index:50!important;
}
#pgq-root .pgq-autosave-badge.pgq-visible { display:flex!important; }

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   CONTACT FORM
   ============================================================ */
#pgq-root .pgq-contact-section {
  margin-top: 32px !important;
  padding: 40px 24px !important;
  background: var(--pgq-surface) !important;
  border-top: 1px solid var(--pgq-border) !important;
}
#pgq-root .pgq-contact-inner {
  max-width: 600px !important;
  margin: 0 auto !important;
}
#pgq-root .pgq-contact-inner h2 {
  font-family: 'Instrument Serif', serif !important;
  font-size: 28px !important;
  margin-bottom: 8px !important;
  text-align: center !important;
}
#pgq-root .pgq-contact-inner > p {
  color: var(--pgq-muted) !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}
#pgq-root .pgq-contact-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
@media (max-width: 600px) {
  #pgq-root .pgq-contact-row { grid-template-columns: 1fr !important; }
}
#pgq-root .pgq-contact-section .pgq-field-group {
  margin-bottom: 16px !important;
}
#pgq-root .pgq-contact-success {
  display: none !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
  padding: 12px 16px !important;
  background: #f0faf0 !important;
  border: 1px solid #c8e6c9 !important;
  border-radius: var(--pgq-radius) !important;
  color: #2e7d32 !important;
  font-size: 14px !important;
}
#pgq-root .pgq-contact-success.pgq-visible {
  display: flex !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
#pgq-root .pgq-footer {
  text-align:center!important; padding:32px!important;
  font-size:12px!important; color:var(--pgq-text-muted)!important;
  border-top:1px solid var(--pgq-border)!important;
}
#pgq-root .pgq-footer a { color:var(--pgq-text)!important; }
#pgq-root .pgq-footer strong { font-weight:600!important; }

/* ============================================================
   IDENTITY DETAILS (collapsible in support forms)
   ============================================================ */
#pgq-root .pgq-id-details {
  background: #f0faf0 !important;
  border: 1px solid #c8e6c9 !important;
  border-radius: var(--pgq-radius) !important;
  margin-bottom: 24px !important;
  font-size: 13px !important;
}
#pgq-root .pgq-id-details-summary {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  list-style: none !important;
  color: #2e7d32 !important;
  font-size: 13px !important;
}
#pgq-root .pgq-id-details-summary::-webkit-details-marker { display: none !important; }
#pgq-root .pgq-id-details-summary .pgq-chevron {
  margin-left: auto !important;
  transition: transform .2s !important;
}
#pgq-root .pgq-id-details[open] .pgq-chevron { transform: rotate(180deg) !important; }
#pgq-root .pgq-id-details-body {
  padding: 0 16px 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 20px !important;
  border-top: 1px solid #c8e6c9 !important;
  padding-top: 12px !important;
}

/* ============================================================
   IDENTITY BANNER (suggestion on landing)
   ============================================================ */
#pgq-root .pgq-id-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: var(--pgq-surface) !important;
  border: 1px solid var(--pgq-border) !important;
  border-radius: var(--pgq-radius) !important;
  padding: 16px 20px !important;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
#pgq-root .pgq-id-banner-done {
  background: #f0faf0 !important;
  border-color: #c8e6c9 !important;
}
#pgq-root .pgq-id-banner-compact {
  background: var(--pgq-accent-light) !important;
  padding: 12px 16px !important;
}
#pgq-root .pgq-id-banner-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#pgq-root .pgq-btn-sm {
  padding: 7px 14px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* ============================================================
   CHECKBOX + QUANTITY
   ============================================================ */
#pgq-root .pgq-checkbox-qty-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
#pgq-root .pgq-cbq-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  background: var(--pgq-surface) !important;
  border: 1px solid var(--pgq-border) !important;
  border-radius: var(--pgq-radius) !important;
  transition: border-color var(--pgq-transition) !important;
}
#pgq-root .pgq-cbq-row:has(input[type="checkbox"]:checked) {
  border-color: var(--pgq-accent) !important;
  background: var(--pgq-accent-light) !important;
}
#pgq-root .pgq-cbq-check {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
#pgq-root .pgq-cbq-qty {
  width: 70px !important;
  min-width: 70px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  text-align: center !important;
  border: 1px solid var(--pgq-border) !important;
  border-radius: var(--pgq-radius) !important;
  background: #fff !important;
}
#pgq-root .pgq-cbq-qty:disabled {
  opacity: .3 !important;
  background: var(--pgq-surface) !important;
}

/* ============================================================
   DYNAMIC LIST (ajouter une page, etc.)
   ============================================================ */
#pgq-root .pgq-dynamic-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}
#pgq-root .pgq-dynlist-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  animation: pgq-fadeIn .25s ease !important;
}
#pgq-root .pgq-dynlist-row input {
  flex: 1 !important;
}
#pgq-root .pgq-dynlist-remove {
  background: none !important;
  border: 1px solid var(--pgq-border) !important;
  border-radius: var(--pgq-radius) !important;
  width: 36px !important;
  height: 36px !important;
  cursor: pointer !important;
  color: var(--pgq-text-muted) !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all var(--pgq-transition) !important;
  padding: 0 !important;
}
#pgq-root .pgq-dynlist-remove:hover {
  background: var(--pgq-accent-light) !important;
  color: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* ============================================================
   DYNAMIC COLORS
   ============================================================ */
#pgq-root .pgq-color-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}
#pgq-root .pgq-color-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  animation: pgq-fadeIn .25s ease !important;
}
#pgq-root .pgq-color-picker {
  width: 44px !important;
  height: 38px !important;
  padding: 2px !important;
  border: 1px solid var(--pgq-border) !important;
  border-radius: var(--pgq-radius) !important;
  cursor: pointer !important;
  background: none !important;
  flex-shrink: 0 !important;
}
#pgq-root .pgq-color-hex {
  flex: 1 !important;
  font-family: 'DM Sans', monospace !important;
  letter-spacing: .5px !important;
}

/* ============================================================
   MODAL "ET ENSUITE ?"
   ============================================================ */
#pgq-root .pgq-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  background: rgba(0,0,0,.45) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  backdrop-filter: blur(4px) !important;
}
#pgq-root .pgq-modal-backdrop.pgq-modal-visible {
  display: flex !important;
  animation: pgq-fadeIn .2s ease !important;
}
#pgq-root .pgq-modal {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 40px 32px !important;
  max-width: 440px !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.2) !important;
  animation: pgq-slideUp .3s ease !important;
}
#pgq-root .pgq-modal-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
}
#pgq-root .pgq-modal h3 {
  font-family: var(--pgq-heading) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  margin: 0 0 8px !important;
}
#pgq-root .pgq-modal p {
  font-size: 14px !important;
  color: var(--pgq-text-muted) !important;
  margin: 0 0 28px !important;
  line-height: 1.6 !important;
}
#pgq-root .pgq-modal-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#pgq-root .pgq-modal-actions .pgq-btn {
  justify-content: center !important;
  width: 100% !important;
}
@keyframes pgq-slideUp {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:translateY(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  #pgq-root .pgq-header { padding:14px 18px!important; flex-wrap:wrap!important; gap:8px!important; }
  #pgq-root .pgq-main { padding:24px 18px 100px!important; }
  #pgq-root .pgq-grid { grid-template-columns:1fr 1fr!important; }
  #pgq-root .pgq-field-row { grid-template-columns:1fr!important; }
  #pgq-root .pgq-option-grid, #pgq-root .pgq-option-grid.pgq-three-cols { grid-template-columns:1fr 1fr!important; }
  #pgq-root .pgq-option-grid.pgq-four-cols { grid-template-columns:1fr 1fr!important; }
  #pgq-root .pgq-nav-buttons { flex-direction:column-reverse!important; gap:10px!important; }
  #pgq-root .pgq-nav-right { flex-direction:column!important; width:100%!important; }
  #pgq-root .pgq-btn { justify-content:center!important; width:100%!important; }
  #pgq-root .pgq-cart-item { flex-direction:column!important; align-items:flex-start!important; gap:8px!important; }
  #pgq-root .pgq-success-actions { flex-direction:column!important; }
  #pgq-root .pgq-id-banner { flex-direction:column!important; text-align:center!important; }
  #pgq-root .pgq-id-banner-left { flex-direction:column!important; }
}
