/* charte-formulaire.css — mise en page partagée des formulaires charte v2
   (.rf). Utilisée par ReuC.html / ReuM.html et réutilisable ailleurs.
   S'appuie sur les tokens de charte.css. */

.rf {
  --f-fonce: var(--turquoise-fonce, #067264);
  --f-vert: var(--turquoise, #09A38C);
  --f-marine: var(--marine, #001C31);
  --f-ardoise: var(--ardoise, #516B8F);
  --f-filet: var(--filet, #E8E0DC);
  --f-aplat: var(--aplat, #F7F6F3);
  --f-bord: var(--bord-champ, #C9C2B4);
  max-width: 1060px; margin: 16px auto 40px; padding: 0 20px;
  font-family: var(--texte, 'Public Sans'), system-ui, sans-serif; color: var(--f-marine);
}
.rf * { box-sizing: border-box; }
.rf-fil { font: 500 11.5px/1 var(--donnee, 'JetBrains Mono'), monospace; color: var(--f-ardoise); margin-bottom: 10px; }
.rf h1 { font: 700 27px/1.2 var(--titre, 'Space Grotesk'), sans-serif; margin: 0 0 6px; color: var(--f-fonce); }
.rf-chapo { font: 400 14px/1.6 var(--texte, 'Public Sans'), sans-serif; color: var(--f-ardoise); margin: 0 0 24px; }

.rf-carte { background: #fff; border: 1px solid var(--f-filet); padding: 26px 30px; }
.rf-zone { display: grid; grid-template-columns: minmax(0,1fr) 236px; gap: 26px 34px; align-items: start; }
.rf-carte.ouvert .rf-zone { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
@media (max-width: 820px) { .rf-zone, .rf-carte.ouvert .rf-zone { grid-template-columns: 1fr; } }
.rf-zone > * { min-width: 0; }
.rf-pleine { grid-column: 1 / -1; }

.rf-groupe + .rf-groupe { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--f-filet); }
.rf-groupe > h2 { font: 600 12px/1 var(--donnee, 'JetBrains Mono'), monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--f-fonce); margin: 0 0 16px; }
.rf-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 22px; }
@media (max-width: 560px) { .rf-grille { grid-template-columns: 1fr; } }
.rf-champ.large { grid-column: 1 / -1; }
.rf-champ > label { display: block; font: 600 13.5px/1.4 var(--texte, 'Public Sans'), sans-serif; margin-bottom: 5px; }
.rf-champ input:not([type=checkbox]):not([type=radio]),
.rf-champ select, .rf-champ textarea {
  width: 100%; border: 1px solid var(--f-bord); border-radius: 4px; padding: 10px 12px;
  font: 400 14px/1.4 var(--texte, 'Public Sans'), sans-serif; background: #fff; color: var(--f-marine); }
.rf-champ select[multiple] { min-height: 150px; }
.rf-champ input:focus, .rf-champ select:focus, .rf-champ textarea:focus {
  outline: 2px solid var(--f-vert); outline-offset: -1px; }
.rf-champ .help { display: block; font: 400 12px/1.5 var(--texte, 'Public Sans'), sans-serif; color: var(--f-ardoise); margin-top: 4px; }
.rf-champ .errorlist { color: #BF0C2B; font: 500 12.5px/1.4 var(--texte, 'Public Sans'), sans-serif; margin: 5px 0 0; padding: 0; list-style: none; }

.rf-side { display: grid; gap: 9px; align-content: start; min-width: 0; }
.rf-side-titre { font: 600 12px/1 var(--donnee, 'JetBrains Mono'), monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--f-ardoise); margin-bottom: 2px; }
.rf-chip { text-align: left; width: 100%; border: 1px solid var(--f-filet); border-left: 3px solid var(--f-vert);
  background: #fff; color: var(--f-fonce); cursor: pointer; padding: 12px 14px;
  font: 600 13px/1.3 var(--texte, 'Public Sans'), sans-serif; display: flex; align-items: center; gap: 9px; }
.rf-chip::before { content: "+"; font: 500 15px/1 var(--donnee, 'JetBrains Mono'), monospace; }
.rf-chip:hover { background: var(--f-aplat); }
.rf-chip.actif { background: var(--f-aplat); border-left-color: var(--f-fonce); }
.rf-chip.actif::before { content: "–"; }

.rf-panneau { border: 1px solid var(--f-filet); border-left: 3px solid var(--f-fonce);
  background: var(--f-aplat); padding: 18px 20px; margin-top: 4px; overflow: hidden; min-width: 0; }
.rf-panneau > h3 { font: 600 12px/1 var(--donnee, 'JetBrains Mono'), monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--f-fonce); margin: 0 0 14px; }
.rf-panneau .rf-grille { grid-template-columns: 1fr; }
.rf-panneau .rf-champ, .rf-panneau .ck.ck-editor,
.rf-panneau .django_ckeditor_5, .rf-panneau .ck-editor-container { max-width: 100%; min-width: 0; }
.rf-panneau .ck.ck-toolbar { flex-wrap: wrap; }
.rf-panneau .ck.ck-content.ck-editor__editable { min-height: 200px; }

.rf-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; align-items: center; }
.rf-btn { background: var(--f-vert); color: #fff; border: 0; border-radius: 4px; cursor: pointer;
  font: 600 14.5px/1 var(--texte, 'Public Sans'), sans-serif; padding: 14px 28px; }
.rf-btn:hover { background: var(--f-fonce); }
.rf-btn.danger { background: #fff; border: 1px solid #BF0C2B; color: #BF0C2B; }
.rf-annuler { font: 600 13.5px/1 var(--texte, 'Public Sans'), sans-serif; color: var(--f-ardoise); text-decoration: none; }