/* ============================================================
   CASA ESCOBAR : connexion.css
   Page de connexion uniquement, chargée après casa.css.
   Même structure (visuel à gauche, carte à droite), finition retravaillée :
   photo plus lisible, titre et plaques, carte encadrée, champs et bouton.
   Règles NUI : pas de backdrop-filter, pas de background-attachment:fixed.
   ============================================================ */

:root{
  --cx-ocre:#d9ccb0;--cx-ocre-2:#efe2c8;--cx-crepi:#efe2c8;--cx-ink:#fbf1de;
  --cx-bord:#c8323c;--cx-bord-2:#d6404a;--cx-brique:#f08088;
  --cx-nuit:#141211;--cx-card:#1a1917;
  --cx-line:rgba(239,226,200,.16);--cx-line-2:rgba(217,204,176,.5);
  --cx-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0 11 5.5 5.5 11 0 5.5z' fill='%23e0525c'/%3E%3Cpath d='M5.5 3 8 5.5 5.5 8 3 5.5z' fill='%230b1120'/%3E%3C/svg%3E");
  --cx-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- Fond : la photo respire, le texte reste lisible ---------- */
.auth-bg{background:#0f0e0d}
.auth-bg-img{filter:saturate(1.12) contrast(1.06) brightness(1.08)}
.auth-bg::before{content:"";position:absolute;inset:0;z-index:1;background-image:var(--casa-grain);opacity:.5;pointer-events:none}
.auth-bg::after{z-index:2;background:
  linear-gradient(90deg,rgba(14,14,13,.92) 0%,rgba(14,14,13,.66) 30%,rgba(14,14,13,.14) 62%,rgba(14,14,13,.46) 100%),
  linear-gradient(0deg,rgba(14,14,13,.94) 0%,rgba(14,14,13,0) 36%),
  linear-gradient(180deg,rgba(14,14,13,.7) 0%,rgba(14,14,13,0) 24%)}
body.auth-page:not(.has-slides) .auth-bg::after{background:linear-gradient(160deg,#1c1a18,#0f0e0d)}

/* ---------- Colonne de gauche ---------- */
.auth-art{padding:40px clamp(28px,5vw,72px) 36px}

.auth-brand{gap:16px}
.auth-brand img{width:60px;height:60px;border:1px solid var(--cx-line-2);padding:3px;background:#141211;box-shadow:0 0 0 4px rgba(20,18,17,.55)}
.auth-brand b{font-size:19px;letter-spacing:.16em;color:var(--cx-crepi)}
.auth-brand small{margin-top:4px;letter-spacing:.34em;color:var(--cx-ocre)}

.auth-art-main{max-width:780px}
.auth-badge{padding:8px 18px 8px 14px;gap:10px;border:1px solid var(--cx-line-2);background:rgba(20,18,17,.7);color:var(--cx-ocre-2);letter-spacing:.26em}
.auth-badge::before{content:"";width:11px;height:11px;background:var(--cx-diamond) center/contain no-repeat;flex:none}
.auth-headline{margin-top:24px;font-size:clamp(38px,4.3vw,66px);line-height:1.08;letter-spacing:-.012em;color:var(--cx-ink);text-shadow:0 3px 22px rgba(0,0,0,.65)}
.auth-headline em{color:var(--cx-brique)}
.auth-art-lead{position:relative;max-width:36ch;margin-top:34px;padding-top:30px;font-size:18.5px;line-height:1.55;color:#eadfca;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.auth-art-lead::before{content:"";position:absolute;left:0;top:0;width:132px;height:8px;background:var(--casa-diamonds) repeat-x}

.auth-chips{margin-top:30px;gap:12px}
.auth-chips li{gap:12px;padding:12px 22px 12px 16px;border:1px solid var(--cx-line);border-left:3px solid var(--cx-ocre);border-radius:2px;background:rgba(20,18,17,.78);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cx-crepi)}
.auth-chips li svg{width:19px;height:19px;color:var(--cx-ocre)}

.auth-foot{display:flex;align-items:center;gap:18px}
.auth-dots{gap:6px}
.auth-dots i{position:relative;overflow:hidden;width:30px;height:3px;border-radius:0;background:rgba(239,226,200,.26)}
.auth-dots i.on{width:56px;background:rgba(239,226,200,.26)}
.auth-dots i::after{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:var(--cx-ocre)}
.auth-dots i.on::after{animation:cxFill var(--slide,4s) linear forwards}
@keyframes cxFill{to{transform:scaleX(1)}}
.auth-count{font:600 12px var(--font-body);letter-spacing:.22em;color:var(--cx-crepi);opacity:.8;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.auth-count:empty{display:none}

/* ---------- Carte de connexion : cadre double, losanges aux angles ---------- */
.auth-panel{padding:34px clamp(20px,3vw,48px)}
.auth-box{max-width:456px;padding:46px 40px 28px;border:1px solid var(--cx-line-2);border-radius:2px;
  background:var(--casa-grain),linear-gradient(170deg,#242220 0%,#1a1816 55%,#141211 100%);
  background-blend-mode:normal;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 6px rgba(20,18,17,.55);
  animation:cxCard .7s var(--cx-ease) both .05s}
.auth-box::before{left:-1px;right:-1px;top:-1px;height:10px;border-radius:0;background:var(--casa-diamonds) repeat-x}
.auth-box::after{content:"";position:absolute;inset:14px 10px 10px;border:1px solid rgba(239,226,200,.1);pointer-events:none;
  background:var(--cx-diamond) left 3px top 3px/11px 11px no-repeat,var(--cx-diamond) right 3px top 3px/11px 11px no-repeat,var(--cx-diamond) left 3px bottom 3px/11px 11px no-repeat,var(--cx-diamond) right 3px bottom 3px/11px 11px no-repeat}
@keyframes cxCard{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.auth-box>*{position:relative;z-index:1}
.auth-box>form{z-index:2}

.auth-box-top{flex-direction:column;gap:10px;margin-top:2px}
.auth-box-top img{width:64px;height:64px;padding:3px;border:1px solid var(--cx-line-2);background:#141211;box-shadow:0 0 0 4px rgba(20,18,17,.6)}
.auth-eyebrow{font-size:11px;letter-spacing:.42em;color:var(--cx-ocre)}
.auth-box h1{margin:14px 0 6px;text-align:center;font-size:38px;line-height:1.1;color:var(--cx-ink)}
.auth-lead{max-width:36ch;margin:0 auto 24px;text-align:center;font-size:15px;line-height:1.5;color:#d7d2ca}

.auth-tabs{margin-bottom:24px;padding:4px;border:1px solid var(--cx-line);border-radius:2px;background:#100f0e}
.auth-tab-ind{border-radius:1px;background:linear-gradient(180deg,var(--cx-bord-2),var(--cx-bord));box-shadow:inset 0 0 0 1px rgba(251,241,222,.3)}
.auth-tab{padding:12px 8px;border-radius:1px;font:700 11.5px var(--font-body);letter-spacing:.16em;color:#c8c2b8}
.auth-tab:hover{color:var(--cx-ink)}
.auth-tab.on{color:var(--cx-ink)}

.auth-field{margin-bottom:18px}
#psCoWrap{position:relative;z-index:5} /* la liste des entreprises passe au-dessus des champs suivants (animés) */
.auth-field label{margin-bottom:8px;font:700 10.5px var(--font-body);letter-spacing:.2em;color:#d6c9ae}
.auth-input>svg{left:0;top:0;width:48px;height:100%;margin:0;padding:15px 14px;border-right:1px solid var(--cx-line);color:#aba292;box-sizing:border-box}
.auth-input input{height:50px;padding:0 48px 0 62px;border:1px solid rgba(239,226,200,.2);border-radius:2px;background:#11100f;color:var(--cx-ink);font-size:15px}
.auth-input input::placeholder{color:#8c806c}
.auth-input input:hover{border-color:rgba(239,226,200,.34)}
.auth-input input:focus{border-color:var(--cx-ocre);box-shadow:0 0 0 3px rgba(217,204,176,.14)}
.auth-input:focus-within>svg{color:var(--cx-ocre);border-right-color:rgba(217,204,176,.45)}
.auth-eye{right:5px;width:40px;height:40px;border-radius:2px;color:#aba292}
.auth-eye:hover,.auth-eye.on{color:var(--cx-ocre);background:rgba(239,226,200,.06)}

.auth-go{height:56px;margin-top:8px;border:0;border-radius:2px;background:linear-gradient(180deg,var(--cx-bord-2),var(--cx-bord) 70%,#8f1f2a);color:var(--cx-ink);
  font:800 13px var(--font-body);letter-spacing:.2em;text-transform:uppercase;box-shadow:0 14px 30px -14px rgba(0,0,0,.9);
  outline:1px solid rgba(251,241,222,.42);outline-offset:-5px;transition:background .25s,transform .2s var(--cx-ease),outline-color .25s}
.auth-go:hover{background:linear-gradient(180deg,#e04a54,#b32a35 70%,#9c2630);outline-color:rgba(251,241,222,.7);transform:translateY(-1px)}
.auth-go:active{transform:translateY(1px)}
.auth-go svg{width:19px;height:19px;transition:transform .25s var(--cx-ease)}
.auth-go:hover svg{transform:translateX(3px)}
.auth-go:focus-visible,.auth-tab:focus-visible,.auth-links button:focus-visible,.auth-eye:focus-visible{outline:2px solid var(--cx-ocre);outline-offset:2px}

.auth-links{justify-content:center;margin-top:20px;font-size:14px}
.auth-links button{color:#cec8bf;text-decoration:underline;text-decoration-color:rgba(206,200,191,.35);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.auth-links button:hover{color:var(--cx-ocre-2);text-decoration-color:var(--cx-ocre)}
.auth-note{border-radius:2px;border-color:var(--cx-line-2);border-left:3px solid var(--cx-ocre);background:rgba(217,204,176,.08);color:#e2d3bc}
.auth-note a{color:var(--cx-ocre-2)}
.ps-error{border-radius:2px}
.auth-box .ps-combo-list{border-color:var(--cx-line-2);border-radius:2px;background:#181615;box-shadow:0 22px 50px rgba(0,0,0,.7)}
.auth-box .ps-combo-item{font:600 15px var(--font-body);color:var(--cx-ink)}
.auth-box .ps-combo-item:hover,.auth-box .ps-combo-item.on{background:rgba(200,50,60,.28)}
.auth-box .ps-av{border-color:var(--cx-line-2);color:var(--cx-ocre-2)}
.auth-box .ps-chosen{margin-top:0;border-radius:2px;border-left:3px solid var(--cx-ocre);background:rgba(217,204,176,.08);font:600 15px var(--font-body);color:var(--cx-ink)}
.auth-mini{margin-top:22px;padding-top:16px;border-top:1px solid var(--cx-line);font-size:10.5px;letter-spacing:.24em}
.auth-mini span{display:none}
.auth-mini a:hover{color:var(--cx-ocre-2)}

/* Apparition des champs, en cascade */
.auth-box form:not([hidden]) .auth-field,.auth-box form:not([hidden]) .auth-go{animation:cxField .5s var(--cx-ease) both}
.auth-box form:not([hidden]) .auth-field:nth-of-type(1){animation-delay:.25s}
.auth-box form:not([hidden]) .auth-field:nth-of-type(2){animation-delay:.32s}
.auth-box form:not([hidden]) .auth-go{animation-delay:.4s}
@keyframes cxField{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Écrans moyens et petits ---------- */
@media(max-height:780px) and (min-width:901px){
  .auth-art{padding-top:28px;padding-bottom:26px}
  .auth-panel{padding-top:20px;padding-bottom:20px}
  .auth-box-top img{width:56px;height:56px}
  .auth-headline{font-size:clamp(40px,5vw,68px)}
  .auth-box{padding-top:40px;padding-bottom:22px}
  .auth-box h1{font-size:34px}
  .auth-lead{margin-bottom:18px}
  .auth-field{margin-bottom:14px}
  .auth-mini{margin-top:16px;padding-top:12px}
}
@media(max-width:900px){
  .auth-wrap{grid-template-rows:auto 1fr}
  .auth-art{gap:18px;padding:22px 22px 14px}
  .auth-brand img{width:50px;height:50px}
  .auth-brand b{font-size:16px}
  .auth-art-main{display:block;max-width:none}
  .auth-badge,.auth-art-lead,.auth-chips,.auth-foot{display:none}
  .auth-headline{margin:0;font-size:clamp(28px,8.4vw,44px);line-height:1.08}
  .auth-panel{padding:6px 14px 30px}
  .auth-box{max-width:560px;margin:0 auto;padding:38px 22px 22px;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 4px rgba(20,18,17,.5)}
  .auth-box h1{font-size:32px;margin-top:10px}
  .auth-box-top img{width:54px;height:54px}
  .auth-lead{margin-bottom:18px}
  .auth-tabs{margin-bottom:18px}
  .auth-field{margin-bottom:14px}
  .auth-mini{margin-top:16px;padding-top:12px}
  .auth-bg::after{background:
    linear-gradient(180deg,rgba(14,14,13,.74) 0%,rgba(14,14,13,.46) 24%,rgba(14,14,13,.9) 48%,rgba(14,14,13,.96) 100%)}
}
@media(max-width:420px){
  .auth-art{padding:18px 16px 10px}
  .auth-box{padding:36px 18px 20px}
  .auth-box::after{inset:12px 8px 8px}
  .auth-input input{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .auth-box,.auth-box form .auth-field,.auth-box form .auth-go{animation:none !important}
  .auth-dots i.on::after{animation:none;transform:scaleX(1)}
}

/* ---------- Direction artistique : rouge, crème, bleu ---------- */
body.auth-page{
  --casa-bordeaux-2:#c8323c;--casa-bordeaux-3:#d6404a;--casa-ocre:#d9ccb0;--casa-brique:#e0525c;
  --da-gold:#d9ccb0;--da-gold-2:#efe2c8;--da-pink:#e0525c;--da-pink-2:#f4adb2;--da-muted:#b3ab9d;
  --casa-diamonds:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Crect width='16' height='8' fill='%231f4a96'/%3E%3Cpath d='M8 0l8 4-8 4-8-4z' fill='%23c8323c'/%3E%3Cpath d='M8 2.4 9.6 4 8 5.6 6.4 4z' fill='%23efe2c8'/%3E%3C/svg%3E");
  background:#171614;
}
html.auth-dedicated body.auth-page{background:#171614}
.auth-headline{font-weight:800}
.auth-box h1{font-weight:800;letter-spacing:-.015em}

/* Plus de bande de motifs */
.auth-box::before,.auth-art-lead::before{display:none}
.auth-art-lead{margin-top:26px;padding-top:0}
.auth-box{padding-top:40px}

/* ---------- Crème en touches : cadre de la carte ---------- */
.auth-box{border-color:rgba(239,226,200,.42)}
.auth-box::after{border-color:rgba(239,226,200,.2)}