/* 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%; }

.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; }

.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; }
.lois-numero{ flex: none; font: var(--etiquette); letter-spacing: var(--interlettrage-etiquette); color: var(--couleur-mention); }
.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; }

/* 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; }
/* 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; }
}
.loi-texte{ max-width: 46rem; font: var(--texte); color: var(--couleur-encre-douce); }
/* LE DOSSIER DE LA LOI SE LIT APRÈS SON TEXTE (US-NOS-006-195).
   `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). */
.loi-dossier{ display: block; max-width: 46rem; min-width: 0; margin: var(--espace-objets) 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--couleur-filet); }
.loi-dossier > :first-child{ margin-top: 0; }
.loi-dossier .loi-modification{ margin: 0.75rem 0 0; }
.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 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{
  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{
  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{
  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{ background: rgba(0, 0, 0, 0.5); }
.loi-modifier-titre,
.loi-cadre-fenetre-titre{ font: var(--titre-objet); color: var(--couleur-encre); margin: 0 0 var(--espace-etiquette); }
.loi-modifier-formulaire,
.loi-cadre-fenetre-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{ display: block; width: auto; margin: 0; font: var(--texte); color: var(--couleur-encre); }
.loi-modifier-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; }
.loi-cadre-fenetre-phrase{ font: var(--texte); color: var(--couleur-encre-douce); margin: 0; }
.loi-cadre-fenetre-boutons{ display: flex; flex-direction: column; gap: var(--espace-etiquette); }
.loi-modifier-envoyer,
.loi-cadre-fenetre-envoyer{ margin-top: var(--espace-etiquette); }
.loi-modifier-fermer,
.loi-cadre-fenetre-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{ width: 100%; }
}

/* L'HISTOIRE D'UNE LOI (US-NOS-006-178) : la mention, le lien, et la page des versions. */
/* LE NUMÉRO D'AVANT (US-NOS-006-190) garde la main de « Modifiée le … », avec un peu d'air en plus. */
.loi-modifiee,
.loi-numero-ancien{ font: var(--texte-petit); color: var(--couleur-accent-appui); margin: 0.25rem 0 0; }
.loi-numero-ancien{ 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-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); }

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