/* famille.css — Page 2 : Votre famille et vous + Nationalité */

.page2-entete{
  margin-bottom:12px;
}

/* ========== TABLEAU FAMILLE ========== */
.famille-table{
  width:100%;
  border-collapse:collapse;
  font-size:.82rem;
  table-layout:fixed;
}

.famille-table th,
.famille-table td{
  border:1px solid #000;
  padding:4px 4px;
  overflow-wrap:anywhere;
}

.famille-table th{
  text-align:center;
}

.famille-table th:nth-child(1),
.famille-table td:nth-child(1){
  width:13%;
  white-space:nowrap;
}

.famille-table td:first-child{
  font-weight:600;
}

.famille-table tbody tr:not(.row-enfant) td:first-child{
  text-align:center;
}

.famille-table th:nth-child(2),
.famille-table td:nth-child(2){ width:19%; }

.famille-table th:nth-child(3),
.famille-table td:nth-child(3){ width:6%; }

.famille-table th:nth-child(4),
.famille-table td:nth-child(4){ width:14%; }

.famille-table th:nth-child(5),
.famille-table td:nth-child(5){ width:21%; }

.famille-table th:nth-child(6),
.famille-table td:nth-child(6){ width:27%; }

.famille-table input{
  width:100%;
  border:none;
  outline:none;
  font:inherit;
  padding:2px 4px;
  text-align:center;
  min-width:0;
}

.famille-table input::placeholder,
.input-sexe::placeholder,
.input-date-naissance::placeholder,
.date-validite-input::placeholder{
  text-align:center;
}

.famille-table input::-webkit-input-placeholder,
.input-sexe::-webkit-input-placeholder,
.input-date-naissance::-webkit-input-placeholder,
.date-validite-input::-webkit-input-placeholder{
  text-align:center;
}

.input-sexe,
.input-date-naissance,
.date-validite-input{
  text-align:center;
}

.role-enfant{
  position:static;
  padding-right:4px !important;
  text-align:center;
  white-space:normal !important;
}

.btn-remove-enfant{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:17px;
  height:17px;
  border-radius:999px;
  border:1px solid #c0c0c0;
  background:#e5e5e5;
  font-size:.8rem;
  line-height:15px;
  text-align:center;
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#000;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}

.btn-remove-enfant:hover{
  background:#000;
  border-color:#000;
  color:#fff;
}

.enfant-actions{
  margin-top:8px;
}

.enfant-actions button{
  font-family:var(--font-contenu);
  font-size:.9rem;
  padding:4px 10px;
  border-radius:4px;
  border:1px solid #c0c0c0;
  background:#e5e5e5;
  color:#000;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}

.enfant-actions button:hover{
  background:#b5b5b5;
  border-color:#8f8f8f;
}

/* ========== COORDONNÉES ========== */
.contact-coordonnees-title{
  margin:16px 0 4px;
  font-size:.9rem;
  font-weight:600;
  font-family:inherit;
}

.contact-coordonnees-title + .contact-lignes-famille{
  margin-top:6px;
}

.contact-lignes-famille{
  display:flex;
  gap:24px;
}

.contact-ligne{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:0;
  font-size:.9rem;
}

.contact-ligne label{
  flex:1;
}

.contact-ligne input,
.contact-ligne select{
  font:inherit;
}

.contact-ligne input{
  width:100%;
  padding:4px 6px;
}

.contact-col-phone{
  min-width:0;
}

.phone-field{
  display:flex;
  align-items:center;
  width:100%;
  min-height:30px;
  border:1px solid #b3b3b3;
  background:#fff;
}

.phone-field:focus-within{
  border-color:#000;
}

.phone-prefix{
  flex:0 0 70px;
  width:70px;
  border:0;
  background:transparent;
  color:#000;
  outline:none;
}

.phone-prefix{
  appearance:none;
  -webkit-appearance:none;
  padding:4px 26px 4px 4px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 8px;
}

.phone-prefix::-ms-expand{
  display:none;
}




.phone-separator{
  flex:0 0 auto;
  width:1px;
  height:18px;
  background:#7a7a7a;
  opacity:.75;
}

.phone-field input[type="tel"]{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:none;
  padding:4px 4px;
}

.phone-field input[type="tel"]:focus{
  border:0;
  outline:none;
}

.picto-inline{
  font-size:1.2rem;
  position:relative;
  top:10px;
}

/* ========== NATIONALITÉ DU MÉNAGE ========== */
.nationalite-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin-top:12px;
  align-items:stretch;
}

.nationalite-grid.has-conjoint{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.bloc-nationalite{
  min-width:0;
  border:1px solid #000;
  padding:10px 12px;
  font-size:.9rem;
}

.bloc-nationalite[hidden]{
  display:none !important;
}


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

.bloc-nationalite label{
  display:block;
  margin-bottom:6px;
  width:fit-content;
}

.bloc-titre-sejour{
  display:none;
  margin:8px 0 8px 26px;
}

.bloc-titre-sejour .sous-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  width:100%;
  max-width:520px;
}

.bloc-titre-sejour .sous-label input[type="text"]{
  flex:0 1 260px;
  width:260px;
  max-width:100%;
  margin:0;
  padding:3px 5px;
  font:inherit;
}

.bloc-nationalite .date-validite-input{
  flex-basis:150px !important;
  width:150px !important;
  max-width:150px;
  display:inline-block;
  margin-left:0;
  margin-top:0;
}


@media (max-width:980px){
  .famille-table{
    table-layout:fixed;
    font-size:.82rem;
  }

  .famille-table th,
  .famille-table td{
    padding:4px 4px;
    overflow-wrap:anywhere;
  }

  .famille-table th:nth-child(1),
  .famille-table td:nth-child(1){ width:13%; }

  .famille-table th:nth-child(2),
  .famille-table td:nth-child(2){ width:19%; }

  .famille-table th:nth-child(3),
  .famille-table td:nth-child(3){ width:6%; }

  .famille-table th:nth-child(4),
  .famille-table td:nth-child(4){ width:14%; }

  .famille-table th:nth-child(5),
  .famille-table td:nth-child(5){ width:21%; }

  .famille-table th:nth-child(6),
  .famille-table td:nth-child(6){ width:27%; }

  .famille-table input{
    min-width:0;
  }
}

@media (max-width:750px){
  .nationalite-grid,
  .nationalite-grid.has-conjoint{
    grid-template-columns:1fr;
    gap:12px;
  }


  .bloc-nationalite{
    width:100%;
  }
}

@media (max-width:750px){
  .contact-lignes-famille{
    display:block;
  }

  .contact-ligne{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:8px 10px;
    align-items:end;
  }

  .contact-col{
    width:100%;
    min-width:0;
  }

  .contact-col-phone{
    grid-column:1;
    grid-row:1;
  }

  .contact-col-phone + .picto-inline{
    grid-column:2;
    grid-row:1;
    align-self:end;
  }

  .contact-col:not(.contact-col-phone){
    grid-column:1;
    grid-row:2;
  }

  .contact-col:not(.contact-col-phone) + .picto-inline{
    grid-column:2;
    grid-row:2;
    align-self:end;
  }

  .picto-inline{
    top:0;
    margin-bottom:4px;
  }

  .phone-prefix{
    flex-basis:62px;
    width:62px;
  }
}

@media (max-width:750px){
  .famille-table{
    display:block;
    border:0;
    font-size:.9rem;
  }

  .famille-table thead{
    display:none;
  }

  .famille-table tbody,
  .famille-table tr,
  .famille-table td{
    display:block;
    width:100% !important;
  }

  .famille-table tr{
    border:1px solid #000;
    margin-bottom:10px;
  }

  .famille-table td{
    border:0;
    border-bottom:1px solid #000;
    padding:7px 8px;
  }

  .famille-table td:last-child{
    border-bottom:0;
  }

  .famille-table tbody tr:not(.row-enfant) td:first-child,
  .famille-table td:first-child{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    background:#f7f7f7;
    text-align:center;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .famille-table td:not(:first-child){
    display:grid;
    grid-template-columns:112px minmax(0, 1fr);
    align-items:center;
    gap:8px;
  }

  .famille-table td:not(:first-child)::before{
    font-weight:600;
    line-height:1.15;
  }

  .famille-table td:nth-child(2)::before{ content:"Nom / Prénom"; }
  .famille-table td:nth-child(3)::before{ content:"Sexe"; }
  .famille-table td:nth-child(4)::before{ content:"Date de naissance"; }
  .famille-table td:nth-child(5)::before{ content:"Lieu de naissance"; }
  .famille-table td:nth-child(6)::before{ content:"Situation familiale"; }

  .famille-table input{
    border:1px solid #b3b3b3;
    min-height:28px;
    padding:4px 6px;
  }

  .role-enfant{
    justify-content:center !important;
    padding:7px 42px !important;
    text-align:center !important;
  }

  .famille-table tr.row-enfant .btn-remove-enfant{
    top:8px;
    right:8px;
    transform:none;
  }
}

@media (max-width:420px){
  .famille-table td:not(:first-child){
    grid-template-columns:1fr;
    gap:4px;
  }

  .famille-table td:not(:first-child)::before{
    text-align:left;
  }
}


/* Correctif mobile : titre enfant centré comme Vous / Conjoint */
@media (max-width:750px){
  .famille-table tbody tr.row-enfant td.role-enfant{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding-left:42px !important;
    padding-right:42px !important;
  }
}


/* Correctif final : la croix enfant ne chevauche plus le libellé */
.famille-table tr.row-enfant{
  position:relative;
}

.famille-table tr.row-enfant .role-enfant{
  position:static !important;
  padding-right:4px !important;
  text-align:center;
  white-space:normal !important;
}

.famille-table tr.row-enfant .btn-remove-enfant{
  right:8px;
}

@media (max-width:750px){
  .famille-table tbody tr.row-enfant td.role-enfant{
    padding-left:42px !important;
    padding-right:42px !important;
  }

  .famille-table tbody tr.row-enfant .btn-remove-enfant{
    top:8px;
    right:8px;
    transform:none;
  }
}