:root{
  --mika-yellow:#F2C202;
  --mika-dark:#151515;
  --mika-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* =========================
   BASE / SAFETY
========================= */
.mika-prix30s,
.mika-prix30s *{
  box-sizing: border-box;
}

.mika-prix30s{
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
  overflow-x: hidden; /* stop micro overflow */
}

.mika-prix30s__header h2{ margin:0 0 6px; }
.mika-prix30s__header p{ margin:0 0 14px; opacity:.85; }

/* =========================
   PROGRESS (dark readable)
========================= */
.mika-progress{ margin-bottom:14px; }
.mika-progress__bar{
  height:10px;
  background: rgba(255,255,255,.16);
  border-radius:999px;
  overflow:hidden;
}
.mika-progress__fill{
  display:block;
  height:100%;
  background: var(--mika-yellow);
  border-radius:999px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.mika-progress__labels{
  display:flex;
  gap:10px;
  margin-top:8px;
  font-size:13px;
  opacity:1;
}
.mika-progress__label{
  flex:1;
  color: rgba(255,255,255,.55);
  opacity:1;
}
.mika-progress__label.is-active{
  color:#fff;
  font-weight:900;
}
.mika-progress__label.is-done{
  color: rgba(242,194,2,.95);
  opacity:1;
}

/* =========================
   SLIDER / STEPS (anti iOS lines)
   ⚠️ Compatible avec translateX(-100%) dans ton JS
========================= */
.mika-steps-wrapper{
  overflow:hidden !important;
  border-radius:16px;
  background: transparent;
  position: relative;
  isolation: isolate; /* anti artefacts */
  clip-path: inset(0 round 16px); /* iOS-friendly clipping */
}

.mika-steps-container{
  display:flex;
  transition: transform .40s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mika-prix30s__step{
  min-width:100%;
  flex: 0 0 100%;
  max-width:100%;

  /* Dark UI: pas de panneau blanc */
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;

  /* coupe les débordements internes */
  position: relative;
  overflow: hidden;
}

.mika-prix30s__step h3{
  color:#fff;
}

/* textes d'aide */
.mika-hint,
.mika-prix30s__step p{
  margin: 6px 0 12px;
  color: rgba(255,255,255,.72);
  opacity: 1;
}

/* =========================
   STEP 1 - SCENARIO CARDS
========================= */
.mika-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  align-items: stretch;
  min-width:0;
}
@media (min-width: 780px){
  .mika-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.mika-card{
  position: relative;
  text-align:left;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:14px;
  cursor:pointer;

  display:flex;
  flex-direction:column;
  gap:10px;

  /* visuel "tappable" subtil */
  box-shadow:
    0 10px 22px rgba(0,0,0,.10),
    0 0 0 1px rgba(242,194,2,.08);
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
}

/* IMPORTANT: reset marges internes (Divi injecte parfois) */
.mika-card *{
  margin:0 !important;
  padding:0 !important;
}

/* texte noir (évite bleu mobile) */
.mika-card,
.mika-card__title,
.mika-card__desc,
.mika-card a,
.mika-card a:visited{
  color: var(--mika-dark) !important;
  text-decoration:none !important;
}

/* titre / desc */
.mika-card__title{
  font-weight:900;
  font-size:13px;
  line-height:1.15;
}
.mika-card__desc{
  font-size:12px;
  line-height:1.35;
  opacity:.78;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* chevron */
.mika-card::after{
  content:"›";
  position:absolute;
  top:10px;
  right:12px;
  color: rgba(0,0,0,.28);
  font-size:22px;
  line-height:1;
}

/* hover / focus */
.mika-card:hover,
.mika-card:focus-visible{
  border-color: rgba(242,194,2,.55);
  box-shadow:
    0 14px 30px rgba(0,0,0,.14),
    0 0 0 3px rgba(242,194,2,.18);
  transform: translateY(-1px);
  outline:none;
}
.mika-card:hover::after,
.mika-card:focus-visible::after{
  color: rgba(242,194,2,.85);
}

/* active / selected */
.mika-card:active{
  transform: translateY(0) scale(.99);
}
.mika-card.is-selected{
  border-color: rgba(242,194,2,.9);
  box-shadow:
    0 14px 30px rgba(0,0,0,.14),
    0 0 0 3px rgba(242,194,2,.25);
}

/* uniform height mobile (optionnel mais tu le voulais) */
@media (max-width: 780px){
  .mika-card{ min-height: 90px; }
}

/* =========================
   STEP 2 - QUESTIONS (cards, no radios)
========================= */
.mika-q{ margin: 12px 0 18px; }
.mika-q__label{
  font-weight:950;
  margin: 0 0 10px;
  color: rgba(255,255,255,.72);
}
.mika-q__opts{
  display:grid;
  gap:10px;
  min-width:0;
}

/* hide radio */
.mika-opt input{ display:none; }

/* option as card */
.mika-opt{
  display:flex;
  align-items:center;
  border-radius:14px;
  padding:14px;
  cursor:pointer;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#fff;

  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.mika-opt:hover{
  border-color: rgba(242,194,2,.55);
  box-shadow: 0 0 0 3px rgba(242,194,2,.12);
}
.mika-opt:active{ transform: scale(.99); }

/* selected (modern browsers) */
.mika-opt:has(input:checked){
  border-color: var(--mika-yellow);
  background: rgba(242,194,2,.10);
  box-shadow: 0 0 0 3px rgba(242,194,2,.18);
}

/* fallback si :has pas supporté -> tu peux aussi ajouter .is-selected en JS */
.mika-opt.is-selected{
  border-color: var(--mika-yellow);
  background: rgba(242,194,2,.10);
  box-shadow: 0 0 0 3px rgba(242,194,2,.18);
}

/* =========================
   BUTTONS / FORMS
========================= */
.mika-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
}

.mika-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:12px;
  border:0;
  background: var(--mika-yellow);
  color:#1b1b1b;
  font-weight:950;
  cursor:pointer;
  text-decoration:none;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}
.mika-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}

/* input city */
.mika-field{ position:relative; }
.mika-city{
  width:100%;
  padding:12px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color:#fff;
  outline:none;
  max-width:100%;
}
.mika-city::placeholder{ color: rgba(255,255,255,.55); }

.mika-suggest{
  position:absolute;
  z-index:20;
  left:0; right:0;
  margin-top:6px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  overflow:hidden;
  box-shadow: var(--mika-shadow);
}
.mika-suggest__item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  background:#fff;
  border:0;
  cursor:pointer;
}
.mika-suggest__item:hover{ background: rgba(242,194,2,.12); }

/* price box */
.mika-pricebox{
  margin-top:14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:14px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
  max-width:100%;
}
.mika-price{ font-size:28px; font-weight:950; color:#fff; }
.mika-price-note{ margin-top:6px; opacity:.80; color: rgba(255,255,255,.72); }

.mika-legal{ margin-top:12px; opacity:.65; font-size:13px; color: rgba(255,255,255,.72); }

/* info assurance */
.mika-info{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  background: rgba(242,194,2,.12);
  border: 1px solid rgba(242,194,2,.30);
  font-weight:800;
  color:#fff;
}

/* =========================
   ACCESSIBILITY / FOCUS CLEAN
========================= */
.mika-card:focus,
.mika-card:focus-visible,
.mika-opt:focus,
.mika-opt:focus-visible{
  outline:none !important;
}

@media (max-width: 520px){
  .mika-q{ margin: 10px 0 14px; }
  .mika-q__label{ margin-bottom: 8px; font-size: 22px; line-height: 1.15; } /* ajuste si besoin */
  .mika-q__opts{ gap: 10px; }

  .mika-opt{
    padding: 12px 14px;
    border-radius: 16px;
  }

  .mika-opt span{
    font-size: 22px;
    line-height: 1.15;
  }

  .mika-actions{ margin-top: 14px; }
}

.mika-btn.mika-back{
  background: transparent !important;
  color: var(--mika-yellow) !important;
  border: 2px solid var(--mika-yellow) !important;
  box-shadow: none !important;
}

.mika-btn.mika-back:hover{
  background: rgba(242,194,2,.10) !important;
}

.mika-btn.mika-back:active{
  transform: scale(.99);
}

/* Bouton secondaire "Recommencer" */
.mika-btn.mika-restart{
  background: transparent !important;
  color: var(--mika-yellow) !important;
  border: 2px solid var(--mika-yellow) !important;
  box-shadow: none !important;
}

.mika-btn.mika-restart:hover{
  background: rgba(242,194,2,.10) !important;
}

.mika-btn.mika-restart:active{
  transform: scale(.99);
}

/* === Step 3: chips + search === */
.mika-citychips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 0 0 12px;
}

.mika-chip{
  appearance:none;
  border: 1px solid rgba(242,194,2,.35);
  background: rgba(242,194,2,.10);
  color: #fff;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
}

.mika-chip:hover{
  border-color: rgba(242,194,2,.65);
  box-shadow: 0 0 0 3px rgba(242,194,2,.12);
}

.mika-chip:active{ transform: scale(.99); }

/* Chip spéciale géoloc */
.mika-chip--geo{
  border-style: dashed;
  background: rgba(242,194,2,.06);
}

.mika-chip--geo.is-loading{
  opacity: .85;
}

.mika-chip--geo.is-loading::after{
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.95);
  animation: mikaSpin .9s linear infinite;
  vertical-align: -2px;
}

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

/* ville sélectionnée (feedback clair) */
.mika-chip.is-selected{
  background: var(--mika-yellow);
  border-color: var(--mika-yellow);
  color: #1b1b1b;
  box-shadow: 0 0 0 3px rgba(242,194,2,.18);
}

.mika-city-selected{
  margin-top: 10px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
}

/* Input ville sur fond dark */
.mika-city{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
}
.mika-city::placeholder{ color: rgba(255,255,255,.55); }

/* Suggestions sur fond dark */
.mika-suggest{
  background: #141414;
  border: 1px solid rgba(255,255,255,.14);
}

.mika-suggest__item{
  background: transparent;
  color: #fff;
  padding: 12px 12px;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mika-suggest__item:hover{
  background: rgba(242,194,2,.10);
}

/* Rappel calcul au-dessus du prix */
.mika-price-context{
  font-size: 14px;
  opacity: .9;
  margin-bottom: 6px;
}

/* Astérisque collée au prix */
.mika-price__asterisk{
  font-size: .75em;
  vertical-align: super;
  margin-left: 3px;
}

/* Assurance plus petit */
.mika-info{
  font-size: 13px;
  line-height: 1.35;
}

/* Ligne disponibilité + avatar */
.mika-availability{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-weight: 700;
}

.mika-availability__avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #F2B802;
  /* si tu veux y mettre ton logo plus tard :
     background: url('/wp-content/uploads/.../logo.png') center/cover no-repeat;
  */
}

/* CTA : recommencer à gauche, appeler à droite */
.mika-actions--cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mika-actions--cta .mika-call{
  margin-left: auto;
}

/* Bouton recommencer en secondary */
.mika-actions--cta .mika-restart{
  background: #000;
  border: 2px solid #F2B802;
  color: #F2B802;
}

.mika-actions--cta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.mika-actions--cta .mika-btn,
.mika-actions--cta a.mika-btn{
  width: 100%;
  box-sizing: border-box;
}

.mika-actions--cta .mika-restart{ justify-self: start; }
.mika-actions--cta .mika-call{ justify-self: end; }

.mika-boost{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(242,184,2,.55);
  background: rgba(242,184,2,.08);
}

.mika-boost__avatar{
  width:44px;height:44px;border-radius:999px;
  background:#F2B802;
  /* option : mettre ton logo en image */
  /* background: url('/wp-content/uploads/.../logo-mika.png') center/cover no-repeat; */
}

.mika-boost__title{
  font-weight: 800;
  font-size: 16px;
  color: #fff;
}

.mika-boost__txt{
  font-size: 13px;
  opacity: .9;
}

.mika-warning{
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

.mika-warning__title{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 6px;
}

.mika-warning__txt{
  font-size: 13px;
  opacity: .9;
  line-height: 1.35;
}


.mika-price-context{
  margin-bottom: 10px;
}

.mika-calc__row{
  font-size: 13px;
  line-height: 1.25;
  opacity: .95;
}

.mika-calc__k{
  color: #F2B802;
  font-weight: 800;
  margin-right: 6px;
}

.mika-calc__v{
  color: #fff;
  font-weight: 700;
}



.mika-city-top{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
}

.mika-city-search input[type="search"]{
  width:100%;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(242,184,2,.75);
  background: rgba(255,255,255,.04);
  color:#fff;
  box-sizing:border-box;
}

.mika-city-hint{
  margin-top:8px;
  font-size:12px;
  opacity:.7;
}

.mika-city-suggest{
  margin-top:10px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(242,184,2,.45);
  background: rgba(0,0,0,.55);
}

.mika-suggest-item{
  display:block;
  width:100%;
  text-align:left;
  padding:12px 14px;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mika-suggest-item:last-child{ border-bottom:0; }
.mika-suggest-item:hover{ background: rgba(242,184,2,.10); }


/* =========================
   STEP 3 - RESULT (lisibilité)
========================= */

/* résumé sous forme de "chips" */
.mika-summaryline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.mika-summarypill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color:#EDEDED;
  font-size:12px;
  line-height:1;
}

/* Ligne "Ville : X (modifier)" */
.mika-result-cityline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 8px 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(242,184,2,.35);
  background: rgba(255,255,255,.04);
  color:#EDEDED;
}
.mika-city-edit{
  appearance:none;
  border: 2px solid #F2B802;
  background: transparent;
  color: #F2B802;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
}
.mika-city-edit:hover{
  background: rgba(242,184,2,.10);
}

/* Prix ultra lisible */
.mika-price{
  font-size: clamp(42px, 6vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.mika-price-note{
  color:#BDBDBD;
  opacity: 1;
}

/* Contraste boost / warning */
.mika-boost__txt,
.mika-warning__txt{
  color:#BDBDBD;
  opacity: 1;
}
.mika-muted{
  color:#BDBDBD;
  font-weight:700;
  margin-left:6px;
}

/* Avatar moins envahissant */
.mika-boost__avatar{
  width:28px;
  height:28px;
}

/* Accordéon infos utiles */
.mika-accordion{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
.mika-accordion > summary{
  cursor:pointer;
  padding: 14px 14px;
  font-weight: 900;
  color:#fff;
  list-style:none;
}
.mika-accordion > summary::-webkit-details-marker{ display:none; }
.mika-accordion > summary::after{
  content:"+";
  float:right;
  color: rgba(242,184,2,.95);
  font-size: 18px;
  line-height: 1;
}
.mika-accordion[open] > summary::after{
  content:"–";
}
.mika-accordion__body{
  padding: 0 14px 14px;
}
.mika-accordion__txt{
  color:#EDEDED;
  line-height: 1.45;
}
.mika-accordion__txt strong{
  color:#fff;
}
.mika-accordion__body .mika-info,
.mika-accordion__body .mika-warning{
  margin-top: 10px;
}

/* Variantes : assurance (positif) / transparence (warning) */
.mika-accordion.mika-accordion--insurance{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.08);
}
.mika-accordion.mika-accordion--insurance > summary::after{
  color: rgba(34,197,94,.95);
}

.mika-accordion.mika-accordion--transparency{
  border-color: rgba(242,184,2,.35);
  background: rgba(242,184,2,.06);
}
.mika-accordion.mika-accordion--transparency > summary::after{
  color: rgba(242,184,2,.95);
}


/* Référence simulation (preuve) */
.mika-simref{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:#BDBDBD;
  font-size:13px;
}
.mika-simref__value{
  color:#EDEDED;
  letter-spacing: .02em;
}
.mika-simref__copy{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#EDEDED;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor:pointer;
}
.mika-simref__copy:hover{
  background: rgba(255,255,255,.10);
}

.mika-allinclusive{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
   opacity: 0.7;
    color: white;
}
.mika-allinclusive__sub{
  margin-top:6px;
  font-size:12px;
  opacity:.85;
}

/* ✅ Fermé : bloc plus lisible (desktop + mobile) */
.mika-is-closed .mika-prix30s__closed{
  opacity: 1 !important;
  color: rgba(255,255,255,.92) !important;

  /* petit encart pour “faire ressortir” */
  background: rgba(242,194,2,.08);
  border: 1px solid rgba(242,194,2,.25);
  border-radius: 16px;
  padding: 18px 18px;
  max-width: 900px;
  margin: 18px auto 0;
}

/* Titre (si c’est un h2/h3 ou un div) */
.mika-is-closed .mika-prix30s__closed h1,
.mika-is-closed .mika-prix30s__closed h2,
.mika-is-closed .mika-prix30s__closed h3,
.mika-is-closed .mika-prix30s__closed-title{
  color: #F2C202 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

/* Message */
.mika-is-closed .mika-prix30s__closed-msg{
  color: rgba(255,255,255,.88) !important;
  opacity: 1 !important;
  font-size: 18px;
  line-height: 1.45;
}

/* Mobile : un poil plus gros */
@media (max-width: 767px){
  .mika-is-closed .mika-prix30s__closed-msg{
    font-size: 16px;
  }
}