/* =========================================================================
   Sondage Billing Cockpit — Feuille de styles globale
   Charte inspiree d'Egis Group : sobre, corporate, premium.
   Organisation :
     1. Variables et reset
     2. Typographie
     3. Layout et utilitaires
     4. En-tete et selecteur de langue
     5. Hero
     6. Formulaire (sections, progression, champs)
     7. Boutons
     8. Page de remerciement
     9. Pages legales
    10. Widget de contact
    11. Pied de page
    12. Dashboard (KPIs, charts, filtres, tableaux, verbatims, modale)
    13. Admin
    14. Animations
    15. Impression PDF
    16. Responsive
   ========================================================================= */

/* ---- 1. Variables et reset ------------------------------------------- */
:root {
  --color-primary: #0F2C4D;
  --color-primary-soft: #1c4d80;
  --color-accent: #E63946;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F5F2;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6B6B;
  --color-border: #E5E5E5;
  --color-success: #2A9D8F;
  --color-warning: #E9C46A;
  --color-danger: #E63946;

  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shadow-soft: 0 4px 20px rgba(15, 44, 77, 0.08);
  --shadow-card: 0 1px 3px rgba(15, 44, 77, 0.06);
  --shadow-lift: 0 10px 30px rgba(15, 44, 77, 0.14);

  --radius: 8px;
  --radius-lg: 12px;
  --maxw: 1180px;
  --transition: 0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* L'attribut HTML [hidden] doit toujours l'emporter, y compris sur les
   regles de classe qui definissent un display (.btn, .gate, .dash...). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

/* Scrollbars toujours visibles : macOS masque les scrollbars overlay par
   defaut, ce qui cache la presence de contenu en bas de page. On force un
   rendu permanent et discret, coherent avec la charte. */
html { overflow-y: scroll; }
* { scrollbar-width: thin; scrollbar-color: #C4C4C4 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #C4C4C4;
  border-radius: 5px;
  border: 2px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover { background: #A8A8A8; }

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--color-primary); }

/* Accessibilite : visibilite du focus clavier */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -48px;
  background: var(--color-primary); color: #fff;
  padding: 10px 16px; border-radius: var(--radius);
  z-index: 10000; transition: top var(--transition);
}
.skip-link:focus { top: 8px; }

/* ---- 2. Typographie -------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-primary);
  font-weight: 600;
  line-height: 1.2;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin-bottom: 0.75rem; }

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-accent);
}

.section-number {
  font-family: var(--font-serif);
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 600;
  margin-right: 0.5rem;
}

.muted { color: var(--color-text-muted); }
.text-center { text-align: center; }

/* ---- 3. Layout et utilitaires ---------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { max-width: 760px; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page-main { flex: 1; }

.bg-alt { background: var(--color-bg-alt); }

.stack > * + * { margin-top: 1rem; }

/* ---- 4. En-tete et selecteur de langue ------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.site-header .brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 1.05rem;
}
.site-header .brand img { height: 32px; width: auto; }

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang-switch button {
  background: var(--color-bg);
  border: 0;
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.lang-switch button.is-active {
  background: var(--color-primary);
  color: #fff;
}

/* ---- 5. Hero --------------------------------------------------------- */
.hero {
  background: var(--color-bg-alt);
  padding: clamp(48px, 9vw, 120px) 0;
}
.hero .container { max-width: 860px; }
.hero .subtitle {
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  color: var(--color-text);
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}
.hero .intro { color: var(--color-text-muted); margin-bottom: 1.5rem; }
.hero .duration {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-accent);
  padding-left: 12px;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- 6. Formulaire --------------------------------------------------- */
.form-wrap { padding: 48px 0 80px; }

.progress {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.progress-track {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: var(--color-accent);
  transition: width 0.4s ease;
}
.progress-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
}

/* Une section = une etape */
.form-section {
  display: none;
  animation: slide-in 0.35s ease;
}
.form-section.is-active { display: block; }

.form-section h2 { margin-bottom: 1.5rem; }

.field { margin-bottom: 1.75rem; position: relative; }
.field-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-text);
}
.field-help {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.6rem;
}
.field-mark {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 6px;
}
.field-mark.required { color: var(--color-accent); }
.field-mark.optional { color: var(--color-text-muted); }

/* Champs texte */
input[type="text"],
input[type="password"],
textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 44, 77, 0.08);
  outline: none;
}
textarea { min-height: 110px; resize: vertical; }

/* Options choix unique / multiple : cartes cliquables */
.options { display: grid; gap: 10px; }
.option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.option:hover { border-color: var(--color-primary-soft); }
.option input { margin-top: 3px; accent-color: var(--color-primary); }
.option.is-checked {
  border-color: var(--color-primary);
  background: rgba(15, 44, 77, 0.04);
}
.option-text { flex: 1; }

/* Champ texte libre lie a une option "Autre" */
.option-other-text {
  margin-top: 8px;
  margin-left: 36px;
  display: none;
}
.option-other-text.is-visible { display: block; }

/* Echelle 1-5 */
.scale {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.scale-item {
  flex: 1;
  min-width: 56px;
}
.scale-item input { position: absolute; opacity: 0; }
.scale-item label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--transition);
}
.scale-item input:checked + label {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.scale-item input:focus-visible + label {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.scale-ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 6px;
}

/* Message d'erreur de champ */
.field-error {
  display: none;
  color: var(--color-danger);
  font-size: 0.85rem;
  margin-top: 6px;
}
.field.has-error .field-error { display: block; }
.field.has-error input,
.field.has-error textarea { border-color: var(--color-danger); }
.field.has-error .options { outline: 1px solid rgba(230, 57, 70, 0.4); border-radius: var(--radius); }

/* Repere discret sur une question obligatoire encore vide (affiche sur la
   derniere section, quand le bouton d'envoi est desactive). */
.field.is-missing::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--color-warning);
}

/* Message d'aide sous le formulaire quand l'envoi est bloque. */
.submit-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: right;
  margin-bottom: 0.75rem;
}
.submit-hint::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-warning);
  margin-right: 6px;
  vertical-align: middle;
}

/* Consentement */
.consent-box {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.consent-box .option { border: 0; padding: 8px 0; background: none; }

/* Disclaimer dans le hero / identite */
.disclaimer-note {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-success);
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Bandeau d'information (existant, erreur, mode demo) */
.notice {
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
}
.notice-info { background: rgba(15, 44, 77, 0.06); border: 1px solid rgba(15, 44, 77, 0.15); }
.notice-warn { background: rgba(233, 196, 106, 0.18); border: 1px solid var(--color-warning); }
.notice-error { background: rgba(230, 57, 70, 0.1); border: 1px solid rgba(230, 57, 70, 0.4); }
.notice-demo {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  border-radius: 0;
  margin: 0;
  font-size: 0.85rem;
  padding: 8px;
}

.form-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* ---- 7. Boutons ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-soft); }

.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: #c92f3c; }

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn-ghost:hover { background: var(--color-bg-alt); }

.btn-sm { padding: 8px 14px; font-size: 0.82rem; }
.btn-block { width: 100%; }

/* ---- 8. Page de remerciement ----------------------------------------- */
.thanks {
  padding: clamp(60px, 12vw, 140px) 0;
  text-align: center;
}
.thanks .check {
  width: 72px; height: 72px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: rgba(42, 157, 143, 0.12);
  display: flex; align-items: center; justify-content: center;
}
.thanks .check svg { width: 36px; height: 36px; stroke: var(--color-success); }
.edit-link-box {
  margin: 2rem auto 0;
  max-width: 520px;
  text-align: left;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.edit-link-row {
  display: flex; gap: 8px; margin-top: 10px;
}
.edit-link-row input { font-size: 0.85rem; background: #fff; }

/* ---- 9. Pages legales ------------------------------------------------ */
.legal-page { padding: 56px 0 80px; }
.legal-page h2 { margin-bottom: 1.5rem; }
.legal-page h3 { margin-top: 1.75rem; margin-bottom: 0.4rem; }

/* ---- 10. Widget de contact ------------------------------------------- */
.contact-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 280px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(10, 31, 68, 0.08);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform var(--transition), box-shadow var(--transition);
  animation: fade-in 0.4s ease both;
}
.contact-widget:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.contact-widget img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(10, 31, 68, 0.12);
  flex-shrink: 0;
}
.contact-widget .cw-body { line-height: 1.35; min-width: 0; }
.contact-widget .cw-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.contact-widget .cw-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
}
.contact-widget .cw-email {
  display: block;
  font-size: 0.82rem;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-widget .cw-email:hover { text-decoration: underline; }
.contact-widget .cw-close {
  position: absolute;
  top: 4px; right: 6px;
  background: none; border: 0;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
}
.contact-widget .cw-close:hover { color: var(--color-text); }

/* Variante bulle (mobile) */
.contact-widget.is-bubble {
  width: 56px; height: 56px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
.contact-widget.is-bubble .cw-body,
.contact-widget.is-bubble .cw-close { display: none; }
.contact-widget.is-bubble img { width: 40px; height: 40px; }

.contact-widget[hidden] { display: none; }

/* ---- 11. Pied de page ------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  padding: 28px 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
}
.site-footer a { color: var(--color-text-muted); }
.site-footer a:hover { color: var(--color-primary); }
.footer-signature {
  display: flex; align-items: center; gap: 10px;
}
.footer-signature img { width: 34px; height: 34px; border-radius: 50%; }

/* ---- 12. Dashboard --------------------------------------------------- */
.dash {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: 100vh;
}
.dash-sidebar {
  background: var(--color-primary);
  color: #fff;
  padding: 28px 22px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}
.dash-sidebar h3 { color: #fff; font-size: 1rem; }
.dash-sidebar .filter-group { margin-bottom: 1.5rem; }
.dash-sidebar .filter-group > label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
}
.dash-sidebar .filter-option {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.88rem;
  padding: 4px 0;
  cursor: pointer;
}
.dash-sidebar .filter-option input { accent-color: var(--color-accent); }
.filter-count {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.filter-count strong { font-size: 1.3rem; font-family: var(--font-serif); }

.dash-main { padding: 28px 32px 90px; background: var(--color-bg-alt); }
.dash-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

/* Cartes KPI */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 2rem;
}
.kpi-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-card);
}
.kpi-card .kpi-value {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.1;
}
.kpi-card .kpi-label {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.kpi-card .kpi-sub { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 6px; }

/* Cartes de graphiques */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.card h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.card .card-sub { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.chart-holder { position: relative; height: 280px; }

.dash-section-title {
  font-family: var(--font-serif);
  color: var(--color-primary);
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
}

/* Tableaux croises / contingence */
.table-wrap { overflow-x: auto; }
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
table.data-table th,
table.data-table td {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  text-align: left;
}
table.data-table thead th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
table.data-table tbody tr:nth-child(even) { background: var(--color-bg-alt); }
table.data-table .cell-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Cellule heatmap selon intensite */
.heat { font-variant-numeric: tabular-nums; text-align: center; }
.heat-1 { background: rgba(230, 57, 70, 0.18); }
.heat-2 { background: rgba(233, 196, 106, 0.22); }
.heat-3 { background: rgba(233, 196, 106, 0.12); }
.heat-4 { background: rgba(42, 157, 143, 0.16); }
.heat-5 { background: rgba(42, 157, 143, 0.28); }
.heat .heat-n { font-size: 0.7rem; color: var(--color-text-muted); display: block; }

/* Cellule a effectif insuffisant */
.cell-low {
  background: repeating-linear-gradient(45deg, #f3f3f0, #f3f3f0 6px, #eaeae6 6px, #eaeae6 12px);
  color: var(--color-text-muted);
  text-align: center;
  font-size: 0.78rem;
}

.low-n-legend {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* Verbatims */
.verbatim-list { display: grid; gap: 12px; }
.verbatim {
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.verbatim .vb-text { font-style: italic; }
.verbatim .vb-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.verbatim .vb-source {
  font-style: normal;
  font-weight: 600;
  color: var(--color-accent);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Tableau des repondants */
table.respondents-table tbody tr { cursor: pointer; }
table.respondents-table tbody tr:hover { background: rgba(15, 44, 77, 0.05); }
table.data-table th.sortable { cursor: pointer; user-select: none; }
table.data-table th.sortable::after { content: " \2195"; opacity: 0.5; }
table.data-table th.sort-asc::after { content: " \2191"; opacity: 1; }
table.data-table th.sort-desc::after { content: " \2193"; opacity: 1; }

/* Modale */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 44, 77, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 24px;
}
.modal-overlay.is-open { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px;
  box-shadow: var(--shadow-lift);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1rem;
}
.modal-close {
  background: none; border: 0;
  font-size: 1.4rem; cursor: pointer;
  color: var(--color-text-muted);
}
.modal dl { display: grid; gap: 0.5rem; }
.modal dt { font-weight: 600; font-size: 0.85rem; color: var(--color-primary); }
.modal dd { font-size: 0.92rem; margin-bottom: 0.6rem; }

/* Acces refuse (dashboard / admin) */
.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gate-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 36px;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.gate-card .field { text-align: left; }

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.badge-pos { background: rgba(42, 157, 143, 0.15); color: var(--color-success); }
.badge-neg { background: rgba(230, 57, 70, 0.12); color: var(--color-danger); }
.badge-neu { background: rgba(107, 107, 107, 0.12); color: var(--color-text-muted); }

/* ---- 13. Admin ------------------------------------------------------- */
.admin-layout { padding: 28px 32px 90px; }
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1.5rem;
}
.q-list { display: grid; gap: 10px; }
.q-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.q-item.dragging { opacity: 0.5; }
.q-item.drag-over { border-color: var(--color-accent); }
.q-handle { cursor: grab; color: var(--color-text-muted); font-size: 1.1rem; }
.q-item .q-meta { flex: 1; min-width: 0; }
.q-item .q-type {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}
.q-item .q-label { font-weight: 600; }
.q-actions { display: flex; gap: 6px; }

.tag {
  display: inline-block;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ---- 14. Animations -------------------------------------------------- */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---- 15. Impression PDF ---------------------------------------------- */
.pdf-only { display: none; }

body.exporting .contact-widget,
body.exporting .dash-sidebar,
body.exporting .dash-header .btn,
body.exporting .no-print {
  display: none !important;
}
body.exporting .dash { grid-template-columns: 1fr; }
body.exporting .dash-main { background: #fff; padding: 0; }
body.exporting .pdf-only { display: block; }

/* A l'export PDF : ne jamais couper ces blocs entre deux pages.
   - .pdf-avoid : cartes de graphiques et tableaux croises
   - .verbatim  : chaque commentaire libre
   - tr         : chaque ligne de tableau (croises, repondants) */
body.exporting .pdf-avoid,
body.exporting .verbatim,
body.exporting table.data-table tr {
  break-inside: avoid;
  page-break-inside: avoid;
}
/* Le saut de page avant chaque grande section ("Analyse par question",
   "Analyses croisees", "Verbatims", "Detail par repondant") est gere par
   html2pdf via pagebreak.before dans dashboard.js, pour eviter tout
   double saut. */

.pdf-page-break { break-after: page; page-break-after: always; }

@media print {
  .contact-widget, .dash-sidebar, .no-print, .site-header { display: none !important; }
  body { background: #fff; }
}

/* ---- 16. Responsive -------------------------------------------------- */
@media (max-width: 1024px) {
  .dash { grid-template-columns: 1fr; }
  .dash-sidebar {
    position: relative;
    height: auto;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .dash-main, .admin-layout { padding: 20px 16px 90px; }
  .form-wrap { padding: 28px 0 60px; }
  .site-header { padding: 14px 16px; }
  .chart-holder { height: 240px; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .container { padding: 0 16px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .form-nav { flex-direction: column-reverse; }
  .form-nav .btn { width: 100%; }
  /* Le widget de contact se reduit en bulle, gere aussi via JS */
  .contact-widget:not(.is-card-forced) {
    width: 56px; height: 56px;
    padding: 0; border-radius: 50%;
    justify-content: center;
  }
}