@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #f5f6f1;
  --color-surface: #ffffff;
  --color-ink: #16262b;
  --color-ink-soft: #3c4a4d;
  --color-muted: #6b7a78;
  --color-border: #dde3df;
  --color-primary: #1f4b4a;
  --color-primary-light: #3e7068;
  --color-primary-dark: #12302f;
  --color-accent: #b08d57;
  --color-danger: #b3432d;
  --color-ok: #4a7a5e;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-soft: 0 1px 2px rgba(22, 38, 43, 0.06), 0 8px 24px rgba(22, 38, 43, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  margin: 0;
}

a { color: var(--color-primary); }

button {
  font-family: var(--font-body);
  cursor: pointer;
}

/* ---------- Login page ---------- */

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  min-height: 100vh;
}

@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { min-height: 220px; }
}

.login-brand {
  background: linear-gradient(165deg, var(--color-primary-dark), var(--color-primary));
  color: #eef3f1;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.login-brand svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.login-brand .brand-mark {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}

/* Depuis le 2026-11-06, la marque de la page de connexion est le logo (version blanche)
   et non plus le nom ecrit en toutes lettres. La hauteur se deduit de la largeur pour
   garder les proportions exactes du dessin. */
.login-brand .brand-mark img {
  display: block;
  width: 220px;
  height: auto;
}

.login-brand .brand-tagline {
  position: relative;
  max-width: 360px;
}

.login-brand .brand-tagline h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: #fff;
  line-height: 1.2;
  margin-bottom: 14px;
}

.login-brand .brand-tagline p {
  color: #cfe0da;
  font-size: 0.98rem;
}

.login-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
}

.login-card h2 {
  font-size: 1.6rem;
  margin-bottom: 6px;
}

.login-card .subtitle {
  color: var(--color-muted);
  margin-bottom: 32px;
  font-size: 0.95rem;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.98rem;
  font-family: var(--font-body);
  background: var(--color-surface);
  color: var(--color-ink);
}

.field input:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 1px;
  border-color: var(--color-primary-light);
}

.btn-primary {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 600;
  margin-top: 6px;
  transition: background 0.15s ease;
}

.btn-primary:hover { background: var(--color-primary-dark); }
.btn-primary:disabled { background: var(--color-muted); cursor: not-allowed; }

.form-message {
  margin-top: 16px;
  font-size: 0.9rem;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  display: none;
}

.form-message.visible { display: block; }
.form-message.error { background: #f7e6e1; color: var(--color-danger); }
.form-message.info { background: #eaf1ed; color: var(--color-primary-dark); }

/* ---------- Dashboard ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.topbar .brand-mark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-primary-dark);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.btn-ghost:hover { border-color: var(--color-primary-light); color: var(--color-primary-dark); }

.dashboard-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.dashboard-main > .page-title {
  margin-bottom: 32px;
}

.page-title p {
  color: var(--color-muted);
  margin-top: 6px;
}

.hero-stat {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 32px 36px;
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-soft);
}

.hero-stat .value {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1;
}

.hero-stat .label {
  font-size: 0.98rem;
  color: #d7e6e0;
  max-width: 320px;
}

.hero-stat.state-critique { background: var(--color-danger); }
.hero-stat.state-ok { background: var(--color-ok); }
.hero-stat.state-empty { background: var(--color-ink-soft); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}

.stat-card .value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--color-ink);
}

.stat-card .label {
  color: var(--color-muted);
  font-size: 0.88rem;
  margin-top: 4px;
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px 30px;
}

.panel h3 {
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.panel .panel-sub {
  color: var(--color-muted);
  font-size: 0.88rem;
  margin-bottom: 24px;
}

.empty-state {
  padding: 32px 0;
  text-align: center;
  color: var(--color-muted);
}

.chart-legend {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend .swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ---------- Rapport de campagne (page report.html) ---------- */

.report-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.campagne-select {
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-ink);
  background: var(--color-surface);
  min-width: 260px;
}

.report-header {
  margin: 28px 0 8px;
}

.report-header h1 {
  font-size: 1.7rem;
}

.report-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-top: 8px;
}

.category-block {
  margin-bottom: 18px;
}

.category-block .category-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.category-block .category-head .valeur {
  font-weight: 600;
  color: var(--color-ink);
}

.category-bar-track {
  height: 10px;
  background: #eef1ee;
  border-radius: 5px;
  overflow: hidden;
}

.category-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--color-primary);
}

.category-bar-fill.niveau-faible { background: var(--color-danger); }
.category-bar-fill.niveau-moyen { background: var(--color-accent); }
.category-bar-fill.niveau-bon { background: var(--color-ok); }

.question-detail {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.question-detail .q-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.question-detail .q-libelle {
  font-size: 0.95rem;
  color: var(--color-ink);
  max-width: 640px;
}

.question-detail .q-moyenne {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-primary-dark);
  white-space: nowrap;
}

.repartition-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: #eef1ee;
}

.repartition-bar span { height: 100%; }
.rep-1 { background: var(--color-danger); }
.rep-2 { background: #d99a6c; }
.rep-3 { background: #9db98a; }
.rep-4 { background: var(--color-ok); }
.rep-nsp { background: var(--color-border); }

.repartition-legend {
  display: flex;
  gap: 14px;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 6px;
  flex-wrap: wrap;
}

@media print {
  .topbar, .report-toolbar, .btn-ghost { display: none !important; }
  body { background: #fff; }
  .dashboard-main { padding: 0; max-width: none; }
  .panel { break-inside: avoid; border: none; padding: 0 0 16px; }
  .question-detail { break-inside: avoid; }
}

/* ---------- Sondage mensuel (page employé) ---------- */

.survey-shell {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 48px 20px;
}

.survey-card {
  width: 100%;
  max-width: 620px;
}

.survey-header {
  text-align: center;
  margin-bottom: 8px;
}

.survey-header .brand-mark {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 18px;
}

.survey-header h1 {
  font-size: 1.7rem;
  margin-bottom: 10px;
}

.survey-header p {
  color: var(--color-muted);
  max-width: 460px;
  margin: 0 auto;
}

.confidentiality-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #eaf1ed;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 28px 0 8px;
  font-size: 0.88rem;
  color: var(--color-primary-dark);
}

.confidentiality-note .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.question-block {
  margin-top: 34px;
}

.question-block .question-title {
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 4px;
}

.question-block .question-hint {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.rating-scale {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rating-scale button {
  flex: 1 1 0;
  min-width: 30px;
  padding: 10px 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  transition: all 0.12s ease;
}

.rating-scale button:hover { border-color: var(--color-primary-light); }

.rating-scale button.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.rating-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 6px;
}

.survey-submit {
  margin-top: 40px;
}

.survey-submit .btn-primary { max-width: none; }

.survey-success {
  text-align: center;
  padding: 60px 20px;
}

.survey-success .checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-ok);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 1.6rem;
}

.survey-success h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.survey-success p {
  color: var(--color-muted);
  max-width: 380px;
  margin: 0 auto;
}

.survey-error {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-muted);
}

/* ===========================================================================
   Pages d'entrée (connexion et création de compte sur invitation)
   Habillage repris du site vitrine : fond lilas, violet pour l'action, grands
   arrondis, police Nunito. Ajouté le 2026-11-06.

   TOUT EST ENFERMÉ DANS .login-shell, volontairement. Les classes .field,
   .btn-primary et .form-message sont partagées par une douzaine d'autres pages
   du logiciel (tableaux de bord, registres...) : les redéfinir globalement
   changerait l'aspect de tout le produit, ce qui n'est pas demandé. Ici, elles
   ne sont réécrites QUE sous .login-shell.

   Les deux pages concernées sont login.html et inscription-invite.html : elles
   partagent cette coquille, et ce sont les deux seules portes d'entrée — il
   serait étrange qu'elles ne se ressemblent pas.
   ======================================================================== */

.login-shell {
  /* Les couleurs du site vitrine, nommées comme là-bas pour qu'on les retrouve. */
  --vitrine-lilas: #F1EEFB;
  --vitrine-encre: #2B2550;
  --vitrine-encre-douce: #5A5480;
  --vitrine-trait: #DDD7F3;
  --vitrine-violet: #5B4BC4;
  --vitrine-violet-fonce: #4636A8;
  --vitrine-violet-clair: #C9C2FF;
  --vitrine-menthe-claire: #CFF0E2;
  --vitrine-rose-clair: #FAD8E6;
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  color: var(--vitrine-encre);
}

/* --- Panneau de gauche : violet, avec le logo blanc ---------------------- */
.login-shell .login-brand {
  background: linear-gradient(165deg, var(--vitrine-violet), var(--vitrine-violet-fonce));
  color: var(--vitrine-violet-clair);
}

/* Le réseau de points décoratif est dessiné avec des couleurs écrites dans le
   HTML : on les reprend ici plutôt que de toucher au balisage des deux pages. */
.login-shell .login-brand svg { opacity: 0.5; }
.login-shell .login-brand svg g[stroke] { stroke: var(--vitrine-violet-clair); }
.login-shell .login-brand svg g[fill] { fill: var(--vitrine-violet-clair); }

.login-shell .login-brand .brand-tagline h1 {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.login-shell .login-brand .brand-tagline p { color: #DCD6FF; }

/* --- Côté formulaire : fond lilas et carte blanche très arrondie --------- */
.login-shell .login-form-side {
  background: var(--vitrine-lilas);
  position: relative;
  overflow: hidden;
}

/* Les deux taches floues du site vitrine, en décor. Faites en CSS pour ne rien
   ajouter au balisage ; invisibles pour les lecteurs d'écran par nature. */
.login-shell .login-form-side::before,
.login-shell .login-form-side::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.6;
  pointer-events: none;
}
.login-shell .login-form-side::before {
  width: 260px; height: 260px;
  background: var(--vitrine-menthe-claire);
  top: -90px; right: -70px;
}
.login-shell .login-form-side::after {
  width: 200px; height: 200px;
  background: var(--vitrine-rose-clair);
  bottom: -80px; left: -60px;
}

.login-shell .login-card {
  position: relative;   /* passe au-dessus des taches floues */
  z-index: 1;
  max-width: 420px;
  background: #ffffff;
  border-radius: 28px;
  padding: 36px 32px 34px;
  box-shadow: 0 20px 40px rgba(91, 75, 196, 0.12);
}

.login-shell .login-card h2 {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  color: var(--vitrine-encre);
}

.login-shell .login-card .subtitle {
  color: var(--vitrine-encre-douce);
  margin-bottom: 26px;
}

/* --- Champs et bouton : les formes du site vitrine ----------------------- */
.login-shell .field label {
  color: var(--vitrine-encre);
  font-weight: 700;
}

.login-shell .field input {
  font-family: inherit;
  border: 1.5px solid var(--vitrine-trait);
  border-radius: 14px;
  padding: 13px 16px;
  color: var(--vitrine-encre);
}

/* Contour net et bien visible au clavier : même règle que sur le site vitrine. */
.login-shell .field input:focus {
  outline: 3px solid var(--vitrine-violet);
  outline-offset: 2px;
  border-color: var(--vitrine-violet);
}

.login-shell .btn-primary {
  font-family: inherit;
  background: var(--vitrine-violet);
  border-radius: 16px;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 24px;
  margin-top: 10px;
}
.login-shell .btn-primary:hover { background: var(--vitrine-violet-fonce); }
.login-shell .btn-primary:disabled { background: #B5ADE4; }
.login-shell .btn-primary:focus-visible {
  outline: 3px solid var(--vitrine-violet-fonce);
  outline-offset: 3px;
}

.login-shell .form-message.error {
  background: #FBE9F0;
  color: #8E2B55;
  border-radius: 12px;
}
.login-shell .form-message.success {
  background: var(--vitrine-menthe-claire);
  color: #1E7A5C;
  border-radius: 12px;
}

/* Sur téléphone, le panneau violet devient un bandeau : on y garde le logo
   lisible et on retire la grande phrase, qui n'a plus la place de respirer. */
@media (max-width: 900px) {
  .login-shell .login-brand { padding: 28px 24px; min-height: 0; }
  .login-shell .login-brand .brand-tagline h1 { font-size: 1.45rem; }
  .login-shell .login-card { padding: 28px 22px 26px; }
}