/* ==========================================================================
   Formulaires de saisie — grille, date, accordéon (#1719)
   --------------------------------------------------------------------------
   Grille : libellés au-dessus, colonnes alignées, une section par carte.

     <div class="ds-form-grid ds-form-grid--2">
       <div class="ds-field">
         <label class="ds-field__label" for="x">Nom</label>
         <input class="ds-input" id="x">
       </div>
       <div class="ds-field ds-form-grid__large">…</div>   pleine largeur
       <div class="ds-form-grid__vide"></div>             case laissée vide
     </div>

   --2, --3, --4 : nombre de colonnes au large. La grille suit la largeur de SON conteneur et
   non celle de l'écran : la même section passe sur une colonne dans un panneau étroit.

   Date : un <input type="date"> natif. Le navigateur affiche et lit JJ/MM/AAAA en français, au
   clavier comme au calendrier ; la valeur, elle, est en AAAA-MM-JJ.

     <input type="date" class="ds-input ds-date" id="date_naissance">

   Accordéon : une seule section ouverte à la fois, sans JS — les <details> qui partagent un
   même `name` se referment les uns les autres.

     <div class="ds-accordeon">
       <details name="suivi" open><summary>Entretien</summary><div class="ds-accordeon__corps">…</div></details>
       <details name="suivi"><summary>Positionnements</summary>…</details>
     </div>
   ========================================================================== */

/* La grille se mesure à son CONTENEUR, pas à l'écran : une carte de formulaire en est un, et
   `.ds-form-grid-hote` en fait un de n'importe quel bloc. Sans hôte, la grille reste sur une colonne. */
.ds-form-grid-hote,
.ds-card__body:has(> .ds-form-grid) { container-type: inline-size; }

.ds-form-grid {
  --ds-form-grid-cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--ds-form-grid-cols), minmax(0, 1fr));
  gap: var(--ds-space-3) var(--ds-space-4);
  align-items: start;
}
.ds-form-grid > * { min-width: 0; }
.ds-form-grid > .ds-field { margin-bottom: 0; }
.ds-form-grid__large { grid-column: 1 / -1; }

@container (min-width: 440px) {
  .ds-form-grid--2, .ds-form-grid--3, .ds-form-grid--4 { --ds-form-grid-cols: 2; }
}
@container (min-width: 720px) {
  .ds-form-grid--3, .ds-form-grid--4 { --ds-form-grid-cols: 3; }
}
@container (min-width: 960px) {
  .ds-form-grid--4 { --ds-form-grid-cols: 4; }
}
/* Sur une colonne, une case vide ne sert qu'à aligner : elle disparaît. */
@container (max-width: 439px) {
  .ds-form-grid__vide { display: none; }
}

/* Un champ et son bouton d'action (« SMS », « Écrire ») sur la même ligne. */
.ds-field__ligne {
  display: flex;
  gap: var(--ds-space-2);
  align-items: center;
}
.ds-field__ligne > .ds-input { flex: 1; min-width: 0; }
.ds-field__ligne > .ds-btn { flex: none; }

/* ---------- Date ---------- */
/* #1763 — min-width : dans une colonne étroite, JJ/MM/AAAA ne doit pas être tronqué. */
.ds-date { font-variant-numeric: tabular-nums; max-width: 190px; min-width: 140px; }
.ds-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
.ds-date::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ---------- Accordéon ---------- */
.ds-accordeon {
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-bg-surface);
  overflow: hidden;
}
.ds-accordeon > details + details { border-top: 1px solid var(--ds-color-border); }
.ds-accordeon summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
  font-size: var(--ds-font-size-md);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-text);
}
.ds-accordeon summary::-webkit-details-marker { display: none; }
.ds-accordeon summary::after {
  content: "";
  flex: none;            /* #1868 — un titre long sur deux lignes écrasait le chevron */
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ds-color-text-subtle);
  border-bottom: 2px solid var(--ds-color-text-subtle);
  transform: rotate(-45deg);
  transition: transform var(--ds-transition-base, .15s);
}
.ds-accordeon details[open] > summary::after { transform: rotate(45deg); }
.ds-accordeon summary:hover { background: var(--ds-color-bg-muted); }
.ds-accordeon summary:focus-visible { outline: 2px solid var(--ds-color-border-focus); outline-offset: -2px; }
.ds-accordeon__corps { padding: 0 var(--ds-space-4) var(--ds-space-4); }

@media (prefers-reduced-motion: reduce) {
  .ds-accordeon summary::after { transition: none; }
}

/* Un sous-groupe dans une section (« Contact en cas d'urgence ») : un titre sur toute la largeur. */
.ds-form-grid__intertitre {
  margin: var(--ds-space-2) 0 calc(-1 * var(--ds-space-1));
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-text-muted);
}

/* Une valeur affichée en lecture, avec son crayon pour la modifier (« Chargé de recrutement : M. THEBAULT ✎ ») :
   à la hauteur d'un champ, pour que la grille reste alignée. */
.ds-field__valeur { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1); min-height: 30px; }
.ds-field__valeur .ds-btn--ghost { color: var(--ds-color-text-muted); }