:root {
  --accent: #490029;
  --accent-dark: #300019;
  --accent-soft: #f4e6eb;
  --accent-soft-2: #ecd3de;
  --accent-lumineux: #e8a0c4;
  --texte: #2b2426;
  --texte-doux: #7a6a70;
  --bordure: #e6dbdf;
  --erreur: #a4373a;
  --erreur-soft: #fbe9e9;
  --avertissement: #9a6a1c;
  --avertissement-soft: #fbf1de;
  --succes: #2f6b46;
  --succes-soft: #e9f3ec;
  --fond: #faf7f6;
  --ombre-carte: 0 1px 2px rgba(43, 36, 38, .05), 0 10px 28px -14px rgba(73, 0, 41, .16);
  --ombre-carte-hover: 0 1px 2px rgba(43, 36, 38, .06), 0 16px 36px -14px rgba(73, 0, 41, .24);
  --rayon: 12px;
  --rayon-petit: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body.fond-connexion {
  background:
    radial-gradient(1100px 560px at 12% -8%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 480px at 108% 112%, var(--accent-soft), transparent 55%),
    var(--fond);
}

h1, h2, h3 { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.012em; color: var(--texte); }
h1 { font-size: 1.55rem; margin: 0 0 .65em; }
h2 { font-size: 1.1rem; margin: 0 0 .5em; }

p { line-height: 1.5; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { color: var(--accent-dark); border-bottom-color: currentColor; }

/* --- en-tête --- */

.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  background: var(--accent);
  color: white;
  box-shadow: 0 2px 14px rgba(48, 0, 25, .2);
}
.entete .logo {
  color: white;
  font-weight: 800;
  text-decoration: none;
  border-bottom: none;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.entete .logo::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-lumineux);
  display: inline-block;
}
.entete nav a {
  color: white;
  margin-left: 22px;
  text-decoration: none;
  border-bottom: none;
  opacity: .85;
  font-size: .92rem;
  transition: opacity .15s;
}
.entete nav a:hover { opacity: 1; border-bottom: 1px solid rgba(255, 255, 255, .55); }

.contenu { max-width: 1100px; margin: 0 auto; padding: 40px 24px 68px; }
.contenu.contenu-centree {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* --- cartes --- */

.carte {
  background: white;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 24px 26px;
  margin: 18px 0;
  box-shadow: var(--ombre-carte);
}
.carte-etroite { max-width: 400px; }

.carte-connexion {
  width: 100%;
  max-width: 380px;
  padding: 38px 34px 32px;
  text-align: center;
}
.marque-connexion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--accent);
  letter-spacing: -.01em;
}
.marque-connexion::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.sous-titre-connexion {
  color: var(--texte-doux);
  font-size: .88rem;
  margin: 4px 0 26px;
}
.carte-connexion form { text-align: left; }
.carte-connexion button { width: 100%; margin-top: 6px; }

/* --- modules --- */

.grille-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.carte-module {
  position: relative;
  padding-top: 22px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.carte-module::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: var(--accent);
}
.carte-module:not(.module-indisponible):hover {
  box-shadow: var(--ombre-carte-hover);
  transform: translateY(-2px);
}
.carte-module p { color: var(--texte-doux); font-size: .92rem; margin-bottom: 16px; }
.carte-module.module-indisponible { opacity: .68; }
.carte-module.module-indisponible::before { background: var(--bordure); }

.badge {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .01em;
}
.badge-bientot { background: var(--accent-soft); color: var(--accent); }

/* --- formulaires --- */

form label {
  display: block;
  margin-bottom: 16px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--texte);
}
form input[type=text], form input[type=password], form select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
form input[type=text]:focus, form input[type=password]:focus, form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%237a6a70' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

form input[type=file] {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--fond);
  font-size: .9rem;
  color: var(--texte-doux);
}
form input[type=file]::file-selector-button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-right: 12px;
  transition: background .15s;
}
form input[type=file]::file-selector-button:hover { background: var(--accent-dark); }

/* --- boutons --- */

button, .bouton {
  display: inline-block;
  background: var(--accent);
  color: white;
  border: none;
  padding: 11px 20px;
  border-radius: var(--rayon-petit);
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border-bottom: none;
  box-shadow: 0 1px 2px rgba(48, 0, 25, .12);
  transition: background .15s, box-shadow .15s, transform .1s;
}
button:hover, .bouton:hover {
  background: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(48, 0, 25, .22);
}
button:active, .bouton:active { transform: translateY(1px); }

.bouton-discret {
  background: none;
  color: var(--erreur);
  border: 1px solid var(--erreur);
  padding: 6px 12px;
  font-size: .82rem;
  font-weight: 600;
  box-shadow: none;
}
.bouton-discret:hover { background: var(--erreur-soft); box-shadow: none; }

/* --- messages --- */

.messages { margin-bottom: 20px; }
.message {
  padding: 11px 15px;
  border-radius: var(--rayon-petit);
  margin-bottom: 8px;
  font-size: .92rem;
  font-weight: 600;
}
.message-erreur { background: var(--erreur-soft); color: var(--erreur); }
.message-avertissement { background: var(--avertissement-soft); color: var(--avertissement); }
.message-succes { background: var(--succes-soft); color: var(--succes); }

/* --- tableaux --- */

.carte-tableau {
  background: white;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  margin: 18px 0;
}
.tableau-scroll { overflow-x: auto; }
.tableau-scroll.carte-tableau { padding: 0; }

table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.tableau-liste { font-size: .92rem; }
th, td { padding: 11px 14px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--accent-soft-2);
}
tbody tr:not(:last-child) td { border-bottom: 1px solid var(--bordure); }
tbody tr:hover td { background: #fbf6f8; }
th.colonne-controle { background: #f4eed7; }
tr.ligne-total td { font-weight: 800; background: var(--accent-soft); }
tr.ligne-total:hover td { background: var(--accent-soft); }
.note { font-size: .88rem; color: var(--texte-doux); }