/* ContraGo - flow question-par-question kiné + panneau d'aperçu live. */

.kine-header-label {
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.progress-track {
  /* Le header est en position: fixed (rectangulaire ancré depuis le
     02/09/2026, shared.css) - il ne pousse plus le contenu qui suit dans le
     flux. 70px = hauteur réelle du header (padding 18px + logo 34px + 18px),
     pour que la barre de progression arrive pile dessous, sans écart (retour
     utilisateur : 80px laissait un vide visible). */
  margin-top: 70px;
  height: 4px;
  background: var(--color-border);
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 0.25s ease;
}

.kine-layout {
  display: grid;
  grid-template-columns: minmax(360px, 620px) 1fr;
  gap: 0;
  align-items: start;
  min-height: calc(100vh - 4px);
}
@media (max-width: 960px) {
  .kine-layout { grid-template-columns: 1fr; }
}

.question-panel {
  padding: 32px 40px 100px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

/* ---------- Notices (disclaimer + rappels post-génération) ----------
   Deuxième itération (29/08/2026) : le premier essai (icône en médaillon +
   kicker + texte sur fond teinté) faisait trop composant de bibliothèque UI
   générique. Retour à un texte simple avec un filet d'accent à gauche - même
   esprit que le reste du site (mentions italiques, kickers discrets), pas de
   carte ni d'icône dans un rond. */
.notice {
  border-left: 3px solid var(--color-accent);
  padding: 1px 0 1px 14px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text);
}
.notice strong { color: var(--color-primary); font-weight: 600; }

/* Bloc disclaimer légal + confidentialité fusionnés (03/09/2026) : un seul
   filet gauche continu (hérité de .notice ci-dessus), la ligne confidentialité
   se distingue par la couleur et le gras, pas par un conteneur à part - après
   plusieurs essais en pilule séparée, jugés trop visibles/pas assez discrets. */
.disclaimer-block.notice { margin: 0 0 24px; }
.disclaimer-block .disclaimer {
  margin: 0 0 6px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.disclaimer-block .disclaimer-privacy {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-accent-dark);
  font-weight: 600;
}

/* Rappels post-génération (panneau d'aperçu) : un peu plus de présence que le
   simple filet (retour de Louis du 29/08/2026 - "on ne les voit pas assez") -
   fond légèrement teinté derrière le filet, coins arrondis côté droit
   seulement. Toujours pas de carte ni d'icône en médaillon. */
.notice-compact {
  background: var(--color-info-bg);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
}
.notice-compact + .notice-compact { margin-top: 14px; }

.mobile-preview-toggle { display: none; margin-bottom: 18px; margin-left: 0; }

.question-step { display: none; animation: step-in 0.2s ease; min-height: 320px; }
.question-step.active { display: block; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-kicker {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 0 6px;
}
/* Repère coloré au-dessus du titre d'étape - même motif que .legal-marked-heading
   (pages légales), pour raccorder le panneau de questions à la DA récente du
   site. Retouche du 29/08/2026, à la demande de Louis. */
.step-title::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-accent);
  margin-bottom: 10px;
}
.step-title {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin: 0 0 20px;
  line-height: 1.3;
}
.step-hint { color: var(--color-muted); font-size: 0.88rem; margin: -12px 0 18px; }

.field-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.field-row:last-child { margin-bottom: 0; }

.field { display: flex; flex-direction: column; flex: 1 1 160px; gap: 5px; }
.field-small { flex: 0 0 110px; }
.field-wide { flex: 1 1 100%; }
.field-checkbox { flex: 1 1 100%; }

label { font-size: 0.85rem; font-weight: 500; color: var(--color-text); }
.field-checkbox label { font-weight: 400; display: flex; align-items: flex-start; gap: 8px; }
.field-checkbox input { margin-top: 3px; }

input, select, textarea {
  font: inherit;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
input:disabled { opacity: 0.6; }

/* Sans ce reset, le <select> garde son rendu natif par-dessus la bordure/le fond
   personnalisés ci-dessus - discret sous Chrome mais très visible sous Safari (pilule
   arrondie + double-flèche façon stepper, cf. retour du 25/08/2026 sur la page
   dentiste, appliqué ici à l'identique par exception ponctuelle au verrouillage de
   cette page). On retire le rendu natif et on redessine un chevron simple, identique
   dans les deux thèmes. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 34px;
}
@media (prefers-color-scheme: dark) {
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0ba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

.field-error {
  font-size: 0.78rem;
  color: var(--color-error);
  min-height: 0;
}
.field-error:empty { display: none; }
input.invalid, select.invalid, textarea.invalid { border-color: var(--color-error); }

.field-hint { font-size: 0.78rem; color: var(--color-muted); margin: 2px 0 0; }
.field-hint.banner-info { color: inherit; }

.banner {
  font-size: 0.82rem;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0 0;
}
.banner-info { background: var(--color-info-bg); border: 1px solid var(--color-info-border); }
.banner-warning { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); }
/* Refonte du 01/09/2026 (uniformisation avec dentiste.css/medecin-generaliste.css,
   validée par Louis) : reprend la forme de .notice.notice-compact (filet
   gauche + fond teinté + coins arrondis à droite seulement, jamais de bordure
   complète) déjà approuvée pour les bandeaux post-génération, recolorée en
   jaune - y compris les bandeaux jusqu'ici bleus (banner_24h), désormais
   traités comme les autres disclaimers de la page plutôt que comme une simple
   info neutre. */
.banner.banner-info,
.banner.banner-warning {
  background: var(--color-warning-bg);
  border: none;
  border-left: 3px solid var(--color-warning-border);
  border-radius: 0 8px 8px 0;
}
.field-warning { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: 8px; padding: 6px 8px; }

/* Mise en avant discrète d'une étape non bloquante (seuil de durée franchi) -
   étape 5 du 24/08/2026 : l'étape reste toujours accessible, seule sa présentation
   change selon que le seuil légal est atteint ou non. */
.step-emphasis .step-kicker { color: var(--color-accent); }
.step-emphasis { border-left: 3px solid var(--color-info-border); padding-left: 12px; }

/* ---------- Encadré durée (étape 8) et pastille de rappel (étape 12) ----------
   Refonte du 24/08/2026 : la durée, le verdict (seuil atteint ou non) et la
   source juridique sont trois informations distinctes, affichées à trois
   niveaux de lecture séparés au lieu d'un paragraphe unique.

   Couleurs des pastilles : jamais de rouge/orange - atteindre le seuil de 3
   mois n'est pas une erreur, juste une situation qui déclenche une clause
   supplémentaire. Les deux teintes utilisées (--badge-atteint-text,
   --badge-non-atteint-text) sont dérivées des tokens du site
   (--color-accent-dark, --color-primary) et suivent le mode sombre comme le
   reste du formulaire - valeurs choisies et vérifiées pour un contraste
   d'au moins 4,5:1 sur --color-surface dans les deux modes (cf. rapport de
   tests). */
:root {
  --badge-atteint-text: var(--color-accent-dark);
  --badge-non-atteint-text: var(--color-primary);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* --color-accent-dark (#2a6cb0) ne s'éclaircit pas en mode sombre comme
       --color-primary : sur le fond --color-surface sombre (#1c2932), il ne
       ressort qu'à 2,7:1. #82B8E8 reste dans la même famille de bleu, passe
       à 7,1:1. */
    --badge-atteint-text: #82B8E8;
  }
}

.duree-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 12px 0 0;
}
.duree-box-kicker {
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  font-weight: 600;
  margin: 0;
}
.duree-box-value {
  color: var(--color-primary);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 2px 0 0;
  line-height: 1.25;
}
.duree-box-sub {
  color: var(--color-muted);
  font-size: 0.78rem;
  margin: 0 0 10px;
}

.duree-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  margin: 0;
}
.duree-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.duree-badge-non-atteint { color: var(--badge-non-atteint-text); }
.duree-badge-non-atteint .duree-badge-dot { background: var(--badge-non-atteint-text); }
.duree-badge-atteint { color: var(--badge-atteint-text); }
.duree-badge-atteint .duree-badge-dot { background: var(--badge-atteint-text); }

/* Rappel de durée en tête de l'étape 12 : même pastille, posée directement
   dans le flux de l'étape (pas dans un encadré .duree-box - la durée a déjà
   son encadré complet à l'étape 8, ici ce n'est qu'un rappel court). */
#rayon_duree_badge { margin: 0 0 14px; }

.duree-details {
  margin-top: 10px;
}
.duree-details summary {
  cursor: pointer;
  color: var(--color-accent);
  font-size: 0.82rem;
  font-weight: 500;
  /* 44 px de zone tactile minimum sur mobile (règle d'accessibilité du
     design system) sans agrandir le lien visuellement sur desktop. */
  padding: 6px 4px;
  margin: -6px -4px;
  border-radius: 6px;
}
.duree-details summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.duree-details p {
  color: var(--color-text);
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 8px 0 0;
}
@media (max-width: 640px) {
  .duree-details summary {
    min-height: 44px;
    padding: 4px;
    margin: -4px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
}

/* Repère visuel léger pour un groupe de cases à cocher liées (étape 5 :
   cessation d'activité + dérogation) - demande explicite du 25/08/2026 de
   rendre cette petite partie "plus visuelle, mais légèrement" : un encadré
   discret au même vocabulaire que .duree-box, pas un bloc plus lourd. */
.checkbox-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 18px;
}
.checkbox-card .field-row { margin-bottom: 14px; }
.checkbox-card .field-row:last-child { margin-bottom: 0; }
.checkbox-card > .field-row + .field-row {
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.checkbox-card input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 16px;
  height: 16px;
}

/* Sections en cartes distinctes (étape 9 : identification / rétrocession /
   modalités de versement) - demande du 25/08/2026 : un simple filet de
   séparation (v1) restait insuffisant vu la quantité d'information sur cette
   étape ("j'ai toujours du mal à distinguer les parties") - chaque section
   devient sa propre carte (même vocabulaire que .checkbox-card), avec un
   repère de couleur devant le micro-titre pour l'ancrer visuellement. */
.field-section {
  margin-top: 16px;
  padding: 18px 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.field-section:first-child { margin-top: 0; }
.field-section-title {
  position: relative;
  padding-left: 14px;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  font-weight: 700;
  margin: 0 0 14px;
}
.field-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: var(--color-accent);
}

.form-error-summary {
  color: var(--color-error);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-error);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.88rem;
  margin: 16px 0 0;
  white-space: pre-line;
}

.step-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}
.step-count { color: var(--color-muted); font-size: 0.82rem; flex: 1; text-align: center; }
.step-nav .btn-primary, .step-nav .btn-ghost { flex: 0 0 auto; }
#next-btn, #generate-btn { margin-left: auto; }
.step-nav .btn-ghost:disabled { opacity: 0.35; cursor: not-allowed; }
.step-nav .btn-ghost:disabled:hover { background: transparent; color: var(--color-primary); }

/* ---------- Panneau d'aperçu ---------- */

.preview-panel {
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  padding: 32px 36px;
  position: sticky;
  top: 4px;
  height: calc(100vh - 4px);
  overflow-y: auto;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 10px;
}
.preview-header h2 { margin: 0; font-size: 1.05rem; color: var(--color-primary); }
.preview-header-actions { display: flex; align-items: center; gap: 10px; }
.mobile-preview-close { display: none; }

.post-generation-banners { margin-bottom: 16px; }

.contract-preview {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 22px 26px;
  font-size: 0.86rem;
  background: var(--color-bg);
}
.preview-placeholder { color: var(--color-muted); font-style: italic; }

.preview-letterhead {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}
.preview-letterhead-logo { height: 22px; display: block; }

.contract-preview .c-title { text-align: center; font-family: var(--font-heading); font-weight: 400; font-size: 1.1rem; margin: 0 0 4px; color: var(--color-primary); }
.contract-preview .c-subtitle { text-align: center; font-style: italic; color: var(--color-muted); margin: 0 0 18px; font-size: 0.82rem; }
.contract-preview .c-heading {
  position: relative;
  font-weight: 600;
  margin: 22px 0 8px;
  padding-top: 10px;
  color: var(--color-primary);
}
.contract-preview .c-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
}
.contract-preview .c-label { font-weight: 600; margin: 10px 0 4px; color: var(--color-primary); }
.contract-preview .c-label-center { font-weight: 600; text-align: center; margin: 16px 0; color: var(--color-primary); }
.contract-preview .c-p { margin: 0 0 8px; text-align: justify; }
.contract-preview .c-identity { margin: 4px 0 2px; }
/* La barre d'accent s'arrête à la fin des lignes d'adresse - .c-closing (la
   mention "Ci-après dénommé") est un sibling, hors de cette sous-div, pour ne
   pas prolonger la barre inutilement (correctif du 29/08/2026). */
.contract-preview .c-identity-lines {
  padding-left: 10px;
  border-left: 3px solid var(--color-accent);
}
.contract-preview .c-identity-lines div { margin: 2px 0; }
.contract-preview .c-identity .c-closing { text-align: right; font-style: italic; margin-top: 4px; color: var(--color-muted); }
.contract-preview .c-signature { display: flex; justify-content: space-between; gap: 24px; margin-top: 34px; }
.contract-preview .c-signature span {
  display: block;
  flex: 1 1 auto;
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
  font-weight: 600;
  color: var(--color-primary);
}
.contract-preview .c-spacer { height: 10px; }
.preview-footnote {
  margin: 28px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.76rem;
}
.contract-preview .c-cursor {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: var(--color-accent);
  margin-left: 2px;
  vertical-align: -0.1em;
  animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* ---------- H1 ----------
   Repositionné en tête de la colonne (avant le disclaimer) et traité façon
   mini-hero centré - même traitement que dentiste.css, medecin-generaliste.css
   et infirmier.css (décision du 01/09/2026). */
.question-panel > h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  color: var(--color-primary);
  margin: 0 0 32px;
}
@media (max-width: 480px) {
  .question-panel > h1 { font-size: 1.5rem; }
}

/* ---------- Teaser vers la FAQ : léger, pas de mur de texte sous le pas courant ---------- */

html { scroll-behavior: smooth; }

.faq-teaser {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 40px 0 0;
  padding: 14px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-muted);
  font-size: 0.85rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.faq-teaser:hover { color: var(--color-accent); border-color: var(--color-accent); }
.faq-teaser svg { width: 15px; height: 15px; animation: faq-teaser-bounce 1.6s ease-in-out infinite; }
@keyframes faq-teaser-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* ---------- FAQ : section à part entière, sous tout le bloc générateur ---------- */

.faq-section {
  scroll-margin-top: 24px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 64px 32px;
}
.faq-inner {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-bg);
  border-radius: 20px;
  padding: 40px 44px;
  box-shadow: 0 14px 32px rgba(30, 40, 50, 0.08);
}
@media (max-width: 640px) {
  .faq-inner { padding: 28px 20px; }
}
.faq-title {
  font-size: 1.5rem;
  color: var(--color-primary);
  text-align: center;
  margin: 0 0 28px;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item:first-child { border-top: 1px solid var(--color-border); }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 18px 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-primary);
}
.faq-question:hover { color: var(--color-accent); }
.faq-chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s ease; }
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }

.faq-answer { padding: 0 8px 20px; }
.faq-answer p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.6;
  text-align: left;
}
.faq-answer p a { color: var(--color-accent); }

/* ---------- Mobile : aperçu en overlay plutôt qu'en side-by-side ---------- */

@media (max-width: 640px) {
  .question-panel { padding: 24px 20px 32px; }
  .step-nav { flex-wrap: wrap; }
  .step-count { order: 3; flex: 1 1 100%; text-align: left; margin-top: 4px; }
  #next-btn, #generate-btn { margin-left: 0; }
}

@media (max-width: 960px) {
  .mobile-preview-toggle { display: inline-block; }

  .preview-panel { padding: 20px; }
  .preview-header { flex-wrap: wrap; }
  .preview-header h2 { flex: 1 1 100%; }
  .preview-header-actions { flex: 1 1 100%; }

  .preview-panel {
    position: fixed;
    inset: 0;
    top: 0;
    height: 100vh;
    /* Doit passer au-dessus du header (position: fixed, z-index: 100, shared.css) -
       sinon "Fermer"/"Télécharger le PDF" en tête du panneau, à la même hauteur que
       le header, se faisaient recouvrir par lui (retour utilisateur du 03/09/2026).
       Panneau plein écran une fois ouvert : masquer le header dessous est voulu, pas
       un problème - c'est un plan modal, pas une superposition. */
    z-index: 110;
    border-left: none;
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .preview-panel.open { transform: translateY(0); }
  .mobile-preview-close { display: inline-block; }
}