/* LES LOIS DU ROYAUME (US-NOS-006-154) — trois espaces.
   Téléphone : empilés. Écran (≥ 901 px) : trois colonnes. Aucune teinte neuve. */

/* `style.css` pose `header{display:flex;height:50px}` et
   `section{display:flex;max-width:40%;min-width:300px}` sur TOUS les blocs du site : sans cette
   reprise, les en-têtes de la page se couchent en ligne (titre, règle et compte se chevauchent) et
   les trois espaces débordent de la page. On reprend la main ICI, et nulle part ailleurs. */
.lois header,
.loi header{ display: block; height: auto; background: transparent; padding: 0; }
.lois .hero > section,
.loi .hero > section{ display: block; max-width: 100%; min-width: 0; padding: 0; margin: 0; }
.lois-espace{ display: block; max-width: none; min-width: 0; }

.lois .hero > section{ width: 100%; }

/* LA PAGE D'UNE LOI SE POSE AU CENTRE DE L'ÉCRAN (US-NOS-006-258) — le corpus (.lois) n'est pas visé :
   il garde ses trois colonnes. La loi garde sa mesure de 46rem ; seule sa place change, et elle se décide
   une fois, sur la section, au lieu de se répéter sur les quarante blocs qui la portent.
   `width: 100%` : sur un téléphone la colonne remplit la page comme avant (mesuré à 390 px : identique).
   `margin-left/right: auto` : dès que la fenêtre dépasse 46rem, la colonne se centre (mesuré à 900, 1366
   et 1920 px). */
.loi-page .hero > section{ width: 100%; max-width: 46rem; margin-left: auto; margin-right: auto; }

.lois-entete{ max-width: 46rem; margin: 1.5rem 0; }
.lois-titre{ font: var(--titre-grand); color: var(--couleur-encre); margin: 0 0 0.5rem; }
.lois-intro{ font: var(--texte); color: var(--couleur-encre-douce); margin: 0 0 0.75rem; }
.lois-vide{ font: var(--texte-petit); font-style: italic; color: var(--couleur-mention); margin: 0; }

/* LA PORTE DU SÉNAT (US-NOS-006-184) — un lien, à la main des liens du corpus (lois-lien). Depuis la
   story 202, .senat-porte a le relief d'un bouton : cette porte-ci garde son dessin de lien. */
.lois-senat{ display: inline-block; font: var(--texte-lien); color: var(--couleur-accent); text-decoration: none; margin: 0 0 var(--espace-objets); }
.lois-senat:hover, .lois-senat:focus{ color: var(--couleur-accent-appui); text-decoration: underline; }
/* LES LOIS ABROGÉES (US-NOS-006-205) — un second lien, à côté de la porte du Sénat, à la main des liens. */
.lois-abrogees{ display: inline-block; font: var(--texte-lien); color: var(--couleur-accent); text-decoration: none; margin: 0 0 var(--espace-objets); }
.lois-abrogees:hover, .lois-abrogees:focus{ color: var(--couleur-accent-appui); text-decoration: underline; }
.lois-senat + .lois-abrogees{ margin-left: var(--espace-etiquette); }

.lois-espaces{ display: flex; flex-direction: column; gap: 1.5rem; }
.lois-espace{ background: var(--couleur-papier); border: 1px solid var(--couleur-filet); border-radius: 6px; padding: 4%; }
.lois-espace-titre{ font: var(--titre-moyen); color: var(--couleur-encre); margin: 0 0 0.35rem; }
.lois-espace-regle{ font: var(--texte-petit); color: var(--couleur-encre-douce); margin: 0 0 0.75rem; }
.lois-espace-compte{ font: var(--etiquette); letter-spacing: var(--interlettrage-etiquette); color: var(--couleur-accent); margin: 0 0 0.75rem; }
.lois-espace-vide{ font: var(--texte-petit); font-style: italic; color: var(--couleur-mention); margin: 0; }

.lois-liste{ list-style: none; margin: 0; padding: 0; }
.lois-item{ display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.lois-numero{ flex: none; font: var(--etiquette); letter-spacing: var(--interlettrage-etiquette); color: var(--couleur-mention); }
/* La date d'abrogation, à la main du numéro (US-NOS-006-205). */
.lois-abrogee-date{ flex: none; font: var(--etiquette); letter-spacing: var(--interlettrage-etiquette); color: var(--couleur-mention); }
/* Les items de la liste des lois abrogées portent une date en plus du titre : ils se replient. */
.lois-abrogees-liste .lois-item{ flex-wrap: wrap; }
.lois-item + .lois-item{ border-top: 1px solid var(--couleur-filet-sceau); }
.lois-lien{ display: block; padding: 0.6rem 0; font: var(--texte); color: var(--couleur-accent); text-decoration: none; }
.lois-lien:hover, .lois-lien:focus{ color: var(--couleur-accent-appui); text-decoration: underline; }
/* Le titre garde sa ligne avec le numéro (US-NOS-006-232) : sa base est 0 et il prend la place qui
   reste. Sans cette reprise, le titre sautait à la ligne et le numéro restait seul (mesuré au
   téléphone et en colonne étroite). */
.lois-liste:not(.lois-abrogees-liste) > .lois-item > .lois-lien{ flex: 1 1 0; min-width: 0; }

/* Une loi, en entier */
.loi-entete{ max-width: 46rem; margin: 0 0 1.25rem; }
.loi-numero{ font: var(--etiquette); letter-spacing: var(--interlettrage-etiquette); color: var(--couleur-accent-appui); margin: 0 0 0.35rem; }
.loi-espace-nom{ font: var(--etiquette); letter-spacing: var(--interlettrage-etiquette); text-transform: uppercase; color: var(--couleur-accent-appui); margin: 0 0 0.5rem; }
.loi-titre{ font: var(--titre-grand); color: var(--couleur-encre); margin: 0; }
/* UNE LOI EN DÉLIBÉRATION LE DIT SOUS SON TITRE (US-NOS-006-263) — même famille de mention que
   l'abrogation (205) : filet de sceau, encre d'appui, aucune teinte neuve. La mesure (46rem) et la place
   viennent du cadre de la loi et de son en-tête : rien à régler au téléphone, la phrase se replie seule. */
.loi-deliberation{ margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; border-left: 4px solid var(--couleur-filet-sceau); font: var(--texte-petit); color: var(--couleur-accent-appui); }
/* LA LOI ABROGÉE (US-NOS-006-205) — le bloc qui se lit sous le texte, dans le cadre des métadonnées (US-NOS-006-249) : papier, filet de sceau à
   gauche. Le texte de la loi reste lisible au-dessus ; aucune teinte neuve. */
.loi-abrogee{ max-width: 46rem; margin: 0 0 1.25rem; padding: 0.75rem 1rem; border-left: 4px solid var(--couleur-filet-sceau); background: var(--couleur-papier); }
.loi-abrogee-mention{ font: var(--texte-petit); color: var(--couleur-accent-appui); margin: 0; }
.loi-abrogee-motif{ font: var(--texte-petit); color: var(--couleur-encre-douce); margin: 0.5rem 0 0; }
/* L'adoption d'une loi (US-NOS-006-170) : la même phrase que sur la carte du Sénat, après le texte. */
.loi-adoptee{ font: var(--texte-petit); color: var(--couleur-accent-appui); margin: 0.75rem 0 0; }
/* LES VOIX D'UNE LOI APPROUVÉE (US-NOS-006-183) : sous la phrase d'adoption, sur une ligne qui se replie. */
.loi-voix{ display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 46rem; font: var(--texte-petit); color: var(--couleur-encre-douce); margin: 0.35rem 0 0; }
.loi-voix span + span::before{ content: "\00b7"; margin-right: 0.5rem; }
.loi-voix-approbation{ color: var(--couleur-accent-appui); }
/* L'abstention (US-NOS-006-198) : les mêmes jetons que .loi-voix, une encre de mention — elle
   s'affiche à côté du pour et du contre sans prendre parti. */
.loi-voix-abstention{ color: var(--couleur-mention); }
/* Téléphone : les trois chiffres à la ligne, sans point médian — un séparateur en tête de ligne se lit
   comme une puce orpheline (mesuré sur la capture à 390 px). */
@media (max-width: 55rem){
  .loi-voix{ display: block; }
  .loi-voix span{ display: block; }
  .loi-voix span + span::before{ content: none; margin-right: 0; }
}
/* Un débat ouvert sur la page d'une loi (US-NOS-006-214) — sous le texte, en tête du cadre des métadonnées (249). */
.loi-debat-signale{ font: var(--texte-petit); color: var(--couleur-encre); margin: 0 0 1rem; max-width: 46rem; }
.loi-debat-signale-lien{ color: var(--couleur-accent); }
.loi-debat-signale-lien:hover, .loi-debat-signale-lien:focus{ color: var(--couleur-accent-appui); }
/* LE TEXTE D'UNE LOI SE LIT NET (US-NOS-006-231) — encre pleine et demi-graisse : le texte pâle fatiguait
   sur la longueur. `font-weight` APRÈS le raccourci `font:` (qui pose 400), sinon il est écrasé. */
.loi-texte{ max-width: 46rem; font: var(--texte); font-weight: 500; color: var(--couleur-encre); }
/* LE CADRE DE LA LOI (US-NOS-006-230) — le papier du document, calqué sur la carte du Sénat
   (.senat-loi) : filet, papier, angle vif, rembourrage des objets. `article` et non `section` :
   la règle globale `section{display:flex}` de style.css prendrait le cadre pour une colonne. */
.loi-document{ max-width: 46rem; border: 1px solid var(--couleur-filet); background: var(--couleur-papier); border-radius: var(--rayon-papier); padding: var(--espace-objets); margin: 0 0 var(--espace-objets); }
.loi-document > :first-child{ margin-top: 0; }
.loi-document > :last-child{ margin-bottom: 0; }
@media (max-width: 55rem){ .loi-document{ padding: 5%; } }
/* LE CADRE DES MÉTADONNÉES DE LA LOI (US-NOS-006-195, devenu un cadre en 249) — sous le cadre de la loi : la
   porte du débat, l'abrogation, l'adoption, les voix, les versions, la modification. Filet, toile, angle vif.
   `display:block` et `min-width:0` : la règle globale `section{display:flex; align-items:center;
   min-width:300px; padding:20px}` (style.css) prendrait ce bloc pour une colonne du site — le texte
   d'adoption sortait centré et rétréci (mesuré sur la capture à 390 px). C'est un `article`, comme
   `.loi-document`, pour la même raison. */
.loi-dossier{ display: block; max-width: 46rem; min-width: 0; border: 1px solid var(--couleur-filet); background: var(--couleur-toile); border-radius: var(--rayon-papier); padding: var(--espace-objets); margin: var(--espace-objets) 0 0; }
.loi-dossier > :first-child{ margin-top: 0; }
.loi-dossier .loi-modification{ margin: 0.75rem 0 0; }
@media (max-width: 55rem){ .loi-dossier{ padding: 5%; } }
.lois-retour{ font: var(--texte-lien); margin: 1rem 0; }
.lois-retour-lien{ color: var(--couleur-accent); text-decoration: none; }
.lois-retour-lien:hover{ text-decoration: underline; }

@media (min-width: 901px){
  .lois-espaces{ flex-direction: row; align-items: flex-start; gap: 3%; }
  .lois-espace{ width: 31.33%; }
}

/* LA MODIFICATION D'UNE LOI (US-NOS-006-176) — le bouton après le texte, l'annonce d'une proposition
   en attente, et la fenêtre <dialog> qui s'ouvre. Aucune teinte neuve : les jetons de jetons.css. */
.loi-modification{ display: flex; justify-content: flex-end; max-width: 46rem; margin: 0 0 var(--espace-objets); }
/* LE SEUL BOUTON VERS LES COMMENTAIRES (US-NOS-006-257) — sous le cadre de la loi. */
.loi-mots-porte{ margin: 1rem 0 0; }
/* LE CHANGEMENT DE CADRE (US-NOS-006-188) — deux boutons côte à côte. */
.loi-actions{ flex-wrap: wrap; gap: var(--espace-etiquette); }
.loi-modifier-bouton,
.loi-changer-cadre-bouton,
.loi-abroger-bouton,
.loi-mots-bouton{
  display: inline-block;
  text-decoration: none;
  font: var(--texte-bouton);
  color: var(--couleur-papier);
  background: var(--couleur-accent);
  border: 1px solid var(--couleur-accent);
  border-radius: var(--rayon-bouton);
  padding: 12px 18px;
  cursor: pointer;
}
.loi-modifier-bouton:hover, .loi-modifier-bouton:focus,
.loi-changer-cadre-bouton:hover, .loi-changer-cadre-bouton:focus,
.loi-abroger-bouton:hover, .loi-abroger-bouton:focus,
.loi-mots-bouton:hover, .loi-mots-bouton:focus{
  background: var(--couleur-accent-appui); border-color: var(--couleur-accent-appui);
}

.loi-modification-attente{ max-width: 46rem; font: var(--texte-petit); color: var(--couleur-encre-douce); margin: 0 0 var(--espace-objets); padding-top: 0.75rem; border-top: 1px solid var(--couleur-filet); }
.loi-modification-lien{ color: var(--couleur-accent); }
.loi-modification-lien:hover, .loi-modification-lien:focus{ color: var(--couleur-accent-appui); }
.loi-modification-mention{ font: var(--texte-petit); color: var(--couleur-encre-douce); margin: 0 0 var(--espace-objets); }

/* Le reset du site efface le `margin: auto` qui centre une fenêtre : on le rend. */
.loi-modifier-fenetre,
.loi-cadre-fenetre,
.loi-abrogation-fenetre{
  inset: 0;
  margin: auto;
  width: 90%;
  max-width: 32rem;
  max-height: 90vh;
  padding: var(--espace-objets);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-papier);
  background: var(--couleur-papier);
  color: var(--couleur-encre);
  font: var(--texte);
}
.loi-modifier-fenetre::backdrop,
.loi-cadre-fenetre::backdrop,
.loi-abrogation-fenetre::backdrop{ background: rgba(0, 0, 0, 0.5); }
.loi-modifier-titre,
.loi-cadre-fenetre-titre,
.loi-abrogation-titre{ font: var(--titre-objet); color: var(--couleur-encre); margin: 0 0 var(--espace-etiquette); }
.loi-modifier-formulaire,
.loi-cadre-fenetre-formulaire,
.loi-abrogation-formulaire{ display: flex; flex-direction: column; gap: var(--espace-texte); margin: 0; padding: 0; border: 0; background: transparent; width: auto; text-align: left; }
.loi-modifier-formulaire label,
.loi-abrogation-formulaire label{ display: block; width: auto; margin: 0; font: var(--texte); color: var(--couleur-encre); }
.loi-modifier-champ,
.loi-abrogation-champ{
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em;
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-champ);
  background: var(--couleur-papier);
  color: var(--couleur-encre);
  font: var(--texte);
}
textarea.loi-modifier-champ{ min-height: 12rem; }
/* Le motif d'une demande d'abrogation (US-NOS-006-203) : plus court qu'un texte de loi. */
textarea.loi-abrogation-champ{ min-height: 6rem; }
.loi-cadre-fenetre-phrase{ font: var(--texte); color: var(--couleur-encre-douce); margin: 0; }
.loi-abrogation-phrase{ font: var(--texte); color: var(--couleur-encre-douce); margin: 0 0 var(--espace-texte); }
.loi-cadre-fenetre-boutons,
.loi-abrogation-boutons{ display: flex; flex-direction: column; gap: var(--espace-etiquette); }
.loi-modifier-envoyer,
.loi-cadre-fenetre-envoyer,
.loi-abrogation-envoyer{ margin-top: var(--espace-etiquette); }
.loi-modifier-fermer,
.loi-cadre-fenetre-fermer,
.loi-abrogation-fermer{
  padding: 0.6em 1em;
  border: 0;
  background: transparent;
  color: var(--couleur-accent);
  font: var(--texte);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 55rem){
  .loi-modification{ max-width: none; }
  .loi-modifier-bouton,
  .loi-changer-cadre-bouton,
  .loi-abroger-bouton,
  .loi-mots-bouton{ width: 100%; text-align: center; }
}

/* L'HISTOIRE D'UNE LOI (US-NOS-006-178) : la mention, le lien, et la page des versions. */
/* LE CHANGEMENT DE CADRE (US-NOS-006-190, resserré par la 229) garde la main de « Modifiée le … », avec un peu d'air en plus. */
.loi-modifiee,
.loi-changement-cadre{ font: var(--texte-petit); color: var(--couleur-accent-appui); margin: 0.25rem 0 0; }
.loi-changement-cadre{ margin-bottom: 0.75rem; }
.loi-historique-lien{ font: var(--texte-lien); margin: 0.5rem 0 0; }
.loi-historique-lien-a{ color: var(--couleur-accent); text-decoration: none; }
.loi-historique-lien-a:hover{ text-decoration: underline; }
.loi-historique-version{ max-width: 46rem; margin: 1rem 0; padding: 0.75rem 1rem; border: 1px solid var(--couleur-filet); border-radius: var(--rayon-champ); background: var(--couleur-papier); }
.loi-historique-vigueur{ border-left: 4px solid var(--couleur-filet-sceau); }
.loi-historique-titre{ font: var(--titre-objet); color: var(--couleur-encre); margin: 0 0 var(--espace-etiquette); }
.loi-historique-version summary{ font: var(--texte); color: var(--couleur-accent-appui); cursor: pointer; }
.loi-historique-version[open] summary{ margin-bottom: var(--espace-etiquette); }

@media (max-width: 55rem){
  .loi-historique-version{ max-width: none; }
}


/* LE DÉBAT D'UNE LOI (US-NOS-006-192) — le fil des messages, et le formulaire d'ouverture.
   Aucune teinte neuve : les jetons de jetons.css. */
.loi-debat-messages{ list-style: none; max-width: 46rem; margin: 1rem 0; padding: 0; }
.loi-debat-message{ margin: 0 0 var(--espace-etiquette); padding: 0.75rem 1rem; border: 1px solid var(--couleur-filet); border-radius: var(--rayon-champ); background: var(--couleur-papier); }
.loi-debat-message-entete{ margin: 0 0 0.25rem; }
.loi-debat-message-auteur{ font: var(--titre-objet); color: var(--couleur-encre); }
.loi-debat-message-date{ font: var(--texte-petit); color: var(--couleur-encre-douce); margin-left: 0.5rem; }
.loi-debat-message-texte{ font: var(--texte); color: var(--texte); margin: 0; overflow-wrap: anywhere; }
.loi-debat-message-versions{ margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--couleur-filet); }
.loi-debat-message-versions summary{ font: var(--texte); color: var(--couleur-accent-appui); cursor: pointer; }
.loi-debat-message-version-date{ font: var(--texte-petit); color: var(--couleur-encre-douce); margin: 0.5rem 0 0.25rem; }
.loi-debat-message-version-texte{ font: var(--texte); color: var(--couleur-encre-douce); margin: 0; overflow-wrap: anywhere; }
.loi-debat-message-modifie{ font: var(--texte-petit); color: var(--couleur-encre-douce); margin-left: 0.5rem; }
.loi-debat-message-modifier{ font: var(--texte-lien); color: var(--couleur-accent); }
.loi-debat-vide,
.loi-debat-note{ font: var(--texte-petit); color: var(--couleur-encre-douce); max-width: 46rem; }
.loi-debat-ouvrir,
.loi-debat-ecrire-formulaire{ display: flex; flex-direction: column; gap: var(--espace-etiquette); max-width: 46rem; margin: 1rem 0; padding: 0; border: 0; background: transparent; width: auto; text-align: left; }
.loi-debat-ouvrir label,
.loi-debat-ecrire-formulaire label{ display: block; width: auto; margin: 0; font: var(--texte); color: var(--couleur-encre); }
.loi-debat-champ{ width: 100%; min-height: 8rem; font: var(--texte); border: 1px solid var(--couleur-filet); border-radius: var(--rayon-champ); padding: 0.5rem; box-sizing: border-box; }
.loi-debat-envoyer{
  align-self: flex-start;
  font: var(--texte-bouton);
  color: var(--couleur-papier);
  background: var(--couleur-accent);
  border: 1px solid var(--couleur-accent);
  border-radius: var(--rayon-bouton);
  padding: 12px 18px;
  cursor: pointer;
}

@media (max-width: 55rem){
  .loi-debat-messages,
  .loi-debat-ouvrir{ max-width: none; }
  .loi-debat-envoyer{ align-self: stretch; }
}

/* ÉCRIRE DANS LE DÉBAT (US-NOS-006-194) — le bloc sous le fil, séparé par un filet ; la note pour qui ne peut pas écrire.
   `display:block` : la règle globale `section{display:flex; max-width:40%; min-width:300px}` (style.css) prendrait
   ce bloc pour une colonne du site et le réduirait à un tiers de la page. Aucune teinte neuve : les jetons de jetons.css. */
.loi-debat-ecrire{ display: block; max-width: 46rem; min-width: 0; margin: 1.5rem 0; padding: 1rem 0 0; border-top: 1px solid var(--couleur-filet); }
.loi-debat-ecrire-titre{ font: var(--titre-objet); color: var(--couleur-encre); margin: 0 0 var(--espace-etiquette); padding: 0; }
.loi-debat-ecrire-champ{ width: 100%; min-height: 8rem; font: var(--texte); border: 1px solid var(--couleur-filet); border-radius: var(--rayon-champ); padding: 0.5rem; box-sizing: border-box; }
.loi-debat-ecrire-envoyer{
  align-self: flex-start;
  font: var(--texte-bouton);
  color: var(--couleur-papier);
  background: var(--couleur-accent);
  border: 1px solid var(--couleur-accent);
  border-radius: var(--rayon-bouton);
  padding: 12px 18px;
  cursor: pointer;
}
.loi-debat-ecrire-envoyer:hover, .loi-debat-ecrire-envoyer:focus{ background: var(--couleur-accent-appui); border-color: var(--couleur-accent-appui); }
.loi-debat-ecrire-note{ font: var(--texte-petit); color: var(--couleur-encre-douce); max-width: 46rem; }
.loi-debat-ecrire-lien{ color: var(--couleur-accent); }
/* ÊTRE PRÉVENU DES NOUVEAUX MESSAGES (US-NOS-006-216) — entre le fil et le formulaire. `display:block` pour la même
   raison que ci-dessus : la règle globale `section{display:flex; max-width:40%}` en ferait une colonne du site. */
.loi-debat-abonnement{ display: block; max-width: 46rem; min-width: 0; margin: 0 0 1rem; }
.loi-debat-abonnement-etat{ font: var(--texte-petit); color: var(--couleur-encre-douce); margin: 0 0 var(--espace-etiquette); }
.loi-debat-abonnement-bouton{ font: var(--texte-bouton); color: var(--couleur-accent); background: transparent; border: 1px solid var(--couleur-accent); border-radius: var(--rayon-bouton); padding: 8px 14px; cursor: pointer; }
.loi-debat-abonnement-bouton:hover, .loi-debat-abonnement-bouton:focus{ background: var(--couleur-accent); color: var(--couleur-papier); }
/* UN DÉBAT CLOS RESTE LISIBLE (US-NOS-006-234) — la mention au-dessus du fil : papier, filet de sceau
   à gauche, comme .loi-abrogee. */
.loi-debat-clos{ display: block; max-width: 46rem; margin: 0 0 1rem; padding: 0.75rem 1rem; border-left: 4px solid var(--couleur-filet-sceau); background: var(--couleur-papier); font: var(--texte-petit); color: var(--couleur-encre); }

/* CHAQUE PROPOSITION A SON DÉBAT (US-NOS-006-235) — la liste des débats d'une loi, et le débat d'une proposition
   sur la page de sa modification. `display:block` : la règle globale `section{display:flex; max-width:40%; min-width:300px}`
   (style.css) prendrait la section pour une colonne du site. Aucune teinte neuve : les jetons de jetons.css. */
.loi-debats{ display: block; max-width: 46rem; min-width: 0; margin: 0 0 1rem; padding: 0.75rem 0 0; border-top: 1px solid var(--couleur-filet); }
.loi-debats-titre{ font: var(--titre-objet); color: var(--couleur-encre); margin: 0 0 var(--espace-etiquette); padding: 0; }
.loi-debats-liste{ list-style: none; margin: 0; padding: 0; }
.loi-debats-liste .loi-debat-signale{ margin: 0 0 0.5rem; }
.loi-debats-intitule{ margin-right: 0.5rem; }
.loi-debat-objet{ font: var(--texte-petit); color: var(--couleur-encre-douce); margin: 0.25rem 0 0; }
.loi-modification-debat{ font: var(--texte-petit); color: var(--couleur-encre); margin: 1rem 0; max-width: 46rem; }
.loi-modification-debat-lien{ color: var(--couleur-accent); }

@media (max-width: 55rem){
  .loi-debat-ecrire{ max-width: none; }
  .loi-debat-ecrire-envoyer{ align-self: stretch; }
  .loi-debat-abonnement{ max-width: none; }
  .loi-debat-abonnement-bouton{ width: 100%; }
  .loi-debat-clos{ max-width: none; }
  .loi-debats, .loi-modification-debat{ max-width: none; }
  .loi-debats-intitule{ display: block; margin: 0 0 0.25rem; }
}

/* LES MOTS SOUS LA LOI (US-NOS-006-244) — sous le dossier, avant « Toutes les lois ». Ils restent quand le débat est
   fermé. `display:block` : la règle globale `section{display:flex; max-width:40%; min-width:300px}` (style.css)
   prendrait la section pour une colonne du site. Les formulaires réutilisent ceux du débat. Aucune teinte neuve :
   les jetons de jetons.css. */
.loi-mots{ display: block; max-width: 46rem; min-width: 0; margin: 1.5rem 0; padding: 1rem 0 0; border-top: 1px solid var(--couleur-filet); }
.loi-mots-titre{ font: var(--titre-objet); color: var(--couleur-encre); margin: 0 0 var(--espace-etiquette); padding: 0; }
.loi-mots-liste{ list-style: none; margin: 1rem 0; padding: 0; }
.loi-mots-vide,
.loi-mots-note{ font: var(--texte-petit); color: var(--couleur-encre-douce); max-width: 46rem; }
.loi-mot{ margin: 0 0 var(--espace-etiquette); padding: 0.75rem 1rem; border: 1px solid var(--couleur-filet); border-radius: var(--rayon-champ); background: var(--couleur-papier); }
.loi-mot-entete{ margin: 0 0 0.25rem; }
.loi-mot-auteur{ font: var(--titre-objet); color: var(--couleur-encre); }
.loi-mot-date{ font: var(--texte-petit); color: var(--couleur-encre-douce); margin-left: 0.5rem; }
.loi-mot-modifie{ font: var(--texte-petit); color: var(--couleur-encre-douce); margin-left: 0.5rem; }
.loi-mot-texte{ font: var(--texte); color: var(--couleur-encre); margin: 0; overflow-wrap: anywhere; }
.loi-mot-versions{ margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--couleur-filet); }
.loi-mot-versions summary{ font: var(--texte); color: var(--couleur-accent-appui); cursor: pointer; }
.loi-mot-versions[open] summary{ margin-bottom: var(--espace-etiquette); }
.loi-mot-version-date{ font: var(--texte-petit); color: var(--couleur-encre-douce); margin: 0.5rem 0 0.25rem; }
.loi-mot-version-texte{ font: var(--texte); color: var(--couleur-encre-douce); margin: 0; overflow-wrap: anywhere; }
.loi-mot-corriger{ font: var(--texte-lien); color: var(--couleur-accent); }

@media (max-width: 55rem){
  .loi-mots{ max-width: none; }
}

/* LE RETOUR RESTE SOUS LES YEUX (US-NOS-006-248) — le lien qui quitte le débat ne se perd plus au bout
   d'un fil de trente messages : il se colle au bas de l'écran et suit la lecture.
   `sticky` et non `fixed` : la barre garde sa place dans la page, donc elle ne recouvre rien et il n'y a
   aucun décalage à rattraper. Aucune teinte neuve : le papier et le filet. */
.loi-debat-retour{
  position: sticky;
  bottom: 0;
  z-index: 5;
  max-width: 46rem;
  margin: 1.5rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--couleur-papier);
  border-top: 1px solid var(--couleur-filet);
}
.loi-debat-retour .lois-retour{ margin: 0; }

/* Téléphone : la barre prend toute la largeur, le lien prend sa ligne — une cible qu'on atteint au pouce. */
@media (max-width: 55rem){
  .loi-debat-retour{ max-width: none; width: 100%; padding: 0; }
  .loi-debat-retour .lois-retour-lien{ display: block; padding: 0.8rem 4%; text-align: center; }
}

/* LES POINTS REÇUS PAR UNE LOI (US-NOS-006-267, idée 169) — un badge par type, sous le titre : le nom du
   point et son compte (« hahaha 3 »). La couleur vient de la table des types (`--point-couleur`) : le dessin
   n'en connaît aucune. Le texte reste à l'encre, sur papier — une couleur pâle ne doit pas le rendre muet.
   La ligne se replie seule : rien à régler au téléphone. */
.loi-points{ display: flex; flex-wrap: wrap; gap: 0.4rem; max-width: 46rem; margin: 0.75rem 0 0; }
.loi-point-badge{ display: inline-block; padding: 0.15rem 0.55rem; border: 1px solid var(--point-couleur, var(--couleur-filet)); border-radius: var(--rayon-bouton); font: var(--etiquette); letter-spacing: var(--interlettrage-etiquette); color: var(--couleur-encre); background: var(--couleur-papier); }

/* US-NOS-006-275 (idée 175) : quand le type a son image, elle remplace le mot — plus de filet de couleur
   (le pictogramme porte la sienne), l'image puis le compte, centrés. La taille est en em (2em, comme
   l'étoile) : elle suit la police de l'étiquette. Sans image, .loi-point-badge reste exactement ce qu'il
   était — c'est le repli. */
.loi-point-badge--image{ display: inline-flex; align-items: center; gap: 0.4em; padding: 0; border: 0; background: none; }
.loi-point-image{ height: 2em; width: auto; display: block; }