/* ============================================================================
 * loginPage.css — TripCooking · Connexion / Invitation (login.php)
 * ----------------------------------------------------------------------------
 * Thème sombre framboise/safran. Tout est scopé sous .tcl-page et utilise des
 * variables à NOM UNIQUE (--tclog-*) avec valeurs EN DUR : aucun :root global
 * du site ne peut les écraser. Les classes fonctionnelles des formulaires
 * (.btn-connexion, .checkbox-group, .form-group-validation, etc.) sont stylées
 * mais leur HTML n'est pas modifié.
 * ========================================================================== */

.tcl-page{
  /* ---- Palette privée (verrouillée, non surchargeable) ---- */
  --tclog-bg:#16171B;
  --tclog-surface:#1C1E23;
  --tclog-surface-2:#23262C;
  --tclog-field:#15161A;
  --tclog-line:#2A2D34;
  --tclog-line-2:#34373F;
  --tclog-text:#ECEDE9;
  --tclog-soft:#9A9E98;
  --tclog-muted:#6C7069;
  --tclog-accent:#CA4A82;
  --tclog-accent-2:#E14B7A;
  --tclog-accent-deep:#B6306B;
  --tclog-gold:#E8A93C;
  --tclog-steel:#7FB0D9;
  --tclog-ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tclog-mono:"IBM Plex Mono",ui-monospace,monospace;

  position:relative;
  display:grid;
  place-items:center;
  min-height:calc(100dvh - 60px);
  padding:40px 24px 56px;
  overflow:hidden;
  background:var(--tclog-bg);
  color:var(--tclog-text);
  font-family:var(--tclog-ui);
}
.tcl-page *,
.tcl-page *::before,
.tcl-page *::after{box-sizing:border-box}
.tcl-page a{color:inherit;text-decoration:none}
.tcl-page h1,.tcl-page h2{margin:0;letter-spacing:-.02em}

/* ===== Halos d'arrière-plan ===== */
.tcl-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.tcl-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.tcl-glow--1{width:460px;height:460px;top:-140px;left:-120px;background:rgba(202,74,130,.55)}
.tcl-glow--2{width:420px;height:420px;right:-120px;bottom:-150px;background:rgba(232,169,60,.40)}
.tcl-glow--3{width:380px;height:380px;left:46%;top:54%;transform:translate(-50%,-50%);background:rgba(127,176,217,.18)}

/* ===== Shell (grille principale) ===== */
.tcl-shell{position:relative;z-index:1;width:100%}
.tcl-shell--duo{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
}
.tcl-shell--solo{max-width:460px;margin:0 auto}
.tcl-col{min-width:0}

/* ============================================================
 * COLONNE GAUCHE — bloc de présentation
 * ============================================================ */
.tcl-hero__badge{
  display:inline-block;font-family:var(--tclog-mono);font-size:11px;font-weight:600;
  letter-spacing:.05em;color:var(--tclog-gold);
  border:1px solid rgba(232,169,60,.30);background:rgba(232,169,60,.10);
  border-radius:999px;padding:4px 11px;margin-bottom:16px;
}
.tcl-hero__title{font-size:clamp(30px,4.4vw,46px);font-weight:800;line-height:1.05}
.tcl-hero__title span{
  background:linear-gradient(120deg,var(--tclog-accent-2),var(--tclog-accent) 55%,var(--tclog-gold));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.tcl-hero__desc{max-width:500px;margin:18px 0 24px;font-size:14.5px;line-height:1.65;color:var(--tclog-soft)}
.tcl-hero__desc b{color:var(--tclog-text);font-weight:700}

/* stats (état invitation) */
.tcl-stats{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.tcl-stat{
  display:flex;align-items:center;gap:10px;
  background:var(--tclog-surface);border:1px solid var(--tclog-line);
  border-radius:13px;padding:10px 14px;
}
.tcl-stat__icon{font-size:20px;line-height:1}
.tcl-stat__text{display:flex;flex-direction:column;line-height:1.15}
.tcl-stat__text strong{font-family:var(--tclog-mono);font-size:16px;font-weight:600;color:var(--tclog-text)}
.tcl-stat__text span{font-size:11px;color:var(--tclog-muted)}

/* encadré "pourquoi / ce qui t'attend" */
.tcl-panel{
  border:1px solid var(--tclog-line);border-radius:16px;padding:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--tclog-surface);
}
.tcl-panel__title{font-size:16px;font-weight:800;margin:0 0 6px}
.tcl-panel__text{font-size:13px;color:var(--tclog-soft);line-height:1.55;margin:0 0 16px}
.tcl-features{display:flex;flex-direction:column;gap:13px}
.tcl-feature{display:flex;align-items:flex-start;gap:13px}
.tcl-feature__icon{
  width:38px;height:38px;flex-shrink:0;border-radius:11px;
  display:grid;place-items:center;font-size:17px;
  background:rgba(202,74,130,.16);border:1px solid rgba(202,74,130,.30);
}
.tcl-feature__body{min-width:0}
.tcl-feature__body strong{display:block;font-size:13.5px;font-weight:800;color:var(--tclog-text)}
.tcl-feature__body p{margin:2px 0 0;font-size:12.5px;color:var(--tclog-soft);line-height:1.4}

/* ============================================================
 * COLONNE DROITE — carte
 * ============================================================ */
.tcl-card{
  width:100%;
  background:var(--tclog-surface);border:1px solid var(--tclog-line);border-radius:18px;
  padding:30px 30px 26px;
  box-shadow:0 1px 0 rgba(255,255,255,.03),0 30px 60px -34px rgba(0,0,0,.8);
}
.tcl-card--center{text-align:center}
.tcl-card__head{margin-bottom:20px}
.tcl-card__title{font-size:26px;font-weight:800}
.tcl-card__text{margin:6px 0 0;font-size:13.5px;color:var(--tclog-soft);line-height:1.55}

/* ---- Libellés + champs (markup des <form> inchangé) ---- */
.tcl-card label{display:block;font-size:12.5px;font-weight:700;color:var(--tclog-soft);margin:0 0 7px}
.tcl-card .tcl-form > label{margin-top:16px}
.tcl-card .tcl-form > label:first-of-type{margin-top:0}

.tcl-card input[type="email"],
.tcl-card input[type="password"],
.tcl-card input[type="text"],
.tcl-card .form-group-validation input{
  width:100%;height:46px;
  background:var(--tclog-field);border:1px solid var(--tclog-line);border-radius:11px;
  padding:0 14px;color:var(--tclog-text);font:inherit;font-size:14px;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.tcl-card input::placeholder{color:var(--tclog-muted)}
.tcl-card input:focus{
  outline:none;border-color:var(--tclog-accent);
  box-shadow:0 0 0 3px rgba(202,74,130,.18);background:#181a1f;
}
.tcl-card .form-group-validation{margin-bottom:14px}
.tcl-card .form-group-validation label{font-size:12.5px;font-weight:700;color:var(--tclog-soft);margin:0 0 7px}

/* case à cocher */
.tcl-card .checkbox-group{display:flex;align-items:center;gap:9px;margin:14px 0 4px !important}
.tcl-card .checkbox-group input[type="checkbox"]{
  width:17px;height:17px;flex-shrink:0;accent-color:var(--tclog-accent);cursor:pointer;
}
.tcl-card .checkbox-group label{margin:0;font-size:13px;font-weight:600;color:var(--tclog-soft);cursor:pointer}

/* loaders */
.tcl-card #loaderConnexion{margin:6px 0;font-family:var(--tclog-mono);font-size:12px;color:var(--tclog-soft)}
.tcl-card .validation-loader{margin:6px 0}
.tcl-card .validation-loader img{width:26px;height:26px;animation:tclSpin .9s linear infinite}
@keyframes tclSpin{to{transform:rotate(360deg)}}

/* boutons principaux (connexion + invitation) */
.tcl-card .btn-connexion,
.tcl-card .btn-validation-submit{
  -webkit-appearance:none;appearance:none;display:block;width:100%;margin-top:18px;
  height:48px;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,var(--tclog-accent-2),var(--tclog-accent-deep));
  color:#fff;font:inherit;font-size:14.5px;font-weight:800;
  box-shadow:0 14px 26px -12px rgba(182,48,107,.85);
  transition:transform .14s,filter .14s;
}
.tcl-card .btn-connexion:hover,
.tcl-card .btn-validation-submit:hover{transform:translateY(-1px);filter:brightness(1.06)}
.tcl-card .btn-connexion:active,
.tcl-card .btn-validation-submit:active{transform:translateY(0)}

/* messages d'erreur */
.tcl-card .erreurConnexion,
.tcl-card .validation-error-message{margin-top:10px;font-size:12.5px;line-height:1.4;color:#ff6b6b}
.tcl-card .erreurConnexion:empty,
.tcl-card .validation-error-message:empty{margin-top:0}

/* liens sous le formulaire */
.tcl-links{margin-top:20px;padding-top:18px;border-top:1px solid var(--tclog-line);display:flex;flex-direction:column;gap:10px;text-align:center}
.tcl-links a{font-size:13px;color:var(--tclog-soft);transition:color .15s}
.tcl-links a:hover{color:var(--tclog-text)}
.tcl-links a strong{color:var(--tclog-accent-2);font-weight:800}

/* actions (états invalide / déjà connecté) */
.tcl-actions{margin-top:22px;display:flex;justify-content:center}
.tcl-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 22px;border-radius:12px;font-weight:800;font-size:14px;
  transition:transform .14s,filter .14s;
}
.tcl-btn--primary{
  background:linear-gradient(135deg,var(--tclog-accent-2),var(--tclog-accent-deep));color:#fff;
  box-shadow:0 14px 26px -12px rgba(182,48,107,.85);
}
.tcl-btn--primary:hover{transform:translateY(-1px);filter:brightness(1.06)}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width:980px){
  .tcl-shell--duo{grid-template-columns:1fr;gap:30px;max-width:460px}
  .tcl-col--form{order:-1}              /* mobile : formulaire d'abord */
  .tcl-hero__desc{max-width:none}
}
@media (max-width:620px){
  .tcl-page{padding:28px 16px 44px}
  .tcl-card{padding:24px 20px 22px}
  .tcl-stats{gap:8px}
}
@media (max-width:420px){
  .tcl-hero__title{font-size:28px}
  .tcl-card__title{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  .tcl-page *{animation:none!important;transition:none!important}
}