/* =====================================================================
   LA PAGE CONFIDENTIALITÉ — V3, Cycle 125.

   Elle existe pour être lue. C'est la seule page du produit dont ce soit
   la fonction entière : les autres montrent des chiffres, celle-ci rend
   compte. Elle rendait 102 noms de colonnes en listes séparées par des
   virgules — exact, et illisible.

   ---------------------------------------------------------------------
   DEUX FAUTES DE LA PREMIÈRE VERSION, SIGNALÉES À L'ÉCRAN

   1. DES TAILLES QUI N'EXISTENT NULLE PART AILLEURS. Elle employait
      13,5 px et 11,5 px. Le produit n'a pas de jetons de typographie :
      son échelle est celle que ses feuilles emploient réellement —
      14 px (19 fois), 15 px (16), 13 px (8), 12 px (4), 11 px (6). Une
      demi-graduation inventée pour une seule page se voit immédiatement,
      et c'est ce que l'utilisateur a vu.

   2. L'ORANGE D'ALERTE PRIS POUR UNE NUANCE DE LECTURE. `--warning`
      servait ici au texte, au fond de la pastille ET à la bordure, pour
      signaler une CATÉGORIE — pas un danger. Trois emplois d'une couleur
      saturée sur un fond sombre : ça pique, et ça crie une urgence qui
      n'existe pas.

      Les données de tiers restent distinguées, mais par la couleur
      d'identité du produit — le bleu du menu — et par un filet latéral.
      La distinction se voit sans agresser.

   ---------------------------------------------------------------------
   AUCUN `display:flex` SUR UN PARAGRAPHE. Le Cycle 124 vient de montrer
   ce que ça fait à de la prose. Le flex ne sert qu'à aligner des
   éléments distincts : les pastilles, et le titre avec son compteur.
   ===================================================================== */

/* --- La carte d'une table ------------------------------------------- */
.bloc-inventaire{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:var(--space-5);
    margin-bottom:var(--space-4);
}

.bloc-inventaire__titre{
    margin:0 0 var(--space-1);
    font-size:15px;
    font-weight:600;
    color:var(--text);
}

.bloc-inventaire__finalite{
    margin:0 0 var(--space-4);
    font-size:14px;
    line-height:1.6;
    color:var(--text-light);
}

/* La remarque : ce que le produit tient à préciser lui-même. Détachée
   par un filet, pas par une couleur d'alerte — ce n'est pas un échec. */
.bloc-inventaire__remarque{
    margin:var(--space-4) 0 0;
    padding-left:var(--space-3);
    border-left:2px solid var(--border);
    font-size:13px;
    line-height:1.65;
    color:var(--text-light);
}

.bloc-inventaire__ailleurs{
    margin:0;
    padding-left:var(--space-5);
    font-size:14px;
    line-height:1.7;
    color:var(--text-light);
}

/* --- Un groupe de colonnes ------------------------------------------ */
.groupe-colonnes{ margin-bottom:var(--space-4); }
.groupe-colonnes:last-of-type{ margin-bottom:0; }

.groupe-colonnes__titre{
    display:flex;              /* deux éléments distincts, pas de la prose */
    align-items:center;
    gap:var(--space-2);
    margin:0 0 var(--space-2);
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--text-light);
}

.groupe-colonnes__compte{
    font-size:11px;
    font-weight:600;
    letter-spacing:0;
    padding:1px var(--space-2);
    border-radius:var(--radius-full);
    background:var(--surface-muted);
    color:var(--text-light);
}

/* Les données qui concernent quelqu'un d'autre que l'utilisateur.
   Distinguées par un filet et par la couleur d'identité du produit, pas
   par une alerte : c'est une catégorie, pas un incident. */
.groupe-colonnes--tiers{
    padding-left:var(--space-3);
    border-left:2px solid var(--primary);
}
.groupe-colonnes--tiers .groupe-colonnes__titre{ color:var(--primary); }

/* --- Les pastilles de colonnes -------------------------------------- */
.liste-colonnes{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2);
    margin:0;
    padding:0;
    list-style:none;
}

.liste-colonnes code{
    display:inline-block;
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:12px;
    line-height:1.5;
    padding:var(--space-1) var(--space-2);
    border:1px solid var(--border);
    border-radius:var(--radius-xs);
    background:var(--surface-muted);
    color:var(--text-light);
    white-space:nowrap;
}

@media (max-width:640px){
    .bloc-inventaire{ padding:var(--space-4); }
}

/* =====================================================================
   LA LONGUEUR DE LIGNE — V3, Cycle 127.

   « Ça fait paquet », dit l'utilisateur, et la cause n'est pas
   l'espacement : c'est la MESURE. Sur un écran large, le panneau fait
   plus de 1 200 px, et un paragraphe qui l'occupe entièrement donne des
   lignes de 180 caractères. L'œil ne retrouve pas le début de la ligne
   suivante ; il relit, il saute, il abandonne. Tout se lit comme un bloc
   compact même quand l'interligne est correct.

   La règle typographique est ancienne et tient en un nombre : entre 45
   et 75 signes par ligne. `ch` est l'unité qui la dit directement — la
   largeur du zéro dans la police courante — donc la mesure suit la
   taille du texte au lieu d'être un nombre de pixels à réviser.

   Trois choses, et rien d'autre :
     1. une mesure de 68 signes sur tout ce qui est de la prose ;
     2. de l'air entre les paragraphes, et davantage avant un titre —
        un intertitre appartient à ce qui le suit, pas à ce qui précède ;
     3. un interligne de 1,7, qui est ce qu'un texte suivi demande.

   Les cartes d'inventaire gardent la même mesure : une page dont la
   colonne de texte change de largeur en cours de route se lit comme deux
   pages.
   ===================================================================== */

#panneauConfidentialite > p,
#panneauConfidentialite > h2,
#panneauConfidentialite > h3,
#panneauConfidentialite > ul,
#panneauConfidentialite .bloc-inventaire,
#panneauConfidentialite .avertissement-responsabilite{
    max-width:68ch;
}

#panneauConfidentialite > p{
    line-height:1.7;
    margin:0 0 var(--space-4);
}

/* Un intertitre appartient à ce qui le suit : beaucoup d'air au-dessus,
   peu au-dessous. C'est ce qui fait qu'une page se lit par sections
   plutôt que comme une coulée. */
#panneauConfidentialite > h3{
    margin:var(--space-6) 0 var(--space-3);
    padding-top:var(--space-5);
    border-top:1px solid var(--border);
    font-size:15px;
    font-weight:600;
    color:var(--text);
}

/* Le premier intertitre suit directement le chapô : pas de filet, il
   séparerait un titre de sa propre page. */
#panneauConfidentialite > h2 + p + h3{
    margin-top:var(--space-5);
    padding-top:0;
    border-top:none;
}

#panneauConfidentialite > ul{
    margin:0 0 var(--space-4);
    padding-left:var(--space-5);
    line-height:1.7;
}

#panneauConfidentialite > ul li{ margin-bottom:var(--space-2); }

/* Les cartes respirent entre elles autant que les paragraphes. */
#panneauConfidentialite .bloc-inventaire + .bloc-inventaire{
    margin-top:var(--space-4);
}

/* =====================================================================
   VOS DROITS, ET LE PIED DE PAGE — V3, Cycle 128.

   Cinq droits distincts tenaient dans un seul paragraphe, chacun
   introduit par un mot en gras au milieu d'une phrase. On les lisait en
   bloc, et on ne pouvait pas revenir à celui qu'on cherchait — or c'est
   exactement l'usage de cette section : on y vient pour UN droit.

   Une liste de définitions le dit dans le balisage : le droit d'un côté,
   ce que le produit en fait de l'autre.
   ===================================================================== */

.liste-droits{
    max-width:68ch;
    margin:0 0 var(--space-5);
}

.liste-droits dt{
    margin-top:var(--space-4);
    font-size:14px;
    font-weight:600;
    color:var(--text);
}

.liste-droits dt:first-child{ margin-top:0; }

.liste-droits dd{
    margin:var(--space-1) 0 0;
    font-size:14px;
    line-height:1.7;
    color:var(--text-light);
}

/* Le pied de page réunissait l'avertissement juridique, la date du relevé
   et les sources dans une seule coulée. Les tirets qui les séparaient ont
   été retirés au Cycle 126 sans que rien ne prenne leur place : un tic
   corrigé, un paquet créé.

   L'avertissement est ce qu'il faut lire ; la date et les sources sont ce
   qui rend l'inventaire vérifiable. Deux natures, deux blocs. */
.pied-confidentialite{
    max-width:68ch;
    margin-top:var(--space-6);
    padding-top:var(--space-5);
    border-top:1px solid var(--border);
}

.pied-confidentialite__avertissement{
    margin:0 0 var(--space-3);
    font-size:14px;
    line-height:1.7;
    color:var(--text);
}

.pied-confidentialite__source{
    margin:0;
    font-size:12px;
    line-height:1.6;
    color:var(--text-placeholder);
}