/* ==========================================================================
   Design NUIT de l'appli (plan 2b) : police, jetons, composants n-*, feuilles.

   Chargé par la seule page de l'appli (appli/scripts/preparer-www.mjs), après
   app.css. Toute règle est préfixée html.mode-appli : la page du web ne
   charge pas ce fichier, et même chargé il n'y changerait rien.
   Valeurs : docs/superpowers/specs/2026-10-17-appli-nuit-et-corrections-design.md
   §1 et les maquettes maquettes-nuit/p*.dc.html.
   ========================================================================== */

/* Plus Jakarta Sans, embarquée (www/fonts, licence OFL : fonts/OFL.txt).
   Sous-ensemble latin de @fontsource/plus-jakarta-sans 5.3.0 : français,
   apostrophe typographique, œ et € compris. font-src 'self' suffit. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/plus-jakarta-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/plus-jakarta-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/plus-jakarta-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/plus-jakarta-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/plus-jakarta-sans-800.woff2') format('woff2'); }

/* --- Jetons (spec §1, valeurs exactes) ----------------------------------- */
html.mode-appli {
  --n-fond: #1A1714;
  --n-surface: #26211C;
  --n-feuille: #221E1A;
  --n-voile: #0E0C0B;
  --n-or: #D9B26F;
  --n-or-texte: #E6C68E;
  --n-texte: #F5F1EA;
  --n-texte-2: #C9C1B6;
  --n-texte-3: #B5ADA2;
  --n-trait: #3A332C;
  --n-trait-fort: #5A4F43;
  --n-danger: #F0A28A;
  /* Séparateur entre lignes d'une carte, chevron (maquettes p05, p11). */
  --n-trait-ligne: #332C25;
  --n-chevron: #7A6F62;
  --n-police: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Zone sûre (F6, lot 2c). Capacitor 8 sur Android (plugin SystemBars, réglage
     par défaut « css ») : WebView 140 et plus avec viewport-fit=cover, l'appli
     passe sous les barres système, env() est juste ET les marges sont recopiées
     dans --safe-area-inset-* sur <html> ; WebView plus ancienne, la vue est
     décalée au-dessus des barres et tout vaut 0. On prend le plus grand des deux :
     une WebView où env() resterait à 0 garde la marge recopiée. */
  --marge-bas: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --marge-haut: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  background: var(--n-fond);
  color-scheme: dark;
}
html.mode-appli body {
  background: var(--n-fond);
  color: var(--n-texte);
  font-family: var(--n-police);
}
/* Feuille ouverte : la page dessous ne défile plus. */
html.mode-appli.n-feuille-ouverte,
html.mode-appli.n-feuille-ouverte body { overflow: hidden; }

/* --- Boutons ------------------------------------------------------------- */
html.mode-appli .n-bouton,
html.mode-appli .n-bouton-contour {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 0 24px; border-radius: 28px;
  font: 700 17px/1.2 var(--n-police); text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-bouton {
  border: 0; background: var(--n-or); color: var(--n-fond);
}
html.mode-appli .n-bouton-contour {
  border: 1px solid var(--n-trait-fort); background: transparent; color: var(--n-texte);
  font-weight: 600;
}
html.mode-appli .n-bouton-contour.n-danger { color: var(--n-danger); }
html.mode-appli .n-bouton-lien {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 8px; border: 0; background: transparent;
  color: var(--n-or-texte); font: 600 15px/1.2 var(--n-police); cursor: pointer;
}
html.mode-appli .n-bouton:disabled,
html.mode-appli .n-bouton-contour:disabled,
html.mode-appli .n-bouton-lien:disabled { opacity: .45; cursor: default; }
html.mode-appli .n-bouton:focus-visible,
html.mode-appli .n-bouton-contour:focus-visible,
html.mode-appli .n-bouton-lien:focus-visible,
html.mode-appli .n-ligne:focus-visible,
html.mode-appli .n-retour:focus-visible,
html.mode-appli .n-segment button:focus-visible {
  outline: 2px solid var(--n-or-texte); outline-offset: 2px;
}

/* Retour (flèche seule, aria-label obligatoire dans le HTML). */
html.mode-appli .n-retour {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -10px; padding: 0; border: 0;
  background: transparent; color: var(--n-texte); cursor: pointer;
}
html.mode-appli .n-retour::before {
  content: ''; width: 11px; height: 11px; margin-left: 5px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  border-radius: 1px; transform: rotate(45deg);
}

/* --- Cartes, rubriques, lignes -------------------------------------------- */
html.mode-appli .n-carte {
  border-radius: 18px; background: var(--n-surface); color: var(--n-texte);
  display: flex; flex-direction: column;
}
html.mode-appli .n-rubrique {
  margin: 10px 0 0; font: 700 13px/1.3 var(--n-police);
  letter-spacing: .12em; text-transform: uppercase; color: var(--n-or);
}
/* Ligne touchable : libellé (petit), valeur dessous, chevron à droite.
   <button class="n-ligne"><span class="n-ligne-libelle">…</span>
   <span class="n-ligne-valeur [n-a-remplir]">…</span></button> */
html.mode-appli .n-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px;
  align-items: center; width: 100%; min-height: 56px; padding: 13px 16px;
  border: 0; border-bottom: 1px solid var(--n-trait-ligne); background: transparent;
  color: var(--n-texte); text-align: left; font-family: var(--n-police); cursor: pointer;
}
html.mode-appli .n-ligne:last-child { border-bottom: 0; }
html.mode-appli .n-ligne::after {
  content: ''; grid-column: 2; grid-row: 1 / span 2; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--n-chevron); border-top: 2px solid var(--n-chevron);
  transform: rotate(45deg);
}
html.mode-appli .n-ligne-libelle { grid-column: 1; font-size: 13px; color: var(--n-texte-3); }
html.mode-appli .n-ligne-valeur {
  grid-column: 1; font-size: 15px; font-weight: 600; color: var(--n-texte);
  overflow-wrap: anywhere;
}
html.mode-appli .n-ligne-valeur.n-a-remplir { color: var(--n-or-texte); font-weight: 700; }

/* --- Champs ---------------------------------------------------------------- */
html.mode-appli .n-champ-bloc {
  display: flex; flex-direction: column; gap: 5px;
  font: 400 13px/1.3 var(--n-police); color: var(--n-texte-3);
}
html.mode-appli .n-champ {
  box-sizing: border-box; width: 100%; min-width: 0; height: 50px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--n-trait-fort); background: var(--n-fond);
  color: var(--n-texte); font: 500 16px/1.2 var(--n-police);
}
html.mode-appli textarea.n-champ { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; }
/* Désignation d'une prestation : grandit avec le texte (hauteur posée par appli-devis.js), jamais de défilement de côté ni de poignée. */
html.mode-appli textarea.n-champ-designation { min-height: 0; resize: none; overflow-y: hidden; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.35; }
html.mode-appli .n-champ::placeholder { color: var(--n-texte-3); opacity: 1; }
html.mode-appli .n-champ:focus { outline: 0; border: 1.5px solid var(--n-or); }

/* --- Choix segmenté (Particulier / Professionnel, % / €) --------------------
   <div class="n-segment" role="group"><button aria-pressed="true">…</button>… */
html.mode-appli .n-segment {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  padding: 4px; border-radius: 12px; background: var(--n-fond);
}
html.mode-appli .n-segment > button {
  min-height: 44px; border: 0; border-radius: 9px; background: transparent;
  color: var(--n-texte-2); font: 600 14px/1.2 var(--n-police); cursor: pointer;
}
html.mode-appli .n-segment > button[aria-pressed="true"],
html.mode-appli .n-segment > button.actif {
  background: var(--n-or); color: var(--n-fond); font-weight: 700;
}

/* --- Barre basse, collée en bas, au-dessus de la zone sûre ------------------ */
html.mode-appli .n-barre-basse {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px calc(16px + var(--marge-bas));
  border-top: 1px solid var(--n-trait); background: var(--n-fond);
}
html.mode-appli .n-barre-basse .n-bouton { flex: 1; width: auto; }

/* --- Feuilles qui montent du bas (AppliUI.feuille, appli-ui.js) ------------- */
html.mode-appli .n-voile {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--n-voile);
  animation: n-apparaitre .2s ease-out;
}
html.mode-appli .n-feuille {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
  box-sizing: border-box; max-height: calc(100% - 64px);
  display: flex; flex-direction: column; gap: 14px;
  padding: 12px 20px calc(26px + var(--marge-bas));
  border-radius: 28px 28px 0 0; background: var(--n-feuille); color: var(--n-texte);
  font-family: var(--n-police); outline: 0;
  animation: n-monter .28s cubic-bezier(.16, 1, .3, 1);
}
html.mode-appli .n-feuille-poignee {
  flex: none; align-self: center; width: 40px; height: 5px; border-radius: 3px;
  background: var(--n-trait-fort);
}
html.mode-appli .n-feuille-titre { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; }
html.mode-appli .n-feuille-corps {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px;
}
html.mode-appli .n-feuille-actions { flex: none; display: flex; flex-direction: column; gap: 10px; }

@keyframes n-monter { from { transform: translateY(100%); } to { transform: none; } }
@keyframes n-apparaitre { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.mode-appli .n-voile,
  html.mode-appli .n-feuille { animation: none; }
}

/* --- Connexion (écrans 1, 1.1, 1.2 : p01-*) ------------------------------- */
/* Plein écran, au-dessus de l'en-tête et de la progression du web. */
html.mode-appli #vueConnexion.n-connexion.active {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; animation: none;
  display: flex; flex-direction: column; box-sizing: border-box;
  padding: calc(48px + var(--marge-haut)) 24px calc(32px + var(--marge-bas));
  background: var(--n-fond); color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli #vueConnexion[data-etape="accueil"].active {
  padding-top: calc(64px + var(--marge-haut));
  background:
    radial-gradient(circle at 20% 18%, rgba(217, 178, 111, .16), transparent 42%),
    radial-gradient(circle at 85% 55%, rgba(217, 178, 111, .10), transparent 40%),
    radial-gradient(circle at 40% 95%, rgba(120, 90, 60, .22), transparent 45%),
    var(--n-fond);
}
html.mode-appli #vueConnexion .n-etape { flex: 1 0 auto; display: flex; flex-direction: column; gap: 22px; }
html.mode-appli #vueConnexion .n-etape[hidden],
html.mode-appli #vueConnexion .n-bloc-google[hidden] { display: none; }
html.mode-appli #vueConnexion .n-bas { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
html.mode-appli #vueConnexion .n-bloc-google { display: flex; flex-direction: column; }
html.mode-appli #vueConnexion .n-retour { margin-left: -10px; }

html.mode-appli #vueConnexion .n-titre { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 800; color: var(--n-texte); }
html.mode-appli #vueConnexion .n-texte { margin: 0; font-size: 16px; line-height: 1.5; color: var(--n-texte-2); }

/* Écran 1 */
html.mode-appli #vueConnexion .n-accueil { align-items: stretch; text-align: center; }
html.mode-appli #vueConnexion .n-accueil-haut {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  margin-top: clamp(8px, 11vh, 96px);
}
html.mode-appli #vueConnexion .n-monogramme { width: 114px; height: 114px; object-fit: contain; }
html.mode-appli #vueConnexion .n-sur-titre {
  margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--n-or);
}
html.mode-appli #vueConnexion .n-titre-accueil {
  margin: 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--n-texte);
}
html.mode-appli #vueConnexion .n-accroche { margin: 0; max-width: 300px; font-size: 16px; line-height: 1.55; color: var(--n-texte-2); }
html.mode-appli #vueConnexion .n-mention { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--n-texte-3); text-align: center; }
/* Lien DANS une phrase (acceptation des conditions) : reste en ligne, jamais
   coupé entre deux lignes. Pas de marge intérieure : elle faisait se recouvrir
   les zones des deux liens quand la phrase passe sur deux lignes (mesuré par
   appli/tests/mise-en-page.mjs) ; l'interligne plus grand de la phrase
   (.n-mention-conditions) éloigne les deux liens à la place. */
html.mode-appli .n-lien-phrase { color: var(--n-or-texte); text-decoration: underline; white-space: nowrap; }
html.mode-appli #vueConnexion .n-mention-conditions { line-height: 2; }
/* Même lien seul sur sa ligne (feuille « Nos conditions évoluent ») : zone de 44 px. */
html.mode-appli .n-feuille-conditions .n-lien-phrase { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }

/* Écran 1.1 */
html.mode-appli #vueConnexion .n-champ-grand {
  box-sizing: border-box; width: 100%; height: 56px; padding: 0 16px; border-radius: 14px;
  border: 1.5px solid var(--n-trait-fort); background: var(--n-surface); color: var(--n-texte);
  font: 500 17px var(--n-police); box-shadow: none; margin: 0;
}
html.mode-appli #vueConnexion .n-champ-grand:focus { outline: none; border-color: var(--n-or); }
html.mode-appli #vueConnexion .n-champ-grand::placeholder { color: var(--n-texte-3); opacity: .7; }

/* Écran 1.2 : six cases, un seul vrai champ posé dessus (invisible). */
html.mode-appli #vueConnexion .n-code { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
html.mode-appli #vueConnexion .n-case {
  height: 60px; border-radius: 14px; border: 1.5px solid var(--n-trait-fort); background: var(--n-surface);
  font-size: 26px; font-weight: 800; color: var(--n-texte); display: flex; align-items: center; justify-content: center;
}
html.mode-appli #vueConnexion .n-code:focus-within .n-case-actif { border-color: var(--n-or); }
html.mode-appli #vueConnexion .n-code-champ {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; box-shadow: none;
  background: transparent; color: transparent; caret-color: transparent; opacity: 0; font-size: 16px;
}
html.mode-appli #vueConnexion .n-renvoi {
  align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: transparent;
  color: var(--n-texte-3); font: 600 15px var(--n-police); cursor: pointer;
}
html.mode-appli #vueConnexion .n-renvoi:not(:disabled) { color: var(--n-or-texte); }
html.mode-appli #vueConnexion .n-renvoi:disabled { cursor: default; }

/* Message d'erreur : vit dans la zone de l'étape, au-dessus du bouton. */
html.mode-appli #vueConnexion .n-zone-souci:empty,
html.mode-appli #vueConnexion .n-zone-souci:has(> #soucisConnexion:empty),
html.mode-appli #vueConnexion #soucisConnexion:empty { display: none; }
html.mode-appli #vueConnexion #soucisConnexion .souci {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45; text-align: left;
  color: var(--n-danger); background: rgba(240, 162, 138, .10); border: 1px solid rgba(240, 162, 138, .35);
}

/* --- Entreprise au premier lancement (écrans 2, 2.1, 2.2 : p02-*) ------------ */
/* Plein écran, au-dessus de l'en-tête et de la progression du web. */
html.mode-appli #vueBienvenue.n-bienvenue.active {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; animation: none;
  display: flex; flex-direction: column; box-sizing: border-box;
  padding: calc(48px + var(--marge-haut)) 20px calc(30px + var(--marge-bas));
  background: var(--n-fond); color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli #vueBienvenue[data-etape="recherche"].active {
  padding: calc(48px + var(--marge-haut)) 24px calc(32px + var(--marge-bas));
  background: radial-gradient(circle at 90% 8%, rgba(217, 178, 111, .14), transparent 40%), var(--n-fond);
}
html.mode-appli #vueBienvenue .n-etape { flex: 1 0 auto; display: flex; flex-direction: column; gap: 16px; }
html.mode-appli #vueBienvenue .n-etape[hidden] { display: none; }
html.mode-appli #vueBienvenue #etapeRecherche { gap: 16px; }
html.mode-appli #vueBienvenue #etapeManuelle { gap: 14px; }
html.mode-appli #vueBienvenue .n-bas { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
html.mode-appli #vueBienvenue .n-retour { margin-left: -10px; }

html.mode-appli #vueBienvenue .n-sur-titre {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--n-or);
}
html.mode-appli #vueBienvenue #etapeRecherche .n-titre { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
html.mode-appli #vueBienvenue .n-titre { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; color: var(--n-texte); }
html.mode-appli #vueBienvenue .n-texte { margin: 0; font-size: 15px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli #vueBienvenue .n-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--n-texte-3); }

/* Champs : fond de surface (la maquette), plus hauts sur l'écran 2. */
html.mode-appli #vueBienvenue .n-champ { background: var(--n-surface); color: var(--n-texte); box-shadow: none; margin: 0; }
html.mode-appli #vueBienvenue .n-champ-or { border: 1.5px solid var(--n-or); }
html.mode-appli #vueBienvenue .n-champs-hauts { display: flex; flex-direction: column; gap: 12px; }
html.mode-appli #vueBienvenue .n-champs-hauts .n-champ-bloc { gap: 6px; font-size: 14px; font-weight: 600; color: var(--n-texte-2); }
html.mode-appli #vueBienvenue .n-champ-haut { height: 54px; padding: 0 16px; border-radius: 14px; font-size: 17px; }
html.mode-appli #vueBienvenue .n-cp-ville { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
html.mode-appli #vueBienvenue .n-aide {
  padding: 12px 14px; border-radius: 14px; background: #2E2720; font-size: 14px; line-height: 1.5; color: #E7E0D5;
}

/* Écran 2 : la recherche et la carte de l'annuaire. */
html.mode-appli #vueBienvenue .n-bouton-bas { min-height: 46px; }
html.mode-appli #vueBienvenue #resultatsBienvenue { margin: 0; display: flex; flex-direction: column; gap: 4px; }
html.mode-appli #vueBienvenue #resultatsBienvenue:empty { display: none; }
html.mode-appli #vueBienvenue .n-bouton-gauche { align-self: flex-start; padding: 0; }
html.mode-appli #vueBienvenue .n-bouton-large { width: 100%; }
html.mode-appli #vueBienvenue .n-trouvee {
  display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 20px;
  background: var(--n-surface); border: 1px solid var(--n-or);
}
html.mode-appli #vueBienvenue .n-trouvee-badge {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--n-or);
}
html.mode-appli #vueBienvenue .n-trouvee-nom { margin: 0; font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
html.mode-appli #vueBienvenue .n-trouvee-adresse { margin: 0; font-size: 15px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli #vueBienvenue .n-trouvee-siret { margin: 0; font-size: 13px; color: var(--n-texte-3); }

/* Écran 2.1 : logo et couleur. */
html.mode-appli #vueBienvenue .n-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.mode-appli #vueBienvenue .n-tuile {
  height: 96px; padding: 0 8px; border-radius: 18px; border: 0; background: var(--n-surface); color: var(--n-texte);
  font: 600 14px/1.2 var(--n-police); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli #vueBienvenue .n-tuile:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli #vueBienvenue .n-tuile-logo { border: 1.5px dashed var(--n-trait-fort); background: transparent; }
html.mode-appli #vueBienvenue .n-tuile-apercu { max-width: 80%; max-height: 40px; object-fit: contain; }
html.mode-appli #vueBienvenue .n-pastilles { display: flex; gap: 6px; }
html.mode-appli #vueBienvenue .n-pastille { width: 20px; height: 20px; border-radius: 10px; }
html.mode-appli #vueBienvenue .n-pastille-choisie { outline: 2px solid var(--n-or); outline-offset: 2px; }

/* Message d'erreur : dans la zone de l'étape, au-dessus du bouton. */
html.mode-appli #vueBienvenue .n-zone-souci:empty,
html.mode-appli #vueBienvenue .n-zone-souci:has(> #soucisBienvenue:empty),
html.mode-appli #vueBienvenue #soucisBienvenue:empty { display: none; }
html.mode-appli #vueBienvenue #soucisBienvenue .souci {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45; text-align: left;
  color: var(--n-danger); background: rgba(240, 162, 138, .10); border: 1px solid rgba(240, 162, 138, .35);
}

/* Feuilles d'édition de cette tâche (hors de #vueBienvenue : posées sur <body>). */
html.mode-appli .n-feuille-form { display: flex; flex-direction: column; gap: 14px; }
html.mode-appli .n-feuille-form .n-aide {
  padding: 12px 14px; border-radius: 14px; background: #2E2720; font-size: 14px; line-height: 1.5; color: #E7E0D5;
}
html.mode-appli .n-ligne-autre { border-bottom: 1px solid var(--n-trait-ligne); }
html.mode-appli .n-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html.mode-appli .n-teinte {
  width: 56px; height: 56px; justify-self: center; border-radius: 28px; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-teinte[aria-pressed="true"] { outline: 2px solid var(--n-or); outline-offset: 3px; }
html.mode-appli .n-teinte:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 3px; }
html.mode-appli .n-couleur-libre { width: 100%; height: 50px; padding: 4px; border-radius: 12px; border: 1px solid var(--n-trait-fort); background: var(--n-fond); }

/* --- Accueil, dictée, clavier, « Ce que j'ai entendu » (écrans 3 à 3.2 : p03-*) --- */
html.mode-appli #vueDictee.n-dictee [hidden],
html.mode-appli #vueTravail.n-travail [hidden] { display: none; }

/* Plein écran, au-dessus de l'en-tête et de la progression du web. */
html.mode-appli #vueDictee.n-dictee.active {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; animation: none;
  display: flex; flex-direction: column; box-sizing: border-box;
  background: var(--n-fond); color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli #vueDictee[data-mode="accueil"].active {
  background:
    radial-gradient(circle at 50% 52%, rgba(217, 178, 111, .20), transparent 38%),
    radial-gradient(circle at 10% 5%, rgba(217, 178, 111, .08), transparent 35%),
    var(--n-fond);
}
html.mode-appli #vueDictee .n-ecran { flex: 1 0 auto; display: flex; flex-direction: column; box-sizing: border-box; }
html.mode-appli #vueDictee .n-ecran[hidden] { display: none; }
html.mode-appli #vueDictee .n-ancien { display: none; }

/* Écran 3 : l'accueil. */
/* F6 (lot 2c) : l'accueil tient dans la hauteur, même texte agrandi (Galaxy A15,
   384 × 780 utiles, police ×1,3). Il prend exactement la hauteur de l'écran
   (min-height: 0) et ses espaces sont des cales qui rétrécissent (.n-espace) :
   aux mesures de la maquette quand la place le permet, jusqu'à leur minimum
   sinon. Le menu du bas garde 16 px au-dessus de la zone sûre. */
html.mode-appli #vueDictee .n-ecran-accueil {
  flex: 1 1 auto; min-height: 0;
  align-items: center; text-align: center;
  padding: calc(24px + var(--marge-haut)) 24px calc(16px + var(--marge-bas));
}
html.mode-appli #vueDictee .n-espace { flex: 0 1 auto; width: 100%; }
html.mode-appli #vueDictee .n-espace-haut { flex-basis: 28px; min-height: 4px; }
html.mode-appli #vueDictee .n-espace-titre { flex-basis: 72px; min-height: 16px; }
html.mode-appli #vueDictee[data-pour="1"] .n-espace-titre { flex-basis: 16px; }
html.mode-appli #vueDictee .n-espace-micro { flex-basis: 64px; min-height: 24px; }
html.mode-appli #vueDictee .n-espace-touchez { flex-basis: 44px; min-height: 24px; }
html.mode-appli #vueDictee .n-espace-bas { flex: 1 1 16px; min-height: 16px; }
html.mode-appli #vueDictee .n-haut { width: 100%; display: flex; align-items: center; justify-content: space-between; }
html.mode-appli #vueDictee .n-logo-haut { width: 40px; height: 40px; object-fit: contain; }
html.mode-appli #vueDictee .n-menu { position: relative; }
html.mode-appli #vueDictee .n-compte {
  height: 44px; padding: 0 6px 0 14px; border-radius: 22px; border: 1px solid var(--n-trait); background: var(--n-surface);
  color: #E7E0D5; font: 600 14px/1.2 var(--n-police); display: flex; align-items: center; gap: 10px; cursor: pointer;
  max-width: 250px; -webkit-tap-highlight-color: transparent;
}
html.mode-appli #vueDictee .n-compte:not(:has(.n-compte-initiales:not([hidden]))) { padding-right: 14px; }
html.mode-appli #vueDictee .n-compte-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.mode-appli #vueDictee .n-compte-initiales {
  flex: none; width: 32px; height: 32px; border-radius: 16px; background: var(--n-or); color: var(--n-fond);
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
html.mode-appli #vueDictee .n-compte-initiales[hidden] { display: none; }
html.mode-appli #vueDictee .n-compte:focus-visible,
html.mode-appli #vueDictee .n-ligne-menu:focus-visible,
html.mode-appli #vueDictee .n-raccourci:focus-visible,
html.mode-appli #vueDictee .n-micro:focus-visible,
html.mode-appli #vueDictee .n-lien-texte:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli #vueDictee .n-liste-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 220px; padding: 6px;
  border-radius: 16px; border: 1px solid var(--n-trait); background: var(--n-feuille);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5); display: flex; flex-direction: column; text-align: left;
}
html.mode-appli #vueDictee .n-liste-menu[hidden] { display: none; }
html.mode-appli #vueDictee .n-ligne-menu {
  min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent;
  color: var(--n-texte); font: 600 15px/1.2 var(--n-police); text-align: left; cursor: pointer;
}
html.mode-appli #vueDictee .n-ligne-menu:active { background: var(--n-surface); }

html.mode-appli #vueDictee .n-titre-dictee { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--n-texte); }
html.mode-appli #vueDictee .n-accroche-dictee { margin: 12px 0 0; max-width: 290px; font-size: 16px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli #vueDictee .n-micro {
  flex: none; margin: 0; width: 148px; height: 148px; padding: 0; border: 0; border-radius: 74px;
  background: var(--n-or); color: var(--n-fond); cursor: pointer; position: relative;
  box-shadow: 0 0 0 16px rgba(217, 178, 111, .16), 0 0 0 34px rgba(217, 178, 111, .07);
  display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease-out;
}
html.mode-appli #vueDictee .n-micro::after { display: none; }
html.mode-appli #vueDictee .n-micro:active { transform: scale(.96); }
html.mode-appli #vueDictee .n-micro:disabled { opacity: .5; }
html.mode-appli #vueDictee .n-touchez { margin: 0; max-width: none; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--n-texte); }
/* « ou remplissez le devis vous-même » (32 caractères) tient sur une ligne à 360 px, même au cran « grand » du texte (×1,3). */
html.mode-appli #vueDictee #lienClavier { margin-top: 4px; padding: 0 2px; font-size: 14px; white-space: nowrap; }
html.mode-appli #vueDictee .n-emplacement-souci { width: 100%; margin-top: 8px; }
html.mode-appli #vueDictee .n-souci-menu:empty,
html.mode-appli #vueDictee #soucisDictee:empty { display: none; }
html.mode-appli #vueDictee .n-souci-menu,
html.mode-appli #vueDictee #soucisDictee { margin-top: 8px; width: 100%; }
html.mode-appli #vueDictee .souci {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45; text-align: left;
  color: var(--n-danger); background: rgba(240, 162, 138, .10); border: 1px solid rgba(240, 162, 138, .35);
}
html.mode-appli #vueDictee #soucisDictee .btn {
  margin-top: 10px; min-height: 48px; padding: 0 16px; border-radius: 24px; width: 100%;
  border: 1px solid var(--n-trait-fort); background: transparent; color: var(--n-texte); font: 600 15px var(--n-police);
}
/* Un message sous le micro (micro refusé au lancement depuis « Clients ») :
   il prend la place de l'accroche, l'accueil tient toujours sans défiler. */
html.mode-appli #vueDictee:has(#emplacementSouci .souci) .n-accroche-dictee { display: none; }
html.mode-appli #vueDictee .n-raccourcis { flex: none; width: 100%; display: flex; gap: 10px; }
html.mode-appli #vueDictee .n-raccourci {
  flex: 1 1 0; min-width: 0; height: 64px; padding: 0; border: 0; border-radius: 18px; background: var(--n-surface);
  color: var(--n-texte); font: 600 13px/1.2 var(--n-police); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli #vueDictee .n-raccourci[hidden] { display: none; }
html.mode-appli #vueDictee .n-raccourci:active { background: var(--n-trait); }

/* Bandeau « Devis pour <nom> » (F10, lot 2c) : posé depuis « Clients »,
   sur l'accueil comme sur le clavier. Le titre de l'accueil remonte pour lui
   laisser la place : l'écran ne défile toujours pas. */
html.mode-appli #vueDictee .n-devis-pour {
  box-sizing: border-box; width: 100%; min-height: 56px; margin: 16px 0 0; padding: 6px 6px 6px 16px;
  border-radius: 18px; border: 1px solid var(--n-or); background: var(--n-surface); color: var(--n-texte);
  display: flex; align-items: center; gap: 8px; text-align: left;
}
html.mode-appli #vueDictee .n-devis-pour[hidden] { display: none; }
html.mode-appli #vueDictee .n-devis-pour-texte {
  flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.mode-appli #vueDictee .n-devis-pour-libelle { color: var(--n-or); font-weight: 600; }
html.mode-appli #vueDictee .n-devis-pour-nom { color: var(--n-texte); font-weight: 800; }
html.mode-appli #vueDictee .n-devis-pour-retirer {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent;
  color: var(--n-texte); display: flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.mode-appli #vueDictee .n-devis-pour-retirer:active { background: var(--n-trait); }
html.mode-appli #vueDictee .n-devis-pour-retirer:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
/* Deux bandeaux ensemble (client choisi + prestations choisies, saisie rapide) : serrés l'un sous l'autre. */
html.mode-appli #vueDictee .n-devis-pour:not([hidden]) + .n-devis-pour { margin-top: 8px; }
/* Les deux ensemble : bandeaux plus bas et plus serrés, pour que l'accueil ne défile pas à ×1,3 (mesuré par test:mise-en-page). */
html.mode-appli #vueDictee[data-deux="1"] .n-devis-pour { min-height: 44px; margin-top: 8px; padding-top: 0; padding-bottom: 0; }
html.mode-appli #vueDictee[data-deux="1"] .n-espace-micro,
html.mode-appli #vueDictee[data-deux="1"] .n-espace-touchez { min-height: 12px; }

/* Accueil sur un écran court (web app, 21/10/2026) : un onglet Safari
   d'iPhone 13 laisse 390 × 664 utiles (barres d'adresse et d'outils
   déduites). Avec le bandeau « Devis pour » et le message du micro refusé,
   l'accueil défilait de 21 px (83 px texte ×1,3), mesuré par
   test:mise-en-page --cible web. Sous 700 px de haut seulement : micro et
   titre plus petits, marges resserrées, avec une réserve d'environ 15 px à
   ×1,3 ; l'APK (780 px utiles) ne change pas. */
@media (max-height: 700px) {
  html.mode-appli #vueDictee .n-ecran-accueil { padding-top: calc(12px + var(--marge-haut)); }
  html.mode-appli #vueDictee .n-titre-dictee { font-size: 24px; }
  html.mode-appli #vueDictee .n-micro {
    width: 112px; height: 112px; border-radius: 56px;
    box-shadow: 0 0 0 10px rgba(217, 178, 111, .16), 0 0 0 20px rgba(217, 178, 111, .07);
  }
  /* Revue finale I-5 (F10) : bandeau « Devis pour » + micro refusé, texte ×1,3, 390 × 664 : le menu du bas
     finissait à 663 px pour 656 (7 px). Espaces du micro (20 → 16 px) et du bas (12 → 8 px) resserrés,
     12 px repris, à ce cran seulement. */
  html.mode-appli #vueDictee .n-espace-micro,
  html.mode-appli #vueDictee .n-espace-touchez { min-height: 16px; }
  html.mode-appli #vueDictee .n-devis-pour { margin-top: 8px; }
  html.mode-appli #vueDictee .n-raccourci { height: 52px; }
  html.mode-appli #vueDictee .n-espace-bas { min-height: 8px; }
  /* Deux bandeaux + micro refusé (« Dicter la suite »), même cran : 687 px de contenu pour 664 (mesuré par
     test:mise-en-page --cible web). Micro 88 px (cible toujours au-dessus de 44 px), titre 22 px, espaces 8 px. */
  html.mode-appli #vueDictee[data-deux="1"] .n-micro {
    width: 88px; height: 88px; border-radius: 44px;
    box-shadow: 0 0 0 8px rgba(217, 178, 111, .16), 0 0 0 16px rgba(217, 178, 111, .07);
  }
  html.mode-appli #vueDictee[data-deux="1"] .n-titre-dictee { font-size: 22px; }
  html.mode-appli #vueDictee[data-deux="1"] .n-espace-micro,
  html.mode-appli #vueDictee[data-deux="1"] .n-espace-touchez { min-height: 8px; }
}

/* Écran 3.1 : l'écoute, par-dessus l'accueil. */
html.mode-appli #vueDictee .n-ecoute { display: none; }
html.mode-appli #vueDictee[data-ecoute="1"] .n-ecoute {
  position: fixed; inset: 0; z-index: 30; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(52px + var(--marge-haut)) 24px calc(36px + var(--marge-bas));
  background: radial-gradient(circle at 50% 40%, rgba(217, 178, 111, .24), transparent 42%), var(--n-fond);
  color: var(--n-texte); overflow-y: auto;
}
html.mode-appli #vueDictee .n-sur-titre {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--n-or);
}
html.mode-appli #vueDictee .n-halo {
  flex: none; margin-top: clamp(40px, 11vh, 96px); width: 168px; height: 168px; border-radius: 84px; background: var(--n-or);
  box-shadow: 0 0 0 20px rgba(217, 178, 111, .18), 0 0 0 44px rgba(217, 178, 111, .09), 0 0 0 72px rgba(217, 178, 111, .04);
  display: flex; align-items: center; justify-content: center;
  animation: n-respirer 1.8s ease-in-out infinite;
}
html.mode-appli #vueDictee .n-minuteur {
  margin: clamp(48px, 11vh, 96px) 0 0; font-size: 44px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--n-texte);
}
html.mode-appli #vueDictee .n-a-dire { margin: 18px 0 10px; font-size: 14px; color: var(--n-texte-3); }
html.mode-appli #vueDictee .n-pastilles-dire { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
html.mode-appli #vueDictee .n-pastille-dire {
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--n-trait-fort); font-size: 14px; font-weight: 600; color: #E7E0D5;
}
html.mode-appli #vueDictee .n-actions-ecoute { margin-top: auto; padding-top: 24px; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@keyframes n-respirer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* Écran 3.2 : « Ce que j'ai entendu », l'attente du chiffrage. */
html.mode-appli #vueTravail.n-travail.active {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 22px;
  padding: calc(64px + var(--marge-haut)) 24px calc(32px + var(--marge-bas));
  background: radial-gradient(circle at 50% 20%, rgba(217, 178, 111, .16), transparent 40%), var(--n-fond);
  color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli #vueTravail .n-entendu { display: flex; flex-direction: column; gap: 22px; }
html.mode-appli #vueTravail .n-sur-titre {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--n-or); text-align: left;
}
html.mode-appli #vueTravail .n-citation {
  padding: 18px; border-radius: 18px; background: var(--n-surface); font-size: 16px; line-height: 1.6; color: #E7E0D5;
  text-align: left; overflow-wrap: anywhere;
}
html.mode-appli mark.n-recolle {
  padding: 1px 4px; border-radius: 5px; background: rgba(217, 178, 111, .24); color: #F5DDB0; font-weight: 700;
}
html.mode-appli #vueTravail .n-etapes-travail { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
html.mode-appli #vueTravail .n-etape-travail { display: flex; align-items: center; gap: 12px; font-size: 16px; text-align: left; }
html.mode-appli #vueTravail .n-etape-pastille {
  flex: none; width: 28px; height: 28px; box-sizing: border-box; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
html.mode-appli #vueTravail .n-etape-pastille svg { display: none; }
html.mode-appli #vueTravail .n-etape-travail[data-etat="faite"] .n-etape-pastille { background: var(--n-or); }
html.mode-appli #vueTravail .n-etape-travail[data-etat="faite"] .n-etape-pastille svg { display: block; }
html.mode-appli #vueTravail .n-etape-travail[data-etat="en-cours"] { font-weight: 700; }
html.mode-appli #vueTravail .n-etape-travail[data-etat="en-cours"] .n-etape-pastille {
  border: 3px solid var(--n-or); border-right-color: transparent; animation: n-tourner 1s linear infinite;
}
html.mode-appli #vueTravail .n-etape-travail[data-etat="attente"] { color: var(--n-texte-3); }
html.mode-appli #vueTravail .n-etape-travail[data-etat="attente"] .n-etape-pastille { border: 2px solid var(--n-trait-fort); }
html.mode-appli #vueTravail .n-pied-travail {
  margin: auto 0 0; font-size: 14px; line-height: 1.5; color: var(--n-texte-3); text-align: center; min-height: 0;
}
@keyframes n-tourner { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html.mode-appli #vueDictee .n-halo,
  html.mode-appli #vueTravail .n-etape-travail[data-etat="en-cours"] .n-etape-pastille { animation: none; }
}

/* --- Devis en cartes (écrans 4 et 5 : p04-devis, p05-details) --------------
   appli-devis.js. #apercuDevis reste rendu (toute la logique d'app.js s'y
   appuie) mais caché : les cartes le remplacent à l'écran. */
html.mode-appli #vueResultat.n-devis.active {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; overflow-x: hidden; animation: none;
  display: flex; flex-direction: column; box-sizing: border-box;
  padding: calc(48px + var(--marge-haut)) 20px 0;
  background: var(--n-fond); color: var(--n-texte); font-family: var(--n-police);
  /* Hauteur de la barre basse collante (raison du PDF comprise) : un champ qui
     prend le focus (clavier ouvert) s'arrête au-dessus d'elle, jamais dessous. */
  --n-barre-devis: 200px;
  scroll-padding-bottom: calc(var(--n-barre-devis) + 12px);
}
html.mode-appli #vueResultat.n-devis #apercuDevis { display: none; }
/* Dernier bloc avant la barre : un peu d'air, quel que soit ce bloc (envoi, récapitulatif…). */
html.mode-appli #vueResultat.n-devis .n-fin-devis { flex: none; height: 24px; }
/* Feuille « Abandonner ce devis ? ». */
html.mode-appli .n-feuille-abandon .n-texte-feuille { margin: 0; font-size: 15px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli #vueResultat.n-devis .n-devis-tete {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* Le titre prend la place entre la flèche et l'œil : il ne se colle plus à la flèche. */
html.mode-appli #vueResultat.n-devis .n-devis-titre { flex: 1; min-width: 0; margin: 0; text-align: center; font: 800 17px/1.2 var(--n-police); color: var(--n-texte); }
html.mode-appli #vueResultat.n-devis .n-lien-devis {
  height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--n-or-texte); font: 600 15px/1.2 var(--n-police);
}
/* L'œil (aperçu du PDF) : seul à droite du titre (« Redicter » n'existe plus). Zone tactile de 44 px. */
html.mode-appli #vueResultat.n-devis .n-oeil {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto;
  padding: 0; border: 0; background: transparent; color: var(--n-or-texte); cursor: pointer;
}
html.mode-appli #vueResultat.n-devis .n-oeil:disabled { opacity: .45; cursor: default; }
html.mode-appli #vueResultat.n-devis .n-oeil:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli #vueResultat.n-devis .n-lien-devis:focus-visible,
html.mode-appli #vueResultat.n-devis .n-carte-client:focus-visible,
html.mode-appli #vueResultat.n-devis .n-ajout-presta:focus-visible,
html.mode-appli #vueResultat.n-devis .n-bouton-petit:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }

/* « Ce que j'ai entendu » : rangée en lecture seule en bas de la page, repliée (appli-devis.js la cache sans dictée).
   Texte entendu, messages de panne et renvoi de l'enregistrement. Rien ne se retouche ici. */
html.mode-appli #vueResultat.n-devis #blocEntendu {
  flex: none; margin: 14px 0 0; border: 1px solid var(--n-trait); border-radius: 18px;
  background: var(--n-surface); color: var(--n-texte); overflow: hidden;
}
html.mode-appli #vueResultat.n-devis #blocEntendu[hidden] { display: none; }
html.mode-appli #vueResultat.n-devis #blocEntendu > summary {
  color: var(--n-or); font: 700 13px/1.3 var(--n-police); letter-spacing: .12em; text-transform: uppercase;
}
html.mode-appli #vueResultat.n-devis #blocEntendu > summary:hover { background: transparent; }
html.mode-appli #vueResultat.n-devis #texteRelu {
  box-sizing: border-box; display: block; width: calc(100% - 32px); margin: 0 16px 16px; min-height: 96px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--n-trait-fort); background: var(--n-fond);
  color: var(--n-texte); font: 500 16px/1.5 var(--n-police); resize: none;
}
html.mode-appli #vueResultat.n-devis #texteRelu[hidden] { display: none; }
html.mode-appli #vueResultat.n-devis #texteRelu:focus { outline: 0; border: 1px solid var(--n-trait-fort); }
html.mode-appli #vueResultat.n-devis #avisEntendu,
html.mode-appli #vueResultat.n-devis #soucisRelecture { margin: 0 16px 14px; }
/* Ni « Redicter » ni « Corriger et rechiffrer » dans l'appli (la rangée d'actions du web ; pas la confirmation du renvoi, qui a la sienne). */
html.mode-appli #vueResultat.n-devis #blocEntendu > .actions,
html.mode-appli #vueResultat.n-devis #btnRedicter,
html.mode-appli #vueResultat.n-devis #btnValider { display: none; }

/* Cartes. */
html.mode-appli #vueResultat.n-devis .n-devis-cartes { flex: none; display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
html.mode-appli #vueResultat.n-devis .n-devis-cartes .n-rubrique { margin: 4px 0 0; }
html.mode-appli #vueResultat.n-devis .n-devis-cartes .n-rubrique-presta { margin-top: 8px; }
html.mode-appli #vueResultat.n-devis .n-devis-cartes .n-rubrique-details { margin-top: 10px; }
html.mode-appli #vueResultat.n-devis .n-carte-client {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; box-sizing: border-box;
  border-radius: 18px; border: 1px solid var(--n-trait); background: var(--n-surface);
  text-align: left; font-family: var(--n-police); color: var(--n-texte); cursor: pointer;
}
html.mode-appli #vueResultat.n-devis .n-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 22px; background: #3A3127; color: var(--n-or);
  font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
html.mode-appli #vueResultat.n-devis .n-client-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.mode-appli #vueResultat.n-devis .n-client-nom { font-size: 17px; font-weight: 700; color: var(--n-texte); overflow-wrap: anywhere; }
html.mode-appli #vueResultat.n-devis .n-client-nom.n-a-remplir { color: var(--n-or-texte); }
html.mode-appli #vueResultat.n-devis .n-client-ligne { font-size: 14px; line-height: 1.4; color: var(--n-texte-2); overflow-wrap: anywhere; }
html.mode-appli #vueResultat.n-devis .n-client-changer { flex: none; font-size: 14px; font-weight: 700; color: var(--n-or-texte); }

html.mode-appli #vueResultat.n-devis .n-presta {
  display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 18px;
  background: var(--n-surface); color: var(--n-texte);
}
html.mode-appli #vueResultat.n-devis .n-presta.n-estimee { background: #2E2720; border: 1.5px solid var(--n-or); }
html.mode-appli #vueResultat.n-devis .n-presta-tete { display: flex; justify-content: space-between; gap: 12px; }
html.mode-appli #vueResultat.n-devis .n-presta-texte { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.mode-appli #vueResultat.n-devis .n-presta-nom { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
html.mode-appli #vueResultat.n-devis .n-presta-sans-nom { color: var(--n-texte-3); font-style: italic; }
html.mode-appli #vueResultat.n-devis .n-presta-detail { font-size: 13px; color: var(--n-texte-3); }
html.mode-appli #vueResultat.n-devis .n-estimee .n-presta-detail { font-weight: 700; color: var(--n-or); }
/* Tâche 11 (revue) : ligne nommée seulement dans une remise. */
html.mode-appli #vueResultat.n-devis .n-presta-alerte { font-size: 13px; font-weight: 700; color: var(--n-or-texte); }
html.mode-appli #vueResultat.n-devis .n-presta-prix { flex: none; font-size: 16px; font-weight: 700; white-space: nowrap; }
/* Remise par article : prix avant remise barré au-dessus du prix, pastille sous le détail. */
html.mode-appli #vueResultat.n-devis .n-presta-prix-bloc { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
html.mode-appli #vueResultat.n-devis .n-presta-barre { font-size: 14px; font-weight: 500; color: var(--n-texte-3); white-space: nowrap; }
html.mode-appli #vueResultat.n-devis .n-presta-remise {
  align-self: flex-start; margin-top: 4px; padding: 5px 12px; border-radius: 999px;
  background: rgba(217, 178, 111, .16); color: var(--n-or-texte); font-size: 14px; font-weight: 700;
}
html.mode-appli #vueResultat.n-devis .n-presta-actions { display: flex; gap: 8px; }
html.mode-appli #vueResultat.n-devis .n-bouton-petit {
  flex: 1; min-width: 0; min-height: 44px; padding: 4px 8px; border-radius: 22px; border: 0; background: var(--n-or); color: var(--n-fond);
  font: 700 15px/1.2 var(--n-police); cursor: pointer;
}
html.mode-appli #vueResultat.n-devis .n-bouton-petit.n-contour {
  border: 1px solid var(--n-trait-fort); background: transparent; color: var(--n-texte); font-weight: 600;
}
html.mode-appli #vueResultat.n-devis .n-ajout-presta {
  height: 48px; border-radius: 16px; border: 1px dashed var(--n-trait-fort); background: transparent;
  color: var(--n-or-texte); font: 600 15px/1.2 var(--n-police); cursor: pointer;
}
html.mode-appli #vueResultat.n-devis .n-details { overflow: hidden; }

html.mode-appli #vueResultat.n-devis .n-recap {
  margin: 6px 0 0; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--n-trait);
  display: flex; flex-direction: column; gap: 6px; font-size: 15px;
}
html.mode-appli #vueResultat.n-devis .n-recap-ligne { display: flex; justify-content: space-between; gap: 12px; }
html.mode-appli #vueResultat.n-devis .n-recap-libelle { color: var(--n-texte-2); }
html.mode-appli #vueResultat.n-devis .n-recap-montant { flex: none; white-space: nowrap; }
html.mode-appli #vueResultat.n-devis .n-recap-ttc { font-weight: 800; }
html.mode-appli #vueResultat.n-devis .n-recap-ttc .n-recap-libelle { color: var(--n-texte); }
html.mode-appli #vueResultat.n-devis .n-recap-ttc .n-recap-montant { color: var(--n-or); }
/* Rangées « Remise » et « TVA » : touchables, 44 px au moins, comme les rangées de « Le devis ». */
html.mode-appli #vueResultat.n-devis .n-recap-tactile {
  box-sizing: border-box; width: 100%; min-height: 44px; margin: -3px 0; padding: 0; border: 0; background: transparent;
  align-items: center; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
html.mode-appli #vueResultat.n-devis .n-recap-tactile:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli #vueResultat.n-devis .n-recap-tactile .n-recap-montant { color: var(--n-texte); }
html.mode-appli #vueResultat.n-devis .n-recap-tactile .n-recap-montant.n-a-remplir { color: var(--n-or-texte); font-weight: 700; }
/* Mention de franchise de TVA, sous les totaux. */
html.mode-appli #vueResultat.n-devis .n-devis-mentions { margin: -4px 2px 0; font-size: 13px; line-height: 1.4; color: var(--n-texte-3); }
/* Titre d'une catégorie (tâche 11) : nom en petites capitales dorées, sous-total à droite quand il y en a plusieurs. */
html.mode-appli #vueResultat.n-devis .n-categorie {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 10px 2px -4px;
}
html.mode-appli #vueResultat.n-devis .n-categorie-nom {
  min-width: 0; overflow-wrap: anywhere; font: 800 12px/1.3 var(--n-police); letter-spacing: .12em; text-transform: uppercase; color: var(--n-or);
}
html.mode-appli #vueResultat.n-devis .n-categorie-total { flex: none; white-space: nowrap; font: 600 13px/1.3 var(--n-police); color: var(--n-texte-3); }
html.mode-appli #vueResultat.n-devis .n-recap-acompte { font-size: 13px; }
html.mode-appli #vueResultat.n-devis .n-recap-acompte .n-recap-libelle { color: var(--n-texte-3); }
html.mode-appli #vueResultat.n-devis .n-recap-acompte .n-recap-montant { color: var(--n-texte-2); }

/* Barre basse : total TTC et « Créer le PDF » (le #btnImprimer d'app.js). */
html.mode-appli #vueResultat.n-devis .n-barre-devis {
  flex: none; margin: auto -20px 0; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 14px 20px calc(30px + var(--marge-bas));
}
html.mode-appli #vueResultat.n-devis .n-barre-ligne { display: flex; align-items: center; gap: 14px; }
html.mode-appli #vueResultat.n-devis .n-barre-total { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html.mode-appli #vueResultat.n-devis .n-barre-montant { font-size: 20px; font-weight: 800; color: var(--n-or); white-space: nowrap; }
/* Les plus grands montants en FCFA (« 9 999 999 900 FCFA ») : un corps plus petit, le bouton garde sa place. */
html.mode-appli #vueResultat.n-devis .n-barre-montant.n-barre-long { font-size: 15px; }
html.mode-appli #vueResultat.n-devis .n-barre-tva { font-size: 12px; color: var(--n-texte-3); }
html.mode-appli #vueResultat.n-devis .n-barre-devis .actions { flex: 1; min-width: 0; margin: 0; display: flex; }
/* Marges intérieures réduites : « Créer le PDF » reste sur une ligne à côté du total, texte agrandi. */
html.mode-appli #vueResultat.n-devis #btnImprimer { flex: 1; width: auto; padding: 0 16px; }
html.mode-appli #vueResultat.n-devis #btnImprimer:disabled { opacity: .45; cursor: default; }
html.mode-appli #vueResultat.n-devis .n-avis-relecture { margin: 0; font-size: 13px; line-height: 1.4; color: var(--n-texte-2); text-align: center; }
html.mode-appli #vueResultat.n-devis .n-raison-pdf { margin: 0; font-size: 13px; line-height: 1.4; color: var(--n-or-texte); text-align: center; }

/* --- Feuilles du devis : changer le prix, prestation, ajouter (p04-2 à p04-4) --
   appli-devis.js. Posées sur <body> par AppliUI.feuille. */
html.mode-appli .n-feuille-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.mode-appli .n-supprimer {
  flex: none; height: 44px; padding: 0 4px; border: 0; background: transparent; cursor: pointer;
  color: var(--n-danger); font: 600 15px/1.2 var(--n-police);
}
html.mode-appli .n-supprimer:focus-visible,
html.mode-appli .n-pas:focus-visible,
html.mode-appli .n-touche:focus-visible,
html.mode-appli .n-tarif:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-feuille-erreur { margin: 0; font-size: 14px; line-height: 1.4; color: var(--n-danger); }

/* 4.2 : le pavé. */
html.mode-appli .n-feuille-prix .n-feuille-titre { font-size: 18px; }
html.mode-appli .n-prix { display: flex; flex-direction: column; gap: 14px; }
html.mode-appli .n-feuille-prix .n-feuille-corps { margin-top: -8px; padding-top: 2px; }
html.mode-appli .n-prix-sous { margin: 0; font-size: 14px; color: var(--n-texte-2); }
html.mode-appli .n-prix-affichage {
  display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 18px; border-radius: 18px;
  background: var(--n-fond); border: 1.5px solid var(--n-or);
}
html.mode-appli .n-prix-montant { font-size: 44px; font-weight: 800; line-height: 1.1; color: var(--n-or); white-space: nowrap; }
html.mode-appli .n-prix-montant.n-prix-vide { color: var(--n-texte-3); }
html.mode-appli .n-prix-ht { font-size: 15px; color: var(--n-texte-2); }
html.mode-appli .n-interrupteur-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 4px 2px;
  font-size: 15px; line-height: 1.4; cursor: pointer;
}
html.mode-appli .n-interrupteur {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; margin: 0; width: 50px; height: 30px;
  border-radius: 15px; background: var(--n-trait-fort); cursor: pointer; transition: background .15s;
}
html.mode-appli .n-interrupteur::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px;
  background: var(--n-fond); transition: transform .15s;
}
html.mode-appli .n-interrupteur:checked { background: var(--n-or); }
html.mode-appli .n-interrupteur:checked::after { transform: translateX(20px); }
html.mode-appli .n-interrupteur:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-pave { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html.mode-appli .n-touche {
  height: 52px; border: 0; border-radius: 12px; background: #2E2822; color: var(--n-texte); cursor: pointer;
  font: 600 22px/1 var(--n-police); -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-touche:active { background: #3A3127; }

/* 4.3 : la prestation. */
html.mode-appli .n-presta-form { display: flex; flex-direction: column; gap: 14px; }
html.mode-appli .n-presta-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
html.mode-appli .n-quantite-bloc {
  height: 50px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--n-trait-fort); background: var(--n-fond);
  display: flex; align-items: center; justify-content: space-between; padding: 0 3px; gap: 2px;
}
html.mode-appli .n-pas {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: #2E2822; color: var(--n-texte);
  font: 700 20px/1 var(--n-police); cursor: pointer;
}
html.mode-appli .n-quantite {
  flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; text-align: center;
  color: var(--n-texte); font: 800 18px/1.2 var(--n-police);
}
html.mode-appli .n-quantite:focus { outline: 0; color: var(--n-or-texte); }
/* Compteur − / + (AppliUI.compteur) : la rangée « Quantité ‹−› 1 ‹+› » de la fiche prestation, utilisable seule. */
html.mode-appli .n-compteur {
  display: flex; align-items: center; gap: 2px; min-height: 50px; box-sizing: border-box; padding: 0 3px 0 14px;
  border-radius: 12px; border: 1px solid var(--n-trait-fort); background: var(--n-fond);
}
html.mode-appli .n-compteur[hidden] { display: none; }
html.mode-appli .n-compteur-libelle { flex: 1; min-width: 0; font: 600 14px/1.3 var(--n-police); color: var(--n-texte-2); }
html.mode-appli .n-compteur-valeur { flex: none; min-width: 52px; text-align: center; font: 800 18px/1.2 var(--n-police); color: var(--n-texte); }
html.mode-appli .n-compteur-pas { cursor: pointer; }
html.mode-appli .n-compteur-pas:disabled { opacity: .35; cursor: default; }
html.mode-appli .n-compteur-pas:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
/* Rangée « case + libellé + compteur » (AppliUI.rangeeCompteur) : Tarifs et feuille d'ajout. */
html.mode-appli .n-rangee-choix { display: flex; flex-direction: column; gap: 8px; border-radius: 16px; background: #2A2520; padding-bottom: 0; }
html.mode-appli .n-rangee-choix.n-rangee-cochee { padding-bottom: 12px; box-shadow: inset 0 0 0 1px var(--n-or); }
html.mode-appli .n-rangee-choix > .n-compteur { margin: 0 12px; }
html.mode-appli .n-rangee-tete {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; box-sizing: border-box;
  border: 0; border-radius: 16px; background: transparent; color: var(--n-texte); text-align: left; cursor: pointer;
  font-family: var(--n-police);
}
html.mode-appli .n-rangee-tete:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: -2px; }
html.mode-appli .n-coche {
  flex: none; width: 24px; height: 24px; box-sizing: border-box; border-radius: 8px; border: 2px solid var(--n-trait-fort);
  display: flex; align-items: center; justify-content: center;
}
html.mode-appli .n-rangee-tete[aria-checked="true"] .n-coche { background: var(--n-or); border-color: var(--n-or); }
html.mode-appli .n-rangee-tete[aria-checked="true"] .n-coche::after {
  content: ''; width: 6px; height: 11px; margin-top: -2px; border: solid var(--n-fond); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
html.mode-appli .n-rangee-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.mode-appli .n-rangee-nom { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
html.mode-appli .n-rangee-detail { font-size: 13px; color: var(--n-texte-2); }
html.mode-appli .n-champ-prix { font-weight: 800; font-size: 17px; }
/* FCFA : « 99 999 999 FCFA » tient dans la demi-largeur d'un écran de 360 px. */
html.mode-appli .n-champ-prix.n-champ-prix-fcfa { font-size: 15px; padding: 0 10px; }
html.mode-appli .n-unites { grid-auto-columns: minmax(0, 1fr); }
/* F1 (lot 2c) : les unités de la prestation sont des boutons distincts, chacun
   à la largeur de son texte (au moins 44 px), séparés ; la rangée défile en
   largeur plutôt que de rogner un libellé si le texte du téléphone grossit. */
html.mode-appli .n-feuille-presta .n-unites {
  display: flex; gap: 6px; padding: 0; background: transparent; overflow-x: auto; scrollbar-width: none;
}
html.mode-appli .n-feuille-presta .n-unites > button {
  flex: 1 0 auto; min-width: 44px; min-height: 44px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--n-trait-fort); border-radius: 12px; font-size: 15px; font-weight: 700; color: #E7E0D5; white-space: nowrap;
}
html.mode-appli .n-feuille-presta .n-unites > button[aria-pressed="true"] { border-color: var(--n-or); color: var(--n-fond); }
html.mode-appli .n-total-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 2px; }
html.mode-appli .n-total-ligne-libelle { color: #C9C1B6; }
html.mode-appli .n-total-ligne-montant { font-weight: 800; color: var(--n-or); }
/* 4.3 : remise sur la prestation. Le bloc est toujours là ; le champ et sa bascule
   % / monnaie ne sont pas un « .n-segment » (celui des unités). */
html.mode-appli .n-total-ligne[hidden],
html.mode-appli .n-remise-recap[hidden] { display: none; }
html.mode-appli .n-remise-presta { display: flex; gap: 10px; }
html.mode-appli .n-remise-presta .n-champ { flex: 1; min-width: 0; font-weight: 800; font-size: 17px; }
html.mode-appli .n-bascule-remise { display: flex; gap: 6px; flex: none; }
html.mode-appli .n-bascule-remise > button {
  min-width: 50px; min-height: 50px; padding: 0 10px; box-sizing: border-box; cursor: pointer;
  border: 1px solid var(--n-trait-fort); border-radius: 12px; background: transparent;
  color: #E7E0D5; font: 700 16px/1.2 var(--n-police);
}
html.mode-appli .n-bascule-remise > button[aria-pressed="true"] { background: var(--n-or); border-color: var(--n-or); color: var(--n-fond); }
html.mode-appli .n-bascule-remise > button:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-remise-raccourcis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
html.mode-appli .n-remise-raccourcis > button {
  min-height: 44px; padding: 0 6px; box-sizing: border-box; cursor: pointer;
  border: 1px solid var(--n-trait-fort); border-radius: 12px; background: transparent;
  color: #E7E0D5; font: 700 16px/1.2 var(--n-police);
}
html.mode-appli .n-remise-raccourcis > button[aria-pressed="true"] { background: var(--n-or); border-color: var(--n-or); color: var(--n-fond); }
html.mode-appli .n-remise-raccourcis > button:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-remise-recap {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 14px 16px;
  border-radius: 14px; background: var(--n-fond); font-size: 15px;
}
html.mode-appli .n-remise-recap-ligne { display: flex; justify-content: space-between; gap: 12px; color: #C9C1B6; }
html.mode-appli .n-remise-recap-ligne del { color: var(--n-texte-3); }
html.mode-appli .n-remise-recap-ligne .n-remise-recap-montant { font-weight: 700; color: var(--n-texte); white-space: nowrap; }
html.mode-appli .n-remise-recap-ligne .n-remise-recap-montant:is(del) { font-weight: 500; color: var(--n-texte-3); }
html.mode-appli .n-remise-recap-total { font-weight: 800; color: var(--n-texte); }
html.mode-appli .n-remise-recap-total .n-remise-recap-montant { color: var(--n-or); }

/* 4.4 : la recherche dans les tarifs. */
html.mode-appli .n-feuille-ajout { height: min(740px, calc(100% - 64px)); }
html.mode-appli .n-ajout { display: flex; flex-direction: column; gap: 14px; }
/* Feuille d'ajout : le corps ne défile pas, seule la liste défile ; le bouton et la recherche restent en haut. */
html.mode-appli .n-feuille-ajout .n-feuille-corps { overflow: hidden; }
html.mode-appli .n-feuille-ajout .n-ajout { flex: 1 1 auto; min-height: 0; }
html.mode-appli .n-ajout-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; }
/* Fenêtre réduite par le clavier : la feuille prend presque toute la hauteur. */
@media (max-height: 420px) {
  html.mode-appli .n-feuille-ajout { height: calc(100% - 12px); max-height: calc(100% - 12px); gap: 8px; padding-bottom: calc(14px + var(--marge-bas)); }
  html.mode-appli .n-feuille-ajout .n-feuille-poignee { display: none; }
  html.mode-appli .n-feuille-ajout .n-ajout { gap: 8px; }
}
html.mode-appli .n-recherche {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; box-sizing: border-box;
  border-radius: 12px; background: var(--n-fond); border: 1.5px solid var(--n-or); color: var(--n-texte-3);
}
html.mode-appli .n-recherche-champ {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--n-texte);
  font: 500 16px/1.2 var(--n-police); -webkit-appearance: none; appearance: none;
}
html.mode-appli .n-ajout .n-rubrique { margin: 0; }
html.mode-appli .n-tarifs { display: flex; flex-direction: column; gap: 8px; }
/* Une ligne se touche pour cocher (rangée AppliUI.rangeeCompteur) : la carte garde le fond, la ligne est transparente. */
html.mode-appli .n-tarif-carte[hidden] { display: none; }
/* « Nouvelle prestation » : premier élément du corps, bordure pointillée (maquette b5b). */
html.mode-appli .n-ajout-nouvelle {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px;
  box-sizing: border-box; border: 1.5px dashed var(--n-or); border-radius: 26px; background: rgba(217, 178, 111, .08);
  color: var(--n-or-texte); font: 700 16px/1.2 var(--n-police); cursor: pointer;
}
html.mode-appli .n-ajout-nouvelle:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-ajout-nouvelle-plus { font-size: 24px; font-weight: 500; line-height: 1; }
html.mode-appli .n-tarifs-vide { margin: 0; padding: 12px 2px; font-size: 14px; line-height: 1.5; color: var(--n-texte-2); }

/* Tête de la carte de prestation : un vrai bouton (ouvre la feuille 4.3). */
html.mode-appli #vueResultat.n-devis button.n-presta-tete {
  width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: inherit; font-family: var(--n-police); text-align: left; align-items: flex-start;
}
html.mode-appli #vueResultat.n-devis button.n-presta-tete:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 4px; border-radius: 8px; }

/* Pas de halo bleu du web sur les champs des feuilles. */
html.mode-appli .n-feuille input:focus { box-shadow: none; }

/* 4.1 : le client (feuille « Client du devis »). */
html.mode-appli .n-feuille-client { height: min(760px, calc(100% - 64px)); }
html.mode-appli .n-ok-feuille {
  flex: none; height: 44px; min-width: 44px; padding: 0 4px; border: 0; background: transparent; cursor: pointer;
  color: var(--n-or-texte); font: 700 15px/1.2 var(--n-police);
}
html.mode-appli .n-ok-feuille:focus-visible,
html.mode-appli .n-sug:focus-visible,
html.mode-appli .n-carnet-ligne:focus-visible,
html.mode-appli .n-bandeau-corriger:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-client-form { display: flex; flex-direction: column; gap: 14px; }
html.mode-appli .n-client-champs,
html.mode-appli .n-client-pro { display: flex; flex-direction: column; gap: 10px; }
html.mode-appli .n-client-pro[hidden],
html.mode-appli .n-sug-liste[hidden],
html.mode-appli .n-bandeau-ville[hidden] { display: none; }
html.mode-appli .n-client-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.mode-appli .n-client-form .n-champ { height: 48px; }
html.mode-appli .n-client-form .n-rubrique { margin: 6px 0 0; }
html.mode-appli .n-sug-liste {
  display: flex; flex-direction: column; margin-top: -4px; border-radius: 12px; background: var(--n-fond);
  border: 1px solid var(--n-trait-fort); overflow: hidden;
}
html.mode-appli .n-sug-titre { margin: 0; padding: 8px 14px 0; font: 700 12px/1.3 var(--n-police); letter-spacing: .08em; text-transform: uppercase; color: var(--n-texte-3); }
html.mode-appli .n-sug {
  display: flex; flex-direction: column; gap: 2px; min-height: 48px; padding: 8px 14px; box-sizing: border-box;
  border: 0; border-bottom: 1px solid var(--n-trait-ligne); background: transparent; text-align: left; cursor: pointer;
  color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli .n-sug:last-child { border-bottom: 0; }
html.mode-appli .n-sug-principal { font-size: 15px; font-weight: 700; color: var(--n-texte); overflow-wrap: anywhere; }
html.mode-appli .n-sug-secondaire { font-size: 13px; color: var(--n-texte-2); overflow-wrap: anywhere; }
/* Web app, tâche 9 : « Est-ce l'une de ces entreprises ? » sous la carte du client (écran 4). */
html.mode-appli .n-propositions-client { margin-top: -6px; background: var(--n-surface); border-color: var(--n-trait); border-radius: 18px; }
html.mode-appli .n-propositions-titre { margin: 0; padding: 12px 14px 4px; font: 700 14px/1.3 var(--n-police); color: var(--n-texte-2); }
html.mode-appli .n-sug-autre .n-sug-principal { color: var(--n-or-texte); }
html.mode-appli .n-bandeau-ville {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 14px;
  border-radius: 12px; border: 1px solid var(--n-or); background: #2E2720; color: var(--n-texte); font-size: 14px; line-height: 1.4;
}
html.mode-appli .n-bandeau-corriger {
  flex: none; min-height: 44px; padding: 0 12px; border: 0; background: transparent; cursor: pointer;
  color: var(--n-or-texte); font: 700 14px/1.2 var(--n-police);
}
/* Tâche 8 : la loupe à droite du champ « Nom » (zone tactile de 44 px) ouvre la liste des clients.
   Le cadre porte le contour du champ ; le champ et la loupe sont côte à côte à l'intérieur (jamais l'un sur l'autre). */
html.mode-appli .n-champ-cadre {
  display: flex; align-items: center; box-sizing: border-box; height: 48px; border-radius: 12px;
  border: 1px solid var(--n-trait-fort); background: var(--n-fond);
}
html.mode-appli .n-champ-cadre:focus-within { border-color: var(--n-or); box-shadow: inset 0 0 0 .5px var(--n-or); }
html.mode-appli .n-client-form .n-champ-cadre .n-champ-avec-loupe,
html.mode-appli .n-champ-cadre .n-champ-avec-loupe:focus {
  flex: 1 1 auto; width: auto; min-width: 0; height: 46px; border: 0; background: transparent; border-radius: 12px 0 0 12px;
}
html.mode-appli .n-champ-loupe {
  flex: none; width: 44px; height: 44px; margin-right: 1px; padding: 0; border: 0; border-radius: 12px; background: transparent;
  cursor: pointer; display: grid; place-items: center; color: var(--n-or-texte);
}
html.mode-appli .n-champ-loupe:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: -2px; }
html.mode-appli .n-recherche-client { height: 46px; border: 1.5px solid transparent; background: var(--n-fond); }
html.mode-appli .n-recherche-client:focus-within { border-color: var(--n-or); }
html.mode-appli .n-carnet { display: flex; flex-direction: column; }
html.mode-appli .n-carnet-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 4px;
  box-sizing: border-box; border: 0; border-bottom: 1px solid var(--n-trait-ligne); background: transparent; text-align: left;
  cursor: pointer; color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli .n-carnet-ligne:last-child { border-bottom: 0; }
html.mode-appli .n-carnet-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.mode-appli .n-carnet-choisir { flex: none; font-size: 14px; font-weight: 700; color: var(--n-or-texte); }
html.mode-appli .n-texte-vide { margin: 0; padding: 12px 2px; font-size: 14px; line-height: 1.5; color: var(--n-texte-2); }

/* 5.1 à 5.3 : feuilles des détails du devis (dates, acompte et remise, conditions, lignes simples). */
html.mode-appli .n-detail-corps { display: flex; flex-direction: column; gap: 14px; }
html.mode-appli .n-detail-corps .n-texte-feuille { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli .n-detail-corps .n-rubrique { margin: 4px 0 0; }
html.mode-appli .n-detail-corps .n-rubrique-remise { margin-top: 10px; }
html.mode-appli .n-detail-corps [hidden] { display: none; }
html.mode-appli .n-champ-conditions { height: 150px; resize: none; font-weight: 400; line-height: 1.55; border-radius: 14px; padding: 14px; }
html.mode-appli .n-feuille-objet textarea.n-champ { min-height: 120px; resize: none; }

/* 5.1 : dates */
html.mode-appli .n-dates-zone,
html.mode-appli .n-dates-bloc { display: flex; flex-direction: column; gap: 14px; }
html.mode-appli .n-date-puces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.mode-appli .n-date-puce {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 58px; padding: 12px 14px;
  box-sizing: border-box; border-radius: 12px; border: 1px solid var(--n-trait-fort); background: var(--n-fond);
  color: var(--n-texte); text-align: left; cursor: pointer; font-family: var(--n-police);
}
html.mode-appli .n-date-puce.actif { border: 1.5px solid var(--n-or); padding: 11.5px 13.5px; }
html.mode-appli .n-date-libelle { font-size: 12px; color: var(--n-texte-2); }
html.mode-appli .n-date-valeur { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
html.mode-appli .n-date-valeur.n-date-vide { color: var(--n-texte-3); font-weight: 600; }
html.mode-appli .n-mois { display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 4px; }
html.mode-appli .n-mois-titre { font-size: 16px; font-weight: 700; }
html.mode-appli .n-mois-pas-groupe { display: flex; }
html.mode-appli .n-mois-pas {
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--n-or); font: 400 24px/1 var(--n-police);
}
html.mode-appli .n-cal-tete,
html.mode-appli .n-cal-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
html.mode-appli .n-cal-tete { margin-bottom: -6px; font-size: 13px; font-weight: 700; color: var(--n-texte-3); }
html.mode-appli .n-jour {
  height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent; cursor: pointer;
  color: #E7E0D5; font: 500 14px/1 var(--n-police);
}
html.mode-appli .n-jour-auj { box-shadow: inset 0 0 0 1px var(--n-trait-fort); }
html.mode-appli .n-jour-entre { background: #2E2720; border-radius: 6px; }
html.mode-appli .n-jour[aria-pressed="true"] { background: var(--n-or); color: var(--n-fond); font-weight: 800; }
html.mode-appli .n-jour:focus-visible,
html.mode-appli .n-date-puce:focus-visible,
html.mode-appli .n-mois-pas:focus-visible,
html.mode-appli .n-acomptes button:focus-visible,
html.mode-appli .n-choix:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }

/* 5.2 : acompte et remise */
/* Chaque colonne au moins à la largeur de son texte (« Aucun » grossi ne déborde plus). */
html.mode-appli .n-acomptes { display: grid; grid-template-columns: repeat(5, minmax(max-content, 1fr)); gap: 6px; }
html.mode-appli .n-acomptes button {
  min-height: 44px; padding: 0 2px; border-radius: 12px; border: 1px solid var(--n-trait-fort); background: transparent;
  color: #E7E0D5; font: 700 15px/1.2 var(--n-police); cursor: pointer;
}
html.mode-appli .n-acomptes button[aria-pressed="true"] { background: var(--n-or); border-color: var(--n-or); color: var(--n-fond); }
html.mode-appli .n-acompte-soit { margin: 0; font-size: 14px; color: #C9C1B6; }
html.mode-appli .n-acompte-autre { font-weight: 700; }
html.mode-appli .n-remise-ligne { display: flex; gap: 10px; }
html.mode-appli .n-champ-remise { flex: 1; min-width: 0; height: 52px; border: 1.5px solid var(--n-or); font-weight: 800; font-size: 18px; }
/* Remise en % ou en € : le petit segment à droite du montant (pas celui de 4.3). */
html.mode-appli .n-remise-ligne .n-unites { width: 130px; flex: none; }
html.mode-appli .n-remise-ligne .n-unites > button { font-size: 16px; font-weight: 700; }
html.mode-appli .n-remise-apercu {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--n-fond); font-size: 15px;
}
html.mode-appli .n-remise-apercu .n-recap-ligne { display: flex; justify-content: space-between; gap: 12px; }
html.mode-appli .n-remise-apercu .n-recap-libelle { color: #C9C1B6; }
html.mode-appli .n-remise-apercu .n-recap-ttc { font-weight: 800; }
html.mode-appli .n-remise-apercu .n-recap-ttc .n-recap-montant { color: var(--n-or); }

/* Taux de TVA */
html.mode-appli .n-choix-tva { display: flex; flex-direction: column; gap: 8px; }
html.mode-appli .n-choix {
  min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--n-trait-fort); background: transparent;
  color: #E7E0D5; text-align: left; font: 600 15px/1.3 var(--n-police); cursor: pointer;
}
html.mode-appli .n-choix[aria-pressed="true"] { background: var(--n-or); border-color: var(--n-or); color: var(--n-fond); font-weight: 700; }
html.mode-appli .n-feuille-detail .n-bouton:disabled { opacity: .45; cursor: default; }

/* --- Formules (écran 6 : p06-formules), devis prêt (7), message (7.1), prix retenus (7.3) --- */
html.mode-appli #vueFormules.n-formules.active {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; animation: none;
  display: flex; flex-direction: column; gap: 18px; box-sizing: border-box;
  padding: calc(56px + var(--marge-haut)) 20px calc(28px + var(--marge-bas));
  background: radial-gradient(circle at 50% 0%, rgba(217, 178, 111, .20), transparent 45%), var(--n-fond);
  color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli #vueFormules .n-formules-haut { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
html.mode-appli #vueFormules .n-formules-logo { width: 64px; height: 64px; object-fit: contain; }
html.mode-appli #vueFormules .n-formules-titre { margin: 0; font: 800 26px/1.2 var(--n-police); color: var(--n-texte); }
html.mode-appli #vueFormules .n-formules-sous { margin: 0; max-width: 300px; font-size: 15px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli #vueFormules .liste-formules {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; padding-top: 8px;
}
html.mode-appli #vueFormules .liste-formules > .aide { grid-column: 1 / -1; text-align: center; color: var(--n-texte-2); }
html.mode-appli #vueFormules .formule {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; flex-wrap: nowrap;
  min-height: 44px; padding: 18px 6px; border-radius: 18px; border: 1px solid var(--n-trait); background: var(--n-surface);
  color: var(--n-texte); font-family: var(--n-police); cursor: pointer; transition: transform .15s;
}
html.mode-appli #vueFormules .formule-volume { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--n-texte); }
html.mode-appli #vueFormules .formule-unite { font-size: 12px; color: var(--n-texte-3); }
html.mode-appli #vueFormules .formule-prix { margin-top: 8px; font-size: 16px; font-weight: 800; color: var(--n-texte); }
html.mode-appli #vueFormules .formule[aria-pressed="true"] {
  padding: 17px 5px; border: 2px solid var(--n-or); background: #2E2720; transform: translateY(-8px);
}
html.mode-appli #vueFormules .formule[aria-pressed="true"] .formule-volume { color: var(--n-or); }
html.mode-appli #vueFormules .formule[aria-pressed="true"] .formule-unite { color: var(--n-texte-2); }
html.mode-appli #vueFormules .formule:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli #vueFormules .n-formules-points { display: flex; flex-direction: column; gap: 12px; padding: 4px 8px; }
html.mode-appli #vueFormules .n-formules-point { margin: 0; display: flex; gap: 10px; font-size: 15px; color: #E7E0D5; }
html.mode-appli #vueFormules .n-formules-coche { color: var(--n-or); font-weight: 800; }
html.mode-appli #vueFormules .n-formules-bas { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
html.mode-appli #vueFormules .n-formules-note { margin: 0; font-size: 13px; color: var(--n-texte-3); text-align: center; }
html.mode-appli #vueFormules .n-bouton:disabled { opacity: .55; }
html.mode-appli #vueFormules .n-bouton-lien { align-self: center; }

/* Écran 7 : plein écran posé sur le devis (le devis garde son état dessous). */
html.mode-appli #envoiAppli.n-pret {
  position: fixed; inset: 0; z-index: 30; margin: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 22px; box-sizing: border-box;
  padding: calc(14px + var(--marge-haut)) 24px calc(32px + var(--marge-bas));
  background: radial-gradient(circle at 50% 14%, rgba(217, 178, 111, .22), transparent 40%), var(--n-fond);
  color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli #envoiAppli.n-pret[hidden] { display: none; }
html.mode-appli #envoiAppli [hidden] { display: none; }
html.mode-appli #envoiAppli .n-retour { flex: none; }
html.mode-appli #envoiAppli .n-pret-haut { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
html.mode-appli #envoiAppli .n-pret-coche {
  width: 72px; height: 72px; border-radius: 36px; background: var(--n-or);
  display: flex; align-items: center; justify-content: center;
}
html.mode-appli #envoiAppli .n-pret-titre { margin: 8px 0 0; font: 800 26px/1.2 var(--n-police); color: var(--n-texte); outline: 0; }
html.mode-appli #envoiAppli .n-pret-sous { margin: 0; font-size: 15px; color: var(--n-texte-2); }
html.mode-appli #envoiAppli .n-pret-sous:empty { display: none; }
html.mode-appli #envoiAppli .n-pret-message { padding: 16px; gap: 8px; }
html.mode-appli #envoiAppli .n-pret-message-tete { display: flex; justify-content: space-between; align-items: center; }
html.mode-appli #envoiAppli .n-pret-message-tete .n-bouton-lien { margin-right: -8px; font-size: 14px; }
html.mode-appli #envoiAppli .n-pret-etiquette { font-size: 14px; font-weight: 700; color: var(--n-or); }
html.mode-appli #envoiAppli .n-pret-message-texte {
  margin: 0; font-size: 15px; line-height: 1.5; color: #E7E0D5; white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 7; line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
html.mode-appli #envoiAppli .n-pret-canaux-titre { margin: 6px 0 -12px; font-size: 15px; font-weight: 700; }
html.mode-appli #envoiAppli .n-pret-canaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* padding: 0 (21/10/2026) : le remplissage par défaut d'un bouton (6 px de
   chaque côté) laissait 83 px au libellé à 360 px de large ; « WhatsApp » en
   texte ×1,3 en mesure 93 (WebKit comme Chromium) et débordait, vu par
   test:mise-en-page --cible web. Libellé et icône restent centrés. */
html.mode-appli #envoiAppli .n-canal {
  min-width: 0; padding: 0; height: 84px; border-radius: 18px; border: 1px solid var(--n-trait); background: var(--n-surface); color: var(--n-texte);
  font: 600 14px/1.2 var(--n-police); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli #envoiAppli .n-canal:disabled { opacity: .55; }
html.mode-appli #envoiAppli .n-canal:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli #envoiAppli .etat-envoi-appli { margin: -8px 0 0; color: var(--n-or-texte); font-size: 14px; line-height: 1.45; text-align: center; }
html.mode-appli #envoiAppli .etat-envoi-appli:empty { display: none; }
html.mode-appli #envoiAppli #soucisEnvoiAppli:empty { display: none; }
html.mode-appli #envoiAppli #soucisEnvoiAppli .souci {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45;
  color: var(--n-danger); background: rgba(240, 162, 138, .10); border: 1px solid rgba(240, 162, 138, .35);
}
html.mode-appli #envoiAppli .n-pret-bas { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
html.mode-appli #envoiAppli .n-pret-bas .n-bouton-contour { font-size: 16px; }
html.mode-appli #envoiAppli .n-autre-appli { color: var(--n-texte-2); }

/* Feuille 7.1 : le message. */
html.mode-appli .n-feuille-message { height: min(720px, calc(100% - 64px)); }
html.mode-appli .n-feuille-message .n-feuille-corps { min-height: 0; }
html.mode-appli .n-message-corps { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
html.mode-appli .n-message-saisie {
  flex: 1 1 auto; min-height: 220px; box-sizing: border-box; width: 100%; padding: 16px; border-radius: 16px;
  border: 1.5px solid var(--n-or); background: var(--n-fond); color: var(--n-texte);
  font: 400 16px/1.6 var(--n-police); resize: none;
}
html.mode-appli .n-message-saisie:focus { outline: 0; }
html.mode-appli .n-aide-feuille { margin: 0; font-size: 13px; line-height: 1.5; color: #9A9083; }
html.mode-appli .n-feuille-prix .n-aide-feuille:first-child { font-size: 15px; color: var(--n-texte-2); }

/* Signaler un problème (R14). */
html.mode-appli #vueResultat.n-devis .n-lien-signaler { flex: none; align-self: center; margin: 4px 0 0; }
html.mode-appli .n-signalement-saisie { flex: none; min-height: 150px; resize: vertical; }
html.mode-appli .n-ligne-case {
  display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; min-height: 56px; box-sizing: border-box;
  border-radius: 16px; background: #2A2520; color: var(--n-texte); font-size: 16px; cursor: pointer;
}
html.mode-appli .n-ligne-case input.n-case {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; box-sizing: border-box;
  width: 26px; height: 26px; margin: 0; border-radius: 8px; border: 2px solid var(--n-or); background: transparent; cursor: pointer;
}
html.mode-appli .n-ligne-case input.n-case:checked { background: var(--n-or); }
html.mode-appli .n-ligne-case input.n-case:checked::after {
  content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--n-fond); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
html.mode-appli .n-ligne-case input.n-case:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-souci-signalement:empty { display: none; }
html.mode-appli .n-souci-signalement {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45;
  color: var(--n-danger); background: rgba(240, 162, 138, .10); border: 1px solid rgba(240, 162, 138, .35);
}

/* Feuille 7.3 : les prix à retenir. */
html.mode-appli .n-recap { display: flex; flex-direction: column; gap: 14px; }
html.mode-appli .n-recap .n-aide-feuille:empty { display: none; }
html.mode-appli .n-recap #soucisRecapAppli:empty { display: none; }
html.mode-appli .n-recap #soucisRecapAppli .souci {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45;
  color: var(--n-danger); background: rgba(240, 162, 138, .10); border: 1px solid rgba(240, 162, 138, .35);
}
html.mode-appli .n-liste-recap { display: flex; flex-direction: column; gap: 10px; }
html.mode-appli .n-feuille-prix .ligne-recap {
  display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; min-height: 56px; box-sizing: border-box;
  border: 0; border-radius: 16px; background: #2A2520; cursor: pointer;
}
html.mode-appli .n-feuille-prix .lr-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.mode-appli .n-feuille-prix .lr-label { font-size: 16px; font-weight: 700; color: var(--n-texte); overflow-wrap: anywhere; }
html.mode-appli .n-feuille-prix .lr-prix { font-size: 13px; color: var(--n-texte-3); }
html.mode-appli .ligne-recap input.n-case {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; box-sizing: border-box;
  width: 26px; height: 26px; margin: 0; border-radius: 8px; border: 2px solid var(--n-or); background: transparent; cursor: pointer;
}
html.mode-appli .ligne-recap input.n-case:checked { background: var(--n-or); }
html.mode-appli .ligne-recap input.n-case:checked::after {
  content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--n-fond); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
html.mode-appli .ligne-recap input.n-case:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-feuille-prix .n-feuille-actions { flex-direction: row; gap: 10px; margin-top: 6px; }
html.mode-appli .n-feuille-prix .n-feuille-actions > button { flex: 1 1 0; min-width: 0; min-height: 54px; border-radius: 27px; font-size: 16px; padding: 0 8px; }
html.mode-appli .n-feuille-prix .n-feuille-actions > .n-bouton { font-weight: 700; }

/* --- Clients et tarifs (écrans 8, 8.1, 9, 9.1 : p08-clients, p08-1-fiche, p09-tarifs, p09-1-tarif) --- */
html.mode-appli .n-ecran-liste.active {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; overscroll-behavior: contain; animation: none;
  display: flex; flex-direction: column; gap: 16px; box-sizing: border-box;
  padding: calc(52px + var(--marge-haut)) 20px calc(28px + var(--marge-bas));
  background: var(--n-fond); color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli .n-ecran-liste [hidden] { display: none !important; }
/* app.js rouvre ces éléments du web (hidden = false) : le CSS les garde fermés. */
html.mode-appli .n-ecran-liste > .titre,
html.mode-appli .n-ecran-liste > .sous:not(#sousTarifs),
html.mode-appli .n-ecran-liste > .actions,
html.mode-appli .n-ecran-liste > #btnAjouterLigne,
html.mode-appli .n-ecran-liste > #avisClients { display: none !important; }
html.mode-appli .n-ecran-liste #nClientsListe,
html.mode-appli .n-ecran-liste #ficheClient { display: flex; flex-direction: column; gap: 16px; flex: 1 0 auto; }
html.mode-appli .n-ecran-liste #soucisClients:empty,
html.mode-appli .n-ecran-liste #soucisTarifs:empty,
html.mode-appli .n-ecran-liste #avisTarifs:empty { display: none; }
html.mode-appli .n-ecran-liste #soucisClients .souci,
html.mode-appli .n-ecran-liste #soucisTarifs .souci,
html.mode-appli .n-tf-souci {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45;
  color: var(--n-danger); background: rgba(240, 162, 138, .10); border: 1px solid rgba(240, 162, 138, .35);
}
html.mode-appli .n-tf-souci:empty { display: none; }

/* En-tête : flèche, titre, bouton rond. */
html.mode-appli .n-ecran-tete { display: flex; align-items: center; gap: 8px; min-height: 44px; }
html.mode-appli .n-ecran-tete .n-retour { flex: none; }
html.mode-appli .n-ecran-titre { flex: 1; min-width: 0; margin: 0; font: 800 30px/1.15 var(--n-police); letter-spacing: -.02em; color: var(--n-texte); }
html.mode-appli .n-bouton-rond {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 22px; border: 1px solid var(--n-trait); background: var(--n-surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-bouton-rond:focus-visible,
html.mode-appli .n-cl-rond:focus-visible,
html.mode-appli .n-cl-ouvrir:focus-visible,
html.mode-appli .n-tf-puce:focus-visible,
html.mode-appli .n-tf-ligne:focus-visible,
html.mode-appli .n-devis-ligne:focus-visible,
html.mode-appli .n-tf-supprimer:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }

/* 8 : cartes « Récents ». */
html.mode-appli .n-cl-liste .n-rubrique { margin: 2px 0 0; }
html.mode-appli .n-cl-recherche { margin: 0; }
html.mode-appli .n-cl-recherche .lecture-seule { display: none; }
html.mode-appli #listeClients { display: flex; flex-direction: column; gap: 10px; }
html.mode-appli #listeClients .aide { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-texte-3); text-align: center; }
html.mode-appli .n-cl-carte {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 18px; background: var(--n-surface);
}
html.mode-appli .n-cl-ouvrir {
  flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0; margin: 0;
  border: 0; background: transparent; color: var(--n-texte); font-family: var(--n-police); text-align: left; cursor: pointer;
}
html.mode-appli .n-cl-ouvrir .lc-nom { font-size: 16px; font-weight: 700; color: var(--n-texte); overflow-wrap: anywhere; }
html.mode-appli .n-cl-ouvrir .sug-surnom { font-size: 13px; font-weight: 500; color: var(--n-texte-3); }
html.mode-appli .n-cl-info { font-size: 13px; color: var(--n-texte-3); }
html.mode-appli .n-cl-rond {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: #3A3127;
  display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-cl-note { margin: auto 0 0; padding-top: 8px; font-size: 14px; line-height: 1.5; color: var(--n-texte-3); text-align: center; }

/* 8.1 : fiche. */
html.mode-appli .n-fiche-tete { justify-content: space-between; }
html.mode-appli .n-fiche-tete .n-bouton-lien { margin-right: -8px; }
html.mode-appli .n-fiche-id { display: flex; align-items: center; gap: 14px; }
html.mode-appli .n-fiche-initiales {
  flex: none; width: 60px; height: 60px; border-radius: 30px; background: #3A3127; color: var(--n-or);
  font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
html.mode-appli .n-fiche-qui { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.mode-appli .n-fiche-nom { font-size: 24px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
html.mode-appli .n-fiche-type { font-size: 14px; color: var(--n-texte-3); }
html.mode-appli .n-fiche-coord { padding: 4px 0; }
html.mode-appli #ficheClient .n-rubrique { margin: 4px 0 0; }
html.mode-appli .n-fiche-devis { display: flex; flex-direction: column; gap: 8px; }
html.mode-appli .n-fiche-vide { margin: 0; font-size: 14px; color: var(--n-texte-3); }
html.mode-appli .n-devis-ligne {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 56px; box-sizing: border-box;
  padding: 13px 16px; border: 0; border-radius: 16px; background: var(--n-surface); color: var(--n-texte);
  font-family: var(--n-police); text-align: left; cursor: pointer;
}
html.mode-appli .n-devis-qui { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.mode-appli .n-devis-numero { font-size: 15px; font-weight: 700; }
html.mode-appli .n-devis-date { font-size: 13px; color: var(--n-texte-3); }
html.mode-appli .n-devis-total { flex: none; font-size: 15px; font-weight: 800; }
html.mode-appli .n-fiche-nouveau { margin-top: auto; flex: none; display: flex; flex-direction: column; gap: 10px; }
html.mode-appli #ficheClient .n-fiche-nouveau .n-rubrique { margin: 0; }
/* Côte à côte ; si les deux ne tiennent plus (360 px, texte agrandi), l'un sous l'autre, libellé jamais coupé. */
html.mode-appli .n-fiche-actions { display: flex; flex-wrap: wrap; gap: 12px; }
html.mode-appli .n-fiche-actions > button { flex: 1 1 auto; width: auto; min-width: 0; box-sizing: border-box; padding: 8px 16px; }

/* 8.1 « Modifier » : le formulaire d'avant, en champs Nuit. */
html.mode-appli .n-cl-champs { display: flex; flex-direction: column; gap: 14px; }
html.mode-appli .n-aide-champ { font-size: 12px; line-height: 1.45; color: #9A9083; }
html.mode-appli #ficheClient > .n-bouton-contour { flex: none; }
/* Le collant se règle sur le contenu de l'écran : le décalage annule son bas de page. */
html.mode-appli #ficheClient > .n-barre-basse { margin: auto -20px calc(-28px - var(--marge-bas)); bottom: calc(-28px - var(--marge-bas)); }

/* 9 : tarifs. */
html.mode-appli #sousTarifs { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-texte-3); }
html.mode-appli .n-tf-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
html.mode-appli .n-tf-puce {
  min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--n-trait-fort); background: transparent;
  color: #E7E0D5; font: 600 14px/1.2 var(--n-police); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-tf-puce[aria-pressed="true"] { background: var(--n-or); border-color: var(--n-or); color: var(--n-fond); font-weight: 700; }
html.mode-appli .n-tf-liste { display: flex; flex-direction: column; gap: 8px; }
html.mode-appli .n-tf-liste .aide { margin: 0; font-size: 14px; color: var(--n-texte-3); text-align: center; }
html.mode-appli .n-tf-ligne {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 56px; box-sizing: border-box;
  padding: 14px 16px; border: 0; border-radius: 16px; background: var(--n-surface); color: var(--n-texte);
  font-family: var(--n-police); text-align: left;
}
html.mode-appli button.n-tf-ligne { cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.mode-appli .n-tf-qui { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.mode-appli .n-tf-nom { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
html.mode-appli .n-tf-note { font-size: 13px; color: var(--n-texte-3); }
html.mode-appli .n-tf-prix { flex: none; font-size: 16px; font-weight: 800; color: var(--n-or); white-space: nowrap; }
html.mode-appli #btnRestaurerTarifs { margin-top: auto; flex: none; }

/* 9 : saisie rapide. Carte « case + nom + prix » (AppliUI.rangeeCompteur, case séparée), compteur sous la ligne cochée. */
html.mode-appli .n-rangee-separee { gap: 2px; min-height: 64px; padding: 0 0 0 8px; border-radius: 16px; cursor: auto; }
html.mode-appli .n-case-bouton {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-case-bouton:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-case-bouton[aria-checked="true"] .n-coche { background: var(--n-or); border-color: var(--n-or); }
html.mode-appli .n-case-bouton[aria-checked="true"] .n-coche::after {
  content: ''; width: 6px; height: 11px; margin-top: -2px; border: solid var(--n-fond); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
html.mode-appli .n-tf-carte .n-tf-ligne { flex: 1; min-width: 0; width: auto; padding: 14px 16px 14px 4px; background: transparent; }
html.mode-appli .n-tf-carte .n-tf-ligne:focus-visible { outline-offset: -2px; }
/* La barre du bas : collée au bas de l'écran (comme .n-imp-collant), cachée sans choix. */
html.mode-appli .n-tf-barre {
  position: sticky; bottom: calc(-28px - var(--marge-bas)); z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: auto -20px calc(-28px - var(--marge-bas)); padding: 14px 20px calc(16px + var(--marge-bas));
  border-top: 1px solid var(--n-trait); background: var(--n-fond);
}
html.mode-appli .n-tf-avec-barre #btnRestaurerTarifs { margin-top: 0; }
html.mode-appli .n-tf-barre-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.mode-appli .n-tf-barre-nb { font: 800 17px/1.25 var(--n-police); color: var(--n-texte); }
html.mode-appli .n-tf-barre-total { font: 500 14px/1.3 var(--n-police); color: var(--n-texte-2); overflow-wrap: anywhere; }
html.mode-appli .n-tf-barre .n-bouton { flex: none; width: auto; min-width: 140px; min-height: 56px; padding: 0 18px; border-radius: 28px; white-space: nowrap; }
/* 9.3 : feuille « Créer le devis ». */
html.mode-appli .n-feuille-creer .n-creer-corps { display: flex; flex-direction: column; gap: 16px; }
html.mode-appli .n-creer-lignes { padding: 4px 16px; border-radius: 16px; background: var(--n-surface); }
html.mode-appli .n-creer-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--n-trait); }
html.mode-appli .n-creer-ligne:first-child { border-top: 0; }
html.mode-appli .n-creer-qui { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.mode-appli .n-creer-nom { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
html.mode-appli .n-creer-detail { font-size: 14px; color: var(--n-texte-2); }
html.mode-appli .n-creer-prix { flex: none; font-size: 16px; font-weight: 800; white-space: nowrap; }
html.mode-appli .n-creer-phrase { margin: 0; font-size: 15px; line-height: 1.45; color: var(--n-texte-2); }
html.mode-appli .n-creer-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
html.mode-appli .n-creer-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; box-sizing: border-box;
  padding: 16px 8px; border-radius: 22px; border: 1px solid var(--n-trait-fort); background: transparent; color: var(--n-texte);
  font-family: var(--n-police); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-creer-action:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-creer-action-icone { width: 56px; height: 56px; border-radius: 28px; background: #2F2822; display: flex; align-items: center; justify-content: center; }
html.mode-appli .n-creer-action-titre { font-size: 16px; font-weight: 800; }
html.mode-appli .n-creer-action-note { font-size: 14px; line-height: 1.35; color: var(--n-texte-2); }
/* « Dicter la suite » : l'action que la plupart choisissent, pleine dorée (maquette b1b). */
html.mode-appli .n-creer-action-principale { border-color: var(--n-or); background: var(--n-or); color: #1A1714; }
html.mode-appli .n-creer-action-principale .n-creer-action-icone { background: rgba(26, 23, 20, .14); }
html.mode-appli .n-creer-action-principale .n-creer-action-note { color: #1A1714; }
html.mode-appli .n-creer-action-principale:focus-visible { outline-color: var(--n-texte); }
html.mode-appli .n-sans-coupure { white-space: nowrap; }

/* 9.1 : feuille Tarif. */
html.mode-appli .n-tf-feuille { gap: 14px; }
html.mode-appli .n-tf-supprimer {
  position: absolute; top: 24px; right: 20px; height: 44px; padding: 0 4px; border: 0; background: transparent;
  color: var(--n-danger); font: 600 15px/1.2 var(--n-police); cursor: pointer;
}
html.mode-appli .n-tf-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
html.mode-appli .n-tf-champ-prix { border: 1.5px solid var(--n-or); font-weight: 800; font-size: 17px; }
html.mode-appli select.n-champ { appearance: none; -webkit-appearance: none; font-size: 15px; font-weight: 600; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--n-texte-3) 50%), linear-gradient(135deg, var(--n-texte-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
html.mode-appli .n-tf-unites { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.mode-appli .n-tf-unites > button { min-height: 44px; font-size: 14px; font-weight: 700; color: #C9C1B6; padding: 0 4px; }
html.mode-appli .n-tf-unites > button[aria-pressed="true"] { color: var(--n-fond); }
html.mode-appli #envoiAppli .n-pret-alertes {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; border-radius: 16px;
  background: rgba(217, 178, 111, .10); border: 1px solid rgba(217, 178, 111, .35); font-size: 14px; line-height: 1.45; color: var(--n-texte);
}
html.mode-appli #envoiAppli .n-pret-alertes ul { margin: 0; padding-left: 18px; color: var(--n-texte-2); }
html.mode-appli #envoiAppli .n-pret-alertes .n-bouton-lien { padding: 0; }

/* Alertes absentes : la boîte disparaît (app.css pose déjà [hidden] { display: none !important }, ceci le dit ici aussi). */
html.mode-appli #envoiAppli .n-pret-alertes[hidden] { display: none; }

/* --- Mes devis (écrans 10 et 10.1 : p10-devis, p10-1-devis-envoye) --------- */
html.mode-appli .n-ecran-mes-devis .n-rubrique { margin: 6px 0 0; }
html.mode-appli .n-md-liste { display: flex; flex-direction: column; gap: 16px; }
html.mode-appli .n-md-groupe { display: flex; flex-direction: column; gap: 8px; }
html.mode-appli .n-md-ligne {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 56px; box-sizing: border-box;
  padding: 13px 16px; border: 0; border-radius: 16px; background: var(--n-surface); color: var(--n-texte);
  font-family: var(--n-police); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-md-ligne:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-md-qui { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.mode-appli .n-md-client { font-size: 15px; font-weight: 700; color: var(--n-texte); overflow-wrap: anywhere; }
html.mode-appli .n-md-info { font-size: 13px; color: var(--n-texte-3); }
html.mode-appli .n-md-montant { flex: none; font-size: 15px; font-weight: 800; color: var(--n-texte); white-space: nowrap; }
html.mode-appli .n-md-recherche { margin: 0; }
html.mode-appli .n-md-aucun { margin: 0; font-size: 14px; color: var(--n-texte-3); text-align: center; }
html.mode-appli .n-md-vide { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
html.mode-appli .n-md-vide p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--n-texte-2); }

html.mode-appli .n-ecran-un-devis.active { padding-top: calc(48px + var(--marge-haut)); }
html.mode-appli .n-ud-corps { display: flex; flex-direction: column; gap: 16px; flex: 1 0 auto; }
html.mode-appli .n-ud-entete { display: flex; flex-direction: column; gap: 4px; }
html.mode-appli .n-ud-info { font-size: 14px; color: var(--n-texte-3); }
html.mode-appli .n-ud-client { font-size: 26px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
html.mode-appli .n-ud-total { font-size: 30px; font-weight: 800; color: var(--n-or); }
html.mode-appli .n-ud-ttc { font-size: 14px; font-weight: 600; color: var(--n-texte-3); }
html.mode-appli .n-ud-resume { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: var(--n-surface); }
html.mode-appli .n-ud-miniature {
  flex: none; width: 70px; height: 92px; border-radius: 6px; background: #FFFFFF; padding: 8px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 5px;
}
html.mode-appli .n-ud-miniature span { display: block; height: 3px; border-radius: 2px; background: #E6DED2; }
html.mode-appli .n-ud-miniature span:nth-child(1) { width: 30px; height: 5px; background: #1D4ED8; }
html.mode-appli .n-ud-miniature span:nth-child(2) { margin-top: 6px; }
html.mode-appli .n-ud-miniature span:nth-child(5) { margin: auto 0 0 auto; width: 22px; height: 5px; background: #1C1A17; }
html.mode-appli .n-ud-resume-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html.mode-appli .n-ud-resume-titre { font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.mode-appli .n-ud-resume-sous { font-size: 13px; color: var(--n-texte-3); }
html.mode-appli .n-ud-actions { display: flex; flex-direction: column; gap: 10px; }
/* Retirer de Mes devis : bouton texte discret, couleur danger, cible tactile 44 px. */
html.mode-appli .n-ud-retirer {
  align-self: center; min-height: 44px; margin: 6px 0 0; padding: 0 16px; background: none; border: 0;
  color: var(--n-danger); font: 600 15px/1.2 var(--n-police); cursor: pointer;
}
html.mode-appli .n-ud-retirer:disabled { opacity: .5; }
html.mode-appli .n-ud-note { margin: 0; font-size: 13px; line-height: 1.5; color: #9A9083; }
html.mode-appli .n-ud-numero { white-space: nowrap; }

/* ============================================================================
   Plan 2b, tâche 17 : Mon compte (11) et Mon entreprise (11.1).
   Les deux écrans sont des écrans en liste (.n-ecran-liste : plein écran,
   défilement vertical, en-tête flèche + titre).
   ============================================================================ */
html.mode-appli .n-ecran-compte.active,
html.mode-appli .n-ecran-entreprise.active { gap: 14px; }
html.mode-appli .n-ecran-compte .n-carte,
html.mode-appli .n-ecran-entreprise .n-carte { flex: none; }

/* Mon compte : titre, puis détail sous chaque ligne. */
html.mode-appli .n-lc .n-lc-titre { grid-column: 1; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--n-texte); }
html.mode-appli .n-lc .n-lc-detail { grid-column: 1; font-size: 13px; line-height: 1.4; color: var(--n-texte-3); overflow-wrap: anywhere; }
html.mode-appli .n-lc.n-lc-danger .n-lc-titre { color: var(--n-danger); }
html.mode-appli .n-lc:disabled { cursor: default; }
html.mode-appli .n-lc:disabled::after { display: none; }
html.mode-appli .n-lc:disabled .n-lc-titre { color: var(--n-texte-2); }
html.mode-appli .n-ecran-compte .n-aide { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli .n-ecran-compte .n-etat-compte:empty,
html.mode-appli .n-ecran-compte #soucisCompte:empty,
html.mode-appli .n-ecran-compte #soucisDeconnexion:empty,
html.mode-appli .n-ecran-entreprise #soucisEntreprise:empty,
html.mode-appli .n-ecran-entreprise #avisEntreprise:empty { display: none; }
html.mode-appli .n-ecran-compte .souci,
html.mode-appli .n-ecran-entreprise #soucisEntreprise .souci {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45;
  color: var(--n-danger); background: rgba(240, 162, 138, .10); border: 1px solid rgba(240, 162, 138, .35);
}
html.mode-appli .n-bloc-suppression {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--n-surface);
  border: 1px solid rgba(240, 162, 138, .35);
}
html.mode-appli .n-bloc-suppression .n-aide { color: var(--n-texte-2); }
html.mode-appli .n-bloc-suppression .n-champ-bloc span { font-size: 14px; color: var(--n-texte-2); }
html.mode-appli .n-compte-actions { display: flex; gap: 10px; }
html.mode-appli .n-compte-actions > * { flex: 1 1 0; min-width: 0; }
html.mode-appli .n-bouton-danger { background: var(--n-danger); color: var(--n-fond); }
html.mode-appli .n-bouton-danger:disabled { opacity: .45; }
html.mode-appli .n-compte-lien { margin: auto 0 0; text-align: center; }
html.mode-appli .n-lien-compte {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font: 600 14px/1.2 var(--n-police); color: var(--n-texte-2); text-decoration: underline; text-underline-offset: 3px;
}
html.mode-appli .n-lien-compte:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }

/* Mon entreprise : carte logo et couleur. */
html.mode-appli .n-marque {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: var(--n-surface); cursor: pointer;
}
html.mode-appli .n-puce-marque {
  flex: none; width: 60px; height: 60px; border-radius: 14px; color: #FFFFFF; font: 800 20px/1 var(--n-police);
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: #334155;
}
html.mode-appli .n-puce-marque img { width: 100%; height: 100%; object-fit: contain; background: #FFFFFF; }
html.mode-appli .n-marque-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html.mode-appli .n-marque-titre { font-size: 15px; font-weight: 700; color: var(--n-texte); }
html.mode-appli .n-marque-detail { font-size: 13px; color: var(--n-texte-3); }
html.mode-appli .n-marque-changer {
  flex: none; min-height: 44px; padding: 0 4px; border: 0; background: transparent; cursor: pointer;
  font: 700 14px/1.2 var(--n-police); color: var(--n-or-texte);
}
html.mode-appli .n-marque-changer:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }

/* Les huit lignes imprimées sur chaque devis. */
html.mode-appli .n-ligne-ent { padding: 11px 16px; row-gap: 1px; }
html.mode-appli .n-ligne-ent .n-ligne-libelle { font-size: 12px; }

/* Le formulaire du web reste dans la page : seules les « Informations complémentaires » se voient. */
html.mode-appli #vueEntreprise #champsEntreprise > .bloc-entreprise:not(.bloc-replie) { display: none; }
html.mode-appli #vueEntreprise > #marqueEntreprise { display: none; }
html.mode-appli #vueEntreprise #champsEntreprise .bloc-replie {
  margin: 0; padding: 4px 16px; border: 0; border-radius: 18px; background: var(--n-surface); color: var(--n-texte);
}
html.mode-appli #vueEntreprise #champsEntreprise .bloc-replie > summary {
  display: flex; align-items: center; min-height: 52px; margin: 0; cursor: pointer; list-style-position: inside;
  font: 700 15px/1.3 var(--n-police); color: var(--n-texte); text-transform: none; letter-spacing: 0; margin-bottom: 0;
}
html.mode-appli #vueEntreprise #champsEntreprise .bloc-replie[open] { padding-bottom: 12px; }

/* Champs du formulaire (dans l'écran ou empruntés par une feuille). */
html.mode-appli .n-ecran-entreprise .ligne-ent,
html.mode-appli .n-feuille-ent .ligne-ent { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; font-family: var(--n-police); }
html.mode-appli .n-ecran-entreprise .label-ent,
html.mode-appli .n-feuille-ent .label-ent { margin: 0; font-size: 13px; color: var(--n-texte-3); }
html.mode-appli .n-ecran-entreprise .aide-ent,
html.mode-appli .n-feuille-ent .aide-ent { margin: 0; font-size: 12px; line-height: 1.45; color: var(--n-texte-3); }
html.mode-appli .n-ecran-entreprise .ligne-ent input:not([type="checkbox"]),
html.mode-appli .n-ecran-entreprise .ligne-ent select,
html.mode-appli .n-ecran-entreprise .ligne-ent textarea,
html.mode-appli .n-feuille-ent .ligne-ent input:not([type="checkbox"]),
html.mode-appli .n-feuille-ent .ligne-ent select,
html.mode-appli .n-feuille-ent .ligne-ent textarea {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 50px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--n-trait-fort); background: var(--n-fond); color: var(--n-texte); font: 500 16px/1.2 var(--n-police);
}
html.mode-appli .n-ecran-entreprise .ligne-ent textarea,
html.mode-appli .n-feuille-ent .ligne-ent textarea { padding: 12px 14px; line-height: 1.5; min-height: 84px; }
html.mode-appli .n-ecran-entreprise .ligne-ent input:focus,
html.mode-appli .n-ecran-entreprise .ligne-ent select:focus,
html.mode-appli .n-ecran-entreprise .ligne-ent textarea:focus,
html.mode-appli .n-feuille-ent .ligne-ent input:focus,
html.mode-appli .n-feuille-ent .ligne-ent select:focus,
html.mode-appli .n-feuille-ent .ligne-ent textarea:focus { outline: 0; border-color: var(--n-or); }
html.mode-appli .n-ecran-entreprise .ligne-case,
html.mode-appli .n-feuille-ent .ligne-case { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; min-height: 44px; }
html.mode-appli .n-ecran-entreprise .ligne-case input,
html.mode-appli .n-feuille-ent .ligne-case input { width: 24px; height: 24px; margin: 0; accent-color: var(--n-or); }
html.mode-appli .n-ecran-entreprise .ligne-case .label-ent,
html.mode-appli .n-feuille-ent .ligne-case .label-ent { font-size: 15px; color: var(--n-texte); }
html.mode-appli .n-ecran-entreprise .ligne-case .aide-ent,
html.mode-appli .n-feuille-ent .ligne-case .aide-ent { grid-column: 2; }
html.mode-appli .n-ecran-entreprise .intertitre-ent { margin: 14px 0 10px; font: 700 13px/1.3 var(--n-police); letter-spacing: .08em; text-transform: uppercase; color: var(--n-or); }

/* Logo et couleur, dans leur feuille. */
html.mode-appli .n-feuille-marque #marqueEntreprise { display: block; margin: 0; padding: 0; border: 0; background: transparent; }
html.mode-appli .n-feuille-marque .titre-bloc { display: none; }
html.mode-appli .n-feuille-marque .apercu-logo:empty { display: none; }
html.mode-appli .n-feuille-marque .apercu-logo img { max-width: 180px; max-height: 90px; margin: 0 0 12px; border-radius: 8px; background: #FFFFFF; }
html.mode-appli .n-feuille-marque .actions-logo { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0 0 10px; }
html.mode-appli .n-feuille-marque .aide-ent { display: block; margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--n-texte-3); }
html.mode-appli .n-feuille-marque .ligne-couleur { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font-family: var(--n-police); }
html.mode-appli .n-feuille-marque .label-ent { margin: 0; font-size: 15px; color: var(--n-texte); }
html.mode-appli .n-feuille-marque .ligne-couleur input { flex: none; width: 64px; height: 44px; padding: 2px; border: 1px solid var(--n-trait-fort); border-radius: 10px; background: var(--n-fond); }

/* Pied : « Enregistrer », toujours à portée du pouce. */
html.mode-appli .n-ent-pied {
  position: sticky; bottom: calc(-28px - var(--marge-bas)); margin-top: auto; padding: 12px 0 calc(28px + var(--marge-bas));
  background: linear-gradient(to bottom, rgba(26, 23, 20, 0), var(--n-fond) 30%);
}
html.mode-appli .n-feuille-marque [hidden] { display: none !important; }

/* --- Import de tarifs (tâche 15 : i01, i02, i03, i04, i09 ; appli-import.js) ---------
   Calques plein écran (.n-imp-ecran) posés sur la vue active, sous les feuilles
   (z-index 1000) : I2.1 et les feuilles des écrans montent par-dessus. */
html.mode-appli .n-imp-ecran {
  position: fixed; inset: 0; z-index: 900; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 16px;
  padding: calc(48px + var(--marge-haut)) 20px calc(28px + var(--marge-bas));
  background: var(--n-fond); color: var(--n-texte); font-family: var(--n-police); outline: 0;
}
html.mode-appli.n-imp-ouvert,
html.mode-appli.n-imp-ouvert body { overflow: hidden; }
html.mode-appli .n-imp-ecran h1:focus { outline: 0; }
html.mode-appli .n-imp-jauge { flex: none; height: 6px; border-radius: 3px; background: var(--n-trait); overflow: hidden; }
html.mode-appli .n-imp-jauge > span { display: block; width: 75%; height: 100%; background: var(--n-or); }
html.mode-appli .n-imp-titre { margin: 18px 0 0; font: 800 28px/1.2 var(--n-police); letter-spacing: -.02em; color: var(--n-texte); overflow-wrap: anywhere; }
html.mode-appli .n-imp-texte { margin: 0; font-size: 16px; line-height: 1.55; color: var(--n-texte-2); }
html.mode-appli .n-imp-centre { text-align: center; }
html.mode-appli .n-imp-note { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--n-texte-3); }
html.mode-appli .n-imp-sources { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
html.mode-appli .n-imp-option {
  box-sizing: border-box; width: 100%; min-height: 56px; padding: 14px 16px; border: 0; border-radius: 16px;
  display: flex; align-items: center; gap: 12px; background: var(--n-surface); color: var(--n-texte);
  font-family: var(--n-police); text-align: left;
}
html.mode-appli .n-imp-option svg { flex: none; }
html.mode-appli button.n-imp-option { cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.mode-appli button.n-imp-option:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-imp-option-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.mode-appli .n-imp-option-titre { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
html.mode-appli .n-imp-option-detail { font-size: 13px; line-height: 1.4; color: var(--n-texte-3); overflow-wrap: anywhere; }
html.mode-appli .n-feuille-import .n-imp-sources { margin-top: 0; }
html.mode-appli .n-imp-note-feuille { margin: 0; font-size: 13px; line-height: 1.55; color: var(--n-texte-3); }
html.mode-appli .n-imp-bas { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
/* Bouton à contour des maquettes d'import (16 px, 52 px de haut). Ses libellés
   (« Commencer sans, je dicterai mes prix ») ne tiennent pas sur une ligne à
   360 px ou en texte agrandi : contrairement à .n-bouton-contour, il passe à
   la ligne au lieu de déborder, et grandit avec son libellé. */
html.mode-appli .n-imp-bouton-souple {
  box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px 20px; border-radius: 26px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--n-trait-fort); background: transparent; color: var(--n-texte);
  font: 700 16px/1.3 var(--n-police); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-imp-bouton-souple svg { flex: none; }
html.mode-appli .n-imp-bouton-souple > span { min-width: 0; overflow-wrap: anywhere; }
html.mode-appli .n-imp-bouton-souple:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }

/* En-tête d'I3 et I9 : bouton texte, titre au milieu. */
html.mode-appli .n-imp-tete { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: -4px; }
html.mode-appli .n-imp-tete-bouton {
  flex: none; min-height: 44px; padding: 0; border: 0; background: transparent;
  color: var(--n-texte-2); font: 600 16px/1.2 var(--n-police); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-imp-tete-bouton:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-imp-tete-titre { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
html.mode-appli .n-imp-tete-cale { flex: 0 1 56px; }

html.mode-appli .n-imp-rond {
  flex: none; align-self: center; width: 96px; height: 96px; margin-top: 40px; border-radius: 48px;
  display: flex; align-items: center; justify-content: center;
  background: #2E2720; box-shadow: 0 0 0 10px rgba(217, 178, 111, .10);
}
html.mode-appli .n-imp-rond.n-imp-rond-alerte { width: 80px; height: 80px; margin-top: 36px; border-radius: 40px; background: #3A2A1C; box-shadow: none; }
html.mode-appli .n-imp-rond + .n-imp-titre { margin-top: 20px; font-size: 26px; }
html.mode-appli .n-imp-rond-alerte + .n-imp-titre { margin-top: 14px; font-size: 24px; line-height: 1.25; }

/* Étapes de la lecture (I3). */
html.mode-appli .n-imp-etapes { margin-top: 18px; padding: 8px 18px; border-radius: 20px; background: var(--n-surface); }
html.mode-appli .n-imp-etape { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; }
html.mode-appli .n-imp-pastille {
  flex: none; width: 28px; height: 28px; box-sizing: border-box; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
html.mode-appli .n-imp-pastille svg { display: none; }
html.mode-appli .n-imp-etape-texte { min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--n-texte); overflow-wrap: anywhere; }
html.mode-appli .n-imp-etape[data-etat="faite"] .n-imp-pastille { background: #3A3127; }
html.mode-appli .n-imp-etape[data-etat="faite"] .n-imp-pastille svg { display: block; }
html.mode-appli .n-imp-etape[data-etat="en-cours"] .n-imp-pastille {
  border: 3px solid var(--n-or); border-right-color: transparent; animation: n-tourner 1s linear infinite;
}
html.mode-appli .n-imp-etape[data-etat="attente"] .n-imp-pastille { border: 2px solid var(--n-trait-fort); }
html.mode-appli .n-imp-etape[data-etat="attente"] .n-imp-etape-texte { font-weight: 600; color: var(--n-texte-3); }
html.mode-appli .n-imp-pied { margin: auto 0 0; padding-top: 8px; font-size: 14px; line-height: 1.55; color: var(--n-texte-3); text-align: center; }
html.mode-appli .n-imp-quitter { align-self: center; margin-top: -8px; }
html.mode-appli .n-imp-sorties { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
html.mode-appli .n-imp-souci {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45;
  color: var(--n-danger); background: rgba(240, 162, 138, .10); border: 1px solid rgba(240, 162, 138, .35);
  display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere;
}
html.mode-appli .n-imp-souci p { margin: 0; }

/* I2 : le bloc « Vous avez déjà vos prix ailleurs ? » dans Tarifs. */
html.mode-appli .n-imp-bloc {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 20px;
  background: #2E2720; border: 1px solid var(--n-trait-fort);
}
html.mode-appli .n-imp-bloc-tete { display: flex; align-items: center; gap: 10px; }
html.mode-appli .n-imp-bloc-tete svg { flex: none; }
html.mode-appli .n-imp-bloc-titre { font-size: 17px; font-weight: 800; line-height: 1.3; }
html.mode-appli .n-imp-bloc-texte { margin: 0; font-size: 14px; line-height: 1.55; color: var(--n-texte-2); }

/* Bandeau « Votre grille est lue. Voir l'aperçu », sur l'écran où est l'artisan. */
html.mode-appli .n-imp-bandeau {
  position: fixed; left: 12px; right: 12px; top: calc(8px + var(--marge-haut)); z-index: 950;
  display: flex; align-items: stretch; border-radius: 16px; border: 1px solid var(--n-trait-fort); background: #2E2720;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  animation: n-apparaitre .2s ease-out;
}
/* Croix : le bandeau ne cache plus l'en-tête de l'écran ; le résultat reste
   en mémoire (« Importer ma grille » le rouvre). */
html.mode-appli .n-imp-bandeau-fermer {
  flex: none; position: relative; width: 48px; min-height: 56px; padding: 0; border: 0; border-left: 1px solid var(--n-trait);
  border-radius: 0 16px 16px 0; background: transparent; color: var(--n-texte-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-imp-bandeau-fermer::before,
html.mode-appli .n-imp-bandeau-fermer::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px;
  border-radius: 1px; background: currentColor; transform: rotate(45deg);
}
html.mode-appli .n-imp-bandeau-fermer::after { transform: rotate(-45deg); }
html.mode-appli .n-imp-bandeau-fermer:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: -2px; }
html.mode-appli .n-imp-bandeau-bouton {
  box-sizing: border-box; flex: 1; min-width: 0; min-height: 56px; padding: 12px 12px 12px 16px; border-radius: 16px 0 0 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 6px; row-gap: 2px;
  border: 0; background: transparent; color: var(--n-texte);
  font: 700 15px/1.3 var(--n-police); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-imp-bandeau-bouton:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-imp-bandeau-voir { color: var(--n-or-texte); }
/* --- Import de tarifs (tâche 16 : i05, i06, i07, i14, i08) ---------------------------
   I4 aperçu, I4.1 ligne, I4.2 déjà dans vos tarifs, I4.3 peut-être en double, I5 bilan. */
html.mode-appli h1.n-imp-tete-titre { margin: 0; }
html.mode-appli .n-imp-ecran [hidden],
html.mode-appli .n-imp-annuler-zone[hidden],
html.mode-appli .n-imp-annuler-zone [hidden] { display: none !important; }
html.mode-appli .n-imp-resume {
  flex: none; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: #2E2720;
}
html.mode-appli .n-imp-resume-nombre { font-size: 22px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
html.mode-appli .n-imp-resume-detail { font-size: 14px; line-height: 1.4; color: var(--n-texte-2); overflow-wrap: anywhere; }
html.mode-appli .n-imp-section { display: flex; flex-direction: column; gap: 8px; }
html.mode-appli .n-imp-section .n-rubrique { margin-top: 4px; }
html.mode-appli .n-imp-rubrique-alerte { color: #E8A35C; }
html.mode-appli .n-imp-lignes { display: flex; flex-direction: column; gap: 8px; }
html.mode-appli .n-imp-ligne .n-tf-nom { font-size: 15px; font-weight: 700; }
html.mode-appli .n-imp-ligne .n-tf-note { overflow-wrap: anywhere; }
html.mode-appli .n-imp-ligne-alerte { box-shadow: inset 0 0 0 1.5px #E8A35C; }
html.mode-appli .n-imp-note-alerte,
html.mode-appli .n-imp-prix-alerte { color: #E8A35C; }
html.mode-appli .n-imp-ligne-ecartee .n-tf-nom,
html.mode-appli .n-imp-ligne-ecartee .n-tf-prix { color: var(--n-texte-3); }
html.mode-appli .n-imp-ligne:focus-visible,
html.mode-appli .n-imp-tuile:focus-visible,
html.mode-appli .n-imp-choix:focus-visible,
html.mode-appli .n-imp-micro:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-imp-pied-notes { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
html.mode-appli .n-imp-pied-notes,
html.mode-appli .n-imp-pied-notes p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--n-texte-3); text-align: center; }
html.mode-appli .n-imp-pied-notes:empty { display: none; }
html.mode-appli .n-imp-pied-notes.n-imp-pied-gauche { text-align: left; }
html.mode-appli .n-imp-info { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-or-texte); }
/* Bouton principal collé en bas de l'écran (liste longue), au-dessus de la zone sûre. */
html.mode-appli .n-imp-collant {
  position: sticky; bottom: calc(-28px - var(--marge-bas)); z-index: 2; flex: none;
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 -20px calc(-28px - var(--marge-bas)); padding: 12px 20px calc(28px + var(--marge-bas));
  background: linear-gradient(to bottom, rgba(26, 23, 20, 0), var(--n-fond) 18px);
}
/* Notes juste au-dessus du bouton ; sans notes, le bouton descend seul. */
html.mode-appli .n-imp-pied-notes:empty + .n-imp-collant,
html.mode-appli .n-imp-cartes + .n-imp-collant { margin-top: auto; }

/* I4.1 : ce qui a été lu, puis les champs. */
html.mode-appli .n-imp-lu {
  flex: none; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px;
  background: #2E2720; border: 1px dashed var(--n-trait-fort);
}
html.mode-appli .n-imp-lu-titre { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n-texte-3); }
html.mode-appli .n-imp-lu-texte { font: 15px/1.45 ui-monospace, Consolas, monospace; color: #E7E0D5; overflow-wrap: anywhere; }
html.mode-appli .n-imp-champ { font-weight: 700; color: var(--n-texte-3); }
html.mode-appli .n-imp-champ .n-champ { height: 52px; border-radius: 14px; background: var(--n-surface); font-weight: 600; }
html.mode-appli .n-imp-champ-alerte { color: #E8A35C; }
html.mode-appli .n-imp-champ-alerte .n-champ { border: 1.5px solid #E8A35C; }
html.mode-appli .n-imp-champ-ligne { display: flex; gap: 6px; min-width: 0; }
html.mode-appli .n-imp-champ-ligne .n-champ { flex: 1; }
html.mode-appli .n-imp-micro {
  flex: none; width: 48px; min-height: 52px; padding: 0; border-radius: 14px; border: 1px solid var(--n-trait-fort);
  background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
html.mode-appli .n-imp-explication { margin: 0; font-size: 14px; line-height: 1.55; color: var(--n-texte-3); }
html.mode-appli .n-imp-texte-court { font-size: 15px; color: var(--n-texte-2); }

/* I4.2, I4.3 : cartes à deux cases. */
html.mode-appli .n-imp-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
html.mode-appli .n-imp-cartes { display: flex; flex-direction: column; gap: 10px; }
html.mode-appli .n-imp-carte { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--n-surface); }
html.mode-appli .n-imp-carte-nom { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
html.mode-appli .n-imp-tuile {
  box-sizing: border-box; min-width: 0; min-height: 44px; padding: 10px; border-radius: 12px; border: 1px solid var(--n-trait-fort);
  display: block; background: transparent; color: var(--n-texte);
  font-family: var(--n-police); text-align: left;
}
/* Colonne en blocs, hauteur propre : un bouton étiré par la grille garde sous WebKit la hauteur
   de sa première mise en page quand le texte grossit, et le contenu déborde de 6 px. */
html.mode-appli .n-imp-duo > .n-imp-tuile { align-self: start; }
html.mode-appli .n-imp-tuile > span { display: block; }
html.mode-appli .n-imp-tuile > span + span { margin-top: 3px; }
html.mode-appli button.n-imp-tuile { cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.mode-appli button.n-imp-tuile[aria-pressed="true"] { background: #3A3127; border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--n-or); }
html.mode-appli .n-imp-tuile-libelle { font-size: 12px; line-height: 1.3; color: var(--n-texte-3); overflow-wrap: anywhere; }
html.mode-appli .n-imp-tuile-nom { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
html.mode-appli .n-imp-tuile-prix { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--n-texte); overflow-wrap: anywhere; }
html.mode-appli .n-imp-carte .n-imp-tuile-nom + .n-imp-tuile-prix { font-size: 14px; color: var(--n-or); }
html.mode-appli button.n-imp-tuile[aria-pressed="true"] .n-imp-tuile-prix { color: var(--n-or); }
html.mode-appli .n-imp-tuile-unite { font-weight: 600; color: var(--n-texte-3); }
html.mode-appli .n-imp-choix {
  box-sizing: border-box; min-width: 0; min-height: 44px; padding: 6px 10px; border-radius: 22px; border: 1px solid var(--n-trait-fort);
  background: transparent; color: var(--n-texte); font: 700 14px/1.25 var(--n-police); text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; overflow-wrap: anywhere;
}
html.mode-appli .n-imp-choix > span { min-width: 0; }
html.mode-appli .n-imp-choix[aria-pressed="true"] { background: #3A3127; border-color: var(--n-or); }
html.mode-appli .n-imp-question { margin: 0; font-size: 13px; font-weight: 700; color: var(--n-texte-3); }

/* I5 : bilan. */
html.mode-appli .n-imp-rond.n-imp-rond-fin { width: 88px; height: 88px; margin-top: 56px; border-radius: 44px; background: #3A3127; box-shadow: none; }
html.mode-appli .n-imp-bilans { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
html.mode-appli .n-imp-bilan {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--n-surface);
}
html.mode-appli .n-imp-bilan-libelle { min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
html.mode-appli .n-imp-bilan-valeur { flex: none; font-size: 16px; font-weight: 800; color: var(--n-or); }
html.mode-appli .n-imp-bilan-valeur.n-imp-discret { color: var(--n-texte-3); }
html.mode-appli .n-imp-avis {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px;
  color: #E8A35C; background: rgba(232, 163, 92, .10); border: 1px solid rgba(232, 163, 92, .35);
}
html.mode-appli .n-imp-avis p { margin: 0; font-size: 15px; line-height: 1.45; }
html.mode-appli .n-imp-lien-discret { align-self: center; color: var(--n-texte-2); text-decoration: underline; }
html.mode-appli .n-imp-annuler-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; }
html.mode-appli .n-imp-annuler-zone .n-tf-souci:empty { display: none; }

/* 9.2 Dicter des tarifs (tâche 17) : couleurs de p09-2-dicter. */
html.mode-appli .n-imp-exemple { flex: none; margin: 0; padding: 16px; border-radius: 18px; background: var(--n-surface); font-size: 15px; line-height: 1.6; color: var(--n-texte-2); overflow-wrap: anywhere; }
html.mode-appli .n-imp-dictee-rubrique { margin: 6px 0 0; }
html.mode-appli .n-imp-dictee-liste { display: flex; flex-direction: column; gap: 8px; }
html.mode-appli .n-imp-dictee-ligne { min-height: 0; padding: 13px 16px; }
html.mode-appli .n-imp-dictee-ligne .n-tf-nom { font-size: 15px; font-weight: 700; }
html.mode-appli .n-imp-dictee-bas { margin-top: auto; padding-top: 8px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
html.mode-appli .n-imp-dictee-micro {
  width: 64px; height: 64px; padding: 0; border: 0; border-radius: 32px; background: #3A3127;
  box-shadow: 0 0 0 6px rgba(217, 178, 111, .12); display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-imp-dictee-micro.enregistre { background: var(--n-or); box-shadow: 0 0 0 8px rgba(217, 178, 111, .28); }
html.mode-appli .n-imp-dictee-micro.enregistre svg { stroke: #1A1714; }
html.mode-appli .n-imp-dictee-micro:disabled { opacity: .6; cursor: default; }
html.mode-appli .n-imp-dictee-micro:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 4px; }
html.mode-appli .n-imp-dictee-etat { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-texte-2); overflow-wrap: anywhere; }
html.mode-appli .n-imp-dictee-bas .n-bouton { min-width: 0; }
html.mode-appli #btnDicterTarifs { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
html.mode-appli #btnDicterTarifs svg { flex: none; stroke: #1A1714; }

@media (prefers-reduced-motion: reduce) {
  html.mode-appli .n-imp-etape[data-etat="en-cours"] .n-imp-pastille,
  html.mode-appli .n-imp-bandeau { animation: none; }
}

/* Numérotation de vos devis (R11) : le numéro de l'aperçu ne se coupe pas. */
html.mode-appli #numApercuNumero { white-space: nowrap; }

/* Import de clients (tâche 20) : I6.0, I6, I6.1, couleurs des maquettes i10 à i12. */
html.mode-appli .n-cl-import { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
html.mode-appli .n-imp-note-or { color: var(--n-or); }
html.mode-appli .n-imp-ligne-client { min-height: 44px; }
html.mode-appli .n-imp-client-fiche { display: flex; flex-direction: column; gap: 10px; }
html.mode-appli .n-imp-client-ligne { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
html.mode-appli .n-imp-client-libelle { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n-texte-3); }
html.mode-appli .n-imp-client-valeur { color: var(--n-texte); }
html.mode-appli .n-imp-exemple-dictee {
  margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--n-surface);
  display: flex; gap: 12px; align-items: center;
}
html.mode-appli .n-imp-exemple-micro {
  flex: none; width: 44px; height: 44px; border-radius: 22px; background: #3A3127;
  display: flex; align-items: center; justify-content: center;
}
html.mode-appli .n-imp-exemple-texte { min-width: 0; font-size: 15px; line-height: 1.5; color: #E7E0D5; overflow-wrap: anywhere; }
html.mode-appli .n-imp-suite { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--n-surface); }
html.mode-appli .n-imp-suite-texte { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
html.mode-appli .n-imp-suite-note { margin: 0; font-size: 13px; line-height: 1.5; color: #E8A35C; overflow-wrap: anywhere; }
html.mode-appli .n-imp-suite .n-tf-souci:empty { display: none; }

/* I6.0.1 : contacts du téléphone (tâche 21, maquette i13-contacts-choix). */
html.mode-appli .n-imp-recherche {
  flex: none; height: 48px; border-radius: 24px; background: var(--n-surface); border: 1px solid #3A332C;
}
html.mode-appli .n-imp-recherche:focus-within { border-color: var(--n-or); }
html.mode-appli .n-imp-recherche svg { flex: none; }
/* Le cadre est celui de la pilule : pas de halo ni de marge du champ web (app.css). */
html.mode-appli .n-imp-recherche .n-recherche-champ { padding: 0; border-radius: 0; box-shadow: none; }
html.mode-appli .n-imp-ecran .n-imp-explication { font-size: 13px; color: #B5ADA2; }
html.mode-appli .n-ligne-case.n-imp-contact { gap: 12px; min-height: 56px; padding: 12px 14px; background: var(--n-surface); }
html.mode-appli .n-imp-contact-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.mode-appli .n-imp-contact-nom { font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
html.mode-appli .n-imp-contact-detail { font-size: 13px; line-height: 1.4; color: #B5ADA2; overflow-wrap: anywhere; }
html.mode-appli .n-imp-contact-detail.n-imp-note-alerte { color: #E8A35C; }
html.mode-appli .n-imp-contact input.n-case:not(:checked) { border-color: #5A4F43; }
html.mode-appli .n-imp-contact input.n-case:disabled { opacity: .45; cursor: default; }
html.mode-appli .n-imp-contact-sans-nom { cursor: default; }

/* --- Pays de l'entreprise (écran C1) et point d'entrée de l'identité ivoirienne (C2) ---- */
/* Plein écran, comme l'écran « Entreprise au premier lancement » ci-dessus. */
html.mode-appli #vuePays.n-pays.active,
html.mode-appli #vueIdentiteCi.n-pays.active,
html.mode-appli #vueEntrepriseCi.n-pays.active {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; animation: none;
  display: flex; flex-direction: column; box-sizing: border-box;
  padding: calc(48px + var(--marge-haut)) 24px calc(32px + var(--marge-bas));
  background: radial-gradient(circle at 90% 8%, rgba(217, 178, 111, .14), transparent 40%), var(--n-fond);
  color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli .n-pays .n-etape { flex: 1 0 auto; display: flex; flex-direction: column; gap: 16px; }
html.mode-appli .n-pays .n-bas { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
html.mode-appli .n-pays .n-sur-titre {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--n-or);
}
html.mode-appli .n-pays .n-titre { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; font-weight: 800; color: var(--n-texte); }
html.mode-appli .n-pays .n-texte { margin: 0; font-size: 15px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli .n-choix-pays { display: flex; flex-direction: column; gap: 12px; }
html.mode-appli .n-choix {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px; border-radius: 18px; text-align: left;
  border: 1.5px solid transparent; background: var(--n-surface); color: var(--n-texte); font-family: var(--n-police);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-choix[aria-checked="true"] { border-color: var(--n-or); }
html.mode-appli .n-choix:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-choix-rond {
  flex: none; width: 22px; height: 22px; margin-top: 1px; box-sizing: border-box; border-radius: 11px;
  border: 2px solid var(--n-trait-fort);
}
html.mode-appli .n-choix[aria-checked="true"] .n-choix-rond { border-color: var(--n-or); background: radial-gradient(circle, var(--n-or) 0 4px, transparent 5px); }
html.mode-appli .n-choix-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html.mode-appli .n-choix-nom { font-size: 18px; font-weight: 800; }
html.mode-appli .n-choix-aide { font-size: 14px; line-height: 1.45; color: var(--n-texte-2); }
html.mode-appli .n-choix-pastille {
  align-self: flex-start; margin-top: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; color: var(--n-or-texte); background: rgba(217, 178, 111, .14);
}
html.mode-appli .n-note-verrou {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #2E2720;
}
html.mode-appli .n-note-verrou svg { flex: none; margin-top: 2px; }
html.mode-appli .n-note-verrou p { margin: 0; font-size: 14px; line-height: 1.5; color: #E7E0D5; }
html.mode-appli #vuePays .n-zone-souci:empty,
html.mode-appli #vuePays .n-zone-souci:has(> #soucisPays:empty),
html.mode-appli #vuePays #soucisPays:empty { display: none; }
html.mode-appli #vuePays #soucisPays .souci {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45; text-align: left;
  color: var(--n-danger); background: rgba(240, 162, 138, .10); border: 1px solid rgba(240, 162, 138, .35);
}
html.mode-appli #vuePays [hidden] { display: none; }

/* --- Identité ivoirienne (C2, C3) et Mon entreprise (C4) ---------------------------------- */
html.mode-appli #vueIdentiteCi .n-champ-bloc,
html.mode-appli #vueEntrepriseCi .n-champ-bloc { font-size: 14px; color: var(--n-texte-2); }
html.mode-appli #vueIdentiteCi .n-champ-bloc[hidden],
html.mode-appli #vueIdentiteCi [hidden],
html.mode-appli #vueEntrepriseCi [hidden] { display: none; }
html.mode-appli .n-pays select.n-champ { appearance: none; -webkit-appearance: none; }
html.mode-appli .n-facultatif { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--n-texte-3); }
html.mode-appli .n-tel { display: flex; align-items: stretch; gap: 8px; }
html.mode-appli .n-tel-prefixe {
  flex: none; display: flex; align-items: center; padding: 0 14px; border-radius: 12px; border: 1px solid var(--n-trait-fort);
  background: var(--n-surface); color: var(--n-texte); font: 700 16px/1 var(--n-police);
}
html.mode-appli .n-avert { margin: 0; font-size: 13px; line-height: 1.45; color: var(--n-or-texte); }
html.mode-appli .n-avert:empty { display: none; }
html.mode-appli .n-aide-ci { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli .n-bascules { display: flex; flex-wrap: wrap; gap: 8px; }
html.mode-appli .n-bascule {
  min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--n-trait-fort); background: transparent;
  color: var(--n-texte); font: 600 15px/1.2 var(--n-police); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-bascule[aria-pressed="true"] { background: var(--n-or); border-color: var(--n-or); color: var(--n-fond); font-weight: 700; }
html.mode-appli .n-bascule:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli #vueIdentiteCi #soucisIdentiteCi:empty,
html.mode-appli #vueEntrepriseCi #soucisEntrepriseCi:empty,
html.mode-appli #vueIdentiteCi .n-zone-souci:has(> :empty),
html.mode-appli #vueEntrepriseCi .n-zone-souci:has(> :empty) { display: none; }
html.mode-appli #vueIdentiteCi .souci,
html.mode-appli #vueEntrepriseCi .souci {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45; text-align: left;
  color: var(--n-danger); background: rgba(240, 162, 138, .10); border: 1px solid rgba(240, 162, 138, .35);
}
html.mode-appli .n-entete-ci { display: flex; align-items: center; gap: 8px; }
html.mode-appli .n-entete-ci .n-retour { flex: none; margin-left: -10px; }
html.mode-appli .n-sous-titre-ci { margin: 12px 0 0; font-size: 18px; font-weight: 800; color: var(--n-texte); }
html.mode-appli .n-groupe-ci { margin: 8px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--n-or); }
html.mode-appli .n-cases-ci { display: flex; flex-direction: column; gap: 8px; }
html.mode-appli .n-fixe-ci { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--n-surface); }
html.mode-appli .n-ligne-lecture { display: flex; flex-direction: column; gap: 3px; }
html.mode-appli .n-ligne-lecture-libelle { font-size: 13px; color: var(--n-texte-3); }
html.mode-appli .n-ligne-lecture-valeur { font-size: 16px; color: var(--n-texte); }
html.mode-appli .n-pastille-ci {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--n-or-texte); background: rgba(217, 178, 111, .14);
}
html.mode-appli .n-avert.n-avert-erreur { color: var(--n-danger); }

/* ============================================================================
   Signature sur place (tâche 15e) : S1 (carte de l'écran 7), S2 à S4 (écrans
   que l'artisan tend à son client, public/appli-signature.js) et S5 (fiche d'un
   devis de Mes devis). Maquettes : docs/idees/captures-signature/.
   ========================================================================== */

/* S1 : la carte de l'écran 7, au-dessus des envois. */
html.mode-appli #envoiAppli .n-pret-signature {
  padding: 16px; gap: 12px; border: 1px solid var(--n-trait-fort); background: var(--n-surface);
}
/* « Faire signer maintenant » avec son icône tient sur UNE ligne jusqu'à 360 px de large, texte agrandi à 130 % (contrôle de mise en page). */
html.mode-appli .n-bouton-signer { padding: 0 12px; gap: 8px; font-size: 16px; }
html.mode-appli #envoiAppli .n-pret-signature .n-bouton-signer { padding: 0 10px; font-size: 15px; }
html.mode-appli #envoiAppli .n-pret-signature[hidden] { display: none; }
html.mode-appli #envoiAppli .n-pret-signature-titre { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
html.mode-appli #envoiAppli .n-pret-signature-texte { margin: 0 0 4px; font-size: 16px; line-height: 1.5; color: var(--n-texte-2); }

/* S2, S3, S4 : plein écran posé sur la vue d'où l'on vient (la connexion, si la session expire, la cache avec elle). */
html.mode-appli .n-signature { position: fixed; inset: 0; z-index: 40; background: var(--n-fond); color: var(--n-texte); font-family: var(--n-police); }
html.mode-appli .n-sig-ecran {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 16px;
  padding: calc(14px + var(--marge-haut)) 20px 0;
  background: var(--n-fond);
}
html.mode-appli .n-sig-ecran[hidden] { display: none; }
/* Dans une colonne qui défile, rien ne s'écrase : la zone de tracé et les champs gardent leur hauteur. */
html.mode-appli .n-sig-ecran > * { flex-shrink: 0; }
html.mode-appli .n-sig-ecran-signe { background: radial-gradient(circle at 50% 14%, rgba(217, 178, 111, .22), transparent 40%), var(--n-fond); }
html.mode-appli .n-sig-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
html.mode-appli .n-sig-retour { width: auto; padding-right: 12px; gap: 10px; font: 600 16px/1.2 var(--n-police); color: var(--n-texte-2); }
html.mode-appli .n-sig-etape { flex: none; font-size: 14px; color: var(--n-texte-3); }
html.mode-appli .n-sig-intro { display: flex; flex-direction: column; gap: 6px; }
html.mode-appli .n-sig-surtitre { margin: 0; font-size: 15px; line-height: 1.4; color: var(--n-texte-2); overflow-wrap: anywhere; }
html.mode-appli .n-sig-titre { margin: 0; font: 800 28px/1.15 var(--n-police); letter-spacing: -.01em; color: var(--n-texte); outline: 0; overflow-wrap: anywhere; }
html.mode-appli .n-sig-sous { margin: 0; font-size: 15px; line-height: 1.4; color: var(--n-texte-2); overflow-wrap: anywhere; }
/* Le bas de l'écran (bouton principal) reste visible quand le contenu défile. */
html.mode-appli .n-sig-bas {
  position: sticky; bottom: 0; z-index: 2; margin-top: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 22px 0 calc(24px + var(--marge-bas)); background: linear-gradient(to top, var(--n-fond) 70%, rgba(26, 23, 20, 0));
}
html.mode-appli .n-sig-ecran-signe .n-sig-bas { background: none; }
html.mode-appli .n-sig-ecran .n-tf-souci { text-align: left; }

/* Libellés longs (« Continuer vers la signature », « Envoyer sa copie au client ») sur une ligne, texte agrandi compris. */
html.mode-appli .n-sig-ecran .n-bouton,
html.mode-appli .n-sig-ecran .n-bouton-contour { padding: 0 16px; font-size: 16px; }

/* S2 : le devis lu, sur papier clair. */
html.mode-appli .n-sig-doc { padding: 6px 18px 12px; border-radius: 22px; background: #FFFFFF; color: #1C1A17; }
html.mode-appli .n-sig-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid #E6DED2; font-size: 16px; line-height: 1.35; }
html.mode-appli .n-sig-ligne-nom { flex: 1; min-width: 0; overflow-wrap: anywhere; }
html.mode-appli .n-sig-ligne-prix { flex: none; font-weight: 800; white-space: nowrap; }
html.mode-appli .n-sig-ligne-fine { color: #5A4F43; }
html.mode-appli .n-sig-ligne-fine .n-sig-ligne-prix { font-weight: 500; }
html.mode-appli .n-sig-total { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-top: 16px; font-size: 22px; font-weight: 800; }
html.mode-appli .n-sig-total-prix { color: #0F766E; white-space: nowrap; }
html.mode-appli .n-sig-encadre { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 18px; background: var(--n-surface); }
html.mode-appli .n-sig-encadre svg { flex: none; margin-top: 1px; color: var(--n-or); }
html.mode-appli .n-sig-encadre p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--n-texte); }

/* S1 : l'artisan valide, avant de tendre le téléphone (même papier clair que S2). */
html.mode-appli .n-sig-resume { padding: 4px 18px 14px; }
html.mode-appli .n-sig-resume p { margin: 12px 0 0; font-size: 18px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
html.mode-appli .n-sig-resume p.n-sig-sous { font-weight: 500; font-size: 16px; color: #5A4F43; }

/* S3 : nom, tracé, choix du client. */
html.mode-appli .n-sig-etiquette { font: 700 16px/1.3 var(--n-police); color: var(--n-or-texte); }
html.mode-appli .n-sig-nom { height: 54px; padding: 0 16px; border-radius: 14px; background: var(--n-surface); font-size: 18px; }
html.mode-appli .n-sig-rangee { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: -8px; }
html.mode-appli .n-sig-effacer { margin-right: -8px; font-size: 16px; font-weight: 700; }
html.mode-appli .n-sig-zone { position: relative; border-radius: 28px; background: #F5F1EA; overflow: hidden; -webkit-user-select: none; user-select: none; }
html.mode-appli .n-sig-canvas { display: block; width: 100%; height: max(160px, min(220px, 28vh)); touch-action: none; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
html.mode-appli .n-sig-ligne-base { position: absolute; left: 20px; right: 20px; bottom: 26px; border-top: 1.5px dashed #BDB3A5; pointer-events: none; }
html.mode-appli .n-sig-choix { display: flex; align-items: flex-start; gap: 14px; }
html.mode-appli .n-sig-choix label { flex: 1; min-width: 0; padding-top: 9px; font-size: 16px; line-height: 1.5; color: var(--n-texte); cursor: pointer; }
html.mode-appli .n-sig-case {
  -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box; display: grid; place-content: center;
  width: 44px; height: 44px; margin: 0; border-radius: 12px; border: 2px solid var(--n-trait-fort); background: var(--n-surface); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.mode-appli .n-sig-case:checked { background: var(--n-or); border-color: var(--n-or); }
html.mode-appli .n-sig-case:checked::after {
  content: ''; width: 11px; height: 21px; margin-top: -3px; border: solid var(--n-fond); border-width: 0 4px 4px 0; transform: rotate(45deg);
}
html.mode-appli .n-sig-case:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-sig-aide { margin: 0; font-size: 15px; line-height: 1.5; color: var(--n-texte-3); }

/* S4 : devis signé. */
html.mode-appli .n-sig-haut { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 14px; text-align: center; }
html.mode-appli .n-sig-rond { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; background: var(--n-or); color: var(--n-fond); }
html.mode-appli .n-sig-titre-centre { margin-top: 8px; text-align: center; }
html.mode-appli .n-sig-sous-centre { text-align: center; }
html.mode-appli .n-sig-cartes { padding: 16px 18px; gap: 14px; }
html.mode-appli .n-sig-info { display: flex; align-items: flex-start; gap: 14px; }
html.mode-appli .n-sig-info svg { flex: none; margin-top: 1px; color: var(--n-or); }
html.mode-appli .n-sig-info p { margin: 0; font-size: 16px; line-height: 1.5; color: #E7E0D5; }
html.mode-appli .n-sig-papier-info { padding: 16px 18px; border-radius: 18px; background: var(--n-surface); }
html.mode-appli .n-sig-etat { margin: -4px 0 0; text-align: center; font-size: 14px; line-height: 1.45; color: var(--n-or-texte); }
html.mode-appli .n-sig-etat:empty { display: none; }

/* S5 : la fiche d'un devis signé, et ses versions signées plus anciennes. */
html.mode-appli .n-ud-signe { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
html.mode-appli .n-ud-signe[hidden] { display: none; }
html.mode-appli .n-ud-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: #3A3228; color: var(--n-or-texte); font: 700 14px/1.3 var(--n-police);
}
html.mode-appli .n-ud-dates { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli .n-ud-versions { display: flex; flex-direction: column; gap: 8px; }
html.mode-appli .n-ud-versions[hidden] { display: none; }
html.mode-appli .n-ud-version { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--n-surface); }
html.mode-appli .n-ud-version-texte { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--n-texte-2); overflow-wrap: anywhere; }
html.mode-appli .n-ud-ouvrir { flex: none; width: auto; min-height: 44px; padding: 0 18px; border-radius: 22px; font-size: 15px; }

/* --- Points à régler (page de vérification, tâche 12) ----------------------
   Deux niveaux, deux couleurs : orange vif = le PDF ne peut pas être créé ;
   jaune ambré = à vérifier, le PDF reste possible (maquettes v4, écrans 1 à P8).
   appli-devis.js : cartes marquées, pastille au-dessus de la barre, feuille des
   points et fiches P5 à P8. */
html.mode-appli {
  --n-bloque: #FF8A5C;
  --n-bloque-fond: rgba(255, 138, 92, .14);
  --n-bloque-trait: rgba(255, 138, 92, .7);
  --n-ambre: #F0C36A;
  --n-ambre-fond: rgba(240, 195, 106, .11);
  --n-ambre-trait: rgba(240, 195, 106, .5);
}
/* Les bandeaux du web (prix manquant, montant dit absent, dictée coupée, remise, raison du PDF) : l'appli les dit par
   les points. Les éléments restent dans la page : app.js continue de les remplir et de les lire. */
html.mode-appli #vueResultat #avisOuvert,
html.mode-appli #vueResultat #avisMontants,
html.mode-appli #vueResultat #avisDictee,
html.mode-appli #vueResultat #raisonPdf { display: none !important; }

/* Pastille : dans la barre basse (elle la suit), au-dessus d'elle, à gauche. 44 px de haut au moins. */
html.mode-appli #vueResultat.n-devis .n-pastille {
  position: absolute; left: 20px; bottom: 100%; margin-bottom: 12px; z-index: 1;
  box-sizing: border-box; min-height: 44px; max-width: calc(100% - 40px); padding: 0 16px; border: 0; border-radius: 99px;
  font: 800 14px/1.2 var(--n-police); color: #1A1714; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
html.mode-appli #vueResultat.n-devis .n-pastille[hidden] { display: none; }
html.mode-appli #vueResultat.n-devis .n-pastille-bloquant { background: var(--n-bloque); }
html.mode-appli #vueResultat.n-devis .n-pastille-verifier { background: var(--n-ambre); }
html.mode-appli #vueResultat.n-devis .n-pastille:focus-visible { outline: 2px solid var(--n-texte); outline-offset: 2px; }
/* Marge basse : le dernier élément de la page passe au-dessus de la pastille (44 px + 12 px d'écart + 16 px d'air).
   Aucun élément flottant ne cache du contenu ; valeur de départ : appli-devis.js la remplace par la hauteur
   mesurée de la rangée des flottants (pastille et « Corriger à la voix », tâche 16) + 28 px. */
html.mode-appli #vueResultat.n-devis .n-fin-devis { height: 80px; }

/* Cartes marquées. */
html.mode-appli #vueResultat.n-devis .n-manque-bloquant { border: 1.5px solid var(--n-bloque-trait); background: var(--n-bloque-fond); }
html.mode-appli #vueResultat.n-devis .n-manque-verifier { border: 1.5px solid var(--n-ambre-trait); }
html.mode-appli #vueResultat.n-devis .n-presta.n-estimee.n-manque-bloquant { border: 1.5px solid var(--n-bloque-trait); background: var(--n-bloque-fond); }
html.mode-appli #vueResultat.n-devis .n-presta.n-estimee.n-manque-bloquant .n-presta-detail { color: var(--n-bloque); }
html.mode-appli #vueResultat.n-devis .n-prix-manque { color: var(--n-ambre); }
html.mode-appli #vueResultat.n-devis .n-presta-manque { font-size: 13px; font-weight: 700; color: var(--n-ambre); }
html.mode-appli #vueResultat.n-devis .n-carte-client.n-manque-bloquant .n-client-nom { color: var(--n-bloque); }
html.mode-appli #vueResultat.n-devis .n-carte-client.n-manque-bloquant .n-client-ligne { color: var(--n-texte-2); }
html.mode-appli #vueResultat.n-devis .n-client-choisir {
  box-sizing: border-box; min-height: 44px; display: flex; align-items: center; padding: 0 16px; border-radius: 99px;
  background: var(--n-bloque); color: #1A1714; font-weight: 800;
}
/* Rangée « Adresse du chantier » inconnue : jaune, avec « Ajouter ». */
html.mode-appli #vueResultat.n-devis .n-ligne.n-manque-verifier { background: var(--n-ambre-fond); border-radius: 14px; border-bottom: 1.5px solid var(--n-ambre-trait); }
html.mode-appli #vueResultat.n-devis .n-ligne.n-manque-verifier .n-ligne-libelle { color: var(--n-ambre); font-weight: 700; }
html.mode-appli #vueResultat.n-devis .n-ligne.n-manque-verifier .n-ligne-valeur { color: var(--n-texte-2); font-weight: 500; font-size: 13px; }
html.mode-appli #vueResultat.n-devis .n-ligne.n-manque-verifier::after { display: none; }
html.mode-appli #vueResultat.n-devis .n-ligne-action { grid-column: 2; grid-row: 1 / span 2; font-size: 14px; font-weight: 800; color: var(--n-ambre); }

/* Feuille des points (écran P). */
html.mode-appli .n-points { display: flex; flex-direction: column; }
html.mode-appli .n-points .n-points-sous { margin: 0 0 6px; font-size: 14px; color: var(--n-texte-3); }
html.mode-appli .n-point { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--n-trait); }
html.mode-appli .n-point:first-of-type { border-top: 0; }
html.mode-appli .n-point-pastille { flex: none; width: 12px; height: 12px; border-radius: 50%; }
html.mode-appli .n-point-bloquant { background: var(--n-bloque); }
html.mode-appli .n-point-verifier { background: var(--n-ambre); }
html.mode-appli .n-point-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.mode-appli .n-point-titre { font-size: 15px; font-weight: 700; color: var(--n-texte); }
html.mode-appli .n-point-raison {
  font-size: 13px; line-height: 1.35; color: var(--n-texte-3); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.mode-appli .n-point-action {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; background: transparent; cursor: pointer;
  font: 800 14px/1.2 var(--n-police); white-space: nowrap;
}
html.mode-appli .n-point-action-bloquant { color: var(--n-bloque); }
html.mode-appli .n-point-action-verifier { color: var(--n-ambre); }
html.mode-appli .n-point-action:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; border-radius: 8px; }

/* Fiches P5 (placer un montant), P6 (confirmer une estimation) et P8 (dictée coupée). */
html.mode-appli .n-placer, html.mode-appli .n-estimation, html.mode-appli .n-dictee-coupee { display: flex; flex-direction: column; gap: 12px; }
html.mode-appli .n-placer .n-texte-feuille, html.mode-appli .n-estimation .n-texte-feuille,
html.mode-appli .n-dictee-coupee .n-texte-feuille { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli .n-choix-liste { display: flex; flex-direction: column; gap: 8px; }
html.mode-appli .n-choix-ligne {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 1px solid var(--n-trait-fort); border-radius: 12px; background: transparent; color: var(--n-texte);
  font: 500 14px/1.35 var(--n-police); text-align: left; cursor: pointer;
}
html.mode-appli .n-choix-ligne[aria-pressed="true"] { border-color: var(--n-or); background: rgba(217, 178, 111, .08); }
/* Le nom passe à la ligne entre les mots (jamais au milieu d'un mot : « Remplacemen / t robinet ») ; le montant garde ses chiffres ensemble. */
html.mode-appli .n-choix-nom {
  flex: 1 1 auto; min-width: 0; font: 500 14px/1.35 var(--n-police); overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html.mode-appli .n-choix-montant { flex: none; max-width: 60%; font: 700 14px/1.35 var(--n-police); white-space: normal; text-align: right; }
html.mode-appli .n-choix-ligne:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-lien-feuille {
  min-height: 44px; border: 0; background: transparent; color: var(--n-or-texte); font: 700 14px/1.2 var(--n-police); cursor: pointer;
}
html.mode-appli .n-feuille-placer .n-feuille-actions,
html.mode-appli .n-feuille-estimation .n-feuille-actions,
html.mode-appli .n-feuille-dictee-coupee .n-feuille-actions { flex-direction: row; }
html.mode-appli .n-feuille-placer .n-feuille-actions > *,
html.mode-appli .n-feuille-estimation .n-feuille-actions > *,
html.mode-appli .n-feuille-dictee-coupee .n-feuille-actions > * { flex: 1; }
/* P8 : la fin de ce qui a été entendu. */
html.mode-appli .n-citation {
  margin: 0; padding: 6px 10px; border-left: 3px solid var(--n-or); font: italic 500 14px/1.5 var(--n-police); color: var(--n-texte);
  overflow-wrap: anywhere;
}
/* 1d : « Chez le client » / « Une autre adresse ». */
html.mode-appli .n-option-adresse {
  box-sizing: border-box; width: 100%; padding: 12px; display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 1.5px solid var(--n-trait-fort); border-radius: 14px; background: transparent; color: var(--n-texte);
  font: 500 14px/1.4 var(--n-police); cursor: pointer;
}
html.mode-appli .n-option-adresse[aria-pressed="true"] { border-color: var(--n-or); background: rgba(217, 178, 111, .08); }
html.mode-appli .n-option-adresse small { font-size: 13px; color: var(--n-texte-3); overflow-wrap: anywhere; }
html.mode-appli .n-option-autre { cursor: default; }

/* --- « Corriger à la voix » (page de vérification, tâche 16) ----------------
   appli-corriger.js (écrans 3a, 3b, 4) et appli-devis.js (bouton magnétique,
   marques de l'écran 5). Maquettes v4. Vert : modifié ou ajouté ; rouge :
   retiré ; bleu : déplacé ; jaune ambré : à préciser ou sans prix. */
html.mode-appli {
  --n-vert: #8FD19E;
  --n-vert-fond: rgba(143, 209, 158, .11);
  --n-vert-trait: rgba(143, 209, 158, .55);
  --n-bleu: #9EC3F0;
  --n-bleu-fond: rgba(158, 195, 240, .11);
  --n-bleu-trait: rgba(158, 195, 240, .5);
  --n-rouge: #F0A28A;
  --n-rouge-fond: rgba(240, 162, 138, .12);
  --n-rouge-trait: rgba(240, 162, 138, .5);
}

/* Les flottants au-dessus de la barre : la pastille à gauche, le bouton magnétique à droite, sur une même rangée qui
   partage la largeur (chacun se replie sur deux lignes plutôt que de chevaucher l'autre). */
html.mode-appli #vueResultat.n-devis .n-flottants {
  position: absolute; left: 20px; right: 20px; bottom: 100%; margin-bottom: 12px; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; pointer-events: none;
}
html.mode-appli #vueResultat.n-devis .n-flottants > * { pointer-events: auto; }
html.mode-appli #vueResultat.n-devis .n-flottants .n-pastille {
  position: static; margin: 0; flex: 0 1 auto; min-width: 0; max-width: none; padding: 6px 16px;
  white-space: normal; text-align: left; line-height: 1.2;
}
html.mode-appli #vueResultat.n-devis .n-bouton-magnetique {
  flex: 0 1 auto; min-width: 0; margin-left: auto; box-sizing: border-box; min-height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px; border: 1.5px solid var(--n-or); border-radius: 99px; background: #2E2720;
  color: var(--n-or-texte); font: 700 14px/1.2 var(--n-police); text-align: left; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
html.mode-appli #vueResultat.n-devis .n-aimant-rond {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--n-or); color: #1A1714;
  display: flex; align-items: center; justify-content: center;
}
html.mode-appli #vueResultat.n-devis .n-aimant-libelle { min-width: 0; }
html.mode-appli #vueResultat.n-devis .n-bouton-magnetique:focus-visible { outline: 2px solid var(--n-texte); outline-offset: 2px; }

/* 3a et 3b : le devis court en haut (défilable), la feuille en bas. */
html.mode-appli .n-corriger-ecran {
  position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column;
  padding-top: calc(8px + var(--marge-haut)); background: var(--n-fond); color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli .n-corriger-ecran[hidden] { display: none; }
html.mode-appli .n-corriger-tete { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px 6px; }
html.mode-appli .n-corriger-tete .n-retour { margin-left: -10px; }
html.mode-appli .n-corriger-titre { flex: 1; margin: 0 34px 0 0; text-align: center; font: 800 17px/1.2 var(--n-police); }
html.mode-appli .n-corriger-titre:focus { outline: 0; }
html.mode-appli .n-devis-court {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 20px 12px; padding: 4px 14px 8px; border-radius: 16px; background: var(--n-surface); font-size: 14px;
}
html.mode-appli .n-devis-court:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli .n-court-titre { margin: 0; padding: 10px 0 4px; font: 800 11px/1.3 var(--n-police); letter-spacing: .1em; text-transform: uppercase; color: var(--n-or); }
html.mode-appli .n-court-ligne { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 7px 0; border-top: 1px solid var(--n-trait); line-height: 1.35; }
html.mode-appli .n-court-n { font-weight: 800; color: var(--n-texte-3); }
html.mode-appli .n-court-texte { min-width: 0; overflow-wrap: anywhere; }
html.mode-appli .n-court-prix { font-weight: 700; white-space: nowrap; }
html.mode-appli .n-court-manque-bloquant, html.mode-appli .n-court-manque-bloquant .n-court-n { color: var(--n-bloque); }
html.mode-appli .n-court-manque-verifier, html.mode-appli .n-court-manque-verifier .n-court-n { color: var(--n-ambre); }
html.mode-appli .n-court-total { font-weight: 800; }
html.mode-appli .n-court-total .n-court-prix { color: var(--n-or); }
html.mode-appli .n-corriger {
  flex: none; box-sizing: border-box; min-height: 45%; max-height: 62%; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 10px 20px calc(20px + var(--marge-bas)); border-radius: 24px 24px 0 0; border-top: 1px solid var(--n-trait-fort);
  background: var(--n-feuille);
}
html.mode-appli .n-corriger .n-feuille-poignee { flex: none; }
html.mode-appli .n-corriger-consigne { margin: 4px 0 0; text-align: center; font-size: 14px; line-height: 1.45; color: var(--n-texte-2); }
html.mode-appli .n-rappels { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
html.mode-appli .n-rappel { padding: 5px 10px; border-radius: 99px; font: 700 13px/1.3 var(--n-police); border: 1px solid var(--n-trait-fort); color: var(--n-texte-2); }
html.mode-appli .n-rappel-bloquant { background: var(--n-bloque-fond); border-color: var(--n-bloque-trait); color: var(--n-bloque); }
html.mode-appli .n-rappel-verifier { background: var(--n-ambre-fond); border-color: var(--n-ambre-trait); color: var(--n-ambre); }
html.mode-appli .n-corriger-souci { margin: 0; text-align: center; font-size: 14px; line-height: 1.45; color: var(--n-danger); }
html.mode-appli .n-corriger-souci[hidden] { display: none; }
html.mode-appli .n-corriger-micro {
  flex: none; width: 64px; height: 64px; margin: 18px 0 4px; border: 0; border-radius: 50%; background: var(--n-or); color: #1A1714;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 0 0 9px rgba(217, 178, 111, .15), 0 0 0 18px rgba(217, 178, 111, .07);
}
html.mode-appli .n-corriger-micro:focus-visible { outline: 2px solid var(--n-texte); outline-offset: 22px; }
html.mode-appli .n-corriger-toucher { margin: 4px 0 0; font-size: 13px; color: var(--n-texte-3); }
html.mode-appli .n-corriger-chrono { margin: 6px 0 0; font: 800 28px/1.2 var(--n-police); letter-spacing: .02em; }
html.mode-appli .n-corriger-onde { display: flex; gap: 4px; align-items: center; justify-content: center; height: 30px; }
html.mode-appli .n-corriger-onde span { width: 4px; height: 6px; border-radius: 4px; background: var(--n-or); }
html.mode-appli .n-corriger-actions { display: flex; gap: 10px; width: 100%; margin-top: auto; }
html.mode-appli .n-corriger-actions > * { flex: 1; width: auto; }
html.mode-appli .n-corriger-attente { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: auto 0; text-align: center; color: var(--n-texte-2); }
html.mode-appli .n-corriger-attente p { margin: 0; font-size: 15px; }
html.mode-appli .n-corriger-roue { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--n-trait-fort); border-top-color: var(--n-or); animation: n-tourner 1s linear infinite; }
@keyframes n-tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.mode-appli .n-corriger-roue { animation: none; } }

/* Écran 4 : page entière. */
html.mode-appli .n-changements {
  position: fixed; inset: 0; z-index: 26; display: flex; flex-direction: column;
  padding-top: calc(8px + var(--marge-haut)); background: var(--n-fond); color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli .n-changements[hidden] { display: none; }
html.mode-appli .n-changements-tete { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px 4px; }
html.mode-appli .n-fermer-changements {
  flex: none; width: 44px; height: 44px; margin-left: -10px; padding: 0; border: 0; background: transparent;
  color: var(--n-texte); font: 600 18px/1 var(--n-police); cursor: pointer;
}
html.mode-appli .n-changements-titre { flex: 1; margin: 0 34px 0 0; text-align: center; font: 800 18px/1.25 var(--n-police); }
html.mode-appli .n-changements-titre:focus { outline: 0; }
html.mode-appli .n-changements-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 16px; font-size: 14px; }
html.mode-appli .n-changements-sous { margin: 0 0 10px; text-align: center; font-size: 13px; color: var(--n-texte-3); }
html.mode-appli .n-bilan { margin: 0 0 6px; padding: 10px 12px; border-radius: 14px; background: var(--n-surface); font-size: 13px; }
html.mode-appli .n-bilan-titre { display: block; margin-bottom: 4px; font-size: 12px; color: var(--n-texte-2); }
html.mode-appli .n-bilan-ligne { display: flex; gap: 8px; margin: 0; padding: 3px 0; }
html.mode-appli .n-bilan-signe { flex: none; width: 14px; font-weight: 900; }
html.mode-appli .n-bilan-dit .n-bilan-signe { color: var(--n-vert); }
html.mode-appli .n-bilan-manque .n-bilan-signe, html.mode-appli .n-bilan-manque { color: var(--n-ambre); }
html.mode-appli .n-changements-groupe { margin: 16px 2px 8px; font: 800 12px/1.3 var(--n-police); letter-spacing: .1em; text-transform: uppercase; color: var(--n-or); }
html.mode-appli .n-ch {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 3px 8px; align-items: start;
  margin-bottom: 8px; padding: 6px 12px 10px 4px; border-radius: 14px; border: 1px solid var(--n-trait);
}
html.mode-appli .n-ch-case {
  grid-row: 1 / span 2; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
html.mode-appli .n-ch-case::after {
  content: ''; box-sizing: border-box; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--n-trait-fort);
  display: flex; align-items: center; justify-content: center; color: #1A1714; font: 900 13px/1 var(--n-police);
}
html.mode-appli .n-ch-case[aria-checked="true"]::after { content: '✓'; border: 0; background: var(--n-or); }
html.mode-appli .n-ch-case-question { cursor: default; }
html.mode-appli .n-ch-case:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: -4px; border-radius: 10px; }
html.mode-appli .n-ch-texte { min-width: 0; padding-top: 6px; display: flex; flex-direction: column; gap: 2px; }
html.mode-appli .n-ch-sorte { font: 800 11px/1.3 var(--n-police); letter-spacing: .05em; text-transform: uppercase; color: var(--n-texte-3); }
html.mode-appli .n-ch-objet { font-weight: 600; overflow-wrap: anywhere; }
html.mode-appli .n-ch-montant { padding-top: 6px; font-weight: 700; text-align: right; white-space: nowrap; }
html.mode-appli .n-ch-montant del { display: block; font-weight: 500; color: var(--n-texte-3); }
html.mode-appli .n-ch-note { grid-column: 2 / -1; font-size: 12px; line-height: 1.4; color: var(--n-texte-3); overflow-wrap: anywhere; }
html.mode-appli .n-ch-modifie { background: var(--n-vert-fond); border-color: var(--n-vert-trait); }
html.mode-appli .n-ch-modifie .n-ch-sorte { color: var(--n-vert); }
html.mode-appli .n-ch-retire { background: var(--n-rouge-fond); border-color: var(--n-rouge-trait); }
html.mode-appli .n-ch-retire .n-ch-sorte { color: var(--n-rouge); }
html.mode-appli .n-ch-deplace { background: var(--n-bleu-fond); border-color: var(--n-bleu-trait); }
html.mode-appli .n-ch-deplace .n-ch-sorte { color: var(--n-bleu); }
html.mode-appli .n-ch-preciser { background: var(--n-ambre-fond); border-color: var(--n-ambre-trait); }
html.mode-appli .n-ch-preciser .n-ch-sorte { color: var(--n-ambre); }
html.mode-appli .n-ch.n-ch-decoche { opacity: .55; }
html.mode-appli .n-puces { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
html.mode-appli .n-puce {
  box-sizing: border-box; min-height: 44px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--n-trait-fort); border-radius: 22px;
  background: transparent; color: var(--n-texte); font: 600 13px/1.3 var(--n-police); text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
html.mode-appli .n-puce-choix { border-color: var(--n-or); color: var(--n-or-texte); }
html.mode-appli .n-puce[aria-pressed="true"] { background: var(--n-or); color: #1A1714; border-color: var(--n-or); }
html.mode-appli .n-ch-sous-prix { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 4px; }
html.mode-appli .n-ch-sous-prix[hidden] { display: none; }
html.mode-appli .n-ch-saisie { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
html.mode-appli .n-ch-saisie .n-ch-prix { flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; border-color: var(--n-or); }
html.mode-appli .n-ch-monnaie { flex: none; font-weight: 700; color: var(--n-texte-2); }
html.mode-appli .n-ch-info { margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; background: var(--n-surface); border: 1px solid var(--n-trait); display: flex; flex-direction: column; gap: 2px; }
html.mode-appli .n-ch-info .n-ch-note { margin-top: 2px; }
html.mode-appli .n-ch-ouvrir {
  align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--n-or-texte); font: 700 13px/1.2 var(--n-police); text-align: left;
}
html.mode-appli .n-nouveau-net {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding: 12px 2px 2px;
  border-top: 1px solid var(--n-trait); font-size: 16px; font-weight: 800;
}
html.mode-appli .n-nouveau-valeurs { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 8px; }
html.mode-appli .n-ancien-montant { color: var(--n-texte-3); font-weight: 500; }
html.mode-appli .n-nouveau-montant { color: var(--n-or); }
html.mode-appli .n-changements-a-chiffrer { margin: 2px 2px 0; text-align: right; font-size: 12px; color: var(--n-ambre); }
html.mode-appli .n-changements-a-chiffrer[hidden] { display: none; }
html.mode-appli .n-changements-bas {
  flex: none; display: flex; gap: 10px; padding: 12px 20px calc(16px + var(--marge-bas)); border-top: 1px solid var(--n-trait); background: var(--n-fond);
}
html.mode-appli .n-changements-bas > * { flex: 1 1 auto; width: auto; min-width: 0; white-space: nowrap; }
html.mode-appli .n-changements-bas > #btnRedire { flex: 0 1 auto; padding: 0 22px; }
html.mode-appli .n-changements-bas .n-bouton:disabled { opacity: .45; cursor: default; }

/* Écran 5 : le bandeau dans la page et les marques. */
html.mode-appli #vueResultat.n-devis .n-bandeau-correction {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 4px 14px;
  border-radius: 14px; border: 1px solid var(--n-vert-trait); background: var(--n-vert-fond); font-size: 14px; font-weight: 600;
}
html.mode-appli #vueResultat.n-devis .n-bandeau-annuler {
  flex: none; min-height: 44px; padding: 0 8px; border: 0; background: transparent; cursor: pointer;
  color: var(--n-or-texte); font: 800 14px/1.2 var(--n-police);
}
html.mode-appli #vueResultat.n-devis .n-marque-etiquette { align-self: flex-start; font: 800 11px/1.3 var(--n-police); letter-spacing: .06em; text-transform: uppercase; margin-bottom: -6px; }
html.mode-appli #vueResultat.n-devis .n-presta.n-marque-modifiee { outline: 2px solid var(--n-vert-trait); }
html.mode-appli #vueResultat.n-devis .n-marque-modifiee .n-marque-etiquette,
html.mode-appli #vueResultat.n-devis .n-marque-ajoutee .n-marque-etiquette { color: var(--n-vert); }
html.mode-appli #vueResultat.n-devis .n-presta.n-marque-ajoutee { outline: 2px solid var(--n-vert-trait); background: #24291F; }
html.mode-appli #vueResultat.n-devis .n-presta.n-marque-ajoutee-sans-prix { outline: 2px solid var(--n-ambre-trait); }
html.mode-appli #vueResultat.n-devis .n-marque-ajoutee-sans-prix .n-marque-etiquette { color: var(--n-ambre); }
html.mode-appli #vueResultat.n-devis .n-presta.n-marque-deplacee { outline: 2px solid var(--n-bleu-trait); }
html.mode-appli #vueResultat.n-devis .n-marque-deplacee .n-marque-etiquette { color: var(--n-bleu); }
html.mode-appli #vueResultat.n-devis .n-presta.n-marque-retiree { background: transparent; border: 1.5px dashed var(--n-rouge-trait); }
html.mode-appli #vueResultat.n-devis .n-marque-retiree .n-marque-etiquette { color: var(--n-rouge); }
html.mode-appli #vueResultat.n-devis .n-marque-retiree del { color: var(--n-texte-3); }
html.mode-appli #vueResultat.n-devis .n-retablir,
html.mode-appli #vueResultat.n-devis .n-marque-voir {
  align-self: flex-start; min-height: 44px; margin: -8px 0 -6px; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--n-or-texte); font: 700 14px/1.2 var(--n-police);
}
html.mode-appli #vueResultat.n-devis .n-marque-ancien-texte { margin: -4px 0 0; font-size: 13px; line-height: 1.45; color: var(--n-texte-3); text-decoration: line-through; overflow-wrap: anywhere; }
html.mode-appli #vueResultat.n-devis .n-marque-ancien-texte[hidden] { display: none; }
html.mode-appli #vueResultat.n-devis .n-marque-ancien-detail { color: var(--n-texte-3); }
html.mode-appli #vueResultat.n-devis .n-presta-precision { font-size: 13px; font-style: italic; color: var(--n-texte-2); overflow-wrap: anywhere; }
html.mode-appli #vueResultat.n-devis .n-presta-offert {
  align-self: flex-start; margin-top: 4px; padding: 5px 12px; border-radius: 999px; background: var(--n-vert-fond); color: var(--n-vert); font-size: 14px; font-weight: 700;
}
html.mode-appli #vueResultat.n-devis .n-categorie-nouvelle { margin-left: 8px; color: var(--n-vert); font-size: 11px; letter-spacing: .06em; }
html.mode-appli #vueResultat.n-devis .n-carte-client.n-marque-modifiee { outline: 2px solid var(--n-vert-trait); }
html.mode-appli #vueResultat.n-devis .n-ligne.n-marque-modifiee .n-ligne-valeur,
html.mode-appli #vueResultat.n-devis .n-recap-ligne.n-marque-modifiee .n-recap-montant { color: var(--n-vert); font-weight: 700; }

/* --- Lire un ancien devis (scan, tâche S5) : écrans 2, 3 et 8 (docs/maquettes/scan-devis) --- */
/* Plein écran, comme le choix du pays (C1) : rien de flottant, tout défile avec la vue. */
html.mode-appli #vueLireDevis.n-scan.active {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; animation: none;
  display: flex; flex-direction: column; box-sizing: border-box;
  padding: calc(40px + var(--marge-haut)) 20px calc(26px + var(--marge-bas));
  background: radial-gradient(circle at 90% 8%, rgba(217, 178, 111, .14), transparent 40%), var(--n-fond);
  color: var(--n-texte); font-family: var(--n-police);
}
html.mode-appli #vueLireDevis[data-etape="lecture"].active {
  background: radial-gradient(circle at 50% 30%, rgba(217, 178, 111, .18), transparent 42%), var(--n-fond);
}
html.mode-appli #vueLireDevis [hidden] { display: none; }
html.mode-appli #vueLireDevis .n-scan-entete {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0 0 6px;
}
html.mode-appli #vueLireDevis .n-scan-retour {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: -6px; padding: 0 8px 0 6px; border: 0;
  background: transparent; color: var(--n-texte); font: 600 15px/1.2 var(--n-police); cursor: pointer;
}
html.mode-appli #vueLireDevis .n-scan-retour::before {
  content: ''; width: 10px; height: 10px; margin-right: 2px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
html.mode-appli #vueLireDevis .n-scan-retour:focus-visible,
html.mode-appli #vueLireDevis .n-scan-photo:focus-visible,
html.mode-appli #vueLireDevis .n-scan-fichier:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli #vueLireDevis .n-scan-num { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--n-texte-3); text-align: right; }
html.mode-appli #vueLireDevis .n-etape { flex: 1 0 auto; display: flex; flex-direction: column; gap: 14px; }
html.mode-appli #vueLireDevis .n-bas { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
html.mode-appli #vueLireDevis .n-titre { margin: 0; font-size: 27px; line-height: 1.17; font-weight: 800; letter-spacing: -.02em; color: var(--n-texte); }
html.mode-appli #vueLireDevis .n-titre:focus { outline: none; }
html.mode-appli #vueLireDevis .n-texte { margin: 0; font-size: 15px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli #vueLireDevis .n-sur-titre {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--n-or);
}
html.mode-appli #vueLireDevis .n-sur-titre:focus { outline: none; }
html.mode-appli #vueLireDevis button:disabled { opacity: .45; cursor: default; }

/* Écran 2 : la photo (grande zone), le fichier (carte), l'encadré de confidentialité. */
html.mode-appli #vueLireDevis .n-scan-photo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 196px;
  padding: 18px 16px; border-radius: 20px; border: 1.5px dashed var(--n-trait-fort); background: rgba(217, 178, 111, .05);
  color: var(--n-texte); font-family: var(--n-police); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli #vueLireDevis .n-scan-rond {
  width: 64px; height: 64px; border-radius: 32px; background: var(--n-or); display: flex; align-items: center; justify-content: center;
}
html.mode-appli #vueLireDevis .n-scan-photo-titre { font-size: 16px; font-weight: 700; }
html.mode-appli #vueLireDevis .n-scan-photo-detail { font-size: 13px; color: var(--n-texte-3); }
html.mode-appli #vueLireDevis .n-scan-fichier {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 14px 16px; border: 0; border-radius: 18px;
  background: var(--n-surface); color: var(--n-texte); font-family: var(--n-police); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.mode-appli #vueLireDevis .n-scan-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px; background: #2E2720; display: flex; align-items: center; justify-content: center;
}
html.mode-appli #vueLireDevis .n-scan-fichier-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.mode-appli #vueLireDevis .n-scan-fichier-titre { font-size: 15px; font-weight: 700; }
html.mode-appli #vueLireDevis .n-scan-fichier-detail { font-size: 13px; color: var(--n-texte-3); }
html.mode-appli #vueLireDevis .n-scan-chevron {
  flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--n-chevron); border-top: 2px solid var(--n-chevron);
  transform: rotate(45deg);
}
html.mode-appli #vueLireDevis .n-note-verrou p { font-size: 13px; }

/* Écran 3 : la feuille qui se lit, les étapes. */
html.mode-appli #vueLireDevis .n-scan-papier {
  position: relative; align-self: center; flex: none; width: 150px; height: 196px; margin-top: 30px; box-sizing: border-box;
  border-radius: 8px; background: #F2EDE4; padding: 16px 14px; overflow: hidden;
  box-shadow: 0 0 0 14px rgba(217, 178, 111, .10), 0 0 0 30px rgba(217, 178, 111, .05);
}
html.mode-appli #vueLireDevis .n-scan-pl { display: block; height: 6px; border-radius: 3px; background: #CFC6B8; margin-bottom: 7px; }
html.mode-appli #vueLireDevis .n-scan-pl-logo { width: 46px; height: 18px; border-radius: 4px; background: #1f4d3a; margin-bottom: 12px; }
html.mode-appli #vueLireDevis .n-scan-pl-client { filter: blur(2px); }
html.mode-appli #vueLireDevis .n-scan-balayage {
  position: absolute; left: 0; right: 0; top: 46%; height: 3px; background: var(--n-or);
  box-shadow: 0 0 18px 6px rgba(217, 178, 111, .55); animation: n-scan-balayer 2.4s ease-in-out infinite alternate;
}
@keyframes n-scan-balayer { from { top: 12%; } to { top: 86%; } }
html.mode-appli #vueLireDevis .n-scan-etapes { display: flex; flex-direction: column; gap: 15px; margin: 34px 0 0; padding: 0; list-style: none; }
html.mode-appli #vueLireDevis .n-scan-etape { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.3; }
html.mode-appli #vueLireDevis .n-scan-pastille {
  flex: none; box-sizing: border-box; width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
}
html.mode-appli #vueLireDevis .n-scan-etape[data-etat="faite"] .n-scan-pastille { background: var(--n-or); }
html.mode-appli #vueLireDevis .n-scan-etape[data-etat="en-cours"] { font-weight: 700; }
html.mode-appli #vueLireDevis .n-scan-etape[data-etat="en-cours"] .n-scan-pastille {
  border: 3px solid var(--n-or); border-right-color: transparent; animation: n-tourner 1s linear infinite;
}
html.mode-appli #vueLireDevis .n-scan-etape[data-etat="attente"] { color: var(--n-texte-3); }
html.mode-appli #vueLireDevis .n-scan-etape[data-etat="attente"] .n-scan-pastille { border: 2px solid var(--n-trait-fort); }
html.mode-appli #vueLireDevis .n-scan-pied { margin: auto 0 0; padding-top: 18px; font-size: 13px; line-height: 1.5; color: var(--n-texte-3); text-align: center; }

/* Écran 8 : la feuille floue, la raison, les conseils. */
html.mode-appli #vueLireDevis .n-scan-flou { position: relative; align-self: center; flex: none; width: 132px; height: 170px; margin: 18px 0 20px; }
html.mode-appli #vueLireDevis .n-scan-flou-papier {
  width: 100%; height: 100%; box-sizing: border-box; border-radius: 8px; background: #E9E2D6; padding: 14px 12px;
  filter: blur(2.4px); transform: rotate(-6deg);
}
html.mode-appli #vueLireDevis .n-scan-flou-papier .n-scan-pl { background: #B9AE9E; margin-bottom: 8px; }
html.mode-appli #vueLireDevis .n-scan-alerte {
  position: absolute; right: -14px; bottom: -12px; width: 46px; height: 46px; border-radius: 23px; background: var(--n-danger);
  display: flex; align-items: center; justify-content: center; color: #1A1714; font-size: 26px; font-weight: 800;
}
html.mode-appli #vueLireDevis #scanEchec .n-titre { font-size: 24px; }
html.mode-appli #vueLireDevis .n-scan-conseils {
  margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; list-style: none; border-radius: 18px; background: var(--n-surface);
}
html.mode-appli #vueLireDevis .n-scan-conseils li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--n-texte-2); }
html.mode-appli #vueLireDevis .n-scan-conseils li::before {
  content: ''; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 3px; background: var(--n-or);
}
/* Feuille des pages prises. */
html.mode-appli .n-feuille-scan .n-scan-note-feuille { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-texte-2); }
@media (prefers-reduced-motion: reduce) {
  html.mode-appli #vueLireDevis .n-scan-balayage,
  html.mode-appli #vueLireDevis .n-scan-etape[data-etat="en-cours"] .n-scan-pastille { animation: none; }
}

/* --- Lire un ancien devis (scan, tâche S6) : écrans 4 et 9, « Voici ce que nous avons trouvé » ---
   Rangées : trouvé (valeur), à vérifier (jaune ambré de la page de vérification, pastille « À vérifier »),
   pas trouvé (italique, « Ajouter »). Tout défile avec la vue, rien de flottant ; cibles de 44 px au moins. */
html.mode-appli #vueLireDevis #scanTrouve { gap: 12px; }
html.mode-appli #vueLireDevis .n-scan-tete-trouve { display: flex; flex-direction: column; gap: 4px; }
html.mode-appli #vueLireDevis .n-scan-titre-trouve { font-size: 25px; }
html.mode-appli #vueLireDevis .n-scan-sous-titre { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--n-texte-3); }
html.mode-appli #vueLireDevis .n-scan-cartes { display: flex; flex-direction: column; gap: 12px; }
html.mode-appli #vueLireDevis .n-scan-carte {
  display: flex; flex-direction: column; min-width: 0; box-sizing: border-box; padding: 12px 14px; border-radius: 18px; background: var(--n-surface);
}
html.mode-appli #vueLireDevis .n-scan-carte-titre {
  margin: 0 0 2px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--n-or-texte);
}
html.mode-appli #vueLireDevis .n-scan-badge-gris {
  flex: none; padding: 2px 8px; border-radius: 10px; background: var(--n-trait); color: var(--n-texte-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
html.mode-appli #vueLireDevis .n-scan-ligne { border-bottom: 1px solid var(--n-trait-ligne); }
html.mode-appli #vueLireDevis .n-scan-ligne:last-of-type { border-bottom: 0; }
html.mode-appli #vueLireDevis .n-scan-ligne-corps {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center;
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 7px 0; border: 0; background: transparent;
  color: var(--n-texte); font: inherit; text-align: left; cursor: pointer;
}
html.mode-appli #vueLireDevis .n-scan-ligne-corps:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; border-radius: 8px; }
html.mode-appli #vueLireDevis .n-scan-libelle {
  grid-column: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 1.3; color: var(--n-texte-3);
}
html.mode-appli #vueLireDevis .n-scan-valeur { grid-column: 1; font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
html.mode-appli #vueLireDevis .n-scan-raison { grid-column: 1; font-size: 12.5px; line-height: 1.4; color: var(--n-texte-2); }
html.mode-appli #vueLireDevis .n-scan-act { grid-column: 2; grid-row: 1 / span 3; font-size: 14px; font-weight: 700; color: var(--n-or-texte); }
html.mode-appli #vueLireDevis .n-scan-mention { grid-column: 1; display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.35; color: var(--n-texte-2); }
html.mode-appli #vueLireDevis .n-scan-mention svg { flex: none; }
html.mode-appli #vueLireDevis .n-scan-absent .n-scan-vide,
html.mode-appli #vueLireDevis .n-scan-non-repris .n-scan-raison { color: var(--n-texte-3); font-weight: 500; font-style: italic; }
/* À vérifier : le jaune ambré de la pastille de la page de vérification. */
html.mode-appli #vueLireDevis .n-scan-ligne.n-scan-verifier {
  margin: 4px -6px; padding: 0 10px; border: 1.5px solid var(--n-ambre-trait); border-radius: 12px; background: var(--n-ambre-fond);
}
html.mode-appli #vueLireDevis .n-scan-badge {
  flex: none; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--n-ambre); color: var(--n-ambre); font-size: 11.5px; font-weight: 700;
}
html.mode-appli #vueLireDevis .n-scan-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 10px; }
html.mode-appli #vueLireDevis .n-scan-ok,
html.mode-appli #vueLireDevis .n-scan-corriger,
html.mode-appli #vueLireDevis .n-scan-annuaire-btn,
html.mode-appli #vueLireDevis .n-scan-logo-btn,
html.mode-appli #vueLireDevis .n-scan-vignette-aucun {
  min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 22px; font: 700 14px/1.25 var(--n-police); cursor: pointer;
}
html.mode-appli #vueLireDevis .n-scan-ok { flex: 1 1 0; border: 0; background: var(--n-or); color: #1A1714; }
html.mode-appli #vueLireDevis .n-scan-corriger,
html.mode-appli #vueLireDevis .n-scan-annuaire-btn,
html.mode-appli #vueLireDevis .n-scan-logo-btn,
html.mode-appli #vueLireDevis .n-scan-vignette-aucun { border: 1.5px solid var(--n-trait-fort); background: transparent; color: var(--n-texte); }
html.mode-appli #vueLireDevis .n-scan-corriger { flex: 1 1 0; }
html.mode-appli #vueLireDevis .n-scan-annuaire-btn { width: 100%; margin: 0 0 10px; }
html.mode-appli #vueLireDevis .n-scan-source { margin: 0 0 8px; font-size: 12px; line-height: 1.4; color: var(--n-texte-3); }
html.mode-appli #vueLireDevis .n-scan-carte > .n-scan-source { margin: 6px 0 0; }
html.mode-appli #vueLireDevis .n-scan-note { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--n-texte-2); }
html.mode-appli #vueLireDevis #scanAussi { margin: 0; }
/* Logo et couleur : côte à côte, ou l'un sous l'autre quand la place manque (texte agrandi). */
html.mode-appli #vueLireDevis .n-scan-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
html.mode-appli #vueLireDevis .n-scan-carte-large { grid-column: 1 / -1; }
html.mode-appli #vueLireDevis .n-scan-carte-logo,
html.mode-appli #vueLireDevis .n-scan-carte-couleur { gap: 8px; }
html.mode-appli #vueLireDevis .n-scan-logo-tuile {
  display: flex; align-items: center; justify-content: center; height: 64px; padding: 6px; box-sizing: border-box; border-radius: 12px; background: #FFFFFF;
}
html.mode-appli #vueLireDevis .n-scan-logo-tuile img { display: block; max-width: 100%; max-height: 52px; object-fit: contain; }
html.mode-appli #vueLireDevis .n-scan-logo-texte { margin: 0; font-size: 13px; line-height: 1.4; color: var(--n-texte-2); }
html.mode-appli #vueLireDevis .n-scan-logo-souci { margin: 0; font-size: 13px; line-height: 1.4; color: var(--n-danger); }
html.mode-appli #vueLireDevis .n-scan-lien {
  align-self: flex-start; min-height: 44px; min-width: 44px; padding: 0 2px; border: 0; background: transparent;
  color: var(--n-or-texte); font: 700 14px/1.2 var(--n-police); cursor: pointer;
}
html.mode-appli #vueLireDevis .n-scan-vignettes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
html.mode-appli #vueLireDevis .n-scan-vignette {
  display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; padding: 6px; box-sizing: border-box;
  border: 2px solid transparent; border-radius: 12px; background: #FFFFFF; cursor: pointer;
}
html.mode-appli #vueLireDevis .n-scan-vignette canvas { display: block; max-width: 100%; max-height: 100%; }
html.mode-appli #vueLireDevis .n-scan-vignette[aria-pressed="true"],
html.mode-appli #vueLireDevis .n-scan-vignette-aucun[aria-pressed="true"] { border-color: var(--n-or); box-shadow: 0 0 0 2px var(--n-or); }
html.mode-appli #vueLireDevis .n-scan-teintes { display: flex; align-items: center; gap: 8px; min-height: 40px; }
html.mode-appli #vueLireDevis .n-scan-teinte { flex: none; width: 22px; height: 22px; border-radius: 50%; }
html.mode-appli #vueLireDevis .n-scan-teinte-choisie { width: 30px; height: 30px; margin: 0 4px; box-shadow: 0 0 0 2px var(--n-surface), 0 0 0 4px var(--n-or); }
html.mode-appli #vueLireDevis .n-scan-teinte-texte { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--n-texte-2); }
/* Feuilles de l'écran 4 : saisie d'une rangée, recommencer, recadrer le logo. */
html.mode-appli .n-feuille-scan-saisie .n-scan-erreur-feuille { margin: 0; font-size: 14px; line-height: 1.45; color: var(--n-danger); }
html.mode-appli .n-feuille-scan-saisie .n-scan-erreur-feuille[hidden] { display: none; }
html.mode-appli .n-feuille-scan-recommencer .n-scan-note-feuille,
html.mode-appli .n-feuille-scan-recadrer .n-scan-note-feuille { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-texte-2); }
html.mode-appli .n-feuille-scan-recadrer .n-scan-recadre { display: flex; flex-direction: column; gap: 10px; }
/* Marge de 22 px : les poignées (44 px, centrées sur les coins) ne sont jamais coupées. */
html.mode-appli .n-feuille-scan-recadrer .n-scan-recadre-cadre { padding: 22px; overflow: hidden; text-align: center; }
html.mode-appli .n-feuille-scan-recadrer .n-scan-zone { position: relative; display: inline-block; vertical-align: top; touch-action: none; user-select: none; }
html.mode-appli .n-feuille-scan-recadrer .n-scan-recadre-photo { display: block; max-width: 100%; max-height: 46vh; width: auto; height: auto; }
html.mode-appli .n-feuille-scan-recadrer .n-scan-cadre {
  position: absolute; box-sizing: border-box; border: 2px solid var(--n-or); box-shadow: 0 0 0 999px rgba(14, 12, 11, .55); cursor: move;
}
html.mode-appli .n-feuille-scan-recadrer .n-scan-poignee {
  position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center;
}
html.mode-appli .n-feuille-scan-recadrer .n-scan-poignee::after {
  content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--n-or); box-shadow: 0 0 0 3px var(--n-fond);
}
html.mode-appli .n-feuille-scan-recadrer .n-scan-poignee[data-coin="hg"] { left: 0; top: 0; cursor: nwse-resize; }
html.mode-appli .n-feuille-scan-recadrer .n-scan-poignee[data-coin="bd"] { left: 100%; top: 100%; cursor: nwse-resize; }

/* --- Lire un ancien devis (scan, tâche S7) : écran 5, prestations proposées en tarifs ---
   Une rangée par ligne (case, libellé et unité, prix), toute la rangée est la cible (44 px au moins).
   Décochée : texte éteint ; douteuse : détail ambré ; remise : « Propre à ce client », éteint. */
html.mode-appli #vueLireDevis #scanPrestations { gap: 12px; }
html.mode-appli #vueLireDevis .n-scan-proposition {
  align-self: flex-start; display: inline-flex; align-items: center; margin-bottom: 6px; padding: 5px 10px; border-radius: 10px;
  border: 1px dashed var(--n-or); color: var(--n-or-texte); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
html.mode-appli #vueLireDevis .n-scan-titre-presta { font-size: 24px; }
html.mode-appli #vueLireDevis .n-scan-texte-presta { font-size: 14px; color: var(--n-texte-2); }
html.mode-appli #vueLireDevis .n-scan-prestas { padding-top: 2px; padding-bottom: 2px; }
html.mode-appli #vueLireDevis .n-scan-presta {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; box-sizing: border-box;
  width: 100%; min-height: 52px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--n-trait-ligne); background: transparent;
  color: var(--n-texte); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.mode-appli #vueLireDevis .n-scan-presta:last-child { border-bottom: 0; }
html.mode-appli #vueLireDevis .n-scan-presta:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; border-radius: 8px; }
html.mode-appli #vueLireDevis .n-scan-case {
  box-sizing: border-box; width: 22px; height: 22px; border-radius: 6px; background: var(--n-or);
  display: flex; align-items: center; justify-content: center;
}
html.mode-appli #vueLireDevis .n-scan-presta[aria-checked="false"] .n-scan-case { background: transparent; border: 2px solid var(--n-trait-fort); }
html.mode-appli #vueLireDevis .n-scan-presta-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html.mode-appli #vueLireDevis .n-scan-presta-nom { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
html.mode-appli #vueLireDevis .n-scan-presta-detail { font-size: 12px; line-height: 1.35; color: var(--n-texte-3); }
html.mode-appli #vueLireDevis .n-scan-presta-doute .n-scan-presta-detail { color: var(--n-ambre); font-weight: 600; }
html.mode-appli #vueLireDevis .n-scan-presta-prix { font-size: 14px; font-weight: 700; white-space: nowrap; }
html.mode-appli #vueLireDevis .n-scan-presta[aria-checked="false"] .n-scan-presta-nom,
html.mode-appli #vueLireDevis .n-scan-presta[aria-checked="false"] .n-scan-presta-prix { color: var(--n-texte-3); }
html.mode-appli #vueLireDevis .n-scan-passer { min-height: 44px; }

/* --- Lire un ancien devis (scan, tâche S8) : écran 6, « Mon entreprise » et C4 préremplies -------
   Avis en tête (maquette 6, .avis-rempli) ; marque or « trouvé sur votre devis » ou « vérifié dans
   l'annuaire officiel » à côté du libellé ; « À vérifier » : la ligne encadrée du jaune ambré de l'écran 4.
   « Remplir depuis un devis » : une ligne en tête de « Mon entreprise » et de C4. */
html.mode-appli .n-avis-devis {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--n-surface);
  font-size: 13px; line-height: 1.45; color: #E7E0D5;
}
html.mode-appli .n-avis-devis svg { flex: none; margin-top: 1px; }
html.mode-appli #blocLireDevisEntreprise[hidden] { display: none; }
/* La ligne de plus allonge la page : dans la colonne qui défile, rien ne doit rétrécir (l'en-tête passait
   sous la ligne à ×1,3, mesuré par test:mise-en-page). */
html.mode-appli .n-ecran-entreprise.active > * { flex-shrink: 0; }
html.mode-appli .n-ligne-lire-devis .n-ligne-valeur { color: var(--n-or-texte); font-weight: 700; }
html.mode-appli .n-marque-lue {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--n-or);
  vertical-align: baseline; white-space: nowrap;
}
html.mode-appli .n-marque-lue::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 3px; background: var(--n-or); }
html.mode-appli .n-marque-lue-verifier,
html.mode-appli .n-marque-lue-confirmer { color: var(--n-ambre); }
html.mode-appli .n-marque-lue-verifier::before,
html.mode-appli .n-marque-lue-confirmer::before { background: var(--n-ambre); }
html.mode-appli #vueEntreprise .n-ligne.n-scan-verifier {
  border: 1.5px solid var(--n-ambre-trait); border-radius: 12px; background: var(--n-ambre-fond);
}
html.mode-appli #vueEntrepriseCi .n-champ-bloc.n-scan-verifier {
  padding: 8px 10px; border: 1.5px solid var(--n-ambre-trait); border-radius: 12px; background: var(--n-ambre-fond);
}
html.mode-appli #vueEntrepriseCi .n-paiement-lu { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 6px; }
html.mode-appli #vueEntrepriseCi .n-paiement-lu p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--n-texte-2); }
html.mode-appli #vueEntrepriseCi .n-paiement-lu-ok { align-self: flex-start; min-height: 44px; }
html.mode-appli .n-feuille-iban-lu .n-iban-lu {
  margin: 0; font: 700 17px/1.5 var(--n-police); letter-spacing: .04em; color: var(--n-texte); overflow-wrap: anywhere;
}
/* Écran 4 : valeur déjà enregistrée et valeur du devis (« Prendre celui du devis »). */
html.mode-appli #vueLireDevis .n-scan-conflit {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px;
  background: var(--n-surface-2, rgba(255, 255, 255, .04));
}
html.mode-appli #vueLireDevis .n-scan-conflit-champ { font-size: 12px; font-weight: 700; color: var(--n-texte-3); }
html.mode-appli #vueLireDevis .n-scan-conflit-valeur { font-size: 13.5px; line-height: 1.4; color: var(--n-texte-2); overflow-wrap: anywhere; }
html.mode-appli #vueLireDevis .n-scan-prendre {
  align-self: flex-start; min-height: 44px; min-width: 44px; margin-top: 4px; padding: 8px 14px; border-radius: 22px;
  border: 1.5px solid var(--n-trait-fort); background: transparent; color: var(--n-texte); font: 700 14px/1.25 var(--n-police); cursor: pointer;
}
html.mode-appli #vueLireDevis .n-scan-prendre:focus-visible { outline: 2px solid var(--n-or-texte); outline-offset: 2px; }
html.mode-appli #vueLireDevis .n-scan-souci {
  margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  color: var(--n-danger); background: rgba(240, 162, 138, .10); border: 1px solid rgba(240, 162, 138, .35);
}
html.mode-appli #vueLireDevis .n-scan-souci:empty { display: none; }
/* Revue S8, M-2 : valeur lue « À vérifier » dans « Informations complémentaires » : le champ en jaune ambré. */
html.mode-appli #vueEntreprise #champsEntreprise label.ligne-ent.n-scan-verifier {
  padding: 8px 10px; border: 1.5px solid var(--n-ambre-trait); border-radius: 12px; background: var(--n-ambre-fond);
}