/* Oqora CRM · styles de la section Réglages (lot R).
   Toutes les règles sont préfixées par la classe racine de la section (.s-regl) ; seule crm.css (lot 0) définit des
   jetons :root et des règles globales (contrat H.2). Les couleurs viennent des jetons de crm.css.

   25/10/2026 : écran refait comme les Paramètres de GHL. À gauche, un menu par thème (3 groupes, titres en petites
   lettres grises, entrée active sur fond blanc) ; à droite, le titre du thème, une phrase d'aide, puis des cartes
   blanches bordées où chaque réglage tient sur une ligne (nom + aide à gauche, valeur ou bouton à droite).
   Téléphone (< 900 px) : le menu passe au-dessus, en pastilles qui vont à la ligne (aucun défilement horizontal). */
.s-regl{ display:block; }
.s-regl .sr-attente{ padding:var(--sp-6) 0; }
.s-regl .sr-page{ display:grid; grid-template-columns:232px minmax(0, 1fr); gap:var(--sp-8); align-items:start;
  max-width:1180px; color:var(--ink); }

/* ---------------------------------------------------------------- menu des thèmes */
.s-regl .sr-menu{ position:sticky; top:calc(var(--entete-h) + var(--sp-6)); display:flex; flex-direction:column; gap:var(--sp-5); }
.s-regl .sr-groupe-titre{ margin:0 0 var(--sp-1); padding:0 10px; font:500 12px/1.3 var(--font); color:var(--ink-faint);
  letter-spacing:.02em; }
.s-regl .sr-groupe-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.s-regl .sr-lien{ display:flex; align-items:center; gap:var(--sp-2); min-height:36px; padding:0 10px; border-radius:var(--r-md);
  font:500 14px/1.2 var(--font); color:var(--ink-soft); text-decoration:none; border:1px solid transparent; }
.s-regl .sr-lien:hover{ background:var(--hover); color:var(--ink); }
.s-regl .sr-lien:focus-visible{ outline:2px solid var(--bleu); outline-offset:1px; }
.s-regl .sr-lien--actif{ background:var(--surface); color:var(--ink); border-color:var(--rule); font-weight:600; }
.s-regl .sr-point{ width:8px; height:8px; border-radius:50%; background:var(--rouge); margin-left:auto; flex:none; }

/* ---------------------------------------------------------------- écran d'un thème */
.s-regl .sr-contenu{ min-width:0; display:flex; flex-direction:column; gap:var(--sp-5); }
.s-regl .sr-entete{ display:flex; flex-direction:column; gap:var(--sp-1); }
.s-regl .sr-titre{ margin:0; font:700 20px/1.25 var(--font); letter-spacing:-.01em; color:var(--ink); }
.s-regl .sr-sous{ margin:0; font-size:14px; line-height:1.45; color:var(--ink-soft); }

.s-regl .sr-carte{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); min-width:0; }
.s-regl .sr-carte-tete{ padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--rule-soft); }
.s-regl .sr-carte-titre{ margin:0; font:600 16px/1.3 var(--font); color:var(--ink); }
.s-regl .sr-carte-tete .sr-aide{ margin-top:2px; }
.s-regl .sr-carte-corps{ padding:var(--sp-1) var(--sp-5) var(--sp-4); display:flex; flex-direction:column; min-width:0; }

/* Un réglage : nom + aide à gauche, valeur à droite, trait fin entre deux réglages. */
.s-regl .sr-ligne{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); padding:var(--sp-3) 0;
  border-bottom:1px solid var(--rule-soft); min-width:0; }
.s-regl .sr-ligne:last-child{ border-bottom:0; }
.s-regl .sr-ligne--alerte .sr-nom::after{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--rouge); margin-left:8px; vertical-align:middle; }
.s-regl .sr-ligne-texte{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.s-regl .sr-ligne-valeur{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right;
  max-width:45%; }
.s-regl .sr-nom{ margin:0; font:500 14px/1.4 var(--font); color:var(--ink); overflow-wrap:anywhere; }
.s-regl .sr-aide{ margin:0; font-size:13px; line-height:1.45; color:var(--ink-soft); overflow-wrap:anywhere; }
.s-regl .sr-valeur{ font:500 14px/1.4 var(--font); color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.s-regl .sr-seule{ font-size:12px; color:var(--ink-faint); white-space:nowrap; }
.s-regl .sr-doux{ font-size:13px; color:var(--ink-soft); }
.s-regl .sr-fort{ margin:var(--sp-1) 0 0; font-weight:500; color:var(--ink); }
.s-regl .sr-ok{ margin:var(--sp-2) 0 0; font-size:13px; color:var(--ink-soft); }
.s-regl .sr-vide{ margin:var(--sp-3) 0 0; font-size:14px; color:var(--ink-soft); }
.s-regl .sr-sous-titre{ margin:var(--sp-3) 0 var(--sp-1); font:600 14px/1.3 var(--font); color:var(--ink); }
.s-regl .sr-etat{ white-space:nowrap; }
.s-regl .sr-actions{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding-top:var(--sp-4); }
.s-regl .sr-danger{ color:var(--rouge); }
.s-regl .sr-lien-externe{ font:500 14px/1.4 var(--font); color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.s-regl .sr-lien-externe:hover{ text-decoration:underline; }

/* Bandeaux d'état (une phrase) : fond teinté, texte de la couleur du texte courant. */
.s-regl .sr-bandeau{ margin:var(--sp-3) 0 0; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); font-size:13px;
  line-height:1.45; color:var(--ink); overflow-wrap:anywhere; }
.s-regl .sr-bandeau--ambre{ background:var(--ambre-tint); }
.s-regl .sr-bandeau--rouge{ background:var(--rouge-tint); }
.s-regl .sr-ligne .sr-bandeau{ margin-top:var(--sp-2); }

/* Tableaux (appareils, droits) : le tableau commun de crm.css, sans son cadre (il est dans une carte). */
.s-regl .sr-tableau{ border:0; border-radius:0; margin-top:var(--sp-3); }
.s-regl .sr-tableau th{ position:static; background:none; padding:0 var(--sp-3) 0 0; height:32px; }
.s-regl .sr-tableau td{ padding:var(--sp-2) var(--sp-3) var(--sp-2) 0; height:auto; min-height:44px; vertical-align:middle; }
.s-regl .sr-tableau .actions{ padding-right:0; }
.s-regl .sr-tableau tbody tr:hover td{ background:none; }
.s-regl .sr-nom-cellule{ font-weight:500; color:var(--ink); }
.s-regl .sr-tableau--droits td:first-child{ width:30%; }
.s-regl .sr-tableau--droits td:last-child{ width:1%; white-space:nowrap; text-align:right; padding-right:0; }
.s-regl .sr-tableau--droits th:last-child{ text-align:right; padding-right:0; }
.s-regl .sr-tableau--droits td.sr-doux::first-letter{ text-transform:uppercase; }
.s-regl .sr-tr--alerte .sr-nom-cellule::after{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--rouge); margin-left:8px; vertical-align:middle; }
.s-regl .sr-sans{ display:block; margin-top:2px; color:var(--ink); }

/* Personnes, étapes, listes de noms */
.s-regl .sr-personnes{ list-style:none; margin:var(--sp-2) 0 0; padding:0; display:flex; flex-direction:column; }
.s-regl .sr-personne{ display:flex; align-items:center; gap:var(--sp-3); min-height:44px; border-bottom:1px solid var(--rule-soft);
  font-weight:500; }
.s-regl .sr-personne:last-child{ border-bottom:0; }
.s-regl .sr-initiale{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--surface-2); color:var(--ink-soft); font:600 12px/1 var(--font); }
.s-regl .sr-etapes{ list-style:none; margin:var(--sp-1) 0 0; padding:0; display:flex; flex-direction:column; }
.s-regl .sr-etape{ display:flex; align-items:center; gap:var(--sp-3); min-height:40px; border-bottom:1px solid var(--rule-soft);
  font-size:14px; }
.s-regl .sr-etape:last-child{ border-bottom:0; }
.s-regl .sr-etape-n{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--surface-2); color:var(--ink-soft); font:600 12px/1 var(--font); font-variant-numeric:tabular-nums; }
.s-regl .sr-noms{ margin:var(--sp-2) 0 0; padding-left:var(--sp-5); display:flex; flex-direction:column; gap:2px;
  font-size:13px; color:var(--ink-soft); }

/* Parties repliées (« Comment donner ces droits », « Détail par type de donnée », fiches écartées) */
.s-regl .sr-plie{ margin-top:var(--sp-3); border-top:1px solid var(--rule-soft); }
.s-regl .sr-ligne .sr-plie{ border-top:0; margin-top:var(--sp-1); }
.s-regl .sr-plie > summary{ cursor:pointer; min-height:var(--tap); display:flex; align-items:center; gap:var(--sp-2);
  font:500 14px/1.3 var(--font); color:var(--ink); list-style:none; }
.s-regl .sr-plie > summary::-webkit-details-marker{ display:none; }
.s-regl .sr-plie > summary::before{ content:""; width:7px; height:7px; border-right:1.6px solid var(--ink-soft);
  border-bottom:1.6px solid var(--ink-soft); transform:rotate(-45deg); margin:0 4px 0 2px; flex:none; transition:transform .15s; }
.s-regl .sr-plie[open] > summary::before{ transform:rotate(45deg); }
.s-regl .sr-plie > summary:focus-visible{ outline:2px solid var(--bleu); outline-offset:2px; border-radius:var(--r-sm); }
.s-regl .sr-f2 > p{ margin:0 0 var(--sp-2); font-size:14px; line-height:1.45; }
.s-regl .sr-liste-etapes{ margin:0 0 var(--sp-2); padding-left:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2);
  font-size:14px; line-height:1.45; }
.s-regl .sr-liste-etapes li{ overflow-wrap:anywhere; }
.s-regl .sr-cases{ margin:var(--sp-1) 0 0; padding-left:var(--sp-5); display:flex; flex-direction:column; gap:2px; color:var(--ink-soft); }
.s-regl .sr-minis{ list-style:none; margin:var(--sp-2) 0 var(--sp-2); padding:0; display:flex; flex-direction:column; }
.s-regl .sr-mini{ display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-2) 0;
  border-bottom:1px solid var(--rule-soft); font-size:14px; }
.s-regl .sr-mini:last-child{ border-bottom:0; }

/* ---------------------------------------------------------------- téléphone */
@media (max-width:899px){
  .s-regl .sr-page{ grid-template-columns:minmax(0, 1fr); gap:var(--sp-4); }
  .s-regl .sr-menu{ position:static; gap:var(--sp-3); }
  .s-regl .sr-groupe-liste{ flex-direction:row; flex-wrap:wrap; gap:var(--sp-2); }
  .s-regl .sr-lien{ min-height:44px; border-color:var(--rule); background:var(--surface); }
  .s-regl .sr-lien--actif{ border-color:var(--bleu); box-shadow:inset 0 0 0 1px var(--bleu); }
  .s-regl .sr-carte-tete, .s-regl .sr-carte-corps{ padding-left:var(--sp-4); padding-right:var(--sp-4); }
  .s-regl .sr-ligne{ flex-direction:column; align-items:stretch; gap:var(--sp-2); }
  .s-regl .sr-ligne-valeur{ align-items:flex-start; text-align:left; max-width:none; }
  .s-regl .sr-tableau thead{ display:none; }
  .s-regl .sr-tableau, .s-regl .sr-tableau tbody, .s-regl .sr-tableau tr, .s-regl .sr-tableau td{ display:block; width:auto !important; }
  .s-regl .sr-tableau tr{ padding:var(--sp-2) 0; border-bottom:1px solid var(--rule-soft); }
  .s-regl .sr-tableau tr:last-child{ border-bottom:0; }
  .s-regl .sr-tableau td{ border:0; padding:2px 0; min-height:0; text-align:left !important; white-space:normal !important; }
  .s-regl .sr-tableau .btn{ min-height:44px; margin-top:var(--sp-1); }
  .s-regl .sr-actions .btn{ min-height:44px; }
}