/* Pages LanCube hors carte : connexion, politique, Mon espace, Mon club, Programme */
:root { --bg:#f6f7f9; --panel:#fff; --txt:#1d2330; --muted:#667085; --line:#e3e6eb; --accent:#2563eb; --accent-bg:#eef3ff;
        --err:#b42318; --ok:#067647; --ok-bg:#ecfdf3; --avert:#b54708; --avert-bg:#fffaeb; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }  /* l'attribut hidden l'emporte sur les styles des boutons */
body { margin:0; font:15px/1.5 system-ui, sans-serif; color:var(--txt); background:var(--bg); }
a { color:var(--accent); }
h1 { font-size:22px; margin:0 0 4px; }
h2 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 10px; }
small, .muet { color:var(--muted); }
.err { color:var(--err); }
.ok { color:var(--ok); }

main.page { max-width:1100px; margin:0 auto; padding:20px 16px 48px; }
/* pages avec le menu de gauche commun (menu.js) */
body.page-menu { display:flex; align-items:flex-start; }
body.page-menu > main { flex:1; min-width:0; }
@media (max-width: 760px) { body.page-menu { display:block; } }
main.etroit { max-width:640px; }
.carte-bloc { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin:0 0 16px; }
.entete-page { margin:0 0 16px; }

label { display:block; margin:10px 0 4px; color:var(--muted); font-size:13px; }
input[type=text], input[type=email], input[type=search], input[type=date], input[type=number], select, textarea {
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:7px; font:inherit; background:#fff; color:var(--txt); }
textarea { min-height:70px; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
button, .bouton { font:inherit; font-size:14px; padding:8px 14px; border:1px solid var(--line); border-radius:7px; background:#fff;
                  color:var(--txt); cursor:pointer; text-decoration:none; display:inline-block; }
button:hover { background:var(--bg); }
button.primaire { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primaire:hover { filter:brightness(.95); }
button.danger { color:var(--err); }
button.lien { border:none; background:none; padding:0; color:var(--accent); font-size:inherit; }
button:disabled { opacity:.55; cursor:default; }
.ligne { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ligne > input, .ligne > select { flex:1; min-width:160px; width:auto; }
.chk { display:flex; gap:8px; align-items:flex-start; color:var(--txt); font-size:14px; }
.chk input { margin-top:4px; }

.defile { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
td .actions { display:flex; gap:6px; flex-wrap:wrap; }
.etiquette { display:inline-block; font-size:12px; padding:1px 7px; border-radius:10px; background:var(--accent-bg); color:var(--accent); }
.etiquette.gris { background:var(--bg); color:var(--muted); }
.message { padding:10px 12px; border-radius:8px; margin:10px 0; }
.message.ok { background:var(--ok-bg); color:var(--ok); }
.message.avert { background:var(--avert-bg); color:var(--avert); }
.message.err { background:#fef3f2; color:var(--err); }
.grille2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.chiffres { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.chiffres div { background:var(--bg); border-radius:8px; padding:10px; }
.chiffres b { display:block; font-size:20px; }
.vide { color:var(--muted); font-style:italic; }

@media (max-width: 600px) {
  main.page { padding:14px 12px 40px; }
  th.ecran-large, td.ecran-large { display:none; }
}

/* fenêtre de dialogue commune (commun.js : dialogue) */
dialog.dialogue { width:min(420px, calc(100vw - 32px)); padding:20px 20px 16px; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 40px rgba(16,24,40,.25); color:var(--txt); background:var(--panel); font:15px/1.5 system-ui, sans-serif; }
dialog.dialogue::backdrop { background:rgba(15,20,30,.35); }
dialog.dialogue h3 { margin:0 0 6px; font-size:17px; }
dialog.dialogue .dialogue-texte { margin:0 0 6px; color:var(--muted); font-size:14px; }
/* ordre affiché : action destructrice à gauche, puis Annuler et l'action principale à droite ; dans le code,
   l'action principale vient en premier pour que la touche Entrée la choisisse */
dialog.dialogue .dialogue-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; justify-content:flex-end; }
dialog.dialogue .dialogue-actions .danger { order:-1; margin-right:auto; }
dialog.dialogue .dialogue-actions [data-dialogue-annuler] { order:1; }
dialog.dialogue .dialogue-actions .primaire { order:2; }
dialog.dialogue button.danger { color:var(--err); border-color:#f3c6c2; }