/* ETHNOS R831 — finitions ciblées inscription / paiement / parcours officiel.
   Base canonique : R830.
   Périmètre strict :
   1) bandeau post-10 000 = même gabarit extérieur que le bandeau fondateur, contenu central compact et lisible ;
   2) fenêtre paiement = boutons ETHNOS standard, fermeture géométriquement centrée, textes secondaires blancs ;
   3) parcours officiel O1-O4 = fond gris->bleu validé de "Premiers pas", contenu centré, éléments crème conservés.
   Aucun contrat API, moteur de paiement, donnée, validation, upload ou navigation n'est modifié. */

:root{
  --r831-charcoal:#1f1f1f;
  --r831-blue:#0a3448;
  --r831-blue-bright:#0b526d;
  --r831-gradient:linear-gradient(108deg,#1f1f1f 0%,#202326 38%,#0a3448 69%,#0b526d 100%);
  --r831-orange:#ee8d55;
  --r831-orange-top:#ffad7a;
  --r831-orange-dark:#c96d3d;
  --r831-ink:#071826;
  --r831-cream:#fffdf9;
  --r831-copy:#c9d8de;
}

/* ========================================================================== */
/* 06 — offre post-10 000 : même gabarit/photos, seul le centre est compacté. */
/* ========================================================================== */
body[data-etnos-build="r776"] .joinPage .paymentTrialContentR828{
  box-sizing:border-box!important;
  gap:10px!important;
  padding:clamp(18px,2vw,30px)!important;
  justify-content:center!important;
  overflow:hidden!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialHeadlineR828{
  gap:0!important;
  width:100%!important;
  max-width:100%!important;
  line-height:1!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialHeadlineR828>span:first-child{
  color:var(--r831-orange-top)!important;
  font-size:clamp(13px,.86vw,17px)!important;
  line-height:1!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialHeadlineR828>strong{
  color:var(--r831-orange-top)!important;
  font-size:clamp(46px,3.4vw,68px)!important;
  line-height:.95!important;
  letter-spacing:-.045em!important;
  white-space:nowrap!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialHeadlineR828>span:last-child{
  color:#fff!important;
  font-size:clamp(17px,1.25vw,24px)!important;
  line-height:1.03!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialWelcomeR828{
  max-width:100%!important;
  color:#fff!important;
  font-size:clamp(13px,.92vw,17px)!important;
  line-height:1.28!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialFreeR828{
  color:#fff!important;
  font-size:clamp(17px,1.22vw,23px)!important;
  line-height:1.12!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialFreeR828 strong{
  color:var(--r831-orange-top)!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialFreeR828 span{
  color:#fff!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialPriceR828{
  color:#fff!important;
  font-size:clamp(14px,1vw,19px)!important;
  line-height:1.15!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialPriceR828 strong{
  color:var(--r831-orange-top)!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialNoCardR828{
  box-sizing:border-box!important;
  max-width:100%!important;
  margin:0!important;
  padding:9px 12px!important;
  color:#fff!important;
  font-size:clamp(11px,.78vw,14px)!important;
  line-height:1.32!important;
  border-left-color:var(--r831-orange)!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialNoCardR828 strong{
  color:var(--r831-orange-top)!important;
}
body[data-etnos-build="r776"] .joinPage .paymentTrialR828 .paymentLaunchFinePrintR818{
  color:#fff!important;
  opacity:1!important;
  font-size:9px!important;
  line-height:1.2!important;
}

/* À partir de la grille desktop, on reprend la hauteur de référence observée
   du bandeau fondateur selon les paliers de viewport déjà utilisés par R819. */
@media (min-width:1101px) and (min-height:821px){
  body[data-etnos-build="r776"] .joinPage .paymentTrialR828{
    height:clamp(360px,27.6vw,430px)!important;
    min-height:clamp(360px,27.6vw,430px)!important;
    max-height:clamp(360px,27.6vw,430px)!important;
  }
}
@media (min-width:1101px) and (max-height:820px){
  body[data-etnos-build="r776"] .joinPage .paymentTrialR828{
    height:340px!important;
    min-height:340px!important;
    max-height:340px!important;
  }
  body[data-etnos-build="r776"] .joinPage .paymentTrialContentR828{
    gap:6px!important;
    padding:14px 22px!important;
  }
  body[data-etnos-build="r776"] .joinPage .paymentTrialHeadlineR828>span:first-child{font-size:12px!important;}
  body[data-etnos-build="r776"] .joinPage .paymentTrialHeadlineR828>strong{font-size:40px!important;}
  body[data-etnos-build="r776"] .joinPage .paymentTrialHeadlineR828>span:last-child{font-size:16px!important;}
  body[data-etnos-build="r776"] .joinPage .paymentTrialWelcomeR828{font-size:12px!important;line-height:1.22!important;}
  body[data-etnos-build="r776"] .joinPage .paymentTrialFreeR828{font-size:16px!important;}
  body[data-etnos-build="r776"] .joinPage .paymentTrialPriceR828{font-size:13px!important;}
  body[data-etnos-build="r776"] .joinPage .paymentTrialNoCardR828{font-size:10.5px!important;line-height:1.24!important;padding:7px 9px!important;}
  body[data-etnos-build="r776"] .joinPage .paymentTrialR828 .paymentLaunchFinePrintR818{font-size:8px!important;}
}
@media (max-width:1100px){
  body[data-etnos-build="r776"] .joinPage .paymentTrialContentR828{
    gap:10px!important;
    padding:22px clamp(24px,5vw,50px)!important;
  }
  body[data-etnos-build="r776"] .joinPage .paymentTrialHeadlineR828>strong{
    white-space:normal!important;
    text-align:center!important;
  }
}

/* ========================================================================== */
/* Bloc paiement — standard ETHNOS actif R798/R799 + fermeture centrée.       */
/* ========================================================================== */
.ethnosPaymentWallR828__lead,
.ethnosPaymentChoiceR828 p,
.ethnosPaymentWallR828__free{
  color:#fff!important;
  opacity:1!important;
}

.ethnosPaymentWallR828__head>button[data-close],
.r830PaymentPreview .ethnosPaymentWallR828__head>button[data-r830-payment-preview-close]{
  position:relative!important;
  display:block!important;
  flex:0 0 44px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--r831-cream)!important;
  color:var(--r831-ink)!important;
  font-size:0!important;
  line-height:0!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.ethnosPaymentWallR828__head>button[data-close]::before,
.ethnosPaymentWallR828__head>button[data-close]::after,
.r830PaymentPreview .ethnosPaymentWallR828__head>button[data-r830-payment-preview-close]::before,
.r830PaymentPreview .ethnosPaymentWallR828__head>button[data-r830-payment-preview-close]::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:14px!important;
  height:2px!important;
  border-radius:2px!important;
  background:currentColor!important;
  transform-origin:center!important;
}
.ethnosPaymentWallR828__head>button[data-close]::before,
.r830PaymentPreview .ethnosPaymentWallR828__head>button[data-r830-payment-preview-close]::before{
  transform:translate(-50%,-50%) rotate(45deg)!important;
}
.ethnosPaymentWallR828__head>button[data-close]::after,
.r830PaymentPreview .ethnosPaymentWallR828__head>button[data-r830-payment-preview-close]::after{
  transform:translate(-50%,-50%) rotate(-45deg)!important;
}

/* CTA de paiement : reprise exacte du standard orange actif de l'inscription. */
.ethnosPaymentChoiceR828>button[data-pay],
.r830PaymentPreview .ethnosPaymentChoiceR828>button[data-r830-preview-pay]{
  align-self:center!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:250px!important;
  min-height:48px!important;
  height:48px!important;
  margin-top:auto!important;
  padding:0 24px!important;
  border:1px solid rgba(255,211,183,.92)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,var(--r831-orange-top) 0%,var(--r831-orange) 100%)!important;
  color:var(--r831-ink)!important;
  box-shadow:0 1px 0 var(--r831-orange-dark),0 3px 5px rgba(0,0,0,.11)!important;
  filter:none!important;
  font-weight:750!important;
  line-height:1!important;
  text-shadow:none!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}
.ethnosPaymentChoiceR828>button[data-pay]:not(:disabled):hover,
.r830PaymentPreview .ethnosPaymentChoiceR828>button[data-r830-preview-pay]:hover{
  filter:brightness(1.025)!important;
  transform:translateY(-1px)!important;
  box-shadow:0 2px 0 var(--r831-orange-dark),0 4px 6px rgba(0,0,0,.12)!important;
}
.ethnosPaymentChoiceR828>button[data-pay]:disabled{
  opacity:.46!important;
  filter:saturate(.55)!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}

/* Sélecteur 1 / 6 mois : même géométrie de bouton, état sélectionné orange. */
.ethnosPaymentWallR828__periods button{
  min-height:48px!important;
  height:48px!important;
  padding:0 18px!important;
  border:1px solid #b9c8d2!important;
  border-radius:12px!important;
  background:var(--r831-cream)!important;
  color:var(--r831-ink)!important;
  box-shadow:none!important;
  font-weight:750!important;
}
.ethnosPaymentWallR828__periods button.isActive{
  border-color:rgba(255,211,183,.92)!important;
  background:linear-gradient(180deg,var(--r831-orange-top) 0%,var(--r831-orange) 100%)!important;
  box-shadow:0 1px 0 var(--r831-orange-dark),0 3px 5px rgba(0,0,0,.11)!important;
}
@media (max-width:520px){
  .ethnosPaymentChoiceR828>button[data-pay],
  .r830PaymentPreview .ethnosPaymentChoiceR828>button[data-r830-preview-pay]{
    width:100%!important;
    min-width:0!important;
  }
}

/* ========================================================================== */
/* O1-O4 — référence graphique directe de "Premiers pas" R796/R797/R798.     */
/* ========================================================================== */
body[data-etnos-build="r776"] .joinPage .joinCard[data-current-view^="official-"] .joinCardBody{
  background-color:var(--r831-charcoal)!important;
  background-image:var(--r831-gradient)!important;
  color:#fff!important;
}
body[data-etnos-build="r776"] .joinPage .joinCard[data-current-view^="official-"] .joinView[data-view^="official-"]:not([hidden]){
  box-sizing:border-box!important;
  width:100%!important;
  min-height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(16px,2.3vh,30px) clamp(20px,3vw,54px)!important;
}
body[data-etnos-build="r776"] .joinPage .joinCard[data-current-view^="official-"] .officialWorkspace{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:1180px!important;
  margin:auto!important;
  padding:clamp(18px,2.3vw,34px)!important;
  background:transparent!important;
  color:#fff!important;
}

/* Typographie et couleurs reprises de la hiérarchie active de Premiers pas. */
body[data-etnos-build="r776"] .joinPage .joinCard[data-current-view^="official-"] :is(.officialIntro h2,.officialReadyWorkspace h2){
  font-family:var(--r775-font,Arial,sans-serif)!important;
  color:#fff!important;
  font-weight:800!important;
  line-height:1.02!important;
  letter-spacing:-.04em!important;
}
body[data-etnos-build="r776"] .joinPage .joinCard[data-current-view^="official-"] :is(.officialIntro p,.officialReadyWorkspace>p){
  color:var(--r831-copy)!important;
  opacity:1!important;
}
body[data-etnos-build="r776"] .joinPage .joinCard[data-current-view^="official-"] .officialGrid .fieldGroup>span{
  color:#fff!important;
}
body[data-etnos-build="r776"] .joinPage .joinCard[data-current-view^="official-"] .officialGrid .fieldGroup>small{
  color:var(--r831-copy)!important;
}
body[data-etnos-build="r776"] .joinPage .joinCard[data-current-view^="official-"] .officialFooter{
  border-top-color:rgba(255,255,255,.18)!important;
}
body[data-etnos-build="r776"] .joinPage .joinCard[data-current-view="official-ready"] .officialImpactLine{
  color:var(--r831-copy)!important;
}

/* Les éléments crème validés de O2/O4 restent volontairement inchangés :
   .officialMediaCard, .officialMediaNote et .officialReadyRules conservent leurs
   fonds et leurs textes sombres historiques. */