/* Connexion GRATOU — décor 3:2 entier (IMAGE 1) + vrai panneau HTML.
   Repère commun : tout est exprimé en 100cqw (largeur de .auth-shell-login),
   donc le panneau et le masque des pattes suivent le décor à toutes les tailles. */
@font-face{
  font-family:"Fredoka Login Local";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("./fonts/Fredoka-SemiBold-Latin.woff2") format("woff2");
}
.auth-page-container-login{
  position:relative;
  max-width:none;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#f0e7fb;
}
.auth-page-container-login::before,
.auth-page-container-login::after{content:none;display:none}

.auth-shell-login{
  container-type:inline-size;
  position:relative;
  isolation:isolate;
  display:block;
  width:100%;
  max-width:2200px;
  height:auto;
  min-height:0;
  margin:0 auto;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:#f0e7fb;
  box-shadow:none;
}
.auth-shell-login::before,
.auth-shell-login::after{content:none}

/* Décor : toujours 3:2 complet, hauteur indépendante du formulaire. */
.auth-shell-login .auth-visual{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  min-height:0;
  padding:0;
  overflow:hidden;
  background:transparent;
  pointer-events:none;
}
.auth-shell-login .auth-visual-copy,
.auth-shell-login .auth-visual-floor,
.auth-shell-login .auth-visual-glow{display:none}
.auth-login-picture{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
}
.auth-login-background{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  object-fit:contain;
  object-position:50% 0%;
  filter:none;
}

/* Panneau : coordonnées de la maquette (gauche 57 %, haut 18 % de la largeur, largeur 36 %). */
.auth-shell-login .auth-panel{
  --login-panel-x:57cqw;
  --login-panel-y:18cqw;
  --login-panel-w:36cqw;
  position:relative;
  z-index:2;
  display:block;
  min-width:0;
  min-height:66.6667cqw;
  padding:var(--login-panel-y) 0 8px var(--login-panel-x);
  color:#302756;
  background:transparent;
  pointer-events:none;
}
.auth-shell-login .auth-panel-inner{
  pointer-events:auto;
  position:relative;
  isolation:isolate;
  width:var(--login-panel-w);
  max-width:100%;
  margin:0;
  padding:clamp(18px,1.7cqw,32px);
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  color:#302756;
  transform:none;
  animation:auth-login-fade-in 400ms ease 60ms both;
}
/* Surface visuelle sous les contrôles : l'image de fond apparaît par les trous du masque (pattes, enseigne). */
.auth-shell-login .auth-panel-inner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border:2px solid #7a3fd0;
  border-radius:clamp(26px,2cqw,38px);
  background:rgba(250,249,255,.97);
  box-shadow:0 16px 40px rgba(25,13,79,.26),inset 0 1px 0 #fff;
  -webkit-mask-image:url("./images/auth/gratou-login-grip-silhouette.svg?v=20261003-grip-v1");
  mask-image:url("./images/auth/gratou-login-grip-silhouette.svg?v=20261003-grip-v1");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-origin:border-box;
  mask-origin:border-box;
  -webkit-mask-clip:border-box;
  mask-clip:border-box;
  -webkit-mask-size:100cqw auto;
  mask-size:100cqw auto;
  -webkit-mask-position:calc(-1 * var(--login-panel-x)) calc(-1 * var(--login-panel-y));
  mask-position:calc(-1 * var(--login-panel-x)) calc(-1 * var(--login-panel-y));
}
.auth-shell-login .auth-panel-inner > *{
  animation:auth-login-rise 400ms cubic-bezier(.2,.75,.25,1) 60ms both;
}
.auth-shell-login .auth-panel-top{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  margin:0;
  color:#302756;
}
.auth-shell-login .auth-login-accessible-title{
  position:static;
  display:block;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  overflow:visible;
  clip:auto;
  white-space:normal;
  border:0;
  color:#6d2fc4;
  background:none;
  -webkit-text-fill-color:#6d2fc4;
  -webkit-text-stroke:0;
  font-family:"Fredoka Login Local",sans-serif;
  font-size:clamp(26px,2.4vw,42px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:0;
  text-align:center;
  text-shadow:none;
  transform:none;
  animation:none;
}
.auth-shell-login .auth-login-panel-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.auth-shell-login .auth-panel-top .auth-panel-top-label{
  flex:0 1 auto;
  min-width:0;
  padding:8px 12px;
  border:1px solid rgba(48,39,86,.16);
  border-radius:999px;
  background:#fff;
  color:#352a66;
  font-size:clamp(10px,.7vw,13px);
  font-weight:800;
  letter-spacing:.06em;
  line-height:1;
  white-space:nowrap;
}
.auth-shell-login .auth-panel-badge-inline{
  position:static;
  flex:0 0 auto;
  gap:6px;
  padding:9px 14px;
  border:0;
  border-radius:999px;
  background:#2b1f55;
  color:#fff;
  font-size:clamp(10px,.7vw,13px);
  font-weight:800;
  letter-spacing:.06em;
  line-height:1;
  white-space:nowrap;
}
.auth-shell-login .auth-panel-badge-inline span{font-size:13px;line-height:1}
.auth-shell-login .auth-panel .form{
  display:grid;
  gap:clamp(10px,.85vw,16px);
  margin-top:10px;
}
.auth-shell-login .auth-panel .form label{
  margin:0;
  color:#2b2250;
  font-size:clamp(14px,.95vw,18px);
  font-weight:800;
  line-height:1.3;
}
.auth-shell-login .auth-panel .form input:not([type="checkbox"]){
  min-height:clamp(48px,4vw,76px);
  margin-top:5px;
  font-size:clamp(16px,1vw,20px);
  border:1px solid #e0daf0;
  border-radius:14px;
  background:#fbfaff;
  color:#302756;
  box-shadow:none;
  transition:border-color 200ms ease,box-shadow 200ms ease,background-color 200ms ease;
}
.auth-shell-login .auth-panel .form input:not([type="checkbox"]):hover{border-color:#cfc5ea}
.auth-shell-login .auth-panel .form input:not([type="checkbox"]):focus{
  outline:0;
  border-color:#9065e8;
  background:#fff;
  box-shadow:0 0 0 3px rgba(144,101,232,.18);
}
.auth-shell-login .auth-password-control{position:relative;display:block}
.auth-shell-login .auth-password-control input{padding-right:52px}
.auth-shell-login .auth-password-toggle{
  position:absolute;
  top:50%;
  right:4px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-top:2.5px;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#2b2250;
  font-size:18px;
  line-height:1;
  transform:translateY(-50%);
  cursor:pointer;
  transition:background-color 180ms ease,color 180ms ease;
}
.auth-shell-login .auth-password-toggle:hover,
.auth-shell-login .auth-password-toggle:focus-visible{background:#eeeaff;color:#7130e9;outline:0}
.auth-shell-login .auth-login-utilities{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  margin:0;
}
.auth-shell-login .auth-login-utilities .remember-me{
  display:flex;
  align-items:center;
  min-width:0;
  min-height:44px;
  margin:0;
  gap:8px;
  color:#3f3760;
  cursor:pointer;
}
.auth-shell-login .auth-login-utilities .remember-me-label{
  font-size:clamp(12px,.9vw,17px);
  font-weight:700;
  line-height:1.3;
}
.auth-shell-login .auth-panel .remember-me-box{
  flex:0 0 20px;
  width:20px;
  height:20px;
  border-color:#7d4fd6;
  border-radius:6px;
  background:#7d4fd6;
}
.auth-shell-login .auth-panel .remember-me-input:focus-visible + .remember-me-box{box-shadow:0 0 0 3px rgba(144,101,232,.3)}
.auth-shell-login .auth-panel .remember-me-input:checked + .remember-me-box::after{border-color:#fff}
.auth-shell-login .auth-login-utilities .forgot-password-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin:0;
  color:#5b21b6;
  font-size:clamp(12px,.9vw,17px);
  font-weight:800;
  line-height:1.3;
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}
.auth-shell-login .captcha-fieldset{
  min-width:0;
  margin:2px 0 0;
  padding:10px 12px 12px;
  border:1px solid #e6e1f3;
  border-radius:16px;
  background:#f8f7fd;
  box-shadow:none;
}
.auth-shell-login .captcha-title{
  margin:0 0 2px;
  color:#2b2250;
  font-size:clamp(14px,.95vw,18px);
  font-weight:900;
  line-height:1.2;
}
.auth-shell-login .captcha-title span{width:20px;height:20px;font-size:12px}
.auth-shell-login .captcha-help{
  margin:0;
  color:#6b6489;
  font-size:clamp(12px,.75vw,14px);
  line-height:1.3;
}
.auth-shell-login .captcha-image-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0;
}
.auth-shell-login .captcha-image{
  flex:0 1 auto;
  min-width:0;
  max-width:min(100%,clamp(160px,15vw,260px));
  height:auto;
  border-color:#d9d2ef;
  border-radius:8px;
  box-shadow:none;
}
.auth-shell-login .captcha-refresh{
  flex:0 0 auto;
  width:auto!important;
  min-width:44px;
  min-height:44px!important;
  padding:6px 12px!important;
  border:1px solid #e1dcf2!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#3b2f6e!important;
  font-size:12px!important;
  font-weight:800;
  line-height:1.15!important;
  white-space:normal;
}
.auth-shell-login .captcha-fieldset .captcha-answer-label{margin:0}
.auth-shell-login .captcha-fieldset input{
  min-height:44px!important;
  height:clamp(44px,3.3vw,60px);
  margin-top:0;
  padding:4px 10px;
  border-color:#e0daf0;
  border-radius:12px;
  background:#fff;
  letter-spacing:.2em;
  font-size:16px;
  font-weight:800;
  text-align:center;
  text-transform:uppercase;
}
.auth-shell-login .auth-panel .button.primary{
  min-height:clamp(52px,3.5vw,68px);
  margin-top:4px;
  border:0;
  border-radius:16px;
  background:linear-gradient(100deg,#7130e9 0%,#c621e4 100%);
  color:#fff;
  box-shadow:0 4px 0 #6525bb,0 8px 16px rgba(104,34,190,.2);
  font-size:clamp(17px,1.2vw,22px);
  font-weight:900;
  transition:transform 200ms ease,filter 200ms ease,box-shadow 200ms ease;
}
.auth-shell-login .auth-panel .button.primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 5px 0 #6525bb,0 11px 20px rgba(104,34,190,.24);
}
.auth-shell-login .auth-panel .button.primary:focus-visible{outline:0;box-shadow:0 4px 0 #6525bb,0 0 0 4px rgba(144,101,232,.35)}
.auth-shell-login .auth-panel .button.primary:active{
  transform:translateY(1px);
  box-shadow:0 2px 0 #6525bb,0 5px 12px rgba(104,34,190,.2);
}
.auth-shell-login .auth-panel .form-foot{color:#6b6489}
.auth-shell-login .auth-panel .form-foot a{color:#5b21b6}
.auth-shell-login .captcha-unavailable{margin:2px 0 6px}
.auth-shell-login .auth-panel .flash{margin:12px 0 0;font-size:14px;line-height:1.35}
.auth-shell-login .auth-panel .flash.error{border-color:#edb5c4;background:#fff0f4;color:#9c2444}
.auth-shell-login .auth-panel .flash.success{border-color:#b7dfc7;background:#edf9f2;color:#24623e}

@keyframes auth-login-fade-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes auth-login-rise{
  from{transform:translateY(10px)}
  to{transform:translateY(0)}
}

/* Tablettes et téléphones paysage : carte compactée (≈480-520px), cibles tactiles conservées. */
@media (max-width:1100px){
  .auth-shell-login .auth-panel-inner{padding:12px 16px}
  .auth-shell-login .auth-panel-top{gap:6px}
  .auth-shell-login .auth-login-accessible-title{font-size:24px;margin-top:4px}
  .auth-shell-login .auth-panel .form{gap:4px;margin-top:6px}
  .auth-shell-login .auth-panel .form label{font-size:12px}
  .auth-shell-login .auth-panel .form input:not([type="checkbox"]){min-height:44px;height:44px;padding:8px 12px;margin-top:3px;font-size:16px}
  .auth-shell-login .auth-panel-top .auth-panel-top-label{padding:6px 9px;font-size:9px}
  .auth-shell-login .auth-panel-badge-inline{padding:6px 10px;font-size:9px}
  .auth-shell-login .auth-login-utilities{margin:-4px 0}
  .auth-shell-login .auth-login-utilities .remember-me,
  .auth-shell-login .auth-login-utilities .forgot-password-link{min-height:44px}
  .auth-shell-login .auth-login-utilities .remember-me-label,
  .auth-shell-login .auth-login-utilities .forgot-password-link{font-size:12px}
  .auth-shell-login .captcha-fieldset{margin-top:0;padding:6px 9px 8px}
  .auth-shell-login .captcha-image-row{margin:4px 0;gap:6px}
  .auth-shell-login .captcha-image{max-width:min(100%,140px)}
  .auth-shell-login .captcha-fieldset input{height:44px}
  .auth-shell-login .captcha-refresh{padding:6px 8px!important}
  .auth-shell-login .auth-panel .button.primary{min-height:48px;height:48px;padding:8px 12px;margin-top:2px;font-size:17px}
}

/* Portrait : seul le bas du sol se fond dans la couleur de la page.
   L'image source et les personnages restent intacts, à leur ratio naturel. */
@media (orientation:portrait){
  .auth-shell-login .auth-visual::after{
    content:"";
    display:block;
    position:absolute;
    z-index:1;
    right:0;
    bottom:0;
    left:0;
    height:clamp(10px,3cqw,36px);
    background:linear-gradient(to bottom,rgba(240,231,251,0),#f0e7fb);
    pointer-events:none;
  }
}

/* iPad portrait : moins d'espacement, sans réduire les textes des champs
   ni les cibles tactiles. Le formulaire reste accroché aux pattes. */
@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){
  .auth-shell-login .auth-panel{
    --login-panel-x:47.5cqw;
    --login-panel-w:44.5cqw;
    min-height:66.6667cqw;
    padding-bottom:16px;
  }
  .auth-shell-login .auth-panel-inner{padding:10px 12px}
  .auth-shell-login .auth-panel-top{gap:4px}
  .auth-shell-login .auth-login-accessible-title{margin-top:2px}
  .auth-shell-login .auth-panel .form{margin-top:4px}
  .auth-shell-login .auth-panel .form input:not([type="checkbox"]){margin-top:2px}
  .auth-shell-login .auth-panel-top .auth-panel-top-label{padding-top:5px;padding-bottom:5px}
  .auth-shell-login .auth-panel-badge-inline{padding-top:5px;padding-bottom:5px}
  .auth-shell-login .auth-login-panel-meta{flex-wrap:nowrap}
  .auth-shell-login .auth-panel .button.primary{margin-top:0}
}

/* iPad : code, renouvellement et réponse sur une seule ligne.
   Les tablettes plus étroites conservent la présentation empilée. */
@media (min-width:740px) and (max-width:1100px) and (orientation:portrait){
  .auth-shell-login .captcha-fieldset{
    display:grid;
    grid-template-columns:minmax(0,1fr) 100px;
    gap:4px 8px;
    padding:6px 8px 8px;
  }
  .auth-shell-login .captcha-title,
  .auth-shell-login .captcha-help{grid-column:1 / -1;margin:0}
  .auth-shell-login .captcha-image-row{
    grid-column:1;
    grid-row:3;
    min-width:0;
    margin:0;
    gap:6px;
  }
  .auth-shell-login .captcha-image{width:132px;max-width:132px}
  .auth-shell-login .captcha-refresh{
    width:44px!important;
    height:44px;
    padding:6px!important;
    font-size:0!important;
    white-space:nowrap;
  }
  .auth-shell-login .captcha-refresh::before{
    content:"↻";
    font-size:22px;
    line-height:1;
  }
  .auth-shell-login .captcha-answer-label{
    grid-column:2;
    grid-row:3;
    align-self:center;
    min-width:0;
  }
  .auth-shell-login .captcha-fieldset .captcha-answer-label input{
    width:100%;
    margin:0;
    padding:8px 6px;
    font-family:ui-monospace,monospace;
    letter-spacing:.08em;
  }
}

/* Téléphone portrait : illustration entière, puis formulaire pleine largeur, sans masque. */
@media (max-width:600px) and (orientation:portrait){
  .auth-shell-login{display:flex;flex-direction:column;overflow:visible}
  .auth-shell-login .auth-visual{
    position:relative;
    flex:0 0 auto;
  }
  .auth-shell-login .auth-panel{
    min-height:0;
    padding:0 10px 18px;
  }
  .auth-shell-login .auth-panel-inner{
    width:100%;
    max-width:520px;
    margin:0 auto;
    padding:18px 16px 20px;
  }
  .auth-shell-login .auth-panel-inner::before{
    -webkit-mask-image:none;
    mask-image:none;
    border-radius:22px;
  }
  .auth-shell-login .auth-login-accessible-title{font-size:28px}
  .auth-shell-login .auth-login-panel-meta{justify-content:center;flex-wrap:wrap}
  .auth-shell-login .captcha-image{max-width:min(100%,200px)}
}

/* 320 px. */
@media (max-width:380px) and (orientation:portrait){
  .auth-shell-login .auth-panel{padding-right:6px;padding-left:6px}
  .auth-shell-login .auth-panel-inner{padding-right:12px;padding-left:12px}
  .auth-shell-login .auth-login-utilities{flex-wrap:wrap;justify-content:flex-start;column-gap:12px;row-gap:0}
  .auth-shell-login .auth-panel-top .auth-panel-top-label,
  .auth-shell-login .auth-panel-badge-inline{font-size:9px;padding-right:9px;padding-left:9px}
  .auth-shell-login .captcha-image{max-width:min(100%,150px)}
  .auth-shell-login .captcha-refresh{padding:6px 8px!important}
}

@media (prefers-reduced-motion:reduce){
  .auth-shell-login .auth-panel-inner,
  .auth-shell-login .auth-panel-inner > *{animation:none;opacity:1;transform:none}
  .auth-shell-login .auth-panel .form input,
  .auth-shell-login .auth-panel .button.primary,
  .auth-shell-login .auth-password-toggle{transition:none}
  .auth-shell-login .auth-panel .button.primary:hover{transform:none}
}

/* Connexion: keep the full guest navigation visible on compact landscape screens. */
@media (max-width:920px) and (orientation:landscape){
  body.page-login .topbar{
    gap:8px;
    padding-inline:12px;
  }
  body.page-login .brand{
    gap:7px;
    font-size:17px;
    letter-spacing:.045em;
  }
  body.page-login .desktop-nav{
    flex:1 1 auto;
    min-width:0;
    gap:clamp(4px,.7vw,7px);
    font-size:11px;
    overflow:visible;
    padding:0;
  }
  body.page-login .desktop-nav a{
    font-size:11px;
    white-space:nowrap;
  }
  body.page-login .top-stats.is-guest{
    width:auto;
    flex:0 0 auto;
    gap:6px;
    margin-left:0;
  }
  body.page-login .top-stats.is-guest .guest-register-button,
  body.page-login .top-stats.is-guest .guest-login-button{
    display:inline-flex;
    flex:0 0 auto;
    width:auto;
    padding:7px 8px;
    font-size:10px;
    white-space:nowrap;
  }
}

/* On portrait devices, wrap navigation rather than clipping it in a scroll strip. */
@media (max-width:800px){
  body.page-login .topbar{
    gap:10px 12px;
    padding:12px 16px;
  }
  body.page-login .top-stats.is-guest{
    width:auto;
    flex:0 0 auto;
    gap:6px;
    margin-left:auto;
  }
  body.page-login .top-stats.is-guest .guest-register-button,
  body.page-login .top-stats.is-guest .guest-login-button{
    display:inline-flex;
    flex:0 0 auto;
    width:auto;
    padding:8px 9px;
    font-size:10px;
    white-space:nowrap;
  }
  body.page-login .desktop-nav{
    order:3;
    flex:1 0 100%;
    min-width:0;
    display:flex;
    flex-wrap:wrap;
    gap:5px 8px;
    overflow:visible;
    padding:0;
  }
  body.page-login .desktop-nav a{
    font-size:11px;
    line-height:1.1;
    white-space:nowrap;
  }
}

@media (max-width:520px){
  body.page-login .topbar{
    gap:9px 10px;
    padding:12px 14px;
  }
  body.page-login .desktop-nav{
    gap:6px 9px;
  }
  body.page-login .desktop-nav a{
    font-size:11px;
  }
}