/*!**********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/pages/lois/lois.scss ***!
  \**********************************************************************************************************************/
@charset "UTF-8";
/* /lois/ — la rubrique qui démêle les lois, à son ouverture : une annonce
   franche (chantier en cours), le jeu du fil emmêlé, ce qu'on y trouvera et
   ce qui est déjà rangé. */
.lois {
  padding-block: 8px 44px;
}
.lois h1 {
  margin: 6px 0 10px;
  line-height: 1.12;
}
.lois h2 {
  margin: 0 0 10px;
  font-size: 1.25rem;
}

.lois-chapo {
  max-width: 62ch;
  margin: 0 0 18px;
  color: var(--mut);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Le battement du voyant de la tour de contrôle. (Le bandeau « Version bêta »
   qui le portait en tête des sous-pages est retiré depuis le 09/10/2026 : la
   phrase ne se dit plus que dans le bloc « Version bêta » de l'accueil.) */
@keyframes lois-battement {
  50% {
    opacity: 0.25;
  }
}
/* ── La tête de page : la rubrique à gauche, « Participer » à droite ──
   Deux colonnes quand la largeur le permet ; empilées sinon, le formulaire
   après la présentation. */
.lois-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px 44px;
  align-items: start;
  margin: 0 0 30px;
}

.lois-tete__a {
  min-width: 0;
}

@media (min-width: 900px) {
  .lois-tete {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  }
}
/* ── L'emblème ──
   Une petite balance à droite de l'en-tête de la tour de contrôle, sous un
   bandeau tricolore qui coiffe le panneau. Dessin maison : aucun logo
   officiel. (C'était une grande carte : « très grande », réduite le soir même.) */
.lois-embleme {
  flex: none;
  display: block;
  width: 58px;
  height: auto;
}

.lois-embleme__tricolore {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  height: 4px;
}
.lois-embleme__tricolore i {
  flex: 1;
}
.lois-embleme__tricolore i:nth-child(1) {
  background: #0055a4;
}
.lois-embleme__tricolore i:nth-child(2) {
  background: #f5f5f5;
}
.lois-embleme__tricolore i:nth-child(3) {
  background: #ef4135;
}

/* Trait d'épaisseur constante : à 58 px, un trait proportionnel disparaîtrait. */
.lois-embleme__balance {
  stroke: var(--cream);
  stroke-width: 1.5px;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

.lois-embleme__balance > * {
  vector-effect: non-scaling-stroke;
}

/* ── La tour de contrôle : le passage de la nuit ──
   Sous l'emblème. Un voyant, la nuit, ce qui a été lu, les textes touchés.
   Trois couleurs d'état, réservées au voyant ; le reste est en encre. */
/* `minmax(0, 1fr)` : sans lui, les titres en `nowrap` élargissent la colonne
   et le panneau déborde d'un téléphone. */
.lois-tete__b {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.lois-tour {
  --tour-ok: #4ade80;
  --tour-alerte: #f59e0b;
  --tour-incident: #f87171;
  position: relative;
  overflow: hidden;
  padding: 16px 18px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
.lois-tour .lois-tour__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}
.lois-tour h2 {
  margin: 0;
  color: var(--mut);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lois-tour p {
  margin: 0;
}

.lois-tour__voyant {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mut);
}

.lois-tour__voyant--ok {
  background: var(--tour-ok);
  box-shadow: 0 0 8px var(--tour-ok);
}

.lois-tour__voyant--en_cours,
.lois-tour__voyant--retard {
  background: var(--tour-alerte);
  box-shadow: 0 0 8px var(--tour-alerte);
}

.lois-tour__voyant--incident {
  background: var(--tour-incident);
  box-shadow: 0 0 8px var(--tour-incident);
}

.lois-tour h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lois-tour h2 .lois-tour__voyant {
  animation: lois-battement 2.2s ease-in-out infinite;
}

/* Le fil de la console : mêmes verts que la tour de /mathematiques/genealogie/
   (demande du 08/10/2026 au soir). Hauteur fixe, on remonte à la molette. */
.lois-tour__corps {
  height: 250px;
  overflow-y: auto;
  padding: 8px 10px;
  background: linear-gradient(180deg, #0c1017, #080b10);
  border: 1px solid #262e3a;
  border-radius: 8px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
  font: 12px/1.65 ui-monospace, "Cascadia Mono", Consolas, monospace;
  scrollbar-width: thin;
  scrollbar-color: #2a313c #05070a;
}

/* Les lignes elles-mêmes (.tdc__*) viennent du composant commun,
   assets/pages/tour-de-controle.scss. */
@media (prefers-reduced-motion: reduce) {
  .lois-tour h2 .lois-tour__voyant {
    animation: none;
  }
}
/* ── Le dessin de tête : les lois par décennie ──
   Une colonne par décennie, hauteur strictement proportionnelle, une seule
   couleur. La décennie en cours est hachurée : elle n'est pas finie. Les
   nombres sont écrits sur chaque colonne — les plus petites (une loi) ne se
   verraient pas autrement. */
.lois-deco {
  margin: 6px 0 0;
}
.lois-deco figcaption {
  margin: 0 0 10px;
  color: var(--cream);
  font-size: 1.02rem;
}
.lois-deco figcaption strong {
  font-size: 1.5rem;
  font-weight: 800;
}
.lois-deco figcaption small {
  display: block;
  color: var(--mut);
  font-size: 0.82rem;
}

.lois-deco__g {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 206px;
  list-style: none;
  margin: 0;
  padding: 16px 0 0; /* la place du nombre au-dessus de la plus haute colonne */
}
.lois-deco__g li {
  flex: 1 1 0;
  min-width: 0;
}
.lois-deco__g a, .lois-deco__g .lois-deco__vide {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  color: var(--mut);
  text-decoration: none;
  text-align: center;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.lois-deco__b {
  position: relative;
  align-self: end;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--acc);
  /* Le nombre, posé sur la colonne. */
}
.lois-deco__b::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  padding-bottom: 3px;
  color: var(--txt);
  line-height: 1;
}

.lois-deco__vide .lois-deco__b {
  background: var(--line);
  min-height: 1px;
}

.lois-deco__a {
  padding-top: 5px;
  border-top: 1px solid var(--line);
  line-height: 1;
}

.lois-deco__c--cours .lois-deco__b {
  background: repeating-linear-gradient(135deg, var(--acc) 0 4px, transparent 4px 7px);
  box-shadow: inset 0 0 0 1px var(--acc);
}

.lois-deco__g a:hover .lois-deco__b,
.lois-deco__g a:focus-visible .lois-deco__b {
  filter: brightness(1.25);
}

.lois-deco__g a:hover .lois-deco__a,
.lois-deco__g a:focus-visible .lois-deco__a {
  color: var(--cream);
}

/* La note du dessin, remontée sous le chapô : même bloc, un ton plus petit. */
.lois-chapo--suite {
  margin-top: -8px;
  font-size: 0.95rem;
}
.lois-chapo--suite a {
  color: var(--acc);
  white-space: nowrap;
}

/* À l'étroit, une année sur deux : quinze étiquettes ne tiennent pas. */
@media (max-width: 560px) {
  .lois-deco__g li:nth-child(even) .lois-deco__a {
    color: transparent;
  }
}
/* ── La préface ──
   Pourquoi, pour qui, comment lire : trois colonnes quand la largeur le
   permet. L'étiquette « prototype » est à côté du titre, pas en note de bas
   de page : c'est une information sur ce qu'on lit. */
.lois-preface {
  margin: 0 0 30px;
}

.lois-preface__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 12px;
}
.lois-preface__tete h2 {
  margin: 0;
}

.lois-etiquette {
  padding: 1px 9px;
  border: 1px dashed var(--acc);
  border-radius: 999px;
  color: var(--acc);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

/* « Ce que vous trouverez », rangé dans la préface : même pas que les colonnes. */
.lois-preface > h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.lois-preface .lois-etapes {
  margin-bottom: 12px;
}

/* « Pour comprendre », rangé lui aussi dans la préface : un peu d'air avant
   son titre, et après le bloc « Où chercher le sens ». */
.lois-preface__col p + p {
  margin-top: 8px;
}

.lois-preface__portes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
  margin: 0 0 12px;
}

.lois-preface__porte {
  margin: 0;
}

.lois-preface__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 12px;
  margin: 0 0 12px;
}

.lois-preface__col {
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  line-height: 1.6;
}
.lois-preface__col h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.lois-preface__col p {
  margin: 0;
  color: var(--txt);
}
.lois-preface__col ul {
  margin: 0;
  padding-left: 18px;
  color: var(--txt);
}
.lois-preface__col li {
  margin: 0 0 4px;
}

/* Les sources, sous « Ce que la rubrique ne traite pas » : le nom en lien, ce
   qu'on y prend en petit dessous. */
.lois-preface__col h3:not(:first-child) {
  margin-top: 18px;
}

.lois-sources-liste {
  list-style: none;
  padding-left: 0 !important;
}
.lois-sources-liste li {
  margin: 0 0 8px;
  line-height: 1.35;
}
.lois-sources-liste a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lois-sources-liste small {
  display: block;
  color: var(--mut);
  font-size: 0.8rem;
}

/* La liste des codes : deux colonnes dans sa carte, le compte en petit. */
.lois-preface__cols--codes {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .lois-preface__cols--codes {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}
.lois-codes {
  columns: 2 240px;
  column-gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lois-codes li {
  break-inside: avoid;
  margin: 0 0 10px;
  line-height: 1.35;
}
.lois-codes small {
  display: block;
  color: var(--mut);
  font-size: 0.8rem;
}
.lois-codes a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lois-codes .lois-codes__f {
  font-size: 0.84rem;
}
.lois-codes .lois-codes__p {
  display: block;
}

.lois-codes__note {
  margin: 10px 0 0;
  color: var(--mut);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ── Les chantiers à venir : des portes, pas encore des pages ──
   Bord en pointillé et aucune adresse : rien ne laisse croire qu'on peut
   déjà entrer. */
.lois-portes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}
.lois-portes li {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px 18px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--mut);
  line-height: 1.55;
}
.lois-portes strong {
  color: var(--cream);
  font-size: 1.05rem;
}
.lois-portes .lois-etiquette {
  justify-self: start;
}
.lois-portes {
  /* Une porte ouverte : bord plein, et le titre devient un lien. */
}
.lois-portes .lois-portes__ouverte {
  border-style: solid;
  border-color: var(--acc);
  background: var(--card);
}
.lois-portes .lois-portes__ouverte a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lois-portes .lois-portes__ouverte a:hover, .lois-portes .lois-portes__ouverte a:focus-visible {
  color: var(--acc);
}

/* ── Participer au chantier ── */
/* En vert (demande du 08/10/2026) : c'est l'invitation à agir, à ne pas
   confondre avec l'orange de nos explications ni le rouge des sanctions. */
.lois-participer {
  --vert: #4ade80;
  padding: 18px 20px 20px;
  background: color-mix(in srgb, var(--vert) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--vert) 40%, var(--line));
  border-top: 3px solid var(--vert);
  border-radius: 14px;
}
.lois-participer h2, .lois-participer h3 {
  margin: 0 0 8px;
  color: var(--vert);
}
.lois-participer .lois-participer__form button {
  background: var(--vert);
}
.lois-participer .lois-participer__form textarea:focus-visible {
  outline-color: var(--vert);
}
.lois-participer p {
  margin: 0 0 10px;
  color: var(--mut);
  line-height: 1.55;
}

.lois-participer__exemples {
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--txt);
  line-height: 1.6;
}

.lois-participer__form {
  display: grid;
  gap: 10px;
}
.lois-participer__form label {
  display: grid;
  gap: 6px;
  color: var(--cream);
  font-weight: 600;
}
.lois-participer__form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--txt);
  font: inherit;
  font-weight: 400;
  line-height: 1.5;
  resize: vertical;
}
.lois-participer__form textarea:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}
.lois-participer__form button {
  justify-self: start;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--acc);
  color: #111;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.lois-participer__form button:hover {
  filter: brightness(1.08);
}
.lois-participer__form button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}
.lois-participer__form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.lois-participer__info {
  color: #fbbf24 !important;
  font-size: 0.9rem;
}

.lois-participer__compte {
  margin: 2px 0 0 !important;
  font-size: 0.84rem;
}

/* ── Les blocs de texte ── */
.lois-bloc {
  max-width: 68ch;
  margin: 0 0 30px;
}
.lois-bloc p {
  margin: 0 0 10px;
  line-height: 1.7;
}

/* ── L'accueil en blocs bien définis (demande du 08/10/2026) ──
   Six blocs, chacun sous son filet (.lois-sec) et un titre plus grand que
   les sous-titres : on doit voir où un bloc finit et où le suivant commence. */
.lois--accueil .lois-tete {
  margin-bottom: 0;
}
.lois--accueil .lois-tete h2#loisEtapes {
  margin: 26px 0 12px;
}
.lois--accueil {
  /* Trois cases sur une ligne dans la colonne de gauche, pas deux et une. */
}
.lois--accueil .lois-tete .lois-etapes {
  margin-bottom: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.lois--accueil .lois-sec > h2, .lois--accueil .lois-sec > .lois-preface__tete h2 {
  font-size: 1.45rem;
}
.lois--accueil .lois-sec > h2 {
  margin-bottom: 16px;
}
.lois--accueil h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
  color: var(--cream);
}
.lois--accueil .lois-sec > h3 {
  margin-top: 26px;
}
.lois--accueil .lois-preface {
  margin-bottom: 0;
}
.lois--accueil .lois-portes {
  margin-bottom: 0;
}
.lois--accueil .lois-sources {
  margin-top: 40px;
}

.lois-bloc--dans {
  margin: 0;
}
.lois-bloc--dans h3:not(:first-child) {
  margin-top: 22px;
}

/* « Déjà rangé ici » à gauche, « Participer » à droite ; l'un sous l'autre
   sur un téléphone. */
.lois-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px 44px;
  align-items: start;
}

@media (min-width: 900px) {
  .lois-duo {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  }
}
.lois-etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 12px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  counter-reset: etape;
}
.lois-etapes li {
  counter-increment: etape;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  line-height: 1.55;
  color: var(--mut);
}
.lois-etapes li::before {
  content: counter(etape);
  display: block;
  margin-bottom: 6px;
  color: var(--acc);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.lois-etapes strong {
  display: block;
  margin-bottom: 4px;
  color: var(--cream);
  font-size: 1.05rem;
}

.lois-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  list-style: none;
  margin: 14px 0 6px;
  padding: 0;
  color: var(--mut);
}
.lois-chiffres strong {
  display: block;
  color: var(--cream);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.lois-compte {
  margin: 0;
  color: var(--mut);
  font-size: 0.86rem;
}

.lois-sources {
  margin: 0;
  color: var(--mut);
  font-size: 0.9rem;
}

/* ── Les fils ouverts, sur la page d'annonce ── */
.lois-fils {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

/* ── « L'essentiel » d'un fil : un tableau des textes, puis des volets de cartes ── */
.lois-essentiel {
  margin: 0 0 34px;
}

#loisEssentiel {
  scroll-margin-top: 90px;
}

.lois-articulation {
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.lois-articulation__l {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 20px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lois-articulation__l:last-child {
  border-bottom: 0;
}
.lois-articulation__l p {
  margin: 0;
  line-height: 1.5;
}

.lois-articulation__t {
  font-weight: 600;
}
.lois-articulation__t a {
  color: var(--cream);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.lois-articulation__t a:hover, .lois-articulation__t a:focus-visible {
  color: var(--acc);
}

.lois-articulation__r {
  color: var(--txt);
}

@media (min-width: 800px) {
  .lois-articulation__l {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    align-items: baseline;
  }
}
.lois-essentiel__g {
  margin: 0 0 10px;
}

.lois-essentiel__h {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.3;
}

.lois-essentiel .lois-suite .lois-case__cit a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* « Et si la règle n'est pas respectée ? » : une carte par règle ; celle
   qui n'a pas de sanction dans les textes est en pointillé. */
.lois-sanctions {
  margin-bottom: 30px;
}

/* ── Un fil : trois natures de texte, trois couleurs (retour du 08/10/2026) ──
   L'utilisateur voulait qu'on reconnaisse d'un coup d'œil ce qui est NOTRE
   lecture des textes, et ce qui est un risque :
   - orange clair : les limites à lire, le bouton qui révèle les explications,
     le tableau d'articulation — « sans en mettre partout » ;
   - rouge : « Risques et sanctions », remonté sous l'essentiel (« danger ») ;
   - et une séparation franche entre les grands blocs d'un fil. */
.lois {
  --clair: #fdba74;
  --danger: #f87171;
}

/* La séparation : un filet sur toute la largeur, avec une amorce de couleur. */
.lois-sec {
  position: relative;
  margin-top: 46px;
  padding-top: 30px;
  border-top: 2px solid var(--line);
}
.lois-sec::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 84px;
  height: 2px;
  background: var(--acc);
}
.lois-sec > h2:first-child {
  margin-top: 0;
}

/* Orange clair : ce que nous expliquons. */
.lois-essentiel.lois-sec::before, .lois-resume.lois-sec::before {
  background: var(--clair);
}

.lois-essentiel > .lois-avert, .lois-resume > .lois-avert {
  border-color: var(--clair);
  background: color-mix(in srgb, var(--clair) 9%, transparent);
}
.lois-essentiel > .lois-avert h3, .lois-resume > .lois-avert h3 {
  color: var(--clair);
}

.lois-resume__voir > .lois-resume__bouton {
  background: var(--clair);
}

/* Le bouton tient DANS le cadre des limites (retour du 09/10/2026) : le cadre
   s'ouvre vers le bas et le volet fermé en dessine le pied, même bordure et
   même fond. Le balisage ne change pas — le cadre, puis le volet. */
.lois-essentiel > aside.lois-avert, .lois-resume > aside.lois-avert {
  margin-bottom: 0;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.lois-essentiel > .lois-resume__voir:not([open]), .lois-resume > .lois-resume__voir:not([open]) {
  margin: 0 0 18px;
  padding: 0 18px 14px;
  border: 1px solid var(--clair);
  border-top: 0;
  border-left-width: 4px;
  border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, var(--clair) 9%, transparent);
}

/* Explications ouvertes : les limites, lues, se retirent ; le rappel qui ferme
   les explications reste. Sans `:has()`, elles restent simplement affichées. */
.lois-essentiel:has(> .lois-resume__voir[open]) > aside.lois-avert,
.lois-resume:has(> .lois-resume__voir[open]) > aside.lois-avert {
  display: none;
}

/* Une fois ouvertes, les explications restent bordées d'orange clair : on
   sait jusqu'où va notre lecture. */
.lois-essentiel > .lois-resume__voir[open] {
  padding-left: 16px;
  border-left: 3px solid var(--clair);
}

.lois-essentiel .lois-auj__h {
  color: var(--clair);
}

.lois-essentiel .lois-articulation {
  border-color: color-mix(in srgb, var(--clair) 55%, var(--line));
}

.lois-essentiel .lois-articulation__t a {
  color: var(--clair);
}

/* Rouge : risques et sanctions. */
.lois-sanctions.lois-sec {
  border-top-color: color-mix(in srgb, var(--danger) 45%, var(--line));
}

.lois-sanctions.lois-sec::before {
  background: var(--danger);
}

.lois-sanctions > h2 {
  color: var(--danger);
}
.lois-sanctions > h2::before {
  content: "⚠ ";
  font-weight: 400;
}

/* (Deux classes : .lois-case, définie plus bas, pose sa propre bordure.) */
.lois-sanctions .lois-sanction {
  border-left: 3px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 6%, var(--card));
}
.lois-sanctions .lois-sanction .lois-case__q {
  color: color-mix(in srgb, var(--danger) 65%, var(--mut));
}

/* Une règle sans sanction dans les textes : ni rouge, ni pleine. */
.lois-sanctions .lois-sanction--aucune {
  border-left-color: var(--mut);
  border-style: dashed;
  border-left-style: solid;
  background: var(--card);
}
.lois-sanctions .lois-sanction--aucune .lois-case__q {
  color: var(--mut);
}

.lois-sanctions > .lois-avert {
  border-color: color-mix(in srgb, var(--danger) 60%, var(--line));
  background: color-mix(in srgb, var(--danger) 7%, transparent);
}

.lois-fils__compte {
  margin: -4px 0 12px;
  color: var(--mut);
  font-size: 0.92rem;
  line-height: 1.5;
}
.lois-fils__compte strong {
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.lois-fils__compte small {
  font-size: 0.8rem;
  white-space: nowrap;
}
.lois-fils__compte .lois-fils__toutes {
  margin-left: 6px;
  color: var(--acc);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── « Son histoire », sous le chapô d'un fil (13/10/2026) ──
   Un récit, pas du texte de loi : filet à gauche, gris, ses sources dessous. */
.lois-origine {
  max-width: 72ch;
  margin: 18px 0 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--line);
}
.lois-origine h2 {
  margin: 0 0 8px;
  color: var(--mut);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lois-origine p {
  margin: 0 0 8px;
  color: var(--mut);
  line-height: 1.6;
}
.lois-origine .lois-origine__src {
  margin: 10px 0 0;
  font-size: 0.8rem;
}
.lois-origine a {
  color: var(--acc);
}

/* La traduction d'un titre officiel, sur la page d'un texte (13/10/2026) :
   une tuile, bord orange, ce qu'on lit en premier sous le titre. */
.lois-traduction {
  max-width: 72ch;
  margin: 14px 0 16px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: 12px;
}
.lois-traduction h2 {
  margin: 0 0 6px;
  color: var(--acc);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lois-traduction p {
  margin: 0;
  color: var(--cream);
  font-size: 1.08rem;
  line-height: 1.55;
}

.lois-origine__freres {
  margin: 12px 0 0;
  font-size: 0.9rem;
}
.lois-origine__freres a {
  color: var(--acc);
  font-weight: 600;
  text-decoration: none;
}
.lois-origine__freres a:hover, .lois-origine__freres a:focus-visible {
  text-decoration: underline;
}

/* Ce qu'est un fil, sous le compte (13/10/2026). */
.lois-fils__idee {
  max-width: 72ch;
  margin: 0 0 16px;
  color: var(--mut);
  line-height: 1.6;
}

.lois-fil-carte {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: 12px;
  color: var(--mut);
  line-height: 1.5;
  text-decoration: none;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.lois-fil-carte strong {
  color: var(--cream);
  font-size: 1.08rem;
}
.lois-fil-carte small {
  font-size: 0.82rem;
}
.lois-fil-carte {
  /* Une carte entière ne se souligne pas au survol : la règle globale
     `a:hover` soulignait tout son texte (retour du 08/10/2026). */
}
.lois-fil-carte:hover, .lois-fil-carte:focus-visible {
  border-color: var(--acc);
  transform: translateY(-1px);
  text-decoration: none;
}

/* ── La recherche dans les fils (accueil, 13/10/2026) ──
   Un champ, un état d'une ligne, puis les résultats : les mots du glossaire
   en liste, les fils dans les mêmes cartes que partout (`.lois-fils`). */
.lois-cherche {
  margin: 16px 0 0;
}
.lois-cherche .lois-cherche__l {
  display: block;
  margin: 0 0 6px;
  color: var(--mut);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lois-cherche .lois-cherche__c {
  display: flex;
  gap: 8px;
}
.lois-cherche .lois-cherche__q {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: 12px;
  color: var(--cream);
  font: inherit;
  font-size: 1.02rem;
}
.lois-cherche .lois-cherche__q::placeholder {
  color: var(--mut);
  opacity: 0.8;
}
.lois-cherche .lois-cherche__q:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}
.lois-cherche .lois-cherche__x {
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--mut);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.lois-cherche .lois-cherche__x:hover, .lois-cherche .lois-cherche__x:focus-visible {
  border-color: var(--acc);
  color: var(--cream);
}
.lois-cherche .lois-cherche__etat {
  min-height: 1.5em;
  margin: 8px 0 0;
  color: var(--mut);
  font-size: 0.9rem;
  line-height: 1.5;
}
.lois-cherche .lois-cherche__res {
  margin: 10px 0 0;
}
.lois-cherche .lois-cherche__t {
  margin: 14px 0 8px;
  color: var(--cream);
  font-size: 1rem;
}
.lois-cherche .lois-fils {
  margin-bottom: 0;
}

.lois-cherche__mots {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lois-cherche__mot {
  display: grid;
  gap: 3px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--mut);
  line-height: 1.5;
}
.lois-cherche__mot strong {
  color: var(--cream);
}
.lois-cherche__mot small {
  font-size: 0.8rem;
}
.lois-cherche__mot a {
  color: var(--acc);
}

/* Les sujets de tête de l'accueil (13/10/2026) : les mêmes cartes, resserrées
   — un titre et un compte sur une ligne, pour que douze sujets tiennent sans
   repousser la suite. */
.lois-phares {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 8px;
  margin: 14px 0 0;
}
.lois-phares .lois-fil-carte {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  line-height: 1.3;
}
.lois-phares .lois-fil-carte strong {
  font-size: 0.95rem;
}
.lois-phares .lois-fil-carte small {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Le tag d'une carte : le code ou le domaine concerné, en bas de carte
   (demande du 09/10/2026). D'abord un hashtag orange en gras, « moche » :
   repris du tag « PDF » des mathématiques (.mp-item__pdf) — une petite
   étiquette au filet d'accent, sans dièse. */
.lois-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-self: end;
}

.lois-tag {
  padding: 0 5px;
  border: 1px solid var(--acc, #f28c28);
  border-radius: 3px;
  color: var(--acc, #f28c28);
  font-size: 10.5px;
  line-height: 1.6;
  white-space: nowrap;
}

/* Une carte de sujet sans lien : les sujets annoncés et les cartes vierges. */
.lois-fil-carte--sujet {
  align-content: start;
}
.lois-fil-carte--sujet:hover {
  transform: none;
}

/* Les cartes à venir : la même carte, vierge et floutée. Des traits à la
   place du titre, du texte et des liens ; rien à lire, rien à cliquer. */
.lois-fil-carte--vierge {
  gap: 10px;
  min-height: 132px;
  filter: blur(3px);
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
}
.lois-fil-carte--vierge i {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: var(--mut);
  opacity: 0.55;
}
.lois-fil-carte--vierge i:nth-child(1) {
  width: 58%;
  height: 15px;
  background: var(--cream);
  opacity: 0.9;
}
.lois-fil-carte--vierge i:nth-child(2) {
  width: 94%;
}
.lois-fil-carte--vierge i:nth-child(3) {
  width: 71%;
}
.lois-fil-carte--vierge i:nth-child(4) {
  width: 40%;
  margin-top: 6px;
  background: var(--acc);
  opacity: 0.9;
}
.lois-fil-carte--vierge i:nth-child(5) {
  width: 62%;
  background: var(--acc);
  opacity: 0.9;
}

/* Les sujets annoncés : lisibles, à peine voilés, sans lien. Le bord gauche
   passe en pointillé : on voit que la carte ne s'ouvre pas encore. */
.lois-fil-carte--venir {
  border-left-style: dashed;
  filter: blur(0.5px);
  opacity: 0.62;
  cursor: default;
}
.lois-fil-carte--venir:hover {
  border-color: var(--line);
  border-left-color: var(--acc);
}
.lois-fil-carte--venir .lois-etiquette {
  justify-self: start;
  align-self: end;
}

/* Chaque carte vierge a ses longueurs : quatre cartes identiques feraient un motif. */
.lois-fils__vierge:nth-last-child(3) .lois-fil-carte--vierge i:nth-child(1) {
  width: 74%;
}
.lois-fils__vierge:nth-last-child(3) .lois-fil-carte--vierge i:nth-child(3) {
  width: 48%;
}
.lois-fils__vierge:nth-last-child(3) .lois-fil-carte--vierge i:nth-child(5) {
  width: 35%;
}

.lois-fils__vierge:nth-last-child(2) .lois-fil-carte--vierge i:nth-child(1) {
  width: 46%;
}
.lois-fils__vierge:nth-last-child(2) .lois-fil-carte--vierge i:nth-child(2) {
  width: 88%;
}
.lois-fils__vierge:nth-last-child(2) .lois-fil-carte--vierge i:nth-child(4) {
  width: 55%;
}

.lois-fils__vierge:nth-last-child(1) .lois-fil-carte--vierge i:nth-child(1) {
  width: 66%;
}
.lois-fils__vierge:nth-last-child(1) .lois-fil-carte--vierge i:nth-child(3) {
  width: 82%;
}
.lois-fils__vierge:nth-last-child(1) .lois-fil-carte--vierge i:nth-child(5) {
  display: none;
}

/* Sur un téléphone, une seule : quatre cartes vides empilées feraient un trou. */
@media (max-width: 700px) {
  .lois-fils__vierge + .lois-fils__vierge {
    display: none;
  }
}
/* Toutes les rangées à la hauteur de la plus haute : une carte vierge a la
   taille d'une vraie (retour du 08/10/2026 : « garde la même hauteur »). */
@media (min-width: 701px) {
  .lois-fils {
    grid-auto-rows: 1fr;
  }
}
/* ── Les pages d'un même sujet : le bloc « À voir » ──
   D'abord une liste de liens sur trois colonnes (09/10/2026). Depuis le
   13/10/2026, les mêmes cartes que sur l'accueil (`.lois-fils`) : rien à
   styler ici, sauf la carte de la page où l'on est — sans lien, bord en
   pointillé, une étoile devant son titre. */
.lois-sujet {
  margin: 0 0 34px;
}
.lois-sujet .lois-fils {
  margin-bottom: 0;
}
.lois-sujet .lois-fil-carte--ici {
  border-style: dashed;
  border-left-style: solid;
}
.lois-sujet .lois-fil-carte--ici strong::before {
  content: "★ ";
  color: var(--acc);
}

.lois-sujet__nom {
  margin-left: 8px;
  color: var(--mut);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Un fil : la référence, toujours à côté du clair ──
   Petite, mais jamais absente : c'est elle qui rend la page utilisable par
   quelqu'un qui doit citer le texte. */
/* Discrète (demande du 08/10/2026) : petite, grise, sans cartouche. Le mot
   « Référence » laisse la place à un pictogramme — une balance —, mais reste
   dans la page pour les lecteurs d'écran. Le lien retrouve sa couleur au
   survol : qui cherche le texte exact le trouve, qui lit en clair ne bute pas
   dessus. */
.lois-ref {
  /* En bloc, le pictogramme dans le fil du texte : un libellé long passe à
     la ligne sans laisser la balance seule au-dessus de lui. */
  display: block;
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--mut);
  opacity: 0.82;
  transition: opacity 0.12s ease;
}
.lois-ref:hover, .lois-ref:focus-within {
  opacity: 1;
}
.lois-ref a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.lois-ref a:hover, .lois-ref a:focus-visible {
  color: var(--acc);
  text-decoration-style: solid;
}

.lois-ref__e {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 5px;
  width: 13px;
  height: 13px;
  overflow: hidden;
  /* Le mot sort du cadre sans quitter le DOM. */
  text-indent: -999px;
  white-space: nowrap;
  background-color: currentColor;
  --picto: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><path d=%27m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z%27/><path d=%27m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z%27/><path d=%27M7 21h10%27/><path d=%27M12 3v18%27/><path d=%27M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2%27/></svg>");
  -webkit-mask: var(--picto) center/contain no-repeat;
  mask: var(--picto) center/contain no-repeat;
}

.lois-intro {
  max-width: 68ch;
  margin: 0 0 18px;
  color: var(--mut);
  line-height: 1.6;
}

/* ── La frise : la navette dessinée ──
   Le fil au milieu ; l'Assemblée à gauche, le Sénat à droite, le reste à
   cheval sur le fil. Une étape se lit donc deux fois : par son texte, et par
   le côté où elle tombe — on VOIT le texte passer d'une chambre à l'autre. */
.lois-bords {
  display: none;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 6px;
  color: var(--mut);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lois-bords span:last-child {
  text-align: right;
}

.lois-frise {
  position: relative;
  list-style: none;
  margin: 0 0 34px;
  padding: 6px 0;
  /* le fil */
}
.lois-frise::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  width: 3px;
  border-radius: 2px;
  background: var(--acc);
}

.lois-etape {
  position: relative;
  padding: 0 0 14px 34px;
  /* la perle */
}
.lois-etape::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 18px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--cream);
  box-sizing: border-box;
}

.lois-etape__carte {
  padding: 14px 16px 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.lois-etape__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 4px;
  color: var(--mut);
  font-size: 0.86rem;
}
.lois-etape__tete time {
  color: var(--acc);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lois-etape__lieu {
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.lois-etape__titre {
  margin: 0 0 6px;
  font-size: 1.08rem;
  line-height: 1.3;
}

.lois-etape__clair {
  margin: 0 0 10px;
  color: var(--txt);
  line-height: 1.6;
}

/* Les deux bouts du trajet se détachent : l'entrée et la sortie du Parlement. */
.lois-etape--centre .lois-etape__carte {
  border-color: color-mix(in srgb, var(--acc) 55%, var(--line));
}

/* Une étape de l'Union européenne : bleu, pour la distinguer du trajet français. */
.lois-etape--ue .lois-etape__carte {
  border-color: #60a5fa;
  border-left-width: 3px;
}
.lois-etape--ue::before {
  border-color: #60a5fa;
}
.lois-etape--ue .lois-etape__lieu {
  border-color: #60a5fa;
  color: #93c5fd;
}

@media (min-width: 900px) {
  .lois-bords {
    display: grid;
  }
  .lois-frise::before {
    left: calc(50% - 1.5px);
  }
  .lois-etape {
    width: 50%;
    padding: 0 34px 14px 0;
  }
  .lois-etape::before {
    left: auto;
    right: -7.5px;
  }
  .lois-etape--droite {
    margin-left: 50%;
    padding: 0 0 14px 34px;
  }
  .lois-etape--droite::before {
    right: auto;
    left: -7.5px;
  }
  /* À cheval sur le fil : la carte est centrée et le recouvre. */
  .lois-etape--centre {
    width: min(100%, 560px);
    margin-inline: auto;
    padding: 0 0 14px;
  }
  .lois-etape--centre::before {
    display: none;
  }
  .lois-etape--centre .lois-etape__carte {
    position: relative;
    text-align: center;
  }
  .lois-etape--centre .lois-etape__tete {
    justify-content: center;
  }
}
/* ── Le texte qui évolue ──
   L'historique d'un article, à la manière d'une forge : un fil vertical, un
   point par version, et sous chacune le texte où le retiré est rouge barré et
   l'ajouté vert. Les couleurs ne portent pas seules le sens : le retiré est
   barré, l'ajouté souligné. */
.lois-evolue {
  margin: 0 0 34px;
}

.lois-legende {
  display: flex;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 0.82rem;
}

.lois-evolue del,
.lois-evolue ins {
  padding: 1px 3px;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lois-evolue del {
  background: color-mix(in srgb, #f87171 20%, transparent);
  color: #fca5a5;
  text-decoration: line-through;
}

.lois-evolue ins {
  background: color-mix(in srgb, #4ade80 18%, transparent);
  color: #86efac;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.lois-art {
  margin: 0 0 22px;
  padding: 18px 20px 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.lois-art__titre {
  margin: 0 0 6px;
  font-size: 1.15rem;
  line-height: 1.3;
}

.lois-art__clair {
  max-width: 68ch;
  margin: 0 0 10px;
  line-height: 1.6;
}

.lois-art__note {
  margin: 0 0 12px;
  color: var(--mut);
  font-size: 0.86rem;
  font-style: italic;
}

.lois-versions {
  position: relative;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.lois-versions::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 18px;
  left: 6px;
  width: 2px;
  background: var(--line);
}

.lois-version {
  position: relative;
  padding: 0 0 14px 28px;
}
.lois-version::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--mut);
  box-sizing: border-box;
}

.lois-version--vigueur::before {
  border-color: #4ade80;
}

.lois-version__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 4px;
  font-size: 0.86rem;
  color: var(--mut);
}
.lois-version__tete time {
  color: var(--acc);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lois-version__etat {
  padding: 0 7px;
  border: 1px solid #4ade80;
  border-radius: 999px;
  color: #86efac;
  font-size: 0.74rem;
  white-space: nowrap;
}

/* Une version déjà inscrite pour une date future : ni verte, ni en vigueur. */
.lois-version__etat--avenir {
  border-color: #fbbf24;
  border-style: dashed;
  color: #fcd34d;
}

.lois-version__clair {
  max-width: 68ch;
  margin: 0 0 8px;
  line-height: 1.6;
}

.lois-version__reecrit {
  margin: 0 0 8px;
  color: #fbbf24;
  font-size: 0.88rem;
}

.lois-texte {
  max-width: 78ch;
  margin: 0 0 8px;
  padding: 10px 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
  border-radius: 0 8px 8px 0;
  color: var(--mut);
  font-size: 0.92rem;
  line-height: 1.65;
}

.lois-texte--diff {
  color: var(--txt);
}

/* ── La fiche « En bref » d'un fil, dans la seconde colonne de la tête ── */
.lois-fiche {
  padding: 16px 20px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--acc);
  border-radius: 14px;
}
.lois-fiche h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.lois-fiche__dates {
  margin: 0 0 12px;
}
.lois-fiche__dates div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lois-fiche__dates dt {
  color: var(--mut);
  font-size: 0.88rem;
}
.lois-fiche__dates dd {
  margin: 0;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.lois-fiche__ue dt {
  color: #93c5fd;
}
.lois-fiche__ue dd {
  border-left: 2px solid #60a5fa;
  padding-left: 8px;
}
.lois-fiche__ue p {
  margin: 0 0 4px;
  line-height: 1.4;
}
.lois-fiche__ue span {
  color: var(--mut);
  font-size: 0.82rem;
}
.lois-fiche__ue small {
  display: block;
  color: var(--mut);
  font-size: 0.74rem;
  line-height: 1.4;
}

/* Les codes qu'une loi a touchés, dans la fiche « En bref ». */
.lois-fiche__codes-t {
  margin: 0 0 4px;
  color: var(--mut);
  font-size: 0.88rem;
}

.lois-fiche__codes {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.lois-fiche__codes li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  color: var(--cream);
  line-height: 1.35;
}
.lois-fiche__codes span {
  color: var(--mut);
  font-size: 0.86rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lois-fiche__codes a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lois-fiche__codes-n {
  margin: 0 0 12px;
  color: var(--mut);
  font-size: 0.78rem;
  line-height: 1.45;
}

.lois-fiche__plan {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.9;
}
.lois-fiche__plan li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 12px;
}
.lois-fiche__plan span {
  color: var(--mut);
  font-size: 0.82rem;
  white-space: nowrap;
}

/* ── Une version, en deux colonnes : ce qu'elle veut dire | le texte exact ──
   C'est la double lecture rendue visible. Le conteneur est l'article : dans
   une colonne étroite (mobile), tout se remet l'un sous l'autre. */
.lois-art {
  container-type: inline-size;
  container-name: art;
}

@container art (min-width: 760px) {
  .lois-version {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 0 28px;
    align-items: start;
  }
  .lois-version__clair,
  .lois-texte {
    max-width: none;
  }
}
/* ── Le bas de page : les mots | le dossier et la suite ── */
.lois-bas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 44px;
  align-items: start;
}

.lois-bas__a, .lois-bas__b {
  min-width: 0;
}

@media (min-width: 900px) {
  .lois-bas {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  }
  /* Six avertissements : deux colonnes, pour qu'on les lise sans faire défiler. */
  .lois-avert ul {
    columns: 2;
    column-gap: 34px;
  }
  .lois-avert li {
    break-inside: avoid;
  }
}
/* ── « Avant la réforme », sur la page d'un fil ── */
.lois-avant {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 0 0 28px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid #7dd3fc;
  border-radius: 12px;
}
.lois-avant h2 {
  margin: 0;
  font-size: 1.05rem;
}
.lois-avant p {
  flex: 1 1 320px;
  margin: 0;
  line-height: 1.55;
}

.lois-avant__lien {
  font-weight: 600;
  white-space: nowrap;
}

/* ── L'histoire d'un sujet ──
   Une ligne par date de changement : la date, une barre, le nombre d'articles
   touchés, le texte qui a causé le changement. La barre se lit à l'œil, le
   nombre fait foi. Deux couleurs, une par plage d'articles ; les repères (le
   socle de 1804, les grandes vagues) se détachent sur fond de carte. */
.lois-chiffres--fiche {
  margin: 0;
  gap: 12px 26px;
}

/* Le mode d'emploi : les trois choses qu'on lit sur une ligne, dans l'ordre
   des colonnes, puis l'échelle de la barre dite en clair. */
.lois-hist__mode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 10px;
  margin: 0 0 10px;
}

.lois-hist__mode-c {
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--mut);
  font-size: 0.9rem;
  line-height: 1.5;
}
.lois-hist__mode-c b {
  display: block;
  color: var(--cream);
}

.lois-hist__echelle {
  margin: 0 0 6px;
  color: var(--mut);
  font-size: 0.9rem;
}

.lois-hist__siecle {
  margin: 22px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  color: var(--mut);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lois-hist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lois-hist__l {
  display: grid;
  /* Trois colonnes : la date (avec sa barre dessous), le nombre, le texte. */
  grid-template-columns: 13em minmax(0, 15em) minmax(0, 1fr);
  gap: 4px 22px;
  align-items: start;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.92rem;
}

.lois-hist__l--repere {
  margin: 6px 0;
  padding: 12px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: 10px;
}

.lois-hist__quand {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.lois-hist__date {
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Une seule barre, proportionnelle, glissée SOUS la date. Le rail derrière
   elle montre la pleine largeur — la plus grande réforme — pour qu'on mesure
   chaque barre contre elle. */
.lois-hist__barre {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
}

.lois-hist__trait {
  display: block;
  min-width: 3px;
  height: 6px;
  border-radius: 3px;
  background: var(--acc);
}

.lois-hist__nb {
  color: var(--cream);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.lois-hist__nb small {
  display: block;
  color: var(--mut);
  font-size: 0.78rem;
  line-height: 1.35;
}

.lois-hist__texte {
  min-width: 0;
  color: var(--txt);
  line-height: 1.5;
}
.lois-hist__texte strong {
  display: block;
  color: var(--cream);
  font-size: 1.02rem;
}
.lois-hist__texte .lois-ref {
  margin: 6px 0 0;
}

.lois-hist__autres, .lois-hist__inconnu {
  color: var(--mut);
  font-size: 0.84rem;
}

.lois-hist__inconnu {
  font-style: italic;
}

.lois-hist__clair {
  display: block;
  margin: 4px 0 0;
  color: var(--txt);
  line-height: 1.6;
}

.lois-hist__lien {
  display: inline-block;
  margin-top: 6px;
  font-weight: 600;
}

@media (max-width: 760px) {
  /* Écran étroit : la date (et sa barre) à côté du nombre, le texte dessous. */
  .lois-hist__l {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 14px;
  }
  .lois-hist__texte {
    grid-column: 1/-1;
  }
}
/* ── « Comment se font les lois » : qui fait la loi, régime par régime ──
   Trois couleurs pour trois côtés du pouvoir : le chef de l'État ou le
   gouvernement (orange), les assemblées (bleu), le peuple (vert). La couleur
   n'est jamais seule : le nom de l'acteur est toujours écrit à côté. */
.lois-acteur {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--mut);
  vertical-align: 0;
}

.lois-acteur--executif {
  background: var(--acc);
}

.lois-acteur--assemblees {
  background: #7dd3fc;
}

.lois-acteur--peuple {
  background: #4ade80;
}

.lois-acteurs-cle {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.9;
}

/* La vue d'ensemble : une ligne par constitution. */
.lois-vue {
  margin: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.9rem;
}

.lois-vue__l {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 6px 14px;
  align-items: baseline;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--txt);
  text-decoration: none;
}
.lois-vue__l:last-child {
  border-bottom: 0;
}
.lois-vue__l b {
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}

a.lois-vue__l:hover, a.lois-vue__l:focus-visible {
  background: var(--card);
  text-decoration: none;
}

.lois-vue__l--tete {
  background: var(--card);
  color: var(--mut);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lois-vue__qui {
  color: var(--mut);
  font-size: 0.84rem;
}

/* Une constitution : ce qu'elle veut dire à gauche, ses trois réponses à droite. */
.lois-regime {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 30px;
  margin: 0 0 14px;
  padding: 18px 20px 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  scroll-margin-top: 90px;
}

.lois-regime:target {
  border-color: var(--acc);
}

.lois-regime__an {
  margin: 0;
  color: var(--acc);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.lois-regime__titre {
  margin: 2px 0 8px;
  font-size: 1.08rem;
  line-height: 1.3;
}

.lois-regime__clair {
  margin: 0 0 10px;
  line-height: 1.6;
}

.lois-regime__b {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 10px;
  align-items: start;
}

.lois-case {
  padding: 10px 12px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.lois-case__q {
  margin: 0 0 6px;
  color: var(--mut);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lois-case__qui {
  margin: 0 0 4px;
  color: var(--cream);
  font-weight: 600;
  line-height: 1.35;
}

.lois-case__cit {
  margin: 0 0 8px;
  color: var(--mut);
  font-size: 0.82rem;
  line-height: 1.5;
}
.lois-case__cit cite {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  font-style: normal;
  opacity: 0.85;
}

.lois-case__vide {
  margin: 0 0 8px;
  color: var(--mut);
  font-size: 0.82rem;
  font-style: italic;
}

@media (min-width: 900px) {
  .lois-regime {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  }
}
@media (max-width: 700px) {
  /* Écran étroit : la vue d'ensemble garde l'année et les pastilles. */
  .lois-vue__qui {
    display: none;
  }
  .lois-vue__l {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  }
  .lois-vue__l--tete {
    font-size: 0.66rem;
    letter-spacing: 0;
  }
}
/* ── Le résumé d'un fil : les limites d'abord, le résumé derrière un bouton ── */
.lois-resume__voir {
  margin: 4px 0 0;
}

.lois-resume__bouton {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 20px;
  background: var(--acc);
  border-radius: 999px;
  color: var(--bg, #0f1115);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.lois-resume__bouton::-webkit-details-marker {
  display: none;
}
.lois-resume__bouton:hover, .lois-resume__bouton:focus-visible {
  filter: brightness(1.08);
}
.lois-resume__bouton small {
  font-weight: 500;
  font-size: 0.82rem;
  opacity: 0.85;
}

/* Une fois ouvertes, les explications le restent : le bouton « Masquer les
   explications » a été retiré le 13/10/2026, et celui qui les a ouvertes
   disparaît avec lui. */
.lois-resume__voir[open] > .lois-resume__bouton {
  display: none;
}

/* ── Les volets repliables ──
   Des <details> natifs. Le résumé porte le titre (un vrai h2 sur « Comment se
   font les lois »), un compte à droite et un chevron qui tourne à l'ouverture. */
.lois-acc > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 10px 14px 10px 38px;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
}
.lois-acc > summary::-webkit-details-marker {
  display: none;
}
.lois-acc > summary::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--acc);
  border-bottom: 2px solid var(--acc);
  transform: rotate(-45deg);
  transition: transform 0.12s ease;
}
.lois-acc > summary:hover, .lois-acc > summary:focus-visible {
  border-color: var(--acc);
}
.lois-acc > summary h2 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
}
.lois-acc[open] > summary {
  margin-bottom: 14px;
}
.lois-acc[open] > summary::before {
  transform: rotate(45deg);
  margin-top: -8px;
}

.lois-acc__n {
  margin-left: auto;
  color: var(--mut);
  font-size: 0.82rem;
  white-space: nowrap;
}

.lois-acc__t {
  color: var(--cream);
  font-weight: 600;
  font-size: 0.92rem;
}

/* Sur un fil : le volet du texte exact, plus discret. */
.lois-acc--texte > summary {
  padding-block: 6px;
  background: transparent;
}
.lois-acc--texte[open] > summary {
  margin-bottom: 8px;
}

section > .lois-acc {
  margin-bottom: 12px;
}

/* Dans une comparaison resserrée, la marque d'un passage inchangé coupé. */
.lois-texte--court {
  margin-bottom: 8px;
}

.lois-texte__coupe {
  margin: 0 0.35em;
  color: var(--mut);
  font-size: 0.86em;
  letter-spacing: 0.08em;
  cursor: help;
}

@media (prefers-reduced-motion: reduce) {
  .lois-acc > summary::before {
    transition: none;
  }
}
/* ── « Comment se font les lois » : la frise historique ──
   Une rangée de cases sur un rail. À partir de 1791 la largeur suit les
   années (flex-grow posé par le gabarit) ; avant, des cases égales, puis une
   coupure en pointillé qui dit que l'échelle est rompue. */
.lois-chrono {
  margin: 0 0 26px;
}

.lois-chrono__cadre {
  overflow-x: auto;
  padding-bottom: 6px;
}

.lois-chrono__l {
  display: flex;
  align-items: stretch;
  gap: 3px;
  min-width: 1180px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lois-chrono__c {
  flex: 1 1 0;
  min-width: 34px;
}
.lois-chrono__c a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: 7px 3px 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--acc);
  border-radius: 6px;
  color: var(--txt);
  text-decoration: none;
  overflow: hidden;
}
.lois-chrono__c a:hover, .lois-chrono__c a:focus-visible {
  border-color: var(--acc);
  background: color-mix(in srgb, var(--acc) 10%, var(--card));
}
.lois-chrono__c b {
  color: var(--cream);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.lois-chrono__c {
  /* Le nom ne tient que dans une case large ; ailleurs il reste dans l'infobulle. */
}
.lois-chrono__c small {
  display: none;
  color: var(--mut);
  font-size: 0.72rem;
  line-height: 1.25;
}

.lois-chrono__c--large small, .lois-chrono__c--avant small {
  display: block;
}

.lois-chrono__c--avant {
  flex: 0 0 88px;
}
.lois-chrono__c--avant a {
  border-top-color: var(--mut);
  padding-inline: 6px;
}
.lois-chrono__c--avant b {
  font-size: 0.82rem;
}

.lois-chrono__c--fin {
  flex: 0 0 88px;
}
.lois-chrono__c--fin a {
  justify-content: center;
  border-style: dashed;
  border-top-style: solid;
}

.lois-chrono__p {
  display: flex;
  gap: 3px;
  margin-top: auto;
}

.lois-chrono__coupe {
  flex: 0 0 14px;
  border-left: 2px dotted var(--mut);
  border-right: 2px dotted var(--mut);
  margin: 4px 4px;
}

.lois-chrono__legende {
  max-width: 86ch;
  margin: 8px 0 0;
  color: var(--mut);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* ── « Comment se font les lois » : le trajet d'aujourd'hui ──
   La frise d'un fil, réemployée : le numéro de l'étape tient la place de la
   date, la citation de l'article celle de la référence. */
.lois-volets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 22px;
}
.lois-volets a {
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--txt);
  font-size: 0.9rem;
  text-decoration: none;
}
.lois-volets a:hover, .lois-volets a:focus-visible {
  border-color: var(--acc);
  color: var(--acc);
}

#loisAuj, #loisRegimes, #loisSuite {
  scroll-margin-top: 90px;
}

/* « Quand la loi n'est pas respectée » : des cartes en colonnes, et trois
   marches pour l'échelle des infractions — la bordure épaissit avec la gravité. */
/* Ces titres vivent maintenant dans le résumé d'un volet : plus de marge à
   eux (elle décalait le titre sous le chevron), l'écart est porté par le volet. */
#loisAvant, #loisEurope {
  scroll-margin-top: 90px;
}

.lois-avant1791__garde {
  max-width: 78ch;
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--acc);
  color: var(--txt);
  line-height: 1.6;
}

/* « La place de chaque texte » : une pile d'étages de même largeur (une
   largeur dirait un nombre), et à côté ce qui n'est pas dans la pile. */
.lois-pile {
  margin: 0 0 18px;
}

.lois-pile__titre {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.lois-pile__corps {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 18px;
  align-items: center;
}
@media (max-width: 700px) {
  .lois-pile__corps {
    grid-template-columns: 1fr;
  }
}

.lois-pile__etages, .lois-pile__cote ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lois-pile__e a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--acc);
  color: inherit;
  text-decoration: none;
}
.lois-pile__e + .lois-pile__e a {
  border-top: 0;
}
.lois-pile__e a:hover, .lois-pile__e a:focus-visible {
  border-left-width: 8px;
}
.lois-pile__e b {
  font-size: 1.02rem;
}
.lois-pile__e span {
  grid-column: 1;
  color: var(--mut);
  font-size: 0.9rem;
  line-height: 1.4;
}
.lois-pile__e small {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: center;
  color: var(--mut);
  font-size: 0.8rem;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .lois-pile__e a {
    grid-template-columns: 1fr;
  }
  .lois-pile__e small {
    grid-column: 1;
    grid-row: auto;
  }
}

.lois-pile__cote {
  padding: 12px;
  border: 1px dashed var(--line);
}

.lois-pile__cote-t {
  margin: 0 0 8px;
  color: var(--mut);
  font-size: 0.9rem;
}

.lois-pile__e--cote a {
  border-left-style: dashed;
}

.lois-pile__note {
  margin: 10px 0 0;
  color: var(--mut);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Avant 1791 : les cartes se suivent dans le temps, donc numérotées. */
.lois-avant1791 {
  counter-reset: avant;
}
.lois-avant1791 .lois-suite__t::before {
  counter-increment: avant;
  content: counter(avant) ". ";
  color: var(--acc);
}

.lois-suite {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 12px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.lois-suite__c {
  background: var(--card);
  padding: 14px 16px 6px;
}

.lois-suite__t {
  margin: 0 0 6px;
  font-size: 1.05rem;
  line-height: 1.3;
}

.lois-suite .lois-case__cit a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.lois-suite .lois-case__cit a:hover, .lois-suite .lois-case__cit a:focus-visible {
  color: var(--acc);
}

.lois-suite--echelle {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: end;
}

.lois-suite__c--m1 {
  border-top: 3px solid color-mix(in srgb, var(--acc) 35%, var(--line));
}

.lois-suite__c--m2 {
  border-top: 6px solid color-mix(in srgb, var(--acc) 65%, var(--line));
}

.lois-suite__c--m3 {
  border-top: 9px solid var(--acc);
}

.lois-frise--fabrique {
  margin-bottom: 14px;
}
.lois-frise--fabrique .lois-etape__tete time {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--acc);
  color: var(--bg, #0e1116);
  font-size: 0.82rem;
}
.lois-frise--fabrique .lois-case__cit {
  margin-bottom: 12px;
}

/* « Seulement si… » : l'étape n'a pas toujours lieu. */
.lois-etape__si {
  color: var(--acc);
  font-size: 0.78rem;
  font-style: italic;
}

.lois-auj__h {
  margin: 22px 0 6px;
  font-size: 1.15rem;
}

.lois-autres {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.lois-autres__clair {
  margin: 0 0 8px;
  color: var(--txt);
  line-height: 1.6;
}

/* ── La page d'une date : ce qui a changé ce jour-là ── */
a.lois-hist__date {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

a.lois-hist__date:hover, a.lois-hist__date:focus-visible {
  color: var(--acc);
  text-decoration-style: solid;
}

.lois-jour__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  margin: 0 0 6px;
  font-size: 0.9rem;
}

.lois-jour__retour {
  margin: 0;
  font-size: 0.9rem;
}

.lois-jour__plage {
  margin: 26px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 1.1rem;
}

.lois-jour__art {
  margin: 0 0 10px;
  padding: 12px 16px 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mut);
  border-radius: 10px;
}

.lois-jour__art--modifie {
  border-left-color: var(--acc);
}

.lois-jour__art--reecrit {
  border-left-color: #fbbf24;
}

.lois-jour__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 8px;
}
.lois-jour__tete strong {
  color: var(--cream);
}

summary.lois-jour__tete {
  cursor: pointer;
}

details.lois-jour__art:not([open]) {
  padding-bottom: 4px;
}

.lois-jour__etat {
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mut);
  font-size: 0.76rem;
  white-space: nowrap;
}

.lois-jour__art .lois-texte {
  max-width: none;
}

/* ── Le résumé et son cadre ──
   L'avertissement est le seul bloc ambre de la page : il doit se voir avant
   qu'on lise le premier point, et se retrouver en sortant. */
.lois-resume {
  margin: 0 0 34px;
}

.lois-avert {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid #b98a3e;
  border-left-width: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, #fbbf24 7%, transparent);
  color: var(--txt);
  line-height: 1.6;
}
.lois-avert h3 {
  margin: 0 0 8px;
  color: #fbbf24;
  font-size: 1rem;
}
.lois-avert ul {
  margin: 0;
  padding-left: 18px;
}
.lois-avert li {
  margin: 0 0 4px;
}

.lois-avert--rappel {
  margin: 16px 0 0;
  font-weight: 600;
}

.lois-points {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: point;
}

.lois-point {
  counter-increment: point;
  padding: 14px 16px 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.lois-point__titre {
  margin: 0 0 6px;
  font-size: 1.05rem;
  line-height: 1.3;
}
.lois-point__titre::before {
  content: counter(point) ". ";
  color: var(--acc);
  font-weight: 800;
}

.lois-point__clair {
  margin: 0 0 10px;
  line-height: 1.6;
}

/* La tuile du fil d'un article que le point cite sans le lire (13/10/2026) :
   la carte de partout, sur un fond qui la détache de celle du point. */
.lois-point__fil {
  height: auto;
  margin: 0 0 12px;
  background: var(--bg, #0f1115);
}

.lois-point__fil > span:not(.lois-tags) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

.lois-ref__v {
  margin-left: 6px;
  color: var(--mut);
  white-space: nowrap;
}

.lois-mots {
  margin: 0;
}
.lois-mots div {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lois-mots dt {
  color: var(--cream);
  font-weight: 700;
}
.lois-mots dd {
  margin: 2px 0 0;
  color: var(--mut);
  line-height: 1.55;
}

.lois-dossier {
  margin: 0;
  padding-left: 18px;
  line-height: 1.8;
}

/* ── /lois/normes/ : les normes citées par les codes ── */
.lois-fiche__note {
  margin: 12px 0 0;
  color: var(--mut);
  font-size: 0.84rem;
}

.lois-avert__h {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: var(--clair);
}

.lois-normes__usages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 10px;
  margin: 0;
}
.lois-normes__usages dt {
  font-weight: 700;
  color: var(--cream);
}
.lois-normes__usages dd {
  margin: 4px 0 0;
  color: var(--mut);
  line-height: 1.5;
  font-size: 0.94rem;
}

.lois-normes__usage {
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--u, var(--acc));
  border-radius: 10px;
}

/* Une teinte par usage, reprise sur l'étiquette de chaque article. */
.lois-normes__usage--controle, .lois-normes__etq--controle {
  --u: #93c5fd;
}

.lois-normes__usage--mesure, .lois-normes__etq--mesure {
  --u: #86efac;
}

.lois-normes__usage--format, .lois-normes__etq--format {
  --u: #c4b5fd;
}

.lois-normes__usage--conforme, .lois-normes__etq--conforme {
  --u: #fdba74;
}

.lois-normes__usage--condition, .lois-normes__etq--condition {
  --u: #f9a8d4;
}

.lois-normes__code {
  margin: 0 0 10px;
}

.lois-normes__arts {
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
}

.lois-normes__art {
  padding: 12px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  scroll-margin-top: 80px;
}
.lois-normes__art:last-child {
  border-bottom: 0;
}
.lois-normes__art:target {
  background: color-mix(in srgb, var(--clair) 8%, transparent);
}

.lois-normes__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 6px;
}

.lois-normes__num {
  font-weight: 700;
  color: var(--cream);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.lois-normes__etq {
  padding: 1px 8px;
  border: 1px solid var(--u, var(--line));
  border-radius: 999px;
  color: var(--u, var(--mut));
  font-size: 0.76rem;
  white-space: nowrap;
}

.lois-normes__etq--equiv {
  border-style: dashed;
}

.lois-normes__m {
  margin: 0 0 6px;
  color: var(--mut);
  line-height: 1.55;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}
.lois-normes__m b {
  color: var(--cream);
  margin-right: 6px;
  white-space: nowrap;
}
.lois-normes__m q {
  quotes: "« " " »";
}

.lois-normes__plus {
  margin: 2px 0 0;
}
.lois-normes__plus summary {
  cursor: pointer;
  color: var(--acc);
  font-size: 0.88rem;
}
.lois-normes__plus[open] summary {
  margin-bottom: 6px;
}

.lois-normes__liste {
  columns: 2 320px;
  column-gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lois-normes__liste li {
  break-inside: avoid;
  margin: 0 0 8px;
  line-height: 1.45;
  font-size: 0.92rem;
  color: var(--mut);
}
.lois-normes__liste b {
  display: block;
  color: var(--cream);
}
.lois-normes__liste a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.lois-normes__liste a:hover, .lois-normes__liste a:focus-visible {
  color: var(--acc);
}

/* ── /lois/toutes-les-lois/ : une ligne par loi ── */
.lois-toutes__d {
  margin: 0 0 10px;
}

.lois-toutes {
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
}

.lois-toutes__l {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 18px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  line-height: 1.45;
}
.lois-toutes__l:last-child {
  border-bottom: 0;
}

.lois-toutes__l--fil {
  background: color-mix(in srgb, var(--acc) 6%, transparent);
}

.lois-toutes__date {
  color: var(--mut);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lois-toutes__t {
  overflow-wrap: anywhere;
}
.lois-toutes__t > a:first-child {
  color: var(--cream);
  text-decoration: none;
}
.lois-toutes__t > a:first-child:hover, .lois-toutes__t > a:first-child:focus-visible {
  color: var(--acc);
  text-decoration: underline;
}

.lois-toutes__c {
  color: var(--mut);
  font-size: 0.84rem;
}

.lois-toutes__etq {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mut);
  font-size: 0.74rem;
  white-space: nowrap;
  text-decoration: none;
}

.lois-toutes__etq--fil {
  border-color: var(--acc);
  color: var(--acc);
  font-weight: 600;
}

@media (min-width: 900px) {
  .lois-toutes__l {
    grid-template-columns: 9.5em minmax(0, 1fr) minmax(0, 17em);
    align-items: baseline;
  }
  .lois-toutes__c {
    text-align: right;
  }
}
/*!*****************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/pages/tour-de-controle.scss ***!
  \*****************************************************************************************************************************/
@charset "UTF-8";
/* Tour de contrôle — les lignes du fil (composant commun, voir
   tour-de-controle.js). Mêmes verts que la tour de /mathematiques/genealogie/.
   Le cadre du fil (hauteur, fond, bordure) reste à la page qui l'accueille. */
.tdc__ligne {
  margin: 0;
  color: #9fd4ae;
  text-shadow: 0 0 4px rgba(82, 255, 122, 0.25);
  overflow-wrap: anywhere;
}

.tdc__h {
  color: #55657a;
  font-size: 0.88em;
  text-shadow: none;
}

.tdc__ligne--ok {
  color: #7dffa0;
}

.tdc__ligne--alerte {
  color: #ffb0a0;
  text-shadow: 0 0 4px rgba(255, 90, 60, 0.35);
}

/* L'alerte vive : rouge, et qui clignote — une douzaine de battements lents,
   puis elle reste allumée. Voulue clignotante même sous « moins de
   mouvement » (le poste de l'utilisateur porte ce réglage) : c'est un fondu
   lent, pas un flash. À réserver au rare. */
.tdc__ligne--alerte-vive {
  color: #ff8f7a;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 90, 60, 0.55);
  animation: tdc-alerte 1.1s ease-in-out 12;
}

@keyframes tdc-alerte {
  50% {
    opacity: 0.3;
  }
}
/* Une ligne déjà dite, reposée au retour sur la page : elle ne clignote plus. */
.tdc__ligne--passe {
  animation: none;
  opacity: 0.8;
}

/* Ce que la tour dit entre deux saisies : plus discret, sans halo. */
.tdc__ligne--dit {
  color: #7d8ea5;
  text-shadow: none;
}

.tdc__curseur {
  margin-left: 1px;
  animation: tdc-curseur 0.7s infinite;
}

/* Le moulin de la lecture : il tourne au bout de la ligne, puis s'efface. */
.tdc__moulin {
  color: #7dffa0;
  text-shadow: none;
}

@keyframes tdc-curseur {
  50% {
    opacity: 0.25;
  }
}
/* « Moins de mouvement » : la frappe continue, le curseur ne clignote plus. */
.tdc--calme .tdc__curseur {
  animation: none;
}

/*# sourceMappingURL=lois.css.map*/