/* ADR-031 — Portails E1/E4/E5. DS-001 : focus visible 2 px, cibles ≥ 44 px, contraste AA,
   prefers-reduced-motion sans animation. Couleurs : tokens DS uniquement (@devwisp/design-tokens,
   inlinés par le build dans chaque page — mêmes tokens que CRM/chat, aucune variable locale,
   gardes R2/R3 MESURE-COUVERTURE-DS). Responsive fiche §5 : <480 une colonne (CTA d'abord,
   panneau réassurance dessous ; boutons sticky bas sur onboarding) ; 480–1023 colonne unique
   centrée ; ≥1024 deux colonnes inscription / 720 px onboarding. */
* { box-sizing: border-box; }
body.portal { margin: 0; background: var(--color-bg-default); color: var(--color-text-primary); font: 16px/1.55 system-ui, "Segoe UI", Roboto, sans-serif; }
.portal-main { max-width: 640px; margin: 0 auto; padding: 24px 20px 96px; }
.portal-main--etroit { max-width: 720px; }
.ds-skip { position: absolute; left: -9999px; }
.ds-skip:focus { left: 8px; top: 8px; background: var(--color-bg-primary); color: var(--color-text-on-primary); padding: 10px 14px; border-radius: var(--radius-md); z-index: 10; }
.portal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.portal-logo { font-weight: 700; color: inherit; text-decoration: none; }
h1 { font-size: 1.6rem; margin: 0 0 8px; }
.portal-sous-titre { color: var(--color-text-secondary); margin: 0 0 20px; }
.portal-cols { display: grid; gap: 32px; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 20px 0; }
button, .portal-cta { min-height: 44px; min-width: 44px; border-radius: var(--radius-md); font: inherit; cursor: pointer; }
.btn-primary, .portal-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-primary); color: var(--color-text-on-primary); border: 1px solid var(--color-bg-primary); padding: 10px 18px; text-decoration: none; }
.btn-primary:hover { background: var(--color-bg-primary-hover); border-color: var(--color-bg-primary-hover); }
.btn-secondary { background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border-subtle); padding: 10px 18px; }
.btn-ghost { background: transparent; border: 0; color: var(--color-text-secondary); text-decoration: underline; }
.portal-lien-secondaire { color: var(--color-link); text-decoration: underline; }
[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.portal-etat, .portal-error { color: var(--color-status-danger-text); }
.portal-liste { list-style: none; padding: 0; margin: 0 0 16px; }
.portal-liste li { padding: 6px 0; border-bottom: 1px solid var(--color-border-subtle); }
.portal-mention, .portal-notice-rgpd, .portal-cgv, .portal-delai, .portal-aide { font-size: 0.9rem; color: var(--color-text-secondary); }
.portal-lien-inlinemini { font-size: 0.85rem; margin: 4px 0 0; }
.portal-champ { margin: 18px 0; }
.portal-label { display: block; font-weight: 600; margin-bottom: 6px; }
.portal-input { width: 100%; max-width: 100%; padding: 10px 12px; border: 1px solid var(--color-border-field); border-radius: var(--radius-md); background: var(--color-bg-default); color: var(--color-text-primary); }
.portal-label-case { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.portal-label-case input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--color-bg-primary); }
.portal-note { background: var(--color-surface-tint); border-left: 3px solid var(--color-accent); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.92rem; }
.portal-live { min-height: 0; }
.portal-cadre { border: 1px solid var(--color-border-card); border-radius: var(--radius-md); padding: 24px; background: var(--color-bg-raised); }
.portal-adresse-valeur { font-weight: 600; unicode-bidi: isolate; overflow-wrap: anywhere; }
.portal-badge { display: inline-block; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-full); padding: 2px 12px; font-size: 0.85rem; }
.portal-succes { font-size: 1.15rem; font-weight: 600; }
.portal-skeleton span { display: block; height: 18px; margin: 14px 0; background: var(--color-border-subtle); border-radius: var(--radius-sm); opacity: 0.5; }
.portal-skeleton span:nth-child(2) { width: 70%; }
.portal-skeleton span:nth-child(3) { width: 45%; }
.portal-boundary { border: 1px solid var(--color-status-danger-text); border-radius: var(--radius-md); padding: 16px; margin: 24px auto; max-width: 640px; }
.portal-langswitch button[disabled] { background: var(--color-disabled-bg); border: 1px solid var(--color-border-subtle); color: var(--color-disabled-fg); }
.portal-lang-raison { display: block; font-size: 0.8rem; color: var(--color-text-secondary); }
@media (min-width: 1024px) {
  .portal-cols { grid-template-columns: 1.2fr 1fr; max-width: 1024px; }
  .portal-main { max-width: 1024px; }
  .portal-main--etroit { max-width: 720px; }
}
@media (max-width: 479px) {
  .portal-col--cta { order: -1; } /* CTA d'abord, panneau réassurance sous le CTA (fiche §5) */
  .portal-main--etroit .portal-actions { position: sticky; bottom: 0; background: var(--color-bg-default); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); margin-bottom: 0; }
  .portal-main--etroit { min-height: 100dvh; padding-bottom: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- US-POR-A2/A3 — page /projets (render.mjs ; tokens design-system uniquement) -------------- */
.pjr-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; }
.pjr-quota { font-size: 0.85rem; background: var(--color-bg-subtle); color: var(--color-text-secondary); border-radius: var(--radius-full, 999px); padding: 4px 14px; }
.pjr-quota-detail { flex: 1 0 100%; order: 2; font-size: 0.8rem; color: var(--color-text-secondary); }
.pjr-barre-cta { margin-left: auto; }
/* Addendum #66 (B4-1) — bloc upsell « limite atteinte », immédiatement sous le
   bouton (§A.1) : type.small + text.secondary, lien color.link, mesure ≤ 68 ch,
   aucune pastille ni icône — le texte porte ; focus-visible : règle globale. */
.pjr-upsell { display: block; margin: 6px 0 0; max-width: 68ch; font-size: 0.8rem; color: var(--color-text-secondary); }
.pjr-upsell-ligne { display: block; }
.pjr-upsell-lien { color: var(--color-link); text-decoration: underline; }
button[aria-disabled="true"] { background: var(--color-disabled-bg); color: var(--color-disabled-fg); border-color: transparent; cursor: default; }
.pjr-loading { display: grid; gap: 12px; }
.pjr-skeleton { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md, 8px); padding: 16px; background: var(--color-bg-default); }
.pjr-skeleton span { display: block; height: 14px; margin: 8px 0; background: var(--color-border-subtle); border-radius: var(--radius-sm, 6px); opacity: 0.6; }
.pjr-skeleton span:last-child { width: 45%; }
.pjr-error { display: grid; gap: 10px; border: 1px solid var(--color-status-danger-text); border-radius: var(--radius-md, 8px); padding: 14px; }
.pjr-error .btn-secondary, .pjr-error a.btn-secondary { justify-self: start; }
.pjr-empty { padding: 24px 0; }
.pjr-empty-titre { font-size: 1.2rem; margin: 0 0 8px; }
.pjr-reprise { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: var(--color-bg-trust); border: 1px solid var(--color-border-card); border-radius: var(--radius-md, 8px); padding: 14px; margin: 0 0 16px; }
.pjr-reprise p { margin: 0; flex: 1 1 260px; }
.pjr-reprise .portal-actions { margin: 0; }
.pjr-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.pjr-tri-label { font-weight: 600; }
.pjr-tri { padding: 8px 10px; border: 1px solid var(--color-border-field); border-radius: var(--radius-md, 8px); background: var(--color-bg-default); color: var(--color-text-primary); }
.pjr-switch { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px; color: inherit; }
.pjr-switch-visuel { width: 40px; height: 22px; border-radius: var(--radius-full, 999px); background: var(--color-border-subtle); position: relative; flex: none; }
.pjr-switch-visuel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-white); transition: transform 120ms; }
.pjr-switch[aria-checked="true"] .pjr-switch-visuel { background: var(--color-bg-primary); }
.pjr-switch[aria-checked="true"] .pjr-switch-visuel::after { transform: translateX(18px); }
.pjr-note { font-size: 0.85rem; color: var(--color-text-secondary); }
.pjr-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pjr-carte { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md, 8px); background: var(--color-bg-default); padding: 14px; }
.pjr-carte:hover { background: var(--color-bg-subtle); }
.pjr-carte--archivee { background: var(--color-bg-subtle); }
.pjr-carte-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pjr-carte-nom { margin: 0; font-size: 1rem; flex: 1 1 auto; min-width: 0; }
.pjr-nom-lien { color: var(--color-link); text-decoration: underline; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.pjr-carte-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.pjr-iconbtn { min-width: 44px; min-height: 44px; border: 1px solid var(--color-border-card); border-radius: var(--radius-md, 8px); background: none; color: inherit; }
.pjr-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-full, 999px); padding: 3px 10px; font-size: 0.8rem; text-decoration: none; border: 1px solid transparent; }
.pjr-badge--info { background: var(--color-status-info-bg); color: var(--color-status-info-text); }
.pjr-badge--warning { background: var(--color-status-warning-bg); color: var(--color-status-warning-text); }
.pjr-badge--action { background: var(--color-status-warning-bg); color: var(--color-status-warning-text); }
.pjr-badge--success { background: var(--color-status-success-bg); color: var(--color-status-success-text); }
.pjr-badge--archive { background: var(--color-bg-subtle); color: var(--color-text-secondary); }
.pjr-pastille { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pjr-pastille--info { background: var(--color-status-info-graphic); }
.pjr-pastille--warning { background: var(--color-status-warning-graphic); }
.pjr-pastille--success { background: var(--color-status-success-graphic); }
.pjr-activite { font-size: 0.85rem; color: var(--color-text-secondary); }
.pjr-stepper { display: inline-flex; align-items: center; gap: 8px; }
.pjr-stepper-points { display: inline-flex; gap: 4px; }
.pjr-point { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--color-border-subtle); background: transparent; }
.pjr-point--faite { background: var(--color-status-success-graphic); border-color: transparent; }
.pjr-point--courante { background: var(--color-bg-primary); border-color: transparent; }
.pjr-stepper-etape { font-size: 0.8rem; color: var(--color-text-secondary); }
.pjr-menu { margin-top: 8px; border: 1px solid var(--color-border-card); border-radius: var(--radius-md, 8px); background: var(--color-bg-raised); box-shadow: var(--shadow-md, 0 6px 20px rgba(10, 37, 64, 0.12)); display: grid; }
.pjr-menu-item { min-height: 44px; padding: 10px 16px; background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.pjr-menu-item:hover { background: var(--color-bg-subtle); }
.pjr-dialog-fond { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-bg-inverse) 45%, transparent); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; z-index: 40; }
.pjr-dialog { width: 100%; max-width: 480px; background: var(--color-bg-raised); border: 1px solid var(--color-border-card); border-radius: var(--radius-md, 8px); padding: 20px; }
.pjr-dialog-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pjr-dialog-titre { margin: 0; font-size: 1.1rem; }
.pjr-dialog-actions { justify-content: flex-end; margin: 16px 0 0; }
.pjr-compteur { font-size: 0.8rem; color: var(--color-text-secondary); }
.pjr-quota-refus { display: grid; gap: 8px; background: var(--color-bg-trust); border: 1px solid var(--color-border-card); border-radius: var(--radius-md, 8px); padding: 14px; margin: 12px 0; }
.pjr-quota-refus-titre { font-weight: 700; margin: 0; }
@media (max-width: 560px) {
  .pjr-carte-file { flex-direction: column; align-items: flex-start; }
  .pjr-barre-cta { margin-left: 0; }
  .pjr-menu { position: static; }
}

/* ── REPRISE-606 — inbox (cloche + badge + tiroir). Ancre hors du flux, au-dessus des pages ;
   le tiroir est une surcouche (role=dialog) jamais un bloc de page. Tokens DS exclusivement
   (gardes R2/R3 — MESURE-COUVERTURE-DS) ; le scrim est --color-tint-navy-12, seule teinte
   d'overlay du DS (même question ouverte que chat-mvp, voir R2-RAPPORT-AMBIGUITES). */
.inbox-ancre { position: fixed; top: 0.5rem; right: 0.75rem; z-index: 70; }
.inbox-entree { position: relative; display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.4rem 0.6rem; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  background: var(--color-bg-raised); color: var(--color-text-primary); cursor: pointer; font: inherit; }
.inbox-badge { min-width: 1.1rem; padding: 0 0.3rem; border-radius: var(--radius-full);
  background: var(--color-status-danger-graphic); color: var(--color-white); font-size: 0.75rem; text-align: center; line-height: 1.2; }
.inbox-pulse { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-gray-450);
  animation: inbox-pulse 1.2s var(--motion-easing-standard) infinite; }
@keyframes inbox-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }
.inbox-fond { position: fixed; inset: 0; background: var(--color-tint-navy-12); z-index: 71; }
.inbox-panneau { position: fixed; top: 0; right: 0; height: 100vh; width: min(24rem, 92vw); z-index: 72;
  background: var(--color-bg-raised); box-shadow: var(--shadow-brand-modal); padding: 1rem; overflow-y: auto; }
.inbox-panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.inbox-panneau-titre { margin: 0; font-weight: var(--font-weight-medium); }
.inbox-fermer { border: 0; background: none; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0.25rem; color: var(--color-text-primary); }
.inbox-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.inbox-item { display: grid; gap: 0.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border-subtle); }
.inbox-lien { color: var(--color-link); text-decoration: underline; }
.inbox-item-titre { color: var(--color-text-secondary); font-size: 0.875rem; }
.inbox-puce { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-accent); }
.inbox-skeleton .inbox-sk { height: 0.875rem; margin: 0.5rem 0; border-radius: var(--radius-sm);
  background: var(--color-gray-50); animation: inbox-pulse 1.2s var(--motion-easing-standard) infinite; }

/* Gitea #82 (C3) — markdown rendu dans les bulles assistant du chat projet intégré
   (lib/markdown.mjs). Typographie sobre bornée à la bulle. */
.piece-assistant .content { white-space: normal; }
.fil .content h1, .fil .content h2, .fil .content h3,
.fil .content h4, .fil .content h5, .fil .content h6 { margin: 8px 0 4px; line-height: 1.25; font-size: 1.05em; }
.fil .content h1 { font-size: 1.3em; }
.fil .content h2 { font-size: 1.18em; }
.fil .content > :first-child { margin-top: 0; }
.fil .content > :last-child { margin-bottom: 0; }
.fil .content ul, .fil .content ol { margin: 4px 0; padding-left: 1.5em; }
.fil .content li + li { margin-top: 2px; }
.fil .content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--color-gray-50); border-radius: 4px; padding: 0 0.25em; }

/* Gitea #88 (C10) — zone de description du chat projet (« Votre message ») : au moins
   ~80 colonnes × 10 lignes visibles sur grand écran + redimensionnement vertical manuel.
   Petits écrans : comportement actuel strictement préservé (aucune règle hors media query). */
@media (min-width: 1024px) {
  .composer textarea {
    min-width: 80ch;
    min-height: 15em; /* ≈ 10 lignes ; exigence « au moins », interligne courant du portail */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    resize: vertical;
  }
}

/* --- US-278 — accueil du portail (app.devwisp.com/) ------------------------------------------ */
.portal-main--accueil { max-width: 1080px; }
.accueil-hero { max-width: 820px; padding: 32px 0 8px; }
.accueil-surtitre { margin: 0 0 8px; color: var(--color-link); font-weight: var(--font-weight-bold, 700); font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; }
.accueil-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); line-height: 1.15; margin: 0 0 16px; }
.accueil-intro { max-width: 68ch; margin: 0 0 8px; color: var(--color-text-secondary); font-size: 1.12rem; }
.accueil-hero .portal-lien-secondaire, .portal-head .portal-lien-secondaire { min-height: 44px; display: inline-flex; align-items: center; }
.accueil-valeurs { list-style: none; margin: 28px 0 48px; padding: 0; display: grid; gap: var(--space-3, 12px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.accueil-valeurs li { background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md, 8px); padding: var(--space-4, 16px); }
.accueil-prix { border-top: 1px solid var(--color-border-subtle); padding: 40px 0 12px; }
.accueil-prix h2 { margin: 0 0 12px; font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem); }
.accueil-prix-grille { display: grid; gap: var(--space-4, 16px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 20px 0; }
.accueil-prix-carte { display: flex; flex-direction: column; border: 1px solid var(--color-border-card); border-radius: var(--radius-md, 8px); background: var(--color-bg-raised); padding: var(--space-5, 20px); }
.accueil-prix-carte h3 { margin: 0 0 8px; font-size: 1.15rem; }
.accueil-prix-description { margin: 0 0 18px; color: var(--color-text-secondary); font-size: 0.95rem; }
.accueil-prix-montant { margin: auto 0 4px; font-variant-numeric: tabular-nums; }
.accueil-prix-montant strong { font-size: 1.9rem; line-height: 1.1; }
.accueil-prix-depuis, .accueil-prix-unite, .accueil-prix-redevance { color: var(--color-text-secondary); }
.accueil-prix-depuis, .accueil-prix-unite { font-size: 0.85rem; }
.accueil-prix-redevance { margin: 0 0 8px; font-size: 0.9rem; }
.accueil-pied { border-top: 1px solid var(--color-border-subtle); margin-top: 40px; padding-top: 20px; }
.accueil-pied nav { display: flex; flex-wrap: wrap; gap: var(--space-4, 16px); margin-bottom: 8px; }
.accueil-pied a { color: var(--color-link); min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 479px) {
  .accueil-hero { padding-top: 16px; }
  .accueil-valeurs { margin-bottom: 32px; }
}

/* --- US-285 — Connexion (page /connexion) ---------------------------------------------------- */
.connexion { max-width: 60ch; padding: 32px 0; }
.connexion h1 { margin: 0 0 12px; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.connexion-intro { color: var(--color-text-secondary); margin: 0 0 20px; }
.connexion-erreur { border: 1px solid var(--color-status-danger-text); border-radius: var(--radius-md, 8px); padding: 12px 14px; color: var(--color-status-danger-text); margin: 0 0 16px; }
.connexion .portal-actions { gap: 12px; flex-wrap: wrap; }
.connexion .btn-primary { min-height: 48px; }
.connexion-inscription { margin: 18px 0 0; }
.connexion-inscription a { color: var(--color-link); min-height: 44px; display: inline-flex; align-items: center; }
.connexion .portal-mention { margin-top: 18px; }

/* --- US-285 — Surface devis (liste + détail) ------------------------------------------------- */
.portal-main--devis { max-width: 1040px; }
.devis-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-link); }
.devis-liste, .devis-detail { padding: 12px 0 40px; }
.devis-liste h1, .devis-detail h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.devis-intro, .devis-note, .devis-aide, .devis-date, .devis-validite { color: var(--color-text-secondary); }
.devis-lignes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.devis-ligne { border: 1px solid var(--color-border-card); border-radius: var(--radius-md, 8px); background: var(--color-bg-raised); padding: 16px; display: grid; gap: 10px; }
.devis-ligne-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.devis-reference { font-weight: var(--font-weight-bold, 700); font-variant-numeric: tabular-nums; }
.devis-etat { display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: 2px 10px; font-size: 0.85rem; border: 1px solid currentColor; }
.devis-etat--info { color: var(--color-link); }
.devis-etat--success { color: var(--color-status-success-text, #166534); }
.devis-etat--warning { color: var(--color-status-warning-text, #92400E); }
.devis-etat--danger { color: var(--color-status-danger-text); }
.devis-etat--neutral { color: var(--color-text-secondary); }
.devis-montants { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.devis-montants div { display: grid; gap: 2px; }
.devis-montants dt { color: var(--color-text-secondary); font-size: 0.85rem; }
.devis-montants dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-bold, 600); }
.devis-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.devis-actions .btn-secondary, .devis-actions .btn-ghost { min-height: 44px; display: inline-flex; align-items: center; }
.devis-skeleton { height: 92px; border-radius: var(--radius-md, 8px); background: var(--color-gray-50); animation: devis-pulse 1.2s var(--motion-easing-standard) infinite; }
.devis-chargement { color: var(--color-text-secondary); }
.devis-erreur, .devis-session { border: 1px solid var(--color-status-danger-text); border-radius: var(--radius-md, 8px); padding: 14px; display: grid; gap: 10px; }
.devis-erreur .btn-secondary, .devis-session .btn-primary { justify-self: start; }
.devis-introuvable { border: 1px solid var(--color-border-card); border-radius: var(--radius-md, 8px); padding: 16px; }
.devis-pdf-erreur { color: var(--color-status-danger-text); margin: 0; }
.devis-retour-liste, .devis-detail a { color: var(--color-link); }
.devis-retour-liste { display: inline-flex; min-height: 44px; align-items: center; }
.devis-detail-tete { display: grid; gap: 10px; border-bottom: 1px solid var(--color-border-subtle); padding-bottom: 20px; margin-bottom: 24px; }
.devis-postes, .devis-spec, .devis-redevance, .devis-achat, .devis-acceptation, .devis-confirmation, .paiement { margin: 28px 0; }
.devis-postes-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.devis-poste { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md, 8px); padding: 14px; }
.devis-poste h3 { margin: 0 0 8px; font-size: 1rem; }
.devis-poste-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.devis-poste-meta div { display: grid; gap: 2px; }
.devis-poste-meta dt { color: var(--color-text-secondary); font-size: 0.8rem; }
.devis-poste-meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.devis-case { margin: 12px 0; }
.devis-label-case { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; }
.devis-label-case input { margin-top: 3px; }
.devis-label-case a { color: var(--color-link); }
.devis-acceptation .btn-primary { min-height: 48px; }
.devis-acceptation .btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; }
.devis-confirmation { border: 1px solid var(--color-status-success-text, #166534); border-radius: var(--radius-md, 8px); padding: 16px; background: var(--color-bg-subtle); }
.devis-recap { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 12px 0; }
.devis-recap div { display: grid; gap: 2px; }
.devis-recap dt { color: var(--color-text-secondary); font-size: 0.85rem; }
.devis-recap dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-bold, 600); }

/* --- US-285 — Paiement ---------------------------------------------------------------------- */
.paiement { border-top: 1px solid var(--color-border-subtle); padding-top: 24px; }
.paiement h2 { margin: 0 0 8px; }
.paiement h3 { margin: 20px 0 8px; font-size: 1rem; }
.paiement-intro { color: var(--color-text-secondary); }
.paiement-periodicites { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.paiement-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md, 8px); padding: 12px 14px; }
.paiement-libelle { font-weight: var(--font-weight-bold, 600); }
.paiement-montant { font-variant-numeric: tabular-nums; text-align: right; }
.paiement-ajustement { grid-column: 1 / -1; color: var(--color-text-secondary); font-size: 0.85rem; }
.paiement-rib { border: 1px solid var(--color-border-card); border-radius: var(--radius-md, 8px); padding: 14px; background: var(--color-bg-subtle); }
.paiement-rib dl { display: grid; gap: 8px; margin: 0; }
.paiement-rib dl div { display: grid; gap: 2px; }
.paiement-rib dt { color: var(--color-text-secondary); font-size: 0.85rem; }
.paiement-rib dd { margin: 0; }
.paiement-rib-absent { border: 1px dashed var(--color-border-subtle); border-radius: var(--radius-md, 8px); padding: 12px 14px; color: var(--color-text-secondary); }
.paiement-carte { margin-top: 16px; }
.paiement-mention { border-left: 3px solid var(--color-status-warning-text, #92400E); padding: 8px 0 8px 12px; color: var(--color-text-secondary); }
.paiement-aide { color: var(--color-text-secondary); }
.paiement-aide a { color: var(--color-link); }
@keyframes devis-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .devis-skeleton { animation: none; }
}
@media (max-width: 479px) {
  .devis-ligne, .devis-poste, .paiement-ligne { padding: 12px; }
  .paiement-ligne { grid-template-columns: 1fr; }
  .paiement-montant { text-align: left; }
  .devis-actions { flex-direction: column; align-items: stretch; }
  .devis-actions .btn-secondary, .devis-actions .btn-ghost { justify-content: center; }
}

/* --- M6 — Avancement (DIWALL / TRIBU) : reprise + évolutions en points ---------------------- */
.pja { display: grid; gap: 20px; padding: 8px 0 32px; }
.pja-titre { margin: 0 0 4px; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); }
.pja-sous-titre, .pja-evolutions-texte { margin: 0; color: var(--color-text-secondary); }
.pja-reprise, .pja-evolutions { border: 1px solid var(--color-border-card); border-radius: var(--radius-md, 8px); background: var(--color-bg-raised); padding: 18px; }
.pja-reprise { border-left: 3px solid var(--color-accent); background: var(--color-bg-subtle); }
.pja-section-titre { margin: 0 0 8px; font-size: 1.1rem; }
.pja-reprise p, .pja-evolutions-texte { max-width: 76ch; }
.pja-global { display: grid; gap: 8px; margin: 18px 0; padding: 14px; border-radius: var(--radius-md, 8px); background: var(--color-bg-subtle); }
.pja-global-titre { margin: 0; font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-secondary); }
.pja-valeurs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 0; }
.pja-points { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-bold, 700); }
.pja-pct, .pja-us, .pja-note, .pja-maj, .pja-attente { color: var(--color-text-secondary); }
.pja-jauge { width: 100%; height: 10px; accent-color: var(--color-bg-primary); }
.pja-liste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.pja-epic { border-top: 1px solid var(--color-border-subtle); padding-top: 12px; display: grid; gap: 6px; }
.pja-epic:first-child { border-top: 0; padding-top: 0; }
.pja-epic-titre { margin: 0; font-size: 1rem; }
.pja-partiel { border-left: 3px solid var(--color-status-warning-text); padding: 8px 0 8px 12px; background: var(--color-status-warning-bg); border-radius: var(--radius-sm, 6px); }
.pja-maj { font-size: 0.85rem; margin: 14px 0 0; }
.pja-estimation { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--color-border-subtle); font-size: 0.85rem; color: var(--color-text-secondary); max-width: 80ch; }
.pja-vide { margin: 14px 0; color: var(--color-text-secondary); }
.pja-chargement, .pja-erreur { display: grid; gap: 10px; }
.pja-erreur { border: 1px solid var(--color-status-danger-text); border-radius: var(--radius-md, 8px); padding: 14px; }
.pja-erreur .btn-secondary { justify-self: start; }
.pja-skeleton { display: grid; gap: 10px; }
.pja-skeleton span { display: block; height: 14px; border-radius: var(--radius-sm, 6px); background: var(--color-border-subtle); opacity: 0.6; }
.pja-skeleton span:nth-child(2) { width: 70%; }
.pja-skeleton span:nth-child(3) { width: 45%; }
@media (max-width: 479px) {
  .pja-reprise, .pja-evolutions { padding: 14px; }
  .pja-valeurs { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media print {
  .pja { break-inside: avoid; }
  .pja-reprise, .pja-evolutions, .pja-epic { break-inside: avoid; }
  .pja-jauge { print-color-adjust: exact; }
}