:root{
  --ink:#03111b;
  --navy:#051b29;
  --navy-2:#082637;
  --navy-3:#0a3144;
  --line:rgba(151,208,219,.18);
  --text:#f5f0e8;
  --muted:rgba(218,235,238,.68);
  --teal:#50d5c2;
  --orange:#f58a4b;
  --orange-2:#ffae68;
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink)}
body{font-family:Arial,Helvetica,sans-serif;color:var(--text)}
button,input,textarea{font:inherit}
button{color:inherit}
a{color:inherit}
[hidden]{display:none!important}

.joinPage{
  width:100%;
  height:100vh;
  height:100dvh;
  display:grid;
  grid-template-rows:clamp(82px,12.5vh,138px) clamp(28px,4.2vh,46px) minmax(0,1fr);
  overflow:hidden;
  background:#041521;
}

.joinHeader{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(260px,.95fr) minmax(250px,.9fr) minmax(420px,1.35fr);
  align-items:stretch;
  border-bottom:1px solid rgba(151,208,219,.16);
  background:#061b28;
  overflow:hidden;
}
.joinBrand{
  position:relative;
  z-index:2;
  min-width:0;
  display:flex;
  align-items:center;
  gap:clamp(11px,1.1vw,18px);
  padding:clamp(12px,1.4vw,24px) clamp(18px,2.6vw,54px);
  text-decoration:none;
  background:linear-gradient(90deg,rgba(3,17,27,.98),rgba(5,27,41,.93));
}
.joinBrand:after{content:"";position:absolute;right:-40px;top:0;width:90px;height:100%;background:linear-gradient(90deg,#061b28,transparent);pointer-events:none}
.joinBrand img{width:clamp(34px,3.1vw,58px);height:auto;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25))}
.joinBrandCopy{display:flex;flex-direction:column;gap:3px;min-width:0}
.joinBrandCopy strong{font:400 clamp(22px,2vw,38px)/.95 Georgia,serif;letter-spacing:.055em}
.joinBrandCopy small{color:rgba(220,236,239,.62);font-size:clamp(8px,.64vw,11px);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.joinStatement{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:12px clamp(18px,2vw,40px);background:linear-gradient(90deg,#061b28 0%,rgba(7,31,45,.98) 55%,rgba(7,31,45,.55) 100%)}
.joinStatement p{max-width:380px;margin:0;color:rgba(245,240,232,.88);font:400 clamp(15px,1.24vw,23px)/1.24 Georgia,serif;text-align:center}
.joinStatement p:after{content:"";display:block;width:44px;height:1px;margin:10px auto 0;background:linear-gradient(90deg,transparent,var(--orange),transparent)}
.joinHeaderVisual{position:relative;min-width:0;margin:0;overflow:hidden;background:#2a160f}
.joinHeaderVisual:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#071f2d 0%,rgba(7,31,45,.3) 23%,transparent 57%),linear-gradient(0deg,rgba(2,12,19,.22),transparent 70%)}
.joinHeaderVisual img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 37%;transform:scale(1.02)}
.joinHeaderVisual figcaption{position:absolute;right:8px;bottom:6px;z-index:2;color:rgba(255,255,255,.55);font-size:6px;letter-spacing:.02em;text-shadow:0 1px 4px #000}

.joinNavigation{position:relative;z-index:4;display:flex;align-items:center;background:linear-gradient(90deg,#041521,#082536 48%,#041521);border-bottom:1px solid rgba(151,208,219,.13);box-shadow:0 10px 35px rgba(0,0,0,.18)}
.joinNavigation:before,.joinNavigation:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(151,208,219,.18))}
.joinNavigation:after{background:linear-gradient(90deg,rgba(151,208,219,.18),transparent)}
.joinNavigation span{width:clamp(40px,6vw,105px);height:3px;margin:0 15px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(245,138,75,.7),transparent);opacity:.65}

.joinMain{
  position:relative;
  min-height:0;
  display:grid;
  place-items:center;
  padding:clamp(10px,1.8vh,24px) clamp(14px,3vw,58px);
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 42%,rgba(255,154,85,.34),transparent 27%),
    radial-gradient(circle at 17% 82%,rgba(182,76,38,.28),transparent 31%),
    linear-gradient(135deg,#2b130e 0%,#672b1b 49%,#1d0e0a 100%);
}
.joinMain:before{content:"";position:absolute;inset:0;z-index:-4;opacity:.25;background-image:linear-gradient(rgba(255,196,149,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,196,149,.048) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,transparent,black 17%,black 82%,transparent)}
.joinAmbient{position:absolute;z-index:-3;border-radius:50%;filter:blur(45px);pointer-events:none}
.joinAmbientOrange{right:-7vw;top:2%;width:36vw;height:76%;background:radial-gradient(circle,rgba(255,151,79,.46),rgba(241,111,52,.12) 50%,transparent 72%)}
.joinAmbientBlue{left:-13vw;bottom:-28%;width:46vw;height:85%;background:radial-gradient(circle,rgba(183,73,34,.34),rgba(117,40,24,.11) 49%,transparent 69%)}
.joinWatermark{position:absolute;z-index:-2;right:-2.5%;top:50%;width:min(54vw,930px);height:88%;object-fit:cover;object-position:center;transform:translateY(-50%);opacity:.10;filter:grayscale(.25) sepia(.78) saturate(.82) contrast(1.08);mix-blend-mode:soft-light;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 50%,rgba(0,0,0,.72) 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 50%,rgba(0,0,0,.72) 82%,transparent 100%)}

.joinCard{
  width:min(1540px,96vw);
  height:min(720px,95%);
  min-height:360px;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  border:1px solid rgba(151,208,219,.25);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(8,36,51,.97),rgba(4,20,31,.955));
  box-shadow:0 32px 90px rgba(20,6,2,.46),0 0 0 1px rgba(255,255,255,.02) inset,0 0 105px rgba(17,89,115,.20);
  backdrop-filter:blur(14px);
}
.joinCardHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:clamp(15px,2vh,26px) clamp(22px,2.7vw,40px) clamp(12px,1.7vh,20px);border-bottom:1px solid rgba(151,208,219,.13)}
.joinEyebrow{display:flex;align-items:center;gap:8px;margin-bottom:7px;color:var(--teal);font-size:8px;font-weight:800;letter-spacing:.18em}
.joinEyebrow i{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px rgba(80,213,194,.65)}
.joinCardHeader h1{max-width:1080px;margin:0;color:var(--text);font:400 clamp(23px,2vw,36px)/1.04 Georgia,serif;letter-spacing:-.025em}
.joinCardHeader h1 .joinWelcomeLine,.joinCardHeader h1 .joinPathLine{display:block}
.joinCardHeader h1 .joinPathLine{margin-top:4px;color:var(--orange-2)}
.joinProgressText{flex:0 0 auto;margin-top:3px;padding:8px 11px;border:1px solid rgba(245,138,75,.22);border-radius:999px;color:rgba(255,194,149,.82);background:rgba(245,138,75,.055);font-size:8px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}

.joinSteps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0 clamp(20px,2.4vw,36px);list-style:none;border-bottom:1px solid rgba(151,208,219,.13);background:rgba(2,14,23,.30)}
.joinSteps:before{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;background:rgba(151,208,219,.13);z-index:-1}
.joinSteps li{min-width:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:clamp(10px,1.4vh,16px) 8px;color:rgba(204,224,228,.44)}
.joinSteps li>span{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(151,208,219,.18);border-radius:50%;background:#071f2d;font-size:8px;font-weight:900;letter-spacing:.04em}
.joinSteps li div{display:flex;flex-direction:column;gap:2px;min-width:0}
.joinSteps strong{font-size:10px;letter-spacing:.04em}
.joinSteps small{font-size:8px;color:rgba(204,224,228,.35)}
.joinSteps .isActive{color:#f5f0e8}
.joinSteps .isActive>span{border-color:rgba(245,138,75,.68);background:linear-gradient(145deg,#f58a4b,#ffae68);color:#061925;box-shadow:0 0 24px rgba(245,138,75,.18)}
.joinSteps .isActive small{color:rgba(255,189,143,.72)}

.joinCardBody{min-height:0;position:relative;padding:clamp(12px,1.8vh,22px) clamp(14px,2vw,28px) clamp(16px,2.2vh,26px);overflow:hidden}
.joinView{width:100%;height:100%;min-height:0;opacity:0;transform:translateY(8px);transition:opacity .24s ease,transform .24s ease}
.joinView.isVisible{opacity:1;transform:none}
.joinBodyMark{position:absolute;left:clamp(20px,2.5vw,34px);bottom:7px;display:flex;gap:5px;pointer-events:none}
.joinBodyMark span{width:4px;height:4px;border-radius:50%;background:rgba(151,208,219,.23)}
.joinBodyMark span:first-child{background:var(--orange);box-shadow:0 0 10px rgba(245,138,75,.45)}
.joinSectionLabel{display:block;margin-bottom:7px;color:rgba(80,213,194,.72);font-size:7px;font-weight:900;letter-spacing:.20em}

/* Première question */
.joinView[data-view="age"]{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(10px,1.4vh,16px)}
.joinAgePanel{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(18px,2.2vw,34px);padding:clamp(16px,2.2vh,26px) clamp(18px,2.4vw,30px);border:1px solid rgba(151,208,219,.105);border-left:3px solid rgba(245,138,75,.72);border-radius:13px;background:radial-gradient(circle at 92% 10%,rgba(245,138,75,.075),transparent 34%),linear-gradient(145deg,rgba(4,22,34,.80),rgba(2,15,25,.58));overflow:hidden}
.joinAgeCopy{min-width:0;max-width:900px}
.joinAgeCopy h2,.profileIntro h2,.profileReadyPanel h2{margin:0;color:rgba(245,240,232,.96);font:400 clamp(21px,1.55vw,29px)/1.08 Georgia,serif}
.joinAgeCopy h2{margin-bottom:clamp(13px,1.6vh,19px);font-size:clamp(26px,1.9vw,35px);line-height:1.12}
.joinAgeCopy h2 span{display:block;margin-top:6px;color:var(--orange-2);font:inherit}
.joinAgeCopy p{margin:0 0 clamp(11px,1.35vh,16px);color:rgba(225,238,240,.78);font-size:clamp(13px,1.02vw,16.5px);line-height:1.5;text-align:justify;text-justify:inter-word;hyphens:auto}
.joinAgeCopy p:last-child{margin-bottom:0}
.joinAgeInstruction{color:rgba(245,240,232,.88)!important}
.joinAgeInstruction strong{color:var(--orange-2);font-weight:700}
.joinAppPromo{display:grid;grid-template-columns:clamp(122px,10vw,158px) minmax(0,1fr);align-items:center;gap:clamp(16px,2vw,28px);min-height:96px;padding:clamp(8px,1.1vh,13px) clamp(14px,2vw,24px);border-top:1px solid rgba(151,208,219,.12);border-bottom:1px solid rgba(151,208,219,.07);background:rgba(2,14,23,.24)}
.joinAppPromo figure{height:clamp(88px,9.5vh,116px);margin:0;padding:4px;border:1px solid rgba(151,208,219,.10);border-radius:8px;background:transparent;overflow:hidden}
.joinAppPromo img{width:100%;height:100%;display:block;object-fit:contain}
.joinAppPromo h2{margin:0 0 8px;color:var(--orange-2);font:400 clamp(26px,1.9vw,35px)/1.12 Georgia,serif}
.joinAppPromo p{max-width:900px;margin:0;color:rgba(225,238,240,.76);font-size:clamp(12.5px,.98vw,16px);line-height:1.46}

/* Boutons */
.joinContinue,.joinBack{border-radius:8px;cursor:pointer;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
.joinContinue{min-width:148px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 13px 11px 16px;border:1px solid rgba(255,174,104,.72);color:#071b28;background:linear-gradient(135deg,#f58a4b,#ffae68);box-shadow:0 12px 30px rgba(245,138,75,.16);font:800 8.5px/1 Arial,Helvetica,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.joinContinue b{width:22px;height:22px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;background:rgba(7,27,40,.10);font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:400;line-height:1;text-align:center}
.joinContinue b[aria-hidden="true"]{padding-bottom:1px}
.joinContinue:hover,.joinBack:hover{transform:translateY(-2px)}
.joinContinue:hover{filter:saturate(1.06);box-shadow:0 16px 34px rgba(245,138,75,.24)}
.joinContinue:focus-visible,.joinBack:focus-visible,.textLink:focus-visible,.avatarChoice:focus-visible,.interestGrid button:focus-visible,.emojiBar button:focus-visible{outline:2px solid rgba(80,213,194,.9);outline-offset:3px}
.joinContinue.isPending{opacity:.45;cursor:default;filter:grayscale(.15)}
.joinContinue.isPending:hover{transform:none;box-shadow:0 12px 30px rgba(245,138,75,.16)}

.joinAgePanel .joinContinue{min-width:172px;gap:18px;padding:13px 15px 13px 19px;font-size:11px}
.joinAgePanel .joinContinue b{width:27px;height:27px;font-size:18px}
.joinBack{padding:10px 13px;border:1px solid rgba(151,208,219,.17);background:rgba(6,31,45,.58);color:rgba(225,238,240,.75);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* Choix du type de profil */
.profileChoiceEditor{justify-content:space-between}
.profileChoiceCopy{max-width:790px;margin:auto 0;padding:clamp(6px,1vh,14px) 0}
.profileChoiceCopy h2{margin:0 0 clamp(16px,2vh,24px);color:rgba(245,240,232,.96);font:400 clamp(25px,1.9vw,35px)/1.08 Georgia,serif}
.profileChoiceCopy p{max-width:760px;margin:0 0 14px;color:rgba(225,238,240,.78);font-size:clamp(13px,1vw,16px);line-height:1.5}
.profileChoiceButton{min-width:min(100%,360px);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 17px;border-radius:9px;cursor:pointer;font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.profileChoiceButton b{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-size:17px;font-weight:400}
.profileChoiceButtonCreator{border:1px solid rgba(80,213,194,.38);color:rgba(237,249,248,.92);background:linear-gradient(135deg,rgba(8,56,69,.88),rgba(5,35,49,.92));box-shadow:0 12px 30px rgba(0,0,0,.16)}
.profileChoiceButtonCreator b{background:rgba(80,213,194,.10);color:var(--teal)}
.profileChoiceButton:hover{transform:translateY(-2px)}
.profileChoiceButtonCreator:hover{box-shadow:0 16px 34px rgba(17,102,114,.20)}
.profileChoiceDivider{max-width:360px;display:flex;align-items:center;gap:10px;margin:18px 0;color:rgba(210,230,234,.34);font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.profileChoiceDivider:before,.profileChoiceDivider:after{content:"";height:1px;flex:1;background:rgba(151,208,219,.13)}
.profileChoiceButtonMember{width:min(100%,360px);min-width:0;padding:14px 15px 14px 18px;font-size:10px}
.profileChoiceActions{justify-content:flex-start}

/* Création du profil */
.profileWorkspace{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.78fr);gap:clamp(14px,1.8vw,24px)}
.profileEditor{min-height:0;display:flex;flex-direction:column;padding:clamp(14px,1.8vh,22px) clamp(16px,2vw,26px);border:1px solid rgba(151,208,219,.105);border-left:3px solid rgba(245,138,75,.72);border-radius:13px;background:radial-gradient(circle at 92% 5%,rgba(245,138,75,.06),transparent 30%),linear-gradient(145deg,rgba(4,22,34,.78),rgba(2,15,25,.56));overflow:hidden}
.profileIntro{flex:0 0 auto;margin-bottom:clamp(12px,1.5vh,18px)}
.profileIntro h2{margin-bottom:7px}
.profileIntro p{max-width:760px;margin:0;color:rgba(225,238,240,.68);font-size:clamp(10.5px,.78vw,12.5px);line-height:1.42}
.fieldGroup{display:flex;flex-direction:column;gap:6px}
.fieldGroup>span,.profileImageHeading strong{color:rgba(245,240,232,.94);font-size:clamp(14px,1.08vw,18px);font-weight:800;letter-spacing:.015em}
.bioField>label,.interestHeading strong{color:rgba(245,240,232,.92);font-size:11px;font-weight:800;letter-spacing:.02em}
.fieldGroup input,.customInterest input,.bioField textarea{width:100%;border:1px solid rgba(151,208,219,.17);border-radius:8px;outline:none;color:#f5f0e8;background:rgba(2,14,23,.58);box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.fieldGroup input{height:42px;padding:0 13px;font-size:13px}
.fieldGroup input:focus,.customInterest input:focus,.bioField textarea:focus{border-color:rgba(80,213,194,.54);box-shadow:0 0 0 3px rgba(80,213,194,.06)}
.fieldGroup small{max-width:760px;color:rgba(225,238,240,.67);font-size:clamp(10px,.78vw,12.5px);line-height:1.42}
.profileImageHeading small{max-width:650px;color:rgba(225,238,240,.67);font-size:clamp(10px,.78vw,12.5px);line-height:1.4}
.interestHeading small{color:rgba(210,230,234,.47);font-size:8px;line-height:1.35}
.profileImageSection{margin-top:clamp(12px,1.6vh,18px);padding-top:clamp(12px,1.5vh,16px);border-top:1px solid rgba(151,208,219,.11)}
.profileImageHeading,.interestHeading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.profileImageHeading>div,.interestHeading>div{display:flex;flex-direction:column;gap:3px}
.textLink{padding:0;border:0;background:none;color:var(--orange-2);cursor:pointer;font-size:8px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.profileImageChoices{display:grid;grid-template-columns:minmax(210px,.88fr) minmax(230px,1.12fr);gap:12px}
.uploadChoice{min-width:0;height:72px;display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px dashed rgba(151,208,219,.22);border-radius:10px;background:rgba(6,31,45,.38);cursor:pointer}
.uploadChoice input{position:absolute;opacity:0;pointer-events:none}
.choiceIcon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:rgba(80,213,194,.09);color:var(--teal);font-size:22px}
.uploadChoice>span:last-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.uploadChoice strong{font-size:10px}.uploadChoice small{color:rgba(210,230,234,.45);font-size:7px}
.avatarChoices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.avatarChoice{min-width:0;height:72px;border:1px solid rgba(151,208,219,.14);border-radius:10px;background:rgba(2,14,23,.48);cursor:pointer;font-size:27px;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.avatarChoice:hover{transform:translateY(-2px);border-color:rgba(245,138,75,.38)}
.avatarChoice.isSelected{border-color:rgba(245,138,75,.68);background:rgba(245,138,75,.10);box-shadow:0 0 0 2px rgba(245,138,75,.06) inset}
.charterStatus{display:flex;align-items:center;gap:8px;margin-top:9px;color:rgba(210,230,234,.48);font-size:7.8px}
.charterStatus i{width:16px;height:16px;display:grid;place-items:center;border:1px solid rgba(151,208,219,.19);border-radius:50%;font-style:normal}
.charterStatus.isAccepted{color:rgba(80,213,194,.78)}
.charterStatus.isAccepted i{border-color:rgba(80,213,194,.52);background:rgba(80,213,194,.09)}
.profileActions{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Carte de profil en direct */
.liveProfilePanel{min-height:0;display:flex;flex-direction:column;padding:clamp(14px,1.7vh,20px);border:1px solid rgba(151,208,219,.12);border-radius:13px;background:linear-gradient(145deg,rgba(4,25,38,.88),rgba(2,15,24,.80));overflow:hidden}
.liveProfileLabel{margin-bottom:10px;color:rgba(80,213,194,.62);font-size:6.5px;font-weight:900;letter-spacing:.17em}
.liveProfileCard{min-height:0;display:flex;flex:1;flex-direction:column;padding:clamp(15px,1.8vh,21px);border:1px solid rgba(151,208,219,.14);border-radius:12px;background:radial-gradient(circle at 86% 8%,rgba(245,138,75,.12),transparent 28%),linear-gradient(145deg,#082b3d,#041b29);box-shadow:0 18px 46px rgba(0,0,0,.22)}
.liveProfileTop{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(151,208,219,.11)}
.liveAvatar{width:62px;height:62px;display:grid;place-items:center;flex:0 0 auto;border:2px solid rgba(245,138,75,.45);border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(245,138,75,.20),rgba(4,26,39,.9));background-size:cover;background-position:center;font-size:30px;box-shadow:0 0 0 4px rgba(255,255,255,.025)}
.liveAvatar.hasPhoto{font-size:0}
.liveProfileTop h3{max-width:165px;margin:0;color:#f5f0e8;font:400 clamp(17px,1.25vw,22px)/1.05 Georgia,serif;overflow-wrap:anywhere}
.liveProfileTop p{display:flex;align-items:center;gap:6px;margin:6px 0 0;color:rgba(210,230,234,.50);font-size:7.5px}
.liveProfileTop img{width:15px;height:10px;object-fit:cover;border-radius:1px}
.liveBio{min-height:54px;margin:14px 0;color:rgba(225,238,240,.72);font-size:9.5px;line-height:1.5;overflow-wrap:anywhere}
.liveInterests{display:flex;flex-wrap:wrap;gap:6px}
.liveInterests span{padding:5px 7px;border:1px solid rgba(80,213,194,.15);border-radius:999px;background:rgba(80,213,194,.055);color:rgba(200,238,235,.70);font-size:6.5px}
.liveProfileFooter{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:auto;padding-top:13px;border-top:1px solid rgba(151,208,219,.10)}
.liveProfileFooter span{text-align:center;color:rgba(210,230,234,.40);font-size:6px;line-height:1.25}.liveProfileFooter b{display:block;margin-bottom:3px;color:#f5f0e8;font-size:12px}
.liveProfileHint{margin:10px 2px 0;color:rgba(210,230,234,.38);font-size:7px;line-height:1.45}

/* Description et intérêts */
.profileWorkspaceStory .profileEditor{padding-top:clamp(12px,1.4vh,18px);padding-bottom:clamp(11px,1.4vh,17px)}
.profileWorkspaceStory .profileIntro{margin-bottom:10px}
.bioField{display:flex;flex-direction:column;gap:6px}
.bioField textarea{height:86px;min-height:66px;resize:none;padding:11px 12px;font-size:11px;line-height:1.4}
.bioTools{display:flex;align-items:center;justify-content:space-between;gap:12px}
.emojiBar{display:flex;gap:4px}
.emojiBar button{width:27px;height:27px;padding:0;border:1px solid rgba(151,208,219,.12);border-radius:7px;background:rgba(2,14,23,.42);cursor:pointer;font-size:14px}
.emojiBar button:hover{border-color:rgba(245,138,75,.36);background:rgba(245,138,75,.07)}
.bioCounter{color:rgba(210,230,234,.43);font-size:7.5px}.bioCounter b{color:rgba(245,240,232,.78)}
.interestSection{margin-top:10px;padding-top:10px;border-top:1px solid rgba(151,208,219,.10);transition:filter .2s ease}
.interestSection.limitReached{animation:interestLimit .65s ease}
@keyframes interestLimit{0%,100%{filter:none}35%{filter:drop-shadow(0 0 9px rgba(245,138,75,.50))}}
.interestHeading{margin-bottom:7px}.interestHeading>span{color:rgba(255,174,104,.72);font-size:7.5px;font-weight:800}
.interestGrid{display:flex;flex-wrap:wrap;gap:5px}
.interestGrid button{padding:5px 8px;border:1px solid rgba(151,208,219,.13);border-radius:999px;background:rgba(2,14,23,.42);color:rgba(218,235,238,.61);cursor:pointer;font-size:7.3px}
.interestGrid button:hover{border-color:rgba(80,213,194,.34);color:rgba(218,235,238,.86)}
.interestGrid button.isSelected{border-color:rgba(245,138,75,.49);background:rgba(245,138,75,.10);color:rgba(255,213,180,.92)}
.customInterest{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:8px}
.customInterest input{height:30px;padding:0 10px;font-size:8px}
.customInterest button{padding:0 11px;border:1px solid rgba(80,213,194,.21);border-radius:7px;background:rgba(80,213,194,.07);color:rgba(197,238,234,.78);cursor:pointer;font-size:7px;font-weight:800;text-transform:uppercase}

/* Fin provisoire du bloc profil */
.profileReadyPanel{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:760px;margin:0 auto;padding:24px;text-align:center}
.profileReadyIcon{width:66px;height:66px;display:grid;place-items:center;margin:5px 0 18px;border:1px solid rgba(80,213,194,.34);border-radius:50%;background:rgba(80,213,194,.08);color:var(--teal);font-size:30px;box-shadow:0 0 40px rgba(80,213,194,.08)}
.profileReadyPanel h2{margin-bottom:12px;font-size:clamp(27px,2.2vw,38px)}
.profileReadyPanel p{max-width:650px;margin:0;color:rgba(225,238,240,.68);font-size:clamp(11px,.9vw,14px);line-height:1.55}
.profileReadyActions{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px}


/* Règles et valeurs */
.valuesWorkspace{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(9px,1.3vh,15px)}
.valuesHeader{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(380px,1.1fr);align-items:end;gap:clamp(18px,3vw,50px);padding:0 4px}
.valuesHeader h2{margin:0;color:rgba(245,240,232,.96);font:400 clamp(21px,1.65vw,30px)/1.08 Georgia,serif}
.valuesHeader p{max-width:650px;margin:0;color:rgba(225,238,240,.62);font-size:clamp(8px,.72vw,11px);line-height:1.5}
.valuesStage{min-height:0;display:grid;grid-template-columns:clamp(34px,3.2vw,46px) minmax(0,1fr) clamp(34px,3.2vw,46px);align-items:stretch;gap:clamp(7px,1vw,13px)}
.valueSlides{min-width:0;min-height:0;position:relative}
.valueSlide{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(10px,1.4vh,16px);padding:clamp(14px,2vh,24px) clamp(15px,2.2vw,30px);border:1px solid rgba(151,208,219,.13);border-radius:14px;background:radial-gradient(circle at 94% 4%,rgba(245,138,75,.13),transparent 31%),linear-gradient(145deg,rgba(5,31,45,.92),rgba(2,16,26,.83));box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 18px 44px rgba(0,0,0,.16);overflow:hidden;opacity:0;transform:translateX(12px);transition:opacity .22s ease,transform .22s ease}
.valueSlide.isActive{opacity:1;transform:none}
.valueIdentity{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);padding-bottom:clamp(9px,1.2vh,14px);border-bottom:1px solid rgba(151,208,219,.11)}
.valueIcon{width:clamp(42px,4.2vw,62px);height:clamp(42px,4.2vw,62px);display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(245,138,75,.48);border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(245,138,75,.18),rgba(7,31,44,.88));color:var(--orange-2);font:400 clamp(21px,2vw,31px)/1 Georgia,serif;box-shadow:0 0 35px rgba(245,138,75,.08)}
.valueIdentity small{display:block;margin-bottom:4px;color:rgba(80,213,194,.66);font-size:6.5px;font-weight:900;letter-spacing:.19em}
.valueIdentity h3{margin:0;color:#f5f0e8;font:400 clamp(24px,2.15vw,38px)/1 Georgia,serif;letter-spacing:-.025em}
.valueCommitments{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.5vw,20px)}
.valueCommitments section{min-height:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(15px,2.2vh,26px) clamp(15px,2vw,26px);border:1px solid rgba(151,208,219,.10);border-radius:12px;background:rgba(2,14,23,.32)}
.valueCommitments section:last-child{border-color:rgba(245,138,75,.12);background:linear-gradient(145deg,rgba(245,138,75,.055),rgba(2,14,23,.30))}
.valueCommitments span{margin-bottom:8px;color:rgba(80,213,194,.67);font-size:6.8px;font-weight:900;letter-spacing:.18em}
.valueCommitments section:last-child span{color:rgba(255,174,104,.72)}
.valueCommitments h4{max-width:430px;margin:0 0 clamp(8px,1.1vh,13px);color:rgba(245,240,232,.94);font:400 clamp(16px,1.35vw,23px)/1.18 Georgia,serif}
.valueCommitments p{max-width:470px;margin:0;color:rgba(222,237,240,.65);font-size:clamp(9px,.78vw,12px);line-height:1.52}
.valueArrow{align-self:center;width:100%;aspect-ratio:1;border:1px solid rgba(151,208,219,.15);border-radius:50%;background:rgba(3,18,28,.58);color:rgba(219,237,240,.68);cursor:pointer;font-size:clamp(15px,1.3vw,21px);transition:border-color .18s ease,background .18s ease,transform .18s ease}
.valueArrow:hover:not(:disabled){transform:scale(1.06);border-color:rgba(245,138,75,.42);background:rgba(245,138,75,.08);color:#fff}
.valueArrow:disabled{opacity:.18;cursor:default}
.valuesFooter{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 4px}
.valuesFooter .joinBack{justify-self:start}
.valueDots{display:flex;align-items:center;justify-content:center;gap:6px}
.valueDots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(151,208,219,.22);cursor:pointer;transition:width .18s ease,background .18s ease}
.valueDots button.isActive{width:22px;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--orange-2));box-shadow:0 0 14px rgba(245,138,75,.25)}
.valueProgress{justify-self:end;color:rgba(219,237,240,.45);font-size:7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.valueSlideFinal{grid-template-rows:auto minmax(0,1fr)}
.valueFinalCopy{min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:880px;margin:0 auto;padding:clamp(7px,1vh,12px) clamp(4px,1vw,14px)}
.valueFinalCopy>p{max-width:830px;margin:0 0 clamp(7px,1vh,11px);color:rgba(225,238,240,.70);font-size:clamp(10px,.82vw,13px);line-height:1.48}
.valueFinalCopy>p:first-child{color:#f5f0e8;font:400 clamp(17px,1.45vw,24px)/1.2 Georgia,serif}
.valuesAgreement{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;width:100%;margin:clamp(8px,1.2vh,14px) 0;padding:clamp(11px,1.5vh,16px) clamp(12px,1.5vw,18px);border:1px solid rgba(80,213,194,.17);border-radius:11px;background:rgba(80,213,194,.045);cursor:pointer;transition:border-color .18s ease,background .18s ease,filter .18s ease}
.valuesAgreement input{width:18px;height:18px;margin:0;accent-color:var(--orange)}
.valuesAgreement span{color:rgba(225,238,240,.74);font-size:clamp(8px,.73vw,11px);line-height:1.45}
.valuesAgreement.isChecked{border-color:rgba(80,213,194,.42);background:rgba(80,213,194,.075)}
.valuesAgreement.needsAttention{animation:valuesAttention .65s ease}
@keyframes valuesAttention{0%,100%{filter:none}35%{filter:drop-shadow(0 0 10px rgba(245,138,75,.52))}}
.valuesCommit{align-self:flex-end;margin-top:2px;min-width:220px}
.valuesAgreementError{margin:5px 0 0 auto!important;color:rgba(255,174,104,.88)!important;font-size:7.5px!important}
.valuesReadyPanel .profileReadyIcon{border-color:rgba(245,138,75,.37);background:rgba(245,138,75,.08);color:var(--orange-2)}

/* Charte photo */
.photoCharter{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.photoCharterBackdrop{position:absolute;inset:0;background:rgba(1,8,13,.78);backdrop-filter:blur(7px)}
.photoCharterDialog{position:relative;z-index:1;width:min(560px,92vw);padding:28px 30px;border:1px solid rgba(151,208,219,.22);border-radius:16px;background:radial-gradient(circle at 100% 0%,rgba(245,138,75,.15),transparent 35%),linear-gradient(145deg,#082b3d,#041722);box-shadow:0 34px 100px rgba(0,0,0,.55)}
.photoCharterDialog h2{margin:0 0 14px;font:400 28px/1.08 Georgia,serif}
.photoCharterDialog p{margin:0 0 12px;color:rgba(225,238,240,.69);font-size:12px;line-height:1.55}
.photoCharterClose{position:absolute;right:12px;top:10px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.04);color:rgba(225,238,240,.65);cursor:pointer;font-size:22px}
.photoCharterAccept{margin:20px 0 0 auto;min-width:235px}
.hasModal{overflow:hidden}

@media(max-width:1000px){
  .joinPage{grid-template-rows:clamp(72px,11vh,104px) 31px minmax(0,1fr)}
  .joinHeader{grid-template-columns:minmax(220px,1fr) minmax(250px,1.05fr)}
  .joinStatement{display:none}
  .joinBrand{padding-left:22px;padding-right:18px}
  .joinCard{width:min(96vw,930px);height:min(720px,96%)}
  .profileWorkspace{grid-template-columns:minmax(0,1.35fr) minmax(225px,.72fr);gap:11px}
  .profileImageChoices{grid-template-columns:1fr}
  .uploadChoice,.avatarChoice{height:58px}
  .liveAvatar{width:52px;height:52px;font-size:25px}
  .liveProfileTop h3{font-size:16px}
}

@media(max-width:700px){
  .joinPage{grid-template-rows:68px 25px minmax(0,1fr)}
  .joinHeader{grid-template-columns:1.05fr .95fr}
  .joinBrand{gap:8px;padding:8px 10px 8px 14px}
  .joinBrand img{width:31px}
  .joinBrandCopy strong{font-size:19px}.joinBrandCopy small{font-size:6px;letter-spacing:.11em}
  .joinHeaderVisual:before{background:linear-gradient(90deg,#061b28 0%,transparent 42%)}
  .joinHeaderVisual figcaption{display:none}
  .joinNavigation span{height:2px}
  .joinMain{padding:7px}
  .joinCard{width:100%;height:98%;min-height:0;border-radius:12px}
  .joinCardHeader{gap:8px;padding:11px 12px 9px}
  .joinEyebrow{margin-bottom:4px;font-size:5.5px}
  .joinCardHeader h1{font-size:17px;line-height:1.08}.joinCardHeader h1 .joinPathLine{margin-top:2px}
  .joinProgressText{font-size:5.5px;padding:5px 7px;white-space:nowrap}
  .joinSteps{padding:0 3px}
  .joinSteps:before{left:8%;right:8%}
  .joinSteps li{gap:0;padding:7px 2px}
  .joinSteps li>span{width:23px;height:23px;font-size:6px}
  .joinSteps li div{display:none}
  .joinCardBody{padding:7px 7px 12px}
  .joinView[data-view="age"]{gap:6px}
  .joinAgePanel{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:10px 10px 9px;border-left-width:2px}
  .joinSectionLabel{margin-bottom:4px;font-size:5.2px}
  .joinAgeCopy h2{margin-bottom:7px;font-size:17px}.joinAgeCopy h2 span{margin-top:3px}
  .joinAgeCopy p{margin-bottom:6px;font-size:8.2px;line-height:1.4}
  .joinContinue{align-self:flex-end;min-width:118px;padding:8px 9px 8px 11px;font-size:6.3px}.joinContinue b{width:18px;height:18px;font-size:11px}
  .joinAgePanel .joinContinue{min-width:132px;padding:9px 10px 9px 12px;font-size:7.2px}.joinAgePanel .joinContinue b{width:20px;height:20px;font-size:13px}
  .joinBack{padding:8px 9px;font-size:6px}
  .joinAppPromo{grid-template-columns:76px minmax(0,1fr);gap:9px;min-height:74px;padding:7px 9px}
  .joinAppPromo figure{height:64px;padding:2px}.joinAppPromo h2{margin-bottom:4px;font-size:17px;line-height:1.12}.joinAppPromo p{font-size:7.2px;line-height:1.34}
  .joinBodyMark{display:none}

  .profileChoiceCopy{padding:2px 0}.profileChoiceCopy h2{margin-bottom:8px;font-size:16px}.profileChoiceCopy p{margin-bottom:7px;font-size:7px;line-height:1.35}.profileChoiceButton{min-width:0;width:100%;padding:8px 9px;font-size:5.8px}.profileChoiceButton b{width:19px;height:19px;font-size:11px}.profileChoiceDivider{width:100%;margin:8px 0;font-size:4.8px}.profileChoiceButtonMember{font-size:5.8px}
  .profileWorkspace{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:6px}
  .profileEditor{padding:8px 8px 7px;border-left-width:2px}
  .profileIntro{margin-bottom:7px}.profileIntro h2{margin-bottom:4px;font-size:15.5px}.profileIntro p{font-size:6.5px;line-height:1.32}
  .fieldGroup{gap:4px}.fieldGroup>span,.profileImageHeading strong{font-size:9px}.bioField>label,.interestHeading strong{font-size:7.2px}
  .fieldGroup input{height:30px;padding:0 8px;font-size:8px}.fieldGroup small,.profileImageHeading small{font-size:6.3px;line-height:1.3}.interestHeading small{font-size:5.3px}
  .profileImageSection{margin-top:7px;padding-top:7px}.profileImageHeading,.interestHeading{margin-bottom:5px;align-items:center}.textLink{max-width:110px;font-size:5.5px;text-align:right}
  .profileImageChoices{grid-template-columns:1fr;gap:5px}.uploadChoice{height:42px;gap:7px;padding:5px 7px}.choiceIcon{width:27px;height:27px;font-size:16px}.uploadChoice strong{font-size:6.5px}.uploadChoice small{font-size:4.8px}
  .avatarChoices{gap:4px}.avatarChoice{height:35px;border-radius:7px;font-size:17px}
  .charterStatus{margin-top:5px;gap:5px;font-size:5.3px}.charterStatus i{width:12px;height:12px}
  .profileActions{padding-top:6px;gap:6px}
  .liveProfilePanel{padding:6px;border-radius:9px}.liveProfileLabel{margin-bottom:5px;font-size:4.3px;line-height:1.25}
  .liveProfileCard{padding:7px;border-radius:8px}.liveProfileTop{display:block;padding-bottom:6px}.liveAvatar{width:39px;height:39px;margin-bottom:6px;font-size:19px}.liveProfileTop h3{max-width:95px;font-size:10.5px}.liveProfileTop p{gap:3px;margin-top:4px;font-size:4.3px}.liveProfileTop img{width:10px;height:7px}
  .liveBio{min-height:32px;margin:7px 0;font-size:5.3px;line-height:1.35}.liveInterests{gap:3px}.liveInterests span{padding:3px 4px;font-size:4px}.liveProfileFooter{grid-template-columns:1fr;margin-top:auto;padding-top:6px;gap:2px}.liveProfileFooter span{font-size:3.8px}.liveProfileFooter b{display:inline;margin:0 2px 0 0;font-size:6px}.liveProfileHint{display:none}

  .profileWorkspaceStory .profileEditor{padding:7px}
  .bioField{gap:4px}.bioField textarea{height:64px;min-height:54px;padding:7px;font-size:7px}
  .emojiBar{gap:2px}.emojiBar button{width:20px;height:20px;border-radius:5px;font-size:10px}.bioCounter{font-size:5px}
  .interestSection{margin-top:6px;padding-top:6px}.interestGrid{gap:3px}.interestGrid button{padding:3px 5px;font-size:4.8px}.customInterest{gap:4px;margin-top:5px}.customInterest input{height:23px;padding:0 6px;font-size:5.5px}.customInterest button{padding:0 6px;font-size:4.7px}
  .interestHeading>span{font-size:5px}
  .profileReadyPanel{padding:12px}.profileReadyIcon{width:48px;height:48px;margin-bottom:12px;font-size:23px}.profileReadyPanel h2{margin-bottom:8px;font-size:23px}.profileReadyPanel p{font-size:8px}.profileReadyActions{gap:8px;margin-top:18px}
  .photoCharterDialog{padding:22px 18px}.photoCharterDialog h2{font-size:22px}.photoCharterDialog p{font-size:9px}.photoCharterAccept{min-width:210px}
  .valuesWorkspace{gap:6px}
  .valuesHeader{grid-template-columns:1fr;gap:4px;padding:0 2px}
  .valuesHeader h2{font-size:15.5px}
  .valuesHeader p{font-size:5.7px;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .valuesStage{grid-template-columns:25px minmax(0,1fr) 25px;gap:4px}
  .valueSlide{gap:6px;padding:8px;border-radius:9px}
  .valueIdentity{gap:7px;padding-bottom:6px}
  .valueIcon{width:34px;height:34px;font-size:18px}
  .valueIdentity small{margin-bottom:2px;font-size:4.3px}.valueIdentity h3{font-size:17px}
  .valueCommitments{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:10px}
  .valueCommitments section{justify-content:flex-start;padding:10px 9px;border-radius:7px}
  .valueCommitments span{margin-bottom:4px;font-size:4.8px}.valueCommitments h4{margin-bottom:4px;font-size:10.5px;line-height:1.14}.valueCommitments p{font-size:6.4px;line-height:1.34}
  .valueArrow{font-size:11px}
  .valuesFooter{grid-template-columns:1fr auto 1fr;gap:5px;padding:0 2px}.valuesFooter .joinBack{font-size:4.8px;padding:6px}.valueDots{gap:3px}.valueDots button{width:5px;height:5px}.valueDots button.isActive{width:13px}.valueProgress{font-size:4.5px}
  .valueFinalCopy{padding:3px 2px}.valueFinalCopy>p{margin-bottom:4px;font-size:5.7px;line-height:1.3}.valueFinalCopy>p:first-child{font-size:10px}
  .valuesAgreement{gap:6px;margin:4px 0;padding:6px 7px;border-radius:7px}.valuesAgreement input{width:13px;height:13px}.valuesAgreement span{font-size:5.2px;line-height:1.25}.valuesCommit{min-width:130px;margin-top:1px}.valuesAgreementError{font-size:4.8px!important}

}

@media(max-height:720px) and (min-width:701px){
  .joinPage{grid-template-rows:72px 27px minmax(0,1fr)}
  .joinBrand{padding-top:8px;padding-bottom:8px}
  .joinCard{height:97%}
  .joinCardHeader{padding-top:10px;padding-bottom:9px}.joinCardHeader h1{font-size:24px}
  .joinSteps li{padding:7px 6px}.joinSteps li>span{width:26px;height:26px}
  .joinCardBody{padding:8px 14px 13px}
  .joinAgePanel{padding:10px 16px}.joinAgeCopy h2{margin-bottom:7px;font-size:21px}.joinAgeCopy h2 span{margin-top:3px}.joinAgeCopy p{margin-bottom:6px;font-size:10px;line-height:1.38}
  .joinAppPromo{min-height:78px;padding:6px 14px;grid-template-columns:92px minmax(0,1fr)}.joinAppPromo figure{height:68px;padding:2px}.joinAppPromo h2{margin-bottom:4px;font-size:21px;line-height:1.12}.joinAppPromo p{font-size:9px;line-height:1.34}
  .profileEditor{padding:9px 14px}.profileIntro{margin-bottom:8px}.profileIntro h2{font-size:20px}.profileIntro p{font-size:8.5px}
  .profileChoiceCopy h2{margin-bottom:12px;font-size:22px}.profileChoiceCopy p{margin-bottom:9px;font-size:9px}.profileChoiceButton{padding:10px 12px;font-size:7.5px}.profileChoiceButton b{width:22px;height:22px;font-size:13px}.profileChoiceDivider{margin:10px 0}
  .fieldGroup input{height:34px}.profileImageSection{margin-top:8px;padding-top:8px}.uploadChoice,.avatarChoice{height:48px}.choiceIcon{width:30px;height:30px}.avatarChoice{font-size:21px}
  .liveProfilePanel{padding:10px}.liveProfileCard{padding:12px}.liveAvatar{width:48px;height:48px}.liveBio{min-height:38px;margin:9px 0;font-size:7.5px}.liveProfileHint{font-size:5.5px}
  .bioField textarea{height:62px}.emojiBar button{width:23px;height:23px}.interestSection{margin-top:7px;padding-top:7px}.interestGrid button{padding:4px 6px;font-size:6px}.customInterest{margin-top:6px}.customInterest input{height:26px}
  .profileActions{padding-top:7px}
  .valuesWorkspace{gap:7px}.valuesHeader{gap:22px}.valuesHeader h2{font-size:20px}.valuesHeader p{font-size:7px;line-height:1.35}
  .valueSlide{gap:8px;padding:10px 15px}.valueIdentity{padding-bottom:7px}.valueIcon{width:42px;height:42px;font-size:21px}.valueIdentity h3{font-size:24px}
  .valueCommitments{gap:9px}.valueCommitments section{padding:10px 13px}.valueCommitments h4{margin-bottom:6px;font-size:15px}.valueCommitments p{font-size:7.5px;line-height:1.4}
  .valueFinalCopy>p{font-size:8px}.valueFinalCopy>p:first-child{font-size:16px}.valuesAgreement{margin:6px 0;padding:8px 10px}.valuesAgreement span{font-size:7px}.valuesCommit{min-width:190px}

}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Présentation du modèle économique */
.paymentWorkspace{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:clamp(8px,1.2vh,14px);padding:clamp(4px,.7vw,8px)}
.paymentHeader{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:22px;align-items:end;padding:0 4px}
.paymentHeader h2{margin:0;color:#f6f2eb;font:400 clamp(24px,2.2vw,38px)/1.04 Georgia,serif}
.paymentHeader p{margin:0;color:rgba(225,238,240,.68);font-size:clamp(9px,.78vw,12px);line-height:1.52}
.paymentGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}
.paymentCard{position:relative;overflow:hidden;padding:clamp(16px,2vw,28px);border:1px solid rgba(151,208,219,.15);border-radius:14px;background:linear-gradient(145deg,rgba(8,43,61,.92),rgba(3,20,30,.95));box-shadow:0 16px 42px rgba(0,0,0,.16)}
.paymentCardChoice:after{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:50%;background:rgba(245,138,75,.09)}
.paymentCardIcon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;border:1px solid rgba(245,138,75,.35);border-radius:50%;color:var(--orange-2);font-size:23px}
.paymentCard small{display:block;margin-bottom:7px;color:rgba(245,167,104,.8);font-size:7px;font-weight:800;letter-spacing:.14em}
.paymentCard h3{max-width:480px;margin:0 0 12px;color:#f6f1e9;font:400 clamp(18px,1.5vw,26px)/1.15 Georgia,serif}
.paymentCard p{max-width:520px;margin:0 0 9px;color:rgba(225,238,240,.67);font-size:clamp(9px,.75vw,11.5px);line-height:1.5}
.paymentCardAmount{display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 100% 0%,rgba(80,213,194,.09),transparent 42%),linear-gradient(145deg,rgba(6,35,49,.96),rgba(3,18,28,.96))}
.paymentPrice{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}.paymentPrice b{color:#fff;font:400 clamp(31px,3vw,48px)/1 Georgia,serif}.paymentPrice small{margin:0;color:rgba(225,238,240,.5);font-size:7px;letter-spacing:.08em;text-transform:uppercase}
.paymentCard ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.paymentCard li{position:relative;padding-left:18px;color:rgba(225,238,240,.72);font-size:clamp(8px,.72vw,11px);line-height:1.35}.paymentCard li:before{content:"✓";position:absolute;left:0;color:#64d6c2;font-weight:800}
.paymentManifesto{margin:0;padding:12px 16px;border-left:3px solid var(--orange);background:rgba(245,138,75,.055)}
.paymentManifesto p,.paymentManifesto strong{margin:0}.paymentManifesto p{color:rgba(225,238,240,.62);font-size:clamp(8px,.7vw,10.5px)}.paymentManifesto strong{display:block;margin-top:3px;color:#f7f2ea;font:400 clamp(15px,1.25vw,21px)/1.18 Georgia,serif}
.paymentCommitment{display:grid;grid-template-columns:minmax(210px,.75fr) minmax(0,1.25fr);gap:14px;align-items:center}.paymentCommitment>p{margin:0;color:#f4efe7;font:400 clamp(12px,1vw,16px)/1.3 Georgia,serif}
.paymentAgreement{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:11px 13px;border:1px solid rgba(80,213,194,.17);border-radius:10px;background:rgba(80,213,194,.04);cursor:pointer}.paymentAgreement input{width:18px;height:18px;margin:0;accent-color:var(--orange)}.paymentAgreement span{color:rgba(225,238,240,.7);font-size:clamp(7px,.67vw,10px);line-height:1.4}.paymentAgreement.isChecked{border-color:rgba(80,213,194,.42);background:rgba(80,213,194,.075)}.paymentAgreement.needsAttention{animation:valuesAttention .65s ease}
.paymentAgreementError{grid-column:2;margin:-8px 0 0!important;color:rgba(255,174,104,.9)!important;font-size:7.5px!important}
.paymentFooter{display:flex;justify-content:space-between;align-items:center;gap:10px}
@media(max-width:700px){.paymentWorkspace{gap:6px}.paymentHeader{grid-template-columns:1fr;gap:4px}.paymentHeader h2{font-size:17px}.paymentHeader p{font-size:5.8px;line-height:1.35}.paymentGrid{grid-template-columns:1fr;gap:6px}.paymentCard{padding:9px;border-radius:9px}.paymentCardIcon{width:28px;height:28px;margin-bottom:6px;font-size:14px}.paymentCard small{margin-bottom:4px;font-size:4.5px}.paymentCard h3{margin-bottom:5px;font-size:13px}.paymentCard p{margin-bottom:4px;font-size:5.5px}.paymentPrice{margin-bottom:6px}.paymentPrice b{font-size:23px}.paymentPrice small{font-size:4.2px}.paymentCard ul{grid-template-columns:1fr 1fr;gap:4px 7px}.paymentCard li{padding-left:11px;font-size:4.8px}.paymentManifesto{padding:7px 9px}.paymentManifesto p{font-size:4.7px}.paymentManifesto strong{font-size:10px}.paymentCommitment{grid-template-columns:1fr;gap:5px}.paymentCommitment>p{font-size:8px}.paymentAgreement{padding:7px 8px;gap:7px}.paymentAgreement input{width:14px;height:14px}.paymentAgreement span{font-size:5px}.paymentAgreementError{grid-column:1;margin:-2px 0 0!important;font-size:4.6px!important}.paymentFooter{gap:6px}}


/* Ajustements du 25 juillet 2026 — boutons, choix visuel et validations */
.joinContinue{min-width:172px;min-height:54px;gap:18px;padding:13px 15px 13px 19px;font-size:11px}
.joinContinue b{width:27px;height:27px;flex:0 0 27px;display:flex;align-items:center;justify-content:center;padding:0;font-size:18px;line-height:27px;transform:none}
.joinContinue b[aria-hidden="true"]{padding:0;line-height:27px}
.joinContinue:disabled,.joinContinue[aria-disabled="true"]{opacity:.42;cursor:not-allowed;filter:grayscale(.38) saturate(.55);box-shadow:none}
.joinContinue:disabled:hover,.joinContinue[aria-disabled="true"]:hover{transform:none;box-shadow:none}
.profileChoiceButton{min-height:54px;padding:13px 15px 13px 19px;font-size:11px}
.profileChoiceButton b{width:27px;height:27px;display:flex;align-items:center;justify-content:center;padding:0;font-size:18px;line-height:27px}
.profileChoiceButtonMember{padding:13px 15px 13px 19px;font-size:11px}
.joinAppPromo h2{color:var(--orange-2)}
.joinAppPromo h2 .appBrand{color:var(--text)}
.joinAppPromo h2 .appPromise{color:var(--orange-2)}
.profileImageHeading small{font-size:clamp(12px,.92vw,15px)}
.textLink{font-size:clamp(10px,.76vw,12px)}
.profileImageChoices{grid-template-columns:minmax(215px,.82fr) minmax(310px,1.18fr);align-items:stretch}
.uploadChoice{height:146px}
.avatarChoices{min-width:0;height:146px;display:grid;grid-template-rows:repeat(3,42px);grid-auto-flow:column;grid-auto-columns:42px;align-content:center;gap:6px;padding:4px 2px 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:rgba(245,138,75,.45) rgba(2,14,23,.35)}
.avatarChoice{width:42px;height:42px;border-radius:9px;font-size:22px}
.uploadChoice.isSelected{border-style:solid;border-color:rgba(245,138,75,.68);background:rgba(245,138,75,.08)}
.formRequirements{display:flex;flex-wrap:wrap;gap:7px 10px;margin-top:10px;padding:8px 10px;border:1px solid rgba(151,208,219,.10);border-radius:8px;background:rgba(2,14,23,.27)}
.formRequirements span{color:rgba(210,230,234,.50);font-size:clamp(9px,.67vw,11px);font-weight:700}
.formRequirements span.isComplete{color:rgba(80,213,194,.88)}
.photoCharterAgreement{display:flex;align-items:flex-start;gap:10px;margin:16px 0 14px;padding:12px 14px;border:1px solid rgba(245,138,75,.22);border-radius:9px;background:rgba(245,138,75,.06);cursor:pointer}
.photoCharterAgreement input{width:18px;height:18px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--orange)}
.photoCharterAgreement span{font-size:clamp(11px,.86vw,14px);line-height:1.4}
.profileWorkspaceStory .profileEditor{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(245,138,75,.35) rgba(2,14,23,.18)}
.profileWorkspaceStory .profileIntro h2{font-size:clamp(28px,2.1vw,38px)}
.profileWorkspaceStory .profileIntro p{font-size:clamp(13px,1vw,16px);line-height:1.5}
.bioField>label,.interestHeading strong{font-size:clamp(14px,1.05vw,18px)}
.bioField textarea{height:112px;min-height:92px;padding:14px 16px;font-size:clamp(13px,.96vw,15.5px);line-height:1.48}
.bioTools{align-items:flex-start}
.emojiBar{min-width:0;max-width:calc(100% - 70px);display:flex;gap:5px;padding-bottom:5px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(245,138,75,.38) rgba(2,14,23,.25)}
.emojiBar button{width:31px;height:31px;flex:0 0 31px;font-size:16px}
.bioCounter{padding-top:8px;font-size:clamp(9px,.68vw,11px)}
.interestSection{margin-top:14px;padding-top:14px}
.interestHeading small{font-size:clamp(9px,.7vw,11px)}
.interestHeading>span{font-size:clamp(9px,.7vw,11px)}
.interestGrid{gap:7px}
.interestGrid button{padding:7px 10px;font-size:clamp(9px,.69vw,11px)}
.customInterest{gap:9px;margin-top:11px}
.customInterest input{height:40px;padding:0 12px;font-size:clamp(10px,.78vw,12.5px)}
.customInterest button{padding:0 15px;font-size:clamp(8px,.63vw,10px)}
.formRequirementsStory{margin-top:10px}
.profileWorkspaceStory .profileActions{padding-top:12px}
@media(max-width:700px){
.joinContinue{min-width:132px;min-height:40px;padding:9px 10px 9px 12px;font-size:7.2px}.joinContinue b{width:20px;height:20px;flex-basis:20px;font-size:13px;line-height:20px}.joinContinue b[aria-hidden="true"]{line-height:20px}
.profileChoiceButton,.profileChoiceButtonMember{min-height:40px;padding:9px 10px 9px 12px;font-size:7.2px}.profileChoiceButton b{width:20px;height:20px;font-size:13px;line-height:20px}
.profileImageChoices{grid-template-columns:1fr}.uploadChoice{height:48px}.avatarChoices{height:80px;grid-template-rows:repeat(2,34px);grid-auto-columns:34px;gap:4px}.avatarChoice{width:34px;height:34px;font-size:17px}
.formRequirements{gap:4px 6px;margin-top:5px;padding:5px 6px}.formRequirements span{font-size:5.4px}
.profileWorkspaceStory .profileIntro h2{font-size:17px}.profileWorkspaceStory .profileIntro p{font-size:7px}.bioField>label,.interestHeading strong{font-size:7.8px}.bioField textarea{height:66px;min-height:56px;padding:7px;font-size:7.2px}
.emojiBar{max-width:calc(100% - 38px);gap:3px}.emojiBar button{width:22px;height:22px;flex-basis:22px;font-size:11px}.bioCounter{padding-top:5px;font-size:5.2px}
.interestHeading small,.interestHeading>span{font-size:5.4px}.interestGrid{gap:3px}.interestGrid button{padding:3px 5px;font-size:5px}.customInterest input{height:24px;font-size:5.7px}.customInterest button{font-size:4.8px}
.photoCharterAgreement{gap:7px;margin:10px 0;padding:8px}.photoCharterAgreement input{width:14px;height:14px}.photoCharterAgreement span{font-size:6.5px}}
@media(max-height:720px) and (min-width:701px){
.joinContinue{min-height:44px;padding:9px 11px 9px 14px;font-size:8.5px}.joinContinue b{width:23px;height:23px;flex-basis:23px;font-size:15px;line-height:23px}.joinContinue b[aria-hidden="true"]{line-height:23px}
.profileChoiceButton,.profileChoiceButtonMember{min-height:44px;padding:9px 11px 9px 14px;font-size:8.5px}.profileChoiceButton b{width:23px;height:23px;font-size:15px;line-height:23px}
.profileImageChoices{grid-template-columns:minmax(190px,.82fr) minmax(260px,1.18fr)}.uploadChoice{height:94px}.avatarChoices{height:94px;grid-template-rows:repeat(2,38px);grid-auto-columns:38px;gap:5px}.avatarChoice{width:38px;height:38px;font-size:19px}
.profileWorkspaceStory .profileIntro h2{font-size:23px}.profileWorkspaceStory .profileIntro p{font-size:9px}.bioField>label,.interestHeading strong{font-size:10px}.bioField textarea{height:70px;min-height:60px;padding:8px 10px;font-size:9px}
.emojiBar button{width:25px;height:25px;flex-basis:25px;font-size:13px}.interestGrid{gap:4px}.interestGrid button{padding:4px 7px;font-size:6.4px}.customInterest input{height:28px;font-size:7px}.customInterest button{font-size:5.8px}.formRequirements{margin-top:6px;padding:6px 8px}.formRequirements span{font-size:6.5px}}

/* Ajustements du 25 juillet 2026 — lisibilité renforcée de la planche Valeurs */
.valuesHeader .joinSectionLabel{
  margin-bottom:10px;
  font-size:clamp(9px,.72vw,12px);
}
.valuesHeader h2{
  font-size:clamp(25px,1.95vw,35px);
}
.valuesHeader p{
  max-width:760px;
  font-size:clamp(13px,1.02vw,16px);
  line-height:1.55;
}
.valueIdentity small{
  margin-bottom:6px;
  font-size:clamp(8px,.65vw,10px);
}
.valueIdentity h3{
  font-size:clamp(30px,2.35vw,43px);
}
.valueCommitments span{
  margin-bottom:10px;
  font-size:clamp(8px,.65vw,10px);
}
.valueCommitments h4{
  margin-bottom:clamp(10px,1.25vh,15px);
  font-size:clamp(20px,1.55vw,27px);
  line-height:1.2;
}
.valueCommitments p{
  font-size:clamp(12.5px,.95vw,15.5px);
  line-height:1.58;
}
.valuesFooter .joinBack{
  font-size:clamp(9px,.67vw,10.5px);
}
.valueProgress{
  font-size:clamp(9px,.67vw,10.5px);
}
.valueFinalCopy>p{
  font-size:clamp(12.5px,.95vw,15.5px);
  line-height:1.55;
}
.valueFinalCopy>p:first-child{
  font-size:clamp(21px,1.65vw,29px);
}
.valuesAgreement span{
  font-size:clamp(11.5px,.88vw,14px);
  line-height:1.5;
}
.valuesAgreementError{
  font-size:clamp(9px,.68vw,11px)!important;
}

@media(max-width:700px){
  .valuesHeader .joinSectionLabel{margin-bottom:5px;font-size:6px}
  .valuesHeader h2{font-size:17px}
  .valuesHeader p{font-size:6.8px;line-height:1.38}
  .valueIdentity small{font-size:5.1px}
  .valueIdentity h3{font-size:19px}
  .valueCommitments span{font-size:5.5px}
  .valueCommitments h4{font-size:11.8px;line-height:1.18}
  .valueCommitments p{font-size:7px;line-height:1.4}
  .valuesFooter .joinBack{font-size:5.4px}
  .valueProgress{font-size:5.2px}
  .valueFinalCopy>p{font-size:6.4px;line-height:1.38}
  .valueFinalCopy>p:first-child{font-size:11px}
  .valuesAgreement span{font-size:5.8px;line-height:1.35}
  .valuesAgreementError{font-size:5.1px!important}
}

@media(max-height:720px) and (min-width:701px){
  .valuesHeader .joinSectionLabel{margin-bottom:5px;font-size:7px}
  .valuesHeader h2{font-size:22px}
  .valuesHeader p{font-size:8.5px;line-height:1.4}
  .valueIdentity small{font-size:6.5px}
  .valueIdentity h3{font-size:27px}
  .valueCommitments span{font-size:6.5px}
  .valueCommitments h4{font-size:17px;line-height:1.18}
  .valueCommitments p{font-size:8.8px;line-height:1.45}
  .valuesFooter .joinBack{font-size:7px}
  .valueProgress{font-size:7px}
  .valueFinalCopy>p{font-size:9px}
  .valueFinalCopy>p:first-child{font-size:18px}
  .valuesAgreement span{font-size:8px}
}


/* Correctif du 25 juillet 2026 — galerie d’avatars compacte et actions toujours accessibles */
@media (min-width:701px){
  .profileEditor{
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(245,138,75,.35) rgba(2,14,23,.18);
  }
  .profileImageSection{
    margin-top:clamp(9px,1.25vh,14px);
    padding-top:clamp(9px,1.2vh,13px);
  }
  .profileImageChoices{
    grid-template-columns:minmax(200px,.72fr) minmax(360px,1.28fr);
    gap:12px;
  }
  .uploadChoice{
    height:96px;
  }
  .avatarChoices{
    height:96px;
    grid-template-columns:none;
    grid-template-rows:repeat(2,38px);
    grid-auto-flow:column;
    grid-auto-columns:38px;
    align-content:center;
    justify-content:start;
    gap:6px;
    padding:6px 4px 8px;
    overflow-x:auto;
    overflow-y:hidden;
  }
  .avatarChoice{
    width:38px;
    height:38px;
    border-radius:9px;
    font-size:20px;
  }
  .profileActions{
    position:sticky;
    z-index:8;
    bottom:0;
    flex:0 0 auto;
    margin-top:auto;
    padding:13px 0 4px;
    background:linear-gradient(180deg,rgba(3,18,28,0),rgba(3,18,28,.96) 30%,rgba(3,18,28,.99));
  }
}

@media (max-height:720px) and (min-width:701px){
  .profileImageChoices{grid-template-columns:minmax(180px,.72fr) minmax(320px,1.28fr)}
  .uploadChoice{height:72px}
  .avatarChoices{
    height:72px;
    grid-template-rows:repeat(2,29px);
    grid-auto-columns:29px;
    gap:4px;
    padding:5px 3px 7px;
  }
  .avatarChoice{width:29px;height:29px;font-size:15px;border-radius:7px}
  .profileActions{padding-top:9px}
}

/* Planche Règles et valeurs — lisibilité renforcée */
@media (min-width:701px) and (min-height:721px){
  .valuesHeader .joinSectionLabel{font-size:clamp(10px,.78vw,13px)}
  .valuesHeader h2{font-size:clamp(29px,2.15vw,39px)}
  .valuesHeader p{max-width:820px;font-size:clamp(15px,1.12vw,18px);line-height:1.55}
  .valueIdentity small{font-size:clamp(10px,.76vw,12px)}
  .valueIdentity h3{font-size:clamp(36px,2.7vw,49px)}
  .valueCommitments span{font-size:clamp(10px,.76vw,12px)}
  .valueCommitments h4{font-size:clamp(23px,1.72vw,31px);line-height:1.2}
  .valueCommitments p{font-size:clamp(14px,1.05vw,17px);line-height:1.56}
  .valuesFooter .joinBack,.valueProgress{font-size:clamp(10px,.75vw,12px)}
  .valueFinalCopy>p{font-size:clamp(14px,1.05vw,17px)}
  .valueFinalCopy>p:first-child{font-size:clamp(24px,1.8vw,32px)}
  .valuesAgreement span{font-size:clamp(13px,.96vw,16px)}
}

/* --------------------------------------------------------------------------
   25 juillet 2026 — reprise fidèle des deux maquettes : profil prêt + charte
   -------------------------------------------------------------------------- */
.srOnly{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Titres propres aux deux planches */
.joinCard[data-current-view="profile-ready"] .joinCardHeader h1,
.joinCard[data-current-view="values"] .joinCardHeader h1{
  max-width:980px;
  font-size:clamp(38px,3.2vw,58px);
  line-height:1.02;
  letter-spacing:-.035em;
}
.joinCard[data-current-view="profile-ready"] .joinCardHeader,
.joinCard[data-current-view="values"] .joinCardHeader{
  padding-top:clamp(19px,2.8vh,33px);
  padding-bottom:clamp(15px,2.1vh,24px);
}
.joinCard[data-current-view="profile-ready"] .joinCardHeader h1 .joinPathLine,
.joinCard[data-current-view="values"] .joinCardHeader h1 .joinPathLine{
  margin-top:3px;
  color:var(--orange-2);
}

/* Planche 1 : confirmation du profil */
.joinCard[data-current-view="profile-ready"] .joinCardBody{
  padding:0 clamp(22px,3vw,48px) clamp(10px,1.4vh,18px);
}
.joinView[data-view="profile-ready"]{
  position:relative;
  overflow:hidden;
}
.joinView[data-view="profile-ready"]:after{
  content:"";
  position:absolute;
  z-index:0;
  left:6%;
  right:6%;
  bottom:-2px;
  height:42%;
  opacity:.24;
  background:
    linear-gradient(#092637,#092637) 0 100%/8% 45% no-repeat,
    linear-gradient(#092637,#092637) 7% 100%/9% 67% no-repeat,
    linear-gradient(#092637,#092637) 15% 100%/12% 52% no-repeat,
    linear-gradient(#092637,#092637) 26% 100%/9% 88% no-repeat,
    linear-gradient(#092637,#092637) 34% 100%/15% 70% no-repeat,
    linear-gradient(#092637,#092637) 48% 100%/11% 95% no-repeat,
    linear-gradient(#092637,#092637) 58% 100%/12% 74% no-repeat,
    linear-gradient(#092637,#092637) 69% 100%/10% 91% no-repeat,
    linear-gradient(#092637,#092637) 78% 100%/15% 57% no-repeat,
    linear-gradient(#092637,#092637) 92% 100%/8% 39% no-repeat;
  pointer-events:none;
}
.profileReadyPanel{
  position:relative;
  z-index:1;
  max-width:1120px;
  padding:clamp(22px,3.3vh,45px) 22px clamp(16px,2vh,26px);
  justify-content:flex-start;
}
.profileReadyPanel>.joinSectionLabel{
  margin:0 0 clamp(12px,1.8vh,20px);
  color:rgba(80,213,194,.86);
  font-size:clamp(9px,.7vw,12px);
}
.profileReadyIcon{
  width:clamp(66px,5.4vw,86px);
  height:clamp(66px,5.4vw,86px);
  margin:0 0 clamp(54px,7.2vh,78px);
  font-size:clamp(34px,2.8vw,45px);
}
.profileReadyPanel>p{
  display:flex;
  flex-direction:column;
  max-width:1080px;
  margin:0;
  color:rgba(245,240,232,.96);
  font:400 clamp(22px,1.75vw,31px)/1.52 Georgia,serif;
  text-align:center;
}
.profileReadyPanel>p span{display:block}
.profileReadyActions{
  flex-direction:column;
  gap:12px;
  margin-top:clamp(30px,4.4vh,50px);
}
.profileReadyActions .joinContinue{
  min-width:268px;
}
.profileReadyActions .joinBack{
  min-width:196px;
}

/* Planche 2 : règles et valeurs */
.joinCard[data-current-view="values"] .joinCardBody{
  padding:clamp(19px,2.6vh,30px) clamp(26px,2.8vw,42px) clamp(13px,1.7vh,21px);
}
.valuesWorkspace{
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(16px,2.1vh,24px);
}
.valuesHeader{
  display:block;
  padding:0;
}
.valuesHeader>p{
  max-width:none;
  margin:0;
  color:rgba(225,238,240,.72);
  font-size:clamp(15px,1.16vw,20px);
  line-height:1.55;
}
.valuesStage{
  grid-template-columns:clamp(50px,4.4vw,66px) minmax(0,1fr) clamp(50px,4.4vw,66px);
  gap:clamp(14px,1.45vw,23px);
  align-items:center;
}
.valueSlides{
  height:100%;
}
.valueSlide{
  padding:clamp(24px,3vh,36px) clamp(28px,2.7vw,43px);
  gap:clamp(18px,2.2vh,27px);
  border-radius:17px;
}
.valueIdentity{
  gap:clamp(17px,1.7vw,25px);
  padding-bottom:clamp(16px,2vh,23px);
}
.valueIcon{
  width:clamp(66px,5.4vw,84px);
  height:clamp(66px,5.4vw,84px);
  font-size:clamp(32px,2.6vw,43px);
}
.valueIdentity small{
  margin-bottom:7px;
  font-size:clamp(9px,.72vw,12px);
}
.valueIdentity h3{
  font-size:clamp(40px,3.05vw,55px);
}
.valueCommitments{
  gap:clamp(20px,2vw,31px);
}
.valueCommitments section{
  padding:clamp(25px,3vh,37px) clamp(26px,2.45vw,39px);
  justify-content:center;
  border-radius:14px;
}
.valueCommitments span{
  margin-bottom:13px;
  font-size:clamp(9px,.72vw,12px);
}
.valueCommitments h4{
  max-width:560px;
  margin-bottom:clamp(15px,1.9vh,22px);
  font-size:clamp(25px,1.95vw,35px);
  line-height:1.18;
}
.valueCommitments p{
  max-width:590px;
  font-size:clamp(15px,1.15vw,19px);
  line-height:1.58;
}
.valueArrow{
  width:clamp(50px,4.4vw,66px);
  font-size:clamp(21px,1.7vw,29px);
}
.valuesFooter{
  padding:0 1px;
}
.valuesFooter .joinBack{
  font-size:clamp(10px,.75vw,12px);
}
.valueProgress{
  font-size:clamp(10px,.75vw,12px);
}
.valueDots{gap:8px}
.valueDots button{width:10px;height:10px}
.valueDots button.isActive{width:28px}

/* Hauteurs plus courtes : conserver tous les éléments sans écraser la composition */
@media (max-height:760px) and (min-width:701px){
  .joinCard[data-current-view="profile-ready"] .joinCardHeader h1,
  .joinCard[data-current-view="values"] .joinCardHeader h1{font-size:clamp(31px,2.55vw,45px)}
  .profileReadyPanel{padding-top:14px}
  .profileReadyIcon{width:58px;height:58px;margin-bottom:25px;font-size:29px}
  .profileReadyPanel>p{font-size:clamp(17px,1.35vw,23px);line-height:1.42}
  .profileReadyActions{margin-top:22px;gap:8px}
  .valuesWorkspace{gap:9px}
  .valuesHeader>p{font-size:clamp(11px,.9vw,15px);line-height:1.42}
  .valuesStage{grid-template-columns:42px minmax(0,1fr) 42px;gap:10px}
  .valueSlide{padding:14px 20px;gap:10px}
  .valueIdentity{gap:12px;padding-bottom:10px}
  .valueIcon{width:52px;height:52px;font-size:26px}
  .valueIdentity small{font-size:7px;margin-bottom:4px}
  .valueIdentity h3{font-size:31px}
  .valueCommitments{gap:13px}
  .valueCommitments section{padding:15px 18px}
  .valueCommitments span{font-size:7px;margin-bottom:7px}
  .valueCommitments h4{font-size:20px;margin-bottom:9px}
  .valueCommitments p{font-size:11.5px;line-height:1.45}
  .valueArrow{width:42px;font-size:19px}
}

@media (max-width:700px){
  .joinCard[data-current-view="profile-ready"] .joinCardHeader h1,
  .joinCard[data-current-view="values"] .joinCardHeader h1{font-size:20px;line-height:1.05}
  .desktopBreak{display:none}
  .profileReadyPanel{padding:10px 8px}
  .profileReadyPanel>.joinSectionLabel{font-size:6px;margin-bottom:7px}
  .profileReadyIcon{width:44px;height:44px;margin-bottom:17px;font-size:22px}
  .profileReadyPanel>p{font-size:10px;line-height:1.42}
  .profileReadyActions{margin-top:15px;gap:7px}
  .profileReadyActions .joinContinue{min-width:165px}
  .profileReadyActions .joinBack{min-width:135px}
  .joinCard[data-current-view="values"] .joinCardBody{padding:8px 7px 11px}
  .valuesWorkspace{gap:7px}
  .valuesHeader>p{font-size:7px;line-height:1.36}
  .valuesHeader>p br{display:none}
  .valuesStage{grid-template-columns:26px minmax(0,1fr) 26px;gap:4px}
  .valueSlide{padding:8px;gap:6px;border-radius:9px}
  .valueIdentity{gap:7px;padding-bottom:6px}
  .valueIcon{width:34px;height:34px;font-size:18px}
  .valueIdentity small{font-size:4.8px;margin-bottom:2px}
  .valueIdentity h3{font-size:19px}
  .valueCommitments{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:6px}
  .valueCommitments section{padding:8px 9px;border-radius:7px}
  .valueCommitments span{font-size:4.9px;margin-bottom:4px}
  .valueCommitments h4{font-size:11.5px;margin-bottom:4px;line-height:1.16}
  .valueCommitments p{font-size:6.6px;line-height:1.34}
  .valueArrow{width:26px;font-size:12px}
  .valueDots{gap:3px}.valueDots button{width:5px;height:5px}.valueDots button.isActive{width:14px}
}

/* Les deux maquettes de référence occupent presque toute la largeur disponible. */
@media (min-width:1001px){
  .joinCard[data-current-view="profile-ready"],
  .joinCard[data-current-view="values"]{
    width:min(1540px,96vw);
    height:min(860px,97%);
  }
}

/* Respiration interne de la carte : les grands textes restent entièrement visibles. */
@media (min-width:701px) and (min-height:761px){
  .valueSlide{
    padding-top:clamp(18px,2.1vh,25px);
    padding-bottom:clamp(18px,2.1vh,25px);
    gap:clamp(12px,1.45vh,17px);
  }
  .valueIdentity{padding-bottom:clamp(11px,1.35vh,16px)}
  .valueIcon{width:clamp(64px,4.9vw,76px);height:clamp(64px,4.9vw,76px)}
  .valueCommitments section{padding-top:clamp(19px,2.2vh,27px);padding-bottom:clamp(19px,2.2vh,27px)}
}


/* --------------------------------------------------------------------------
   26 juillet 2026 — panneau d’identité publique R4
   - format constant sur l’ensemble du parcours, calé sur la première vignette
   - avatars sur une seule ligne
   - signature de la charte présentée comme une action orange
   -------------------------------------------------------------------------- */
.joinCard[data-current-view]{
  width:min(1540px,96vw);
  height:min(720px,95%);
}

.photoCharterTrigger{
  flex:0 0 auto;
  min-height:42px;
  padding:10px 17px;
  border:1px solid rgba(255,190,143,.72);
  border-radius:8px;
  background:linear-gradient(135deg,var(--orange),var(--orange-2));
  color:#061925;
  box-shadow:0 10px 24px rgba(245,138,75,.18),0 1px 0 rgba(255,255,255,.22) inset;
  font-size:clamp(10px,.78vw,12px);
  font-weight:900;
  letter-spacing:.045em;
  line-height:1.1;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.photoCharterTrigger:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 14px 30px rgba(245,138,75,.25),0 1px 0 rgba(255,255,255,.25) inset;
}
.photoCharterTrigger:focus-visible{
  outline:2px solid rgba(80,213,194,.9);
  outline-offset:3px;
}

@media (min-width:701px){
  .joinView[data-view="profile-identity"] .profileEditor{
    overflow-y:hidden;
  }
  .joinView[data-view="profile-identity"] .profileImageChoices{
    grid-template-columns:minmax(190px,.62fr) minmax(0,1.38fr);
    align-items:center;
  }
  .joinView[data-view="profile-identity"] .uploadChoice{
    height:52px;
  }
  .joinView[data-view="profile-identity"] .avatarChoices{
    height:52px;
    grid-template-rows:42px;
    grid-auto-flow:column;
    grid-auto-columns:42px;
    align-content:center;
    justify-content:start;
    gap:6px;
    padding:4px 3px 6px;
    overflow-x:auto;
    overflow-y:hidden;
  }
  .joinView[data-view="profile-identity"] .avatarChoice{
    width:42px;
    height:42px;
    font-size:22px;
  }
}

@media (max-width:700px){
  .photoCharterTrigger{
    min-height:30px;
    max-width:138px;
    padding:7px 9px;
    border-radius:6px;
    font-size:6.3px;
    white-space:normal;
  }
  .joinView[data-view="profile-identity"] .avatarChoices{
    height:42px;
    grid-template-rows:34px;
    grid-auto-flow:column;
    grid-auto-columns:34px;
    align-content:center;
    gap:4px;
    padding:3px 2px 5px;
    overflow-x:auto;
    overflow-y:hidden;
  }
  .joinView[data-view="profile-identity"] .avatarChoice{
    width:34px;
    height:34px;
    font-size:17px;
  }
}

@media (max-height:720px) and (min-width:701px){
  .photoCharterTrigger{
    min-height:34px;
    padding:8px 12px;
    font-size:8px;
  }
  .joinView[data-view="profile-identity"] .uploadChoice{
    height:38px;
  }
  .joinView[data-view="profile-identity"] .avatarChoices{
    height:38px;
    grid-template-rows:30px;
    grid-auto-columns:30px;
    gap:4px;
    padding:3px 2px 5px;
  }
  .joinView[data-view="profile-identity"] .avatarChoice{
    width:30px;
    height:30px;
    border-radius:7px;
    font-size:16px;
  }
}

/* --------------------------------------------------------------------------
   26 juillet 2026 — barre de progression R5
   Hauteur réduite d’environ 50 %, sans modifier sa structure ni ses quatre étapes.
   -------------------------------------------------------------------------- */
@media (min-width:701px){
  .joinSteps li{
    gap:8px;
    padding:4px 8px;
  }
  .joinSteps li>span{
    width:22px;
    height:22px;
    font-size:7px;
  }
  .joinSteps strong{font-size:9px}
  .joinSteps small{font-size:7px}
}

@media (max-width:700px){
  .joinSteps li{
    padding:3px 2px;
  }
  .joinSteps li>span{
    width:18px;
    height:18px;
    font-size:5.5px;
  }
}

@media (max-height:720px) and (min-width:701px){
  .joinSteps li{
    padding:3px 6px;
  }
  .joinSteps li>span{
    width:20px;
    height:20px;
  }
}


/* --------------------------------------------------------------------------
   26 juillet 2026 — panneau central d'inscription R6
   - largeur accrue et identique pour toutes les pages du parcours
   - phrase d'aide du pseudonyme conservée sur une seule ligne sur ordinateur
   - bouton de signature de la charte rendu plus compact
   -------------------------------------------------------------------------- */
@media (min-width:1001px){
  .joinView[data-view="profile-identity"] .fieldGroup small{
    max-width:none;
    white-space:nowrap;
  }
}

.photoCharterTrigger{
  min-height:34px;
  padding:7px 12px;
  border-radius:7px;
  font-size:clamp(8.5px,.66vw,10.5px);
  letter-spacing:.035em;
}

@media (max-width:700px){
  .photoCharterTrigger{
    min-height:27px;
    max-width:128px;
    padding:6px 8px;
    font-size:5.9px;
  }
}

@media (max-height:720px) and (min-width:701px){
  .photoCharterTrigger{
    min-height:29px;
    padding:6px 10px;
    font-size:7.2px;
  }
}


/* --------------------------------------------------------------------------
   26 juillet 2026 — confirmation du profil R7
   - bloc intérieur calé sur le format visuel des panneaux d'inscription
   - titre ramené à l'échelle standard des pages précédentes
   - nouveau texte central avec retours à la ligne imposés
   -------------------------------------------------------------------------- */
.joinCard[data-current-view="profile-ready"] .joinCardHeader{
  padding:clamp(15px,2vh,26px) clamp(22px,2.7vw,40px) clamp(12px,1.7vh,20px);
}
.joinCard[data-current-view="profile-ready"] .joinCardHeader h1{
  max-width:1080px;
  font-size:clamp(23px,2vw,36px);
  line-height:1.04;
  letter-spacing:-.025em;
}
.joinCard[data-current-view="profile-ready"] .joinCardBody{
  padding:clamp(12px,1.8vh,22px) clamp(14px,2vw,28px) clamp(16px,2.2vh,26px);
}
.joinView[data-view="profile-ready"]{
  display:flex;
  align-items:stretch;
  justify-content:center;
}
.joinView[data-view="profile-ready"]:after{
  left:5%;
  right:5%;
  bottom:0;
  height:36%;
}
.profileReadyPanel{
  width:100%;
  max-width:none;
  min-height:0;
  height:100%;
  padding:clamp(15px,2vh,24px) clamp(22px,2.4vw,34px);
  justify-content:center;
  border:1px solid rgba(151,208,219,.105);
  border-left:3px solid rgba(245,138,75,.72);
  border-radius:13px;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% 5%,rgba(245,138,75,.06),transparent 30%),
    linear-gradient(145deg,rgba(4,22,34,.78),rgba(2,15,25,.56));
}
.profileReadyPanel>.joinSectionLabel{
  margin:0 0 clamp(8px,1.2vh,13px);
}
.profileReadyIcon{
  width:clamp(54px,4.5vw,70px);
  height:clamp(54px,4.5vw,70px);
  margin:0 0 clamp(18px,2.6vh,30px);
  font-size:clamp(28px,2.2vw,37px);
}
.profileReadyPanel>.profileReadyMessage{
  max-width:1180px;
  gap:clamp(7px,1vh,12px);
  font-size:clamp(17px,1.28vw,23px);
  line-height:1.36;
}
.profileReadyActions{
  margin-top:clamp(20px,3vh,34px);
  gap:9px;
}

@media (max-height:760px) and (min-width:701px){
  .joinCard[data-current-view="profile-ready"] .joinCardHeader h1{
    font-size:clamp(23px,2vw,36px);
  }
  .profileReadyPanel{
    padding:10px 20px;
  }
  .profileReadyPanel>.joinSectionLabel{
    margin-bottom:6px;
  }
  .profileReadyIcon{
    width:46px;
    height:46px;
    margin-bottom:12px;
    font-size:24px;
  }
  .profileReadyPanel>.profileReadyMessage{
    gap:5px;
    font-size:clamp(13px,1.05vw,17px);
    line-height:1.28;
  }
  .profileReadyActions{
    margin-top:12px;
    gap:6px;
  }
}

@media (max-width:700px){
  .joinCard[data-current-view="profile-ready"] .joinCardHeader h1{
    font-size:20px;
    line-height:1.05;
  }
  .joinCard[data-current-view="profile-ready"] .joinCardBody{
    padding:7px;
  }
  .profileReadyPanel{
    padding:8px 7px;
    border-left-width:2px;
  }
  .profileReadyPanel>.profileReadyMessage{
    gap:4px;
    font-size:8.7px;
    line-height:1.3;
  }
  .profileReadyPanel>.profileReadyMessage br{
    display:block;
  }
}

/* --------------------------------------------------------------------------
   26 juillet 2026 — confirmation et accents d'inscription R8
   - vert franc à la place du bleu-vert pour les repères des fiches d'inscription
   - phrase de transition vers la charte maintenue sur une ligne sur ordinateur
   - espace renforcé entre les deux actions de confirmation
   -------------------------------------------------------------------------- */
:root{
  --teal:#4fd39a;
}

.joinEyebrow,
.joinSectionLabel,
.liveProfileLabel,
.profileReadyPanel>.joinSectionLabel,
.formRequirements span.isComplete,
.charterStatus.isAccepted{
  color:#4fd39a;
}

.joinEyebrow i{
  background:#4fd39a;
  box-shadow:0 0 12px rgba(79,211,154,.62);
}

.profileReadyIcon{
  border-color:rgba(79,211,154,.42);
  background:rgba(79,211,154,.09);
  color:#4fd39a;
  box-shadow:0 0 40px rgba(79,211,154,.09);
}

.charterStatus.isAccepted i{
  border-color:rgba(79,211,154,.55);
  background:rgba(79,211,154,.10);
}

.profileReadyActions{
  gap:20px;
}

@media (min-width:1001px){
  .profileReadyPanel>.profileReadyMessage .profileReadyCharterLine{
    white-space:nowrap;
    font-size:clamp(15px,1.28vw,22px);
  }
}

@media (max-height:760px) and (min-width:701px){
  .profileReadyActions{
    gap:14px;
  }
}

@media (max-width:700px){
  .profileReadyActions{
    gap:11px;
  }
  .profileReadyPanel>.profileReadyMessage .profileReadyCharterLine{
    white-space:normal;
  }
}



/* --------------------------------------------------------------------------
   26 juillet 2026 — charte R9
   - titre standardisé sur les autres pages d’inscription
   - introduction blanche, centrée et placée immédiatement sous le titre
   - libellés turquoise remplacés par l’orange ETHNOS
   - suppression des blocs imbriqués dans les engagements
   - bouton « Valider » à la place de la flèche droite, avec arrivée animée
   -------------------------------------------------------------------------- */
.valuesHeaderIntro{
  display:none;
  margin:0;
}

.joinCard[data-current-view="values"] .joinCardHeader{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(12px,1.5vw,24px);
  padding-top:clamp(15px,2vh,26px);
  padding-bottom:clamp(12px,1.7vh,20px);
}
.joinCard[data-current-view="values"] .joinHeadingGroup{
  min-width:0;
}
.joinCard[data-current-view="values"] .joinCardHeader h1{
  max-width:1080px;
  margin:0;
  font-size:clamp(23px,2vw,36px);
  line-height:1.04;
  letter-spacing:-.025em;
}
.joinCard[data-current-view="values"] .valuesHeaderIntro{
  display:block;
  width:100%;
  max-width:none;
  margin:clamp(7px,1vh,11px) 0 0;
  color:#f5f0e8;
  font-size:clamp(13px,1vw,17px);
  font-weight:400;
  line-height:1.45;
  text-align:center;
}
.joinCard[data-current-view="values"] .joinCardBody{
  padding-top:clamp(12px,1.7vh,20px);
}
.valuesWorkspace{
  grid-template-rows:minmax(0,1fr) auto;
}

/* Toute la signalétique des valeurs adopte l’orange, sur les sept planches. */
.valueIdentity small,
.valueCommitments span,
.valueCommitments section:last-child span{
  color:var(--orange-2);
}

/* Une seule grande scène : plus de cadres dans les cadres. */
.valueIdentity{
  border-bottom:0;
  padding-bottom:clamp(7px,1vh,12px);
}
.valueCommitments section,
.valueCommitments section:last-child{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* Validation explicite à droite au lieu d’une flèche isolée. */
.valuesStage{
  grid-template-columns:clamp(42px,3.8vw,58px) minmax(0,1fr) clamp(72px,6vw,96px);
}
.valueValidate{
  align-self:center;
  width:100%;
  min-height:40px;
  padding:9px 11px;
  border:1px solid rgba(255,190,143,.72);
  border-radius:9px;
  background:linear-gradient(135deg,var(--orange),var(--orange-2));
  color:#061925;
  box-shadow:0 10px 24px rgba(245,138,75,.18),0 1px 0 rgba(255,255,255,.22) inset;
  cursor:pointer;
  font-size:clamp(9px,.72vw,12px);
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.valueValidate:hover:not(:disabled){
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 14px 30px rgba(245,138,75,.25),0 1px 0 rgba(255,255,255,.25) inset;
}
.valueValidate:focus-visible{
  outline:2px solid rgba(80,213,194,.9);
  outline-offset:3px;
}
.valueValidate:disabled{opacity:.35;cursor:default}

/* Les éléments arrivent progressivement après chaque validation. */
.valueSlide.isEntering .valueIdentity{
  animation:valueIdentityArrival .38s cubic-bezier(.22,.8,.28,1) both;
}
.valueSlide.isEntering .valueCommitments section:first-child{
  animation:valueCommitmentArrival .44s .06s cubic-bezier(.22,.8,.28,1) both;
}
.valueSlide.isEntering .valueCommitments section:last-child{
  animation:valueCommitmentArrival .44s .14s cubic-bezier(.22,.8,.28,1) both;
}
.valueSlideFinal.isEntering .valueFinalCopy>*{
  animation:valueCommitmentArrival .42s cubic-bezier(.22,.8,.28,1) both;
}
.valueSlideFinal.isEntering .valueFinalCopy>*:nth-child(2){animation-delay:.06s}
.valueSlideFinal.isEntering .valueFinalCopy>*:nth-child(3){animation-delay:.12s}
.valueSlideFinal.isEntering .valueFinalCopy>*:nth-child(4){animation-delay:.18s}
@keyframes valueIdentityArrival{
  from{opacity:0;transform:translateX(22px)}
  to{opacity:1;transform:none}
}
@keyframes valueCommitmentArrival{
  from{opacity:0;transform:translateX(30px)}
  to{opacity:1;transform:none}
}

@media (max-height:760px) and (min-width:701px){
  .joinCard[data-current-view="values"] .joinCardHeader h1{font-size:clamp(23px,2vw,36px)}
  .joinCard[data-current-view="values"] .valuesHeaderIntro{font-size:clamp(10px,.82vw,13px);line-height:1.35}
  .valuesStage{grid-template-columns:38px minmax(0,1fr) 76px;gap:9px}
  .valueValidate{min-height:34px;padding:7px 8px;font-size:8px}
}

@media (max-width:700px){
  .joinCard[data-current-view="values"] .joinCardHeader{
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
  }
  .joinCard[data-current-view="values"] .joinCardHeader h1{font-size:17px;line-height:1.08}
  .joinCard[data-current-view="values"] .valuesHeaderIntro{
    margin-top:5px;
    font-size:6.8px;
    line-height:1.35;
  }
  .joinCard[data-current-view="values"] .valuesHeaderIntro br{display:none}
  .valuesStage{grid-template-columns:25px minmax(0,1fr) 47px;gap:4px}
  .valueValidate{min-height:26px;padding:5px 4px;border-radius:6px;font-size:5.4px;letter-spacing:.04em}
  .valueCommitments section,
  .valueCommitments section:last-child{padding-left:6px;padding-right:6px}
}

@media (prefers-reduced-motion:reduce){
  .valueSlide.isEntering .valueIdentity,
  .valueSlide.isEntering .valueCommitments section,
  .valueSlideFinal.isEntering .valueFinalCopy>*{animation:none}
}

/* --------------------------------------------------------------------------
   26 juillet 2026 — aperçu public et bandeau inscription / tableau de bord R10
   -------------------------------------------------------------------------- */
/* Le nouveau bandeau reprend une composition simple : identité à gauche,
   visuel humain recadré à droite. */
.joinHeader.joinDashboardBanner{
  grid-template-columns:minmax(560px,1.56fr) minmax(420px,1fr);
  background:#061b28;
}
.joinDashboardBanner .joinBrand{
  align-items:center;
  gap:clamp(14px,1.25vw,22px);
  padding:clamp(10px,1.25vh,18px) clamp(28px,3vw,58px);
  background:linear-gradient(90deg,#03131f 0%,#062237 72%,#082b43 100%);
}
.joinDashboardBanner .joinBrand:after{
  right:-90px;
  width:170px;
  background:linear-gradient(90deg,#082b43,transparent);
}
.joinDashboardBanner .joinBrand img{
  width:clamp(42px,3.4vw,66px);
}
.joinDashboardBanner .joinBrandCopy{
  flex-direction:row;
  align-items:baseline;
  gap:clamp(10px,1vw,20px);
}
.joinDashboardBanner .joinBrandCopy strong{
  color:#f5f0e8;
  font:400 clamp(29px,2.35vw,46px)/.94 Georgia,serif;
  letter-spacing:0;
  white-space:nowrap;
}
.joinDashboardBanner .joinBrandCopy small{
  color:#ff842f;
  font:400 clamp(16px,1.48vw,29px)/1.05 Georgia,serif;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
}
.joinDashboardBanner .joinHeaderVisual:before{
  background:linear-gradient(90deg,#082b43 0%,rgba(8,43,67,.78) 9%,rgba(8,43,67,.16) 30%,transparent 56%),linear-gradient(0deg,rgba(2,12,19,.14),transparent 72%);
}
.joinDashboardBanner .joinHeaderVisual img{
  object-position:center 42%;
  transform:scale(1.04);
}

/* L’aperçu du futur profil devient réellement lisible sans modifier la largeur
   générale du parcours. */
@media (min-width:701px){
  .liveProfilePanel{
    padding:clamp(18px,2vh,25px);
  }
  .liveProfileLabel{
    margin-bottom:13px;
    font-size:clamp(8.5px,.68vw,11px);
    letter-spacing:.15em;
  }
  .liveProfileCard{
    padding:clamp(19px,2.25vh,28px);
  }
  .liveProfileTop{
    gap:16px;
    padding-bottom:16px;
  }
  .liveAvatar{
    width:clamp(72px,5vw,86px);
    height:clamp(72px,5vw,86px);
    font-size:clamp(34px,2.6vw,43px);
  }
  .liveProfileTop h3{
    max-width:220px;
    font-size:clamp(23px,1.75vw,31px);
  }
  .liveProfileTop p{
    gap:8px;
    margin-top:8px;
    font-size:clamp(9px,.72vw,11px);
  }
  .liveProfileTop img{
    width:22px;
    height:15px;
  }
  .liveBio{
    min-height:66px;
    margin:17px 0;
    font-size:clamp(11px,.86vw,14px);
    line-height:1.5;
  }
  .liveInterests{
    gap:8px;
  }
  .liveInterests span{
    padding:6px 9px;
    font-size:clamp(8px,.62vw,10px);
  }
  .liveProfileFooter{
    gap:6px;
    padding-top:16px;
  }
  .liveProfileFooter span{
    font-size:clamp(7px,.56vw,9px);
  }
  .liveProfileFooter b{
    margin-bottom:4px;
    font-size:clamp(14px,1vw,18px);
  }
  .liveProfileHint{
    margin-top:12px;
    font-size:clamp(8px,.62vw,10px);
  }
}

@media (max-width:1000px) and (min-width:701px){
  .joinHeader.joinDashboardBanner{
    grid-template-columns:minmax(430px,1.3fr) minmax(300px,.9fr);
  }
  .joinDashboardBanner .joinBrandCopy{gap:10px}
  .joinDashboardBanner .joinBrandCopy small{
    font-size:clamp(13px,1.55vw,18px);
  }
}

@media (max-width:700px){
  .joinHeader.joinDashboardBanner{
    grid-template-columns:1.18fr .82fr;
  }
  .joinDashboardBanner .joinBrand{
    gap:7px;
    padding:7px 8px 7px 12px;
  }
  .joinDashboardBanner .joinBrand img{width:29px}
  .joinDashboardBanner .joinBrandCopy{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  .joinDashboardBanner .joinBrandCopy strong{font-size:18px}
  .joinDashboardBanner .joinBrandCopy small{
    max-width:225px;
    font-size:7.4px;
    line-height:1.12;
    white-space:normal;
  }
}

@media (max-height:720px) and (min-width:701px){
  .joinDashboardBanner .joinBrand img{width:42px}
  .joinDashboardBanner .joinBrandCopy{gap:10px}
  .joinDashboardBanner .joinBrandCopy strong{font-size:29px}
  .joinDashboardBanner .joinBrandCopy small{font-size:15px}
  .liveProfilePanel{padding:12px}
  .liveProfileLabel{margin-bottom:8px;font-size:7.6px}
  .liveProfileCard{padding:14px}
  .liveProfileTop{gap:12px;padding-bottom:10px}
  .liveAvatar{width:58px;height:58px;font-size:28px}
  .liveProfileTop h3{font-size:19px}
  .liveProfileTop p{margin-top:5px;font-size:7.8px}
  .liveProfileTop img{width:17px;height:11px}
  .liveBio{min-height:40px;margin:9px 0;font-size:8.5px}
  .liveInterests span{padding:4px 6px;font-size:6.3px}
  .liveProfileFooter{padding-top:9px}
  .liveProfileFooter span{font-size:5.7px}
  .liveProfileFooter b{font-size:10px}
  .liveProfileHint{font-size:6px}
}


/* --------------------------------------------------------------------------
   26 juillet 2026 — charte R11
   - titre complet sur une seule ligne sur ordinateur
   - introduction alignée en butée à gauche
   - suppression de la phrase dupliquée sur l'engagement commun
   - message de sortie clarifiant discrétion publique et responsabilité
   -------------------------------------------------------------------------- */
@media (min-width:1001px){
  .joinCard[data-current-view="values"] .joinCardHeader h1{
    max-width:none;
    white-space:nowrap;
  }
  .joinCard[data-current-view="values"] .joinCardHeader h1 .joinWelcomeLine,
  .joinCard[data-current-view="values"] .joinCardHeader h1 .joinPathLine{
    display:inline;
  }
  .joinCard[data-current-view="values"] .joinCardHeader h1 .joinPathLine{
    margin:0 0 0 .22em;
  }
}
.joinCard[data-current-view="values"] .valuesHeaderIntro{
  text-align:left;
  margin-left:0;
  margin-right:0;
}

/* La première phrase de la conclusion ayant été retirée, le texte restant
   retrouve une hiérarchie normale au lieu d'hériter du traitement géant. */
.valueSlideFinal .valueFinalCopy>p:first-child{
  font-size:clamp(14px,1.05vw,17px);
  line-height:1.56;
}

.valuesReadyPanel .valuesReadyMessage{
  display:grid;
  gap:clamp(10px,1.25vh,16px);
  max-width:1120px;
  margin:clamp(12px,1.8vh,22px) auto 0;
  color:var(--text);
  font-size:clamp(16px,1.22vw,21px);
  line-height:1.48;
  text-align:center;
}
.valuesReadyPanel .valuesReadyMessage span{display:block}

@media (max-height:760px) and (min-width:701px){
  .valuesReadyPanel .valuesReadyMessage{
    gap:8px;
    margin-top:10px;
    font-size:clamp(12px,.95vw,16px);
    line-height:1.4;
  }
}
@media (max-width:1000px){
  .joinCard[data-current-view="values"] .joinCardHeader h1{
    white-space:normal;
  }
}
@media (max-width:700px){
  .joinCard[data-current-view="values"] .valuesHeaderIntro{text-align:left}
  .valuesReadyPanel .valuesReadyMessage{
    gap:7px;
    margin-top:8px;
    font-size:9px;
    line-height:1.4;
  }
}


/* --------------------------------------------------------------------------
   26 juillet 2026 — charte R13
   - rétablissement de la phrase finale voulue
   - conservation du même titre et du même sous-texte sur « Engagement validé »
   - rythme vertical identique entre les trois phrases de la confirmation
   -------------------------------------------------------------------------- */
.joinCard[data-current-view="values-ready"] .joinCardHeader{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(12px,1.5vw,24px);
  padding-top:clamp(15px,2vh,26px);
  padding-bottom:clamp(12px,1.7vh,20px);
}
.joinCard[data-current-view="values-ready"] .joinHeadingGroup{min-width:0}
.joinCard[data-current-view="values-ready"] .joinCardHeader h1{
  max-width:1080px;
  margin:0;
  font-size:clamp(23px,2vw,36px);
  line-height:1.04;
  letter-spacing:-.025em;
}
.joinCard[data-current-view="values-ready"] .valuesHeaderIntro{
  display:block;
  width:100%;
  max-width:none;
  margin:clamp(7px,1vh,11px) 0 0;
  color:#f5f0e8;
  font-size:clamp(13px,1vw,17px);
  font-weight:400;
  line-height:1.45;
  text-align:left;
}
.joinCard[data-current-view="values-ready"] .joinCardBody{
  padding-top:clamp(12px,1.7vh,20px);
}

.valueSlideFinal .valueIdentity h3{
  max-width:1100px;
  font-size:clamp(27px,2.1vw,39px);
  line-height:1.16;
}

.valuesReadyPanel{
  --values-ready-rhythm:clamp(18px,2.4vh,28px);
}
.valuesReadyPanel>h2{
  margin:0;
}
.valuesReadyPanel .valuesReadyMessage{
  gap:var(--values-ready-rhythm);
  margin:var(--values-ready-rhythm) auto 0;
}
.valuesReadyPanel .profileReadyActions{
  margin-top:var(--values-ready-rhythm);
}

@media (min-width:1001px){
  .joinCard[data-current-view="values-ready"] .joinCardHeader h1{
    max-width:none;
    white-space:nowrap;
  }
  .joinCard[data-current-view="values-ready"] .joinCardHeader h1 .joinWelcomeLine,
  .joinCard[data-current-view="values-ready"] .joinCardHeader h1 .joinPathLine{
    display:inline;
  }
  .joinCard[data-current-view="values-ready"] .joinCardHeader h1 .joinPathLine{
    margin:0 0 0 .22em;
  }
}

@media (max-height:760px) and (min-width:701px){
  .valuesReadyPanel{--values-ready-rhythm:10px}
}
@media (max-width:1000px){
  .joinCard[data-current-view="values-ready"] .joinCardHeader h1{white-space:normal}
}
@media (max-width:700px){
  .joinCard[data-current-view="values-ready"] .joinCardHeader h1{
    font-size:17px;
    line-height:1.08;
  }
  .joinCard[data-current-view="values-ready"] .valuesHeaderIntro{
    font-size:8px;
    line-height:1.3;
  }
  .joinCard[data-current-view="values-ready"] .valuesHeaderIntro br{display:none}
  .valuesReadyPanel{--values-ready-rhythm:7px}
}

/* --------------------------------------------------------------------------
   26 juillet 2026 — modèle économique R14
   - titre et sous-titre replacés dans l'en-tête standard du parcours
   - premier bloc aéré avec double intitulé, textes agrandis et mots-clés orange
   - quatre usages essentiels conservés et agrandis
   - suppression de la confirmation par case à cocher
   -------------------------------------------------------------------------- */
.joinCard[data-current-view="payment"] .joinCardHeader{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(12px,1.5vw,24px);
  padding-top:clamp(15px,2vh,26px);
  padding-bottom:clamp(12px,1.7vh,20px);
}
.joinCard[data-current-view="payment"] .joinHeadingGroup{min-width:0}
.joinCard[data-current-view="payment"] .joinCardHeader h1{
  max-width:none;
  margin:0;
  font-size:clamp(23px,2vw,36px);
  line-height:1.04;
  letter-spacing:-.025em;
}
.joinCard[data-current-view="payment"] .joinCardBody{
  padding-top:clamp(13px,1.8vh,21px);
}
.paymentWorkspace{
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto auto;
  gap:clamp(10px,1.45vh,17px);
  padding:clamp(4px,.7vw,8px);
}
.paymentGrid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(13px,1.2vw,19px);
  min-height:0;
}
.paymentCard{
  min-height:0;
  padding:clamp(22px,2.3vw,36px);
}
.paymentCardChoice{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.paymentCardHeading{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:clamp(10px,1.1vw,18px);
  margin-bottom:clamp(22px,2.8vh,34px);
}
.paymentCardHeading span,
.paymentCardHeading strong{
  font-size:clamp(15px,1.18vw,21px);
  line-height:1.1;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.paymentCardHeading span{
  color:var(--orange-2);
  font-weight:900;
}
.paymentCardHeading strong{
  color:#f5f0e8;
  font-weight:700;
}
.paymentCardChoiceBody{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:clamp(17px,1.6vw,25px);
}
.paymentCardIcon{
  width:clamp(52px,4vw,68px);
  height:clamp(52px,4vw,68px);
  margin:1px 0 0;
  font-size:clamp(27px,2vw,34px);
}
.paymentCardChoice h2{
  max-width:760px;
  margin:0 0 clamp(17px,2vh,24px);
  color:#f6f1e9;
  font:400 clamp(25px,2vw,35px)/1.15 Georgia,serif;
}
.paymentCardChoice p{
  max-width:780px;
  margin:0 0 clamp(13px,1.6vh,19px);
  color:rgba(231,241,243,.80);
  font-size:clamp(14px,1.02vw,17px);
  line-height:1.58;
}
.paymentCardChoice p:last-child{margin-bottom:0}
.paymentCardChoice em{
  color:var(--orange-2);
  font-style:normal;
  font-weight:800;
}
.paymentCardAmount{
  padding-left:clamp(27px,2.8vw,44px);
  padding-right:clamp(27px,2.8vw,44px);
}
.paymentPrice{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:clamp(12px,1.1vw,18px);
  margin-bottom:clamp(24px,3vh,38px);
}
.paymentPrice b{
  color:#fff;
  font:400 clamp(40px,3.5vw,60px)/1 Georgia,serif;
}
.paymentPrice small{
  margin:0;
  color:rgba(239,246,247,.78);
  font-size:clamp(14px,1.05vw,18px);
  font-weight:400;
  letter-spacing:0;
  line-height:1.3;
  text-transform:none;
}
.paymentCard ul{
  display:grid;
  gap:clamp(14px,1.8vh,22px);
  margin:0;
  padding:0;
  list-style:none;
}
.paymentCard li{
  padding-left:clamp(24px,1.8vw,31px);
  color:rgba(235,244,245,.86);
  font-size:clamp(14px,1.02vw,17px);
  line-height:1.4;
}
.paymentCard li:before{
  top:.02em;
  color:var(--orange-2);
  font-size:1.15em;
}
.paymentManifesto{
  padding:clamp(13px,1.65vh,19px) clamp(18px,1.5vw,25px);
}
.paymentManifesto p{font-size:clamp(11px,.82vw,14px)}
.paymentManifesto strong{font-size:clamp(18px,1.45vw,25px)}
.paymentFooter{margin-top:0}

@media (min-width:1001px){
  .joinCard[data-current-view="payment"] .joinCardHeader h1 .joinWelcomeLine,
  .joinCard[data-current-view="payment"] .joinCardHeader h1 .joinPathLine{
    display:block;
  }
}

@media (max-height:760px) and (min-width:701px){
  .paymentWorkspace{gap:8px}
  .paymentCard{padding:15px 20px}
  .paymentCardHeading{margin-bottom:14px}
  .paymentCardHeading span,.paymentCardHeading strong{font-size:12px}
  .paymentCardChoiceBody{gap:14px}
  .paymentCardIcon{width:45px;height:45px;font-size:23px}
  .paymentCardChoice h2{margin-bottom:10px;font-size:23px}
  .paymentCardChoice p{margin-bottom:7px;font-size:11px;line-height:1.4}
  .paymentPrice{margin-bottom:16px}
  .paymentPrice b{font-size:38px}
  .paymentPrice small{font-size:11px}
  .paymentCard ul{gap:9px}
  .paymentCard li{font-size:11px}
  .paymentManifesto{padding:8px 12px}
  .paymentManifesto p{font-size:8px}
  .paymentManifesto strong{font-size:15px}
}

@media (max-width:700px){
  .joinCard[data-current-view="payment"] .joinCardHeader h1{font-size:17px;line-height:1.08}
  .paymentWorkspace{grid-template-rows:minmax(0,1fr) auto auto;gap:6px}
  .paymentGrid{grid-template-columns:1fr;gap:6px;overflow:auto;padding-right:2px}
  .paymentCard{padding:10px;border-radius:9px}
  .paymentCardHeading{gap:6px;margin-bottom:9px}
  .paymentCardHeading span,.paymentCardHeading strong{font-size:6.5px;letter-spacing:.05em}
  .paymentCardChoiceBody{grid-template-columns:28px minmax(0,1fr);gap:8px}
  .paymentCardIcon{width:28px;height:28px;font-size:14px}
  .paymentCardChoice h2{margin-bottom:5px;font-size:13px}
  .paymentCardChoice p{margin-bottom:4px;font-size:6px;line-height:1.38}
  .paymentCardAmount{padding:11px 13px}
  .paymentPrice{gap:7px;margin-bottom:8px}
  .paymentPrice b{font-size:25px}
  .paymentPrice small{font-size:6.3px}
  .paymentCard ul{grid-template-columns:1fr 1fr;gap:6px 8px}
  .paymentCard li{padding-left:12px;font-size:5.8px}
  .paymentManifesto{padding:7px 9px}
  .paymentManifesto p{font-size:4.9px}
  .paymentManifesto strong{font-size:9.5px}
  .paymentFooter{gap:6px}
}

/* Vérification de l’adresse e-mail — dernière étape avant l’espace */
.joinCard[data-current-view="email-verification"] .joinCardHeader{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(12px,1.5vw,24px);
  padding-top:clamp(15px,2vh,26px);
  padding-bottom:clamp(12px,1.7vh,20px);
}
.joinCard[data-current-view="email-verification"] .joinHeadingGroup{min-width:0}
.joinCard[data-current-view="email-verification"] .joinCardHeader h1{
  max-width:none;
  margin:0;
  font-size:clamp(23px,2vw,36px);
  line-height:1.04;
  letter-spacing:-.025em;
}
.emailVerificationPanel{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:clamp(24px,3.5vh,46px) clamp(28px,4vw,62px);
  border:1px solid rgba(151,208,219,.105);
  border-left:3px solid rgba(245,138,75,.72);
  border-radius:13px;
  background:radial-gradient(circle at 92% 5%,rgba(245,138,75,.06),transparent 30%),linear-gradient(145deg,rgba(4,22,34,.78),rgba(2,15,25,.56));
  text-align:center;
}
.emailVerificationPanel>.joinSectionLabel{margin-bottom:clamp(10px,1.4vh,16px)}
.emailVerificationPanel h2{
  margin:0 0 clamp(13px,1.8vh,20px);
  color:#f5f0e8;
  font:400 clamp(27px,2.1vw,39px)/1.1 Georgia,serif;
}
.emailVerificationPanel>p{
  max-width:880px;
  margin:0;
  color:rgba(225,238,240,.76);
  font-size:clamp(13px,.98vw,16px);
  line-height:1.5;
}
.emailVerificationField{
  width:min(760px,100%);
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:clamp(22px,3vh,34px) auto 0;
  text-align:left;
}
.emailVerificationField span{
  color:#f5f0e8;
  font-size:clamp(13px,1vw,16px);
  font-weight:800;
}
.emailVerificationField input{
  width:100%;
  height:clamp(48px,5.7vh,58px);
  padding:0 16px;
  border:1px solid rgba(151,208,219,.24);
  border-radius:9px;
  outline:none;
  color:#f5f0e8;
  background:rgba(2,14,23,.62);
  font-size:clamp(14px,1vw,17px);
}
.emailVerificationField input:focus{
  border-color:rgba(80,213,194,.62);
  box-shadow:0 0 0 3px rgba(80,213,194,.07);
}
.emailVerificationPanel .emailVerificationNote{
  max-width:760px;
  margin-top:10px;
  color:rgba(225,238,240,.48);
  font-size:clamp(10px,.76vw,12px);
}
.emailVerificationError{
  margin-top:8px!important;
  color:var(--orange-2)!important;
  font-weight:700;
}
.emailVerificationActions{
  width:min(760px,100%);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:clamp(22px,3vh,34px);
}
.emailVerificationSuccess{
  width:min(760px,100%);
  display:grid;
  gap:8px;
  margin-top:16px;
  padding:14px 16px;
  border:1px solid rgba(79,211,154,.36);
  border-radius:10px;
  background:rgba(79,211,154,.07);
  text-align:left;
}
.emailVerificationSuccess strong{color:#4fd39a;font-size:clamp(13px,.95vw,16px)}
.emailVerificationSuccess span{color:rgba(225,238,240,.70);font-size:clamp(10px,.76vw,12px);line-height:1.45}
.emailVerificationSuccess .joinContinue{justify-self:end;margin-top:4px}

@media (max-height:760px) and (min-width:701px){
  .emailVerificationPanel{padding:16px 28px}
  .emailVerificationPanel h2{margin-bottom:9px;font-size:25px}
  .emailVerificationPanel>p{font-size:11px}
  .emailVerificationField{margin-top:14px}
  .emailVerificationField input{height:42px}
  .emailVerificationActions{margin-top:14px}
  .emailVerificationSuccess{margin-top:9px;padding:9px 12px}
}

@media (max-width:700px){
  .joinCard[data-current-view="email-verification"] .joinCardHeader h1{font-size:17px;line-height:1.08}
  .emailVerificationPanel{padding:10px 9px;border-left-width:2px}
  .emailVerificationPanel h2{margin-bottom:7px;font-size:15px}
  .emailVerificationPanel>p{font-size:6.4px}
  .emailVerificationField{gap:4px;margin-top:10px}
  .emailVerificationField span{font-size:6.6px}
  .emailVerificationField input{height:31px;padding:0 8px;font-size:7px}
  .emailVerificationPanel .emailVerificationNote{margin-top:5px;font-size:5px}
  .emailVerificationActions{gap:6px;margin-top:10px}
  .emailVerificationSuccess{gap:4px;margin-top:7px;padding:7px 8px}
  .emailVerificationSuccess strong{font-size:6.5px}
  .emailVerificationSuccess span{font-size:5px}
}

@media (min-width:1001px){
  .paymentCardHeading{
    flex-wrap:nowrap;
    gap:14px;
  }
  .paymentCardHeading span,
  .paymentCardHeading strong{
    flex:0 0 auto;
    font-size:clamp(14px,1.02vw,18px);
    letter-spacing:.055em;
    white-space:nowrap;
  }
}


/* --------------------------------------------------------------------------
   26 juillet 2026 — modèle économique et vérification R16
   - hiérarchie plus sobre, typographie officielle et aucun texte en gras
   - listes avec coches, retours à la ligne explicites et contraste blanc/orange
   - prix orange, ponctuation complétée et rappel de sécurité ajouté
   -------------------------------------------------------------------------- */
.paymentCardHeading{
  justify-content:flex-start;
  align-items:baseline;
  gap:clamp(9px,.9vw,15px);
  margin-bottom:clamp(18px,2.2vh,28px);
  text-align:left;
}
.paymentCardHeading span,
.paymentCardHeading strong{
  color:#f6f1e9;
  font:400 clamp(13px,.95vw,17px)/1.15 Georgia,serif;
  letter-spacing:.025em;
  text-transform:uppercase;
}
.paymentCardHeading span:first-child{color:var(--orange-2)}
.paymentCardHeading strong{font-weight:400}
.paymentCardChoice h2{font-weight:400}
.paymentCardChoice p,
.paymentCardChoice em,
.paymentChoicePoints,
.paymentChoicePoints li,
.paymentChoicePoints .paymentAccent{font-weight:400}
.paymentChoicePoints{
  display:grid;
  gap:clamp(9px,1.15vh,14px);
  margin:0;
  padding:0;
  list-style:none;
}
.paymentChoicePoints li{
  position:relative;
  padding-left:clamp(24px,1.8vw,31px);
  color:#f6f1e9;
  font-size:clamp(12px,.92vw,15.5px);
  line-height:1.45;
}
.paymentChoicePoints li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:.02em;
  color:var(--orange-2);
  font-size:1.15em;
  font-weight:400;
}
.paymentChoicePoints .paymentAccent{
  color:var(--orange-2);
  font-style:normal;
}
.paymentPrice b{color:#f6f1e9;font-weight:400}
.paymentPrice .paymentApprox{color:#f6f1e9}
.paymentPrice .paymentAmountValue{color:var(--orange-2)}
.paymentCardAmount li{color:#fff}
.emailVerificationIntro{
  max-width:940px;
  display:grid;
  gap:clamp(8px,1.15vh,13px);
  margin:0 auto;
}
.emailVerificationPanel>.emailVerificationIntro p{
  max-width:none;
  margin:0;
  color:#fff;
  font-size:clamp(13px,.98vw,16px);
  line-height:1.5;
}
.emailVerificationPanel>.emailVerificationIntro p:last-child{
  font-size:clamp(12px,.9vw,15px);
}

@media (max-height:760px) and (min-width:701px){
  .paymentCardHeading span,.paymentCardHeading strong{font-size:11px}
  .paymentChoicePoints{gap:6px}
  .paymentChoicePoints li{font-size:10.5px;line-height:1.35}
  .emailVerificationIntro{gap:6px}
  .emailVerificationPanel>.emailVerificationIntro p{font-size:10.5px}
  .emailVerificationPanel>.emailVerificationIntro p:last-child{font-size:10px}
}

@media (max-width:700px){
  .paymentCardHeading{gap:5px;margin-bottom:8px}
  .paymentCardHeading span,.paymentCardHeading strong{font-size:6.2px;letter-spacing:.02em}
  .paymentChoicePoints{gap:4px}
  .paymentChoicePoints li{padding-left:11px;font-size:5.7px;line-height:1.38}
  .emailVerificationIntro{gap:4px}
  .emailVerificationPanel>.emailVerificationIntro p{font-size:6.2px}
  .emailVerificationPanel>.emailVerificationIntro p:last-child{font-size:5.8px}
}

/* --------------------------------------------------------------------------
   27 juillet 2026 — bandeau inscription R16
   Reprise fidèle de la maquette : logo officiel, titre, promesse orange et
   six pictogrammes. La taille de « Etnos. » reprend celle de l'accueil R28.
   -------------------------------------------------------------------------- */
.joinHeader.joinDashboardBanner{
  grid-template-columns:minmax(760px,1.12fr) minmax(520px,.88fr) !important;
}
.joinDashboardBanner .joinBrand{
  display:flex !important;
  align-items:center !important;
  gap:clamp(18px,1.45vw,30px) !important;
  padding:clamp(10px,1.15vh,16px) clamp(30px,2.8vw,58px) !important;
}
.joinDashboardBanner .joinBrand:after{
  right:-100px !important;
  width:190px !important;
}
.joinDashboardBanner .joinDashboardLogo{
  width:clamp(92px,5.5vw,116px) !important;
  height:clamp(92px,5.5vw,116px) !important;
  flex:0 0 auto !important;
  object-fit:contain !important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.25)) !important;
}
.joinDashboardIdentity{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(7px,.75vh,10px);
}
.joinDashboardBanner .joinBrandCopy{
  min-width:0;
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:clamp(14px,1vw,22px) !important;
  white-space:nowrap;
}
.joinDashboardBanner .joinBrandCopy strong{
  color:#f5f0e8 !important;
  font:400 54px/1 Georgia,'Times New Roman',serif !important;
  letter-spacing:.025em !important;
  white-space:nowrap !important;
}
.joinDashboardBanner .joinBrandCopy small{
  color:#ff842f !important;
  font:400 clamp(24px,1.58vw,33px)/1.08 Georgia,'Times New Roman',serif !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  white-space:nowrap !important;
}
.joinHeaderValues{
  display:flex;
  align-items:flex-start;
  gap:clamp(19px,1.35vw,30px);
  min-height:42px;
  padding-left:2px;
}
.joinHeaderValue{
  position:relative;
  width:clamp(40px,3vw,54px);
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:#f5f0e8;
  font:650 clamp(6.5px,.42vw,8px)/1 Arial,Helvetica,sans-serif;
  text-align:center;
  white-space:nowrap;
}
.joinHeaderValueIcon{
  width:clamp(25px,1.65vw,32px);
  height:clamp(25px,1.65vw,32px);
  display:grid;
  place-items:center;
  border:1px solid rgba(49,209,207,.58);
  border-radius:50%;
  background:rgba(6,23,34,.74);
  box-shadow:0 0 16px rgba(49,209,207,.08);
  overflow:hidden;
}
.joinHeaderValueIcon img{
  width:76%;
  height:76%;
  display:block;
  object-fit:contain;
}

@media (max-width:1500px) and (min-width:1001px){
  .joinHeader.joinDashboardBanner{
    grid-template-columns:minmax(650px,1.18fr) minmax(390px,.82fr) !important;
  }
  .joinDashboardBanner .joinBrand{
    gap:16px !important;
    padding-left:28px !important;
    padding-right:25px !important;
  }
  .joinDashboardBanner .joinDashboardLogo{
    width:88px !important;
    height:88px !important;
  }
  .joinDashboardBanner .joinBrandCopy strong{
    font-size:44px !important;
  }
  .joinDashboardBanner .joinBrandCopy small{
    font-size:clamp(19px,1.55vw,25px) !important;
  }
  .joinHeaderValues{gap:16px;min-height:36px}
  .joinHeaderValue{width:40px;font-size:6.2px}
  .joinHeaderValueIcon{width:25px;height:25px}
}

@media (max-width:1000px) and (min-width:701px){
  .joinHeader.joinDashboardBanner{
    grid-template-columns:minmax(480px,1.32fr) minmax(280px,.68fr) !important;
  }
  .joinDashboardBanner .joinBrand{
    gap:12px !important;
    padding:8px 16px 8px 20px !important;
  }
  .joinDashboardBanner .joinDashboardLogo{
    width:68px !important;
    height:68px !important;
  }
  .joinDashboardBanner .joinBrandCopy{gap:10px !important}
  .joinDashboardBanner .joinBrandCopy strong{font-size:35px !important}
  .joinDashboardBanner .joinBrandCopy small{font-size:16px !important}
  .joinDashboardIdentity{gap:5px}
  .joinHeaderValues{gap:11px;min-height:31px}
  .joinHeaderValue{width:34px;font-size:5.3px}
  .joinHeaderValueIcon{width:21px;height:21px}
}

@media (max-width:700px){
  .joinHeader.joinDashboardBanner{
    grid-template-columns:1.28fr .72fr !important;
  }
  .joinDashboardBanner .joinBrand{
    gap:7px !important;
    padding:6px 7px 6px 10px !important;
  }
  .joinDashboardBanner .joinDashboardLogo{
    width:38px !important;
    height:38px !important;
  }
  .joinDashboardBanner .joinBrandCopy{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:0 !important;
  }
  .joinDashboardBanner .joinBrandCopy strong{font-size:20px !important}
  .joinDashboardBanner .joinBrandCopy small{
    max-width:225px;
    font-size:8px !important;
    line-height:1.08 !important;
    white-space:normal !important;
  }
  .joinDashboardIdentity{gap:3px}
  .joinHeaderValues{gap:5px;min-height:20px;padding-left:0}
  .joinHeaderValue{width:19px;font-size:0;gap:0}
  .joinHeaderValueIcon{width:15px;height:15px}
}

@media (max-height:720px) and (min-width:701px){
  .joinDashboardBanner .joinDashboardLogo{
    width:68px !important;
    height:68px !important;
  }
  .joinDashboardBanner .joinBrandCopy strong{font-size:38px !important}
  .joinDashboardBanner .joinBrandCopy small{font-size:19px !important}
  .joinHeaderValues{gap:13px;min-height:30px}
  .joinHeaderValue{width:36px;font-size:5.5px}
  .joinHeaderValueIcon{width:22px;height:22px}
}


/* --------------------------------------------------------------------------
   27 juillet 2026 — bandeau inscription R17
   Correction stricte : pictogrammes entièrement visibles, promesse à la même
   taille que le grand titre de l'accueil et seul « tableau de bord » en orange.
   -------------------------------------------------------------------------- */
.joinDashboardBanner .joinBrandCopy small{
  color:#f5f0e8 !important;
  font:400 clamp(29px,2.745vw,50px)/1.02 Georgia,'Times New Roman',serif !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  white-space:nowrap !important;
}
.joinDashboardBanner .joinBrandCopy small .joinDashboardAccent{
  color:#ff842f !important;
}

/* La règle générique .joinBrand img ne doit jamais redimensionner les images
   contenues dans les six cercles. */
.joinDashboardBanner .joinBrand .joinHeaderValueIcon img{
  width:76% !important;
  height:76% !important;
  max-width:none !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:none !important;
  transform:none !important;
}

/* Même métrique que le bandeau d'accueil selon son mode d'affichage. */
html.etnos-portable .joinDashboardBanner .joinBrandCopy strong{
  font-size:35px !important;
  line-height:.94 !important;
}
html.etnos-portable .joinDashboardBanner .joinBrandCopy small{
  font-size:28px !important;
  line-height:1.02 !important;
}
html.etnos-portable-short .joinDashboardBanner .joinBrandCopy strong{
  font-size:29px !important;
}
html.etnos-portable-short .joinDashboardBanner .joinBrandCopy small{
  font-size:22px !important;
}

@media (max-width:980px) and (min-width:701px){
  .joinDashboardBanner .joinBrandCopy strong{font-size:35px !important}
  .joinDashboardBanner .joinBrandCopy small{font-size:16px !important}
}
@media (max-width:700px){
  .joinDashboardBanner .joinBrandCopy strong{font-size:20px !important}
  .joinDashboardBanner .joinBrandCopy small{
    max-width:225px !important;
    font-size:8px !important;
    line-height:1.08 !important;
    white-space:normal !important;
  }
}


/* ========================================================================== */
/* R34 — fond structurel du futur tableau de bord                              */
/* Une seule image centrale entre la navigation haute et la navigation basse,  */
/* avec les futures zones latérales conservées en bleu ETHNOS.                 */
/* ========================================================================== */

.joinPage{
  grid-template-rows:
    clamp(82px,12.5vh,138px)
    clamp(24px,3.1vh,34px)
    minmax(0,1fr)
    clamp(34px,4.6vh,50px) !important;
  background:#041824 !important;
}

/* La navigation provisoire haute devient une seule barre, sans découpage qui
   donnait visuellement l'impression de deux barres superposées. */
.joinNavigation.joinNavigationTop{
  min-height:0;
  border-top:0 !important;
  border-bottom:1px solid rgba(151,208,219,.16) !important;
  background:linear-gradient(90deg,#041521 0%,#082536 50%,#041521 100%) !important;
  box-shadow:0 9px 24px rgba(0,0,0,.18) !important;
}
.joinNavigation.joinNavigationTop::before,
.joinNavigation.joinNavigationTop::after{
  display:none !important;
}
.joinNavigation.joinNavigationTop > span{
  width:clamp(54px,7vw,120px) !important;
  height:2px !important;
  margin:auto !important;
  background:linear-gradient(90deg,transparent,rgba(245,138,75,.72),transparent) !important;
  opacity:.72 !important;
}

.joinBottomNavigation{
  position:relative;
  z-index:6;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-top:1px solid rgba(151,208,219,.16);
  background:linear-gradient(90deg,#03131f 0%,#082536 50%,#03131f 100%);
  box-shadow:0 -12px 30px rgba(0,0,0,.22);
}
.joinBottomNavigationMarker{
  width:clamp(70px,9vw,150px);
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(245,138,75,.72),transparent);
  opacity:.7;
}

.joinMain{
  padding:clamp(9px,1.45vh,20px) clamp(14px,3vw,58px) !important;
  background:
    linear-gradient(90deg,
      #041b29 0%,
      #062333 18%,
      #072737 29%,
      #072737 71%,
      #062333 82%,
      #041b29 100%) !important;
}

/* Les halos orange de l'ancienne maquette ne sont plus nécessaires : les
   futures colonnes latérales doivent rester franchement bleues. */
.joinAmbient{
  display:none !important;
}

/* Une seule occurrence de l'illustration, centrée et ajustée strictement à la
   hauteur disponible entre les deux barres de navigation. */
.joinWatermark{
  position:absolute !important;
  z-index:-2 !important;
  left:50% !important;
  right:auto !important;
  top:0 !important;
  bottom:0 !important;
  width:auto !important;
  max-width:none !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translateX(-50%) !important;
  opacity:.27 !important;
  filter:grayscale(.18) sepia(.68) saturate(.88) contrast(1.08) brightness(.78) !important;
  mix-blend-mode:screen !important;
  pointer-events:none !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.72) 12%,#000 27%,#000 73%,rgba(0,0,0,.72) 88%,transparent 100%) !important;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.72) 12%,#000 27%,#000 73%,rgba(0,0,0,.72) 88%,transparent 100%) !important;
}

/* Un léger cadre central matérialise la zone qui recevra les contenus alimentés
   par les futures colonnes latérales, sans masquer l'inscription actuelle. */
.joinMain::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  top:0 !important;
  bottom:0 !important;
  left:50% !important;
  width:min(64vw,1280px) !important;
  transform:translateX(-50%) !important;
  opacity:1 !important;
  background:
    linear-gradient(90deg,rgba(151,208,219,.07),transparent 10%,transparent 90%,rgba(151,208,219,.07)),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(1,12,20,.045)) !important;
  border-left:1px solid rgba(151,208,219,.07) !important;
  border-right:1px solid rgba(151,208,219,.07) !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  pointer-events:none !important;
}

.joinCard{
  position:relative;
  z-index:1;
}

@media(max-width:1000px){
  .joinPage{
    grid-template-rows:
      clamp(70px,11vh,104px)
      22px
      minmax(0,1fr)
      34px !important;
  }
  .joinMain::before{width:82vw !important}
  .joinWatermark{opacity:.22 !important}
}

@media(max-width:700px){
  .joinPage{
    grid-template-rows:
      clamp(58px,10vh,82px)
      18px
      minmax(0,1fr)
      30px !important;
  }
  .joinMain::before{width:100vw !important;border-left:0 !important;border-right:0 !important}
  .joinWatermark{opacity:.16 !important}
  .joinBottomNavigationMarker{height:2px}
}

/* ========================================================================== */
/* R35 — séparation nette des trois environnements du tableau de bord          */
/* Image centrale orange sans fondu ; zones latérales franchement bleues.      */
/* ========================================================================== */

.joinMain{
  background:#041b29 !important;
}

/* Aucun halo, cadre, grille ni transition progressive entre les zones. */
.joinMain::before{
  content:none !important;
  display:none !important;
}

.joinWatermark{
  display:block !important;
  position:absolute !important;
  z-index:-2 !important;
  left:50% !important;
  right:auto !important;
  top:0 !important;
  bottom:0 !important;
  width:auto !important;
  max-width:none !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translateX(-50%) !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}


/* ========================================================================== */
/* R36 — Nationalité(s), pays de résidence et confiance déclarative            */
/* ========================================================================== */
.originSection{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(151,208,219,.13);
  border-left:3px solid rgba(245,138,75,.68);
  border-radius:11px;
  background:linear-gradient(145deg,rgba(7,38,53,.56),rgba(2,15,24,.48));
}
.originHeading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:11px}
.originHeading>div{display:flex;flex-direction:column;gap:4px}
.originHeading strong{color:#f5f0e8;font-size:clamp(14px,1.05vw,18px);font-weight:800}
.originHeading small{color:rgba(210,230,234,.55);font-size:clamp(9px,.7vw,11px);line-height:1.4}
.originFields{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(180px,.8fr);gap:12px;align-items:start}
.nationalityField,.residenceField{display:flex;flex-direction:column;gap:7px}
.nationalityField>label,.residenceField>span{color:rgba(245,240,232,.9);font-size:clamp(11px,.82vw,13px);font-weight:800}
.nationalityPicker{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.nationalityPicker select,.residenceField select{
  width:100%;height:40px;padding:0 11px;border:1px solid rgba(151,208,219,.17);border-radius:8px;
  background:#061d2b;color:rgba(237,244,244,.9);font-size:clamp(10px,.76vw,12px);outline:none
}
.nationalityPicker select:focus,.residenceField select:focus{border-color:rgba(80,213,194,.54);box-shadow:0 0 0 3px rgba(80,213,194,.08)}
.nationalityPicker button{
  min-width:86px;padding:0 14px;border:1px solid rgba(245,138,75,.42);border-radius:8px;
  background:rgba(245,138,75,.11);color:#ffd2b0;cursor:pointer;font-size:clamp(8px,.62vw,10px);font-weight:900;text-transform:uppercase;letter-spacing:.06em
}
.nationalityPicker button:hover{background:rgba(245,138,75,.19)}
.nationalityChips{min-height:31px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nationalityPlaceholder{color:rgba(210,230,234,.38);font-size:clamp(8px,.62vw,10px)}
.nationalityChip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 9px;border:1px solid rgba(80,213,194,.20);border-radius:999px;background:rgba(80,213,194,.07);color:rgba(218,244,240,.83);font-size:clamp(8px,.63vw,10px)}
.nationalityChip button{width:20px;height:20px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:rgba(245,240,232,.72);cursor:pointer;font-size:14px;line-height:1}
.nationalityChip button:hover{background:rgba(245,138,75,.22);color:#fff}
.originTrustNote{margin-top:12px;padding:10px 12px;border:1px solid rgba(245,138,75,.16);border-radius:8px;background:rgba(245,138,75,.055);color:rgba(224,237,238,.65);font-size:clamp(9px,.69vw,11px);line-height:1.5}
.originTrustNote>strong{color:#ff9b61;margin-right:4px}
.originTrustNote details{margin-top:6px}
.originTrustNote summary{color:rgba(190,230,229,.72);cursor:pointer;font-weight:800}
.originTrustNote p{margin:7px 0 0;color:rgba(210,230,234,.56)}
.liveOriginLine{line-height:1.35;flex-wrap:wrap}

@media(max-width:980px){
  .originSection{margin-top:8px;padding:9px}
  .originFields{grid-template-columns:1fr;gap:8px}
  .originHeading{margin-bottom:7px}
  .nationalityPicker select,.residenceField select{height:32px}
  .nationalityPicker button{min-width:70px;padding:0 9px}
  .originTrustNote{margin-top:8px;padding:7px 8px}
}
@media(max-width:700px){
  .originSection{padding:7px;border-left-width:2px}
  .originHeading strong{font-size:8px}.originHeading small{font-size:5.3px}
  .nationalityField>label,.residenceField>span{font-size:6.3px}
  .nationalityPicker{gap:4px}.nationalityPicker select,.residenceField select{height:25px;padding:0 6px;font-size:5.6px}
  .nationalityPicker button{min-width:48px;padding:0 5px;font-size:4.8px}
  .nationalityChips{min-height:20px;gap:3px}.nationalityChip{gap:3px;padding:3px 3px 3px 5px;font-size:4.8px}.nationalityChip button{width:13px;height:13px;font-size:9px}
  .nationalityPlaceholder{font-size:4.8px}.originTrustNote{font-size:5px;line-height:1.35}.originTrustNote details{margin-top:4px}
}


/* ========================================================================== */
/* R37 — finitions profil, charte et modèle économique                        */
/* ========================================================================== */

/* Profil 2/2 : hiérarchie sans titres en gras et rythme vertical plus aéré. */
.profileWorkspaceStory .profileIntro h2,
.profileWorkspaceStory .bioField>label,
.profileWorkspaceStory .originHeading strong,
.profileWorkspaceStory .nationalityField>label,
.profileWorkspaceStory .residenceField>span,
.profileWorkspaceStory .originTrustNote>strong,
.profileWorkspaceStory .originTrustNote summary,
.profileWorkspaceStory .interestHeading strong{
  font-weight:400 !important;
}
.profileWorkspaceStory .bioField{margin-bottom:clamp(18px,2.4vh,28px)}
.profileWorkspaceStory .originSection{
  margin-top:0;
  margin-bottom:clamp(18px,2.4vh,28px);
  padding-top:clamp(16px,1.7vw,22px);
  padding-bottom:clamp(16px,1.7vw,22px);
}
.profileWorkspaceStory .interestSection{margin-top:0;padding-top:clamp(16px,2vh,23px)}
.profileWorkspaceStory .originHeading{margin-bottom:clamp(13px,1.6vh,18px)}
.profileWorkspaceStory .originFields{gap:clamp(14px,1.35vw,20px)}
.profileWorkspaceStory .originTrustNote{margin-top:clamp(14px,1.7vh,20px)}

/* Les listes natives n'affichent plus les codes ISO ; le drapeau réel est
   présenté dans le contrôle et dans les pastilles sélectionnées. */
.nationalityPicker{display:block}
.countrySelectControl{
  position:relative;
  display:flex;
  align-items:center;
  min-width:0;
}
.countrySelectFlag{
  position:absolute;
  left:8px;
  z-index:2;
  width:31px;
  height:22px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:5px;
  background:rgba(255,255,255,.05);
  pointer-events:none;
}
.countrySelectFlag[hidden]{display:none!important}
.countrySelectFlag img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.countrySelectControl:has(.countrySelectFlag:not([hidden])) select{
  padding-left:48px;
}
.nationalityChipLabel,
.liveCountry{
  display:inline-flex;
  align-items:center;
  gap:6px;
  vertical-align:middle;
}
.nationalityChipLabel img{
  width:26px;
  height:18px;
  display:block;
  object-fit:cover;
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}
.liveCountry img{
  width:21px;
  height:15px;
  display:block;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
}
.liveOriginLine{display:flex!important;align-items:center!important;gap:4px!important}

/* Charte : le texte explicatif adopte la typographie éditoriale officielle. */
.joinCard[data-current-view="values"] .valuesHeaderIntro,
.joinCard[data-current-view="values-ready"] .valuesHeaderIntro{
  font-family:Georgia,'Times New Roman',serif !important;
  letter-spacing:0 !important;
}

/* Paiement : le titre de page remplace le doublon du bloc gauche. Les deux
   cartes ont la même grille, la même indentation et les mêmes alinéas. */
.joinCard[data-current-view="payment"] .joinCardHeader h1 .joinWelcomeLine,
.joinCard[data-current-view="payment"] .joinCardHeader h1 .joinPathLine{
  text-transform:none !important;
}
.paymentCard{
  padding:clamp(22px,2.3vw,36px) !important;
}
.paymentCardChoice,
.paymentCardAmount{
  justify-content:center;
}
.paymentCardChoiceBody,
.paymentCardAmountBody{
  display:grid;
  grid-template-columns:clamp(52px,4vw,68px) minmax(0,1fr);
  align-items:start;
  gap:clamp(17px,1.6vw,25px);
  width:100%;
}
.paymentCardAmountBody{position:relative;z-index:1}
.paymentCardIconAmount{
  display:grid;
  place-items:center;
  color:var(--orange-2);
  font:400 clamp(24px,1.9vw,32px)/1 Georgia,serif;
}
.paymentChoicePoints,
.paymentCardAmount ul{
  gap:clamp(9px,1.15vh,14px) !important;
}
.paymentChoicePoints li,
.paymentCardAmount li{
  padding-left:clamp(24px,1.8vw,31px) !important;
  color:#f6f1e9 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:clamp(12px,.92vw,15.5px) !important;
  font-weight:400 !important;
  line-height:1.45 !important;
}
.paymentChoicePoints li::before,
.paymentCardAmount li::before{
  left:0 !important;
  top:.02em !important;
  color:var(--orange-2) !important;
  font-size:1.15em !important;
  font-weight:400 !important;
}
.paymentPrice{
  margin-bottom:clamp(18px,2.2vh,28px) !important;
}
.paymentPrice small{
  font-family:Arial,Helvetica,sans-serif !important;
  font-weight:400 !important;
}

@media(max-height:760px) and (min-width:701px){
  .profileWorkspaceStory .bioField{margin-bottom:12px}
  .profileWorkspaceStory .originSection{margin-bottom:12px;padding-top:10px;padding-bottom:10px}
  .profileWorkspaceStory .interestSection{padding-top:10px}
  .countrySelectFlag{width:25px;height:18px;left:6px}
  .countrySelectControl:has(.countrySelectFlag:not([hidden])) select{padding-left:38px}
  .paymentCardChoiceBody,.paymentCardAmountBody{grid-template-columns:45px minmax(0,1fr);gap:14px}
  .paymentChoicePoints li,.paymentCardAmount li{font-size:10.5px!important;line-height:1.35!important}
}
@media(max-width:700px){
  .profileWorkspaceStory .bioField{margin-bottom:9px}
  .profileWorkspaceStory .originSection{margin-bottom:9px;padding-top:8px;padding-bottom:8px}
  .profileWorkspaceStory .interestSection{padding-top:8px}
  .countrySelectFlag{width:20px;height:14px;left:4px;border-radius:3px}
  .countrySelectControl:has(.countrySelectFlag:not([hidden])) select{padding-left:29px}
  .nationalityChipLabel img{width:18px;height:12px;border-radius:2px}
  .liveCountry img{width:15px;height:10px;border-radius:2px}
  .paymentCardChoiceBody,.paymentCardAmountBody{grid-template-columns:28px minmax(0,1fr);gap:8px}
  .paymentChoicePoints li,.paymentCardAmount li{padding-left:11px!important;font-size:5.7px!important;line-height:1.38!important}
}


/* ========================================================================== 
   27 juillet 2026 — R38 : système typographique officiel + jauge réelle
   Georgia = prise de parole, explications et contenus éditoriaux.
   Arial = commandes, champs, repères et informations purement fonctionnelles.
   ========================================================================== */
:root{
  --font-editorial:Georgia,'Times New Roman',serif;
  --font-interface:Arial,Helvetica,sans-serif;
}

/* Une seule famille éditoriale pour tous les textes qui s'adressent au membre. */
.joinCardHeader h1,
.joinView h2,
.joinView h3,
.joinView p,
.joinView li,
.joinView blockquote,
.joinView blockquote strong,
.valuesHeaderIntro,
.valueStatement,
.valueExplanation,
.valuesAgreement span,
.paymentCard,
.paymentCard h2,
.paymentCard li,
.paymentPrice,
.paymentPrice small,
.paymentManifesto,
.emailVerificationIntro p,
.emailVerificationSuccess span,
.photoCharterDialog h2,
.photoCharterDialog p,
.photoCharterAgreement span{
  font-family:var(--font-editorial) !important;
}

.joinView h2,
.joinView h3,
.paymentCard h2,
.paymentCard li,
.paymentPrice small,
.paymentManifesto,
.emailVerificationIntro p,
.photoCharterDialog h2{
  font-weight:400 !important;
}

/* Les outils d'inscription restent volontairement dans la typo d'interface. */
.joinSectionLabel,
.joinEyebrow,
.joinSteps,
.joinProgressGauge,
.joinContinue,
.joinBack,
.profileChoiceButton,
.fieldGroup>span,
.fieldGroup>small,
.bioField>label,
.interestHeading,
.originHeading,
.nationalityField>label,
.residenceField>span,
.countrySelectControl,
.nationalityChips,
.customInterest,
.formRequirements,
.liveProfileLabel,
.valueProgress,
.valueDots,
.valueValidate,
.emailVerificationField,
.emailVerificationNote,
.emailVerificationError{
  font-family:var(--font-interface) !important;
}

/* Modèle économique : mêmes métriques et même fonte officielle dans les deux blocs. */
.paymentChoicePoints li,
.paymentCardAmount li{
  font-family:var(--font-editorial) !important;
  font-size:clamp(15px,1.08vw,18px) !important;
  line-height:1.42 !important;
}
.paymentPrice small{
  font-family:var(--font-editorial) !important;
  font-size:clamp(15px,1.02vw,18px) !important;
  line-height:1.3 !important;
}
.paymentManifesto p,
.paymentManifesto strong{
  font-family:var(--font-editorial) !important;
  font-weight:400 !important;
}

/* Jauge correspondant aux quinze écrans/actions réels du parcours. */
.joinProgressGauge{
  flex:0 0 clamp(190px,16vw,270px);
  align-self:center;
  display:grid;
  gap:8px;
  margin-top:2px;
  padding:10px 13px;
  border:1px solid rgba(245,138,75,.24);
  border-radius:11px;
  background:linear-gradient(145deg,rgba(245,138,75,.075),rgba(4,24,36,.38));
  box-shadow:0 8px 28px rgba(0,0,0,.12);
}
.joinProgressMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:rgba(255,207,171,.88);
  font-size:clamp(9px,.68vw,11px);
  font-weight:700;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.joinProgressMeta b{
  color:var(--orange-2);
  font-weight:800;
  white-space:nowrap;
}
.joinProgressTrack{
  position:relative;
  width:100%;
  height:6px;
  overflow:hidden;
  border:1px solid rgba(151,208,219,.15);
  border-radius:999px;
  background:rgba(2,14,23,.72);
}
.joinProgressTrack>span{
  display:block;
  width:7%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
  box-shadow:0 0 16px rgba(245,138,75,.42);
  transition:width .34s ease;
}
.joinSteps li{transition:color .25s ease,opacity .25s ease}
.joinSteps li.isComplete{color:rgba(127,226,198,.82)}
.joinSteps li.isComplete>span{
  border-color:rgba(80,213,194,.42);
  background:rgba(80,213,194,.12);
  color:#7fe2c6;
}
.joinSteps li.isComplete>span::before{content:'✓';font-size:11px}
.joinSteps li.isComplete>span{font-size:0}
.joinSteps li.isComplete small{color:rgba(127,226,198,.52)}

@media(max-height:760px) and (min-width:701px){
  .joinProgressGauge{flex-basis:180px;gap:5px;padding:7px 9px}
  .joinProgressMeta{font-size:8px}
  .joinProgressTrack{height:5px}
  .paymentChoicePoints li,.paymentCardAmount li{font-size:12px!important;line-height:1.35!important}
  .paymentPrice small{font-size:12px!important}
}
@media(max-width:700px){
  .joinCardHeader{align-items:center}
  .joinProgressGauge{flex-basis:104px;gap:4px;padding:6px 7px;border-radius:7px}
  .joinProgressMeta{gap:4px;font-size:5.2px;letter-spacing:.035em}
  .joinProgressTrack{height:4px}
  .paymentChoicePoints li,.paymentCardAmount li{font-size:6.4px!important;line-height:1.38!important}
  .paymentPrice small{font-size:6.4px!important}
}

/* ========================================================================== */
/* R39 — tableau de bord validé : centre orange lumineux + deux navigations bas */
/* ========================================================================== */

/* Suppression définitive de la barre provisoire située sous le bandeau. */
.joinNavigationTop{display:none !important}

.joinPage{
  grid-template-rows:
    clamp(82px,12.5vh,138px)
    minmax(0,1fr)
    24px
    clamp(46px,5.7vh,58px) !important;
  min-height:100svh;
  background:#041824 !important;
}

/* Environnement nettement compartimenté : illustration centrale, bleu franc
   dans les deux futures zones latérales. */
.joinMain{
  position:relative;
  isolation:isolate;
  padding:clamp(9px,1.45vh,20px) clamp(14px,3vw,58px) !important;
  background:#041b29 !important;
  overflow:hidden;
}
.joinMain::before{
  content:"" !important;
  position:absolute !important;
  z-index:-2 !important;
  inset:0 auto 0 50% !important;
  width:min(58vw,1040px) !important;
  height:100% !important;
  transform:translateX(-50%) !important;
  background-color:#f47f16 !important;
  background-image:url("../assets/images/dashboard-centre-orange-hd.png") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  border-left:1px solid rgba(255,157,57,.34) !important;
  border-right:1px solid rgba(255,157,57,.34) !important;
  box-shadow:0 0 34px rgba(244,127,22,.14) !important;
  opacity:1 !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  pointer-events:none !important;
}
.joinMain::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,
    rgba(4,27,41,.98) 0%,
    rgba(4,27,41,.90) 18%,
    rgba(4,27,41,.10) 29%,
    rgba(4,27,41,.10) 71%,
    rgba(4,27,41,.90) 82%,
    rgba(4,27,41,.98) 100%);
  pointer-events:none;
}
.joinWatermark,
.joinAmbient{display:none !important}

/* La carte d'inscription reste au-dessus de l'environnement du tableau de bord. */
.joinCard{position:relative;z-index:1}

/* Mini-barre légale immédiatement au-dessus de la navigation principale. */
.joinLegalNavigation{
  position:relative;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,2.2vw,34px);
  min-width:0;
  padding:0 12px;
  border-top:1px solid rgba(151,208,219,.10);
  background:#031521;
  overflow:hidden;
}
.joinLegalNavigation a{
  color:rgba(221,238,242,.68);
  font:500 clamp(9px,.66vw,12px)/1 Arial,sans-serif;
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s ease;
}
.joinLegalNavigation a:hover{color:#ff9858}

/* Navigation principale basse : plus fine, discrète et sans gros pavés. */
.joinBottomNavigation{
  position:relative;
  z-index:8;
  display:grid !important;
  grid-template-columns:repeat(7,minmax(54px,1fr));
  align-items:stretch;
  justify-content:center;
  min-height:0 !important;
  padding:0 clamp(24px,10vw,220px);
  border-top:1px solid rgba(151,208,219,.14) !important;
  background:linear-gradient(180deg,#061f2d 0%,#031521 100%) !important;
  box-shadow:0 -9px 22px rgba(0,0,0,.18) !important;
}
.joinBottomNavigation a,
.joinBottomNavigation button{
  appearance:none;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:rgba(224,237,240,.70);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-width:0;
  padding:3px 4px 2px;
  cursor:pointer;
}
.joinBottomNavigation .dockIcon{
  display:block;
  color:inherit;
  font:400 clamp(16px,1.25vw,23px)/.9 Georgia,serif;
}
.joinBottomNavigation small{
  color:inherit;
  font:500 clamp(8px,.62vw,11px)/1 Arial,sans-serif;
}
.joinBottomNavigation a:hover,
.joinBottomNavigation button:hover,
.joinBottomNavigation .isActive{color:#ff9858}
.joinBottomNavigation .isActive{border-bottom-color:#ff8e47}
.joinBottomNavigationMarker{display:none !important}

@media(max-width:1100px){
  .joinPage{grid-template-rows:clamp(70px,11vh,104px) minmax(0,1fr) 22px 46px !important}
  .joinMain::before{width:72vw !important}
  .joinBottomNavigation{padding:0 18px}
}
@media(max-width:700px){
  .joinPage{grid-template-rows:70px minmax(0,1fr) 20px 44px !important}
  .joinMain::before{width:92vw !important;background-size:cover !important}
  .joinMain::after{background:rgba(4,27,41,.24)}
  .joinLegalNavigation{justify-content:flex-start;overflow-x:auto;gap:18px}
  .joinBottomNavigation{grid-template-columns:repeat(7,minmax(48px,1fr));padding:0;overflow-x:auto}
  .joinBottomNavigation small{font-size:7px}
}


/* ========================================================================== */
/* R40 — ordre des deux barres corrigé + fond central réellement visible      */
/* ========================================================================== */
.joinPage{
  grid-template-rows:
    clamp(82px,12.5vh,138px)
    minmax(0,1fr)
    clamp(46px,5.7vh,58px)
    24px !important;
}

/* Le fond est posé directement sur la zone utile : il ne peut plus passer
   derrière le fond du parent à cause d'un z-index négatif. */
.joinMain{
  background-color:#041b29 !important;
  background-image:url("../assets/images/dashboard-centre-orange-hd.png") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:min(58vw,1040px) 100% !important;
}
.joinMain::before,
.joinMain::after{display:none !important}

/* La carte reste parfaitement lisible tout en laissant apparaître le décor. */
.joinCard{
  background:linear-gradient(145deg,rgba(8,36,51,.90),rgba(4,20,31,.87)) !important;
  backdrop-filter:blur(5px) !important;
}

/* Navigation principale d'abord, mini-barre légale tout en bas. */
.joinBottomNavigation{order:3}
.joinLegalNavigation{order:4;border-top:1px solid rgba(151,208,219,.11)}

@media(max-width:1100px){
  .joinPage{grid-template-rows:clamp(70px,11vh,104px) minmax(0,1fr) 46px 22px !important}
  .joinMain{background-size:72vw 100% !important}
}
@media(max-width:700px){
  .joinPage{grid-template-rows:70px minmax(0,1fr) 44px 20px !important}
  .joinMain{background-size:92vw 100% !important}
}

/* --------------------------------------------------------------------------
   27 juillet 2026 — R41 : jauge en huit étapes et ombre propre
   -------------------------------------------------------------------------- */
.joinCard{
  box-shadow:0 8px 22px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.02) inset !important;
}
.joinAmbient{display:none !important}
.joinSteps{
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  min-height:46px;
  padding:0 clamp(14px,1.35vw,24px) !important;
}
.joinSteps:before{left:5.5% !important;right:5.5% !important}
.joinSteps li{
  min-width:0;
  gap:clamp(5px,.45vw,9px) !important;
  padding:8px 5px !important;
  justify-content:center;
  white-space:nowrap;
}
.joinSteps li>span{
  width:25px !important;
  height:25px !important;
  font-size:7px !important;
}
.joinSteps li>strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font:700 clamp(8px,.57vw,11px)/1.1 Arial,Helvetica,sans-serif !important;
  letter-spacing:.015em !important;
}
.joinSteps li.isActive>strong{color:#f5f0e8}
.joinSteps li.isComplete>strong{color:rgba(127,226,198,.82)}

.emailValidatedPanel{
  min-height:clamp(290px,43vh,470px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,1.7vh,20px);
  padding:clamp(24px,4vw,58px);
  text-align:center;
  border:1px solid rgba(151,208,219,.15);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(8,43,61,.92),rgba(3,20,30,.95));
  box-shadow:0 8px 22px rgba(0,0,0,.14);
}
.emailValidatedIcon{
  width:clamp(58px,5vw,78px);
  height:clamp(58px,5vw,78px);
  display:grid;
  place-items:center;
  border:1px solid rgba(80,213,194,.46);
  border-radius:50%;
  color:#7fe2c6;
  background:rgba(80,213,194,.08);
  font:400 clamp(28px,2.8vw,42px)/1 Georgia,serif;
}
.emailValidatedPanel h2{
  margin:0;
  color:#f5f0e8;
  font:400 clamp(28px,3.2vw,52px)/1.08 Georgia,serif;
}
.emailValidatedPanel p{
  max-width:760px;
  margin:0;
  color:rgba(225,238,240,.82);
  font:400 clamp(15px,1.15vw,20px)/1.55 Georgia,serif;
}
.emailValidatedCta{margin-top:8px;min-width:230px}

@media (max-width:1200px){
  .joinSteps li>strong{font-size:7.5px !important}
  .joinSteps li>span{width:22px !important;height:22px !important}
}
@media (max-width:900px){
  .joinSteps{overflow-x:auto;grid-template-columns:repeat(8,minmax(120px,1fr)) !important;justify-content:start}
  .joinSteps li>strong{font-size:9px !important;overflow:visible}
}

/* --------------------------------------------------------------------------
   28 juillet 2026 — R42 : 9 étapes, accès privés et branchement API
   -------------------------------------------------------------------------- */
.joinSteps{grid-template-columns:repeat(9,minmax(0,1fr)) !important}
.joinSteps:before{left:4.9% !important;right:4.9% !important}
.joinProgressTrack>span{width:11%}

.ageDateField{max-width:390px;display:flex;flex-direction:column;gap:7px;margin:clamp(15px,2vh,24px) 0}
.ageDateField>span{color:rgba(245,240,232,.94);font:800 clamp(13px,1vw,17px)/1.2 Arial,Helvetica,sans-serif}
.ageDateField input{width:100%;height:48px;padding:0 14px;border:1px solid rgba(151,208,219,.22);border-radius:9px;outline:none;color:#f5f0e8;color-scheme:dark;background:rgba(2,14,23,.66);font:600 14px/1 Arial,Helvetica,sans-serif}
.ageDateField input:focus{border-color:rgba(80,213,194,.58);box-shadow:0 0 0 3px rgba(80,213,194,.07)}
.ageValidationError,.apiFormError{margin:10px 0 0;padding:10px 12px;border:1px solid rgba(255,116,116,.32);border-radius:8px;color:#ffc0c0;background:rgba(104,20,28,.18);font:650 clamp(10px,.78vw,12.5px)/1.45 Arial,Helvetica,sans-serif}

.statusChoiceGrid{max-width:690px;display:grid;grid-template-columns:1fr;gap:11px;margin-top:20px}
.statusChoice{width:100%;min-width:0;text-align:left}
.statusChoice>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.statusChoice>span strong{font:850 clamp(10px,.78vw,13px)/1.2 Arial,Helvetica,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.statusChoice>span small{color:rgba(225,238,240,.66);font:500 clamp(9px,.7vw,11.5px)/1.35 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none}

.accessWorkspace{height:100%;min-height:0;display:flex;flex-direction:column;gap:clamp(12px,1.7vh,20px);padding:clamp(18px,2.2vw,32px);border:1px solid rgba(151,208,219,.12);border-radius:13px;background:linear-gradient(145deg,rgba(5,29,43,.83),rgba(2,16,26,.68));overflow:auto}
.accessIntro{max-width:850px}
.accessIntro h2{margin:7px 0 8px;color:rgba(245,240,232,.97);font:400 clamp(25px,1.95vw,36px)/1.08 Georgia,serif}
.accessIntro p{max-width:820px;margin:0;color:rgba(225,238,240,.75);font:400 clamp(12px,.92vw,15px)/1.52 Georgia,'Times New Roman',serif}
.accessPrivateSummary{display:flex;align-items:center;gap:12px;max-width:720px;padding:11px 13px;border:1px solid rgba(80,213,194,.18);border-radius:9px;background:rgba(80,213,194,.045);font-family:Arial,Helvetica,sans-serif}
.accessPrivateSummary span{color:rgba(225,238,240,.62);font-size:10px;font-weight:750;letter-spacing:.05em;text-transform:uppercase}
.accessPrivateSummary strong{color:#a7eadc;font-size:12px}
.accessPrivateSummary button{margin-left:auto;border:0;color:var(--orange-2);background:transparent;cursor:pointer;font-size:10px;font-weight:800;text-transform:uppercase}
.accessFields{max-width:860px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.accessFields .fieldGroup:first-child{grid-column:1/-1}
.passwordControl{position:relative;display:block}
.passwordControl input{padding-right:82px !important}
.passwordControl button{position:absolute;top:50%;right:7px;transform:translateY(-50%);padding:7px 9px;border:1px solid rgba(151,208,219,.16);border-radius:6px;color:rgba(225,238,240,.72);background:rgba(8,38,52,.82);cursor:pointer;font:750 9px/1 Arial,Helvetica,sans-serif;text-transform:uppercase}
.accessRequirements{max-width:860px}
.accessActions{margin-top:auto}

.languageSection{margin-top:clamp(15px,1.9vh,22px);padding-top:clamp(14px,1.8vh,21px);border-top:1px solid rgba(151,208,219,.12)}
.languageGrid{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.languageGrid button{padding:8px 10px;border:1px solid rgba(151,208,219,.16);border-radius:999px;color:rgba(225,238,240,.72);background:rgba(2,14,23,.44);cursor:pointer;font:700 clamp(9px,.69vw,11px)/1 Arial,Helvetica,sans-serif;transition:.18s ease}
.languageGrid button:hover{border-color:rgba(80,213,194,.35);transform:translateY(-1px)}
.languageGrid button.isSelected{border-color:rgba(80,213,194,.58);color:#dff8f2;background:rgba(80,213,194,.13);box-shadow:0 0 0 2px rgba(80,213,194,.035)}

.joinContinue.isLoading{cursor:wait;filter:saturate(.75);opacity:.86}
.joinContinue.isLoading b{animation:ethnosSpin .8s linear infinite}
@keyframes ethnosSpin{to{transform:rotate(360deg)}}

.emailSentStatus{display:grid;gap:5px;margin-top:12px;padding:13px 15px;border:1px solid rgba(80,213,194,.31);border-radius:9px;background:rgba(80,213,194,.075)}
.emailSentStatus strong{color:#87e5c9;font:800 clamp(11px,.82vw,14px)/1.3 Arial,Helvetica,sans-serif}
.emailSentStatus span{color:rgba(225,238,240,.72);font:500 clamp(10px,.74vw,12px)/1.45 Arial,Helvetica,sans-serif}

@media(max-width:1180px){
  .joinSteps li>strong{font-size:7px !important}
  .joinSteps li{gap:3px !important;padding-inline:2px !important}
  .joinSteps li>span{width:22px !important;height:22px !important}
}
@media(max-width:700px){
  .joinSteps{overflow-x:auto;grid-template-columns:repeat(9,minmax(92px,1fr)) !important;justify-content:start;scrollbar-width:none}
  .joinSteps::-webkit-scrollbar{display:none}
  .joinSteps:before{display:none}
  .accessFields{grid-template-columns:1fr}
  .accessFields .fieldGroup:first-child{grid-column:auto}
  .accessPrivateSummary{align-items:flex-start;flex-wrap:wrap}
  .accessPrivateSummary button{margin-left:0}
  .statusChoice>span small{font-size:7px}
}

.statusChoiceUnavailable{cursor:not-allowed!important;opacity:.56;filter:saturate(.45)}
.statusChoiceUnavailable:hover{transform:none!important}
.statusChoiceUnavailable b{width:auto!important;min-width:54px;padding:0 8px;border-radius:999px;font-size:7px!important;letter-spacing:.08em;text-transform:uppercase}

/* --------------------------------------------------------------------------
   28 juillet 2026 — R44 : mise en page de l’étape « Votre âge »
   -------------------------------------------------------------------------- */

/* Dix étapes lisibles sur une seule ligne. */
.joinSteps{
  grid-template-columns:repeat(10,minmax(0,1fr)) !important;
  overflow-x:visible;
}
.joinSteps:before{left:4.45% !important;right:4.45% !important}
.joinSteps li{
  gap:clamp(5px,.42vw,8px) !important;
  padding:9px 3px !important;
  white-space:nowrap;
}
.joinSteps li>span{
  width:27px !important;
  height:27px !important;
  font-size:8px !important;
}
.joinSteps li>strong{
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  font:700 clamp(10px,.74vw,13px)/1.1 Arial,Helvetica,sans-serif !important;
  letter-spacing:.01em !important;
}

/* L’étape naissance reprend la composition en deux rangées de la première page. */
.joinView[data-view="birth-date"]{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:clamp(12px,1.7vh,20px);
}

/* Le grand cadre utilise davantage de la hauteur disponible sur cette étape. */
.joinCard[data-current-view="birth-date"]{
  height:min(840px,98%) !important;
}

/* Contenu centré sur son axe à gauche ; boutons centrés sur leur propre axe à droite. */
.joinView[data-view="birth-date"] .joinAgePanel{
  grid-template-columns:minmax(520px,760px) auto;
  justify-content:center;
  align-items:center;
  column-gap:clamp(28px,4vw,68px);
  padding:clamp(24px,3vh,38px) clamp(24px,3vw,46px);
  overflow:visible;
}
.joinView[data-view="birth-date"] .joinAgeCopy{
  width:100%;
  max-width:760px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.joinView[data-view="birth-date"] .joinAgeCopy h2{
  max-width:740px;
  margin:0 0 clamp(18px,2.2vh,28px);
  color:#f5f0e8;
  font:400 clamp(27px,2vw,38px)/1.18 Georgia,'Times New Roman',serif;
  letter-spacing:-.015em;
  text-align:center;
}
.joinView[data-view="birth-date"] .ageDateField{
  width:min(100%,420px);
  max-width:none;
  gap:10px;
  margin:0 auto clamp(18px,2.2vh,28px);
  align-items:stretch;
}
.joinView[data-view="birth-date"] .ageDateField>span{
  color:rgba(245,240,232,.96);
  font:400 clamp(17px,1.18vw,21px)/1.2 Georgia,'Times New Roman',serif;
  text-align:center;
}
.joinView[data-view="birth-date"] .ageDateField input{
  height:54px;
  text-align:center;
  font-size:16px;
}
.joinView[data-view="birth-date"] .joinAgeInstruction{
  margin:0 !important;
  text-align:center;
  font:400 clamp(15px,1.05vw,18px)/1.45 Georgia,'Times New Roman',serif;
}

/* Neutralise le fond collant qui apparaissait derrière les boutons. */
.joinView[data-view="birth-date"] .profileActions{
  position:static !important;
  z-index:auto !important;
  align-self:center;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,1.2vw,22px);
  margin:0 !important;
  padding:0 !important;
  background:none !important;
}
.joinView[data-view="birth-date"] .profileActions::before,
.joinView[data-view="birth-date"] .profileActions::after{
  content:none !important;
  display:none !important;
}

@media(max-width:1180px){
  .joinSteps{
    grid-template-columns:repeat(10,minmax(118px,1fr)) !important;
    overflow-x:auto;
    justify-content:start;
    scrollbar-width:none;
  }
  .joinSteps::-webkit-scrollbar{display:none}
  .joinSteps:before{display:none}
  .joinSteps li>strong{font-size:10px !important}
  .joinView[data-view="birth-date"] .joinAgePanel{
    grid-template-columns:minmax(430px,1fr) auto;
    column-gap:24px;
  }
}

@media(max-width:700px){
  .joinSteps{grid-template-columns:repeat(10,minmax(104px,1fr)) !important}
  .joinCard[data-current-view="birth-date"]{height:98% !important}
  .joinView[data-view="birth-date"]{
    display:flex;
    flex-direction:column;
    gap:7px;
  }
  .joinView[data-view="birth-date"] .joinAgePanel{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:14px 12px;
  }
  .joinView[data-view="birth-date"] .joinAgeCopy h2{
    margin-bottom:13px;
    font-size:20px;
  }
  .joinView[data-view="birth-date"] .ageDateField{
    width:min(100%,360px);
    margin-bottom:13px;
  }
  .joinView[data-view="birth-date"] .ageDateField>span{font-size:14px}
  .joinView[data-view="birth-date"] .ageDateField input{height:46px;font-size:14px}
  .joinView[data-view="birth-date"] .joinAgeInstruction{font-size:11px}
  .joinView[data-view="birth-date"] .profileActions{
    align-self:center;
    gap:9px;
  }
}


/* --------------------------------------------------------------------------
   28 juillet 2026 — R45 : étape Statut épurée et recentrée
   -------------------------------------------------------------------------- */

/* Une étape terminée n'affiche plus son ancien numéro sous la coche. */
.joinSteps li.isComplete>span{
  font-size:0 !important;
}
.joinSteps li.isComplete>span::before{
  content:'✓' !important;
  font-size:11px !important;
  line-height:1 !important;
}

/* L'étape Statut utilise seule toute la largeur : aucun aperçu de profil ici. */
.joinCard[data-current-view="profile-choice"] .profileChoiceWorkspace{
  grid-template-columns:minmax(0,1fr) !important;
  gap:0 !important;
}
.joinCard[data-current-view="profile-choice"] .profileChoiceEditor{
  width:100%;
  display:grid !important;
  grid-template-rows:minmax(0,1fr) auto;
  justify-content:stretch !important;
  overflow:visible !important;
  background:linear-gradient(145deg,rgba(4,22,34,.86),rgba(2,15,25,.70)) !important;
}
.joinCard[data-current-view="profile-choice"] .profileChoiceCopy{
  width:100%;
  max-width:none !important;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 !important;
  padding:clamp(18px,3vh,38px) clamp(18px,2.4vw,36px) !important;
}
.joinCard[data-current-view="profile-choice"] .statusChoiceGrid{
  width:min(100%,1120px);
  max-width:1120px !important;
  display:grid;
  gap:clamp(14px,1.7vh,20px);
  align-content:center;
  justify-items:stretch;
  margin:0 auto !important;
}
.joinCard[data-current-view="profile-choice"] .statusChoice{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:clamp(70px,8.5vh,92px);
  padding:clamp(15px,1.7vh,20px) clamp(18px,1.7vw,26px) !important;
}
.joinCard[data-current-view="profile-choice"] .profileChoiceButtonMember>span{
  gap:clamp(7px,.8vh,11px);
}
.joinCard[data-current-view="profile-choice"] .profileChoiceButtonMember>span strong{
  color:#071b28;
  font:850 clamp(16px,1.08vw,20px)/1.15 Arial,Helvetica,sans-serif !important;
  letter-spacing:.015em !important;
  text-transform:none !important;
  white-space:nowrap;
}
.joinCard[data-current-view="profile-choice"] .profileChoiceButtonMember>span small{
  color:rgba(7,27,40,.78) !important;
  font:600 clamp(15px,1.02vw,18px)/1.24 Arial,Helvetica,sans-serif !important;
  white-space:nowrap;
}
.joinCard[data-current-view="profile-choice"] .profileChoiceButtonMember>b{
  flex:0 0 auto;
}

/* Les actions ne génèrent plus de bande sombre ou de rectangle parasite. */
.joinCard[data-current-view="profile-choice"] .profileChoiceActions{
  position:static !important;
  z-index:auto !important;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin:0 !important;
  padding:0 clamp(18px,2.4vw,36px) clamp(16px,2vh,24px) !important;
  background:none !important;
  box-shadow:none !important;
}
.joinCard[data-current-view="profile-choice"] .profileChoiceActions::before,
.joinCard[data-current-view="profile-choice"] .profileChoiceActions::after,
.joinCard[data-current-view="profile-choice"] .profileChoiceCopy::before,
.joinCard[data-current-view="profile-choice"] .profileChoiceCopy::after,
.joinCard[data-current-view="profile-choice"] .statusChoiceGrid::before,
.joinCard[data-current-view="profile-choice"] .statusChoiceGrid::after{
  content:none !important;
  display:none !important;
}

@media(max-width:1180px){
  .joinCard[data-current-view="profile-choice"] .statusChoiceGrid{
    width:min(100%,940px);
  }
  .joinCard[data-current-view="profile-choice"] .profileChoiceButtonMember>span small{
    font-size:13px !important;
  }
}

@media(max-width:700px){
  .joinCard[data-current-view="profile-choice"] .profileChoiceCopy{
    padding:12px 10px !important;
  }
  .joinCard[data-current-view="profile-choice"] .statusChoiceGrid{
    gap:9px;
  }
  .joinCard[data-current-view="profile-choice"] .statusChoice{
    min-height:58px;
    padding:11px 12px !important;
  }
  .joinCard[data-current-view="profile-choice"] .profileChoiceButtonMember>span strong,
  .joinCard[data-current-view="profile-choice"] .profileChoiceButtonMember>span small{
    white-space:normal;
  }
  .joinCard[data-current-view="profile-choice"] .profileChoiceButtonMember>span strong{
    font-size:12px !important;
  }
  .joinCard[data-current-view="profile-choice"] .profileChoiceButtonMember>span small{
    font-size:10px !important;
  }
  .joinCard[data-current-view="profile-choice"] .profileChoiceActions{
    padding:0 10px 12px !important;
  }
}


/* --------------------------------------------------------------------------
   28 juillet 2026 — R46 : typographie officielle, accès alignés et MDP 8
   -------------------------------------------------------------------------- */

/* Le sous-titre Statut conserve son point d'interrogation sur la même ligne. */
.joinCard[data-current-view="profile-choice"] .joinPathLine{
  max-width:none !important;
  font-size:clamp(24px,2.05vw,37px) !important;
  line-height:1.08 !important;
  letter-spacing:-.02em !important;
  white-space:nowrap !important;
}

/* La ligne de progression passe derrière les pastilles et les libellés. */
.joinSteps:before{
  z-index:0 !important;
}
.joinSteps li{
  position:relative;
  z-index:1;
}
.joinSteps li>span,
.joinSteps li>strong{
  position:relative;
  z-index:2;
}
.joinSteps li>strong{
  padding:2px 6px !important;
  border-radius:4px;
  background:#0a202b;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* Statuts : typo éditoriale officielle, graisse normale. */
.joinCard[data-current-view="profile-choice"] .statusChoice>span strong,
.joinCard[data-current-view="profile-choice"] .statusChoice>span small{
  font-family:var(--font-editorial) !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.joinCard[data-current-view="profile-choice"] .profileChoiceButtonMember>span strong{
  font:400 clamp(18px,1.22vw,23px)/1.15 var(--font-editorial) !important;
}
.joinCard[data-current-view="profile-choice"] .profileChoiceButtonMember>span small{
  font:400 clamp(15px,1.02vw,18px)/1.28 var(--font-editorial) !important;
}
.joinCard[data-current-view="profile-choice"] .statusChoiceUnavailable>span strong{
  font-size:clamp(17px,1.08vw,21px) !important;
}
.joinCard[data-current-view="profile-choice"] .statusChoiceUnavailable>span small{
  font-size:clamp(13px,.9vw,16px) !important;
}

/* Accès : intitulés en typo officielle sans gras et champs parfaitement alignés. */
.joinCard[data-current-view="access"] .accessFields .fieldGroup>span:first-child{
  color:rgba(245,240,232,.96);
  font:400 clamp(18px,1.28vw,23px)/1.2 var(--font-editorial) !important;
  letter-spacing:0 !important;
}
.joinCard[data-current-view="access"] .accessFields .fieldGroup>small{
  min-height:2.9em;
  display:block;
  font-family:var(--font-editorial) !important;
  font-weight:400 !important;
}
.joinCard[data-current-view="access"] .fieldHelpSpacer{
  visibility:hidden;
  pointer-events:none;
  user-select:none;
}
.joinCard[data-current-view="access"] .accessFields{
  align-items:start;
}
.joinCard[data-current-view="access"] .accessFields .fieldGroup{
  align-self:start;
}
.joinCard[data-current-view="access"] .passwordControl{
  margin-top:0;
}

@media(max-width:1180px){
  .joinCard[data-current-view="profile-choice"] .joinPathLine{
    font-size:clamp(20px,2.35vw,30px) !important;
  }
}
@media(max-width:700px){
  .joinCard[data-current-view="profile-choice"] .joinPathLine{
    white-space:normal !important;
    font-size:18px !important;
  }
  .joinSteps li>strong{
    padding-inline:4px !important;
  }
  .joinCard[data-current-view="access"] .accessFields .fieldGroup>small{
    min-height:0;
  }
  .joinCard[data-current-view="access"] .fieldHelpSpacer{
    display:none;
  }
}

/* ========================================================================== */
/* 28 juillet 2026 — R48 : reconstruction stable après le dernier tour local  */
/* ========================================================================== */
:root{
  --font-editorial:Georgia,"Times New Roman",serif;
  --font-interface:Arial,Helvetica,sans-serif;
}

/* Barre des étapes : aucun fond derrière les mots, aucun trait sous les contenus.
   Les seuls traits restants sont de courts connecteurs entre deux cellules. */
.joinSteps:before{display:none !important}
.joinSteps li{
  position:relative !important;
  z-index:1;
  background:transparent !important;
}
.joinSteps li::before{content:none !important;display:none !important}
.joinSteps li::after{
  content:"";
  position:absolute;
  z-index:0;
  top:50%;
  left:calc(100% - 8px);
  width:16px;
  height:1px;
  transform:translateY(-50%);
  background:rgba(151,208,219,.22);
  pointer-events:none;
}
.joinSteps li:last-child::after{display:none}
.joinSteps li>strong{
  position:relative;
  z-index:2;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  box-decoration-break:slice !important;
  -webkit-box-decoration-break:slice !important;
}
.joinSteps li>span{
  position:relative;
  z-index:2;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:1 !important;
}
.joinSteps li.isComplete>span::before{
  content:"✓" !important;
  width:100%;
  height:100%;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  font-family:var(--font-interface) !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1 !important;
  transform:translateY(-.5px);
}

/* Page Vos accès privés : reconstruction de la grille, sans action collante,
   sans conteneur fantôme et sans contenu tronqué. */
@media(min-width:701px){
  .joinCard[data-current-view="access"]{
    height:min(820px,98%) !important;
  }
  .joinCard[data-current-view="access"] .joinCardHeader{
    padding-top:clamp(13px,1.55vh,20px) !important;
    padding-bottom:clamp(10px,1.25vh,15px) !important;
  }
  .joinCard[data-current-view="access"] .joinCardBody{
    padding:clamp(12px,1.35vh,16px) clamp(18px,1.75vw,26px) clamp(14px,1.55vh,19px) !important;
    overflow:hidden !important;
  }
  .joinCard[data-current-view="access"] .joinView[data-view="access"]{
    height:100% !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  .joinCard[data-current-view="access"] .accessWorkspace{
    width:100%;
    height:100% !important;
    min-height:0;
    display:grid !important;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr) auto auto;
    align-content:stretch;
    gap:clamp(8px,1.05vh,12px) !important;
    padding:clamp(16px,1.65vw,23px) clamp(18px,1.8vw,26px) !important;
    overflow:hidden !important;
  }
  .joinCard[data-current-view="access"] .accessIntro{
    max-width:980px;
  }
  .joinCard[data-current-view="access"] .accessIntro h2{
    margin:3px 0 5px !important;
    font-size:clamp(25px,1.72vw,33px) !important;
  }
  .joinCard[data-current-view="access"] .accessIntro p{
    max-width:930px;
    font-size:clamp(11px,.82vw,14px) !important;
    line-height:1.38 !important;
  }
  .joinCard[data-current-view="access"] .accessPrivateSummary{
    width:min(100%,980px);
    max-width:980px;
    min-height:34px;
    padding:8px 12px !important;
  }
  .joinCard[data-current-view="access"] .accessFields{
    width:100%;
    max-width:none !important;
    min-height:0;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto auto;
    gap:clamp(10px,1.15vh,14px) clamp(18px,1.5vw,26px) !important;
    align-content:center;
  }
  .joinCard[data-current-view="access"] .accessFields .fieldGroup{
    min-width:0;
    gap:4px !important;
  }
  .joinCard[data-current-view="access"] .accessFields .fieldGroup:first-child{
    grid-column:1/-1;
  }
  .joinCard[data-current-view="access"] .accessFields .fieldGroup>small{
    min-height:2.45em !important;
    line-height:1.25 !important;
  }
  .joinCard[data-current-view="access"] .accessFields input{
    height:clamp(43px,5.1vh,50px) !important;
  }
  .joinCard[data-current-view="access"] .passwordControl{
    height:clamp(43px,5.1vh,50px) !important;
  }
  .joinCard[data-current-view="access"] .passwordControl input{
    height:100% !important;
  }
  .joinCard[data-current-view="access"] .accessRequirements{
    width:100%;
    max-width:none !important;
    margin:0 !important;
    padding:7px 10px !important;
  }
  .joinCard[data-current-view="access"] .accessActions{
    position:static !important;
    inset:auto !important;
    z-index:auto !important;
    width:100%;
    min-height:52px;
    align-self:end;
    margin:0 !important;
    padding:4px 0 0 !important;
    background:none !important;
    box-shadow:none !important;
  }
  .joinCard[data-current-view="access"] .accessActions::before,
  .joinCard[data-current-view="access"] .accessActions::after{
    content:none !important;
    display:none !important;
  }
  .joinCard[data-current-view="access"] .joinBodyMark{display:none !important}
}

/* Sur écrans bas, la page reste utilisable par défilement interne propre plutôt
   que de superposer les actions sur les champs. */
@media(max-height:850px) and (min-width:701px){
  .joinCard[data-current-view="access"]{height:98% !important}
  .joinCard[data-current-view="access"] .accessWorkspace{
    gap:7px !important;
    padding:12px 18px !important;
    overflow-y:auto !important;
    scrollbar-width:thin;
  }
  .joinCard[data-current-view="access"] .accessIntro h2{font-size:24px !important}
  .joinCard[data-current-view="access"] .accessIntro p{font-size:10px !important}
  .joinCard[data-current-view="access"] .accessPrivateSummary{padding:6px 10px !important}
  .joinCard[data-current-view="access"] .accessFields{gap:8px 18px !important}
  .joinCard[data-current-view="access"] .accessFields .fieldGroup>span:first-child{font-size:16px !important}
  .joinCard[data-current-view="access"] .accessFields .fieldGroup>small{font-size:9.5px !important;min-height:2.2em !important}
  .joinCard[data-current-view="access"] .accessFields input,
  .joinCard[data-current-view="access"] .passwordControl{height:40px !important}
  .joinCard[data-current-view="access"] .accessActions{min-height:46px}
}

/* Profil 2/2 : typographie éditoriale officielle, sans graisse forte. */
.profileWorkspaceStory .bioField>label,
.profileWorkspaceStory .originHeading strong,
.profileWorkspaceStory .originHeading small,
.profileWorkspaceStory .nationalityField>label,
.profileWorkspaceStory .residenceField>span,
.profileWorkspaceStory .originTrustNote,
.profileWorkspaceStory .originTrustNote>strong,
.profileWorkspaceStory .originTrustNote summary,
.profileWorkspaceStory .interestHeading strong,
.profileWorkspaceStory .interestHeading small,
.primaryLanguageChoice>span,
.primaryLanguageChoice>small{
  font-family:var(--font-editorial) !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}
.profileWorkspaceStory .bioField>label{
  display:block;
  margin-bottom:clamp(7px,.85vh,10px);
  color:#f5f0e8;
  font-size:clamp(18px,1.32vw,24px) !important;
  line-height:1.18;
}
.profileWorkspaceStory .originHeading strong,
.profileWorkspaceStory .interestHeading strong{
  color:#f5f0e8;
  font-size:clamp(22px,1.58vw,29px) !important;
  line-height:1.16;
}
.profileWorkspaceStory .originHeading small,
.profileWorkspaceStory .interestHeading small{
  color:rgba(218,235,238,.70);
  font-size:clamp(14px,.98vw,17px) !important;
  line-height:1.42;
}
.profileWorkspaceStory .nationalityField>label,
.profileWorkspaceStory .residenceField>span{
  color:rgba(245,240,232,.94);
  font-size:clamp(16px,1.08vw,20px) !important;
  line-height:1.25;
}
.profileWorkspaceStory .originTrustNote{
  padding:clamp(14px,1.25vw,20px) clamp(16px,1.45vw,23px) !important;
  font-size:clamp(14px,.98vw,17px) !important;
  line-height:1.5 !important;
}
.profileWorkspaceStory .originTrustNote summary{
  margin-top:clamp(7px,.85vh,10px);
  font-size:clamp(14px,.98vw,17px) !important;
}

/* Langue principale : visible après le premier choix, sans modifier le champ
   libre des centres d'intérêt. */
.primaryLanguageChoice{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.46fr);
  align-items:center;
  gap:4px clamp(16px,1.5vw,24px);
  margin-top:clamp(12px,1.45vh,18px);
  padding:clamp(13px,1.18vw,18px);
  border:1px solid rgba(80,213,194,.23);
  border-radius:10px;
  background:rgba(80,213,194,.055);
}
.primaryLanguageChoice>span{
  color:#f5f0e8;
  font-size:clamp(18px,1.25vw,23px);
  line-height:1.2;
}
.primaryLanguageChoice>small{
  grid-column:1;
  color:rgba(218,235,238,.70);
  font-size:clamp(13px,.9vw,16px);
  line-height:1.4;
}
.primaryLanguageChoice select{
  grid-column:2;
  grid-row:1 / span 2;
  width:100%;
  min-height:46px;
  padding:0 42px 0 15px;
  border:1px solid rgba(151,208,219,.24);
  border-radius:9px;
  color:#f5f0e8;
  color-scheme:dark;
  background:#061d2a;
  font-family:var(--font-interface);
  font-size:clamp(14px,.94vw,17px);
}

/* Engagement validé : respiration accrue dans le bas du bloc. */
.joinCard[data-current-view="values-ready"] .valuesReadyPanel{
  padding-bottom:clamp(34px,4.5vh,58px) !important;
}
.joinCard[data-current-view="values-ready"] .valuesReadyPanel .profileReadyActions{
  margin-top:clamp(25px,3.4vh,42px) !important;
  gap:clamp(16px,1.8vh,24px) !important;
}
.joinCard[data-current-view="values-ready"] .valuesReadyPanel .joinContinue{
  margin-bottom:clamp(5px,.7vh,9px);
}

/* Notre modèle : même taille de liste dans les deux cartes, ponctuation gérée
   dans le HTML et première phrase du manifeste agrandie. */
.paymentCardChoice .paymentChoicePoints li,
.paymentCardAmount li{
  font-family:var(--font-editorial) !important;
  font-size:clamp(16px,1.12vw,20px) !important;
  line-height:1.43 !important;
  font-weight:400 !important;
}
.paymentManifesto p{
  color:rgba(230,240,242,.74) !important;
  font-size:clamp(16px,1.12vw,20px) !important;
  line-height:1.35 !important;
}
.paymentManifesto strong{
  font-size:clamp(24px,1.88vw,33px) !important;
  line-height:1.18 !important;
}

@media(max-width:1180px){
  .joinSteps li::after{display:none}
  .primaryLanguageChoice{grid-template-columns:minmax(0,1fr) 220px}
}
@media(max-width:700px){
  .joinSteps li::after{display:none}
  .primaryLanguageChoice{grid-template-columns:1fr;gap:5px;padding:9px;margin-top:8px}
  .primaryLanguageChoice>span{font-size:11px}
  .primaryLanguageChoice>small{grid-column:1;font-size:7px}
  .primaryLanguageChoice select{grid-column:1;grid-row:auto;min-height:32px;font-size:8px}
}

/* Ajustement final R48 : répartition verticale naturelle de la page Accès. */
@media(min-width:701px) and (min-height:851px){
  .joinCard[data-current-view="access"] .accessWorkspace{
    grid-template-rows:auto auto auto auto auto !important;
    align-content:space-between !important;
  }
  .joinCard[data-current-view="access"] .accessFields{
    align-content:start !important;
  }
}

/* R49 — corrections finales du tour local */

/* Barre des étapes : suppression complète des traits de liaison. */
.joinSteps::before,
.joinSteps:before,
.joinSteps li::before,
.joinSteps li:before,
.joinSteps li::after,
.joinSteps li:after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Coche parfaitement centrée dans son cercle. */
.joinSteps li.isComplete>span{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  line-height:1 !important;
}
.joinSteps li.isComplete>span::before{
  content:'✓' !important;
  position:absolute !important;
  inset:0 !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  padding:0 !important;
  font-size:clamp(14px,1vw,18px) !important;
  line-height:1 !important;
  transform:translateY(1px) !important;
}

/* Tous les intitulés de champs utilisent la typographie éditoriale ETHNOS,
   sans graisse forte. */
.joinView .ageDateField>span,
.joinView .fieldGroup>span:first-child,
.joinView .profileImageHeading strong,
.joinView .bioField>label,
.joinView .originHeading strong,
.joinView .nationalityField>label,
.joinView .residenceField>span,
.joinView .interestHeading strong,
.joinView .primaryLanguageChoice>span,
.joinView .emailVerificationField>span{
  font-family:var(--font-editorial,Georgia,'Times New Roman',serif) !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

/* Taille lisible des intitulés principaux de formulaire. */
.joinView[data-view="profile-identity"] .fieldGroup>span:first-child,
.joinView[data-view="profile-identity"] .profileImageHeading strong,
.joinView[data-view="email-verification"] .emailVerificationField>span{
  font-size:clamp(19px,1.35vw,25px) !important;
  line-height:1.18 !important;
}

/* Notre modèle : le texte de la carte droite descend d'une taille. */
.paymentCardAmount li{
  font-size:clamp(14px,.98vw,18px) !important;
  line-height:1.42 !important;
}

/* Vérification e-mail : sur-titre vert plus visible. */
.emailVerificationPanel>.joinSectionLabel{
  margin-bottom:clamp(12px,1.5vh,18px) !important;
  font-size:clamp(13px,.96vw,17px) !important;
  line-height:1.15 !important;
  letter-spacing:.18em !important;
}

@media(max-width:700px){
  .joinSteps li.isComplete>span::before{font-size:12px !important;transform:translateY(.5px) !important}
  .joinView[data-view="profile-identity"] .fieldGroup>span:first-child,
  .joinView[data-view="profile-identity"] .profileImageHeading strong,
  .joinView[data-view="email-verification"] .emailVerificationField>span{font-size:12px !important}
  .emailVerificationPanel>.joinSectionLabel{font-size:8px !important}
}



/* R50 — validation e-mail réinitialisée et barre des étapes équidistante. */
@media (min-width: 1101px){
  .joinSteps{
    display:flex !important;
    grid-template-columns:none !important;
    align-items:center !important;
    justify-content:space-between !important;
    column-gap:0 !important;
    width:100% !important;
    padding-left:clamp(24px,2.7vw,52px) !important;
    padding-right:clamp(24px,2.7vw,52px) !important;
    overflow:visible !important;
  }
  .joinSteps li{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    justify-content:flex-start !important;
    gap:clamp(6px,.5vw,10px) !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

@media (min-width:701px) and (max-width:1100px){
  .joinSteps{
    display:flex !important;
    grid-template-columns:none !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:clamp(16px,2.3vw,28px) !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }
  .joinSteps::-webkit-scrollbar{display:none !important}
  .joinSteps li{
    flex:0 0 auto !important;
    width:auto !important;
  }
}

/* R51 — Notre modèle : réduction nettement visible des lignes de la carte droite. */
.paymentCardAmount li{
  font-size:clamp(12px,.84vw,16px) !important;
  line-height:1.38 !important;
}
@media(max-width:700px){
  .paymentCardAmount li{
    font-size:5.5px !important;
    line-height:1.35 !important;
  }
}

/* R52 — Notre modèle : les deux listes ont exactement la même taille,
   réduite d’un cran par rapport à la version précédente. */
.paymentCardChoice .paymentChoicePoints li,
.paymentCardAmount li{
  font-size:clamp(13px,.90vw,17px) !important;
  line-height:1.40 !important;
  font-weight:400 !important;
}
@media(max-width:700px){
  .paymentCardChoice .paymentChoicePoints li,
  .paymentCardAmount li{
    font-size:5.5px !important;
    line-height:1.35 !important;
  }
}


/* ========================================================================== */
/* R56 — inscription dans l’environnement du site ouvert, sans blocs annexes  */
/* ========================================================================== */
:root{
  --r56-topbar:56px;
  --r56-footer-main:68px;
  --r56-footer-legal:25px;
}
.joinPage{
  grid-template-rows:var(--r56-topbar) minmax(0,1fr) var(--r56-footer-main) var(--r56-footer-legal) !important;
  min-height:100dvh !important;
  height:100dvh !important;
  background:#04131f !important;
}
.joinMemberTopbar{
  position:relative;z-index:40;height:var(--r56-topbar);display:grid;
  grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr);align-items:center;
  padding:0 clamp(16px,2.2vw,42px);border-bottom:1px solid rgba(149,205,218,.18);
  background:rgba(3,14,23,.97);backdrop-filter:blur(14px);overflow:visible;
}
.joinMemberNav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:clamp(8px,1.2vw,22px)}
.joinMemberNavLeft{text-align:left}.joinMemberNavRight{text-align:right}
.joinMemberNav span{min-width:0;color:rgba(239,244,241,.46);font:400 clamp(10px,.72vw,13px)/1.1 Georgia,"Times New Roman",serif;white-space:nowrap;user-select:none}
.joinMemberBrand{position:absolute;left:50%;top:7px;z-index:45;transform:translateX(-50%);width:78px;height:78px;display:grid;place-items:center;border-radius:50%;filter:drop-shadow(0 12px 19px rgba(0,0,0,.45))}
.joinMemberBrand:before{content:"";position:absolute;inset:-2px;border-radius:50%;background:radial-gradient(circle,rgba(245,138,75,.24),transparent 67%)}
.joinMemberBrand img{position:relative;width:100%;height:100%;object-fit:contain}
.joinMain{
  padding:clamp(12px,1.7vh,22px) clamp(14px,3vw,58px) !important;
  background:
    radial-gradient(circle at 74% 8%,rgba(245,138,75,.10),transparent 23%),
    radial-gradient(circle at 14% 18%,rgba(49,209,207,.07),transparent 24%),
    linear-gradient(180deg,#04131f,#061a27) !important;
}
.joinMain::before,.joinMain::after{display:none!important}
.joinCard{max-height:calc(100% - 4px)!important;background:linear-gradient(145deg,rgba(8,36,51,.94),rgba(4,20,31,.92))!important;backdrop-filter:blur(7px)!important}
.joinMemberFooterMain{position:relative;z-index:35;height:var(--r56-footer-main);display:grid;grid-template-columns:minmax(300px,34vw) 1fr;align-items:center;gap:20px;padding:0 clamp(15px,2.1vw,40px);border-top:1px solid rgba(149,205,218,.18);background:#03111b}
.joinMemberVersion{min-width:0}.joinMemberVersion strong{display:block;color:#fff;font:400 14px/1.1 Georgia,"Times New Roman",serif}.joinMemberVersion span{display:block;margin-top:2px;color:#f58a4b;font:400 8.5px/1.25 "Segoe UI",Arial,sans-serif}
.joinMemberFooterMain nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:8px}.joinMemberFooterMain nav span{color:#718893;text-align:center;font:400 9px/1.1 "Segoe UI",Arial,sans-serif;white-space:nowrap;user-select:none}
.joinMemberFooterLegal{position:relative;z-index:35;height:var(--r56-footer-legal);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(15px,2.1vw,40px);border-top:1px solid rgba(149,205,218,.11);background:#03111b;color:#617985}
.joinMemberFooterLegal>a{justify-self:start;color:#d9e2df;text-decoration:none;font:400 10px/1 Georgia,"Times New Roman",serif;letter-spacing:.08em}.joinMemberFooterLegal nav{display:flex;align-items:center;gap:clamp(12px,1.5vw,24px)}.joinMemberFooterLegal nav a{color:#718893;text-decoration:none;font:400 7.5px/1 "Segoe UI",Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em}.joinMemberFooterLegal small{justify-self:end;font:400 7px/1 "Segoe UI",Arial,sans-serif}
.registrationResume{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}.registrationResumeBackdrop{position:absolute;inset:0;background:rgba(1,8,13,.82);backdrop-filter:blur(8px)}.registrationResumeDialog{position:relative;z-index:1;width:min(610px,92vw);padding:30px;border:1px solid rgba(149,205,218,.22);border-radius:16px;background:radial-gradient(circle at 100% 0%,rgba(245,138,75,.15),transparent 36%),linear-gradient(145deg,#082b3d,#041722);box-shadow:0 34px 100px rgba(0,0,0,.55)}.registrationResumeDialog h2{margin:10px 0 12px;font:400 30px/1.08 Georgia,"Times New Roman",serif}.registrationResumeDialog>p{margin:0;color:rgba(225,238,240,.72);font:400 13px/1.55 "Segoe UI",Arial,sans-serif}.registrationResumeActions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px}.registrationResumeError{margin-top:12px!important;color:#ffae68!important;font-size:11px!important}
@media(max-height:820px){:root{--r56-topbar:50px;--r56-footer-main:60px;--r56-footer-legal:23px}.joinMemberBrand{width:68px;height:68px;top:5px}.joinMemberVersion span{font-size:7.5px}.joinMemberFooterMain nav span{font-size:8px}}
@media(max-width:1180px){.joinMemberTopbar{grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr)}.joinMemberNav span{font-size:9px}.joinMemberFooterMain{grid-template-columns:300px 1fr;padding-left:12px;padding-right:12px}.joinMemberFooterMain nav{gap:3px}.joinMemberFooterMain nav span{font-size:7.5px}}
@media(max-width:760px){:root{--r56-topbar:50px;--r56-footer-main:52px;--r56-footer-legal:22px}.joinMemberTopbar{grid-template-columns:1fr 76px 1fr;padding:0 7px}.joinMemberBrand{width:64px;height:64px;top:4px}.joinMemberNav{gap:3px}.joinMemberNav span{font-size:0}.joinMemberNav span:first-child{font-size:7px}.joinMemberNavRight span:first-child{font-size:7px}.joinMemberFooterMain{grid-template-columns:1fr;padding:0 9px}.joinMemberVersion span{font-size:6px}.joinMemberFooterMain nav{display:none}.joinMemberFooterLegal{padding:0 8px}.joinMemberFooterLegal nav{gap:8px;overflow:hidden}.joinMemberFooterLegal nav a{font-size:5.8px}.registrationResumeActions{align-items:stretch;flex-direction:column-reverse}.registrationResumeActions button{width:100%}}


/* R57 — recommencement réellement vierge et aide au correcteur */
.registrationFreshNotice{
  position:absolute;
  z-index:12;
  top:8px;
  left:50%;
  width:min(720px,calc(100% - 32px));
  margin:0;
  padding:9px 18px;
  transform:translateX(-50%);
  border:1px solid rgba(80,213,194,.30);
  border-radius:8px;
  color:rgba(218,255,248,.94);
  background:linear-gradient(90deg,rgba(18,103,94,.92),rgba(7,43,52,.96));
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  font-size:clamp(10px,.78vw,12px);
  font-weight:700;
  letter-spacing:.01em;
  text-align:center;
}
.bioSpellcheckHint{
  display:block;
  margin-top:6px;
  color:rgba(210,230,234,.52);
  font-size:8px;
  line-height:1.35;
}


/* R58 — identité privée et centres d’intérêt 6 à 9.
   Les ajouts utilisent la typographie officielle et aucune graisse forte. */
.accessIdentityPrivacy{
  max-width:860px;
  margin:0;
  padding:11px 13px;
  border:1px solid rgba(245,138,75,.20);
  border-radius:9px;
  background:rgba(245,138,75,.045);
  color:rgba(225,238,240,.75);
  font-family:var(--font-editorial);
  font-size:clamp(12px,.88vw,15px);
  font-weight:400;
  line-height:1.48;
}
.joinCard[data-current-view="access"] .accessFields .fieldGroup:first-child{grid-column:auto}
.joinCard[data-current-view="access"] .accessFields .accessEmailField{grid-column:1/-1}
.joinCard[data-current-view="access"] .accessFields .fieldGroup>span:first-child,
.joinCard[data-current-view="access"] .accessFields .fieldGroup>small,
.accessIdentityPrivacy{font-weight:400!important}
@media(max-width:700px){
  .joinCard[data-current-view="access"] .accessFields .accessEmailField{grid-column:auto}
}

/* R58 — flux vertical stable après l’ajout de l’identité privée. */
.registrationFreshNotice{font-weight:400!important}
@media(min-width:701px){
  .joinCard[data-current-view="access"] .accessWorkspace{
    grid-template-rows:auto auto auto auto auto auto !important;
    align-content:start !important;
    overflow-y:auto !important;
    scrollbar-width:thin;
  }
  .joinCard[data-current-view="access"] .accessIdentityPrivacy{
    width:min(100%,980px);
    max-width:980px;
  }
  .joinCard[data-current-view="access"] .accessFields{
    grid-template-rows:auto auto auto !important;
    align-content:start !important;
    flex:none;
  }
  .joinCard[data-current-view="access"] .accessActions{
    align-self:auto !important;
    margin-top:2px !important;
  }
}
@media(max-height:850px) and (min-width:701px){
  .joinCard[data-current-view="access"] .accessWorkspace{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    overflow-y:auto !important;
  }
  .joinCard[data-current-view="access"] .accessIdentityPrivacy{
    flex:none;
    padding:7px 10px;
    font-size:10px;
    line-height:1.35;
  }
  .joinCard[data-current-view="access"] .accessFields,
  .joinCard[data-current-view="access"] .accessRequirements,
  .joinCard[data-current-view="access"] .accessActions,
  .joinCard[data-current-view="access"] .accessIntro,
  .joinCard[data-current-view="access"] .accessPrivateSummary{
    flex:none;
  }
}

/* R58 — verrouillage final de la page Accès : aucun élément ne peut être
   comprimé dans une piste de grille ou passer sous les actions. */
@media(min-width:701px){
  .joinCard[data-current-view="access"] .accessWorkspace{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  .joinCard[data-current-view="access"] .accessIntro,
  .joinCard[data-current-view="access"] .accessPrivateSummary,
  .joinCard[data-current-view="access"] .accessIdentityPrivacy,
  .joinCard[data-current-view="access"] .accessFields,
  .joinCard[data-current-view="access"] .accessRequirements,
  .joinCard[data-current-view="access"] .apiFormError,
  .joinCard[data-current-view="access"] .accessActions{
    flex:0 0 auto !important;
  }
  .joinCard[data-current-view="access"] .accessFields{
    height:auto !important;
    min-height:max-content !important;
  }
  .joinCard[data-current-view="access"] .accessActions{
    position:static !important;
    margin-top:0 !important;
  }
}

/* ========================================================================== */
/* R59 — navigation, petits portables et validation e-mail multi-appareil     */
/* ========================================================================== */
:root{
  --r56-topbar:54px;
  --r56-footer-main:52px;
  --r56-footer-legal:22px;
}
.joinMemberTopbar{grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr) !important}
.joinMemberNav{gap:clamp(18px,2.4vw,48px) !important}
.joinMemberNav span{
  font-size:clamp(12px,.84vw,15px) !important;
  font-weight:400 !important;
}
.joinMemberFooterMain{
  height:var(--r56-footer-main) !important;
  grid-template-columns:minmax(330px,35vw) 1fr !important;
}
.joinMemberVersion strong{font-size:15px !important;font-weight:400 !important}
.joinMemberVersion span{font-size:clamp(9.5px,.68vw,12px) !important;font-weight:400 !important}
.joinMemberFooterMain nav span{font-size:clamp(9.5px,.66vw,11.5px) !important;font-weight:400 !important}
.joinMemberFooterLegal{height:var(--r56-footer-legal) !important}
.joinMemberFooterLegal>a{font-size:11px !important;font-weight:400 !important}
.joinMemberFooterLegal nav a{font-size:8.5px !important;font-weight:400 !important}
.joinMemberFooterLegal small{font-size:8px !important;font-weight:400 !important}

/* L'action qui poursuit le parcours précède désormais clairement le retour. */
.valuesReadyActions{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:clamp(14px,1.8vh,22px) !important;
}
.valuesReadyActions .joinContinue{order:1;margin:0 !important}
.valuesReadyActions .joinBack{order:2;margin:0 !important}

/* Solution de secours visible après l'envoi du lien. */
.emailVerificationRefresh{
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(80,213,194,.27);
  border-radius:8px;
  background:rgba(80,213,194,.06);
  color:#d9f4ef;
  font-family:var(--font-editorial,Georgia,"Times New Roman",serif);
  font-size:12px;
  font-weight:400;
  cursor:pointer;
}
.emailVerificationRefresh:hover{border-color:rgba(80,213,194,.52);background:rgba(80,213,194,.10)}

/* 1280×720, 1366×768 et 1536×864 : le haut et la jauge restent en place,
   seul le contenu de l'étape défile. Aucun texte n'est réduit ou coupé. */
@media (min-width:981px) and (max-width:1600px) and (max-height:920px){
  :root{--r56-topbar:50px;--r56-footer-main:48px;--r56-footer-legal:21px}
  .joinPage{overflow:hidden !important}
  .joinMemberTopbar{grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr) !important;padding:0 18px !important}
  .joinMemberBrand{width:68px !important;height:68px !important;top:4px !important}
  .joinMemberNav{gap:clamp(12px,2vw,28px) !important}
  .joinMemberNav span{font-size:11px !important}
  .joinMain{min-height:0 !important;padding:8px 10px !important;overflow:hidden !important}
  .joinCard{
    width:calc(100vw - 20px) !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
  }
  .joinCardHeader{flex:none;padding:11px 24px 10px !important}
  .joinCardHeader h1{font-size:clamp(22px,2.2vw,31px) !important}
  .joinProgressGauge{flex:0 0 220px !important}
  .joinSteps{
    flex:none !important;
    min-height:51px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
    padding-left:18px !important;padding-right:18px !important;
  }
  .joinSteps::-webkit-scrollbar{display:none !important}
  .joinSteps li{padding-top:8px !important;padding-bottom:8px !important}
  .joinSteps li>span{width:30px !important;height:30px !important}
  .joinSteps strong{font-size:10.5px !important;font-weight:400 !important}
  .joinCardBody{
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:thin;
    scrollbar-color:rgba(149,205,218,.42) transparent;
    padding-bottom:28px !important;
  }
  .joinView.isVisible{
    height:auto !important;
    min-height:100% !important;
    overflow:visible !important;
  }
  .joinView.isVisible>*,
  .joinView.isVisible .profileWorkspace,
  .joinView.isVisible .valuesWorkspace,
  .joinView.isVisible .paymentWorkspace,
  .joinView.isVisible .accessWorkspace{
    max-height:none !important;
  }
  .joinBodyMark{display:none !important}
  .joinMemberFooterMain{grid-template-columns:minmax(330px,38vw) 1fr !important;padding:0 20px !important}
  .joinMemberVersion span{font-size:9.5px !important}
  .joinMemberFooterMain nav span{font-size:9px !important}
  .joinMemberFooterLegal{padding:0 20px !important}
  .joinMemberFooterLegal nav a{font-size:7.8px !important}

  /* Les zones auparavant contraintes à 100 % retrouvent leur hauteur naturelle. */
  .profileWorkspace,.profileEditor,.liveProfilePanel,.profileWorkspaceStory,
  .valuesWorkspace,.valuesStage,.paymentWorkspace,.emailVerificationPanel,
  .profileReadyPanel,.joinAgePanel,.joinAppPromo{height:auto !important;min-height:0 !important;overflow:visible !important}
  .profileWorkspace,.profileWorkspaceStory{min-height:520px !important}
  .valuesWorkspace{min-height:510px !important}
  .paymentWorkspace{min-height:470px !important}
  .emailVerificationPanel{min-height:430px !important}
}

/* Sur les écrans hauts et larges, aucun ascenseur n'est imposé. */
@media (min-width:1601px), (min-height:921px){
  .joinCardBody{scrollbar-width:none}
  .joinCardBody::-webkit-scrollbar{display:none}
}

/* R59.1 — dernière passe de lisibilité sur les barres personnelle et légale. */
@media (min-width:981px) and (max-width:1600px) and (max-height:920px){
  .joinMemberNav span{font-size:12px !important}
  .joinMemberVersion span{font-size:10px !important}
  .joinMemberFooterMain nav span{font-size:9.5px !important}
  .joinMemberFooterLegal nav a{font-size:8.4px !important}
}

/* Écrans réellement hauts : la carte exploite la hauteur disponible afin que
   même Vos accès privés tienne sans ascenseur. */
@media (min-width:1601px) and (min-height:921px){
  .joinCard{
    height:min(850px,95%) !important;
    max-height:95% !important;
  }
  .joinCardBody{overflow:hidden !important}
  .joinCard[data-current-view="access"] .accessWorkspace{overflow-y:visible !important}
}
@media (min-width:1601px) and (min-height:921px){
  .joinMain>.joinCard{
    height:calc(100% - 8px) !important;
    max-height:calc(100% - 8px) !important;
  }
  .joinCard[data-current-view="access"] .accessWorkspace{overflow-y:visible !important}
}
@media (min-width:1601px) and (min-height:921px){
  .joinCard[data-current-view="access"] .accessWorkspace{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto minmax(0,1fr) auto auto !important;
    gap:8px !important;
    padding:16px 22px !important;
    overflow:hidden !important;
  }
  .joinCard[data-current-view="access"] .accessFields{
    align-content:center !important;
    gap:10px 22px !important;
  }
  .joinCard[data-current-view="access"] .accessFields input,
  .joinCard[data-current-view="access"] .passwordControl{height:44px !important}
  .joinCard[data-current-view="access"] .accessActions{min-height:48px !important}
}