/* Les règles applicables : ce qui s'ajoute au composant `.infobulle` de la maison.

   Espace Légal a **déjà** une infobulle — `<details class="infobulle">` et son panneau
   absolu, employés par les champs d'un modèle et le réglage des colonnes. Une seconde
   implémentation aurait écrasé la première (elle l'a fait, le temps d'une mise au point) :
   on reprend donc la sienne, et l'on n'ajoute ici que ce qu'une règle demande de plus.

   Feuille à part plutôt qu'un ajout à `style.css` : ce fichier-là est travaillé par
   d'autres sessions, et deux mains sur un même fichier finissent par se marcher dessus. */

/* Le déclencheur d'une règle se voit un peu plus que celui d'un réglage : c'est une
   lecture à faire, pas un menu. */
/* Ces bulles suivent un titre : sans remise à plat, le panneau hérite du gras et du
   corps du <h1> qui le porte — le texte d'une règle s'y lisait en capitales de titre. */
.infobulle.regle > summary {
  color: var(--couleur-accent, #cc3366);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: normal;
  text-transform: none;
}
.infobulle.regle > summary:hover,
.infobulle.regle[open] > summary { color: var(--couleur-primaire, #003366); }

/* Le panneau d'une règle tient un texte suivi, pas une liste de champs : la mise en
   colonnes du panneau générique n'a pas lieu d'être, et les puces reviennent. */
.infobulle-panneau.regle-panneau {
  max-height: 26rem;
  /* Jamais plus large que l'écran : à 30rem fixes, le panneau élargissait la page
     d'un téléphone. */
  width: min(30rem, calc(100vw - 2rem));
  font-weight: 400;
  font-size: 0.87rem;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  color: var(--couleur-texte, #22304a);
}
.infobulle-panneau.regle-panneau p { margin: 0 0 0.5rem; line-height: 1.55; }
.infobulle-panneau.regle-panneau ul {
  columns: 1;
  list-style: disc;
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
}
.infobulle-panneau.regle-panneau li { font-size: 0.85rem; padding: 0.1rem 0; }

.regle-titre {
  display: block;
  font-weight: 600;
  color: var(--couleur-primaire, #003366);
  font-size: 0.98rem;
  margin-bottom: 0.5rem;
}

/* Le piège est la raison d'être de la bulle : il se voit avant d'être lu. */
.regle-piege {
  background: #fff7fa;
  border-left: 2px solid var(--couleur-accent, #cc3366);
  border-radius: 0 6px 6px 0;
  padding: 0.5rem 0.65rem;
}
.regle-piege > span {
  display: block;
  color: var(--couleur-accent, #cc3366);
  font-size: 0.72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Ce que le portail opposera à cette formalité : la règle avant le refus. */
.regle-verifs {
  background: #f2f6fc;
  border-left: 2px solid var(--couleur-primaire, #003366);
  border-radius: 0 6px 6px 0;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.5rem;
}
.regle-verifs > span {
  display: block;
  color: var(--couleur-primaire, #003366);
  font-size: 0.72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.regle-verifs em { font-style: normal; font-weight: 600; color: var(--couleur-primaire, #003366); }

.regle-source, .regle-pied { color: var(--gris, #5b6a80); font-size: 0.78rem; }
.regle-pied { margin-bottom: 0; }