/* MYDJAKA — écrans d'authentification (lot AUTH).
   Style révisé le 14/10/2026 à la demande du client : page claire et aérée, grand visuel arrondi à droite
   (collines aux couleurs de la charte), mots clés mis en valeur, repères flottants, encoche. Thème clair par défaut. */

:root{--page:var(--surface);--rayon-visuel:32px}
body{background:var(--page)}

/* ── Mise en page ── */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:24px;min-height:100vh;min-height:100dvh;
  padding:20px;max-width:1680px;margin:0 auto}
.colonne{display:flex;flex-direction:column;min-width:0;padding:4px 20px 0 28px}

/* Barre du haut : logo, langue, thème */
.barre{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.logo{width:132px;height:auto;display:block}
.logo-sombre{display:none}
:root[data-theme="dark"] .logo-clair{display:none}
:root[data-theme="dark"] .logo-sombre{display:block}
.barre-actions{display:flex;align-items:center;gap:8px}
.theme-btn{width:36px;height:36px;border-radius:999px;border:1px solid var(--border-strong);background:transparent;color:var(--text-2);
  display:grid;place-items:center;cursor:pointer;padding:0}
.theme-btn:hover{color:var(--text);background:var(--control-bg)}
.theme-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.theme-btn .ico-soleil{display:none}
:root[data-theme="dark"] .theme-btn .ico-soleil{display:block}
:root[data-theme="dark"] .theme-btn .ico-lune{display:none}

/* Zone centrale : accroche + formulaire */
.formpane{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 0 24px;max-width:560px;width:100%}
.accroche{font-size:clamp(30px,3.1vw,46px);font-weight:500;line-height:1.14;letter-spacing:-.025em;margin:0 0 30px;color:var(--text);text-wrap:balance}
/* Mot mis en valeur : rempli par le visuel des collines, comme la maquette de référence */
.surligne{display:inline-block;padding:0 .26em .04em;margin:0 -.04em;border-radius:.28em;color:#fff;
  background:var(--md-color-brand-forest) url(../img/collines.svg) 50% 62%/cover;line-height:1.16;
  box-shadow:inset 0 0 0 999px rgba(10,35,32,.18)}
.form{display:flex;flex-direction:column;gap:16px;max-width:440px;width:100%}
.form .top{display:flex;flex-direction:column;gap:2px}
.form h1{font-size:20px;font-weight:600;margin:0;letter-spacing:-.01em}
.form .sub{color:var(--text-2);margin:0;font-size:13px}

.phone{display:flex}
.phone .cc{height:44px;border:1px solid var(--border-strong);border-right:0;border-radius:8px 0 0 8px;background:var(--control-bg);color:var(--text-2);font:inherit;font-size:13px;padding:0 6px 0 10px;cursor:pointer;max-width:128px}
.phone .cc:focus-visible{outline:2px solid var(--focus);outline-offset:0}
.phone .input{border-radius:0 8px 8px 0}
.input{background:var(--page)}

.signup{text-align:left;font-size:13px;color:var(--text-2);margin:2px 0 0}
.signup a{color:var(--link);font-weight:600;text-decoration:none}
.signup a:hover{text-decoration:underline}

/* Pied : confiance + mentions */
.pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;padding:14px 0 6px;border-top:1px solid var(--border)}
.trust{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-2)}
.trust svg{flex:none}
.legal{display:flex;gap:14px;font-size:11px;color:var(--text-2);flex-wrap:wrap}
.legal a{color:inherit;text-decoration:none}
.legal a:hover{text-decoration:underline}

/* ── Visuel ── */
.visuel{position:relative;border-radius:var(--rayon-visuel) var(--rayon-visuel) 0 var(--rayon-visuel);overflow:hidden;min-height:560px;
  background:var(--md-color-brand-forest) url(../img/collines.svg) 50% 60%/cover;isolation:isolate;
  position:sticky;top:20px;align-self:start;height:calc(100vh - 40px);height:calc(100dvh - 40px)}
:root[data-theme="dark"] .visuel{box-shadow:inset 0 0 0 999px rgba(8,18,16,.22)}

/* Repères flottants : étiquette + point relié */
.repere{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:6px;z-index:1}
.etiquette{background:#fff;color:#0A2320;font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px;
  box-shadow:0 6px 18px -6px rgba(10,35,32,.35);white-space:nowrap;letter-spacing:.01em}
.point{width:14px;height:14px;border-radius:50%;background:var(--md-color-brand-lime);border:3px solid #fff;margin-left:6px;
  box-shadow:0 0 0 4px rgba(177,192,31,.28)}
.r1{top:16%;left:14%}
.r2{top:42%;right:12%;align-items:flex-end}.r2 .point{margin-left:0;margin-right:6px}
.r3{top:63%;left:24%}

/* Carte en verre : promesse */
.carte-verre{position:absolute;left:24px;bottom:24px;max-width:min(380px,calc(100% - 290px));padding:14px 16px;border-radius:18px;z-index:1;
  background:rgba(10,35,32,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22)}
.carte-verre p{margin:0;color:#fff;font-size:13px;line-height:1.5}

/* Encoche en bas à droite (coin creusé, comme la maquette de référence) */
.encoche{position:absolute;right:0;bottom:0;z-index:2;background:var(--page);padding:14px 4px 2px 22px;border-top-left-radius:26px;
  font-size:12px;font-weight:600;color:var(--text);letter-spacing:.01em}
.encoche::before,.encoche::after{content:"";position:absolute;width:26px;height:26px;background:transparent;pointer-events:none}
.encoche::before{right:0;top:-26px;border-bottom-right-radius:26px;box-shadow:8px 8px 0 8px var(--page)}
.encoche::after{left:-26px;bottom:0;border-bottom-right-radius:26px;box-shadow:8px 8px 0 8px var(--page)}

/* ── Écrans peu hauts (portables 13-14") : tout tient sans défiler ── */
@media (min-width:901px) and (max-height:820px){
  .accroche{font-size:clamp(24px,2.4vw,32px);margin-bottom:16px}
  .formpane{padding:10px 0 12px}
  .form{gap:12px}
  .carte-verre{display:none}
  .pied{padding:10px 0 4px}
}
@media (min-width:901px) and (max-height:740px){
  .barre{min-height:44px}
  .accroche{font-size:clamp(22px,2.1vw,28px);margin-bottom:12px}
  .form{gap:10px}
}

/* ── Tablette ── */
@media (max-width:1200px){
  .colonne{padding:0 8px 0 12px}
  .carte-verre{display:none}
}

/* ── Téléphone et petite tablette : le visuel passe au-dessus, en bandeau ── */
@media (max-width:900px){
  .auth{display:flex;flex-direction:column;gap:0;padding:12px 16px 20px}
  .colonne{display:contents}
  .barre{order:1;padding:0 2px 10px}
  .visuel{order:2;min-height:0;height:168px;border-radius:22px 22px 0 22px;position:relative;top:auto}
  .formpane{order:3;padding:22px 0 18px;max-width:none}
  .pied{order:4;flex-direction:column;align-items:flex-start}
  .accroche{font-size:clamp(26px,7vw,32px);margin-bottom:22px}
  .logo{width:112px}
  .r1{top:18%;left:7%}.r2{top:38%;right:6%}.r3{display:none}
  .etiquette{font-size:11px;padding:5px 11px}
  .encoche{padding:10px 2px 0 16px;font-size:11px;border-top-left-radius:20px}
  .encoche::before,.encoche::after{width:20px;height:20px}
  .encoche::before{top:-20px;border-bottom-right-radius:20px}
  .encoche::after{left:-20px;border-bottom-right-radius:20px}
}
@media (max-width:360px){ .encoche{display:none} .visuel{border-radius:22px} }