/* ==========================================================================
 *  RÈGLEMENT DES UTILISATEURS — feuille dédiée
 * ==========================================================================
 *  ELLE EST À PART, ET C'EST VOULU. Cette page a une identité propre —
 *  dégradé bleu nuit vers violet, ciel étoilé, cadres translucides — que le
 *  reste du site n'a pas. La mélanger à style.css imposerait ce décor à
 *  soixante-neuf autres vues, ou obligerait à préfixer chaque règle par
 *  précaution. Elle n'est chargée que par la vue qui en a besoin.
 *
 *  Toutes les règles sont sous `.rg` ou `.rg-*` : rien ici ne peut déborder
 *  sur une autre page, même si la feuille était chargée par erreur.
 * ========================================================================== */

.rg {
  position: relative;
  z-index: 1;
  /* Élargi le 27/08 : sans la boîte, le tableau peut respirer sur toute la
     largeur, et la colonne « Description brève » cesse de couper ses phrases
     en trois lignes. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 20px 72px;
}

/* --- Le fond -------------------------------------------------------------- *
 *  Posé sur un élément à part plutôt que sur `body` : le corps de page porte
 *  déjà le fond du site, et le remplacer ici le laisserait remplacé pour la
 *  page suivante dans certains navigateurs qui gardent le style de fond
 *  pendant la navigation. */
/*  LE CIEL A ÉTÉ ÉCLAIRCI le 27/08, sur une maquette de l'équipe.
 *  L'ancien partait d'un bleu presque noir : le tableau devait poser sa propre
 *  boîte opaque pour rester lisible, et cette boîte coupait le décor en deux —
 *  du ciel autour, un panneau gris au milieu. En remontant la luminosité du
 *  fond, le tableau peut se poser DESSUS, sans boîte : il ne reste que des
 *  filets de séparation, et la page redevient d'un seul tenant. */
.rg-ciel {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* la nébuleuse : deux halos larges, décentrés, qui donnent sa profondeur
       au fond — sans eux un dégradé plat paraît sale plutôt que sombre */
    radial-gradient(1400px 900px at 12% -12%, rgba(var(--fond-teinte), 0.11), transparent 62%),
    radial-gradient(1100px 800px at 88% 4%, rgba(var(--fond-aurore-2), 0.09), transparent 58%),
    radial-gradient(900px 700px at 50% 120%, rgba(var(--fond-teinte), 0.11), transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, rgb(var(--fond-teinte)) 5%, var(--bg)) 0%,
      color-mix(in srgb, rgb(var(--fond-teinte)) 7%, var(--bg)) 42%,
      color-mix(in srgb, rgb(var(--fond-teinte)) 4%, var(--bg)) 100%);
}

/* LES ÉTOILES SONT TROIS DÉGRADÉS RÉPÉTÉS, PAS TROIS CENTS ÉLÉMENTS.
   Une page juridique doit s'ouvrir sur un vieux téléphone : trois cents
   nœuds animés la feraient ramer pour un décor que personne ne regarde. */
.rg-ciel span {
  position: absolute; inset: -50%;
  background-repeat: repeat;
  /*  REMONTÉ AVEC LE CIEL. Les étoiles étaient réglées pour un fond presque
      noir ; posées sur le nouveau violet, elles avaient purement et
      simplement disparu — on avait éclairci le fond et perdu le décor. */
  opacity: 0.85;
}
.rg-ciel span:nth-child(1) {
  background-image: radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,1), transparent);
  background-size: 190px 190px;
  animation: rg-derive 210s linear infinite;
}
.rg-ciel span:nth-child(2) {
  background-image: radial-gradient(1.1px 1.1px at 90px 140px, rgba(var(--fond-poussiere), 0.95), transparent);
  background-size: 130px 130px;
  opacity: 0.6;
  animation: rg-derive 320s linear infinite reverse;
}
.rg-ciel span:nth-child(3) {
  background-image: radial-gradient(2.2px 2.2px at 160px 60px, rgba(var(--fond-poussiere), 0.85), transparent);
  background-size: 300px 300px;
  opacity: 0.55;
  animation: rg-derive 460s linear infinite;
}
@keyframes rg-derive { to { transform: translate3d(120px, 90px, 0); } }

/* --- En-tête --------------------------------------------------------------- */
.rg-entete { text-align: center; margin-bottom: 34px; }
.rg-entete h1 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  letter-spacing: -0.02em;
  color: var(--text);
}
.rg-entete p { margin: 0 auto; max-width: 62ch; color: var(--text-muted); line-height: 1.65; }
/*  L'AVIS DE LANGUE N'EST PAS UNE MENTION DÉCORATIVE : c'est lui qui dit
    quelle version du règlement fait foi. Il partageait la classe de la date,
    peinte avec `--text-dim` — le jeton le plus pâle du site, mesuré à 2.4:1
    sur ce fond. Un texte qui engage le service doit se lire. */
.rg-maj { margin-top: 10px !important; font-size: 0.85rem; color: var(--text-muted) !important; }

/* --- Le tableau se pose SUR le ciel ---------------------------------------- *
 *  Il vivait dans une boîte translucide floutée. La boîte le rendait lisible,
 *  mais elle coupait la page en deux : du ciel autour, un panneau au milieu.
 *  Le ciel éclairci permet de la retirer — restent les filets, qui suffisent à
 *  tenir des colonnes.
 *
 *  La classe reste : c'est elle que le script estompe quand un cadre s'ouvre,
 *  et les tests la nomment. Elle ne dessine simplement plus de boîte. */
.rg-cadre {
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: filter 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rg-table { width: 100%; border-collapse: collapse; }

/*  LA LÉGENDE EST LUE, PAS VUE. Elle disait déjà, en haut du tableau, ce que
    le sous-titre de la page dit trois centimètres plus haut : deux fois la
    même phrase. On la garde pour les lecteurs d'écran — un tableau sans
    légende s'annonce « tableau, trois colonnes » et rien d'autre. */
.rg-caption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.rg-table th, .rg-table td {
  padding: 16px 20px; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/*  LES FILETS VERTICAUX SÉPARENT LES TROIS COLONNES.
 *  Sans la boîte, trois colonnes posées sur un ciel étoilé se lisent comme
 *  trois textes qui flottent. Le filet dit « ceci est un tableau », et c'est
 *  tout ce qu'il faut. */
.rg-table th + th, .rg-table td + td,
.rg-table th + td, .rg-table td + th {
  border-left: 1px solid rgba(255, 255, 255, 0.10);
}

.rg-table thead th {
  padding-top: 10px;
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em;
  /*  L'en-tête d'un tableau nomme ses colonnes : le lire n'est pas
      facultatif. `--text-dim` le rendait à 2.4:1. */
  color: var(--text-muted); font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.rg-table thead th:last-child { text-align: center; white-space: nowrap; }
.rg-table tbody tr:last-child th, .rg-table tbody tr:last-child td { border-bottom: 0; }
/*  TOUTE LA LIGNE EST CLIQUABLE — demandé le 27/08.
 *  Le curseur le dit, sinon la zone existe sans que personne ne le devine :
 *  une cible invisible ne sert à rien. */
.rg-table tbody tr { transition: background 160ms ease; cursor: pointer; }
.rg-table tbody tr:hover { background: rgba(255, 255, 255, 0.06); }
/* Le chevron réagit avec la ligne : c'est ce qui dit que le clic mènera là. */
.rg-table tbody tr:hover .rg-voir { color: var(--accent-lisible); transform: translateX(3px); }

.rg-nom {
  /*  LE NOM DE SECTION PORTE UNE TEINTE DU MONDE, PAS UN VIOLET ÉCRIT À LA
      MAIN. `#e6dcff` rendait ces titres lavande jusque sur la production, qui
      est jaune. Un mélange léger suit l'accent — donc le monde, et les
      couleurs d'un événement en cours — sans crier. */
  font-weight: 600; color: color-mix(in srgb, var(--accent) 26%, var(--text)); white-space: normal;
  width: 22%; min-width: 12ch; line-height: 1.45;
}

/*  DEUX NIVEAUX DANS LA DESCRIPTION, et c'est la maquette de l'équipe.
 *  La première phrase porte la règle ; le reste la précise. En les mettant au
 *  même poids, on obligeait à lire les deux pour savoir de quoi parle la
 *  ligne. En hiérarchisant, la première phrase suffit — et c'est exactement ce
 *  qu'on attend d'un tableau qu'on parcourt. */
.rg-bref { color: var(--text-muted); line-height: 1.55; font-size: 0.92rem; }
.rg-bref-tete {
  display: block; color: var(--text); font-weight: 600;
  font-size: 0.95rem; line-height: 1.5; margin-bottom: 3px;
}
.rg-bref-suite { display: block; }

.rg-action { width: 1%; white-space: nowrap; text-align: center; }

/*  UN CHEVRON, PAS UN BOUTON. Le bouton carré violet attirait l'œil ligne
 *  après ligne, douze fois : ce n'est pas lui l'information. La zone cliquable
 *  reste large — on ne rétrécit pas une cible pour l'alléger visuellement. */
.rg-voir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 40px; border-radius: 10px;
  border: 0; background: transparent;
  color: var(--text-muted); text-decoration: none;
  font-size: 1.5rem; line-height: 1;
  transition: transform 160ms cubic-bezier(0.22, 0.61, 0.36, 1), color 160ms ease;
}
.rg-voir:hover { color: var(--accent-lisible); transform: translateX(3px); }
tr:hover .rg-voir { color: var(--accent-lisible); }
.rg-voir:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.55);
  border-color: rgba(var(--accent-rgb), 0.9);
}

/* Réservé aux lecteurs d'écran : le libellé d'un bouton fléché.
   Une flèche seule ne dit rien à voix haute. */
.rg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Les textes ------------------------------------------------------------ */
.rg-textes { margin-top: 34px; display: flex; flex-direction: column; gap: 22px; }

.rg-texte {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  padding: 26px 28px 20px;
  color: var(--text);
}
.rg-texte h2 {
  margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 1.35rem; color: var(--text);
}
.rg-corps h3 {
  margin: 22px 0 10px; font-size: 1.02rem; color: color-mix(in srgb, var(--accent) 32%, var(--text)); font-weight: 600;
}
.rg-corps p { margin: 0 0 14px; line-height: 1.72; }
.rg-corps ul { margin: 0 0 16px; padding-left: 22px; }
.rg-corps li { margin-bottom: 8px; line-height: 1.65; }
.rg-corps strong { color: var(--text); font-weight: 650; }

.rg-pied {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/*  ON PASSE D'UNE SECTION À L'AUTRE SANS REPASSER PAR LE TABLEAU.
 *
 *  Le pied n'offrait que « Retour ». Lire le règlement en entier demandait
 *  donc douze allers-retours : ouvrir, lire, fermer, retrouver la ligne
 *  suivante, ouvrir. Les deux liens ci-dessous nomment la section voisine —
 *  une flèche seule ne dit pas où elle mène. */
.rg-nav {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  flex: 1 1 auto; min-width: 0;
}
.rg-nav-lien {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; padding: 9px 14px; border-radius: 11px;
  border: 1px solid transparent; background: transparent;
  color: var(--text-muted); text-decoration: none;
  font-size: 0.88rem; line-height: 1.3;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.rg-nav-lien:hover { background: rgba(var(--accent-rgb), 0.10); color: var(--text); }
.rg-nav-lien:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.55); }
.rg-nav-prec:hover { transform: translateX(-2px); }
.rg-nav-suiv:hover { transform: translateX(2px); }
/* Le titre de la section voisine, tronqué plutôt que replié sur trois lignes :
   le pied doit garder sa hauteur, sinon le bouton Fermer se déplace. */
.rg-nav-titre {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 22ch;
}
.rg-nav-sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.14); }

.rg-retour {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.92rem;
  transition: background 160ms ease, transform 160ms ease;
  flex: 0 0 auto;
}
.rg-retour:hover { background: rgba(255, 255, 255, 0.14); }
.rg-retour:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.55); }
.rg-copy, .rg-bas { color: var(--text-dim); font-size: 0.84rem; }
.rg-bas { text-align: center; margin-top: 40px; }

/* ==========================================================================
 *  AVEC JAVASCRIPT : les textes deviennent des cadres au centre
 * ==========================================================================
 *  `rg-js` est posé sur <html> par le script, tout en haut. Tant qu'il n'est
 *  pas là — script absent, en erreur, ou pas encore exécuté — la page reste
 *  celle du dessus : les douze textes se lisent à la suite. Un règlement doit
 *  rester lisible quand un script tombe.
 * ========================================================================== */

.rg-js .rg-textes { display: none; }

.rg-js .rg-voile {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(4, 6, 20, 0.62);
  opacity: 0;
  transition: opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rg-js .rg-voile.rg-vu { opacity: 1; }

/* LE FLOU EST SUR LE TABLEAU, PAS SUR TOUTE LA PAGE. Flouter l'ancêtre commun
   du cadre flouterait le cadre lui-même — `filter` crée un contexte
   d'empilement dont l'enfant ne peut pas sortir. */
.rg-js.rg-ouvert .rg-cadre,
.rg-js.rg-ouvert .rg-entete { filter: blur(5px); opacity: 0.55; }

.rg-js .rg-modale {
  position: fixed; z-index: 50;
  left: 50%; top: 50%;
  width: min(760px, calc(100vw - 32px));
  max-height: min(82vh, 900px);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  /*  Le panneau prend le fond de carte du site plutôt qu'un bleu nuit écrit
      à la main : il se pose ainsi dans les deux mondes, et suit un événement
      qui recolore le décor. */
  background: var(--bg-card);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
/*  LE PIED RESTE ACCROCHÉ, ET LE TEXTE SEUL DÉFILE.
 *
 *  PREMIÈRE VERSION, FAUSSE : `overflow-y: auto` était posé sur l'article
 *  entier, donc le pied défilait avec lui. Sur « Sanctions », qui fait trois
 *  écrans, il fallait descendre jusqu'en bas pour trouver le bouton Retour —
 *  vu sur une capture, pas deviné. Échap et le clic à côté marchaient, mais
 *  un bouton qu'on a mis là doit être là.
 *
 *  `min-height: 0` n'est pas décoratif : sans lui, un enfant de flex refuse de
 *  descendre sous sa hauteur de contenu et le défilement ne se déclenche
 *  jamais. */
.rg-js .rg-modale > .rg-texte {
  border: 0; background: transparent; backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin: 0;
  display: flex; flex-direction: column;
  min-height: 0; flex: 1 1 auto;
}
.rg-js .rg-modale .rg-corps {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* De quoi respirer sous la dernière ligne, sinon le texte touche le trait
     du pied et l'on croit qu'il est coupé. */
  padding-right: 6px; padding-bottom: 4px;
}
.rg-js .rg-modale > .rg-texte > h2,
.rg-js .rg-modale > .rg-texte > .rg-pied { flex: 0 0 auto; }

/* L'entrée : fondu plus glissement vers le bas, comme demandé. */
.rg-js .rg-modale { animation: rg-entre 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes rg-entre {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 18px)) scale(0.985); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* --- Petits écrans --------------------------------------------------------- */
@media (max-width: 720px) {
  .rg { padding: 28px 14px 56px; }
  .rg-table thead { display: none; }
  .rg-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'nom action' 'bref action';
    gap: 2px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .rg-table th, .rg-table td { border: 0; padding: 0; }
  .rg-nom { grid-area: nom; }
  .rg-bref { grid-area: bref; font-size: 0.88rem; }
  .rg-action { grid-area: action; align-self: center; width: auto; }
  .rg-js .rg-modale { max-height: 88vh; width: calc(100vw - 20px); }
  .rg-texte { padding: 20px 18px 16px; }
  /* Sur un téléphone, le titre de la section voisine ne rentre pas : on garde
     les flèches et le mot, on laisse tomber le titre. */
  .rg-nav-titre { display: none; }
  .rg-nav-sep { display: none; }
  .rg-copy { display: none; }
}

/* --- Le réglage système l'emporte ------------------------------------------ *
 *  Le ciel dérive en boucle : c'est exactement le genre de mouvement continu
 *  qui déclenche des nausées. Quand le système le signale, on l'arrête — et
 *  le décor reste, simplement immobile. */
@media (prefers-reduced-motion: reduce) {
  .rg-ciel span { animation: none !important; }
  .rg-js .rg-modale { animation: none !important; }
  .rg-voir:hover, .rg-retour:hover,
  .rg-nav-prec:hover, .rg-nav-suiv:hover { transform: none !important; }
}

/* --- À l'impression -------------------------------------------------------- *
 *  Un règlement s'imprime. On rend les douze textes, on retire le décor, et on
 *  passe en encre noire sur blanc — le dégradé bleu nuit viderait une
 *  cartouche pour rien et rendrait le texte illisible. */
@media print {
  .rg-ciel, .rg-voile, .rg-cadre { display: none !important; }
  .rg-js .rg-textes { display: block !important; }
  .rg-modale { position: static !important; transform: none !important; }
  .rg, .rg-texte { color: #000; background: #fff; box-shadow: none; border: 0; }
  .rg-texte { break-inside: avoid; page-break-inside: avoid; }
  .rg-corps strong, .rg-entete h1, .rg-texte h2, .rg-corps h3 { color: #000; }
  .rg-pied { display: none; }
}