/* ═══════════════════════════════════════════════════════════════
   simulateur.css
   Simulateur de tarifs – Marina Baie des Anges
   Utilise les variables :root existantes du site :
     --bleu: #001e61
     --jaune: #fec01e
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables locales (complètent le :root du site) ── */
.simu-card {
  --simu-bleu-clair:  #0a3080;
  --simu-bleu-pale:   #e8edf7;
  --simu-gris:        #f4f6fb;
  --simu-blanc:       #ffffff;
  --simu-texte:       #1a1a2e;
  --simu-ombre:       0 8px 40px rgba(0, 30, 97, .13);
  --simu-radius:      16px;
  --simu-transition:  .28s cubic-bezier(.4, 0, .2, 1);
  --simu-font-body:   'Segoe', sans-serif;
  --simu-font-serif:  'Segoe', sans-serif;
}

/* ── Reset ciblé ────────────────────────────────────────────── */
.simu-card *,
.simu-card *::before,
.simu-card *::after {
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════ */
.simu-card {
  font-family: var(--simu-font-body);
  color: var(--simu-texte);
  background: var(--simu-blanc);
  border-radius: var(--simu-radius);
  box-shadow: var(--simu-ombre);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

/* ─── Header ─────────────────────────────────────────────────── */
.simu-card__header {
  background: var(--bleu) url(../media/images/deco/logotype-w.svg) no-repeat 103% center; background-size: auto 85%;
  padding: 36px 40px 50px;
  position: relative;
  overflow: hidden;
}
.simu-card__header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 32px;
  background: var(--simu-blanc);
  clip-path: ellipse(55% 100% at 50% 100%);
}
/*
.simu-card__header::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(254, 192, 30, .08);
  pointer-events: none;
}*/

.simu-card__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.simu-card__logo-icon {
  width: 44px; height: 44px;
  background: var(--jaune);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.simu-card__logo-icon svg {
  width: 24px; height: 24px;
  fill: var(--bleu);
}
.simu-card__logo-text {
  font-family: var(--simu-font-serif);
  color: var(--simu-blanc);
  font-size: 1.05rem;
  line-height: 1.25;
}
.simu-card__logo-text span { color: var(--jaune); }

.simu-card__title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;
}
.simu-card__subtitle {
  color: rgba(255, 255, 255, .6);
  font-size: .875rem;
  font-weight: 300;
  letter-spacing: .02em;
  margin: 0;
}

/* ─── Body ───────────────────────────────────────────────────── */
.simu-card__body {
  padding: 36px 40px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION LABEL
   ═══════════════════════════════════════════════════════════════ */
.simu-section-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bleu);
  opacity: .65;
  margin: 0 0 14px;
}
.simu-section-label__note {
  text-transform: none;
  letter-spacing: 0;
  font-size: .75rem;
  font-weight: 300;
  color: #888;
  opacity: 1;
}
.simu-section-label__sep {
  margin: 0 4px;
  opacity: .4;
}

/* ═══════════════════════════════════════════════════════════════
   TYPE DE COQUE
   ═══════════════════════════════════════════════════════════════ */
.simu-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}

.simu-type-btn {
  border: 2px solid var(--simu-bleu-pale);
  border-radius: 12px;
  padding: 16px 12px;
  cursor: pointer;
  background: var(--simu-blanc);
  transition: var(--simu-transition);
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  font-family: var(--simu-font-body);
  text-align: left;
}
.simu-type-btn:hover {
  border-color: var(--bleu);
  background: var(--simu-gris);
}
.simu-type-btn--active,
.simu-type-btn[aria-pressed="true"] {
  border-color: var(--bleu);
  background: var(--simu-bleu-pale);
}
.simu-type-btn--active::after,
.simu-type-btn[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  top: 10px; right: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--jaune);
}

.simu-type-btn__icon {
  width: 40px; height: 40px;
  background: var(--simu-bleu-pale);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: var(--simu-transition);
}
.simu-type-btn--active .simu-type-btn__icon,
.simu-type-btn[aria-pressed="true"] .simu-type-btn__icon {
  background: var(--bleu);
}
.simu-type-btn__icon svg {
  width: 22px; height: 22px;
  fill: var(--bleu);
  transition: var(--simu-transition);
}
.simu-type-btn--active .simu-type-btn__icon svg,
.simu-type-btn[aria-pressed="true"] .simu-type-btn__icon svg {
  fill: var(--simu-blanc);
}

.simu-type-btn__label {
  display: block;
  font-weight: 500;
  font-size: .9rem;
  line-height: 1.3;
}
.simu-type-btn__sub {
  display: block;
  font-size: .75rem;
  color: #888;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   DIMENSIONS
   ═══════════════════════════════════════════════════════════════ */
.simu-dim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.simu-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.simu-field__label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--bleu);
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.simu-field__unit {
  font-weight: 300;
  color: #888;
  font-size: .75rem;
}
.simu-field__input {
  border: 2px solid var(--simu-bleu-pale) !important;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: var(--simu-font-body);
  color: var(--simu-texte);
  outline: none;
  transition: var(--simu-transition);
  -moz-appearance: textfield;
  appearance: textfield;
  width: 100%;
}
.simu-field__input::-webkit-outer-spin-button,
.simu-field__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.simu-field__input:focus {
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(0, 30, 97, .08);
}
.simu-field__input--error { border-color: #cc0033; }

.simu-field__err {
  font-size: .75rem;
  color: #cc0033;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   SAISON PILLS
   ═══════════════════════════════════════════════════════════════ */
.simu-saison-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.simu-pill {
  padding: 8px 16px;
  border-radius: 50px;
  border: 2px solid var(--simu-bleu-pale);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--simu-blanc);
  transition: var(--simu-transition);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--simu-texte);
  font-family: var(--simu-font-body);
}
.simu-pill:hover { border-color: var(--bleu); }
.simu-pill--active,
.simu-pill[aria-pressed="true"] {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--simu-blanc);
}

.simu-pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.simu-pill__dot--hs { background: #f5a623; }
.simu-pill__dot--is { background: #27ae60; }
.simu-pill__dot--ls { background: #2980b9; }

.simu-pill__dates {
  font-weight: 300;
  opacity: .7;
  font-size: .78rem;
}

/* ═══════════════════════════════════════════════════════════════
   BOUTON CALCUL
   ═══════════════════════════════════════════════════════════════ */
.simu-btn-calcul {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  background: var(--jaune);
  color: var(--bleu);
  font-family: var(--simu-font-body);
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: var(--simu-transition);
  position: relative;
  overflow: hidden;
}
.simu-btn-calcul:hover {

  background: #efefef;
  color: var(--bleu);
  
}
.simu-btn-calcul::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: var(--simu-transition);
}
.simu-btn-calcul:hover::after  { background: rgba(255, 255, 255, .08); }
.simu-btn-calcul:active        { transform: scale(.99); }
.simu-btn-calcul:disabled      { opacity: .7; cursor: not-allowed; }

.simu-btn-calcul svg {
  width: 18px; height: 18px;
  fill: var(--bleu);
  flex-shrink: 0;
}

/* Spinner */
.simu-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: var(--simu-blanc);
  border-radius: 50%;
  animation: simu-spin .6s linear infinite;
  flex-shrink: 0;
}
@keyframes simu-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   ALERTES
   ═══════════════════════════════════════════════════════════════ */
.simu-alerte {
  margin-top: 20px;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.simu-alerte--error {
  background: #fff5f5;
  border: 1.5px solid #fbbcbc;
}

.simu-alerte__icon { flex-shrink: 0; margin-top: 1px; }
.simu-alerte__icon svg { width: 20px; height: 20px; fill: #cc0033; }

.simu-alerte__titre {
  font-weight: 600;
  font-size: .9rem;
  margin: 0 0 3px;
  color: #a00020;
}
.simu-alerte__texte {
  font-size: .83rem;
  color: #555;
  line-height: 1.55;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RÉSULTATS
   ═══════════════════════════════════════════════════════════════ */
.simu-resultats {
  margin-top: 28px;
}

/* En-tête résultat */
.simu-resultats__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--simu-bleu-pale);
}

.simu-resultats__badge {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
}
.simu-resultats__badge--mono  { background: var(--jaune); color: var(--bleu); }
.simu-resultats__badge--multi { background: var(--bleu);  color: var(--jaune); }

.simu-resultats__gabarit {
  font-size: .85rem;
  color: #666;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.simu-resultats__gabarit strong { color: var(--bleu); }
.simu-resultats__gabarit-sep {
  margin: 0 4px;
  opacity: .35;
}

/* Table escales */
.simu-res-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}
.simu-res-table thead tr {
  background: var(--bleu);
  color: var(--simu-blanc);
}
.simu-res-table th {
  padding: 10px 14px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: left;
}
.simu-res-table th:first-child { border-radius: 10px 0 0 0; }
.simu-res-table th:last-child  { border-radius: 0 10px 0 0; text-align: right; }

.simu-res-table td {
  padding: 11px 14px;
  font-size: .88rem;
  border-bottom: 1px solid var(--simu-bleu-pale);
  vertical-align: middle;
}
.simu-res-table td:last-child { text-align: right; }
.simu-res-table tbody tr:last-child td { border-bottom: none; }
.simu-res-table tbody tr:nth-child(even) { background: var(--simu-gris); }

/* Tags saison */
.simu-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.simu-tag--hs { background: #fff3cd; color: #7a5400; }
.simu-tag--is { background: #d8f3dc; color: #1a5c2a; }
.simu-tag--ls { background: #dce8ff; color: #1a3a8a; }

/* Label saison actif dans le titre */
.simu-saison-active-label {
  font-size: .7rem;
  letter-spacing: .08em;
  font-weight: 600;
  opacity: 1;
  color: var(--bleu);
}

/* Prix */
.simu-prix { font-weight: 600; color: var(--bleu); }

/* Annuel card */
.simu-annuel-card {
  margin-top: 16px;
  background: linear-gradient(135deg, var(--bleu) 0%, var(--simu-bleu-clair) 100%);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.simu-annuel-card__label {
  color: rgba(255, 255, 255, .75);
  font-size: .82rem;
  font-weight: 500;
  margin: 0 0 2px;
}
.simu-annuel-card__note {
  color: rgba(255, 255, 255, .45);
  font-size: .72rem;
  margin: 0;
}
.simu-annuel-card__prix {
  color: var(--jaune);
  font-family: var(--simu-font-serif);
  font-size: 1.9rem;
  font-weight: 700;
  white-space: nowrap;
  margin: 0;
}

/* Note légale */
.simu-note {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--simu-gris);
  border-radius: 10px;
  border-left: 3px solid var(--jaune);
}
.simu-note p {
  font-size: .78rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Tag taxe - couleur neutre distincte des saisons */
.simu-tag--taxe {
  background: #f0f0f0;
  color: #444;
}
 
/* Note entre parentheses (nb personnes) */
.simu-taxe-note {
  font-size: .75rem;
  font-weight: 300;
  color: #888;
  margin-left: 3px;
}
 
/* Ligne taxe : toujours visible (pas de simu-row-saison--xx),
   separation visuelle du reste du tableau */
.simu-row-taxe td {
  border-top: 2px solid var(--simu-bleu-pale);
  background: #fafbff;
  font-size: .85rem;
}
.simu-row-taxe .simu-prix {
  color: #555;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .simu-card__header,
  .simu-card__body  { padding: 24px 20px 50px; }
  .simu-type-grid   { grid-template-columns: 1fr; }
  .simu-dim-grid    { grid-template-columns: 1fr; }
  .simu-annuel-card { flex-direction: column; align-items: flex-start; }
  .simu-card__title { font-size: 1.4rem; }
  .simu-saison-pills { gap: 6px; }
  .simu-pill__dates  { display: none; }
}