/* ——— Page de rédaction d'une demande ——————————————————————— */

/* En-tête spécifique à la demande (entre site header et layout) */
.demande-header {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-border);
  padding: var(--space-8);
}

.demande-header__wrapper {
  align-items: center;
  background-color: var(--color-primary-100);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-12);
  justify-content: space-between;
  padding: var(--space-8);

  @media (width <= 640px) {
    align-items: flex-start;
    flex-direction: column;
  }
}

.demande-header__info {
  align-items: center;
  display: flex;
  gap: var(--space-8);
}

.demande-header__icon {
  align-items: center;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
  display: flex;
  flex-shrink: 0;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.demande-header__title {
  font-family: var(--ff-headings);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06rem;
  margin: 0;
  text-transform: uppercase;
}

.demande-header__change {
  align-items: center;
  background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 40%, transparent);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-family: inherit;
  font-size: var(--fs-small);
  gap: var(--space-8);
  padding: var(--space-4) var(--space-8);
  transition-property: background-color, border-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  white-space: nowrap;

  &:hover {
    background-color: color-mix(in srgb, var(--color-secondary) 40%, transparent);
    border-color: color-mix(in srgb, var(--color-secondary) 60%, transparent);
  }
}

/* ——— Sidebar : fond visible sur mobile (pas de barre fixe en bas) ——— */

.nouvelle-demande .layout-2-col .sidebar {
  background-color: var(--color-clear-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-border);

  @media (width <= 720px) {
    margin-block-end: var(--space-8);
    padding-block-end: var(--space-20);
  }
}

/* ——— Main transparent : chaque section a son propre fond ——— */

.nouvelle-demande .layout-2-col .main-content {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: 0;
}

/* ——— Auteur de la demande ——— */

.form-author {
  margin-block-end: var(--space-16);
  padding: var(--space-16) var(--space-16) var(--space-16);
}

.form-author__label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  margin: 0;
}

.form-author__select {
  appearance: none;
  background-color: var(--color-clear-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230a1952' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right var(--space-12) center;
  background-repeat: no-repeat;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--ff-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.035rem;
  margin-block-start: var(--space-4);
  padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);
  text-transform: uppercase;
  width: 100%;

  &:focus {
    border-color: var(--color-secondary);
    outline: 2px solid color-mix(in srgb, var(--color-secondary) 20%, transparent);
    outline-offset: 0;
  }
}

/* Bouton crayon inline */
.btn-edit-inline {
  align-items: center;
  background: none;
  border: none;
  color: var(--color-meta-text);
  cursor: pointer;
  display: inline-flex;
  padding: var(--space-4);
  transition: color 150ms ease-out;

  &:hover {
    color: var(--color-primary);
  }
}

/* ——— Stepper de navigation formulaire ——— */

.form-stepper {
  padding-inline: var(--space-8);
}

.form-stepper__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-stepper__step {
  position: relative;

  /* Connecteur vertical reliant les cercles extérieurs */
  &:not(:last-child)::after {
    background-color: var(--color-body-text);
    bottom: calc(-1 * (var(--space-4) + var(--space-12) + 1px));
    content: '';
    left: calc(var(--space-12) + 0.5625rem);
    position: absolute;
    top: calc(var(--space-12) + 1.125rem + 1px);
    width: 1px;
  }
}

.form-stepper__link {
  align-items: flex-start;
  border-radius: var(--radius-md);
  color: inherit;
  display: flex;
  gap: var(--space-12);
  padding: var(--space-12);
  text-decoration: none;
  transition: background-color 150ms ease-out;

  &:hover .form-stepper__title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
}

/* Cercle extérieur + point rouge centré */
.form-stepper__dot {
  border: 1.5px solid currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
  height: 1.125rem;
  margin-block-start: 0.0625rem;
  position: relative;
  width: 1.125rem;

  &::before {
    background-color: var(--color-accent);
    border-radius: 50%;
    content: '';
    height: 0.5rem;
    inset: 0;
    margin: auto;
    position: absolute;
    width: 0.5rem;
  }
}

.form-stepper__content {
  display: block;
  min-width: 0;
}

.form-stepper__title {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
}

.form-stepper__meta {
  color: var(--color-meta-text);
  display: block;
  font-size: var(--fs-small);
  line-height: 1.45;
  margin-block-start: var(--space-4);
}

/* État actif : fond highlight sur la carte */
.form-stepper__step.is-active .form-stepper__link {
  background-color: var(--color-surface-lighter);
  mix-blend-mode: multiply;
}

.form-stepper__step.is-active .form-stepper__title {
  color: var(--color-accent);
}

/* État complété : cercle entièrement rempli en rouge */
.form-stepper__step.is-completed .form-stepper__dot {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.form-stepper__step.is-completed .form-stepper__dot::before {
  display: none;
}

/* ——— Note en bas de sidebar ——— */

.form-notice {
  background-color: var(--color-surface-lighter);
  border-radius: var(--radius-md);
  margin-block-start: var(--space-4);
  margin-inline: var(--space-16);
  padding: var(--space-12);

  p {
    font-size: var(--fs-small);
    line-height: 1.5;
    margin: 0;
  }
}

/* ——— Section de formulaire (carte blanche) ——— */

.demande-section + .demande-section {
  margin-block-start: var(--space-8);
}

.demande-section {
  background-color: var(--color-clear-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-border);

  fieldset {
    border: none;
    margin: 0;
    padding: 0;
  }

  /* Focus bleu sur tous les champs du formulaire de demande */
  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--color-secondary);
    outline: 2px solid color-mix(in srgb, var(--color-secondary) 20%, transparent);
    outline-offset: 0;
  }

  legend:not(.screen-readers-only) {
    float: left; /* force le legend à occuper la pleine largeur */
    font-size: var(--fs-small);
    font-weight: 600;
    margin-block-end: var(--space-8);
    padding: 0;
    width: 100%;

    + * {
      clear: left;
    }
  }
}

.demande-section .search-mode-toggle {
  margin-inline: 0;
  padding-inline: 0;
}

.demande-section .section-title {
  /*margin-block: 0 var(--space-20);*/
  padding-inline: 0;
}

/* Texte indicatif dans les labels (hints, optionnel…) */
.form-label-hint {
  color: var(--color-meta-text);
  font-weight: 400;
}

/* ——— Grille des matières ——— */

.matieres-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;

  @media (width > 560px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width > 960px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.matieres-grid.card-container-bg,
.form-fields.card-container-bg {
  border-radius: var(--radius-md);
  margin: 0 var(--space-8) var(--space-8);
  padding-block: var(--space-12);
}

.matiere-card {
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-border);
  cursor: pointer;
  display: flex;
  gap: var(--space-12);
  justify-content: space-between;
  padding: var(--space-12);
  transition-property: background-color, border-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  
  &:hover {
    box-shadow: var(--shadow-border-hover);
    background-color: transparent;
  }
  
  &:has(:checked) {
    background-color: var(--color-primary-100);
    box-shadow: var(--shadow-border-checked);
  }
}

.matiere-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.matiere-card__name {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
}

.matiere-card__desc {
  color: var(--color-meta-text);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.matiere-card input[type="checkbox"] {
  align-self: start;
  flex-shrink: 0;
  margin-block-start: 0.1em;
}

/* ——— Questions ——— */

.question-field__header {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.btn-remove-question {
  align-items: center;
  background: none;
  border: 1px solid var(--color-border-light);
  border-radius: 50%;
  color: var(--color-meta-text);
  cursor: pointer;
  display: flex;
  height: 1.5rem;
  justify-content: center;
  padding: 0;
  transition-property: color, border-color, background-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  width: 1.5rem;

  &:hover {
    background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

/* Compteur de caractères */
.char-counter {
  color: var(--color-meta-text);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  text-align: right;
}


/* ——— Pièces jointes : radio pills ——— */

.radio-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.radio-pill {
  cursor: pointer;

  input[type="radio"] {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  span {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    display: block;
    font-size: var(--fs-small);
    padding: var(--space-8) var(--space-16);
    transition-property: background-color, border-color, font-weight;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
  }

  &:has(:checked) span {
    background-color: var(--color-primary-100);
    border-color: var(--color-secondary);
    font-weight: 600;
  }

  &:has(:focus-visible) span {
    outline: 2px solid color-mix(in srgb, var(--color-secondary) 40%, transparent);
    outline-offset: 2px;
  }
}

/* ——— Préférences téléphone ——— */

.pref-row {
  align-items: start;
}

.phone-inputs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-block-start: var(--space-8);

  .btn-add-criterion {
    margin-block-start: 0;
  }
}

.value-pill {
  align-items: center;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  display: inline-flex;
  font-size: var(--fs-small);
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
}

.form-label + .value-pill {
  margin-block-start: var(--space-8);
}

.phone-input-wrapper {
  align-items: center;
  display: inline-flex;
  gap: var(--space-4);
}

.phone-input {
  appearance: none;
  background-color: var(--color-clear-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font-family: var(--ff-primary);
  font-size: var(--fs-small);
  padding: var(--space-8) var(--space-12);

  &:focus {
    border-color: var(--color-secondary);
    outline: 2px solid color-mix(in srgb, var(--color-secondary) 20%, transparent);
    outline-offset: 0;
  }
}

.horaire-prefs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  margin-block-start: var(--space-8);
}

.radio-inline {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: var(--fs-small);
  gap: var(--space-8);
}

.horaire-prefs input[type="time"],
.horaire-prefs input[type="text"] {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-small);
  padding: var(--space-4) var(--space-8);
  width: 7rem;

  &:focus {
    border-color: var(--color-secondary);
    outline: 2px solid color-mix(in srgb, var(--color-secondary) 20%, transparent);
    outline-offset: 0;
  }
}

/* ——— Bouton de soumission ——— */

.demande-section--submit {
  display: flex;
  place-content: center;
}

/* Message d'erreur global affiché au-dessus du bouton d'envoi */
.demande-form-error {
  background-color: color-mix(in srgb, var(--color-error, #c0392b) 8%, transparent);
  border: 1px solid var(--color-error, #c0392b);
  border-radius: var(--radius-sm);
  color: var(--color-error, #c0392b);
  font-size: var(--fs-body);
  font-weight: 600;
  margin: 0 0 var(--space-12);
  padding: var(--space-12);
  text-align: center;
}