/* Charte E.LEVEN — questionnaires de satisfaction */
:root {
  --bleu-nuit: #1a3e6b;
  --bleu: #0098d8;
  --vert: #78c75a;
  --vert-fonce: #3f8a2c;
  --vert-pale: #eef7e9;
  --texte: #1f2933;
  --discret: #64707d;
  --bord: #d5dbe1;
  --fond: #f4f6f8;
  --carte: #ffffff;
  --rouge: #c0392b;
  --rouge-pale: #fdecea;
  --orange: #b9770e;
  --orange-pale: #fdf3e1;
  --rayon: 8px;
  --ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --grille: #e6eaee;
  /* Échelle de satisfaction (divergente bleu ↔ orange, validée daltonisme) */
  --c-s4: #1f5f9e; --c-s3: #5a9fdc; --c-s2: #e9a25a; --c-s1: #b4521a; --c-na: #c3cad1;
  /* Options non notées (ordre) : un seul bleu, du foncé au clair */
  --c-q1: #1f5f9e; --c-q2: #4f86c0; --c-q3: #86b0dc; --c-q4: #bcd4ee;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: var(--bleu-nuit); }
h1 { font-size: 1.45rem; line-height: 1.3; margin: 0 0 .35em; color: var(--bleu-nuit); font-weight: 600; }
h2 { font-size: 1.1rem; margin: 0 0 .5em; color: var(--bleu-nuit); font-weight: 600; }
.discret { color: var(--discret); font-weight: 400; font-size: .92em; }

.conteneur { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
main.conteneur { flex: 1; padding-top: 28px; padding-bottom: 40px; }
main.etroit { max-width: 460px; }
main.questionnaire { max-width: 820px; }

/* ------------------------------------------------------------------ En-tête */
.entete-haut { background: #fff; border-top: 6px solid var(--bleu-nuit); }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.entete-haut .entete-ligne { min-height: 84px; padding-top: 6px; padding-bottom: 6px; }
.logo img { display: block; height: 58px; width: auto; }
.entete-bandeau {
  background: linear-gradient(100deg, var(--vert) 0 72%, var(--bleu-nuit) 72% 100%);
  color: var(--bleu-nuit);
}
.entete-bandeau .entete-ligne { min-height: 38px; }
.bandeau-titre { font-weight: 600; font-size: .98rem; }
.bandeau-site { color: #fff; font-size: .85rem; }
@media (max-width: 560px) {
  .entete-bandeau { background: var(--vert); }
  .bandeau-site { display: none; }
  .bandeau-titre { font-size: .88rem; }
}

.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a { text-decoration: none; padding: 7px 11px; border-radius: 6px; font-size: .92rem; color: var(--bleu-nuit); }
.nav a:hover { background: var(--fond); }
.nav .nav-cta { background: var(--bleu-nuit); color: #fff; font-weight: 500; }
.nav .nav-cta:hover { background: #12305a; }
.nav-sep { width: 1px; height: 22px; background: var(--bord); margin: 0 6px; }
.nav-user { font-weight: 500; }

/* ------------------------------------------------------------------ Pied */
.pied { background: var(--bleu-nuit); color: #9fc6e8; font-size: .8rem; padding: 18px 0; border-bottom: 6px solid var(--bleu); }
.pied a { color: #cfe6f8; }

/* ------------------------------------------------------------------ Blocs */
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre); margin-bottom: 20px; }
.titre-page { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.titre-page p { margin: 0; }
.sous-titre { margin-top: 26px; padding-bottom: 6px; border-bottom: 2px solid var(--vert); font-size: 1rem; }

.alerte { padding: 12px 16px; border-radius: var(--rayon); margin-bottom: 16px; border: 1px solid; }
.alerte ul { margin: 6px 0; padding-left: 20px; }
.alerte-ok { background: var(--vert-pale); border-color: #bfe0b0; color: #24561a; }
.alerte-erreur { background: var(--rouge-pale); border-color: #f2b8b1; color: #8a2318; }
.alerte-attention { background: var(--orange-pale); border-color: #f0d29b; color: #7a4d06; }

/* ------------------------------------------------------------------ Formulaires */
.formulaire { display: grid; gap: 14px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: .88rem; font-weight: 500; color: #3a4652; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], select, textarea {
  font: inherit; font-size: .95rem; font-weight: 400; color: var(--texte);
  border: 1px solid var(--bord); border-radius: 6px; padding: 9px 11px; background: #fff; width: 100%;
  transition: border-color .15s, box-shadow .15s, background-color .6s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0, 152, 216, .18); }
input.rempli { background-color: var(--vert-pale); }
textarea { min-height: 110px; resize: vertical; }
.grille { display: grid; gap: 14px; margin-top: 12px; }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .grille-2, .grille-3, .grille { grid-template-columns: 1fr !important; } }

.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: .93rem; font-weight: 500; text-decoration: none; cursor: pointer;
  padding: 9px 18px; border-radius: 6px; border: 1px solid var(--bord); background: #fff; color: var(--bleu-nuit);
  white-space: nowrap;
}
.bouton:hover { background: var(--fond); }
.bouton-principal { background: var(--bleu-nuit); border-color: var(--bleu-nuit); color: #fff; }
.bouton-principal:hover { background: #12305a; }
.bouton-vert { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }
.bouton-vert:hover { background: #33741f; }
.bouton-danger { color: var(--rouge); border-color: #efc2bc; }
.bouton-danger:hover { background: var(--rouge-pale); }
.bouton-petit { padding: 5px 11px; font-size: .84rem; }
.copie-ok { background: var(--vert-fonce) !important; border-color: var(--vert-fonce) !important; color: #fff !important; }

/* Zone de dépôt du PDF */
.depot {
  border: 2px dashed #b9c4cf; border-radius: var(--rayon); padding: 26px 20px; text-align: center; cursor: pointer;
  background: #fafbfc; transition: border-color .15s, background .15s;
}
.depot:hover, .depot:focus, .depot.survol { border-color: var(--bleu); background: #f0f8fd; outline: none; }
.depot.charge { border-style: solid; border-color: var(--vert); background: var(--vert-pale); }
.depot.en-cours { opacity: .7; cursor: progress; }
.depot-icone { color: var(--bleu-nuit); margin-bottom: 6px; }
.depot-texte { color: var(--discret); }
.depot-texte strong { color: var(--bleu-nuit); }
.depot-etat:empty { display: none; }
.depot-etat { margin-top: 12px; text-align: left; font-size: .9rem; padding: 10px 14px; border-radius: 6px; background: #fff; border: 1px solid var(--bord); }
.depot-etat.ok { border-color: #bfe0b0; color: #24561a; }
.depot-etat.attention { border-color: #f0d29b; color: #7a4d06; }
.depot-etat.erreur { border-color: #f2b8b1; color: #8a2318; }
.depot-etat ul { margin: 4px 0 0; padding-left: 20px; }

/* Lien généré */
.lien-genere { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.lien-genere input { flex: 1 1 320px; font-family: Consolas, 'Courier New', monospace; font-size: .9rem; background: var(--fond); }
.email-type { white-space: pre-wrap; background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; padding: 12px 14px; font-size: .9rem; margin: 10px 0; }

/* ------------------------------------------------------------------ Tableaux */
.tableau-conteneur { overflow-x: auto; }
table.liste { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.liste th { text-align: left; font-weight: 600; color: var(--discret); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; padding: 10px 10px; border-bottom: 2px solid var(--bord); white-space: nowrap; }
table.liste td { padding: 11px 10px; border-bottom: 1px solid #e8ecf0; vertical-align: top; }
table.liste tr:hover td { background: #fafbfc; }
table.liste td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.liste .sous { display: block; color: var(--discret); font-size: .82rem; }

.pastille { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 500; white-space: nowrap; }
.pastille-envoye { background: #eef1f4; color: #4a5763; }
.pastille-ouvert { background: #e3f2fb; color: #0b5f86; }
.pastille-repondu { background: var(--vert-pale); color: #2e6b1f; }
.pastille-admin { background: #e8ebf5; color: var(--bleu-nuit); }
.pastille-inactif { background: var(--rouge-pale); color: #8a2318; }

.filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filtres input[type=search] { max-width: 300px; }
.filtres select { width: auto; }

.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
@media (max-width: 760px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chiffre { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; box-shadow: var(--ombre); }
.chiffre b { display: block; font-size: 1.6rem; color: var(--bleu-nuit); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.chiffre span { color: var(--discret); font-size: .84rem; }

dl.infos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: .92rem; }
dl.infos dt { color: var(--discret); }
dl.infos dd { margin: 0; }
@media (max-width: 560px) { dl.infos { grid-template-columns: 1fr; } dl.infos dd { margin-bottom: 6px; } }

.vide { text-align: center; padding: 40px 16px; color: var(--discret); }

/* ------------------------------------------------------------------ Questionnaire client */
.q-titre { text-align: center; color: var(--vert-fonce); font-size: 1.45rem; margin-bottom: 4px; }
.q-intro { text-align: center; font-style: italic; color: #3a4652; margin: 0 auto 18px; max-width: 640px; }
table.q-entete { width: 100%; border-collapse: collapse; border: 2px solid var(--vert-fonce); margin-bottom: 26px; background: #fff; }
table.q-entete th { text-align: left; background: var(--vert-pale); width: 38%; padding: 9px 12px; border: 1px solid #c9dcc0; font-weight: 600; font-size: .92rem; vertical-align: middle; }
table.q-entete td { padding: 6px 10px; border: 1px solid #c9dcc0; }
table.q-entete td.fixe { padding: 9px 12px; }
table.q-entete input { border-color: transparent; background: #fafbfc; }
table.q-entete input:focus { border-color: var(--bleu); background: #fff; }
@media (max-width: 560px) {
  table.q-entete, table.q-entete tbody, table.q-entete tr, table.q-entete th, table.q-entete td { display: block; width: 100%; }
}
.q-section { display: flex; gap: 10px; align-items: baseline; color: var(--vert-fonce); font-weight: 600; font-size: 1.05rem; margin: 30px 0 10px; }
.q-section .n { color: var(--texte); font-weight: 400; }
fieldset.q { border: 1px solid var(--bord); border-radius: var(--rayon); background: #fff; padding: 16px 18px 12px; margin: 0 0 14px; box-shadow: var(--ombre); }
fieldset.q.erreur { border-color: var(--rouge); box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
fieldset.q legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font-weight: 600; line-height: 1.45; }
fieldset.q legend em { font-weight: 400; color: var(--discret); font-size: .9em; }
fieldset.q legend + * { clear: both; }
.q-option { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 6px; font-weight: 400; font-size: .95rem; color: var(--texte); cursor: pointer; }
.q-option:hover { background: var(--fond); }
.q-option input { margin: 4px 0 0; width: 17px; height: 17px; flex: none; accent-color: var(--vert-fonce); }
.q-option:has(input:checked) { background: var(--vert-pale); }
.q-erreur-msg { color: var(--rouge); font-size: .85rem; margin: 4px 10px 0; display: none; }
fieldset.q.erreur .q-erreur-msg { display: block; }
.q-envoi { text-align: center; margin-top: 26px; }
.q-sous-titre { text-align: center; color: var(--vert-fonce); font-weight: 600; margin: 0 0 6px; }
.q-option .q-precision { flex: 1 1 180px; width: auto; height: auto; min-width: 0; padding: 5px 9px; font-size: .9rem; margin: 0; }
.q-option:has(.q-precision) { flex-wrap: wrap; align-items: center; }
.q-option:has(.q-precision) input[type=checkbox] { margin-top: 0; }
.pastille-directeur { background: #e3f2fb; color: #0b5f86; }
.onglets { display: flex; gap: 4px; border-bottom: 2px solid var(--bord); margin-bottom: 18px; flex-wrap: wrap; }
.onglets a { padding: 9px 16px; text-decoration: none; color: var(--discret); font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.onglets a:hover { color: var(--bleu-nuit); }
.onglets a.actif { color: var(--bleu-nuit); border-bottom-color: var(--vert); }
.q-envoi .bouton { padding: 12px 34px; font-size: 1rem; }
.merci { text-align: center; padding: 50px 20px; }
.merci .coche { width: 64px; height: 64px; border-radius: 50%; background: var(--vert-pale); color: var(--vert-fonce); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }

/* Réponses côté administration */
.rep-q { padding: 12px 0; border-bottom: 1px solid #e8ecf0; }
.rep-q:last-child { border-bottom: 0; }
.rep-q .question { font-weight: 500; font-size: .92rem; }
.rep-q .reponse { margin-top: 4px; display: flex; gap: 10px; align-items: baseline; }
.score { display: inline-block; min-width: 26px; text-align: center; font-size: .75rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; color: #fff; }
.score-4 { background: var(--c-s4); } .score-3 { background: var(--c-s3); color: #10243d; } .score-2 { background: var(--c-s2); color: #3b2108; }
.score-1 { background: var(--c-s1); } .score-na { background: var(--c-na); color: #2b333b; }

/* ------------------------------------------------------------------ Analyses (graphiques HTML/CSS) */
.chiffre .sur { font-size: .9rem; color: var(--discret); font-weight: 400; }
.barres { display: grid; gap: 10px; margin-top: 10px; }
.barre-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 2px 0; }
.barre-lib { font-size: .86rem; color: #3a4652; line-height: 1.35; }
.barre-piste { position: relative; height: 18px; display: flex; align-items: center;
  background: repeating-linear-gradient(to right, transparent 0 calc(25% - 1px), var(--grille) calc(25% - 1px) 25%); }
.barre { height: 16px; background: var(--c-s4); border-radius: 0 4px 4px 0; }
.barre-val { font-size: .84rem; font-weight: 600; margin-left: 8px; font-variant-numeric: tabular-nums; }
.axe-barres { display: grid; grid-template-columns: repeat(4, 1fr); margin-left: calc(50% + 7px); font-size: .75rem; color: var(--discret); position: relative; margin-top: 4px; }
.axe-barres span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.axe-barres span:last-child { position: absolute; right: 0; }
@media (max-width: 640px) { .barre-ligne { grid-template-columns: 1fr; gap: 4px; } .axe-barres { margin-left: 0; } }

.legende-echelle { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--discret); margin: 4px 0 8px; }
.legende-echelle span { display: inline-flex; align-items: center; gap: 6px; }
.legende-echelle i, .rep-options i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.repartition { padding: 16px 0; border-top: 1px solid #e8ecf0; }
.rep-titre { font-size: .92rem; margin-bottom: 8px; }
.empile { display: flex; gap: 2px; height: 18px; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.empile > div { min-width: 3px; }
.rep-options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 20px; font-size: .84rem; }
.rep-options li { display: flex; align-items: center; gap: 8px; }
.rep-options .rep-lib { flex: 1; min-width: 0; color: #3a4652; }
.rep-options .rep-n { color: var(--discret); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-options.multiple { grid-template-columns: 1fr; }
.rep-options.multiple .rep-lib { flex: 0 0 min(320px, 45%); }
.mini-piste { flex: 1; height: 12px; background: var(--fond); border-radius: 3px; }
.mini-piste span { display: block; height: 100%; background: var(--c-q2); border-radius: 0 4px 4px 0; }

table.compare td.num, table.compare th.num { text-align: center; }
table.compare tr:hover td { background: inherit; }
.hm-5 { background: #cfe0f3 !important; } .hm-4 { background: #e8f0f9 !important; } .hm-3 { background: #f1f2f4 !important; }
.hm-2 { background: #fbeadb !important; } .hm-1 { background: #f6d3b8 !important; }
.legende-echelle i.hm-5, .legende-echelle i.hm-4, .legende-echelle i.hm-3, .legende-echelle i.hm-2, .legende-echelle i.hm-1 { border: 1px solid #d5dbe1; }

.colonnes { display: flex; gap: 8px; margin-top: 18px; align-items: flex-start; }
.col-axe { display: flex; flex-direction: column; justify-content: space-between; height: 180px; font-size: .75rem; color: var(--discret); }
.col-axe span { line-height: 0; }
.col-zone { flex: 1; display: flex; overflow-x: auto; padding-top: 2px; }
.col { flex: 1 0 46px; display: flex; flex-direction: column; align-items: center; }
.col-piste { height: 180px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  background: repeating-linear-gradient(to top, var(--grille) 0 1px, transparent 1px 45px); border-top: 1px solid var(--grille); box-sizing: content-box; }
.col-barre { width: 24px; background: var(--c-s4); border-radius: 4px 4px 0 0; }
.col-val { font-size: .76rem; font-weight: 600; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.col-lib { font-size: .74rem; color: var(--discret); white-space: nowrap; margin-top: 6px; }

.commentaire { padding: 10px 0; border-top: 1px solid #e8ecf0; }
.commentaire:first-of-type { border-top: 0; }

.infobulle { position: fixed; z-index: 50; pointer-events: none; background: #1f2933; color: #fff; font-size: .8rem;
  padding: 6px 10px; border-radius: 6px; max-width: 320px; box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: 0; transition: opacity .1s; }
.infobulle.visible { opacity: 1; }
[data-tip] { cursor: default; }
.texte-libre { white-space: pre-wrap; background: var(--fond); border-radius: 6px; padding: 10px 12px; margin-top: 6px; }

@media print {
  .entete-haut nav, .actions, .pied, .no-print { display: none !important; }
  body { background: #fff; }
}