/* ==========================================================================
   BÉTHANIE CULTE — DOSSIER OFFICIEL D'AFFILIATION
   Inspiré des formulaires administratifs A4 fournis par l'utilisateur.
   ========================================================================== */

.official-affiliation-dialog{
  width:min(1320px,calc(100vw - 34px)) !important;
  height:min(94vh,960px) !important;
  height:min(94dvh,960px) !important;
  max-height:calc(100dvh - 24px) !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:1fr !important;
  overflow:hidden !important;
  background:#ececea !important;
}

.official-affiliation-shell{
  min-width:0;
  height:100%;
  padding:0 !important;
  overflow-y:auto !important;
  background:#ececea !important;
  scrollbar-width:thin;
  scrollbar-color:#9aa3a5 transparent;
}


/* ==========================================================================
   TOP BAR
   ========================================================================== */

.official-affiliation-topbar{
  position:sticky;
  top:0;
  z-index:50;
  min-height:78px;
  display:grid;
  grid-template-columns:minmax(230px,.8fr) minmax(0,1.4fr) 54px;
  align-items:center;
  gap:22px;
  padding:12px 18px 12px 22px;
  border-bottom:1px solid rgba(255,255,255,.18);
  background:#203f50;
  color:#fff;
  box-shadow:0 7px 24px rgba(0,0,0,.12);
}

.official-affiliation-brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}

.official-affiliation-brand img{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:50%;
  object-fit:cover;
}

.official-affiliation-brand strong,
.official-affiliation-brand span{
  display:block;
}

.official-affiliation-brand strong{
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
}

.official-affiliation-brand span{
  margin-top:4px;
  color:rgba(255,255,255,.58);
  font-size:8px;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.official-affiliation-heading{
  min-width:0;
  text-align:center;
}

.official-affiliation-heading > span{
  display:block;
  margin-bottom:3px;
  color:#f3c94d;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.official-affiliation-heading h2{
  margin:0 !important;
  color:#fff !important;
  font-size:20px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

.official-affiliation-close{
  width:46px !important;
  height:46px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  background:transparent !important;
  color:#fff !important;
}

.official-affiliation-close:hover{
  border-color:#f3c94d !important;
  background:#f3c94d !important;
  color:#173745 !important;
}


/* ==========================================================================
   PROGRESSION
   ========================================================================== */

.official-affiliation-progress{
  position:sticky;
  top:78px;
  z-index:45;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  min-height:58px;
  border-bottom:1px solid #c7cbcb;
  background:#fff;
}

.official-progress-step{
  position:relative;
  z-index:2;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 10px;
  border:0;
  border-right:1px solid #e0e2e2;
  background:#fff;
  color:#6e777b;
  cursor:pointer;
}

.official-progress-step:last-of-type{
  border-right:0;
}

.official-progress-step span{
  width:25px;
  height:25px;
  flex:0 0 25px;
  display:grid;
  place-items:center;
  border:1px solid #aab1b3;
  border-radius:50%;
  color:#556066;
  font-size:9px;
  font-weight:900;
}

.official-progress-step strong{
  overflow:hidden;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.official-progress-step.is-active{
  color:#173745;
  background:#fff9df;
}

.official-progress-step.is-active span,
.official-progress-step.is-complete span{
  border-color:#f3c94d;
  background:#f3c94d;
  color:#173745;
}

.official-progress-step.is-complete{
  color:#2f7769;
}

.official-progress-bar{
  position:absolute;
  left:0;
  bottom:0;
  width:25%;
  height:3px;
  background:#42b4a2;
  transition:width .25s ease;
}

.official-affiliation-intro{
  width:min(1000px,calc(100% - 34px));
  margin:20px auto 0;
  color:#596268;
  font-size:11px;
  line-height:1.55;
  text-align:center;
}


/* ==========================================================================
   FORM / PAGES
   ========================================================================== */

.official-affiliation-form{
  width:min(1000px,calc(100% - 34px));
  margin:18px auto 34px;
  padding:0 !important;
}

.official-form-page[hidden]{
  display:none !important;
}

.official-paper{
  position:relative;
  padding:28px 30px 32px;
  border:1px solid #969b9b;
  background:#fff;
  color:#111;
  box-shadow:0 14px 38px rgba(20,31,35,.08);
  font-family:Arial,Helvetica,sans-serif;
}

.official-paper::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid #e4e4e4;
  pointer-events:none;
}

.official-paper > *{
  position:relative;
  z-index:1;
}

.official-paper-kicker{
  margin-bottom:7px;
  color:#333;
  font-size:10px;
  font-weight:700;
}

.official-paper > h3{
  margin:0 0 15px;
  color:#111;
  font-size:24px;
  line-height:1.2;
  font-weight:900;
  text-align:center;
  text-transform:uppercase;
}

.official-letterhead{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:16px;
  color:#111;
  font-size:10px;
  line-height:1.35;
}

.official-letterhead strong{
  font-size:11px;
}

.official-registration{
  display:flex;
  align-items:center;
  gap:10px;
  margin:11px 0 18px;
  padding:8px 0;
  border-top:1px solid #b9b9b9;
  border-bottom:1px solid #b9b9b9;
  font-size:10px;
}

.official-registration span{
  font-weight:700;
  text-transform:uppercase;
}

.official-registration strong{
  color:#60686b;
  font-size:10px;
}

.official-paper h4{
  margin:18px 0 10px;
  color:#111;
  font-size:11px;
  line-height:1.3;
  font-weight:900;
  text-transform:uppercase;
}

.official-legal-text,
.official-article p,
.official-members-intro,
.official-honor-box p,
.official-privacy-box p{
  margin:0;
  color:#171717;
  font-size:10.5px;
  line-height:1.48;
}


/* ==========================================================================
   FIELDS — SOULIGNÉS COMME UN FORMULAIRE PAPIER
   ========================================================================== */

.official-grid{
  display:grid;
  gap:16px;
}

.official-grid-2{
  grid-template-columns:1fr 1fr;
}

.official-grid-3{
  grid-template-columns:1fr .6fr 1fr;
}

.official-field{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  align-items:end;
  gap:8px;
  min-width:0;
  margin:9px 0;
}

.official-grid .official-field{
  grid-template-columns:1fr;
  gap:4px;
}

.official-field label{
  margin:0 !important;
  color:#191919 !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  white-space:nowrap;
}

.official-field input,
.official-field select,
.official-field textarea{
  width:100%;
  min-width:0;
  min-height:30px !important;
  padding:3px 5px 2px !important;
  border:0 !important;
  border-bottom:1px solid #4b4b4b !important;
  border-radius:0 !important;
  outline:0;
  background:transparent !important;
  color:#111 !important;
  box-shadow:none !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:12px !important;
}

.official-field input:focus,
.official-field select:focus,
.official-field textarea:focus{
  border-bottom-color:#0f7566 !important;
  background:#f3fbf9 !important;
}


/* ==========================================================================
   ARTICLES
   ========================================================================== */

.official-articles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 24px;
}

.official-article{
  padding:11px 0;
  border-bottom:1px solid #d6d6d6;
}

.official-article h4{
  margin:0 0 6px;
}

.official-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:15px;
  padding:12px 14px;
  border:1px solid #cacaca;
  background:#fafafa;
  color:#161616;
  cursor:pointer;
}

.official-checkbox-important{
  margin-top:22px;
  border:2px solid #203f50;
  background:#f7fafb;
}

.official-checkbox input{
  width:17px;
  height:17px;
  flex:0 0 17px;
  margin:1px 0 0;
  accent-color:#203f50;
}

.official-checkbox span{
  font-size:10.5px;
  line-height:1.45;
}


/* ==========================================================================
   MEMBERS TABLE
   ========================================================================== */

.official-members-intro{
  margin-bottom:15px;
  padding:10px 12px;
  border-left:3px solid #f3c94d;
  background:#fffaf0;
}

.official-members-table{
  border:1px solid #444;
}

.official-members-head,
.official-members-row{
  display:grid;
  grid-template-columns:45px 1.15fr 1.5fr .8fr 1fr;
}

.official-members-head{
  min-height:34px;
  align-items:center;
  border-bottom:1px solid #444;
  background:#f1f1f1;
}

.official-members-head > span{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px;
  border-right:1px solid #777;
  color:#111;
  font-size:9px;
  font-weight:900;
  text-align:center;
}

.official-members-head > span:last-child{
  border-right:0;
}

.official-members-row{
  min-height:35px;
  border-bottom:1px solid #888;
}

.official-members-row:last-child{
  border-bottom:0;
}

.official-members-number{
  display:grid;
  place-items:center;
  border-right:1px solid #888;
  color:#111;
  font-size:9px;
  font-weight:700;
}

.official-mini-field{
  min-width:0;
  border-right:1px solid #888;
}

.official-mini-field:last-child{
  border-right:0;
}

.official-mini-field input{
  width:100%;
  height:100%;
  min-height:34px;
  padding:4px 6px;
  border:0;
  outline:0;
  background:#fff;
  color:#111;
  font-family:Arial,Helvetica,sans-serif;
  font-size:10px;
}

.official-mini-field input:focus{
  background:#effaf8;
}


/* ==========================================================================
   FINAL DECLARATION
   ========================================================================== */

.official-honor-box,
.official-privacy-box{
  margin-top:14px;
  padding:16px;
  border:1px solid #b8b8b8;
}

.official-honor-box{
  background:#fafafa;
}

.official-privacy-box{
  background:#f7fbfa;
}

.official-privacy-box h4{
  margin-top:0;
}

.official-signature-motto{
  margin:28px auto 0;
  padding:22px 15px;
  border-top:1px solid #8b8b8b;
  border-bottom:1px solid #8b8b8b;
  text-align:center;
}

.official-signature-motto span,
.official-signature-motto strong,
.official-signature-motto small{
  display:block;
}

.official-signature-motto span{
  font-family:Georgia,serif;
  font-size:22px;
  font-style:italic;
}

.official-signature-motto strong{
  margin-top:7px;
  font-size:12px;
}

.official-signature-motto small{
  margin-top:13px;
  font-family:Georgia,serif;
  font-size:10px;
  font-style:italic;
}


/* ==========================================================================
   NAVIGATION BUTTONS
   ========================================================================== */

.official-page-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:15px;
}

.official-next-button,
.official-back-button,
.official-submit-button{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 22px;
  border:1px solid #203f50;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

.official-next-button,
.official-submit-button{
  margin-left:auto;
  background:#f3c94d;
  color:#173745;
  border-color:#f3c94d;
}

.official-next-button:hover,
.official-submit-button:hover{
  background:#ffd65c;
  border-color:#ffd65c;
}

.official-back-button{
  background:#fff;
  color:#203f50;
}

.official-back-button:hover{
  background:#203f50;
  color:#fff;
}

.official-submit-note{
  margin:10px 0 0;
  color:#737c80;
  font-size:10px;
  text-align:right;
}


/* ==========================================================================
   VALIDATION VISUELLE
   ========================================================================== */

.official-form-page .is-field-error{
  background:#fff1ef !important;
  border-bottom-color:#b42318 !important;
}

.official-form-error{
  margin:0 0 12px;
  padding:11px 13px;
  border-left:4px solid #b42318;
  background:#fff0ee;
  color:#8d2219;
  font-size:11px;
  font-weight:700;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width:900px){

  .official-affiliation-dialog{
    width:calc(100vw - 16px) !important;
    height:calc(100dvh - 16px) !important;
    max-height:none !important;
  }

  .official-affiliation-topbar{
    grid-template-columns:1fr auto;
  }

  .official-affiliation-heading{
    display:none;
  }

  .official-affiliation-progress{
    top:78px;
  }

  .official-articles{
    grid-template-columns:1fr;
    gap:0;
  }

}


/* ==========================================================================
   MOBILE — PLEIN ÉCRAN
   ========================================================================== */

@media (max-width:700px){

  .official-affiliation-modal{
    padding:0 !important;
  }

  .official-affiliation-dialog{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
  }

  .official-affiliation-shell{
    height:100dvh !important;
  }

  .official-affiliation-topbar{
    min-height:66px;
    grid-template-columns:minmax(0,1fr) 46px;
    padding:9px 10px;
    gap:10px;
  }

  .official-affiliation-brand img{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .official-affiliation-brand strong{
    font-size:10px;
  }

  .official-affiliation-brand span{
    display:none;
  }

  .official-affiliation-progress{
    top:66px;
    min-height:52px;
  }

  .official-progress-step{
    flex-direction:column;
    gap:3px;
    padding:5px 2px;
  }

  .official-progress-step span{
    width:22px;
    height:22px;
    flex-basis:22px;
  }

  .official-progress-step strong{
    width:100%;
    font-size:7px;
    text-align:center;
  }

  .official-affiliation-intro{
    width:calc(100% - 20px);
    margin-top:12px;
    font-size:10px;
  }

  .official-affiliation-form{
    width:100%;
    margin:12px 0 0;
  }

  .official-paper{
    padding:20px 14px 24px;
    border-left:0;
    border-right:0;
    box-shadow:none;
  }

  .official-paper::before{
    display:none;
  }

  .official-paper > h3{
    font-size:20px;
  }

  .official-letterhead{
    font-size:9px;
  }

  .official-grid,
  .official-grid-2,
  .official-grid-3{
    grid-template-columns:1fr;
    gap:0;
  }

  .official-field{
    grid-template-columns:1fr;
    gap:3px;
    margin:10px 0;
  }

  .official-field label{
    white-space:normal;
  }

  .official-field input,
  .official-field select,
  .official-field textarea{
    min-height:42px !important;
    padding:7px 6px 4px !important;
    font-size:16px !important;
  }

  .official-legal-text,
  .official-article p,
  .official-members-intro,
  .official-honor-box p,
  .official-privacy-box p{
    font-size:11px;
    line-height:1.55;
  }

  .official-members-head{
    display:none;
  }

  .official-members-table{
    border:0;
  }

  .official-members-row{
    grid-template-columns:42px minmax(0,1fr);
    margin-bottom:13px;
    border:1px solid #a6a6a6;
    background:#fafafa;
  }

  .official-members-number{
    grid-row:1 / span 4;
    border-right:1px solid #a6a6a6;
    background:#f1f1f1;
    font-size:11px;
  }

  .official-mini-field{
    position:relative;
    min-height:60px;
    padding-top:20px;
    border-right:0;
    border-bottom:1px solid #d0d0d0;
    background:#fff;
  }

  .official-mini-field:last-child{
    border-bottom:0;
  }

  .official-mini-field::before{
    content:attr(data-label);
    position:absolute;
    top:6px;
    left:8px;
    color:#777;
    font-size:7px;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
  }

  .official-mini-field input{
    min-height:39px;
    padding:7px 8px 4px;
    font-size:15px;
  }

  .official-page-actions{
    position:sticky;
    bottom:0;
    z-index:20;
    margin-top:0;
    padding:10px;
    border-top:1px solid #d3d3d3;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(8px);
  }

  .official-next-button,
  .official-back-button,
  .official-submit-button{
    min-height:48px;
    flex:1;
    padding:0 10px;
    font-size:8px;
  }

  .official-submit-note{
    padding:0 12px 15px;
    text-align:center;
  }

}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print{

  .official-affiliation-topbar,
  .official-affiliation-progress,
  .official-affiliation-intro,
  .official-page-actions,
  .official-submit-note,
  .membership-backdrop{
    display:none !important;
  }

  .official-affiliation-dialog,
  .official-affiliation-shell,
  .official-affiliation-form{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    margin:0 !important;
    background:#fff !important;
  }

  .official-form-page{
    display:block !important;
    page-break-after:always;
  }

  .official-paper{
    box-shadow:none;
    page-break-inside:avoid;
  }

}


/* ==========================================================================
   VARIANTE ROUMANIE — CIB-RO
   Les 3 formulaires reprennent la structure des documents roumains fournis.
   ========================================================================== */

.ro-affiliation-progress{
  grid-template-columns:repeat(3,1fr) !important;
}

.ro-official-paper{
  font-family:Arial,Helvetica,sans-serif;
}

.ro-official-paper > h3{
  font-size:22px;
  font-style:italic;
}

.ro-letterhead{
  margin-bottom:20px;
  font-size:11px;
  line-height:1.55;
}

.ro-registration-line{
  justify-content:flex-start;
  flex-wrap:wrap;
}

.ro-address-grid{
  display:grid;
  grid-template-columns:.8fr 1.7fr .35fr;
  gap:14px;
}

.ro-street-wide{
  grid-column:span 2;
}

.ro-number-field input{
  text-align:center;
}

.ro-declaration-list{
  margin:10px 0 22px 20px;
  padding:0;
  color:#202020;
  font-size:12px;
  line-height:1.58;
}

.ro-declaration-list li{
  margin:3px 0;
  padding-left:3px;
}

.ro-official-signatures{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin:30px 0 8px;
  padding-top:20px;
  border-top:1px solid #bbb;
}

.ro-official-signatures--four{
  grid-template-columns:repeat(2,1fr);
  row-gap:34px;
}

.ro-official-signatures div{
  min-height:74px;
}

.ro-official-signatures strong,
.ro-official-signatures span,
.ro-official-signatures small{
  display:block;
}

.ro-official-signatures strong{
  margin-bottom:5px;
  font-size:9px;
  text-transform:uppercase;
}

.ro-official-signatures span{
  font-size:11px;
}

.ro-official-signatures small{
  margin-top:3px;
  color:#555;
  font-size:9px;
}

.ro-act-paper h4{
  margin-top:23px;
}

.ro-legal-list p{
  margin:2px 0;
}

.ro-data-protection{
  margin:24px 0 14px;
  padding:16px;
  border:1px solid #d4d7d7;
  background:#f7f8f7;
}

.ro-data-protection strong{
  display:block;
  margin-bottom:6px;
  color:#173745;
  font-size:11px;
  text-transform:uppercase;
}

.ro-data-protection p{
  margin:0;
  color:#4f595e;
  font-size:11px;
  line-height:1.55;
}

.ro-members-table .official-members-head,
.ro-members-table .official-members-row{
  grid-template-columns:44px 1.25fr 1.5fr .75fr 1fr;
}

.ro-members-table .official-members-row label > span{
  display:none;
}

.ro-date-row{
  max-width:620px;
}

@media (max-width:760px){

  .ro-affiliation-progress{
    grid-template-columns:repeat(3,1fr) !important;
  }

  .ro-affiliation-progress .official-progress-step{
    min-height:54px;
    padding:7px 5px;
  }

  .ro-affiliation-progress .official-progress-step strong{
    font-size:7px;
  }

  .ro-address-grid{
    grid-template-columns:1fr;
    gap:0;
  }

  .ro-street-wide{
    grid-column:auto;
  }

  .ro-official-signatures,
  .ro-official-signatures--four{
    grid-template-columns:1fr;
    gap:12px;
  }

  .ro-official-signatures div{
    min-height:auto;
    padding:12px 0;
    border-bottom:1px solid #ddd;
  }

  .ro-members-table .official-members-head{
    display:none;
  }

  .ro-members-table .official-members-row{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:10px;
    padding:14px;
    border:1px solid #d4d7d7;
    border-bottom:0;
  }

  .ro-members-table .official-members-row:last-child{
    border-bottom:1px solid #d4d7d7;
  }

  .ro-members-table .official-members-number{
    grid-row:1 / span 4;
    align-self:stretch;
    display:grid;
    place-items:center;
    background:#f3c94d;
    color:#173745;
    font-weight:900;
  }

  .ro-members-table .official-members-row label{
    display:block;
  }

  .ro-members-table .official-members-row label > span{
    display:block;
    margin-bottom:5px;
    color:#687176;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .ro-members-table .official-members-row input{
    width:100%;
  }

}