/* ContraGo - flow question-par-question chirurgien-dentiste + panneau d'aperçu live.
   Cloné de kine/kine.css (structure générique du wizard, aucun composant
   spécifique type "choix à 2 cartes" nécessaire ici - pas d'aiguillage,
   contrairement à l'infirmier). */

.dentiste-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;
}

.dentiste-layout {
  display: grid;
  grid-template-columns: minmax(360px, 620px) 1fr;
  gap: 0;
  align-items: start;
  min-height: calc(100vh - 4px);
}
@media (max-width: 960px) {
  .dentiste-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) ----------
   Repris de kine.css (29/08/2026) : texte simple avec un filet d'accent à
   gauche - pas de carte ni d'icône en médaillon (le premier essai faisait
   trop composant de bibliothèque UI générique). */
.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, aligné sur
   kine.css) : 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. */
.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) : fond légèrement teinté
   derrière le filet, coins arrondis côté droit seulement, pour plus de
   présence que le simple filet. */
.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;
}
.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). 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");
  }
}

/* Hauteur explicite (pas seulement le padding) sur les champs à une ligne : sans ça,
   un <select> ou un <input type="date"> (icône native / chrome interne du menu
   propres à chaque moteur) ne rend pas forcément à la même hauteur qu'un <input
   type="text"> avec le même padding - Chrome les aligne par coïncidence avec les
   valeurs actuelles, Safari non (retour du 25/08/2026, Safari réel). On fixe une
   hauteur plancher commune plutôt que de dépendre du calcul natif de chaque
   contrôle. Exclut les cases à cocher (taille propre à ne pas forcer) et les
   textarea (hauteur pilotée par l'attribut rows, pas par cette règle). */
input:not([type="checkbox"]), select {
  min-height: 44px;
  line-height: 1.3;
}

.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); }
/* 2e refonte du 01/09/2026 (retour visuel : la 1ère refonte "carte neutre +
   liseré" n'a pas plu non plus). Nouvelle direction actée avec Louis : reprend
   telle quelle la forme de .notice.notice-compact (filet gauche + fond teinté
   + coins arrondis seulement à droite, jamais de bordure complète autour -
   "moins boîte d'alerte générique, plus drapeau") déjà approuvée pour les
   bandeaux post-génération ("4 exemplaires...", "Communication à l'Ordre...").
   Recolorée en jaune (--color-warning-*) plutôt que le bleu info d'origine :
   ces bandeaux (limite de périmètre, rappel PDSA, etc.) sont des disclaimers
   à ne pas manquer, pas de simples informations neutres. */
.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 4 du 24/08/2026 : l'étape reste toujours accessible, seule sa présentation
   change selon que le seuil légal est franchi 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 5) et pastille de rappel (étape 9) ----------
   Repris tel quel de kine.css/infirmier.css (25/08/2026) : la durée, le verdict
   (seuil franchi 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 -
   dépasser le seuil de 3 mois consécutifs n'est pas une erreur, juste une
   situation qui déclenche une clause supplémentaire. */
: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); }
/* État "renonciation" (étape 9 uniquement) : ni atteint ni non-atteint, la
   clause est simplement désactivée par le remplacé - une 3e teinte neutre
   plutôt que de forcer l'un des deux états de seuil. Spécifique au dentiste
   (seule page à avoir un mécanisme de renonciation à cette clause). */
.duree-badge-neutral { color: var(--color-muted); }
.duree-badge-neutral .duree-badge-dot { background: var(--color-muted); }

/* Rappel de durée en tête de l'étape 9 : 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 5, ici ce n'est qu'un rappel court). */
#article8_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 lié (étape 9 : renonciation + rayon) -
   même vocabulaire que .duree-box, pas un bloc plus lourd. Même composant
   que kine.css (étape 5, cessation d'activité). */
.checkbox-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 12px 0 0;
}
.checkbox-card .field-row { margin-bottom: 14px; }
.checkbox-card .field-row:last-child { margin-bottom: 0; }
.checkbox-card > .field-row + #rayon_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;
}

/* Encadré "hors périmètre" (étape 3) : carte .highlight-notice.
   Historique : icône ronde + kicker + texte séparés (.scope-notice) jugée
   "moche" -> remplacée le 26/08/2026 côté medecin-generaliste.css par une
   carte plate (jamais propagé ici, comblé le 01/09/2026 - markup simplifié
   dans index.html, plus de span icône séparé). Une 1ère refonte de couleur
   (carte neutre --color-surface + liseré) n'a pas convaincu non plus : 2e
   refonte du 01/09/2026, même jour - 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 (--color-warning-*) pour signaler un disclaimer/limite à ne pas
   manquer plutôt qu'une simple information neutre. */
.highlight-notice {
  background: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning-border);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin: 16px 0 0;
}
.highlight-notice-kicker { margin: 0 0 4px; font-weight: 600; font-size: 0.82rem; color: var(--color-primary); }
.highlight-notice-text { margin: 0; font-size: 0.82rem; color: var(--color-text); line-height: 1.5; }

.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); }

/* Aligne les champs d'une même ligne quand leurs labels ont des longueurs très
   différentes (ex. "Département du Conseil de l'Ordre d'inscription *" sur 2 lignes
   à côté de "N° d'inscription au tableau de l'Ordre *" sur 1 ligne) : réserve la
   hauteur d'un label sur 2 lignes et cale le texte en bas, pour que les inputs
   démarrent tous à la même hauteur peu importe si un label passe à la ligne ou non.
   Même utilitaire que infirmier.css (préavis Article 8). */
.field-row-align-labels .field label {
  /* 2 lignes à line-height 1.5 (héritée de body, shared.css) valent 2 × 1.5 = 3em,
     pas 2.6em - avec 2.6em, un label qui passe réellement sur 2 lignes ("Département
     du Conseil de l'Ordre d'inscription *") dépasse ce plancher (mesuré : 40,78px de
     haut contre 35,36px pour 2.6em) et n'est plus alignée avec un label voisin resté
     sur 1 ligne, plafonné à 2.6em, lui. Écart mesuré : 5,42px, reproductible dans tout
     navigateur - ni un bug Safari, ni un souci de cache (25/08/2026). */
  min-height: 3em;
  display: flex;
  align-items: flex-end;
}

/* ---------- 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); }
/* white-space: pre-line (31/08/2026, audit dentiste catégorie B) : cabinet_adresse et
   cabinet_sites_distincts (Article 2) sont des textarea multi-lignes, injectés tels
   quels comme un seul bloc "p" (contract-template-dentiste.js) - sans ce réglage, le
   saut de ligne saisi par l'utilisateur (ex. deux adresses de cabinet) est fondu en un
   simple espace à l'écran ("...Nice 15 rue du Port...") alors que le PDF exporté le
   respecte déjà nativement (jsPDF.splitTextToSize()). Les autres paragraphes n'ont
   jamais de \n dans leur texte, ce réglage ne change donc rien pour eux. */
.contract-preview .c-p { margin: 0 0 8px; text-align: justify; white-space: pre-line; }
/* Correctif du 29/08/2026 (propagé depuis medecin-generaliste, 26/08) : la
   mention de clôture ("Ci-après dénommé...") n'est plus un enfant de
   .c-identity - voir renderPreview() dans app-dentiste.js. La bordure ne
   couvre donc que les lignes factuelles des soussignés ; la mention de
   clôture est un paragraphe à part, non bordé, juste en dessous (.c-closing). */
.contract-preview .c-identity {
  margin: 4px 0 4px;
  padding-left: 10px;
  border-left: 3px solid var(--color-accent);
}
.contract-preview .c-identity div { margin: 2px 0; }
.contract-preview .c-closing { text-align: right; font-style: italic; margin: 0 0 16px; 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 medecin-generaliste.css (décision
   du 01/09/2026, comparaison de 3 options en preview). */
.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; }
}