/* Relations (refonte, lot 5) : mise en page du carnet de contacts, de la fiche et de LiooStats (static/relations-ui.js).
   Les composants (boutons, pastilles, lignes, verrous, chiffres clés, graphiques) sont ceux de brand/components.css ;
   ici la place seulement. Jetons de brand/tokens.css uniquement. Maquette : propositions-vues/vues/06-contacts.html. */

/* Carnet : liste à gauche, fiche en volet à droite à partir de 900 px ; plus étroit, l'une ou l'autre en plein écran. */
.rel-md{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,calc(var(--space-24) * 4 + var(--space-4)));gap:var(--space-6);align-items:start}
.rel-col{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.rel-screen{display:flex;flex-direction:column;gap:var(--space-5);min-width:0;container-type:inline-size;container-name:rel}
.rel-back{display:none}
.rel-trail{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-1)}
.rel-scanhint{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line)}
.rel-scanhint__icon{display:grid;place-items:center;flex:none;width:var(--space-12);height:var(--space-12);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--accent)}
.rel-scanhint__text{flex:1;min-width:0;margin:0;font-size:var(--fs-14);color:var(--text-2)}
.rel-scanhint__text strong{display:block;font-size:var(--fs-16);color:var(--text)}
.rel-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-3)}
.rel-lockline{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--fs-14);color:var(--text-2)}

/* Fiche : en-tête, actions rapides, relance, coordonnées, historique. */
.rel-fiche{display:flex;flex-direction:column;gap:var(--space-5)}
.rel-fh{display:flex;align-items:center;gap:var(--space-4)}
.rel-fh__text{flex:1;min-width:0}
.rel-fh__text h2{margin:0;font-size:var(--fs-24);font-weight:800;line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}
.rel-screen h1:focus,.rel-fh__text h2:focus{outline:none}
.rel-head{display:flex;flex-direction:column;gap:var(--space-4)}
.rel-fh__text p{margin:0;font-size:var(--fs-14);color:var(--text-2)}
.rel-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3);font-size:var(--fs-14)}
.rel-kv{display:grid;grid-template-columns:minmax(0,var(--space-24)) minmax(0,1fr);align-items:center;gap:var(--space-2) var(--space-3);margin:0;font-size:var(--fs-14)}
.rel-kv dt{color:var(--text-2)}
.rel-kv dd{margin:0;overflow-wrap:anywhere}
.rel-link{display:inline-flex;align-items:center;max-width:100%;min-height:var(--control);font-weight:600;color:var(--accent);text-decoration:none;overflow-wrap:anywhere}
.rel-src{display:inline-flex;align-items:center;gap:var(--space-1)}
.rel-tags{display:inline-flex;flex-wrap:wrap;gap:var(--space-1)}
.rel-notes{margin:0;font-size:var(--fs-14);white-space:pre-wrap;overflow-wrap:anywhere}

/* Formulaires : contact, relance, note. */
.rel-form{display:flex;flex-direction:column;gap:var(--space-3)}
.rel-done{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line)}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--space-24) * 2)),1fr));gap:var(--space-3)}
.rel-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}
.rel-photo{display:flex;align-items:flex-start;gap:var(--space-4)}
.rel-photo__controls{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.rel-more summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control);font-weight:600;color:var(--accent);cursor:pointer}
.rel-more[open]{display:flex;flex-direction:column;gap:var(--space-3)}
.rel-fieldset{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;border:0;min-width:0}
.rel-fieldset legend{padding:0;margin-bottom:var(--space-2);font-size:var(--fs-16);font-weight:700}

/* LiooStats : période, chiffres clés, graphique, ce qui attire et provenance. */
.rel-statshead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.rel-statshead h2{margin:0;font-size:var(--fs-16);font-weight:700}
.rel-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--space-24) + var(--space-12))),1fr));gap:var(--space-3)}
.rel-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.rel-statslock{display:grid}
.rel-sample{display:flex;flex-direction:column;gap:var(--space-4)}
.rel-sample__tag{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0}
.rel-sample__kpi{position:relative;display:grid}
.rel-sample__kpi>:first-child{position:absolute;top:var(--space-2);right:var(--space-2);z-index:1}

/* AV-003 : la bascule liste | fiche dépend de la zone utile (barre latérale ouverte comprise), pas de la fenêtre.
   Sous 900 px de zone (soit ~1024 px d'écran avec la barre latérale) : une colonne, la liste OU la fiche (retour
   « Contacts ») ; au-dessus, la liste garde au moins ~ 470 px à côté de la fiche. */
@container rel (max-width:899px){
  .rel-md{grid-template-columns:minmax(0,1fr)}
  .rel-md[data-open="false"] .rel-detail,.rel-md[data-open="true"] .rel-list{display:none}
  .rel-back{display:inline-flex;align-self:flex-start}
  .rel-screen[data-open="true"] .rel-head{display:none}
}
@media (max-width:899px){
  .rel-hide-narrow{display:none}
  .rel-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .rel-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
}
/* Filtres : sur une zone large, les pastilles passent à la ligne au lieu de défiler sous la fiche voisine. */
@container rel (min-width:600px){#contact-filters .hl-chiprow{flex-wrap:wrap;overflow:visible}}