/* ============================================================
   Profil — Connexion / Inscription (page /profile/login.php,
   currentPage "profile-login.php"). Composant #connexion-inscription
   (.inscription = créer un compte / .connexion = déjà inscrit) en
   cartes "encre & papier", cohérent avec le tunnel panier.
   Scopé sur l'id #connexion-inscription (chargé uniquement sur cette
   page) -> bat le thème/materialize par la spécificité de l'id, sans !important.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap");

#connexion-inscription {
  --ink:#161513; --ink-2:#38352f; --muted:#807c73; --line:#e7e4dd; --line-2:#efece6;
  --paper:#fff; --field-bg:#faf9f6; --accent:#161513; --radius:16px; --radius-sm:10px;
  --ff-sans:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ff-mono:"DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease:cubic-bezier(.22,.61,.36,1);

  display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); gap:22px;
  max-width:1040px; margin:30px auto; padding:0;
  font-family:var(--ff-sans); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased;
}
#connexion-inscription *,#connexion-inscription *::before,#connexion-inscription *::after { box-sizing:border-box; }

/* Colonnes -> cartes */
#connexion-inscription > [class*="col"] { width:auto; float:none; margin:0; padding:0; }
#connexion-inscription .inscription,
#connexion-inscription .connexion {
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(22,21,19,.04), 0 16px 38px -30px rgba(22,21,19,.4);
  padding:28px; height:100%;
}
#connexion-inscription > .block-fb-login { grid-column:1 / -1; }

/* En-têtes (h2) avec pastille icône */
#connexion-inscription h2 {
  display:flex; align-items:center; gap:12px;
  font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.25;
  margin:0 0 18px; padding:0 0 16px; border-bottom:1px solid var(--line-2); color:var(--ink);
}
#connexion-inscription h2::before {
  font-family:"Font Awesome 6 Free"; font-weight:900; font-style:normal;
  width:38px; height:38px; flex:none; border-radius:10px;
  background:var(--accent); color:#fff; display:grid; place-items:center; font-size:16px;
}
#connexion-inscription .inscription h2::before { content:"\f234"; } /* user-plus */
#connexion-inscription .connexion h2::before { content:"\f2f6"; }   /* sign-in */

/* Notifications JS */
#connexion-inscription .form-account-registration__notification:empty,
#connexion-inscription .form-account-login__notification:empty { display:none; }

/* Alertes */
#connexion-inscription .alert { font-size:13.5px; line-height:1.5; border-radius:var(--radius-sm); padding:12px 15px; margin:0 0 16px; border:1px solid var(--line); }
#connexion-inscription .alert-danger { background:#fcf1ef; border-color:#e7c9c4; color:#7c2d23; }

/* Grille interne des champs */
#connexion-inscription form > .row,
#connexion-inscription .block-professionnal { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; margin:0; }
#connexion-inscription .row > [class*="col"] { width:auto; float:none; padding:0; margin:0; }
#connexion-inscription .row > .col.s12 { grid-column:1 / -1; }
#connexion-inscription .row > .clearfix { display:none; }

/* Champs : le libellé enveloppe l'input -> on empile */
#connexion-inscription .form-group { display:flex; flex-direction:column; gap:6px; margin:0 0 16px; }
#connexion-inscription .form-group > label { display:flex; flex-direction:column; gap:6px;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
#connexion-inscription input[type="text"],
#connexion-inscription input[type="email"],
#connexion-inscription input[type="password"],
#connexion-inscription input.form-control {
  width:100%; height:auto; margin:0; box-sizing:border-box;
  border:1px solid var(--line); background:var(--field-bg); border-radius:var(--radius-sm);
  padding:11px 13px; font-family:var(--ff-sans); font-size:15px; color:var(--ink); text-transform:none; letter-spacing:normal; box-shadow:none;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
#connexion-inscription input:focus { outline:none; border-color:var(--ink); background:var(--paper); box-shadow:0 0 0 3px rgba(22,21,19,.08); }

/* Mot de passe avec œil */
#connexion-inscription .input-group-password { position:relative; }
#connexion-inscription .input-group-password input { padding-right:44px; }
#connexion-inscription .input-group-password-btn { position:absolute; top:0; right:0; height:100%; display:flex; align-items:center; padding:0 10px; }
#connexion-inscription .btn-show-password { background:none; border:0; color:var(--muted); cursor:pointer; padding:4px; font-size:15px; line-height:1; display:flex; }
#connexion-inscription .btn-show-password:hover { color:var(--ink); }

/* Cases à cocher */
#connexion-inscription .groupe-checkbox { display:flex; align-items:flex-start; gap:9px; }
#connexion-inscription .groupe-checkbox label { font-family:var(--ff-sans); font-size:13px; text-transform:none; letter-spacing:normal; color:var(--ink-2); line-height:1.45; }
#connexion-inscription .groupe-checkbox label:before { border-color:var(--line); background:var(--paper); }
#connexion-inscription .groupe-checkbox label:after { background:var(--accent); border-color:var(--accent); }

/* Boutons d'action + lien mot de passe oublié */
#connexion-inscription .inscription-connexion-btn { display:flex; flex-direction:column; gap:10px; align-items:stretch; }
#connexion-inscription .inscription-connexion-btn a { align-self:flex-end; font-size:13px; text-decoration:underline; }
#connexion-inscription .profile-button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; float:none !important;border-radius:var(--radius-sm);
  padding:13px 20px; font-family:var(--ff-sans); font-size:14.5px; font-weight:600; line-height:1.2;
  cursor:pointer; text-transform:none; transition:filter .16s var(--ease);
}
#connexion-inscription .profile-button:hover { filter:brightness(1.28); }

/* Connexion via Facebook (pleine largeur, sous les 2 cartes) */
#connexion-inscription .block-fb-login .form-group { margin:0; }
#connexion-inscription .fb-login-button {
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 18px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); color:var(--ink); font-size:14px; font-weight:600; cursor:pointer;
  transition:border-color .16s var(--ease);
}
#connexion-inscription .fb-login-button:hover { border-color:var(--ink); }
#connexion-inscription .fb-login-button .fa-facebook-official { color:#1877f2; font-size:17px; }

/* Mentions RGPD */
#connexion-inscription .law-computer-and-freedoms .help-block { font-size:11.5px; color:var(--muted); line-height:1.5; }
#connexion-inscription .law-computer-and-freedoms a { color:var(--ink-2); text-decoration:underline; }