/* ==========================================================================
   POOL PARTY — Page Inscription
   Fichier : assets/css/inscription.css
   --------------------------------------------------------------------------
   0) Helpers / reset
   1) Bande supérieure (breadcrumb)
   2) Layout (container, carte)
   3) Typographies & utilitaires
   4) Formulaire : grilles, labels + astérisques
   5) Champs : inputs / selects / textarea / focus / erreurs
   6) Spécifiques : avatar, checkboxes empilées
   7) Actions (boutons)
   8) Sections (titres + séparateurs)
   9) Responsive
   ========================================================================== */


/* ========== 0) HELPERS / RESET ========== */
.register-page * { box-sizing: border-box; }
.register-page img { max-width: 100%; display: block; }
.register-page a { color: inherit; text-decoration: none; }
:root { --control-h: 44px; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.pp-header{
    position: sticky; top:0; z-index:1000;
}

/* ========== 1) BANDE SUPÉRIEURE (breadcrumb) ========== */
.register-top{ background:#FAFAFA; }
.register-top .container{
  max-width:900px; margin:0 auto; padding:20px 20px!important;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.register-breadcrumb{ color:#6B7280; font-size:.95rem; font-family:'Poppins',sans-serif; }
.register-breadcrumb a{ color:#6B7280; }
.register-breadcrumb span{ margin:0 6px; }


/* ========== 2) LAYOUT (container, carte) ========== */
.register-page .container{ max-width:900px; margin:0 auto; padding:20px 20px 60px; }
.register-page .card{
  background:#fff; border:1px solid #E5E7EB; border-radius:8px;
  padding:20px;
}


/* ========== 3) TYPOGRAPHIES & UTILITAIRES ========== */
.register-page h1,
.register-page .section-title{ font-family:'Poppins',sans-serif; color:#1F2937; }
.register-page h1{ font-weight:700; margin:16px 0 12px; }

.register-page p,
.register-page label,
.register-page input,
.register-page select,
.register-page button{ font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#111827; }

.register-page .req{ color:#DC2626; }
.register-page .help{ color:#6B7280; font-size:.9rem; }
.register-page .muted{ color:#6B7280; }

/* erreurs globales */
.form-errors{
  background:#FEE2E2; border:1px solid #FECACA; color:#B91C1C;
  border-radius:8px; padding:12px; margin:0 0 16px;
}
.form-errors ul{ margin:0; padding-left:18px; }


/* ========== 4) FORMULAIRE : grilles, labels + astérisques ========== */
.register-form{ display:flex; flex-direction:column; gap:14px; }

/* Grilles */
.register-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.register-form .form-row-3{ display:grid; grid-template-columns:120px 1fr 2fr; gap:14px; }

/* Label + astérisque sur une même ligne */
.label-head{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; color:#1F2937;
}

/* Label conteneur */
.register-form label{
  display:flex; flex-direction:column; gap:6px; font-weight:400;
}


/* ========== 5) CHAMPS : inputs / selects / textarea / focus / erreurs ========== */
.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"],
.register-form input[type="date"],
.register-form input[type="number"],
.register-form input[type="tel"],
.register-form select,
.register-form textarea{
  height:var(--control-h);
  padding:0 12px;
  border:1px solid #D1D5DB;
  border-radius:8px;
  font-size:.95rem;
  background:#fff;
}

.register-form textarea{ min-height:110px; height:auto; padding:10px 12px; }

.register-form input:focus,
.register-form select:focus,
.register-form textarea:focus{
  outline:none; border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* champ en erreur (si tu ajoutes .field-error) */
.register-form .field-error{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.15) !important;
  animation: reg-input-shake .7s ease;
}
@keyframes reg-input-shake{
  0%,100%{ transform:translateX(0); }
  20%,60%{ transform:translateX(-5px); }
  40%,80%{ transform:translateX(5px); }
}


/* ========== 6) SPÉCIFIQUES : avatar + cases à cocher ========== */
/* Avatar carré cliquable */
.avatar-field{ display:flex; flex-direction:column; gap:6px; }
.avatar-box{
  width:120px; height:120px;
  border:1px dashed #D1D5DB; border-radius:12px;
  background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; transition:border-color .2s, background .2s;
}
.avatar-box:hover{ border-color:#cfd6df; background:#F9FAFB; }
.avatar-plus{ font-size:24px; line-height:1; color:#6B7280; }
.avatar-text{ font-size:12px; color:#6B7280; }

/* Cases : empilées verticalement, texte à droite de la case */
.checks-row{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
.check-inline{
  display:inline-flex; align-items:center; gap:8px; font-size:.95rem; cursor:pointer;
}
.check-inline input[type="checkbox"]{
  margin:0; accent-color:#2aaaff;
}


/* ========== 7) ACTIONS (boutons) ========== */
.form-actions{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }

.btn-gradient{
  background:linear-gradient(90deg,#2aaaff,#554dff);
  color:#fff !important;             /* texte blanc */
  border:none; height:var(--control-h); padding:0 16px;
  border-radius:8px; font-family:'Poppins',sans-serif; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:filter .2s, transform .05s;
}
.btn-gradient:hover{ filter:brightness(1.03); }
.btn-gradient:active{ transform:translateY(1px); }

.btn-ghost{
  display:inline-block; height:var(--control-h); line-height:var(--control-h);
  padding:0 14px; border:1px solid #D1D5DB; border-radius:8px;
  color:#111827; font-family:'Poppins',sans-serif; font-weight:500; text-decoration:none;
}


/* ========== 8) SECTIONS (titres + séparateurs) ========== */
.section-title{
  font-weight:700; font-size:1.1rem; margin:6px 0 12px;
}
.section-sep{
  border:0; border-top:1px solid #E5E7EB; margin:16px 0 18px;
}


/* ========== 9) RESPONSIVE ========== */
@media (max-width: 900px){
  .register-form .form-row{ grid-template-columns:1fr; }
  .register-form .form-row-3{ grid-template-columns:1fr; }
  .form-actions{ flex-direction:column; align-items:stretch; }
  .btn-ghost{ text-align:center; }
}

/* ===== Correctifs finaux : cases à cocher + avatar preview ===== */

/* Checkboxes : empilées, libellé à droite */
.register-page .checks-row{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.register-page .check-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:.95rem;
}
.register-page .check-inline input[type="checkbox"]{
  margin:0;
  accent-color:#2aaaff;
}

/* Avatar : quand une image est chargée, on masque l’overlay + */
.register-page .avatar-box.has-image .avatar-plus,
.register-page .avatar-box.has-image .avatar-text{
  display:none;
}

/* ============================
   Uniformisation typographies
   ============================ */

/* Texte d’aide sous la photo de profil */
.register-page .avatar-help{
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #6B7280;               /* gris doux, cohérent avec le thème */
  margin-top: 8px;
}

/* Boîte d’erreurs en haut du formulaire */
.register-page .form-errors{
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #991B1B;               /* texte rouge lisible */
  background: #FEE2E2;          /* fond rouge très clair */
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.register-page .form-errors strong{
  display: block;
  font-family: 'Poppins', sans-serif; /* titre en Poppins */
  font-weight: 700;
  margin-bottom: 6px;
  color: #991B1B;
}

.register-page .form-errors ul{
  margin: 8px 0 0 18px;         /* liste à puces propre */
  padding: 0;
}
.register-page .form-errors li{
  margin: 4px 0;
}

/* =========================
   Avatar : libellé + aide
   ========================= */

/* "Photo de profil" – mêmes specs que tes autres labels */
.register-page .avatar-field .label-head{
  display: block;
  margin-bottom: 8px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #111827;
}

/* Texte d’aide sous la zone d’upload */
.register-page .avatar-field .help{
  display: block;
  margin-top: 8px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 0.9rem;     /* identique à tes hints */
  line-height: 1.5;
  color: #6B7280;        /* gris doux, cohérent avec le reste */
}

/* ==== Rôle (radio) ==== */
.radio-row{ display:flex; flex-direction:column; gap:8px; }
.radio-inline-wrap{ display:flex; gap:14px; }
.radio-inline{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.radio-inline input[type="radio"]{ margin:0; }

/* Select ville désactivé */
#pp_ville:disabled{
  background: #f9fafb;
  color: #6B7280;
}

/* ==========================================================================
   10) RESPONSIVE — Ajouts mobile-first (inscription.css)
   ========================================================================== */

/* 🔹 Ultra-petits téléphones (<= 360px) */
@media (max-width: 359.98px){
  :root{ --control-h: 40px; }
  .register-top .container,
  .register-page .container{ padding-left: 14px !important; padding-right: 14px !important; }

  .register-breadcrumb{ font-size: .9rem; }
  .register-page h1{ margin: 12px 0 8px; }

  .register-page .card{ padding: 16px; border-radius: 8px; }

  .register-form .form-row,
  .register-form .form-row-3{ grid-template-columns: 1fr; gap: 12px; }

  .form-actions{ flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-gradient, .btn-ghost{ width: 100%; text-align: center; }

  /* Radios & checks plus confort */
  .radio-inline-wrap{ flex-direction: column; gap: 10px; }
  .radio-inline{ font-size: .95rem; }
}

/* 🔹 Petits téléphones (<= 480px) */
@media (max-width: 480px){
  /* Bande supérieure : on stack breadcrumb + recherche s’il y en a */
  .register-top .container{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Grilles en 1 colonne */
  .register-form .form-row{ grid-template-columns: 1fr; }
  .register-form .form-row-3{ grid-template-columns: 1fr; }

  /* Avatar centré */
  .avatar-field{ align-items: flex-start; }
  .avatar-box{ width: 112px; height: 112px; }

  /* Actions en pile */
  .form-actions{ flex-direction: column; align-items: stretch; }
  .btn-gradient, .btn-ghost{ width: 100%; text-align: center; }

  /* Radios wrap proprement */
  .radio-inline-wrap{ flex-wrap: wrap; row-gap: 8px; column-gap: 12px; }
  .radio-inline{ min-width: 44%; } /* 2 par rang si possible */
}

/* 🔹 Téléphones “moyens” (>= 390px) */
@media (min-width: 390px){
  .register-top .container{ padding-left: 20px !important; padding-right: 20px !important; }
}

/* 🔹 À partir de 640px (sm) */
@media (min-width: 640px){
  .register-top .container{ padding: 20px 24px !important; }
  .register-page .container{ padding: 20px 24px 60px; }
  .register-page .card{ padding: 20px; }
}

/* 🔹 Tablettes (>= 768px) */
@media (min-width: 768px){
  /* Remet 2 colonnes pour les lignes standard */
  .register-form .form-row{ grid-template-columns: 1fr 1fr; }

  /* Ligne 3 zones : un peu plus large pour le label gauche */
  .register-form .form-row-3{ grid-template-columns: 140px 1fr 2fr; }

  /* Radios sur une seule ligne quand il y a la place */
  .radio-inline-wrap{ display: flex; flex-wrap: wrap; gap: 14px; }
  .radio-inline{ min-width: auto; }
}

/* 🔹 Petits laptops (>= 1024px) */
@media (min-width: 1024px){
  .register-page .container,
  .register-top .container{ max-width: 960px; }

  /* Ligne 3 zones plus respirante */
  .register-form .form-row-3{ grid-template-columns: 160px 1fr 2fr; }
}

/* 🔹 ≥ 1280px */
@media (min-width: 1280px){
  .register-page .container,
  .register-top .container{ max-width: 1040px; }
}

/* 🔹 Déjà présent (<= 900px) : on complète sans casser
   - Si ton bloc @media (max-width: 900px) est plus haut, celui-ci s’additionne.
*/

/* 🔹 Écrans à faible hauteur (ex: landscape mobile, petits laptops) */
@media (max-height: 700px){
  .register-page .container{ padding-bottom: 44px; }
  .register-page .card{ margin-top: 12px; }
}

/* 🔹 Landscape sur téléphones */
@media (orientation: landscape) and (max-height: 480px){
  .register-top .container{ padding-top: 12px !important; padding-bottom: 12px !important; }
  .register-page .container{ padding-bottom: 36px; }
}

/* 🔹 Safe areas (iPhone notch, etc.) */
@supports (padding: max(0px)){
  .pp-header{ top: max(0px, env(safe-area-inset-top)); }
  .register-top .container{
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
}

/* 🔹 Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  * { scroll-behavior: auto; }
  .register-form .field-error{ animation: none; }
}