/* ============================================================================
   RESPONSABLE_STYLE.CSS
   Suit l'ordre des sections de responsable.html.

   Sommaire :
     0. Variables, thèmes clair/sombre et réinitialisation
     0b. Barre supérieure (titre, compte, recherche, paramètres)
     1. Zone principale, états de la page, accès refusé   (section 1)
     2. Titre, tableau de bord, onglets                   (sections 2.1 à 2.3)
     3. Listes, cartes, pagination et filtres             (sections 2.4 à 2.7)
     4. Fiche d'un message, fiche de compte, sanctions    (sections 2.4 et 2.6)
     5. Législation                                       (section 2.5)
     6. Formulaires et boutons communs
     7. Version mobile

   Règle d'accessibilité : un statut, une sanction ou un rôle est toujours écrit
   en toutes lettres, la couleur seule ne porte jamais l'information.
   (La barre supérieure, le menu et le pied de page sont dans commun_style.css.)
   ============================================================================ */

/* ============================================================================
   0. VARIABLES, THÈMES ET RÉINITIALISATION
   → Désormais défini une seule fois dans /assets/commun/commun_style.css (palette claire/sombre,
     base de la page, barre du haut) : ne pas le redéfinir ici.
   ============================================================================ */


h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink);
  margin: 0;
}
a { color: inherit; text-decoration: none; }
/* Liens placés dans un texte : soulignés pour rester repérables */
main p a, main li a { text-decoration: underline; }   /* seulement dans le contenu : jamais dans le menu ni le pied de page */
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }


/* ============================================================================
   BARRE SUPÉRIEURE (TOPBAR) — remplie par /assets/commun/commun_java.js
   → Désormais défini une seule fois dans /assets/commun/commun_style.css (palette claire/sombre,
     base de la page, barre du haut) : ne pas le redéfinir ici.
   ============================================================================ */


/* ============================================================================
   1. ZONE PRINCIPALE, ÉTATS DE LA PAGE, ACCÈS REFUSÉ
   ============================================================================ */
.resp-main { width: 100%; max-width: 980px; margin: 0 auto; padding: 32px 20px 72px; }
.resp-message { color: var(--ink-soft); }
.resp-erreur { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--clay); border-radius: 4px; background: var(--clay-tint); }
.acces-refuse { margin-top: 28px; padding: 36px 24px; border: 1px dashed var(--line); border-radius: 4px; text-align: center; }
.acces-refuse h2 { font-size: calc(26px * var(--echelle-texte, 1)); margin-bottom: 8px; }
.acces-refuse p { margin: 0 0 18px; color: var(--ink-soft); }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ============================================================================
   2. TITRE, TABLEAU DE BORD, ONGLETS
   ============================================================================ */
.resp-entete h2 { font-size: calc(34px * var(--echelle-texte, 1)); margin-bottom: 4px; }
.resp-role { margin: 0 0 14px; color: var(--muted); }
.rappel { margin-top: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-raised); color: var(--ink-soft); }
.rappel summary { cursor: pointer; font-weight: 500; color: var(--ink); }
.rappel ul { margin: 10px 0 0; padding-left: 20px; }
.rappel li { margin-bottom: 6px; }
.rappel a { color: var(--leaf); text-decoration: underline; }

.tableau { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 22px; }
.carte-chiffre {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; text-decoration: none;
  border: 1px solid var(--line); border-left: 4px solid var(--sun); border-radius: 4px; background: var(--paper-raised);
}
.carte-chiffre:hover { border-color: var(--ink-soft); border-left-color: var(--sun); }
.carte-chiffre:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.chiffre { font-family: 'Fraunces', Georgia, serif; font-size: calc(30px * var(--echelle-texte, 1)); font-weight: 700; line-height: 1.1; }
.chiffre-texte { color: var(--ink-soft); font-size: calc(13.5px * var(--echelle-texte, 1)); }

.onglets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 26px; border-bottom: 1px solid var(--line); }
.onglet {
  padding: 9px 16px; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0;
  background: transparent; color: var(--ink-soft); font-weight: 500;
}
.onglet:hover { color: var(--ink); }
.onglet[aria-selected="true"] { border-color: var(--line); background: var(--paper-raised); color: var(--ink); margin-bottom: -1px; padding-bottom: 10px; }
.onglet:focus-visible { outline: 2px solid var(--leaf); outline-offset: -2px; }
.panneau { padding-top: 22px; }


/* ============================================================================
   3. LISTES, CARTES, PAGINATION ET FILTRES
   ============================================================================ */
.barre-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.barre-filtre label { font-weight: 500; }
.barre-filtre select, .barre-recherche input {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--ink);
}
.barre-recherche { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.barre-recherche input { flex: 1 1 220px; }

.liste-cartes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.carte, .carte-ligne {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 4px; background: var(--paper-raised);
}
a.carte:hover { border-color: var(--ink-soft); }
a.carte:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.carte-titre { font-family: 'Fraunces', Georgia, serif; font-size: calc(17px * var(--echelle-texte, 1)); font-weight: 600; overflow-wrap: anywhere; }
.carte-texte { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-soft); }
.carte-meta, .meta { color: var(--muted); font-size: calc(13px * var(--echelle-texte, 1)); }
.carte-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.meta a { color: var(--leaf); text-decoration: underline; }

.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquette {
  display: inline-block; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px;
  font-size: calc(12px * var(--echelle-texte, 1)); font-weight: 600; color: var(--ink-soft); background: var(--paper);
}
.etiquette.signalement { color: var(--clay); border-color: var(--clay); background: var(--clay-tint); }
.etiquette.statut-en_attente, .etiquette.loi-en_revision { color: var(--sun); border-color: var(--sun); background: var(--sun-tint); }
.etiquette.statut-traite, .etiquette.loi-a_jour { color: var(--leaf); border-color: var(--leaf); background: var(--leaf-tint); }
.etiquette.statut-rejete, .etiquette.loi-obsolete { color: var(--muted); }
.etiquette.statut-encours { color: var(--clay); border-color: var(--clay); background: var(--clay-tint); }

.etat-vide { margin: 12px 0 0; padding: 24px 20px; border: 1px dashed var(--line); border-radius: 4px; text-align: center; color: var(--ink-soft); }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.pagination-texte { color: var(--muted); font-size: calc(13px * var(--echelle-texte, 1)); }
.avis { margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--sun); border-radius: 4px; background: var(--sun-tint); }
.retour { display: inline-block; margin-bottom: 10px; color: var(--leaf); text-decoration: underline; font-size: calc(14px * var(--echelle-texte, 1)); }
.bloc { margin-top: 32px; }
.bloc.premier, .premier { margin-top: 0; }
.bloc h3 { font-size: calc(22px * var(--echelle-texte, 1)); font-weight: 600; margin-bottom: 6px; }
.bloc-intro { margin: 0 0 12px; color: var(--ink-soft); }


/* ============================================================================
   4. FICHE D'UN MESSAGE, FICHE DE COMPTE, SANCTIONS
   ============================================================================ */
#message-titre, #loi-titre { font-size: calc(26px * var(--echelle-texte, 1)); margin-bottom: 4px; overflow-wrap: anywhere; }
.sous-titre { margin: 22px 0 8px; font-size: calc(17px * var(--echelle-texte, 1)); }
.message-cite {
  margin: 0; padding: 14px 16px; border-left: 4px solid var(--clay); border-radius: 0 4px 4px 0;
  background: var(--paper-raised); white-space: pre-wrap; overflow-wrap: anywhere;
}
.liste-contexte, .liste-motifs, .liste-sanctions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.contexte, .motif, .sanction { padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-raised); }
.contexte-texte { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-soft); }
.fiche-compte { padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-raised); }
.fiche-ligne { margin: 0 0 8px; }
.sanction-haut { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.sanction-meta { margin: 4px 0; color: var(--muted); font-size: calc(13px * var(--echelle-texte, 1)); }
.sanction-texte { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mesures { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; }
.mesures legend { padding: 0 8px; font-weight: 600; }


/* ============================================================================
   5. LÉGISLATION
   ============================================================================ */
.sous-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sous-onglet { padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); font-weight: 500; }
.sous-onglet[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sous-onglet:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.coche-signalement { margin-top: 4px; }
code { padding: 1px 5px; border-radius: 3px; background: var(--paper); border: 1px solid var(--line); font-size: .9em; }


/* ============================================================================
   6. FORMULAIRES ET BOUTONS COMMUNS
   ============================================================================ */
.formulaire-bloc {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-raised);
}
.formulaire-bloc h3 { font-size: calc(19px * var(--echelle-texte, 1)); margin-bottom: 8px; }
.champ { margin-top: 14px; }
.champ:first-child { margin-top: 0; }
.champ label, .champ .etiquette-champ, .formulaire-bloc > label { display: block; margin-bottom: 4px; font-weight: 500; }
.champ input[type="text"], .champ select, .champ textarea, .formulaire-bloc textarea, .filtre-cause select, .membre select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}
.filtre-cause select, .membre select { width: auto; }
.champ textarea, .formulaire-bloc textarea { resize: vertical; line-height: 1.55; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible,
.formulaire-bloc textarea:focus-visible, .filtre-cause select:focus-visible, .membre select:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 1px;
}
.champ-aide { margin: 4px 0 0; color: var(--muted); font-size: calc(13px * var(--echelle-texte, 1)); }
.choix .case { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; margin-bottom: 6px; }
.choix .case input { margin-top: 4px; }
.formulaire-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.retour-formulaire { margin: 10px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); font-size: calc(14px * var(--echelle-texte, 1)); }
.retour-formulaire.erreur { background: var(--clay-tint); border-color: var(--clay); }
.retour-formulaire.succes { background: var(--leaf-tint); border-color: var(--leaf); }
.zone-danger { border-color: var(--clay); }

.primary-btn { display: inline-block; background: var(--clay); color: #fff; border: 1px solid var(--clay); padding: 10px 20px; border-radius: 3px; font-weight: 500; text-decoration: none; }
.primary-btn:hover { opacity: .9; }
.secondary-btn { display: inline-block; background: transparent; color: var(--ink); border: 1px solid var(--ink-soft); padding: 9px 20px; border-radius: 3px; font-weight: 500; }
.secondary-btn:hover { background: var(--paper); }
.danger-btn { background: transparent; color: var(--clay); border: 1px solid var(--clay); padding: 9px 20px; border-radius: 3px; font-weight: 600; }
.danger-btn:hover:not(:disabled) { background: var(--clay); color: #fff; }
.lien-bouton { background: none; border: none; padding: 0; color: var(--leaf); font-weight: 500; text-decoration: underline; }
.petit { padding: 5px 12px !important; font-size: calc(13px * var(--echelle-texte, 1)) !important; }
button:disabled { opacity: .5; cursor: not-allowed; }
.primary-btn:focus-visible, .secondary-btn:focus-visible, .danger-btn:focus-visible, .lien-bouton:focus-visible, .retour:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 2px;
}


.champ input[type="number"], .champ input[type="search"] { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--ink); }
.case { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; margin-bottom: 6px; }
.case input { margin-top: 4px; }


/* ============================================================================
   7. VERSION MOBILE
   ============================================================================ */
@media (max-width: 640px) {
  .resp-main { padding: 22px 16px 48px; }
  .onglets { flex-wrap: nowrap; overflow-x: auto; }
  .onglet { white-space: nowrap; }
  .formulaire-actions > * { flex: 1 1 100%; }
  .carte-actions > * { flex: 1 1 100%; text-align: center; }
  .barre-recherche > * { flex: 1 1 100%; text-align: center; }
}


/* ============================================================================
   CAUSES SIMILAIRES À EXAMINER
   ============================================================================ */
.causes-proches {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.cause-proche {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 4px;
}
.cause-proche input[type="radio"] {
  margin-right: 6px;
}
#panneau-causes textarea {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  padding: 8px 10px;
  margin: 6px 0;
  resize: vertical;
}


/* ============================================================================
   GUIDE PRATIQUE : ÉDITEUR D'ARTICLE ET APERÇU
   ========================================================================== */
.retour-liste { margin: 0 0 10px; }
#aide-contenu { font-family: ui-monospace, Menlo, Consolas, monospace; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.formulaire-piece { margin-top: 14px; }
.formulaire-piece h4 { margin: 0 0 6px; font-size: calc(16px * var(--echelle-texte, 1)); }
.formulaire-piece input[type="file"] { max-width: 100%; }

/* Vignette d'une image jointe (liste des pièces de l'éditeur) */
.piece-vignette { display: block; max-width: 160px; max-height: 110px; width: auto; height: auto; border: 1px solid var(--line); border-radius: 3px; margin-top: 6px; }
.retour-insertion { display: block; color: var(--leaf); }

/* Aperçu : mêmes images et fiches que dans l'article public */
/* Fiche d'un document ou d'un lien placé DANS le texte de l'article ([[piece:N]]) */

/* L'aperçu utilise la mise en forme de lecture partagée (/assets/commun/contenu_article.css, classe « contenu-riche »). */