/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* ====== SIMULATOR ====== */
.sim {
  background: var(--w);
  border-radius: var(--rd);
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(15, 23, 42, 0.06);
}



/* ====== HEADER ====== */
.sim-h {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 20px;
  background: var(--o);
  overflow: hidden;
}

.sim-h::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.12;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.sim-h h3 {
  position: relative;
  z-index: 1;

  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255,255,255,0.7);
}

.sim-h h3 strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

/* ====== BADGE ====== */
.sim-badge {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 5px 12px;
  border-radius: 100px;

  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;

  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
}

/* ====== DOT ====== */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: blink 1.8s ease infinite;
}

.dot-g {
  background: #34d399;
}

.dot-r { background: var(--r); }
.dot-o { background: var(--o); }

@keyframes blink {
  0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
}

/* ====== BODY ====== */
.sim-b {
  padding: 22px 24px;
}

/* ====== COMMON TRANSITIONS ====== */
.sim-mode,
.sim-next,
.sim-back,
.sim-cta,
.lin-metres-input {
  transition: all 0.15s ease;
}

/* ====== STEPPER ====== */
.sim-steps {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
}

.sim-step-dot {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: var(--bl);
  transition: background 0.4s var(--ease);
}

.sim-step-dot.done,
.sim-step-dot.active {
  background: var(--o);
}

.sim-step {
  display: none;
  animation: stepIn 0.35s var(--ease) both;
}

.sim-step.active {
  display: block;
}

@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.sim-step-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;

  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--o);
}

.sim-step-lbl span {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tm);
}


/* ====== BUTTONS ====== */
.sim-next,
.sim-cta {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: var(--o);
  color: #fff;
  cursor: pointer;
}

.sim-next {
  margin-top: 14px;
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 0.88rem;
  font-weight: 700;
}

.sim-cta {
  padding: 16px;
  position: relative;
  overflow: hidden;

  font-size: 0.92rem;
  font-weight: 700;

  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.sim-next:hover,
.sim-cta:hover {
  background: var(--oh);
  transform: translateY(-1px);
}

.sim-cta:hover {
  box-shadow: 0 4px 16px rgba(255,72,0,0.2);
}

.sim-next svg,
.sim-cta svg {
  transition: transform 0.3s var(--ease);
}

.sim-next:hover svg,
.sim-cta:hover svg {
  transform: translateX(4px);
}

.sim-back {
  display: flex;
  align-items: center;
  gap: 4px;

  padding: 8px 0;
  background: none;
  border: none;

  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tm);
  cursor: pointer;
}

.sim-back:hover {
  color: var(--o);
}

/* ====== MODES ====== */
.sim-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.sim-mode {
  padding: 12px;
  text-align: center;

  background: var(--w);
  border: 1.5px solid var(--bl);
  border-radius: 8px;
  cursor: pointer;
}

.sim-mode:hover {
  border-color: var(--bd);
  background: var(--bg2);
}

.sim-mode.active {
  border-color: var(--o);
  background: var(--ol);
  box-shadow: inset 0 0 0 1px var(--o);
}

.sim-mode:not(.active) { opacity: 0.6; }
.sim-mode:not(.active):hover { opacity: 0.8; }

/* ====== INPUTS ====== */
.lin-block,
.lin-block .fi:focus {
  background: var(--w);
}

.lin-block {
  padding: 0;
  border: none;
}

.lin-block .fi {
  border-color: var(--bl);
  color: var(--t);
}

.lin-block .fi:focus {
  border-color: var(--o);
  box-shadow: 0 0 0 3px var(--ol);
}

/* ====== METRES ====== */
.lin-metres-wrap {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bl);
}

.lin-metres-input {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 6px 14px;
  border-radius: 8px;

  background: var(--bg2);
  border: 1.5px solid var(--bl);
}

.lin-metres-input:focus-within {
  background: var(--w);
  border-color: var(--o);
  box-shadow: 0 0 0 3px var(--ol);
}

/* ====== CTA STATES ====== */
.sim-cta.is-loading,
.sim-cta.is-success {
  pointer-events: none;
}

.sim-cta.is-loading {
  opacity: 0.85;
  background: var(--oh);
}

.sim-cta.is-success {
  background: #16a34a;
}

/* ====== SPINNER ====== */
.cta-spinner {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;

  width: 22px;
  height: 22px;

  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;

  animation: spin 0.6s linear infinite;
}

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

/* ====== ERRORS ====== */
.fi.has-error {
  border-color: var(--r) !important;
  box-shadow: 0 0 0 3px var(--rr) !important;
}

.field-error {
  display: none;
  margin-top: 2px;

  font-size: 0.68rem;
  font-weight: 600;
  color: var(--r);
}

.field-error.visible {
  display: block;
}

.sim-note {
  margin-top: 8px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--tm);
}






/* ====== MODE SWITCH ====== */
.sim-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.sim-mode {
  padding: 12px;
  background: var(--w);
  border: 1.5px solid var(--bl);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: .15s ease;
}
.sim-mode:hover         { border-color: var(--bd); background: var(--bg2); }
.sim-mode.active        { border-color: var(--o); background: var(--ol); box-shadow: inset 0 0 0 1px var(--o); }
.sim-mode:not(.active)  { opacity: .6; }
.sim-mode:not(.active):hover { opacity: .8; }
.sim-mode:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; }
.sim-mode strong { display: block; font-size: .84rem; color: var(--t); margin-bottom: 2px; }
.sim-mode small  { font-size: .7rem; color: var(--ts); }


/* ====== CHAMPS ====== */
.fi {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  border: 1.5px solid var(--bl);
  border-radius: 8px;
  font-family: 'Satoshi', sans-serif;
  font-size: .88rem;
  color: var(--t);
  transition: .2s ease;
}
.fi:hover:not(:focus) { border-color: var(--bd); }
.fi:focus {
  outline: none;
  border-color: var(--o);
  background: var(--w);
  box-shadow: 0 0 0 3px var(--ol);
}
.fi.has-error {
  border-color: var(--r) !important;
  box-shadow: 0 0 0 3px var(--rr) !important;
}

.ff label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ts);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
}

.field-error { display: none; font-size: .68rem; color: var(--r); margin-top: 2px; font-weight: 600; }
.fi.has-error + .field-error,
.field-error.visible { display: block; }


/* ====== GRILLES ====== */
.fr   { display: grid; grid-template-columns: 1fr 1fr 70px; gap: 8px; margin-bottom: 8px; }
.fr-2 { display: grid; grid-template-columns: 1fr 1fr;      gap: 8px; margin-bottom: 8px; }
.fr-3 { display: grid; grid-template-columns: 1fr 1fr 1fr;  gap: 8px; margin-bottom: 8px; }
.fr-1 { display: grid; grid-template-columns: 1fr;          gap: 8px; margin-bottom: 8px; max-width: calc(50% - 4px); }


/* ====== BLOCS CONFIG ====== */
.config-block {
  padding: 0 0 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}
.config-block + .config-block {
  padding-top: 12px;
  border-top: 1px solid var(--bl);
}
/* Champs dans config-block et lin-block — surcharge légère */
.config-block .ff label,
.lin-block .ff label    { color: var(--ts); font-size: .78rem; }
.config-block .fi,
.lin-block .fi          { background: var(--w); border-color: var(--bl); color: var(--t); }
.config-block .fi:focus,
.lin-block .fi:focus    { border-color: var(--o); background: var(--w); box-shadow: 0 0 0 3px var(--ol); }
.config-block .fi:hover:not(:focus),
.lin-block .fi:hover:not(:focus) { border-color: var(--bd); }
.config-block select.fi option,
.lin-block select.fi option { background: var(--w); color: var(--t); }

.config-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.config-head .config-num {
  font-size: .68rem;
  font-weight: 600;
  color: var(--o);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.config-rm {
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--tm);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  transition: .15s ease;
}
.config-rm:hover { color: var(--r); background: var(--rr); }


/* ====== MODE LINÉAIRE ====== */
.lin-block {
  padding: 0;
  background: transparent;
  border: none;
  margin-bottom: 0;
}

.lin-metres-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bl);
}
.lin-metres-wrap label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--tm);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lin-metres-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg2);
  border: 1.5px solid var(--bl);
  border-radius: 8px;
  transition: .2s ease;
}
.lin-metres-input:focus-within {
  border-color: var(--o);
  box-shadow: 0 0 0 3px var(--ol);
  background: var(--w);
}
.lin-metres-input input {
  width: 60px;
  height: 34px;
  border: none;
  background: transparent;
  outline: none;
  text-align: center;
  font-family: 'Clash Display', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--t);
}
.lin-metres-input input::placeholder { color: var(--bd); font-weight: 400; }
.lin-metres-input .unit { font-size: .78rem; font-weight: 600; color: var(--o); letter-spacing: .02em; }

.lin-recap { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 4px; }
.lin-recap-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 8px;
  background: var(--bg2);
  border-radius: 4px;
}
.lin-recap-chip .rv { font-family: 'Clash Display', sans-serif; font-size: .75rem; font-weight: 600; color: var(--o); }
.lin-recap-chip .rl { font-size: .64rem; color: var(--tm); font-weight: 400; }

.sim-more-toggle {
  display: block;
  margin: 4px 0 6px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--o);
  text-decoration: none;
  cursor: pointer;
  transition: .2s;
}
.sim-more-toggle:hover { opacity: .7; }


/* ====== ACCORDION OPTIONS ====== */
.sim-acc {
  overflow: hidden;
  background: var(--bg2);
  border: 1.5px solid var(--ob);
  border-radius: var(--rd);
  padding: 0;
  margin-bottom: 0;
}
.sim-acc summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  list-style: none;
  background: rgba(255,72,0,.04);
  font-size: .82rem;
  font-weight: 700;
  color: var(--o);
  cursor: pointer;
  transition: .15s ease;
}
.sim-acc summary:hover { background: rgba(255,72,0,.07); }
.sim-acc summary::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ol);
  color: var(--o);
  font-size: .85rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all .2s var(--ease);
}
.sim-acc[open] summary::before { content: '−'; background: var(--o); color: #fff; }
.sim-acc-grid { display: grid; gap: 8px; padding: 8px 16px 16px; }

.sim-acc-item {
  display: grid;
  grid-template-columns: auto 1fr 68px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--w);
  border: 1px solid var(--bl);
  border-radius: 8px;
  transition: .15s ease;
}
.sim-acc-item:has(input[type="checkbox"]:checked) { border-color: var(--ob); background: rgba(255,72,0,.03); }
.sim-acc-item input[type="checkbox"] { accent-color: var(--o); width: 16px; height: 16px; cursor: pointer; }
.sim-acc-item .acc-nm { font-size: .86rem; font-weight: 500; color: var(--t); }
.sim-acc-item input[type="number"] {
  width: 68px;
  padding: 8px 10px;
  font-size: .86rem;
  text-align: center;
  background: var(--bg2);
  border: 1px solid var(--bl);
  border-radius: 6px;
}

.sim-opts { display: flex; gap: 6px; margin: 10px 0 0; }
.sim-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 11px 16px;
  border: 1.5px solid var(--bl);
  border-radius: 8px;
  font-size: .86rem;
  font-weight: 500;
  color: var(--ts);
  cursor: pointer;
  transition: .15s ease;
}
.sim-opt:hover  { border-color: var(--bd); color: var(--ts); }
.sim-opt.on     { border-color: var(--o); background: var(--ol); color: var(--o); font-weight: 700; }
.sim-opt input  { accent-color: var(--o); }

.sim-guide { margin: 8px 14px 14px; }
.sim-guide a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--w);
  border: 1px dashed var(--ob);
  border-radius: 8px;
  font-size: .75rem;
  color: var(--ts);
  text-decoration: none;
  transition: .25s var(--ease);
}
.sim-guide a:hover  { border-color: var(--o); background: var(--ol); }
.sim-guide a svg    { width: 14px; height: 14px; color: var(--o); flex-shrink: 0; }
.sim-guide a span   { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--o); }


/* ====== PRIX ====== */
@keyframes priceReveal {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: none; }
}
.price-box {
  background: var(--bg2);
  border-radius: var(--rd);
  padding: 16px 18px;
  margin: 16px 0 14px;
}
.price-box.revealed { animation: priceReveal .5s var(--ease) both; }

.price-row      { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.price-row-main { padding: 8px 0 4px; }
.price-row-main .price-lbl { color: var(--t); font-weight: 700; font-size: .82rem; }
.price-lbl  { font-size: .84rem; color: var(--ts); }
.price-old  { font-family: 'Clash Display', sans-serif; font-size: .88rem; font-weight: 500; color: var(--tm); text-decoration: line-through; }
.price-val  { font-family: 'Clash Display', sans-serif; font-size: 1.7rem; font-weight: 600; color: var(--o); letter-spacing: -.03em; }
.price-eco  {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--gl);
  border-radius: 100px;
  font-family: 'Clash Display', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  color: var(--g);
  letter-spacing: -.01em;
}
.price-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bl);
  font-size: .72rem;
  color: var(--tm);
  line-height: 1.5;
}


/* ====== CONTACT + CTA ====== */
.sim-contact {
  margin-bottom: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--bl);
}
.sim-contact .fr-2     { margin-bottom: 8px; }
.sim-contact .fi       { padding: 10px 14px; font-size: .86rem; border-color: var(--bl); }
.sim-contact-note      { font-size: .72rem; color: var(--tm); margin-top: 6px; text-align: center; }

.sim-cta {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 16px;
  background: var(--o);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Satoshi', sans-serif;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: .15s ease;
}
.sim-cta:hover          { background: var(--oh); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,72,0,.2); }
.sim-cta.is-loading     { pointer-events: none; opacity: .85; background: var(--oh); }
.sim-cta.is-loading .cta-label  { opacity: 0; }
.sim-cta.is-loading .cta-spinner { display: block; }
.sim-cta.is-success     { pointer-events: none; background: #16a34a; }
.sim-cta.is-success .cta-label { opacity: 0; }
.sim-cta.is-success .cta-check { display: flex; }

.cta-spinner {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
.cta-check {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ====== UTILITAIRES ====== */
.sim-sep  { height: 1px; background: var(--bl); margin: 14px 0; }
.sim-lbl  { display: block; font-size: .74rem; font-weight: 700; color: var(--ts); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.sim-lbl b { color: var(--t); }
.sim-add  { padding: 6px 0; margin-bottom: 6px; background: none; border: none; color: var(--o); font-size: .76rem; font-weight: 600; cursor: pointer; transition: .15s ease; }
.sim-add:hover { opacity: .7; }
.sim-note { text-align: center; font-size: .78rem; color: var(--tm); margin-top: 8px; }
.sim-panel { transition: opacity .3s var(--ease), transform .3s var(--ease); }
.sim-panel[style*="display:none"] { opacity: 0; transform: translateY(-8px); }