/* ============================================================
   MISE EN LOCATION — Styles spécifiques
   Complète style.css et gestion.css sans écraser les composants globaux.
   ============================================================ */

/* ============================================================
   SECTION 2 — PAIN / SOLUTION (3 cartes statiques, pas de toggle)
   ============================================================ */
.pain-solution-mel {
  padding: 0;
}

/* ============================================================
   SECTION 3 — FORMULES MEL
   ============================================================ */
.formules-mel {
  padding: 7rem 0 5rem;
}

.formules-mel__header {
  text-align: center;
  margin-bottom: 4rem;
}

.formules-mel__subtitle {
  font-size: 1.8rem;
  color: rgba(4, 96, 83, 0.65);
  text-align: center;
  max-width: 62rem;
  margin: 0.8rem auto 0;
  line-height: 1.5;
}

.formules-mel__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: stretch;
  margin-bottom: 3.2rem;
}

/* Hauteur égale quand aucune carte n'est retournée
   IMPORTANT : pas de display:flex sur fg-flip-inner — cela écraserait transform-style:preserve-3d */
.formules-mel__tabs .formule-tab.fg-flip-card {
  display: flex;
  flex-direction: column;
}
.formules-mel__tabs .formule-tab.fg-flip-card .fg-flip-inner {
  flex: 1 1 auto;
}
.formules-mel__tabs .formule-tab.fg-flip-card .fg-flip-front {
  height: 100%;
  box-sizing: border-box;
}

/* Quand une carte est ouverte (.fg-expanded), chaque carte reprend sa hauteur naturelle */
.formules-mel__tabs:has(.fg-expanded) {
  align-items: flex-start;
}

/* ---- Badge pill identité pack recto — variantes MEL ---- */
.fg-tab-pack-badge--mel-classique {
  color: #C15A9A;
  background: rgba(237, 166, 205, 0.12);
  border-color: rgba(237, 166, 205, 0.55);
}
.fg-tab-pack-badge--mel-coloc {
  color: #C15A9A;
  background: rgba(237, 166, 205, 0.12);
  border-color: rgba(237, 166, 205, 0.55);
}

/* ---- Prix variantes MEL ---- */
.formule-tab__price--mel-classique { color: #046053; }
.formule-tab__price--mel-coloc     { color: #046053; }

/* ---- Badge coin FLEXIBLE (carte colocation) ---- */
.formule-tab__badge--flexible {
  background: linear-gradient(180deg, #DA7BB8 0%, #C15A9A 100%);
  color: #fff;
}

/* ---- Badge en verso (fg-pack-badge) ---- */
.fg-pack-badge--mel-classique {
  color: #C15A9A;
  background: rgba(237, 166, 205, 0.12);
  border-color: rgba(237, 166, 205, 0.40);
}
.fg-pack-badge--mel-coloc {
  color: #C15A9A;
  background: rgba(237, 166, 205, 0.12);
  border-color: rgba(237, 166, 205, 0.40);
}

/* ---- Description recto — vert pin gras ---- */
.fg-mel-recto-desc {
  font-size: 1.25rem;
  font-weight: 700;
  color: #046053;
  margin: 0.4rem 0 0;
  line-height: 1.45;
}

/* ---- CTA recto → verso — orange / beige / flèche rayonnante ---- */
.fg-mel-flip-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.2rem;
  padding: 0.65rem 1.3rem 0.65rem 1.4rem;
  background: #ff7348;
  color: rgba(247, 240, 234, 0.95);
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: 3rem;
  letter-spacing: 0.01em;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 3px 10px rgba(255, 115, 72, 0.3);
}
.formule-tab:not(.flipped):hover .fg-mel-flip-cta {
  background: #e8582a;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(255, 115, 72, 0.42);
}

/* Wrapper SVG flèche avec effet radiatif */
.fg-mel-cta-arrow-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}
.fg-mel-cta-arrow-wrap::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(255, 245, 228, 0.18);
  animation: fg-arrow-radiate 1.9s ease-out infinite;
}
.fg-mel-cta-arrow-wrap svg {
  position: relative;
  z-index: 1;
  animation: fg-arrow-slide 1.9s ease-in-out infinite;
}

@keyframes fg-arrow-slide {
  0%, 100% { transform: translateX(0);    opacity: 1;   }
  55%       { transform: translateX(4px); opacity: 0.6; }
  70%       { transform: translateX(0);   opacity: 1;   }
}
@keyframes fg-arrow-radiate {
  0%   { transform: scale(1);   opacity: 0.55; }
  60%  { transform: scale(2.2); opacity: 0;    }
  100% { transform: scale(2.2); opacity: 0;    }
}

/* ---- Verso : prix hero — rose MEL ---- */
[data-fg-pack="mel-classique"] .fg-back-price-hero,
[data-fg-pack="mel-coloc"] .fg-back-price-hero { color: #C15A9A; }
.fg-back-price-unit--mel { font-size: 2rem; font-weight: 500; }

/* ---- Mention option dans item liste ---- */
.fg-li-option {
  font-style: normal;
  font-size: 0.9em;
  color: rgba(4, 96, 83, 0.5);
}

/* ---- Badge "+" nouveauté dans item liste ---- */
.fg-li-new-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.fg-li-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #C15A9A;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

/* ---- Verso : tagline "vous ne payez rien..." ---- */
.fg-back-tagline {
  font-size: 1.35rem;
  font-weight: 700;
  color: #C15A9A;
  margin-bottom: 1.6rem;
  line-height: 1.4;
}
.fg-back-tagline--coloc { color: #C15A9A; }

/* ---- Badge info button (?) avec pulse ---- */
.fg-badge-info-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #f09438;
  border: 1.5px solid rgba(240,148,56,0.7);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  vertical-align: super;
  margin-left: 0.25rem;
  transition: background 0.15s, transform 0.15s;
}
.fg-badge-info-btn:hover {
  background: #e0832a;
  transform: scale(1.12);
}

/* Fix label coloc : évite la superposition avec le badge sur mobile */
#panelColoc .cp-calc-label {
  white-space: normal;
  text-align: center;
  max-width: calc(100% - 9.5rem);
  line-height: 1.35;
}
.fg-badge-info-btn::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(240,148,56,0.75);
  animation: fg-badge-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes fg-badge-pulse {
  0%   { opacity: 0.9; transform: scale(1); }
  65%  { opacity: 0;   transform: scale(2.2); }
  100% { opacity: 0;   transform: scale(2.2); }
}

/* ---- Popup économies réalisées ---- */
.fg-savings-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,20,18,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.fg-savings-popup-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.fg-savings-popup {
  background: #fff;
  border-radius: 1.6rem;
  padding: 3rem 3.2rem 2.8rem;
  max-width: 52rem;
  width: 100%;
  position: relative;
  transform: translateY(14px);
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.fg-savings-popup-overlay.is-open .fg-savings-popup {
  transform: translateY(0);
}
.fg-savings-popup__close {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: rgba(4,96,83,0.45);
  cursor: pointer;
  line-height: 1;
  padding: 0.4rem;
  transition: color 0.15s;
}
.fg-savings-popup__close:hover { color: #046053; }
.fg-savings-popup__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #046053;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 1.4rem;
}
.fg-savings-popup__body {
  font-size: 1.5rem;
  color: rgba(4,20,18,0.78);
  line-height: 1.68;
}
.fg-savings-popup__body strong {
  color: #046053;
  font-weight: 700;
}
.fg-savings-popup__asterisk {
  display: block;
  margin-top: 1.2rem;
  font-size: 1.15rem;
  color: rgba(4,20,18,0.42);
  font-style: italic;
  line-height: 1.5;
}

/* ---- Ligne comparateur "Non proposé" ---- */
.cp-calc-row--disabled {
  opacity: 0.38;
  filter: grayscale(0.7);
  pointer-events: none;
}
.cp-calc-row-price--na {
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 500;
  color: rgba(4,30,25,0.5);
  white-space: nowrap;
}

/* ---- FAQ pink variant ---- */
.faq-bloc.pink .question { color: #fff !important; }
.faq-bloc.pink .question-bloc.open .question { color: #046053 !important; }

/* ---- Onglets MEL / Colocation ---- */
.cp-mode-tabs {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  margin-bottom: 2.4rem;
}
.cp-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  border-radius: 3rem;
  border: 2px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.65);
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cp-mode-tab:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.42);
  color: #fff;
}
.cp-mode-tab--active {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.58);
  color: #fff;
}

/* ---- Inputs doubles (surface + loyer) ---- */
.cp-calc-dual-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3.2rem;
  align-items: start;
}

/* Label direct dans .cp-calc-input-col : même hauteur minimale pour garantir l'alignement */
.cp-calc-input-col > .cp-calc-label {
  display: block;
  min-height: 3.6rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ---- CTA "Voir la tarification détaillée" dans le verso carte MEL ---- */
/* Override le display:none mobile de style.css (réservé aux cartes de la home) */
.fg-mel-tarif-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
}
/* Icône Keymojo rose (rose dans rose) sur fond transparent */
.fg-mel-tarif-btn::before {
  content: '';
  width: 15px;
  height: 17px;
  display: block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='17' viewBox='0 0 15 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5975 6.51984C12.7944 4.17128 10.7593 2.49784 8.28607 2.15118L8.28641 2.15236C4.9195 1.68326 1.71869 3.90531 0.999497 7.21117C0.62138 8.94735 0.956403 10.7186 1.94297 12.1989C2.93008 13.6792 4.43892 14.6768 6.19152 15.0072C8.40858 15.4251 10.6514 14.6941 12.1916 13.0523C13.0268 12.0477 14.4773 9.33466 13.5975 6.51984Z' stroke='%23C15A9A' stroke-miterlimit='10'/%3E%3Cpath d='M6.70127 12.0507C4.80497 11.6932 3.55277 9.8592 3.91026 7.96291C4.26776 6.06661 6.10179 4.81441 7.99809 5.1719C9.89438 5.5294 11.1466 7.36343 10.7891 9.25973C10.4316 11.156 8.59756 12.4082 6.70127 12.0507Z' fill='%23C15A9A'/%3E%3C%2Fsvg%3E");
}

/* ---- CTA "Choisir Mise en location" — rose/beige (override #ff7348 de .fg-cta) ---- */
.fg-back-cta-row .pricing-cta--mel.fg-cta {
  background: #C15A9A;
}
.fg-back-cta-row .pricing-cta--mel.fg-cta:hover {
  background: #a84886;
}

/* ---- Modale colocation : ligne total + badge "Forfait fixe" ---- */
.mel-modal__total-row td {
  border-top: 2px solid var(--color-rose, #EDA6CD);
  background: rgba(237, 166, 205, 0.08);
  font-weight: 700;
}
.mel-modal__fixed-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.6rem;
  background: rgba(193, 90, 154, 0.12);
  color: #C15A9A;
  border: 1px solid rgba(193, 90, 154, 0.35);
  border-radius: 2rem;
  font-size: 1.05rem;
  font-weight: 600;
  vertical-align: middle;
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  .formules-mel__tabs {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .pain-solution-mel {
    padding: 0;
  }
  .formules-mel {
    padding: 5rem 0 4rem;
  }
  .cp-mode-tabs {
    flex-direction: column;
    align-items: stretch;
  }
  .cp-mode-tab {
    justify-content: center;
  }
  .cp-calc-dual-inputs {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ============================================================
   SECTION 7 — Formules gestion en grille 3 colonnes fixes dans le panel MEL
   Sur la page gestion autonome, fg-full-width (flex 100%) est acceptable.
   Ici le panel est secondaire : la carte ouverte doit rester dans sa colonne
   et n'occuper que l'espace vertical — pas déplacer les deux voisines.
   On bascule le container en CSS grid ; flex: 1 1 100% n'a aucun effet
   sur un grid item, la carte s'étire donc uniquement en hauteur.
   ============================================================ */
#mel-panel-gestion .formules-gestion__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

/* Annule les propriétés flex/max-width de fg-full-width dans ce contexte grid */
#mel-panel-gestion .formule-tab.fg-full-width {
  grid-column: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 1023px) {
  #mel-panel-gestion .formules-gestion__tabs {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 639px) {
  #mel-panel-gestion .formules-gestion__tabs {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SECTION 7 — Panneau rénovation : cards restent dans leurs colonnes à l'expansion
   Avec seulement 2 cartes, svc-full-width (grid-column: 1/-1) crée une
   demi-rangée vide à côté de la carte compacte. On annule ce comportement :
   la carte ouverte reste dans sa colonne et s'étire uniquement en hauteur,
   exactement comme les cartes de gestion dans #mel-panel-gestion.
   ============================================================ */
#mel-panel-gestion .pricing-services-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px) {
  #mel-panel-gestion .pricing-services-grid {
    grid-template-columns: 1fr;
  }
}

#mel-panel-renovation .pricing-services-grid {
  align-items: start;
}
#mel-panel-renovation .pricing-services-grid .svc-flip-card.svc-full-width {
  grid-column: auto;
}

/* ============================================================
   SECTION 7 — pc-sel-grid : positionnement explicite des sélecteurs
   Les IDs utilisés sur cette page ("mel-panel-*") ne matchent pas les
   sélecteurs de gestion.css ("panel-location"/"panel-renovation"), ce
   qui casse le placement grid en auto-flow. On redéfinit ici.
   ============================================================ */
.pc-sel-card[data-pc-panel="mel-panel-gestion"]    { grid-column: 1; grid-row: 1; }
.pc-sel-card[data-pc-panel="mel-panel-renovation"] { grid-column: 2; grid-row: 1; }
#mel-panel-gestion,
#mel-panel-renovation                              { grid-column: 1 / -1; grid-row: 2; }

@media (max-width: 767px) {
  .pc-sel-card[data-pc-panel="mel-panel-gestion"]    { grid-column: 1; grid-row: 1; }
  #mel-panel-gestion                                 { grid-column: 1; grid-row: 2; }
  .pc-sel-card[data-pc-panel="mel-panel-renovation"] { grid-column: 1; grid-row: 3; }
  #mel-panel-renovation                             { grid-column: 1; grid-row: 4; }
}

/* ============================================================
   SECTION 4 — COMPARATEUR MEL
   ============================================================ */
.mel-comparateur {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (min-width: 768px) {
  .mel-comparateur {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
}