/* ─── LE CARNET : des visages, pas un tableau ─────────────────────
     Maquette tranchée avec Adam le 29/08, en six questions. Le choix des
     CARTES contre un tableau n'est pas décoratif : c'est l'écran le plus
     intime du produit — cinq ou six personnes qu'on aime — et une grille
     de lignes lui donnerait un air de base de données.

     LES CARTES SONT TRIÉES PAR PROCHAIN ANNIVERSAIRE, donc leur position
     change au fil de l'année. Ce serait un défaut sans les photos : on
     ne retrouverait plus personne. Avec un visage, on reconnaît sans
     lire — c'est la réponse « oui aux photos » qui a rendu ce tri
     possible, pas l'inverse.

     Fermée, une carte montre le visage, le prénom, le lien, l'âge et les
     ALLERGIES. Elles seules sont visibles d'office parce qu'elles sont la
     seule information du carnet qui ait une conséquence immédiate. */
  /* Refonte Équipe : maquette validée du 26/09, palette du produit.
     Trois vues : consultation, choix personnels, tenue professionnelle. */
  #equipe { font-size: var(--t-lu); line-height: 1.5; container-type: inline-size; padding: 0; }
  #eq-contenu { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  #equipe h1, #equipe h2, #equipe h3, #equipe p { margin: 0; }
  #equipe h1 { font-size: var(--t-question); line-height: 1.2; margin: 4px 0 8px; }
  #equipe h2, #equipe h3 { font-size: var(--t-chiffre); line-height: 1.35; }
  #equipe small { font-size: var(--t-corps); }
  #equipe .eq-nav:hover { border-color: var(--accent); }
  #equipe .eq-nav:disabled, #equipe input:disabled, #equipe select:disabled { opacity: .55; cursor: wait; }
  #equipe :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  #equipe .eq-tabs button { flex-shrink: 0; min-height: 49px; padding: 8px 14px 12px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
  #equipe .eq-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
  #equipe .eq-recherche-ligne input { flex: 1; min-width: 0; max-width: 550px; }
  #equipe input:not([type="checkbox"]), #equipe select { min-height: 48px; padding: 8px 14px; border: 1px solid var(--line2); border-radius: var(--r-objet); background: var(--panel); color: var(--text); font: inherit; font-size: var(--t-lu); max-width: 100%; }
  #equipe .eq-personne:last-child { border-bottom: 0; }
  #equipe .eq-identite-texte strong, #equipe .eq-identite-texte small { display: block; }
  #equipe .eq-identite-texte small { color: var(--muted); }
  #equipe .eq-visage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #equipe .eq-contact { text-align: right; }
  #equipe .eq-choix strong, #equipe .eq-choix small { display: block; }
  #equipe .eq-choix small { color: var(--muted); margin-top: 4px; }
  #equipe label.eq-choix { cursor: pointer; }
  #equipe .eq-interrupteur::after { content: ""; width: 21px; height: 21px; border-radius: 50%; background: var(--muted); position: absolute; left: 4px; top: 3px; }
  #equipe .eq-interrupteur:checked { background: var(--accent); }
  #equipe .eq-interrupteur:checked::after { background: var(--on-accent); transform: translateX(19px); }
  #equipe .eq-apercu { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-cadre); padding: 20px; overflow-wrap: anywhere; }
  #equipe .eq-champ-lu { display: grid; gap: 4px; margin-top: 18px; overflow-wrap: anywhere; }
  #equipe .eq-champ-lu span { color: var(--muted); }
  #equipe .eq-actions, #equipe .eq-photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
  #equipe .eq-filtres { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
  #equipe .eq-filtres input { flex: 1; min-width: 0; }
  #equipe .eq-gestion-liste { display: grid; }
  #equipe .eq-fiche { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
  #equipe .eq-statut { display: grid; gap: 4px; font-size: var(--t-corps); color: var(--muted); }
  #equipe .eq-comptes:empty { display: none; }
  #equipe .eq-compte-libre { padding: 16px 0; border-bottom: 1px solid var(--line); }
  #equipe .eq-compte-libre .eq-actions { margin-top: 8px; }
  #equipe .eq-voile { position: absolute; inset: 0; z-index: 4; display: flex; justify-content: flex-end; background: var(--veil); }
  #equipe .eq-dialogue { width: min(100%,430px); height: 100%; overflow: auto; padding: 24px 24px 100px; background: var(--panel); border-left: 1px solid var(--line); }
  #equipe .eq-dialogue-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
  #equipe .eq-formulaire { display: grid; gap: 18px; }
  #equipe .eq-form { display: grid; gap: 16px; }
  #equipe .eq-champ { display: grid; gap: 6px; min-width: 0; }
  #equipe .eq-champ input { width: 100%; }
  #equipe .eq-champ small { color: var(--muted); }
  #equipe [aria-invalid="true"] { border-color: var(--etat-mal); }
  #equipe .eq-confirmation { position: sticky; bottom: 0; padding: 20px; border: 2px solid var(--accent); border-radius: var(--r-cadre); background: var(--panel); }
  #equipe .eq-msg { flex-shrink: 0; padding: 12px 24px; color: var(--text); background: var(--panel2); border-top: 1px solid var(--line); position: relative; z-index: 5; max-height: 30%; overflow: auto; }
  #equipe .eq-msg.err { color: var(--etat-mal); }
  #equipe .eq-echec { padding: 20px; border: 1px solid var(--etat-mal); border-radius: var(--r-cadre); margin-bottom: 20px; }
  #equipe [hidden], #equipe .eq-nav[hidden], #equipe .eq-voile[hidden],
  #equipe .eq-tabs button[hidden], #equipe .eq-vue[hidden],
  #equipe .eq-confirmation[hidden], #equipe .eq-msg[hidden], #equipe .eq-echec[hidden] { display: none; }
  @container (max-width: 680px) {
    #equipe .eq-head { padding: 18px 16px 0; }
    #equipe .eq-tabs { margin: 18px 16px 0; gap: 0; }
    #equipe .eq-tabs button { padding-inline: 10px; }
    #equipe .eq-body { padding: 18px 16px; }
    #equipe .eq-recherche-ligne { align-items: stretch; flex-direction: column; gap: 8px; }
    #equipe .eq-entete { display: none; }
    #equipe .eq-liste { display: grid; gap: 12px; border: 0; background: transparent; }
    #equipe .eq-personne { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-cadre); background: var(--panel); }
    #equipe .eq-personne:last-child { border-bottom: 1px solid var(--line); }
    #equipe .eq-poste { padding-left: 57px; margin-top: -12px; }
    #equipe .eq-contact { padding-left: 57px; text-align: left; }
    #equipe .eq-partage-grille, #equipe .eq-fiche { grid-template-columns: minmax(0,1fr); }
    #equipe .eq-panneau { padding: 18px; }
    #equipe .eq-fiche > button { justify-self: start; }
    #equipe .eq-filtres { flex-direction: column; }
  }