
/* =========================
   SPÉCIFIQUE PAGE DEVIS / WIZARD
   (le reste vient de styles.css)
   ========================= */

/* Layout wizard */
.wrap{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.wrap{grid-template-columns:2fr 1fr}}
.panel{border:1px solid var(--stroke);border-radius:14px;background:#fff}
.panel header{padding:14px 16px;border-bottom:1px solid var(--stroke);font-weight:700}
.panel .body{padding:14px 16px}

/* Steps */
.steps{display:grid;gap:10px}
.step{display:none}
.step.active{display:block}

.cards{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:720px){.cards{grid-template-columns:repeat(2,1fr)}}

.card{
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:14px;
  cursor:pointer;
  position:relative;
}
.card h3{margin:0 0 6px}
.card small{color:#64748b}
.card.selected{outline:2px solid var(--brand);background:#fff7ed}

.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:12px}

/* Summary */
.summary h3{margin:0 0 8px}
.summary .row{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed var(--stroke)}
.summary .total{font-weight:800}
.muted{color:#64748b}
.hr{height:1px;background:var(--stroke);margin:10px 0}

/* Inputs */
.hide{display:none}
label{display:block;margin:8px 0 4px;font-size:14px}
select,
input[type="text"],
input[type="email"],
input[type="tel"]{
  width:100%;
  padding:10px;
  border:1px solid var(--stroke);
  border-radius:10px;
}

/* Iframe booking (si utilisé sur cette page) */
.booking{height:820px;border:0;width:100%}

/* =========================
   CARTES OPTIONS (addons / véhicules)
   ========================= */

/* Grilles */
.addons-cards,
.vehicle-cards{
  display:grid;
  gap:16px;
  margin:12px 0 8px;
}
@media(min-width:768px){
  .addons-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vehicle-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Base carte (réutilisée) */
.addon-card,
.vehicule-card{
  position:relative;
  display:block;
  padding:16px 16px 14px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(15,23,42,0.04);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease, background-color .2s ease;
}

/* Checkbox cachée (si tu en as) */
.addon-card input[type="checkbox"],
.vehicule-card input[type="checkbox"],
.addon-card input[type="radio"],
.vehicule-card input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Texte */
.addon-card h3,
.vehicule-card h3{margin:0 0 4px;font-size:.95rem}
.addon-card small,
.vehicule-card small{font-size:.84rem;color:#64748b}

/* Hover */
.addon-card:hover,
.vehicule-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(15,23,42,0.12);
  border-color:var(--brand);
  background-color:#fffaf3;
}

/* Selected / active */
.addon-card.active,
.vehicule-card.selected,
.vehicule-card.active{
  border-color:var(--brand);
  border-width:2px;
  background:#fff7eb;
  box-shadow:0 14px 28px rgba(255,122,0,0.25);
}

/* Badge prix (addons) */
.addon-price-badge,
.price-badge{
  position:absolute;
  top:10px;
  right:10px;
  background:var(--brand);
  color:#fff;
  padding:3px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
  pointer-events:none;
  z-index:5;
}

/* Step 2: cartes formules intérieur (classe existante chez toi) */
.step[data-step="2"] .only-interieur{
  position:relative;
  background:#fff;
  border-radius:14px;
  border:1px solid #e5e7eb;
  padding:16px 18px;
  box-shadow:0 4px 10px rgba(15,23,42,0.04);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.step[data-step="2"] .only-interieur[data-value="essentielle"]{background:#fff9f2}
.step[data-step="2"] .only-interieur:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(15,23,42,0.16);
  border-color:var(--brand);
  background-color:#fffaf3;
}
.step[data-step="2"] .only-interieur.selected{
  border-width:2px;
  border-color:var(--brand);
  box-shadow:0 16px 32px rgba(255,122,0,0.35);
  background-color:#fff7eb;
}
.step[data-step="2"] .only-interieur h3{margin:0 0 8px;font-size:1rem}
.step[data-step="2"] .only-interieur small{display:block;font-size:.86rem;line-height:1.5;color:#475569}

/* Accessibilité */
.visually-hidden{position:absolute;opacity:0;pointer-events:none;height:0;width:0}

/* Upsell animation */
.upsell{
  border:2px solid var(--brand);
  cursor:pointer;
  transform:translateY(6px);
  opacity:0;
  transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease;
  margin-bottom:12px;
}
.upsell.show{opacity:1;transform:translateY(0)}
.upsell:hover{box-shadow:0 10px 24px rgba(0,0,0,.10);transform:translateY(-2px)}
.upsell.highlight{animation:upsellPulse .6s ease}
@keyframes upsellPulse{
  0%{box-shadow:0 0 0 rgba(255,122,0,0)}
  60%{box-shadow:0 0 0 6px rgba(255,122,0,.18)}
  100%{box-shadow:0 0 0 rgba(255,122,0,0)}
}

/* Affichage conditionnel */
.only-pack{display:none}


.addon-title{
  display:block;
  font-size:16px;
  font-weight:700;
  margin:6px 0 4px;
}
/* Icône info */
.info-icon {
  margin-left: 6px;
  cursor: pointer;
  font-weight: bold;
  color: #ff7a00;
  transition: transform 0.15s ease;
}

.info-icon:hover {
  transform: scale(1.15);
}

/* Fond popup */
.info-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

/* Boîte info */
.info-box {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  animation: fadeUp 0.25s ease;
}

.info-box h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #ff7a00;
}

.info-box p {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.info-note {
  font-size: 13px;
  color: #666;
  font-style: italic;
  margin-top: 10px;
}

/* Bouton fermer */
.close-info {
  margin-top: 14px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: #ff7a00;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* Animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Lignes ajoutées dans la formule premium */
.premium-plus {
  position: relative;
  font-weight: 600;
  color: #222;
}

/* Icône + */
.premium-plus::before {
  content: "+";
  color: #ff7a00;
  font-weight: 800;
  margin-right: 6px;
}

/* Ligne très légèrement surlignée */
.formula-list .premium-plus {
  background: rgba(255, 122, 0, 0.06);
  padding: 6px 8px;
  border-radius: 8px;
}
