/* ============================================================================
   Glide Guide — Brief voyage
   Feuille chargée uniquement sur /brief. Elle habille les crochets historiques
   du moteur d'étapes (public/js/brief-step-gate.js, brief-minimum-validation.js)
   avec les tokens du design system public (public/css/public/public.css).
   ========================================================================== */

/* ─── Conteneur & panneaux d'étape ───────────────────────────────────────── */

.gg-brief {
  display: grid;
  gap: var(--gg-sp-5);
  /* Le brief respire plus large que le contenu éditorial courant, sans jamais
     dépasser une longueur de ligne confortable. */
  max-width: 920px;
  margin-inline: auto;
  /* Réserve la place de la barre d'actions collante : aucun champ ne reste
     masqué en bas de page. */
  padding-bottom: var(--gg-sp-8);
}

.bloc.brief-step {
  display: grid;
  gap: var(--gg-sp-5);
  margin: 0;
  padding: var(--gg-sp-6);
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-r-xl);
  background: var(--gg-surface);
  box-shadow: var(--gg-shadow-sm);
}

/* Sans JavaScript toutes les étapes restent visibles et soumettables. */
.brief-form--stepped .brief-step[hidden] { display: none; }

.brief-step.is-active > .field,
.brief-step.is-active > .two-col { margin: 0; }

.bloc-header {
  display: grid;
  gap: var(--gg-sp-2);
  padding-bottom: var(--gg-sp-4);
  border-bottom: 1px solid var(--gg-border);
}

.bloc-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--gg-r-pill);
  background: var(--gg-gold-soft);
  border: 1px solid var(--gg-gold-line);
  color: var(--gg-accent);
  font-weight: 800;
  font-size: var(--gg-fs-xs);
}

.bloc-subtitle {
  margin-left: var(--gg-sp-2);
  color: var(--gg-muted);
  font-size: var(--gg-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bloc-title {
  font-family: var(--gg-font-head);
  font-size: var(--gg-fs-lg);
  font-weight: 700;
  color: var(--gg-brand);
}

/* ─── Champs ─────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--gg-sp-2); }

.field > label,
.field > .gg-consent {
  font-size: var(--gg-fs-sm);
  font-weight: 700;
  color: var(--gg-text);
}

.field .hint {
  display: inline-block;
  margin-left: var(--gg-sp-2);
  color: var(--gg-muted);
  font-size: var(--gg-fs-xs);
  font-weight: 500;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--gg-sp-3) var(--gg-sp-4);
  border: 1px solid var(--gg-border-strong);
  border-radius: var(--gg-r-md);
  background: var(--gg-surface);
  color: var(--gg-text);
  font-family: var(--gg-font-body);
  font-size: var(--gg-fs-base);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--gg-muted); opacity: 0.85; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--gg-text-soft); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--gg-focus);
  box-shadow: var(--gg-focus-ring);
}

.field textarea { min-height: 112px; resize: vertical; line-height: var(--gg-lh-base); }

.field select {
  appearance: none;
  padding-right: var(--gg-sp-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 24px) 22px, calc(100% - 18px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Les sélecteurs de date natifs restent confortables au tactile. */
.field input[type="date"] { min-height: 48px; }
.field input[type="number"] { max-width: 100%; }

.two-col { display: grid; gap: var(--gg-sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.brief-logistics-stack { display: flex; flex-direction: column; gap: var(--gg-sp-4); }

/* ─── États de validation ────────────────────────────────────────────────── */

.field-error {
  display: none;
  color: var(--gg-danger);
  font-size: var(--gg-fs-xs);
  font-weight: 700;
  line-height: var(--gg-lh-snug);
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea,
.field input.field-invalid,
.field select.field-invalid,
.field textarea.field-invalid {
  border-color: var(--gg-danger);
  background: var(--gg-danger-soft);
}

.field--required > label::after { content: ''; }

.required-badge {
  display: inline-block;
  margin-left: var(--gg-sp-2);
  padding: 1px var(--gg-sp-2);
  border-radius: var(--gg-r-pill);
  background: var(--gg-gold-soft);
  color: var(--gg-accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.field-help {
  color: var(--gg-muted);
  font-size: var(--gg-fs-xs);
  line-height: var(--gg-lh-snug);
}

.field-help--minor-warning {
  padding: var(--gg-sp-2) var(--gg-sp-3);
  border-radius: var(--gg-r-sm);
  background: var(--gg-warning-soft);
  border: 1px solid color-mix(in srgb, var(--gg-warning) 38%, transparent);
  color: var(--gg-warning);
  font-weight: 600;
}

.field-help--solo-rule {
  padding: var(--gg-sp-2) var(--gg-sp-3);
  border-radius: var(--gg-r-sm);
  background: var(--gg-info-soft);
  color: var(--gg-info);
  font-weight: 600;
}

.brief-step-error-summary {
  display: grid;
  gap: var(--gg-sp-2);
  padding: var(--gg-sp-4);
  border-radius: var(--gg-r-md);
  background: var(--gg-danger-soft);
  border: 1px solid color-mix(in srgb, var(--gg-danger) 42%, transparent);
  color: var(--gg-danger);
  font-size: var(--gg-fs-xs);
  font-weight: 600;
}

.brief-step-error-summary ul { padding-left: var(--gg-sp-5); }
.brief-step-error-summary li { list-style: disc; }
.brief-step-error-summary[hidden] { display: none; }

.form-error-banner { margin-bottom: var(--gg-sp-4); }

/* ─── Choix (radios / cases) rendus en tags tactiles ─────────────────────── */

.radio-group,
.checkbox-group,
.choice-tags {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: var(--gg-sp-2);
}

.radio-group > label,
.checkbox-group > label,
.choice-tag {
  display: inline-flex !important;
  align-items: center;
  gap: var(--gg-sp-2);
  width: auto !important;
  min-height: 44px;
  margin: 0;
  padding: var(--gg-sp-2) var(--gg-sp-4);
  border: 1px solid var(--gg-border-strong);
  border-radius: var(--gg-r-pill);
  background: var(--gg-surface);
  color: var(--gg-text-soft);
  font-size: var(--gg-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.radio-group > label:hover,
.checkbox-group > label:hover,
.choice-tag:hover { border-color: var(--gg-text-soft); background: var(--gg-surface-2); }

.radio-group > label input,
.checkbox-group > label input,
.choice-tag input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.radio-group > label:has(input:checked),
.checkbox-group > label:has(input:checked),
.choice-tag:has(input:checked) {
  background: var(--gg-gold-soft);
  border-color: var(--gg-gold);
  color: var(--gg-text);
}

.radio-group > label:has(input:focus-visible),
.checkbox-group > label:has(input:focus-visible),
.choice-tag:has(input:focus-visible) { outline: 3px solid var(--gg-focus); outline-offset: 2px; }

.choice-tag--disabled,
.choice-tag--disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--gg-surface-2);
  border-color: var(--gg-border);
}

/* ─── Champs conditionnels de préparation ────────────────────────────────── */

.prep-detail { display: none; margin-top: var(--gg-sp-3); }
.prep-detail[style*="block"] { animation: gg-reveal 0.24s ease; }
.prep-detail textarea { width: 100%; }

/* ─── Compteur de voyageurs ──────────────────────────────────────────────── */

.field--travellers > label:first-of-type { margin-bottom: var(--gg-sp-1); }

.traveler-counter {
  display: grid;
  gap: var(--gg-sp-4);
  grid-template-columns: minmax(120px, 170px) 1fr;
  align-items: start;
  padding: var(--gg-sp-4);
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-r-lg);
  background: var(--gg-surface-2);
}

.traveler-field { display: grid; gap: var(--gg-sp-1); }
.traveler-field label,
.traveler-age-field label {
  font-size: var(--gg-fs-xs);
  font-weight: 700;
  color: var(--gg-muted);
}

.traveler-ages-panel { display: flex; flex-wrap: wrap; gap: var(--gg-sp-3); align-items: flex-end; }
.traveler-ages-list { display: flex; flex-wrap: wrap; gap: var(--gg-sp-3); }
.traveler-age-field { display: grid; gap: var(--gg-sp-1); width: 100px; min-height: 44px; }

.traveler-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--gg-r-pill);
  border: 1px dashed var(--gg-border-strong);
  background: var(--gg-surface);
  color: var(--gg-accent);
  font-size: 1.25rem;
  font-weight: 700;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.traveler-add-btn:hover { border-color: var(--gg-gold); background: var(--gg-gold-soft); }

/* ─── Consentement & notices ─────────────────────────────────────────────── */

.cgv-box { cursor: pointer; }
.cgv-box a { color: var(--gg-accent); text-decoration: underline; text-underline-offset: 0.2em; }

.notice { margin-top: var(--gg-sp-3); }

.submit-section { margin: 0; }

/* ─── Barre d'actions d'étape ────────────────────────────────────────────── */

.brief-step-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gg-sp-3);
  padding: var(--gg-sp-4) var(--gg-sp-5);
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-r-lg);
  background: var(--gg-surface);
  box-shadow: var(--gg-shadow-lg);
}

.brief-step-position {
  margin-inline: auto;
  color: var(--gg-muted);
  font-size: var(--gg-fs-xs);
  font-weight: 700;
}

.brief-step-btn { min-width: 132px; }

.brief-step-btn:disabled,
.brief-step-btn[aria-disabled="true"] { opacity: 0.55; }

/* Un bouton « bloqué » reste cliquable : il révèle les erreurs de l'étape
   au lieu d'échouer silencieusement (cf. brief-step-gate.js). */
.brief-step-btn--primary[aria-disabled="true"],
#submitBtn[aria-disabled="true"] { cursor: pointer; }

.brief-step-actions [hidden] { display: none !important; }

/* ─── Brouillon local ────────────────────────────────────────────────────── */

.brief-draft-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gg-sp-3);
  margin-bottom: var(--gg-sp-4);
  padding: var(--gg-sp-3) var(--gg-sp-4);
  border-radius: var(--gg-r-md);
  background: var(--gg-info-soft);
  border: 1px solid color-mix(in srgb, var(--gg-info) 32%, transparent);
  color: var(--gg-info);
  font-size: var(--gg-fs-xs);
  font-weight: 700;
}

.brief-draft-notice button {
  min-height: 36px;
  padding: 0 var(--gg-sp-3);
  border-radius: var(--gg-r-pill);
  border: 1px solid currentColor;
  color: inherit;
  font-size: var(--gg-fs-xs);
  font-weight: 700;
}

.brief-draft-notice button:hover { background: color-mix(in srgb, var(--gg-info) 14%, transparent); }

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .brief-step-actions {
    position: sticky;
    bottom: var(--gg-sp-3);
    z-index: 15;
  }
}

@media (max-width: 768px) {
  .bloc.brief-step { padding: var(--gg-sp-5) var(--gg-sp-4); }
  .traveler-counter { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .two-col { grid-template-columns: 1fr; }
  .traveler-age-field { width: calc(50% - var(--gg-sp-2)); }

  .brief-step-actions {
    position: static;
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .brief-step-actions .gg-btn { width: 100%; }
  .brief-step-position { margin: 0 0 var(--gg-sp-2); text-align: center; }
}

/* ─── Entrée du brief : choix libre / guidé ──────────────────────────────── */

/* Sans JS, on masque l'écran de choix et on présente les deux voies l'une
   sous l'autre, séparées ; avec JS, une seule voie est visible à la fois. */
.gg-entry-choice[hidden],
.gg-entry-panel[hidden] { display: none; }

/* Sans JS, séparer visuellement les deux voies affichées à la suite. */
#briefEntry:not([data-js]) #entryFreeform { margin-bottom: var(--gg-sp-7); }
#briefEntry:not([data-js]) #entryFreeform::after {
  content: '';
  display: block;
  margin-top: var(--gg-sp-7);
  border-top: 1px solid var(--gg-border);
}

.gg-entry-choice { display: grid; gap: var(--gg-sp-6); }

.gg-entry-choice__grid {
  display: grid;
  gap: var(--gg-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.gg-entry-card {
  display: grid;
  gap: var(--gg-sp-2);
  padding: var(--gg-sp-6);
  text-align: left;
  border: 1px solid var(--gg-border-strong);
  border-radius: var(--gg-r-xl);
  background: var(--gg-surface);
  box-shadow: var(--gg-shadow-sm);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.gg-entry-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--gg-shadow-md);
  border-color: var(--gg-gold);
}

.gg-entry-card:focus-visible { outline: 3px solid var(--gg-focus); outline-offset: 3px; }

.gg-entry-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--gg-r-md);
  background: var(--gg-gold-soft);
  border: 1px solid var(--gg-gold-line);
  font-size: 1.5rem;
}

.gg-entry-card__title {
  font-family: var(--gg-font-head);
  font-size: var(--gg-fs-lg);
  font-weight: 700;
  color: var(--gg-brand);
}

.gg-entry-card__text { color: var(--gg-text-soft); font-size: var(--gg-fs-sm); line-height: var(--gg-lh-snug); }

.gg-entry-card__go {
  margin-top: var(--gg-sp-2);
  color: var(--gg-accent);
  font-size: var(--gg-fs-sm);
  font-weight: 700;
}

.gg-entry-panel { display: grid; gap: var(--gg-sp-5); }

.gg-entry-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--gg-sp-2);
  min-height: 44px;
  padding: 0 var(--gg-sp-4) 0 var(--gg-sp-3);
  border-radius: var(--gg-r-pill);
  border: 1px solid var(--gg-border);
  background: var(--gg-surface);
  color: var(--gg-text-soft);
  font-size: var(--gg-fs-sm);
  font-weight: 700;
  cursor: pointer;
}

.gg-entry-back:hover { background: var(--gg-surface-2); color: var(--gg-text); }
.gg-entry-back[hidden] { display: none; }

.gg-textarea--tall { min-height: 180px; }