/* NetAppel - feuille de style */
html, body { background:#fff; color:#000; width:100%; text-align:center; }
html, body, form { margin:0; padding:0; border:0; }
html, body, table { font-family: Arial, Helvetica, sans-serif; font-size:12px; }
a { color:#6363B9; background:transparent; font-weight:bold; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:0; }
h1 { font-size:16px; font-weight:bold; margin:1em 0; }
h2 { font-size:14px; font-weight:bold; margin:1em 0 .5em; }
h3 { font-size:12px; font-weight:bold; margin:.2em 0; }
p { margin:.4em 0 .6em; }
big { font-size:14px; }
.small, .s { font-size:10px; }
.white, .white a { color:#fff; }

.page { width:620px; max-width:100%; margin:0 auto; text-align:left; }

/* barre de connexion */
#loginbar { background:#DFDFDF; padding:2px 4px; }
#loginbar form { display:block; font-size:10px; }
#loginbar .lb-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
#loginbar label { font-size:10px; color:#000; }
#loginbar input[type=text], #loginbar input[type=password] { font-size:10px; width:96px; border:1px solid #666; padding:1px 2px; }
#loginbar button { font-size:10px; font-weight:bold; color:#fff; background:#6363B9; border:1px solid #4b4b96; padding:1px 6px; cursor:pointer; }
#loginbar .lp-link { font-size:10px; white-space:nowrap; }
#loginbar .lp-ok { font-size:10px; color:#333; }

/* logo */
#logo { height:86px; position:relative; }
#logo .lp-side { position:absolute; top:12px; width:110px; }
#logo .lp-left { left:0; text-align:left; }
#logo .lp-right { right:0; text-align:right; }
#logo .lp-box { display:block; border:1px solid #6363B9; color:#6363B9; background:#f4f4fb; font-size:9px; font-weight:bold; padding:3px 5px; text-align:center; }
#logo .lp-center { position:absolute; left:0; right:0; top:0; text-align:center; }

/* banniere */
#banner { text-align:center; color:#6363B9; font-style:italic; font-size:17px; padding:10px 0 14px; }

/* menu */
#menu { background:#6363B9; background:linear-gradient(#7b7bc6,#57579f); color:#fff; text-align:center; padding:4px 0; }
#menu a { color:#fff; font-weight:bold; text-decoration:none; padding:0 4px; }
#menu a:hover { text-decoration:underline; }
#menu .sep { color:#c8c8ee; }

/* contenu */
#content { margin:20px 0; overflow:hidden; }
#c1, #c2 { float:left; width:300px; }
#c1 { margin-right:20px; }
#c1 form.dl { margin:1em 0; }
.dl-row { display:flex; align-items:center; gap:10px; margin:6px 0; }
.btn-dl { display:inline-block; background:linear-gradient(#8f8fd0,#5a5aa5); color:#fff !important; font-size:11px; font-weight:bold; padding:4px 12px; border:1px solid #4b4b96; border-radius:3px; cursor:pointer; text-decoration:none; }
.btn-dl:hover { text-decoration:none; background:linear-gradient(#9c9cdb,#6363b0); }
.badge { font-size:9px; color:#6363B9; border:1px solid #b9b9e0; padding:2px 4px; display:inline-block; }

/* panneau violet */
.panel { background:#6363B9; color:#fff; border-radius:3px; padding:8px 10px; margin:10px 0; }
.panel h3, .panel b { color:#fff; }
.panel a { color:#fff; text-decoration:underline; }
.panel .cols { columns:2; column-gap:14px; font-size:10px; line-height:1.5; }
.panel .note { display:block; font-size:10px; font-weight:normal; margin-top:6px; }
.panel ol, .panel ul { margin:.2em 0; padding-left:18px; }

/* tableaux */
table.rates { border-collapse:collapse; width:100%; margin:8px 0; }
table.rates th, table.rates td { text-align:left; border-bottom:1px solid #6363B9; padding:2px 4px; font-size:12px; }
table.rates th.r, table.rates td.r { text-align:right; font-weight:bold; }
table.rates tr.free td { background:#f2f2fb; }
table.sip td { border-bottom:1px solid #ddd; padding:3px 4px; font-size:11px; }
table.sip td.k { color:#6363B9; font-weight:bold; width:45%; }

/* formulaires */
.field { margin:4px 0; }
.field label { display:inline-block; font-size:11px; color:#333; font-weight:bold; }
.field input[type=text], .field input[type=password], .field input[type=email] {
  font-size:11px; padding:2px 3px; border:1px solid #8f8fb5; width:180px;
}
.field select { font-size:11px; padding:2px 3px; border:1px solid #8f8fb5; width:300px; max-width:100%; }
.formbox { border:1px solid #c9c9e6; background:#fafafd; padding:10px 12px; margin:12px 0; }
.formbox h2 { margin-top:0; color:#6363B9; }
.formbox button, .btn { font-size:11px; font-weight:bold; color:#fff; background:#6363B9; border:1px solid #4b4b96; padding:3px 10px; cursor:pointer; }
.formbox button:disabled { background:#9a9ac8; cursor:default; }
.ok { border-left:3px solid #6363B9; background:#f2f2fb; padding:8px 10px; font-size:11px; color:#333; }
.ok b { color:#6363B9; }
.hint { font-size:10px; color:#666; }

/* pied de page */
#copy { margin-top:20px; color:#6363B9; font-size:10px; font-weight:bold; text-align:center; }
#payment { padding-top:5px; margin-top:5px; text-align:center; font-size:11px; color:#6363B9; }
#payment .pm { display:inline-block; border:1px solid #c9c9e6; padding:2px 5px; margin:2px; font-size:9px; color:#555; background:#fff; }
#beta { font-size:10px; color:#000; font-weight:normal; text-align:left; margin:14px 0 30px; line-height:1.45; }
.footer-links { border-top:1px solid #e2e2f0; margin-top:10px; padding-top:6px; }

/* 404 */
.nf { text-align:center; margin:40px 0; }

@media (max-width: 660px) {
  .page { width:auto; padding:0 8px; }
  #c1, #c2 { float:none; width:auto; margin-right:0; }
  #logo { height:auto; }
  #logo .lp-side { display:none; }
  #logo .lp-center { position:static; }
  #loginbar form { justify-content:center; }
  .panel .cols { columns:1; }
}