/* ==========================================================================
   connexion.css : page de connexion v2 (maquette storybook, aout 2026).
   Prefixe .cmc-. Charge par cgi-bin/connexion.pl avec ?v= (cache 11 mois).
   ========================================================================== */

.cmc-connexion {
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  color: #1F2328;
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}
.cmc-connexion *, .cmc-connexion *::before, .cmc-connexion *::after { box-sizing: border-box; }

/* ---------- deux colonnes ---------- */
.cmc-auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 560px; }

/* panneau photo + arguments */
.cmc-auth .side { position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.cmc-auth .side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmc-auth .side::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,18,20,0) 22%, rgba(16,18,20,.5) 52%, rgba(16,18,20,.92) 100%);
}
.cmc-auth .side .pitch { position: relative; z-index: 2; padding: 30px 34px; color: #fff; }
.cmc-auth .side .pitch h2 { font-size: 22px; margin: 0 0 12px; font-weight: 650; color: #fff; text-transform: none; }
.cmc-auth .side .pitch div { font-size: 13px; padding: 4px 0; display: flex; gap: 9px; align-items: baseline; color: #E5E7E9; }
.cmc-auth .side .pitch .ck { color: #F5A45B; font-weight: 700; display: inline-flex; }

/* panneau formulaire */
.cmc-auth .formside {
  padding: 44px 48px; display: flex; flex-direction: column; justify-content: center;
  gap: 14px; max-width: 460px; margin: 0 auto; width: 100%;
}
.cmc-auth .formside h1 { font-size: 24px; margin: 0 0 2px; font-weight: 650; text-transform: none; color: #1F2328; }
.cmc-auth .formside .sub { font-size: 13px; color: #6E767E; margin-bottom: 8px; }
.cmc-auth .formside form { display: flex; flex-direction: column; gap: 14px; margin: 0; }

/* champs (guerre CSS du site : selecteurs avec ID + min-height 0) */
.cmc-field { display: flex; flex-direction: column; gap: 5px; }
.cmc-field label { font-size: 11.5px; font-weight: 600; color: #4B5157; margin: 0; text-transform: none; }
.cmc-field label i { font-style: normal; color: #B3342C; }
.cmc-field .wrap { position: relative; display: block; }
/* centre sur le champ de 44px (top fixe : le wrap peut etre plus haut que
   l'input a cause des styles globaux du site, un top:50% descend l'icone) */
.cmc-field .wrap > svg {
  position: absolute; left: 12px; top: 22px; transform: translateY(-50%);
  color: #98A1A8; pointer-events: none;
}
#cmc-login .cmc-field input, #cmc-lost .cmc-field input {
  width: 100%; height: 44px; min-height: 0 !important;
  border: 1px solid #DFE3E7 !important; border-radius: 9px !important;
  padding: 0 12px 0 36px !important; font-size: 13.5px; color: #1F2328;
  background: #fff; font-family: inherit; box-shadow: none !important;
}
#cmc-login .cmc-field input::placeholder, #cmc-lost .cmc-field input::placeholder { color: #A6ADB3; }
#cmc-login .cmc-field input:focus, #cmc-lost .cmc-field input:focus {
  outline: 2px solid #F0B27D; outline-offset: 0; border-color: #E8720C !important;
}

/* rester connecte + lien mdp oublie */
.cmc-connexion .row2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: #4B5157; flex-wrap: wrap; }
.cmc-connexion .row2 a { color: #D9640A; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.cmc-connexion .row2 a:hover { text-decoration: underline; }
.cmc-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; font-weight: 400; color: #4B5157; margin: 0; text-transform: none; line-height: 1.4; }
.cmc-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: #E8720C; }

/* recaptcha */
.cmc-captcha { min-height: 78px; }

/* erreurs */
.cmc-error {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: #A32D2D; background: #FCEBEB;
  border: 1px solid #F2C7C7; border-radius: 8px; padding: 10px 12px;
}
.cmc-error > svg { flex: none; margin-top: 1px; }
.cmc-connexion .alert { border-radius: 10px; font-size: 13px; padding: 12px 14px; }
.cmc-connexion .alert h1 { font-size: 15px; margin: 0 0 6px; text-transform: none; }

/* CTA */
.cmc-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #E8720C; color: #fff !important; font-size: 14.5px; font-weight: 600;
  border-radius: 10px; height: 46px; cursor: pointer; border: none; width: 100%;
  font-family: inherit; text-decoration: none !important; text-transform: none;
  transition: background .2s ease;
}
.cmc-cta:hover { background: #C95F06; color: #fff; }
.cmc-cta2 {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid #DFE3E7; border-radius: 10px; height: 42px;
  font-size: 13px; font-weight: 500; cursor: pointer; background: #fff;
  color: #1F2328 !important; text-decoration: none !important; text-transform: none;
  transition: background .15s ease;
}
.cmc-cta2:hover { background: #F4F5F7; color: #1F2328; }
.cmc-ctarow { display: flex; gap: 8px; }
.cmc-ctarow .cmc-cta, .cmc-ctarow .cmc-cta2 { flex: 1; }

/* divider + encart inscription */
.cmc-divider { display: flex; align-items: center; gap: 12px; color: #A6ADB3; font-size: 11.5px; margin: 6px 0; }
.cmc-divider::before, .cmc-divider::after { content: ""; flex: 1; height: 1px; background: #E8EBEE; }
.cmc-proline {
  border: 1px dashed #E3C9A8; background: #FDF8F1; color: #8A4B12;
  border-radius: 10px; padding: 11px 14px; font-size: 12px; line-height: 1.5;
}
.cmc-proline b { color: #6E3A0C; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cmc-auth { grid-template-columns: 1fr; min-height: 0; }
  .cmc-auth .side { min-height: 210px; order: 2; }
  .cmc-auth .formside { order: 1; padding: 28px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmc-connexion * { transition: none !important; }
}