/* ============================================================
   ANIMA — Réglementation ACM par aspect (spec 2026-09-23, B1)
   Fiche à deux niveaux : essentiel visible, détail dépliable,
   références, date de vérification, « à confirmer localement ».
   Tokens de css/styles.css uniquement (aucune valeur en dur) ;
   l'ambre reste réservé à l'état « à confirmer » (alerte).
   Classes .rgl-* — responsive d'office (cible portable).
   ============================================================ */

.rgl-page{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:var(--sp-3)}
.rgl-intro{margin:0 0 var(--sp-1)}
.rgl-chargement{font-size:.84rem; color:var(--text-3); padding:var(--sp-3) 0}

/* --- Retour --- */
.rgl-back{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; color:var(--text-2); text-decoration:none; padding:4px 0;
}
.rgl-back::before{content:'‹'; font-size:1rem; line-height:1}
.rgl-back:hover{color:var(--text)}

/* --- Fiche --- */
.rgl-fiche{display:flex; flex-direction:column}
.rgl-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3);
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.rgl-ident{display:flex; flex-direction:column; gap:3px; min-width:0}
.rgl-domaine{font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}
.rgl-titre{font-size:1rem; font-weight:600; color:var(--text); margin:0; line-height:1.3}
.rgl-verif{flex:none; font-size:.66rem; color:var(--text-3); letter-spacing:.03em; white-space:nowrap; padding-top:3px}
.rgl-verif time{color:var(--text-2)}

/* Niveau 1 — l'essentiel */
.rgl-essentiel{list-style:none; margin:0; padding:6px 16px 12px; display:flex; flex-direction:column; counter-reset:rgl}
.rgl-point{
  counter-increment:rgl; display:grid; grid-template-columns:22px 1fr; column-gap:10px; row-gap:3px;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.rgl-point:last-child{border-bottom:0}
.rgl-point::before{
  content:counter(rgl); grid-row:1 / span 2; font-family:var(--font-mono); font-size:.7rem;
  color:var(--text-3); padding-top:3px;
}
.rgl-texte{margin:0; font-size:.88rem; color:var(--text); line-height:1.5}
.rgl-ref{display:block; font-size:.68rem; color:var(--text-3); letter-spacing:.03em; line-height:1.4}

/* Niveau 2 — détail et références (dépliables) */
.rgl-detail, .rgl-refs{border-top:1px solid var(--line)}
.rgl-summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; font-size:.8rem; font-weight:600; color:var(--text-2); user-select:none;
}
.rgl-summary::-webkit-details-marker{display:none}
.rgl-summary:hover{color:var(--text)}
.rgl-summary-chev{font-size:.75rem; color:var(--text-3); transition:transform .15s}
details[open] > .rgl-summary .rgl-summary-chev{transform:rotate(90deg)}
.rgl-detail-list{margin:0; padding:0 16px 12px; display:flex; flex-direction:column; gap:6px}
.rgl-detail-titre{font-size:.8rem; font-weight:600; color:var(--text); padding-top:6px}
.rgl-detail-corps{margin:0 0 4px}
.rgl-detail-corps .rgl-texte{font-size:.82rem; color:var(--text-2)}
.rgl-refs-list{margin:0; padding:0 16px 12px 32px; display:flex; flex-direction:column; gap:5px; font-size:.8rem}
.rgl-refs-lien{color:var(--text-2); text-decoration:underline; text-underline-offset:2px; word-break:break-word}
.rgl-refs-lien:hover{color:var(--text)}

/* À confirmer localement — l'ambre porte un état (alerte), pas une décoration */
.rgl-confirmer{margin:0 16px 14px; padding:10px 12px; border-radius:var(--r-sm); background:var(--warn-bg); border:1px solid var(--warn-line)}
.rgl-confirmer-titre{margin:0 0 6px; display:flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; color:var(--warn); letter-spacing:.03em; text-transform:uppercase}
.rgl-confirmer-ico{display:grid; place-items:center}
.rgl-confirmer-ico .ico{width:13px; height:13px}
.rgl-confirmer-list{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:var(--text-2); line-height:1.45}

/* « Me tester sur cet aspect » (quiz, spec B4) */
.rgl-actions{display:flex; justify-content:flex-end; padding:10px 16px 14px; border-top:1px solid var(--line)}
.rgl-quiz-cta{display:inline-flex; align-items:center; text-decoration:none}

.rgl-disclaimer{margin:0; padding:10px 16px 14px; font-size:.7rem; color:var(--text-3); line-height:1.45; border-top:1px solid var(--line)}

/* États vides */
.rgl-vide{padding:14px 16px; border-radius:var(--r-md); border:1px dashed var(--line-2); color:var(--text-2); font-size:.84rem; display:flex; flex-direction:column; gap:4px}
.rgl-vide strong{color:var(--text)}
.rgl-vide p{margin:0}
.rgl-erreur{border-color:var(--crit-line); background:var(--crit-bg)}

/* --- Index des aspects --- */
.rgl-index{display:flex; flex-direction:column; gap:var(--sp-4)}
.rgl-index-domaine{font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.rgl-index-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:8px}
.rgl-index-lien{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line); color:inherit; text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}
.rgl-index-lien:hover, .rgl-index-lien:focus-visible{border-color:var(--line-2); transform:translateY(-1px); outline:none}
.rgl-index-chev{display:grid; place-items:center; color:var(--text-3); flex:none}
.rgl-index-chev .ico{width:14px; height:14px; transform:rotate(-90deg)}
.rgl-index-body{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.rgl-index-titre{font-size:.88rem; font-weight:600; color:var(--text); line-height:1.3}
.rgl-index-meta{font-size:.64rem; color:var(--text-3); letter-spacing:.02em}
.rgl-index-tag{flex:none; font-size:.62rem; color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:999px; padding:2px 8px; white-space:nowrap}

/* --- Liens contextuels (conformité d'équipe) --- */
.rgl-lien-regle{
  display:inline-flex; align-items:center; gap:4px; font-size:.7rem; color:var(--text-2);
  text-decoration:underline; text-underline-offset:2px; white-space:nowrap;
}
.rgl-lien-regle:hover{color:var(--text)}
.rgl-lien-regle::after{content:'▸'; font-size:.6rem}
.conf-portee-liens{display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:6px; min-width:0}
/* Libellés longs de la portée : ils passent à la ligne (nowrap poussait le bloc de 70 px hors de l'écran à 390 px). */
.rgl-lien-portee{white-space:normal; overflow-wrap:anywhere}
.hub-conf-bar .rgl-lien-regle{margin-left:auto}

/* --- Calculateur « Calculer pour mon groupe » (B8e) — fiche Encadrement + Équipe du séjour --- */
.rgl-calc{
  margin:0 16px 14px; padding:12px 14px 14px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line); display:flex; flex-direction:column; gap:10px;
}
.rgl-calc-titre{margin:0; display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:var(--text)}
.rgl-calc-ico{display:grid; place-items:center; color:var(--accent)}
.rgl-calc-ico .ico{width:15px; height:15px}
.rgl-calc-intro,.rgl-calc-prudence{margin:0; font-size:.8rem; color:var(--text-2); line-height:1.5}
.rgl-calc-prudence{padding:8px 10px; border-radius:var(--r-sm); background:var(--warn-bg); border:1px solid var(--warn-line)}
.rgl-calc-form{display:flex; flex-direction:column; gap:10px}
.rgl-calc-grid{display:grid; grid-template-columns:minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap:10px}   /* le type (libellé long) prend deux parts */
.rgl-calc-grid .sf-field{gap:4px; min-width:0}
.rgl-calc-grid .sf-field[hidden]{display:none}
.rgl-calc-grid .sf-label{font-size:.72rem}
.rgl-calc-grid .sf-input,.rgl-calc-grid .sf-select{padding:9px 11px; font-size:.88rem; min-height:44px}
.rgl-calc-check{
  grid-column:1 / -1; display:flex; align-items:flex-start; gap:8px; cursor:pointer;
  font-size:.8rem; color:var(--text-2); line-height:1.4;
}
.rgl-calc-check[hidden]{display:none}
.rgl-calc-check input{margin:2px 0 0; accent-color:var(--accent); flex:none}
.rgl-calc-actions{display:flex; justify-content:flex-end}
.rgl-calc-erreur{
  margin:0; padding:9px 12px; border-radius:var(--r-sm); font-size:.82rem;
  color:var(--crit); background:var(--crit-bg); border:1px solid var(--crit-line);
}
.rgl-calc-res{display:flex; flex-direction:column; gap:10px; padding-top:10px; border-top:1px solid var(--line)}
.rgl-calc-contexte{margin:0; font-size:.76rem; color:var(--text-3); line-height:1.45}
.rgl-calc-hero{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.rgl-calc-hero-n{font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--text); line-height:1; font-variant-numeric:tabular-nums}
.rgl-calc-hero-l{font-size:.92rem; font-weight:600; color:var(--text)}
.rgl-calc-hero-plus{font-size:.78rem; color:var(--text-2)}
.rgl-calc-lignes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.rgl-calc-ligne{display:grid; grid-template-columns:1fr auto; column-gap:12px; row-gap:2px; padding:8px 0; border-top:1px solid var(--line)}
.rgl-calc-ligne-lbl{font-size:.8rem; color:var(--text-2)}
.rgl-calc-ligne-val{font-size:.86rem; font-weight:600; color:var(--text); text-align:right; white-space:nowrap}
.rgl-calc-ligne-det{grid-column:1 / -1; font-size:.74rem; color:var(--text-3); line-height:1.45}
.rgl-calc-ligne-ref{grid-column:1 / -1}
.rgl-calc-ligne.a-verifier .rgl-calc-ligne-val{color:var(--warn); white-space:normal}
.rgl-calc-ligne.non-applicable .rgl-calc-ligne-val{color:var(--text-3); font-weight:500; white-space:normal}
.rgl-calc-alerte{
  display:flex; flex-direction:column; gap:4px; padding:9px 11px; border-radius:var(--r-sm);
  background:var(--warn-bg); border:1px solid var(--warn-line); font-size:.78rem; color:var(--text-2); line-height:1.45;
}
.rgl-calc-alerte strong{font-size:.7rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--warn)}
.rgl-calc-alerte-p{margin:0}
.rgl-calc-alerte .rgl-ref,.rgl-calc-note .rgl-ref{display:inline}
.rgl-calc-note{margin:0; font-size:.74rem; color:var(--text-3); line-height:1.45}
.rgl-calc-portee{margin:0; font-size:.72rem; color:var(--text-3); line-height:1.45}
.rgl-calc-pied{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 12px;
  padding-top:8px; border-top:1px solid var(--line); font-size:.68rem; color:var(--text-3); line-height:1.45;
}
.rgl-calc-lien-fiche{white-space:normal}
/* Accès « Calculer pour ce séjour » dans la conformité d'équipe (render.js) */
.conf-calc-row{margin-top:12px; display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.conf-calc-row .rgl-calc{margin:0; width:100%; box-sizing:border-box}
.conf-calc-row .rgl-calc[hidden]{display:none}

/* --- Portable --- */
@media (max-width:600px){
  .rgl-head{flex-direction:column; gap:6px}
  .rgl-verif{white-space:normal; padding-top:0}
  .rgl-index-list{grid-template-columns:1fr}
  .rgl-index-tag{display:none}
  .rgl-point{grid-template-columns:18px 1fr; column-gap:8px}
  .hub-conf-bar .rgl-lien-regle{margin-left:0; width:100%}
  .rgl-calc{margin:0 12px 12px; padding:10px 12px 12px}
  .rgl-calc-grid{grid-template-columns:1fr 1fr}
  .rgl-calc-grid .rgl-calc-type,.rgl-calc-grid .rgl-calc-duree{grid-column:1 / -1}
  .rgl-calc-actions .sf-btn{width:100%}
  .rgl-calc-ligne{grid-template-columns:1fr}
  .rgl-calc-ligne-val{text-align:left; white-space:normal}
  .rgl-calc-pied{flex-direction:column}
}