/* Feuille unique du module Contacts (règle 17) : chargée sur toutes les pages (entrypoint de importmap.php),
   jetons du socle seulement, classes préfixées contact-.

   ── Page « Ajouter un contact » (Contacts/add.html.twig) ── */
/* Deux colonnes : la fiche, et à droite l'aide (doublons, INSEE) qui reste visible au défilement.
   Le formulaire est « transparent » (display: contents) pour que ses cartes et l'aside
   partagent la même grille ; sous 1200px, l'aide s'intercale sous la carte Identité. */
.contact-add { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px 20px; align-items: start; }
.contact-add-sheet { display: contents; }
.contact-add-sheet > *, .contact-add-aside { grid-column: 1; }
        .contact-add-aside { grid-column: 2; grid-row: 2 / span 6; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1199.98px) {
    .contact-add { grid-template-columns: minmax(0, 1fr); }
    .contact-add-aside { grid-column: 1; grid-row: auto; position: static; order: 2; }
    .contact-add-kind-section, .contact-add-identity { order: 1; }
    .contact-add-sheet > :not(.contact-add-kind-section):not(.contact-add-identity) { order: 3; }
}

/* ── Première question : entreprise ou particulier (les boutons radio du champ type) ── */
.contact-add-question { margin: 4px 0 12px; color: var(--color-ink); font-size: 16px; font-weight: 600; }
.contact-add-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Tant que le type n'est pas choisi, la fiche se limite à la question. */
.contact-add:not(.is-started) .contact-add-sheet > :not(.contact-add-kind-section),
.contact-add:not(.is-started) .contact-add-aside { display: none !important; }
body:has(.contact-add:not(.is-started)) [data-contact-add-submit] { display: none !important; }

.contact-add-subtitle { margin: 12px 0 12px; color: var(--color-muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }

.contact-add-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 16px; }
.contact-add-grid > * { grid-column: span 6; }
.contact-add-grid > .is-2 { grid-column: span 2; }
.contact-add-grid > .is-3 { grid-column: span 3; }
.contact-add-grid > .is-4 { grid-column: span 4; }
.contact-add[data-contact-type="company"] .contact-add-individual-only,
.contact-add[data-contact-type="individual"] [data-company-only] { display: none; }

.contact-add[data-contact-type="individual"] .contact-add-name-row { grid-column: span 2; }

/* ── Colonne d'aide ── */
.contact-add-panel { border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); overflow: hidden; }
.contact-add-panel-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 8px; }
.contact-add-panel-icon {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 13px;
}
.contact-add-panel.is-warning .contact-add-panel-icon { background: var(--color-warning-soft); color: var(--color-warning); }
.contact-add-panel.is-success .contact-add-panel-icon { background: var(--color-success-soft); color: var(--color-success); }
.contact-add-panel-title { margin: 0; color: var(--color-ink); font-size: 14px; font-weight: 600; }
.contact-add-panel-count { margin-left: auto; color: var(--color-muted); font-size: 12.5px; }
.contact-add-panel-text { margin: 0; padding: 0 18px 16px 56px; color: var(--color-muted); font-size: 13px; line-height: 1.5; }
.contact-add-panel-list { display: flex; flex-direction: column; padding: 0 8px 8px; }

.contact-add-hit {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 10px;
    border: 0; border-radius: 10px;
    background: transparent;
    color: var(--color-ink);
    text-align: left;
    transition: background .12s;
}
.contact-add-hit:hover, .contact-add-hit:focus-visible { background: var(--color-tile); outline: none; }
.contact-add-hit-tile {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--color-tile);
    color: var(--color-muted);
    font-size: 12.5px; font-weight: 600;
}
.contact-add-hit-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.contact-add-hit-name { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.contact-add-hit-meta { overflow: hidden; color: var(--color-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.contact-add-hit-meta strong { color: var(--color-ink-2); font-weight: 600; }
.contact-add-hit-badges { display: flex; gap: 6px; margin-top: 3px; }
.contact-add-hit-badge { padding: 1px 7px; border-radius: 6px; background: var(--color-tile); color: var(--color-muted); font-size: 11px; font-weight: 600; }
.contact-add-hit-badge.is-closed { background: var(--color-danger-soft); color: var(--color-danger); }
.contact-add-hit-badge.is-known { background: var(--color-warning-soft); color: var(--color-warning); }
.contact-add-hit-action {
    flex: none;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 12px; font-weight: 600;
    opacity: 0;
    transition: opacity .12s;
}
.contact-add-hit:hover .contact-add-hit-action, .contact-add-hit:focus-visible .contact-add-hit-action { opacity: 1; }
.contact-add-hit > .fa-arrow-up-right-from-square { flex: none; color: var(--color-muted-2); font-size: 12px; }

/* Conseil affiché tant qu'aucune aide n'est calculée. */
.contact-add-aside:has([data-stamina-contact-add-target="assist"] > *) .contact-add-tip { display: none; }
[data-stamina-contact-add-target="assist"] { display: flex; flex-direction: column; gap: 16px; }

/* Collections téléphones / e-mails : même libellé que les champs du thème. */
.contact-add-collection > .form-label { display: block; }
.contact-add-collection [data-stamina-ui-collection-target="holder"] > * + * { margin-top: 8px; }
.contact-add-collection { margin-bottom: 16px; }

.contact-add-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 0 0 12px; }
.contact-add-link { padding: 0; border: 0; background: none; color: var(--color-accent); font-size: 13px; font-weight: 500; }
.contact-add-link:hover { text-decoration: underline; }

/* Actions : sous les cartes, sans carte. */
.contact-add-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 4px 0 8px; }

@media (max-width: 767.98px) {
    .contact-add-kinds { grid-template-columns: minmax(0, 1fr); }
    .contact-add-card-head { padding-left: 20px; padding-right: 20px; }
    .contact-add-card-body { padding-left: 20px; padding-right: 20px; }
    .contact-add-grid > [class*="is-"], .contact-add[data-contact-type="individual"] .contact-add-name-row { grid-column: span 6; }
}