/* =====================================================================
   ALYNIA — LE REGLEMENT
   Sommaire a gauche, contenu a droite, et une couche d edition qui ne
   s affiche que pour l administrateur connecte.
   ===================================================================== */

.rgMajLigne{ margin-top:1.4rem; }

/* --- La barre d administration -------------------------------------------- */

.rgBarre{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-bottom:1.4rem;
}

.rgBarre .btn{ padding-top:calc(.7rem + .16em); padding-bottom:calc(.7rem - .16em); font-size:.74rem; }
.rgBarre button.btn{ padding-top:.7rem; padding-bottom:.7rem; }
.rgBarre .btn.creux{ background:none; border-color:var(--line); color:var(--faint); }
.rgBarre .btn.creux:hover{ color:var(--text); border-color:var(--line-hi); }

.rgMsg{
  margin:-.6rem 0 1.4rem;
  padding:.7rem .9rem;
  border-radius:var(--radius-sm);
  background:rgba(255,124,152,.1);
  border:1px solid rgba(255,124,152,.3);
  font-size:.86rem;
}

.rgMsg.ok{
  background:rgba(124,224,168,.1);
  border-color:rgba(124,224,168,.32);
  color:var(--green);
}

/* --- La grille ------------------------------------------------------------- */

.rgGrille{
  display:grid;
  grid-template-columns:16rem 1fr;
  gap:2.4rem;
  align-items:start;
}

@media (max-width:840px){
  .rgGrille{ grid-template-columns:1fr; gap:1.6rem; }
}

/* --- Le sommaire ------------------------------------------------------------
   Colle en haut : sur un reglement qui s allonge, perdre le sommaire au
   bout de deux ecrans oblige a remonter pour changer de categorie. */

.rgNav{
  position:sticky;
  top:6rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}

@media (max-width:840px){
  .rgNav{ position:static; }
}

.rgCat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  width:100%;
  padding:.8rem .9rem;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:none;
  color:var(--dim);
  font-family:inherit;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.04em;
  text-align:left;
  cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease);
}

.rgCat:hover{ background:var(--elem); color:var(--text); }

.rgCat.on{
  background:var(--accent-faint);
  border-color:var(--accent-soft);
  color:var(--accent);
  font-weight:900;
}

.rgCatT{ text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; }

/* Le sous-menu de la categorie ouverte. */
.rgSous{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  margin:.2rem 0 .6rem .9rem;
  padding-left:.9rem;
  border-left:1px solid var(--line);
}

.rgSousL{
  padding:.4rem 0;
  color:var(--faint);
  font-size:.82rem;
  transition:color .18s var(--ease);
}

.rgSousL:hover{ color:var(--accent); }

/* --- Le contenu -------------------------------------------------------------- */

.rgTete{ position:relative; margin-bottom:2.4rem; }

.rgTitre{
  font-weight:900;
  font-style:italic;
  font-size:1.9rem;
  text-transform:uppercase;
  letter-spacing:.01em;
}

.rgResume{ margin-top:.7rem; color:var(--dim); max-width:62ch; }

.rgSection{ margin-bottom:2.4rem; scroll-margin-top:7rem; }

.rgSectionT{
  position:relative;
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--line-soft);
}

.rgSousTitre{
  font-weight:900;
  font-style:italic;
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--accent);
}

.rgRegle{
  position:relative;
  padding:1.2rem 1.3rem;
  margin-bottom:.8rem;
  border-radius:var(--radius);
  background:rgba(21,21,21,.82);
  border:1px solid var(--line-soft);
}

.rgRegleT{ font-weight:900; font-style:italic; font-size:1rem; margin-bottom:.4rem; }
.rgRegleP{ color:var(--dim); font-size:.95rem; line-height:1.65; white-space:pre-line; }

.rgVide{ color:var(--faint); padding:2rem 0; }

/* --- L edition ----------------------------------------------------------------
   Les champs prennent l allure du texte qu ils remplacent : on modifie la
   page telle qu elle sera, pas un formulaire a cote. */

.rgSaisie{
  display:block;
  width:100%;
  padding:.4rem .6rem;
  border-radius:6px;
  border:1px dashed var(--accent-soft);
  background:rgba(255,41,41,.05);
  color:inherit;
  font:inherit;
  resize:none;
}

.rgSaisie:focus{ outline:none; border-style:solid; background:rgba(255,41,41,.09); }

.rgMulti{ overflow:hidden; min-height:2.6rem; }

.rgSup{
  position:absolute;
  top:.5rem; right:.5rem;
  width:1.7rem; height:1.7rem;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,124,152,.35);
  background:rgba(255,124,152,.1);
  color:var(--red);
  font-family:'Segoe UI', system-ui, sans-serif;
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;
}

.rgSup:hover{ background:rgba(255,124,152,.22); }

.rgSectionT .rgSup{ position:static; margin-left:auto; }

.rgAjout{
  margin-top:.4rem;
  padding:.55rem .9rem;
  border-radius:var(--radius-sm);
  border:1px dashed var(--accent-soft);
  background:none;
  color:var(--accent);
  font-family:inherit;
  font-size:.72rem;
  font-weight:900;
  font-style:italic;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}

.rgAjout:hover{ background:var(--accent-faint); }
.rgAjoutS{ margin-top:1rem; }

/* --- La connexion ------------------------------------------------------------- */

.rgModale{
  position:fixed;
  inset:0;
  z-index:220;
  display:grid;
  place-items:center;
  padding:1.4rem;
}

.rgModale[hidden]{ display:none; }

.rgFond{
  position:absolute;
  inset:0;
  background:rgba(6,6,6,.8);
  opacity:0;
  transition:opacity .25s var(--ease);
}

.rgModale.on .rgFond{ opacity:1; }

.rgPanneau{
  position:relative;
  width:min(23rem, 100%);
  padding:2.2rem 1.8rem 1.8rem;
  border-radius:var(--radius);
  background:#131313;
  border:1px solid var(--line-hi);
  box-shadow:var(--shadow);
  text-align:center;
  opacity:0;
  transform:translateY(1.4rem) scale(.97);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}

.rgModale.on .rgPanneau{ opacity:1; transform:none; }

.rgFermer{
  position:absolute;
  top:.7rem; right:.7rem;
  width:2rem; height:2rem;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--elem);
  color:var(--dim);
  font-family:'Segoe UI', system-ui, sans-serif;
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
}

/* Le verrou : ferme au repos, il s ouvre a la reussite. L animation dit ce
   qui se passe plus vite qu une phrase. */
.rgVerrou{
  width:3.4rem;
  height:3.4rem;
  margin:0 auto 1rem;
  color:var(--accent);
}

.rgVerrou svg{ width:100%; height:100%; display:block; }

.rgAnse{
  transform-origin:16px 10.5px;
  transition:transform .5s var(--ease);
}

.rgModale.ouvert .rgVerrou{ color:var(--green); }
.rgModale.ouvert .rgAnse{ transform:translateY(-2.5px) rotate(-28deg); }

/* Pendant l attente, le verrou respire : la reponse du serveur est
   volontairement lente, il faut bien meubler. */
.rgModale.attente .rgVerrou{ animation:rgPouls 1s ease-in-out infinite; }

@keyframes rgPouls{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.55; transform:scale(.94); }
}

/* Le refus se sent avant de se lire. */
.rgModale.refus .rgPanneau{ animation:rgNon .4s var(--ease); }
.rgModale.refus .rgVerrou{ color:var(--red); }

@keyframes rgNon{
  0%, 100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(7px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(2px); }
}

.rgPanneau h3{
  font-weight:900;
  font-style:italic;
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.rgModaleP{ margin-top:.4rem; color:var(--faint); font-size:.82rem; }

.rgLabel{
  display:block;
  margin:1.1rem 0 .35rem;
  text-align:left;
  font-size:.66rem;
  font-weight:900;
  font-style:italic;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
}

.rgChamp{
  width:100%;
  padding:calc(.75rem + .16em) .9rem calc(.75rem - .16em);
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:#0F0F0F;
  color:var(--text);
  font-family:inherit;
  font-size:.92rem;
  transition:border-color .18s var(--ease);
}

.rgChamp:focus{ outline:none; border-color:var(--accent-soft); }

.rgErr{
  margin-top:.9rem;
  padding:.6rem .7rem;
  border-radius:var(--radius-sm);
  background:rgba(255,124,152,.1);
  border:1px solid rgba(255,124,152,.3);
  color:var(--red);
  font-size:.8rem;
  line-height:1.45;
}

.rgGo{ width:100%; justify-content:center; margin-top:1.2rem; }

@media (prefers-reduced-motion: reduce){
  .rgFond, .rgPanneau{ transition:none; opacity:1; transform:none; }
  .rgModale.attente .rgVerrou,
  .rgModale.refus .rgPanneau{ animation:none; }
}

/* --- La bascule de categorie ----------------------------------------------
   Le contenu sort par la gauche, revient par la droite. La page ne bouge
   pas d un pixel : changer de categorie n est pas un deplacement, c est un
   remplacement. */
.rgCorps{ transition:opacity .15s var(--ease), transform .15s var(--ease); }

.rgCorps.sort{ opacity:0; transform:translateX(-.8rem); }

.rgCorps.entre{ animation:rgEntre .32s var(--ease); }

@keyframes rgEntre{
  from{ opacity:0; transform:translateX(1rem); }
  to{ opacity:1; transform:none; }
}

/* La section visee par le sous-menu s annonce d un eclat, plutot que de se
   faire chercher apres un saut. */
.rgSection.vise .rgSousTitre{ animation:rgEclat 1.1s var(--ease); }

@keyframes rgEclat{
  0%{ color:var(--accent); }
  15%{ color:#FFF; text-shadow:0 0 1.2rem rgba(255,41,41,.8); }
  100%{ color:var(--accent); text-shadow:none; }
}

/* --- Moins de vide -----------------------------------------------------------
   Le contenu respirait comme une page de garde. */
.rgTete{ margin-bottom:1.4rem; }
.rgResume{ margin-top:.4rem; }
.rgSection{ margin-bottom:1.6rem; }
.rgSectionT{ margin-bottom:.7rem; padding-bottom:.45rem; }
.rgRegle{ padding:1rem 1.1rem; margin-bottom:.6rem; }
.rgTitre{ font-size:1.7rem; }
.hero.hero--court + .sansHaut{ padding-top:1.4rem; }

@media (prefers-reduced-motion: reduce){
  .rgCorps{ transition:none; }
  .rgCorps.entre{ animation:none; }
  .rgSection.vise .rgSousTitre{ animation:none; }
}

/* Les blocs de section sont des <section> : la regle globale du site,
   `section{ padding:5rem 0 }`, leur ajoutait 80px en haut. C est de la que
   venait le trou entre le resume d une categorie et sa premiere section. */
.rgSection{ padding:0; }
.rgTete{ margin-bottom:1rem; }

/* --- La recherche ----------------------------------------------------------
   En haut de la colonne de gauche : c est la premiere chose qu on cherche
   dans un reglement de cent cinquante regles. */

.rgCote{ display:flex; flex-direction:column; gap:1rem; position:sticky; top:6rem; }
.rgNav{ position:static; }

@media (max-width:840px){
  .rgCote{ position:static; }
}

.rgCherche{
  position:relative;
  display:flex;
  align-items:center;
}

.rgCherche svg{
  position:absolute;
  left:.75rem;
  width:1rem; height:1rem;
  color:var(--faint);
  pointer-events:none;
}

.rgCherche input{
  width:100%;
  padding:calc(.7rem + .16em) 2.2rem calc(.7rem - .16em) 2.4rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:#0F0F0F;
  color:var(--text);
  font-family:inherit;
  font-size:.88rem;
  transition:border-color .18s var(--ease);
}

.rgCherche input::placeholder{ color:var(--faint); }
.rgCherche input:focus{ outline:none; border-color:var(--accent-soft); }

/* La croix native du champ de recherche ne suit pas la charte : on met la
   notre, et on masque celle du navigateur. */
.rgCherche input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

.rgCherche button{
  position:absolute;
  right:.4rem;
  width:1.6rem; height:1.6rem;
  display:grid; place-items:center;
  border-radius:50%;
  border:0;
  background:none;
  color:var(--faint);
  font-family:'Segoe UI', system-ui, sans-serif;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
}

.rgCherche button:hover{ color:var(--text); background:var(--elem); }

/* --- Un resultat ------------------------------------------------------------ */

.rgTrouve{ padding-top:.8rem; }

/* Le fil d Ariane est cliquable : il ramene la regle a sa place dans le
   reglement, ce qui vaut mieux que de la lire hors contexte. */
.rgFil{
  display:inline-block;
  margin-bottom:.5rem;
  padding:0;
  border:0;
  background:none;
  color:var(--accent);
  font-family:inherit;
  font-size:.66rem;
  font-weight:900;
  font-style:italic;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  text-align:left;
}

.rgFil:hover{ text-decoration:underline; text-underline-offset:.2em; }

/* --- Confirmation ----------------------------------------------------------
   Remplace la boite du navigateur, qui affiche l adresse du serveur, ses
   propres boutons et sa propre langue au milieu de la page. */

.rgConf{
  position:fixed;
  inset:0;
  z-index:240;
  display:grid;
  place-items:center;
  padding:1.4rem;
  background:rgba(6,6,6,.78);
  opacity:0;
  transition:opacity .2s var(--ease);
}

.rgConf.on{ opacity:1; }

.rgConfP{
  width:min(24rem, 100%);
  padding:1.8rem 1.6rem 1.4rem;
  border-radius:var(--radius);
  background:#131313;
  border:1px solid var(--line-hi);
  box-shadow:var(--shadow);
  transform:translateY(1rem) scale(.98);
  transition:transform .22s var(--ease);
}

.rgConf.on .rgConfP{ transform:none; }

.rgConfP h3{
  font-weight:900;
  font-style:italic;
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.rgConfM{ margin-top:.7rem; color:var(--dim); font-size:.92rem; line-height:1.6; }

.rgConfA{
  display:flex;
  gap:.7rem;
  justify-content:flex-end;
  margin-top:1.6rem;
  flex-wrap:wrap;
}

.rgConfA .btn{ padding-top:.7rem; padding-bottom:.7rem; font-size:.74rem; }
.rgConfA .btn.creux{ background:none; border-color:var(--line); color:var(--faint); }
.rgConfA .btn.creux:hover{ color:var(--text); border-color:var(--line-hi); }

/* Le bouton qui detruit porte la couleur de ce qu il fait. */
.rgConfOui{
  background:rgba(255,124,152,.14);
  border-color:rgba(255,124,152,.45);
  color:var(--red);
}

.rgConfOui:hover{ background:rgba(255,124,152,.24); border-color:var(--red); color:#FFA7B8; }

/* --- Confort de lecture ------------------------------------------------------ */

/* La sanction, detachee du texte : c est souvent ce qu on cherche en premier. */
.rgSanction{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top:.9rem;
  padding-top:.8rem;
  border-top:1px dashed var(--line);
}

.rgSancL{
  flex:none;
  padding:.2rem .5rem;
  border-radius:5px;
  background:rgba(255,124,152,.12);
  border:1px solid rgba(255,124,152,.32);
  color:var(--red);
  font-size:.6rem;
  font-weight:900;
  font-style:italic;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.rgSancT{ color:var(--dim); font-size:.88rem; line-height:1.5; }

/* Replier une section. */
.rgPli{
  flex:none;
  width:1.4rem; height:1.4rem;
  display:grid; place-items:center;
  border:0;
  background:none;
  color:var(--faint);
  cursor:pointer;
  transition:transform .2s var(--ease), color .2s var(--ease);
}

.rgPli::before{ content:"▾"; font-size:.8rem; line-height:1; }
.rgPli:hover{ color:var(--accent); }
.rgSection.plie .rgPli{ transform:rotate(-90deg); }
.rgSection.plie .rgRegle,
.rgSection.plie .rgAjout{ display:none; }

.rgSectionN{
  margin-left:auto;
  padding:.15rem .45rem;
  border-radius:6px;
  background:var(--elem);
  color:var(--faint);
  font-size:.64rem;
  font-weight:900;
}

/* Les mots trouves, dans les resultats. */
.rgRegle mark{
  background:rgba(255,41,41,.24);
  color:var(--text);
  border-radius:3px;
  padding:0 .1em;
}

/* --- La colonne de gauche defile toute seule ---------------------------------
   Elle est collee en haut : des que la liste depasse la hauteur de l ecran,
   son bas devenait inatteignable, et la molette faisait defiler la page
   derriere au lieu de la liste.

   overscroll-behavior:contain : arrivee en bout de liste, la molette
   s arrete la au lieu d emporter la page avec elle. */
.rgCote{
  max-height:calc(100vh - 8rem);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:.4rem;
}

/* La barre du site est masquee partout : ici il en faut une, sinon rien ne
   dit que la liste continue. Fine, discrete, aux couleurs de la charte. */
.rgCote{ scrollbar-width:thin; scrollbar-color:var(--line-hi) transparent; }
.rgCote::-webkit-scrollbar{ width:5px; }
.rgCote::-webkit-scrollbar-track{ background:transparent; }
.rgCote::-webkit-scrollbar-thumb{ background:var(--line-hi); border-radius:3px; }
.rgCote::-webkit-scrollbar-thumb:hover{ background:var(--accent-soft); }

@media (max-width:840px){
  .rgCote{ max-height:none; overflow:visible; }
}