/* ============================================================
   Style de l'espace fichiers : modifiez librement ce fichier.
   - Les couleurs sont tout en haut, une seule fois chacune :
     light-dark(couleur en mode clair, couleur en mode sombre).
   - Le switch du bandeau force clair ou sombre ; sans choix,
     le site suit le réglage de l'appareil.
   - --marque = rouge Kymco (boutons, liens, onglet actif).
   - Le bandeau (logo + titre + switch) est la classe .bandeau.
   ============================================================ */
:root {
  color-scheme:light dark;
  --fond:light-dark(#F4F4F4, #111);
  --papier:light-dark(#fff, #1B1B1B);
  --encre:light-dark(#141414, #F2F2F2);
  --gris:light-dark(#6B6B6B, #9A9A9A);
  --trait:light-dark(#DEDEDE, #2E2E2E);
  --marque:light-dark(#DD1B00, #FF4A2E);
  --marque-clair:light-dark(#FBE5E1, #3A1814);
  --ok:light-dark(#1E7B4F, #58C08C);
  --alerte:light-dark(#B3261E, #FF8A80)
}

:root[data-theme="light"] {
  color-scheme:light
}

:root[data-theme="dark"] {
  color-scheme:dark
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font:16px/1.5 "Avenir Next","Segoe UI Variable","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased
}

main {
  max-width:780px;
  margin:0 auto;
  padding:40px 20px 80px
}

header {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:28px
}

h1 {
  font-size:28px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0
}

.marque {
  font-weight:600;
  color:var(--gris);
  margin:0 0 6px
}

a {
  color:var(--marque)
}

button,select,input {
  font:inherit;
  color:inherit
}

:focus-visible {
  outline:3px solid var(--marque);
  outline-offset:2px
}

.zone {
  display:block;
  background:var(--papier);
  border:2px solid var(--trait);
  border-radius:14px;
  padding:44px 24px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s,background .15s
}

.zone.survol {
  border-color:var(--marque);
  background:var(--marque-clair)
}

.zone strong {
  display:block;
  font-size:22px;
  letter-spacing:-.01em
}

.zone span {
  color:var(--gris)
}

.options {
  display:flex;
  gap:10px;
  align-items:center;
  margin:14px 2px 26px;
  color:var(--gris)
}

select {
  background:var(--papier);
  border:1px solid var(--trait);
  border-radius:8px;
  padding:6px 10px
}

.envois {
  display:grid;
  gap:8px;
  margin-bottom:26px
}

.envoi {
  background:var(--papier);
  border:1px solid var(--trait);
  border-radius:10px;
  padding:10px 14px;
  position:relative;
  overflow:hidden
}

.envoi i {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0;
  background:var(--marque-clair);
  transition:width .2s
}

.envoi div {
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:12px
}

.envoi.fini i {
  background:transparent
}

.envoi.err {
  border-color:var(--alerte)
}

.envoi.err b {
  color:var(--alerte)
}

.liste {
  background:var(--papier);
  border:1px solid var(--trait);
  border-radius:14px;
  overflow:hidden
}

.ligne {
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 16px;
  padding:14px 18px;
  border-top:1px solid var(--trait)
}

.ligne:first-child {
  border-top:0
}

.ligne .n {
  font-weight:600;
  overflow-wrap:anywhere
}

.ligne .m {
  color:var(--gris);
  font-size:14px;
  font-variant-numeric:tabular-nums
}

.actions {
  grid-row:1 / span 2;
  grid-column:2;
  display:flex;
  gap:8px;
  align-items:center
}

.vide {
  padding:32px 18px;
  color:var(--gris);
  text-align:center
}

.bouton,.petit {
  display:inline-block;
  border:0;
  border-radius:9px;
  background:var(--marque);
  color:light-dark(#fff, #1A0804);
  font-weight:600;
  padding:11px 20px;
  cursor:pointer;
  text-decoration:none
}

.petit {
  padding:7px 12px;
  font-size:14px
}

.petit.neutre {
  background:transparent;
  color:var(--encre);
  border:1px solid var(--trait)
}

.petit.danger {
  background:transparent;
  color:var(--alerte);
  border:1px solid var(--trait)
}

.carte-pub {
  max-width:520px;
  margin:12vh auto;
  background:var(--papier);
  border:1px solid var(--trait);
  border-radius:16px;
  padding:36px 32px
}

.carte-pub .nom {
  font-size:24px;
  overflow-wrap:anywhere;
  margin-bottom:6px
}

.sous {
  color:var(--gris);
  margin:0 0 24px
}

.connexion {
  max-width:380px;
  margin:16vh auto;
  background:var(--papier);
  border:1px solid var(--trait);
  border-radius:16px;
  padding:32px
}

.connexion input {
  width:100%;
  padding:11px 12px;
  border:1px solid var(--trait);
  border-radius:9px;
  background:transparent;
  margin:14px 0
}

.erreur {
  color:var(--alerte);
  margin:0
}

.bandeau {
  background:#DD1B00;
  color:#fff;
  border-bottom:4px solid #141414;
  padding:12px 24px;
  display:flex;
  align-items:center;
  gap:16px
}

.logo {
  height:36px;
  width:auto;
  display:block
}

.suite {
  opacity:.85;
  font-weight:500
}

.zone.survol strong {
  color:var(--marque)
}

section[hidden] {
  display:none
}

.onglets {
  display:flex;
  gap:6px;
  margin:0 0 22px;
  border-bottom:1px solid var(--trait)
}

.onglets button {
  background:none;
  border:0;
  border-bottom:3px solid transparent;
  margin-bottom:-1px;
  padding:10px 14px;
  cursor:pointer;
  color:var(--gris);
  font-weight:600
}

.onglets .actif {
  color:var(--marque);
  border-color:var(--marque)
}

.form {
  display:grid;
  gap:10px;
  background:var(--papier);
  border:1px solid var(--trait);
  border-radius:14px;
  padding:20px;
  margin-bottom:20px
}

.form input,.form select {
  padding:10px 12px;
  border:1px solid var(--trait);
  border-radius:9px;
  background:transparent
}

.form h2 {
  font-size:18px;
  margin:0
}

.note {
  color:var(--ok);
  margin:0
}

.carte-pub .liste {
  margin-top:24px
}

.options {
  flex-wrap:wrap;
  row-gap:8px
}

.coche {
  display:flex;
  gap:6px;
  align-items:center;
  margin-left:12px
}

@media(max-width:560px) {
  .ligne {
    grid-template-columns:1fr
  }
  .actions {
    grid-row:auto;
    grid-column:1;
    margin-top:6px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important
  }
}

.theme {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:0;
  padding:4px 0;
  color:#fff;
  font:inherit;
  font-size:14px;
  cursor:pointer
}

.theme:focus-visible {
  outline-color:#fff
}

.theme .piste {
  position:relative;
  width:50px;
  height:28px;
  border-radius:14px;
  background:rgba(255,255,255,.28)
}

.theme .curseur {
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  transition:transform .2s
}

:root[data-theme="dark"] .theme .curseur {
  transform:translateX(22px)
}

:root[data-theme="dark"] .etiquette::after {
  content:"Sombre"
}

:root:not([data-theme="dark"]) .etiquette::after {
  content:"Clair"
}