/* ======================================================
   Page Inscription (Catalogue)
   File: assets/css/page-inscription.css
   Dépend de variables.css (tokens)
   ====================================================== */

.catalog-register{
  font-family: var(--font-sans);
  color: var(--color-text);
  background: transparent;
}

.catalog-register__wrap{
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-10) var(--gutter) var(--space-12);
}

@media (max-width: 768px){
  .catalog-register__wrap{
    padding: var(--space-8) var(--gutter) var(--space-10);
  }
}

/* =========================
   Header
   ========================= */

.catalog-register__head{
  margin-bottom: var(--space-6);
}

.catalog-register__title{
  margin: 0;
  font-size: var(--fs-5);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.catalog-register__subtitle{
  margin: var(--space-2) 0 0;
  font-size: var(--fs-2);
  line-height: var(--lh-relaxed);
  color: var(--color-muted);
}

/* =========================
   Card
   ========================= */

.catalog-card{
  background: var(--color-surface);
  border: var(--border-1);
  border-color: var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

@media (max-width: 560px){
  .catalog-card{ padding: var(--space-5); }
}

/* =========================
   Alerts
   ========================= */

.catalog-alert{
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  border: var(--border-1);
  box-shadow: var(--shadow-xs);
  margin: 0 0 var(--space-5);
}

.catalog-alert strong{
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

.catalog-alert__muted{
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--fs-1);
}

.catalog-alert__list{
  margin: var(--space-2) 0 0;
  padding-left: 18px;
  color: var(--color-text);
}

.catalog-alert__help{
  margin: var(--space-3) 0 0;
}

.catalog-alert--success{
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-line));
}

.catalog-alert--error{
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-line));
}

.catalog-link{
  color: var(--color-link);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}

.catalog-link:hover{
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* =========================
   Form
   ========================= */

.catalog-form{
  display: grid;
  gap: var(--space-5);
}

.catalog-hp{
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Fieldset */
.catalog-fieldset{
  border: 0;
  padding: 0;
  margin: 0;
}

.catalog-legend{
  font-weight: var(--fw-bold);
  font-size: var(--fs-2);
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

/* Choice cards */
.catalog-choice{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 720px){
  .catalog-choice{ grid-template-columns: 1fr; }
}

.catalog-choice__item{
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-1);
  border-color: var(--color-line);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.catalog-choice__item:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-ink);
}

.catalog-choice__item input[type="radio"]{
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

.catalog-choice__title{
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  font-size: var(--fs-2);
}

.catalog-choice__desc{
  color: var(--color-muted);
  font-size: var(--fs-1);
  line-height: var(--lh-relaxed);
}

/* Fields grid */
.catalog-form__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 720px){
  .catalog-form__grid{ grid-template-columns: 1fr; }
}

.catalog-field{
  display: grid;
  gap: var(--space-2);
}

.catalog-label{
  font-weight: var(--fw-semibold);
  font-size: var(--fs-1);
  color: var(--color-ink);
}

.catalog-input,
.catalog-textarea{
  width: 100%;
  border-radius: var(--radius-md);
  border: var(--border-1);
  border-color: var(--color-line);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-2);
  outline: none;
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.catalog-input{
  height: var(--input-height);
  padding: var(--input-pad-y) var(--input-pad-x);
}

.catalog-textarea{
  padding: var(--input-pad-y) var(--input-pad-x);
  line-height: var(--lh-relaxed);
  min-height: 92px;
  resize: vertical;
}

.catalog-input:focus,
.catalog-textarea:focus{
  border-color: var(--color-border-gold);
  box-shadow: var(--focus-ring);
}

/* =========================
   Actions
   ========================= */

.catalog-form__actions{
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.catalog-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-md);
  border: var(--border-1);
  text-decoration: none;
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.catalog-btn:active{
  transform: translateY(1px);
}

.catalog-btn--primary{
  background: var(--color-ink);
  color: var(--color-white);
  border-color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.catalog-btn--primary:hover{
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-ink) 85%, var(--color-gold));
}

.catalog-form__hint{
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-1);
  line-height: var(--lh-relaxed);
}



.catalog-hp-wrap{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}