/* situation.css — Page 4 : SITUATION PROFESSIONNELLE ET FINANCIÈRE */

/* ===== Bloc principal "Vous / Votre conjoint" ===== */
.situation-pro-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-bottom:20px;
  font-size:.9rem;
  align-items:flex-start;
}

.bloc-situation-pro{
  flex:1 1 300px;
  border:1px solid #000;
  padding:10px 12px;
}

.bloc-situation-pro h3{
  margin:0 0 8px;
  font-size:.9rem;
}

.situation-pro-option{
  margin-bottom:4px;
}

.situation-pro-radio{
  display:flex;
  align-items:center;
  gap:8px;
}

.bloc-situation-pro input[type="radio"]{
  position:relative;
  top:-4px;
}

.situation-pro-extra{
  display:none;
  align-items:center;
  gap:6px;
  margin:2px 0 4px 26px;
}

.situation-pro-extra.is-visible{
  display:flex;
}

.situation-pro-extra span{
  white-space:nowrap;
}

.situation-pro-extra input{
  padding:3px 5px;
  font:inherit;
}

.situation-pro-extra-profession input{
  width:220px;
}

.situation-pro-date{
  width:110px;
  text-align:center;
}

.situation-pro-option-autre{
  min-height:26px;
}

.situation-pro-autre-wrapper{
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  width:220px;
  max-width:220px;
  overflow:hidden;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-6px);

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility 0s linear .14s;
}

.situation-pro-autre-wrapper.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility 0s;
}

.situation-pro-autre-input{
  width:100%;
  max-width:220px;
  padding:3px 5px;
  font:inherit;
}

.js-conjoint-dependent[hidden]{
  display:none !important;
}

/* ===== Ressources demandeur / conjoint ===== */
.situation-ressources{
  margin-top:8px;
  margin-bottom:16px;
  font-size:.9rem;
}

.situation-ressources-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:flex-start;
}

.situation-ressource-bloc{
  flex:1 1 300px;
  border:1px solid #000;
  padding:10px 12px;
  min-height:0;
}

.situation-ressource-bloc h3{
  margin:0 0 10px;
  font-size:.95rem;
}

.situation-ressource-options{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  column-gap:8px;
  row-gap:13px;
  align-items:center;
  align-content:start;
}

/* Desktop : les 2 libellés longs sont seuls sur la première ligne. */
.situation-ressource-options .ressource-option:nth-child(5){
  grid-column:1 / 3;
  grid-row:1;
}

.situation-ressource-options .ressource-option:nth-child(6){
  grid-column:3 / 5;
  grid-row:1;
}

.situation-ressource-options .ressource-option:nth-child(1){
  grid-column:1;
  grid-row:2;
}

.situation-ressource-options .ressource-option:nth-child(2){
  grid-column:2;
  grid-row:2;
}

.situation-ressource-options .ressource-option:nth-child(3){
  grid-column:3;
  grid-row:2;
}

.situation-ressource-options .ressource-option:nth-child(4){
  grid-column:4;
  grid-row:2;
}

.situation-ressource-options .ressource-option:nth-child(7){
  grid-column:1 / 3;
  grid-row:3;
}

.situation-ressource-options .ressource-option:nth-child(8){
  grid-column:3 / 5;
  grid-row:3;
}

.ressource-option{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
  white-space:nowrap;
}

.ressource-option input[type="radio"]{
  flex:0 0 auto;
}

.ressource-option-autre{
  min-height:26px;
}

.situation-ressources input[type="radio"]{
  position:relative;
  top:-4px;
}

.ress-autre-wrapper{
  display:inline-flex;
  align-items:center;
  margin-left:0;
  width:0;
  max-width:0;
  overflow:hidden;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-6px);

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility 0s linear .14s;
}

.ress-autre-wrapper.is-visible{
  width:180px;
  max-width:180px;
  margin-left:6px;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility 0s;
}

.ress-autre-input{
  padding:3px 5px;
  font:inherit;
  max-width:230px;
  width:100%;
}

/* ===== Montant total des ressources mensuelles ===== */
.situation-montant{
  margin-top:10px;
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:6px;
}

.situation-montant h3{
  margin:0;
  font-size:.9rem;
  font-weight:600;
}

.situation-montant-ligne{
  flex:1;
  display:flex;
  align-items:center;
  gap:6px;
}

.situation-pointilles{
  flex:1;
  border-bottom:1px dotted #000;
  height:1px;
}

.montant-input{
  width:100px;
  padding:3px 5px;
  font:inherit;
  text-align:right;
}

.montant-euro{
  font-weight:600;
}

@media (max-width:768px){
  .situation-pro-grid,
  .situation-ressources-grid{
    flex-direction:column;
  }

  .situation-ressources-grid{
    gap:16px;
  }

  .bloc-situation-pro,
  .situation-ressource-bloc{
    width:100%;
  }

  .situation-ressource-options{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:14px;
    row-gap:8px;
    align-content:start;
  }

  .situation-ressource-options .ressource-option:nth-child(n){
    grid-column:auto;
    grid-row:auto;
  }

  .situation-ressource-bloc{
    height:auto !important;
    min-height:0 !important;
    padding-bottom:10px;
  }

  .situation-montant{
    flex-direction:row;
    align-items:center;
    gap:6px;
  }

  .situation-montant h3{
    flex:0 1 auto;
    min-width:0;
  }

  .situation-montant-ligne{
    flex:1 1 auto;
    min-width:110px;
  }

  .situation-pointilles{
    display:block;
    min-width:16px;
  }

  .montant-input{
    width:86px;
    flex:0 0 86px;
  }
}

@media (max-width:520px){
  .situation-ressource-options{
    grid-template-columns:1fr;
  }

  .ressource-option{
    white-space:normal;
  }
}


/* Sécurité responsive : évite les grands blocs vides sur mobile/tablette. */
@media (max-width:768px){
  .page-4 .situation-ressource-bloc,
  .page-4 .situation-ressources-grid{
    height:auto !important;
    min-height:0 !important;
  }
}