/* PARTAGER — le classeur, les familles, les marges.

   Feuille séparée parce que ces écrans n'existent pas encore dans
   l'application : ils se regardent d'abord sur une planche, ils se corrigent,
   et seulement après ils entrent. Elle n'invente aucune couleur ni aucun
   corps : tout vient des variables de mijote.css, sinon la planche mentirait
   sur ce que l'application deviendrait vraiment.

   Le vocabulaire suit la conception de PARTAGE.md :
     .carnet      un intercalaire du classeur — l'unité de partage
     .qui         avec qui il est partagé, écrit en toutes lettres
     .membre      une personne dans une famille, et ses carnets
     .marge       « ce que ça a donné chez nous », signé et daté
     .propose     ce qu'on soumet au propriétaire, qui reste seul éditeur */

/* ============================================ LE CLASSEUR ET SES CARNETS */

/* La tranche. Un carnet posé de champ, c'est ce qu'on voit d'abord dans un
   classeur — et ça donne le seul endroit du projet où une couleur pleine est
   permise, parce qu'elle est étroite et qu'elle sert à distinguer, pas à
   décorer. Les aplats larges restent bannis (DESIGN.md). */
.carnets { display: grid; gap: 12px; margin: 0 0 20px; }

.carnet {
  display: grid; grid-template-columns: 6px 1fr auto; align-items: stretch;
  gap: 0; width: 100%; text-align: left; padding: 0; overflow: hidden;
  background: var(--carte); border: 0;
  border-radius: var(--r-carte); box-shadow: var(--ombre-1);
  font: inherit; color: inherit; cursor: pointer;
}
.carnet__tranche { background: var(--teinte, var(--sauge)); }
.carnet__corps { padding: 14px 4px 14px 14px; min-width: 0; }
.carnet__nom {
  font: 600 19px/1.25 var(--f-titre); color: var(--encre);
  margin: 0 0 3px; overflow-wrap: anywhere;
}
.carnet__compte { font: 400 15px/1.4 var(--f-ui); color: var(--encre-3); margin: 0; }
.carnet__fin {
  display: flex; align-items: center; padding: 0 14px; color: var(--encre-3);
}

/* Avec qui c'est partagé. Écrit, jamais réduit à une icône : c'est la seule
   information de cet écran dont une erreur de lecture a des conséquences. */
.qui { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.qui__val {
  font: 600 13px/1 var(--f-ui); letter-spacing: .01em;
  padding: 6px 10px; border-radius: var(--r-pilule);
  background: var(--sauge-clair); color: var(--sauge);
}
/* Un carnet que personne ne voit se lit d'un coup d'œil, et sans alarme :
   c'est l'état par défaut, pas un problème à corriger. */
.qui__val--ferme { background: var(--bande); color: var(--encre-3); }

/* ================================================= UNE FAMILLE, SES GENS */

.membre { margin: 0 0 26px; }
/* Le seuil : le titre de possession (« Les carnets de Jeanne », « Mes
   carnets ») et le lien de parenté dessous, en petit. */
.membre__seuil { margin: 0 0 12px; }
.membre__titre { font: 500 22px/1.15 var(--f-titre); color: var(--encre); margin: 0; }
.membre__lien { font: 400 13px/1.3 var(--f-ui); color: var(--encre-3); margin: 2px 0 0; }
.membre__tete { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.membre__rond {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--sauge-clair); color: var(--sauge);
  font: 600 15px/1 var(--f-ui);
}
.membre__nom { font: 600 17px/1.2 var(--f-ui); color: var(--encre); margin: 0; }
.membre__quoi { font: 400 15px/1.3 var(--f-ui); color: var(--encre-3); margin: 2px 0 0; }

/* =========================================================== LES MARGES */

/* Une annotation dans la marge d'un carnet : elle n'est pas la recette, et
   elle ne doit jamais en avoir l'air. D'où le retrait à gauche et le corps
   plus petit — c'est un crayon à côté d'une encre. */
.marges { margin: 26px 0 0; }
.marges__titre {
  font: 600 13px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-3); margin: 0 0 12px;
}
.marge {
  padding: 0 0 0 14px; margin: 0 0 16px;
  border-left: 2px solid var(--bord);
}
.marge__dit {
  font: italic 400 16px/1.5 var(--f-voix); color: var(--encre-2); margin: 0;
}
.marge__signe {
  font: 500 13px/1.4 var(--f-ui); color: var(--encre-3); margin: 6px 0 0;
}
.marge__photo {
  display: block; width: 100%; max-width: 190px; margin: 10px 0 0;
  border-radius: var(--r-champ); border: 1px solid var(--trait);
}
/* Le champ d'écriture reste ouvert en bas : demander « ce que ça a donné »
   après coup ne marche pas, il faut que la place soit déjà là. */
.marge-ecrire { display: flex; gap: 8px; align-items: center; margin: 4px 0 0; }
.marge-ecrire .champ { flex: 1 1 auto; }

/* ===================================================== LES PROPOSITIONS */

/* Ce qu'on soumet au propriétaire. Le liseré orange est réservé à la mise en
   avant (DESIGN.md) : une proposition en attente est exactement ça, une chose
   qui attend un geste et qui ne doit pas se noyer. */
.propose {
  padding: 14px; margin: 0 0 12px;
  background: var(--carte); border: 2px solid var(--feu);
  border-radius: var(--r-carte);
}
.propose__de { font: 600 15px/1.3 var(--f-ui); color: var(--encre); margin: 0 0 6px; }
.propose__quoi { font: 400 16px/1.5 var(--f-ui); color: var(--encre-2); margin: 0; }
.propose__avant {
  font: 400 15px/1.4 var(--f-ui); color: var(--encre-3); margin: 6px 0 0;
  text-decoration: line-through;
}
.propose__actions { display: flex; gap: 8px; margin: 12px 0 0; }

/* ====================================================== UN COMPTE SUIVI */

.profil { text-align: center; padding: 8px 0 22px; }
.profil__rond {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 12px;
  display: grid; place-items: center;
  background: var(--sauge-clair); color: var(--sauge);
  font: 600 22px/1 var(--f-titre);
}
.profil__nom { font: 600 22px/1.15 var(--f-titre); color: var(--encre); margin: 0 0 4px; }
.profil__quoi { font: 400 15px/1.45 var(--f-ui); color: var(--encre-3); margin: 0 0 16px; }

/* Ce qu'un suiveur ne verra pas, dit une fois et calmement. Le taire serait
   pire : on croirait le carnet pauvre alors qu'il est seulement pudique. */
.profil__note {
  font: 400 15px/1.5 var(--f-ui); color: var(--encre-3);
  padding: 12px 14px; margin: 18px 0 0;
  background: var(--bande); border-radius: var(--r-champ); text-align: left;
}


/* ================================ LA TÊTE D'UN CARNET, quand il est le sujet */

/* Sur l'écran de partage, le carnet n'est plus une ligne de liste : c'est
   l'objet dont on parle. On le montre comme tel — la tranche à gauche, le nom
   dans la famille du livre, ce qu'il contient dessous. Sans photo, sans
   illustration : un carnet fermé n'a rien à montrer, et faire semblant serait
   pire que le silence. */
.carnet-tete {
  display: grid; grid-template-columns: 8px 1fr; gap: 0;
  overflow: hidden; margin: 0 0 24px;
  background: var(--carte); border: 0;
  border-radius: var(--r-carte); box-shadow: var(--ombre-1);
}
.carnet-tete__tranche { background: var(--teinte, var(--sauge)); }
.carnet-tete__corps { padding: 18px 18px 20px; }
.carnet-tete__nom { font: 600 22px/1.2 var(--f-titre); color: var(--encre); margin: 0 0 6px; }
.carnet-tete__quoi { font: 400 15px/1.5 var(--f-ui); color: var(--encre-3); margin: 0; }

/* ============================================ UNE RÈGLE DE PARTAGE, ET SA SUITE */

/* Le vrai sujet de cet écran n'est pas la case : c'est CE QUE ÇA FAIT. Donc
   la conséquence est écrite sous chaque règle, en toutes lettres, et elle
   pèse typographiquement autant que le nom du destinataire. */
.regles { border-top: 1px solid var(--trait); margin: 0 0 22px; }
.regle {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 14px; padding: 16px 0 4px;
}
.regle__nom { font: 500 17px/1.25 var(--f-ui); color: var(--encre); margin: 0; }
.regle__suite {
  font: 400 15px/1.5 var(--f-ui); color: var(--encre-3);
  margin: 0 0 16px; padding: 0 62px 16px 0;
  border-bottom: 1px solid var(--trait);
}
.regles > :last-child { border-bottom: 0; }

/* La portée, en une phrase. C'est ce qu'on relit avant de quitter l'écran, et
   c'est la seule chose qu'on emportera : « quatre personnes voient ce
   carnet ». Une liste de cases cochées ne dit jamais ça. */
.portee {
  padding: 16px 18px; margin: 0 0 18px;
  background: var(--sauge-clair); border-radius: var(--r-carte);
}
.portee__n { font: 600 19px/1.3 var(--f-titre); color: var(--sauge); margin: 0 0 4px; }
.portee__qui { font: 400 15px/1.5 var(--f-ui); color: var(--encre-2); margin: 0; }
.portee--ferme { background: var(--bande); }
.portee--ferme .portee__n { color: var(--encre); }

/* ==================================================== L'EN-TÊTE D'UNE FAMILLE */

.famille-tete { padding: 6px 0 22px; border-bottom: 1px solid var(--trait); margin: 0 0 22px; }

/* Le retour vers la liste des familles n'est pas un bouton d'action :
   il se cale à gauche, à sa taille — un « ‹ » qui fait deux mètres de
   large se lit comme une barre, pas comme un chemin. */
#familles .retour-collection { width: auto; padding-inline: 18px; }

/* LA LISTE DES FAMILLES — une porte par famille, on entre pour voir les
   personnes. Même anatomie que partout : nom, ronds, résumé. */
.familles-liste { display: grid; gap: 12px; padding-top: 4px; }
.famille-porte { display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; padding: 18px 20px; text-align: left;
  background: var(--carte); border: 0;
  border-radius: var(--r-carte); box-shadow: var(--ombre-1);
  font: inherit; color: inherit; cursor: pointer; }
.famille-porte__nom { font: 500 24px/1.1 var(--f-titre); color: var(--encre); }
.famille-porte__quoi { font: 400 14px/1.4 var(--f-ui); color: var(--encre-3); }
.famille-tete__nom { font: 600 34px/1.05 var(--f-titre); color: var(--encre); margin: 0 0 10px; }
.famille-tete__quoi { font: 400 15px/1.5 var(--f-ui); color: var(--encre-3); margin: 0; }

/* Les gens, en pile. Des ronds qui se chevauchent disent « un groupe » plus
   vite qu'une liste de noms, et laissent la place au nom de la famille. */
.pile { display: flex; margin: 0 0 12px; }
.pile__rond {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; margin-right: -10px;
  background: var(--sauge-clair); color: var(--sauge);
  border: 2px solid var(--blanc);
  font: 600 15px/1 var(--f-ui);
}
.pile__rond:last-child { margin-right: 0; }
.pile__rond--plus { background: var(--bande); color: var(--encre-3); }

/* L'intertitre par personne : un nom, puis un filet qui va au bout. C'est le
   geste d'un sommaire de livre, et il range sans peser — l'inverse du rond
   plus nom qui répétait un avatar à chaque section. */

/* ============================================================ LES VARIANTES */

/* « Moi je le fais plutôt comme ça. » Ce n'est ni une correction ni un
   commentaire : c'est une AUTRE recette, chez quelqu'un d'autre, et personne
   n'a tort. D'où le dessin : pas de liseré d'alerte, pas de bouton d'action —
   on lit, et on peut aller voir.

   ⚠️ EN CARTES, ET SOUS LA RECETTE (Félix, 09/08). C'était d'abord une liste
   de lignes sur un écran à part : deux erreurs. Un écran à part obligeait à
   quitter la recette pour comparer, ce qui est exactement le contraire du
   geste ; et une ligne ne laisse la place qu'à un résumé, alors qu'une carte
   peut montrer les différences elles-mêmes. */
.variantes { margin: 30px 0 0; }
.variantes__liste { display: grid; gap: 12px; }

.variante {
  display: block; width: 100%; text-align: left; padding: 15px 16px;
  background: var(--carte); border: 0;
  border-radius: var(--r-carte); box-shadow: var(--ombre-1);
  font: inherit; color: inherit;
}
.variante__tete { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.variante__rond {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--sauge-clair); color: var(--sauge);
  font: 600 13px/1 var(--f-ui);
}
.variante__qui { font: 600 17px/1.2 var(--f-ui); color: var(--encre); margin: 0; }

/* ⚠️ UNE LIGNE, PAS TROIS (Félix : « tu mets l'info, moi je pensais juste à
   des cards recette — il ne faut pas trop complexifier l'app »). La carte
   listait les différences une par une, plus un « et 2 autres » : elle
   devenait un tableau de comparaison, c'est-à-dire un objet de plus à
   comprendre au milieu d'une recette.

   Une carte dit maintenant deux choses : chez qui, et ce qui change en une
   phrase. Le détail existe toujours — il est dans la variante ouverte, où
   l'on va justement pour comparer. */
.variante__quoi { font: 400 15px/1.45 var(--f-ui); color: var(--encre-2); margin: 0; }

/* Le détail complet, sur la variante ouverte seulement. */
.variante__ligne {
  display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: baseline;
  font: 400 15px/1.45 var(--f-ui); color: var(--encre-2); margin: 0 0 5px;
}
/* Le signe dit le genre du changement sans une seule couleur d'alerte : ce
   n'est pas un diff de code, personne n'a tort. */
.variante__signe { font: 600 15px/1.45 var(--f-ui); color: var(--sauge); }

/* ============================== LE LIEN ENTRE UNE VARIANTE ET SON ORIGINE */

/* ⚠️ RIEN N'EST RESTÉ DE LA FILIATION SUR LA FICHE. Elle a été un encadré
   vert (« bof non »), puis un lien « d'où elle vient » à la suite de
   l'attribution — que Félix a relevé aussi, et il avait deux fois raison : la
   tournure était bancale, et surtout le lien FAISAIT DOUBLON. La carte « Chez
   Mamie Yoyo » est là, quatre écrans plus bas, dans « d'autres la font
   autrement » : c'est déjà le chemin vers l'antérieure, et il se comprend
   sans qu'on l'explique.

   Ce qu'on croit devoir ajouter existe souvent déjà ailleurs sur l'écran. */

/* LA FILIATION EN GÉLULES (Félix : « on peut mettre des pills non »). Elle
   était en petites capitales sur un filet : lisible, mais elle ressemblait à
   un titre de section, donc à un début de contenu. En gélules, elle se lit
   pour ce qu'elle est — des noms, une suite, un chemin. Et c'est la forme que
   l'application emploie déjà partout où il s'agit de personnes ou de filtres.

   ⚠️ Le maillon courant est PLEIN, les autres sont clairs : c'est la même
   grammaire que les filtres posés, où le vert plein dit « ici ». */
.filiation {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 0; margin: 14px 0 4px;
}
.filiation__nom {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px;
  border-radius: var(--r-pilule);
  background: var(--sauge-clair); color: var(--sauge);
  font: 600 15px/1 var(--f-ui);
}
.filiation__nom--ici { background: var(--sauge); color: #FFFFFF; }
.filiation__fleche { color: var(--encre-3); font: 400 15px/1 var(--f-ui); }

/* Le retour vers la sienne. Une variante ouverte doit toujours porter le
   chemin du retour : sans lui, on se retrouve dans le carnet de quelqu'un
   d'autre sans savoir comment on y est arrivé. */
.retour-mienne {
  display: block; width: 100%; text-align: left; padding: 13px 0;
  border-top: 1px solid var(--trait); margin: 22px 0 0;
  font: 500 15px/1.4 var(--f-ui); color: var(--sauge);
}

/* ================================================ LES TÊTES DE FICHE, SERRÉES */

/* « C'est long les titres » (Félix). Sur un téléphone, le titre et
   l'attribution mangeaient le premier tiers de l'écran avant qu'un seul
   ingrédient n'apparaisse. Trois corrections, dans l'ordre d'importance :

   1. l'attribution ne répète plus le nom déjà présent dans le titre — c'est
      src/recettes/titres.mjs qui s'en charge, et c'est la seule correction
      qui tient sur un petit écran ;
   2. elle descend de 22 à 17 px : c'est une mention, pas un second titre ;
   3. un titre long se pose plus petit, jamais tronqué — « Le gâteau de Mamie
      Yo… » n'est plus le nom de rien.

   Les deux crans réemploient les bornes du clamp existant : aucun corps
   nouveau n'entre dans l'échelle. */
.fiche__titre { text-wrap: balance; }
.fiche__titre[data-calibre="moyen"] { font-size: clamp(26px, 7.2vw, 28px); }
.fiche__titre[data-calibre="court"] { font-size: clamp(22px, 6.2vw, 26px); }
.fiche__de { font: italic 400 17px/1.4 var(--f-voix); margin-top: 4px; }

/* LA CATÉGORIE EN SURTITRE. Félix : « on peut mettre la catégorie, je ne sais
   pas, tout dans le titre ». Elle existait déjà (.fiche__qui) mais SOUS le
   titre, où elle allongeait une tête déjà jugée trop haute.

   Au-dessus, elle ne coûte rien : douze pixels de capitales grises situent le
   plat avant même qu'on lise son nom, comme la rubrique d'un magazine
   au-dessus d'un article. Et le titre reprend le premier rang, qui est le
   sien — c'est le nom d'une recette de famille, pas un classement. */
.fiche__qui--sur { margin: 0 0 8px; }

/* ⚠️ LES ÉCRANS DU CLASSEUR ET DES FAMILLES N'AVAIENT PAS DE MARGE. Dans
   l'application, `.defile` ne pose aucun retrait horizontal — c'est chaque
   écran qui donne le sien. Les miens venaient de la planche, où le cadre du
   téléphone le fournissait : le nom de la famille et les cartes touchaient le
   bord, et les cartes débordaient à droite. */
#familles, #carnets { padding-left: var(--marge); padding-right: var(--marge); }

/* CLASSER LES CARNETS. Les deux flèches vivent À CÔTÉ de la carte, pas
   dedans : un bouton dans un bouton est une faute de balisage, et le doigt
   qui vise la flèche ouvrirait le carnet. */
.carnets--classables { grid-template-columns: 1fr auto; align-items: center; }
.carnets--classables .carnet { grid-column: 1; }
.carnet__rang { display: grid; gap: 2px; }
.carnet__bouge {
  width: 34px; height: 30px; padding: 0;
  font: 400 17px/1 var(--f-ui); color: var(--encre-3);
}
.carnet__bouge:active { color: var(--sauge); }

/* ⚠️ LA RAISON D'ÉCRIRE, AVANT LE CHAMP. Un champ vide ne se remplit pas
   parce qu'il est là : il se remplit quand on comprend à qui ça sert. C'est
   la meilleure idée relevée chez Gronda, et elle ne coûte qu'une phrase. */
.marges__pourquoi {
  font: 400 15px/1.5 var(--f-ui); color: var(--encre-3);
  margin: 18px 0 10px;
}


/* HARMONISATION (13/08) : la couleur ne classe pas — la tranche des
   carnets était le dernier usage des encres p1…p6. Toutes en sauge. */
.carnet__tranche { background: var(--sauge); }

/* ================================ LE LIVRE : LES CARNETS ET LES FAMILLES

   Même passage que la réserve (mijote.css) : dans un livre, une liste n'a
   pas de boîtes, elle a des filets et du rythme. Le carnet garde sa
   TRANCHE colorée — c'est son identité, et sur du papier une tranche se
   lit encore mieux qu'avant, parce que plus rien d'autre n'est cerné. */
.carnet {
  background: none; box-shadow: none; border-radius: 0;
  border-bottom: 1px solid var(--trait);
  padding-right: var(--marge);
}
.carnets .carnet:last-of-type { border-bottom: 0; }
.carnet__tranche { width: 3px; margin: 14px 0; }
.carnet__corps { padding: 16px 4px 16px 16px; }

.famille-porte {
  background: none; box-shadow: none; border-radius: 0;
  border-bottom: 1px solid var(--trait);
  padding: 20px var(--marge);
}