/* ============================================================
   assets/css/forms.css  — Éco'Mam
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schoolbell&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  --belge:      #b5833e;
  --peche:      #eec9ae;
  --vert:       #54a66a;
  --vert-clair: #e8f5ed;
  --citron:     #fff8c9;
  --blanc:      #ffffff;
  --gris-texte: #9a8878;
  --texte:      #4a3728;
  --erreur:     #c0392b;

  --font-titre: 'Schoolbell', cursive;
  --font-texte: 'Nunito', sans-serif;
}


/* ══════════════════════════════════════════
   1. BODY
   ══════════════════════════════════════════ */
body {
  font-family:     var(--font-texte);
  background:      var(--citron);
  color:           var(--texte);
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         40px 16px;
}


/* ══════════════════════════════════════════
   2. LOGO
   ══════════════════════════════════════════ */
.logo-wrap {
  text-align:    center;
  margin-bottom: 22px;
}

.logo-wrap a {
  font-family:     var(--font-titre);
  font-size:       2.5rem;
  text-decoration: none;
  letter-spacing:  1px;
  display:         inline-flex;
  align-items:     center;
  gap:             2px;
}

.logo-wrap a .logo-eco { color: var(--belge); }
.logo-wrap a .logo-mam { color: var(--vert);  }

.logo-wrap p {
  font-size:      0.72rem;
  font-weight:    600;
  color:          var(--gris-texte);
  margin-top:     2px;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* ══════════════════════════════════════════
   3. CARTE
   ══════════════════════════════════════════ */
.card {
  background:    var(--blanc);
  border-radius: 28px;
  padding:       44px 48px;
  border:        1.5px solid var(--peche);
  width:         100%;
  max-width:     560px;
}

.card-header {
  text-align:    center;
  margin-bottom: 30px;
}

.card-header h1 {
  font-family:   var(--font-titre);
  font-size:     2.6rem;
  color:         var(--belge);
  margin-bottom: 6px;
  line-height:   1.1;
}

.card-header p {
  font-size:   0.85rem;
  color:       var(--gris-texte);
  font-weight: 500;
}


/* ══════════════════════════════════════════
   4. ALERTE D'ERREUR GLOBALE
   ══════════════════════════════════════════ */
.alert-error {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  background:    #fef2f2;
  border:        1.5px solid #f5c6c6;
  border-left:   4px solid var(--erreur);
  border-radius: 12px;
  padding:       14px 16px;
  margin-bottom: 24px;
  font-size:     0.84rem;
  color:         var(--erreur);
}

.alert-error i {
  margin-top:  2px;
  flex-shrink: 0;
}

.alert-error ul {
  padding-left: 16px;
  margin:       0;
}

.alert-error li {
  margin-bottom: 4px;
}


/* ══════════════════════════════════════════
   5. TITRES DE SECTION
   ══════════════════════════════════════════ */
.form-section-title {
  display:        flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--font-titre);
  font-size:      1.2rem;
  color:          var(--belge);
  margin:         26px 0 14px;
  padding:        0 0 10px 0;
  border-bottom:  1.5px solid #f0e4d0;
  user-select:    none;
  cursor:         default;
  pointer-events: none;
}

.form-section-title:first-of-type {
  margin-top: 0;
}

.form-section-title i {
  color:     var(--vert);
  font-size: 0.95rem;
}


/* ══════════════════════════════════════════
   6. GRILLE 2 COLONNES
   ══════════════════════════════════════════ */
.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
  width:                 100%;
}

.form-row > .form-group {
  min-width:     0;
  margin-bottom: 0;
}


/* ══════════════════════════════════════════
   7. GROUPES DE CHAMPS
   ══════════════════════════════════════════ */
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  16px;
}

.form-group label {
  font-size:      0.72rem;
  font-weight:    700;
  color:          var(--belge);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.form-group label .required {
  color:       var(--erreur);
  font-size:   0.8rem;
  margin-left: 1px;
}

.form-group label small {
  font-size:      0.7rem;
  font-weight:    500;
  color:          var(--gris-texte);
  text-transform: none;
  letter-spacing: 0;
  margin-left:    4px;
}

.field-error {
  display:     none;
  font-size:   0.72rem;
  color:       var(--erreur);
  font-weight: 600;
  gap:         4px;
  align-items: center;
}

.field-error.visible {
  display: flex;
}

.field-error i {
  font-size: 0.68rem;
}


/* ══════════════════════════════════════════
   8. INPUTS
   ══════════════════════════════════════════ */
.form-group input {
  width:         100%;
  box-sizing:    border-box;
  padding:       12px 16px;
  border:        2px solid #d9c9b6;
  border-radius: 12px;
  font-family:   var(--font-texte);
  font-size:     0.9rem;
  font-weight:   500;
  color:         var(--texte);
  background:    #ffffff;
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
}

.form-group input::placeholder {
  color:       #c4b09a;
  font-weight: 400;
}

.form-group input:focus {
  border-color: var(--belge);
  box-shadow:   0 0 0 3px rgba(181, 131, 62, 0.12);
}

.form-group input.error {
  border-color: var(--erreur);
  box-shadow:   0 0 0 3px rgba(192, 57, 43, 0.08);
}


/* ══════════════════════════════════════════
   9. INPUT AVEC ICÔNE PRÉFIXE
   ══════════════════════════════════════════ */
.input-icon-wrap {
  position: relative;
  width:    100%;
}

.input-icon-wrap .input-icon {
  position:       absolute;
  left:           14px;
  top:            50%;
  transform:      translateY(-50%);
  color:          #c4a882;
  font-size:      0.82rem;
  pointer-events: none;
  transition:     color 0.2s;
}

.input-icon-wrap:focus-within .input-icon {
  color: var(--belge);
}

.form-group input.has-icon {
  padding-left: 38px;
}


/* ══════════════════════════════════════════
   10. MOT DE PASSE
   ══════════════════════════════════════════ */
.mdp-wrap {
  position: relative;
  width:    100%;
}

.mdp-wrap input {
  width:         100%;
  box-sizing:    border-box;
  padding-right: 44px;
}

.mdp-toggle {
  position:      absolute;
  right:         12px;
  top:           50%;
  transform:     translateY(-50%);
  background:    none;
  border:        none;
  cursor:        pointer;
  color:         #c4a882;
  padding:       4px;
  font-size:     0.9rem;
  line-height:   1;
  transition:    color 0.2s;
  border-radius: 6px;
}

.mdp-toggle:hover {
  color: var(--belge);
}

.strength-bar {
  height:        5px;
  border-radius: 99px;
  background:    #eeddc8;
  margin-top:    8px;
  overflow:      hidden;
}

.strength-fill {
  height:        100%;
  width:         0%;
  border-radius: 99px;
  transition:    width 0.35s ease, background-color 0.35s ease;
}

.strength-label {
  font-size:   0.7rem;
  font-weight: 600;
  color:       var(--gris-texte);
  margin-top:  4px;
}


/* ══════════════════════════════════════════
   11. BOUTON SUBMIT
   ══════════════════════════════════════════ */
.btn-submit {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  width:           100%;
  padding:         15px;
  border-radius:   18px;
  background:      var(--belge);
  color:           var(--blanc);
  font-family:     var(--font-titre);
  font-size:       1.15rem;
  letter-spacing:  0.4px;
  border:          none;
  cursor:          pointer;
  transition:      background 0.2s, transform 0.15s;
  margin-top:      16px;
}

.btn-submit:hover {
  background: #9a6e32;
  transform:  translateY(-1px);
}

.btn-submit:active {
  transform: translateY(0);
}

.btn-submit:disabled {
  opacity:   0.55;
  cursor:    not-allowed;
  transform: none;
}

.btn-submit i {
  font-size: 0.95rem;
}


/* ══════════════════════════════════════════
   12. LIEN SECONDAIRE
   ══════════════════════════════════════════ */
.login-link {
  text-align:  center;
  margin-top:  20px;
  font-size:   0.84rem;
  color:       var(--gris-texte);
  font-weight: 500;
}

.login-link a {
  color:           var(--vert);
  font-weight:     700;
  text-decoration: none;
}

.login-link a:hover {
  text-decoration: underline;
}


/* ══════════════════════════════════════════
   13. NOTE RGPD
   ══════════════════════════════════════════ */
.rgpd-note {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  background:    var(--vert-clair);
  border:        1.5px solid #b8e0c6;
  border-radius: 12px;
  padding:       14px 16px;
  font-size:     0.78rem;
  color:         #3a6b4a;
  line-height:   1.65;
  margin-top:    20px;
  margin-bottom: 4px;
}

.rgpd-note i {
  color:       var(--vert);
  font-size:   1rem;
  margin-top:  1px;
  flex-shrink: 0;
}

.rgpd-note strong {
  color:       #2d5a3a;
  font-weight: 700;
}


/* ══════════════════════════════════════════
   14. RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .card {
    padding: 36px 30px;
  }
}

@media (max-width: 600px) {
  .card {
    padding:       28px 22px;
    border-radius: 20px;
  }

  .card-header h1 {
    font-size: 2rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-row > .form-group {
    margin-bottom: 0;
  }

  .btn-submit {
    font-size: 1rem;
    padding:   13px;
  }
}


/* ══════════════════════════════════════════
   LOGIN — Champ unique email / téléphone
   ══════════════════════════════════════════ */

/* Wrapper du champ smart */
.smart-wrap {
  position: relative;
  width:    100%;
}

/* Icône à gauche */
.smart-icon {
  position:       absolute;
  left:           14px;
  top:            50%;
  transform:      translateY(-50%);
  font-size:      .85rem;
  color:          #c4a882;
  pointer-events: none;
  transition:     color .2s;
}

.smart-icon.detected {
  color: var(--belge);
}

/* Input du champ smart */
.smart-wrap input {
  width:         100%;
  box-sizing:    border-box;
  padding:       12px 70px 12px 38px;
  border:        2px solid #d9c9b6;
  border-radius: 12px;
  font-family:   var(--font-texte);
  font-size:     .9rem;
  font-weight:   500;
  color:         var(--texte);
  background:    #fff;
  outline:       none;
  transition:    border-color .2s, box-shadow .2s;
}

.smart-wrap input::placeholder {
  color:       #c4b09a;
  font-weight: 400;
}

.smart-wrap input:focus {
  border-color: var(--belge);
  box-shadow:   0 0 0 3px rgba(181, 131, 62, .12);
}

.smart-wrap input.error {
  border-color: var(--erreur);
  box-shadow:   0 0 0 3px rgba(192, 57, 43, .08);
}

/* Badge type détecté (Email / Tél.) */
.type-badge {
  position:       absolute;
  right:          12px;
  top:            50%;
  transform:      translateY(-50%);
  font-size:      .65rem;
  font-weight:    800;
  padding:        3px 8px;
  border-radius:  6px;
  letter-spacing: .3px;
  text-transform: uppercase;
  opacity:        0;
  transition:     opacity .2s;
  pointer-events: none;
}

.type-badge.show  { opacity: 1; }
.type-badge.email { background: #e8f5ed; color: var(--vert);  }
.type-badge.tel   { background: #fdf0e2; color: var(--belge); }

/* Hint sous le champ */
.smart-hint {
  font-size:   .7rem;
  color:       #c4b09a;
  font-weight: 500;
  margin-top:  3px;
  display:     flex;
  align-items: center;
  gap:         5px;
  transition:  color .2s;
}

.smart-hint i             { font-size: .65rem; }
.smart-hint.detected-email { color: var(--vert);  }
.smart-hint.detected-tel   { color: var(--belge); }


/* ══════════════════════════════════════════
   LOGIN — Tabs Email / Téléphone
   ══════════════════════════════════════════ */
.login-tabs {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  background:    #f7f2eb;
  border-radius: 12px;
  padding:       4px;
  gap:           4px;
  margin-bottom: 22px;
}

.tab-btn {
  padding:         9px;
  border-radius:   9px;
  font-family:     var(--font-texte);
  font-size:       .8rem;
  font-weight:     700;
  border:          none;
  background:      transparent;
  color:           var(--gris-texte);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  transition:      all .18s;
  user-select:     none;
}

.tab-btn.active {
  background: var(--blanc);
  color:      var(--belge);
  border:     1px solid var(--peche);
}

.tab-btn i {
  font-size: .78rem;
}


/* ══════════════════════════════════════════
   LOGIN — Lien mot de passe oublié
   ══════════════════════════════════════════ */
.forgot-link {
  display:     block;
  text-align:  right;
  font-size:   .75rem;
  font-weight: 700;
  color:       var(--gris-texte);
  text-decoration: none;
  margin-top:  -8px;
  margin-bottom: 20px;
  transition:  color .18s;
}

.forgot-link i {
  font-size: .7rem;
}

.forgot-link:hover {
  color: var(--belge);
}


/* ══════════════════════════════════════════
   LOGIN — Séparateur "Pas encore de compte"
   ══════════════════════════════════════════ */
.form-separator {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin:      22px 0;
}

.form-separator .sep-line {
  flex:       1;
  height:     1px;
  background: #f0e4d0;
}

.form-separator .sep-txt {
  font-size:   .72rem;
  color:       #cbb99a;
  font-weight: 600;
  white-space: nowrap;
}