/* FacDac : feuille de style unique (site, app, lien public).
   Règles du skill landing-page-design (.claude/skills/landing-page-design/SKILL.md) :
   une police (Geist), tailles de l'échelle Tailwind seulement, espacements de la table, rayons
   Tailwind, aucun dégradé de fond (seulement le texte du hero), bordures sur tout le contour,
   transitions avec la courbe cubic-bezier(0.32, 0.72, 0, 1). */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2-variations"), url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fafafa;
  --paper: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #404040;
  --muted: #737373;
  --line: #e5e5e5;
  --line-2: #d4d4d4;
  --soft: #f4f4f5;
  /* Couleur de la marque : un seul vert, à plat (jamais en dégradé). #047857 sur blanc : contraste 5,5:1. */
  --marque: #047857;
  --marque-fonce: #065f46;
  --marque-soft: #ecfdf5;
  --marque-ligne: #a7f3d0;
  --nuit: #131209;
  --vert: #047857;
  --vert-fonce: #065f46;
  --ok: #15803d;
  --ok-soft: #dcfce7;
  --att: #a16207;
  --att-soft: #fef9c3;
  --non: #b91c1c;
  --non-soft: #fee2e2;
  --info: #1d4ed8;
  --info-soft: #dbeafe;

  /* Échelle de texte (taille / interligne) */
  --text-xs: 12px; --lh-xs: 16px;
  --text-sm: 14px; --lh-sm: 20px;
  --text-base: 16px; --lh-base: 24px;
  --text-lg: 18px; --lh-lg: 28px;
  --text-xl: 20px; --lh-xl: 28px;
  --text-2xl: 24px; --lh-2xl: 32px;
  --text-3xl: 30px; --lh-3xl: 36px;
  --text-4xl: 36px; --lh-4xl: 40px;
  --text-5xl: 48px;
  --text-6xl: 60px;

  /* Espacements */
  --s25: 2px; --s50: 4px; --s75: 8px; --s100: 12px; --s200: 16px; --s300: 24px;
  --s400: 32px; --s500: 40px; --s600: 48px; --s700: 64px; --s800: 80px; --s900: 96px;

  /* Rayons */
  --r-sm: 2px; --r: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --t: 500ms var(--ease);
  --ombre: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);

  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "tnum" 0;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
h2 { font-size: var(--text-xl); line-height: var(--lh-xl); }
h3 { font-size: var(--text-base); line-height: var(--lh-base); }
p, li { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
code { font-family: ui-monospace, monospace; font-size: var(--text-sm); background: var(--soft); padding: 0 var(--s50); border-radius: var(--r); }
[hidden] { display: none !important; }

.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); line-height: var(--lh-sm); }
.tiny { font-size: var(--text-xs); line-height: var(--lh-xs); }
.lead { color: var(--muted); font-size: var(--text-base); line-height: var(--lh-base); margin-top: var(--s50); }
.droite { text-align: right; }
.centre { text-align: center; }
.pre { white-space: pre-wrap; }
.mono { font-family: ui-monospace, monospace; }
.lien { color: var(--marque); text-decoration: underline; text-decoration-color: var(--marque-ligne); text-underline-offset: 3px; transition: text-decoration-color var(--t); }
.lien:hover { text-decoration-color: var(--marque); }
.texte-ok { color: var(--ok); display: flex; gap: var(--s75); align-items: center; }
.texte-non { color: var(--non); }
.texte-attention { color: var(--att); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rangee { display: flex; flex-wrap: wrap; gap: var(--s75); align-items: center; }
.pile { display: flex; flex-direction: column; gap: var(--s200); }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s200); }
.grille-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s200); }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s200); }

.ic { width: 20px; height: 20px; flex: none; }

:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; border-radius: var(--r-md); }

.skip {
  position: absolute; left: var(--s200); top: -64px; z-index: 100;
  background: var(--ink); color: #fff; padding: var(--s75) var(--s100); border-radius: var(--r-lg);
  transition: top var(--t);
}
.skip:focus { top: var(--s200); }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: var(--s75); font-weight: 600; font-size: var(--text-base); letter-spacing: -0.01em; }
.logo-mark {
  width: 24px; height: 24px; border-radius: var(--r-lg); background: var(--marque); color: #fff;
  display: inline-grid; place-items: center; font-size: var(--text-sm); font-weight: 600;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s75);
  padding: var(--s75) var(--s100); border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--text-base); line-height: var(--lh-base); font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--t), border-color var(--t), transform var(--t), color var(--t), opacity var(--t);
}
.btn:hover { background: var(--soft); border-color: var(--muted); }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn .ic { width: 18px; height: 18px; }
.btn-sm { font-size: var(--text-sm); line-height: var(--lh-sm); padding: var(--s50) var(--s100); }
.btn-sm .ic { width: 16px; height: 16px; }
.btn-lg { padding: var(--s100) var(--s200); }
.btn-plein { width: 100%; }
.btn-principal { background: var(--marque); border-color: var(--marque); color: #fff; }
.btn-principal:hover { background: var(--marque-fonce); border-color: var(--marque-fonce); }
.btn-vert { background: var(--vert); border-color: var(--vert); color: #fff; }
.btn-vert:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.btn-danger { color: var(--non); }
.btn-danger:hover { background: var(--non-soft); border-color: var(--non); }
.icone-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-lg);
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color var(--t), color var(--t);
}
.icone-btn:hover { background: var(--non-soft); color: var(--non); }
.icone-btn .ic { width: 18px; height: 18px; }

/* ---------- Champs ---------- */
.champ { display: flex; flex-direction: column; gap: var(--s50); font-size: var(--text-sm); line-height: var(--lh-sm); }
.champ > span { color: var(--ink-2); font-weight: 500; }
.champ small { font-size: var(--text-xs); line-height: var(--lh-xs); }
input, select, textarea {
  font: inherit; font-size: var(--text-base); line-height: var(--lh-base); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: var(--s75) var(--s100); width: 100%; min-width: 0;
  transition: border-color var(--t), box-shadow var(--t);
}
textarea { resize: none; overflow-y: hidden; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marque); box-shadow: 0 0 0 3px var(--marque-soft); }
input[aria-invalid="true"] { border-color: var(--non); box-shadow: 0 0 0 3px var(--non-soft); }
.erreur-champ { color: var(--non); font-size: var(--text-xs); line-height: var(--lh-xs); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; padding: 0; accent-color: var(--marque); flex: none; }
input[type="file"] { padding: var(--s75); }
.case { display: flex; align-items: center; gap: var(--s75); font-size: var(--text-sm); line-height: var(--lh-sm); cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0; }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s100); }
.case-carte {
  display: flex; gap: var(--s100); align-items: flex-start; padding: var(--s200);
  border: 1px solid var(--line-2); border-radius: var(--r-xl); cursor: pointer; background: var(--paper);
  transition: border-color var(--t), background-color var(--t);
}
.case-carte:has(input:checked) { border-color: var(--marque); background: var(--marque-soft); }
.case-carte input { margin-top: var(--s25); }

/* ---------- Pastilles, alertes, avatars ---------- */
.pastille {
  display: inline-flex; align-items: center; gap: var(--s50); white-space: nowrap;
  font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 500;
  padding: var(--s25) var(--s75); border-radius: var(--r-full); background: var(--soft); color: var(--ink-2);
  border: 1px solid transparent;
}
.pastille.ok { background: var(--ok-soft); color: var(--ok); }
.pastille.attention { background: var(--att-soft); color: var(--att); }
.pastille.non { background: var(--non-soft); color: var(--non); }
.pastille.info { background: var(--info-soft); color: var(--info); }
.pastille.gris { background: var(--soft); color: var(--muted); }

.alerte {
  display: flex; gap: var(--s100); align-items: flex-start; flex-wrap: wrap;
  padding: var(--s100) var(--s200); border-radius: var(--r-xl); border: 1px solid;
  font-size: var(--text-sm); line-height: var(--lh-sm); margin-bottom: var(--s200);
}
.alerte > span { flex: 1; min-width: 200px; }
.alerte .ic { width: 18px; height: 18px; margin-top: var(--s25); }
.alerte-ok { background: var(--ok-soft); border-color: #bbf7d0; color: #14532d; }
.alerte-attention { background: var(--att-soft); border-color: #fde68a; color: #713f12; }
.alerte-non { background: var(--non-soft); border-color: #fecaca; color: #7f1d1d; }
.alerte-info { background: var(--info-soft); border-color: #bfdbfe; color: #1e3a8a; }

.avatar {
  width: 40px; height: 40px; border-radius: var(--r-full); flex: none;
  display: inline-grid; place-items: center; background: var(--soft); border: 1px solid var(--line);
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-2);
}
.rond-icone {
  width: 40px; height: 40px; border-radius: var(--r-xl); flex: none;
  display: inline-grid; place-items: center; background: var(--marque-soft); color: var(--marque);
}
.rond-icone.petit { width: 32px; height: 32px; border-radius: var(--r-lg); }
.rond-icone.petit .ic { width: 18px; height: 18px; }
.rond-icone.attention { background: var(--att-soft); color: var(--att); }

.squelette {
  display: block; height: 12px; border-radius: var(--r-full); background: var(--line);
  animation: pulse 1.4s var(--ease) infinite;
}
@keyframes pulse { 50% { opacity: .45; } }

/* =========================================================
   SITE PUBLIC
   ========================================================= */
.wrap { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 var(--s300); }
.site main { overflow-x: clip; padding-top: var(--s800); }

/* Menu flottant (« island ») */
.island-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; pointer-events: none; }
.island {
  pointer-events: auto; margin-top: var(--s300); width: max-content; max-width: calc(100% - var(--s400));
  display: flex; align-items: center; gap: var(--s300);
  padding: var(--s75) var(--s75) var(--s75) var(--s200); border-radius: var(--r-full);
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(0, 0, 0, .08);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--ombre); position: relative; z-index: 2;
}
.island-links { display: flex; gap: var(--s300); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.island-links a { transition: color var(--t); }
.island-links a:hover { color: var(--ink); }
.island-cta { border-radius: var(--r-full); }
.island-links a[aria-current="page"] { color: var(--marque); }
.burger { display: none; position: relative; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; border-radius: var(--r-full); }
.burger span {
  position: absolute; left: 12px; width: 16px; height: 2px; border-radius: var(--r-full); background: var(--ink);
  transition: transform 700ms var(--ease), top 700ms var(--ease);
}
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 22px; }
.menu-ouvert .burger span:first-child { top: 19px; transform: rotate(45deg); }
.menu-ouvert .burger span:last-child { top: 19px; transform: rotate(-45deg); }
.menu {
  pointer-events: auto; position: fixed; inset: 0; z-index: 1;
  background: rgba(255, 255, 255, .8); backdrop-filter: blur(64px); -webkit-backdrop-filter: blur(64px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 700ms var(--ease);
}
.menu-ouvert .menu { opacity: 1; }
.menu ul { display: flex; flex-direction: column; align-items: center; gap: var(--s200); font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: 500; }
.menu li { transform: translateY(48px); opacity: 0; transition: transform 700ms var(--ease), opacity 700ms var(--ease); }
.menu-ouvert .menu li { transform: translateY(0); opacity: 1; }
.menu li:nth-child(1) { transition-delay: 100ms; }
.menu li:nth-child(2) { transition-delay: 150ms; }
.menu li:nth-child(3) { transition-delay: 200ms; }
.menu li:nth-child(4) { transition-delay: 250ms; }
.menu li:nth-child(5) { transition-delay: 300ms; }
.menu li:nth-child(6) { transition-delay: 350ms; }
.menu li:nth-child(7) { transition-delay: 400ms; }
.menu li:nth-child(8) { transition-delay: 450ms; }
.menu li:nth-child(9) { transition-delay: 500ms; }
.menu li:nth-child(10) { transition-delay: 550ms; }

/* Apparition au défilement : seulement si le JavaScript tourne (classe .js sur <html>). */
.js [data-reveal] {
  opacity: 0; transform: translateY(64px); filter: blur(12px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease);
}
.js [data-reveal].vu { opacity: 1; transform: none; filter: none; }

/* Hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s600); align-items: center;
  padding-top: var(--s700); padding-bottom: var(--s800);
}
.surtitre { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--marque); font-weight: 500; margin-bottom: var(--s200); }
.hero-titre { max-width: 680px; font-size: var(--text-5xl); line-height: 1; font-weight: 600; letter-spacing: -0.035em; }
/* Chaque ligne du titre est un bloc : la coupure tombe là où la pensée se coupe, et text-wrap: balance
   évite un mot seul en fin de ligne si une ligne doit elle-même passer sur deux. */
.hero-ligne {
  display: block; text-wrap: balance; padding-bottom: var(--s50);
  background: linear-gradient(90deg, #000000, #666666); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 1280px) { .hero-titre { font-size: var(--text-6xl); } }
.hero-sous { max-width: 680px; margin-top: var(--s300); font-size: var(--text-lg); line-height: var(--lh-lg); color: var(--ink-2); }
.hero-actions { margin-top: var(--s400); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s200); }
.hero-actions .btn .ic { transition: transform var(--t); }
.hero-actions .btn:hover .ic { transform: translateX(4px); }
.preuve {
  margin-top: var(--s400); display: inline-flex; align-items: center; gap: var(--s75);
  font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-2);
  padding: var(--s75) var(--s100); border: 1px solid var(--line); border-radius: var(--r-full); background: var(--paper);
}
.preuve .ic { color: var(--marque); width: 18px; height: 18px; }

/* Démo : la dictée devient une facture */
.demo { position: relative; display: flex; flex-direction: column; gap: var(--s200); }
.demo-dictee, .demo-facture { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl); box-shadow: var(--ombre); }
.demo-dictee { padding: var(--s200); }
.demo-micro { display: flex; align-items: center; gap: var(--s100); }
.demo-rond { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--vert); color: #fff; display: grid; place-items: center; }
.onde { display: flex; align-items: center; gap: var(--s25); height: 32px; flex: 1; }
.onde i { display: block; width: 3px; border-radius: var(--r-full); background: var(--vert); height: 6px; opacity: .8; }
.demo.parle .onde i { animation: onde 900ms var(--ease) infinite alternate; }
.onde i:nth-child(3n) { animation-delay: -200ms; }
.onde i:nth-child(3n+1) { animation-delay: -450ms; }
.onde i:nth-child(4n) { animation-delay: -700ms; }
@keyframes onde { from { height: 4px; } to { height: 28px; } }
.demo-temps { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.demo-texte { margin-top: var(--s100); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-2); min-height: 60px; }
.demo-facture { padding: var(--s300); }
.demo-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s200); padding-bottom: var(--s200); border-bottom: 1px solid var(--line); }
.demo-client { font-weight: 600; }
.demo-lignes { padding: var(--s100) 0; }
.demo-ligne {
  display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s200); padding: var(--s75) 0;
  font-size: var(--text-sm); line-height: var(--lh-sm); border-bottom: 1px solid var(--soft);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease);
}
.demo-desc { font-weight: 500; }
.demo-qte { color: var(--muted); grid-column: 1; font-size: var(--text-xs); line-height: var(--lh-xs); }
.demo-mnt { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; }
.demo-totaux { font-size: var(--text-sm); line-height: var(--lh-sm); display: grid; gap: var(--s50); padding-top: var(--s100); transition: opacity 700ms var(--ease); }
.demo-totaux p { display: flex; justify-content: space-between; color: var(--muted); }
.demo-totaux .demo-total { color: var(--ink); font-weight: 600; font-size: var(--text-lg); line-height: var(--lh-lg); }
.demo-envoyer { margin-top: var(--s200); pointer-events: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.demo.attend .demo-ligne, .demo.attend .demo-totaux, .demo.attend .demo-envoyer { opacity: 0; transform: translateY(16px); filter: blur(4px); }
.demo .demo-ligne.montre { opacity: 1; transform: none; filter: none; }

/* Sections */
.section { padding-top: var(--s800); padding-bottom: var(--s800); }
.section-titre { font-size: var(--text-4xl); line-height: var(--lh-4xl); letter-spacing: -0.02em; max-width: 680px; margin-bottom: var(--s600); }
.carte { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s400); }
.avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s300); }
.carte-avant { background: var(--soft); }
.carte-apres { background: var(--marque-soft); border-color: var(--marque-ligne); }
.etiquette { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--muted); margin-bottom: var(--s200); }
.etiquette-ok { color: var(--vert-fonce); }
.gros-texte { font-size: var(--text-xl); line-height: var(--lh-xl); }

.grille-benefices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s300); }
.benefice { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s300); display: flex; flex-direction: column; gap: var(--s100); transition: transform var(--t), border-color var(--t); }
.benefice:hover { transform: translateY(-2px); border-color: var(--marque-ligne); }
.benefice:nth-child(4) { grid-column: 1 / span 2; }
.benefice h3 { margin-top: var(--s75); }

/* Phrase clé, mot par mot */
.tagline { padding-top: var(--s900); padding-bottom: var(--s900); background: var(--nuit); color: #fff; border-radius: var(--r-3xl); max-width: 1104px; margin: var(--s700) auto; padding-left: var(--s700); padding-right: var(--s700); }
.tagline-texte { max-width: 900px; font-size: var(--text-6xl); line-height: 1; font-weight: 600; letter-spacing: -0.035em; }
.js .tagline-texte .mot { color: rgba(255, 255, 255, .28); transition: color 700ms var(--ease); }
.js .tagline-texte .mot.on { color: #fff; }
.js .tagline-texte .mot.on:nth-last-child(-n+3) { color: #6ee7b7; }

/* Étapes */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s300); counter-reset: etape; }
.etape { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s300); display: flex; flex-direction: column; gap: var(--s100); }
.etape-num { position: absolute; top: var(--s300); right: var(--s300); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--marque); font-weight: 600; font-variant-numeric: tabular-nums; }
.etape h3 { margin-top: var(--s75); }

/* Contenu d'une facture */
.contenu-facture { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s700); align-items: center; }
.contenu-facture .section-titre { margin-bottom: var(--s200); }
.liste-check { margin-top: var(--s300); display: grid; gap: var(--s100); }
.liste-check li { display: flex; gap: var(--s100); align-items: flex-start; }
.liste-check .ic { color: var(--marque); width: 20px; height: 20px; margin-top: var(--s25); }
.papier-incline { transform: rotate(1.5deg); box-shadow: var(--ombre); }

.grille-metiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s200); }
.metier {
  display: flex; justify-content: space-between; align-items: center; padding: var(--s200) var(--s300);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); font-weight: 500;
  transition: border-color var(--t), transform var(--t);
}
.metier:hover { border-color: var(--marque); color: var(--marque); transform: translateY(-2px); }
.metier .ic { transition: transform var(--t); }
.metier:hover .ic { transform: translateX(4px); }

/* FAQ */
.faq-liste { max-width: 800px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s200);
  padding: var(--s300) 0; cursor: pointer; list-style: none; font-weight: 500; font-size: var(--text-lg); line-height: var(--lh-lg);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ic { transition: transform 700ms var(--ease); color: var(--marque); }
.faq-item[open] summary .ic { transform: rotate(45deg); }
.faq-item p { padding-bottom: var(--s300); color: var(--ink-2); max-width: 680px; }

/* Dernier appel */
.final { text-align: center; display: flex; flex-direction: column; align-items: center; background: var(--marque-soft); border: 1px solid var(--marque-ligne); border-radius: var(--r-3xl); max-width: 1104px; margin: var(--s700) auto 0; }
.final-titre { font-size: var(--text-5xl); line-height: 1; letter-spacing: -0.03em; max-width: 680px; }
.final .lead { margin-top: var(--s200); max-width: 560px; }
.final-actions { margin-top: var(--s400); }
.garanties { margin-top: var(--s300); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s300); color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.garanties li { display: flex; align-items: center; gap: var(--s50); }
.garanties .ic { width: 16px; height: 16px; color: var(--marque); }

/* Pied de page */
.site-footer { border-top: 1px solid var(--line); padding: var(--s700) 0; margin-top: var(--s700); background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s400); }
.footer-grid nav { display: flex; flex-direction: column; gap: var(--s75); font-size: var(--text-sm); line-height: var(--lh-sm); }
.footer-grid nav a { color: var(--muted); transition: color var(--t); }
.footer-grid nav a:hover { color: var(--ink); }
.footer-grid p { margin-top: var(--s100); max-width: 320px; }
.footer-titre { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; margin-bottom: var(--s50); }

.legal { padding-top: var(--s700); max-width: 760px; }
.legal h2 { margin-top: var(--s400); margin-bottom: var(--s75); }
.legal p { color: var(--ink-2); }

/* =========================================================
   PAGES SIMPLES (connexion, inscription, erreurs)
   ========================================================= */
.plain { display: flex; justify-content: center; align-items: flex-start; padding: var(--s700) var(--s200); }
.plain main { width: 100%; display: flex; justify-content: center; }
.carte-seule {
  width: 100%; max-width: 440px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl);
  padding: var(--s500) var(--s400); display: flex; flex-direction: column; gap: var(--s200); box-shadow: var(--ombre);
}
.carte-seule h1 { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
.plain-logo { margin-bottom: var(--s200); }
.code-erreur { font-size: var(--text-6xl); line-height: 1; font-weight: 600; color: var(--line-2); letter-spacing: -0.04em; }

/* =========================================================
   APP
   ========================================================= */
.app { background: var(--bg); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 240px; padding: var(--s300) var(--s200);
  background: var(--paper); border: 1px solid var(--line); border-width: 0 1px 0 0;
  display: flex; flex-direction: column; gap: var(--s300); z-index: 20;
}
.sidebar { border: 0; box-shadow: 1px 0 0 var(--line); }
.sidebar-logo { padding: 0 var(--s75); }
.sidebar-nav { display: flex; flex-direction: column; gap: var(--s25); }
.sidebar-nav a {
  display: flex; align-items: center; gap: var(--s100); padding: var(--s75) var(--s100); border-radius: var(--r-lg);
  color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 500;
  transition: background-color var(--t), color var(--t);
}
.sidebar-nav a:hover { background: var(--soft); color: var(--ink); }
.sidebar-nav a[aria-current="page"] { background: var(--marque-soft); color: var(--marque); font-weight: 600; }
.sidebar-pied { margin-top: auto; }
.entreprise-choix { position: relative; }
.entreprise-choix summary {
  display: flex; align-items: center; gap: var(--s75); padding: var(--s75); border-radius: var(--r-xl);
  cursor: pointer; list-style: none; border: 1px solid var(--line); transition: background-color var(--t);
}
.entreprise-choix summary::-webkit-details-marker { display: none; }
.entreprise-choix summary:hover { background: var(--soft); }
.entreprise-choix .avatar { width: 32px; height: 32px; font-size: var(--text-xs); }
.entreprise-nom { flex: 1; font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entreprise-menu {
  position: absolute; bottom: calc(100% + var(--s75)); left: 0; right: 0; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--ombre); padding: var(--s50);
}
.menu-item {
  display: flex; align-items: center; gap: var(--s75); width: 100%; padding: var(--s75) var(--s100);
  border: 0; background: transparent; font: inherit; font-size: var(--text-sm); line-height: var(--lh-sm);
  text-align: left; border-radius: var(--r-lg); cursor: pointer; color: var(--ink);
}
.menu-item:hover { background: var(--soft); }
.menu-item .ic { width: 16px; height: 16px; }

.app-main { margin-left: 240px; padding: var(--s400) var(--s500) var(--s900); max-width: 1200px; }
.tabbar { display: none; }
.mobile-tete { display: none; }
.barre-emettre { display: none; }

/* Boutons de choix entre homonymes : le détail distingue deux clients au même nom. */
.candidat { flex-direction: column; align-items: flex-start; gap: 0; }
.candidat-detail { font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 400; color: var(--muted); }

.page-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s200); flex-wrap: wrap; margin-bottom: var(--s400); }
.page-actions { display: flex; gap: var(--s75); align-items: center; flex-wrap: wrap; }
.retour { display: inline-flex; align-items: center; gap: var(--s50); color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); margin-bottom: var(--s200); transition: color var(--t); }
.retour:hover { color: var(--ink); }
.retour .ic { width: 16px; height: 16px; }

.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s200); margin-bottom: var(--s300); }
.tuile {
  display: flex; flex-direction: column; gap: var(--s50); padding: var(--s300); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-2xl); transition: border-color var(--t), transform var(--t);
}
a.tuile:hover { border-color: var(--marque-ligne); transform: translateY(-2px); }
.tuile-lib { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--muted); font-weight: 500; }
.tuile:first-child .tuile-val { color: var(--marque); }
.tuile-val { font-size: var(--text-3xl); line-height: var(--lh-3xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.bloc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s300); margin-bottom: var(--s300); }
.bloc > h2 { margin-bottom: var(--s200); font-size: var(--text-lg); line-height: var(--lh-lg); }
.bloc-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s200); margin-bottom: var(--s200); }
.bloc-tete h2 { font-size: var(--text-lg); line-height: var(--lh-lg); }
.sous-titre { margin-top: var(--s300); margin-bottom: var(--s50); }
.bloc-danger { border-color: #fecaca; }
.depot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s100); padding: var(--s500) var(--s300); border: 2px dashed var(--marque-ligne); border-radius: var(--r-2xl); background: var(--marque-soft); transition: border-color var(--t), background-color var(--t); }
.depot.survol { border-color: var(--marque); background: #d1fae5; }
.depot input[type="file"] { max-width: 360px; background: var(--paper); }
.depot-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s50); max-width: 640px; }
.table.revue td { vertical-align: top; }
.table.revue td .pastille { margin-left: var(--s50); }
.revue-existant td { color: var(--muted); }
.puce-fichier { padding-right: var(--s100); }
.puce-fichier .ic { width: 16px; height: 16px; color: var(--marque); }
.stripe-etat { display: flex; align-items: center; gap: var(--s100); flex-wrap: wrap; margin: var(--s100) 0 var(--s200); }
.grille-article.stripe-form { grid-template-columns: minmax(0, 1fr) auto; margin-top: var(--s100); }
.form-payer { display: inline-flex; }
.payer-note { margin-top: calc(-1 * var(--s200)); }
.logo-reglage { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s300); align-items: center; }
.logo-cadre { height: 104px; border: 1px dashed var(--line-2); border-radius: var(--r-xl); display: flex; flex-direction: column; gap: var(--s75); align-items: center; justify-content: center; padding: var(--s100); background: var(--soft); text-align: center; }
.logo-cadre img { max-width: 100%; max-height: 80px; object-fit: contain; }
.tuiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ouvrir-projet { margin-bottom: var(--s200); }
.acompte { align-items: flex-end; margin-bottom: var(--s200); }
.acompte .champ { flex: 1; min-width: 96px; }
.saisie-pct { display: inline-flex; align-items: center; gap: var(--s50); }
.saisie-pct input { width: 88px; text-align: right; }
.table.avancement td .tiny { display: block; }

/* Étapes d'un projet */
.etapes-projet { display: flex; flex-direction: column; gap: var(--s100); margin-bottom: var(--s200); }
.etape-projet { display: flex; gap: var(--s100); align-items: flex-start; }
.etape-projet > span:last-child { display: flex; flex-direction: column; }
.etape-rond { width: 24px; height: 24px; flex: none; border-radius: var(--r-full); border: 2px solid var(--line-2); display: grid; place-items: center; margin-top: var(--s25); }
.etape-projet.fait .etape-rond { background: var(--marque); border-color: var(--marque); color: #fff; }
.etape-rond .ic { width: 14px; height: 14px; }

/* Signature du client */
.signature-cadre { position: relative; border: 1px dashed var(--line-2); border-radius: var(--r-xl); background: var(--paper); }
.signature-cadre.signee { border-style: solid; border-color: var(--marque); }
.signature-cadre canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; }
.signature-cadre::after { content: "Signez ici"; position: absolute; left: var(--s200); bottom: var(--s100); font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); pointer-events: none; }
.signature-cadre.signee::after { content: none; }
.signature-effacer { position: absolute; top: var(--s75); right: var(--s75); }
.signature { margin: 0; }
.signature img { max-width: 240px; height: auto; border-bottom: 1px solid var(--line-2); }
.bloc-danger .small { margin-bottom: var(--s100); }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s300); align-items: start; }

.vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s75); padding: var(--s500) var(--s200); max-width: 480px; margin: 0 auto; }
.vide .rond-icone { margin-bottom: var(--s75); }
.vide .rangee { margin-top: var(--s100); justify-content: center; }

.todos { display: flex; flex-direction: column; gap: var(--s75); }
.todo { display: flex; align-items: center; gap: var(--s100); padding: var(--s100); border: 1px solid var(--line); border-radius: var(--r-xl); }
.todo-texte { flex: 1; font-size: var(--text-sm); line-height: var(--lh-sm); }

.liste { display: flex; flex-direction: column; }
.liste > li + li { border-top: 1px solid var(--line); }
.ligne-liste { display: flex; align-items: center; gap: var(--s100); padding: var(--s100) var(--s75); border-radius: var(--r-xl); transition: background-color var(--t); }
a.ligne-liste:hover { background: var(--soft); }
.ligne-principale { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ligne-titre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-principale .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-droite { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s50); }
.montant { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }

.onglets { display: flex; gap: var(--s50); margin-bottom: var(--s300); overflow-x: auto; padding: var(--s50); background: var(--soft); border-radius: var(--r-xl); width: max-content; max-width: 100%; }
.onglets a { padding: var(--s50) var(--s100); border-radius: var(--r-lg); font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background-color var(--t), color var(--t); }
.onglets a:hover { color: var(--ink); }
.onglets a[aria-current="page"] { background: var(--paper); color: var(--marque); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.deroulant { position: relative; }
.deroulant > summary { list-style: none; }
.deroulant > summary::-webkit-details-marker { display: none; }
.deroulant-panneau {
  position: absolute; right: 0; top: calc(100% + var(--s75)); width: 320px; z-index: 30;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s200); box-shadow: var(--ombre);
}

.puces { display: flex; flex-wrap: wrap; gap: var(--s75); margin-top: var(--s75); }
.puce { display: inline-flex; align-items: center; gap: var(--s50); padding: var(--s25) var(--s25) var(--s25) var(--s100); border: 1px solid var(--line); border-radius: var(--r-full); font-size: var(--text-sm); line-height: var(--lh-sm); }
.puce-x { width: 24px; height: 24px; border: 0; background: transparent; border-radius: var(--r-full); display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.puce-x:hover { background: var(--non-soft); color: var(--non); }
.puce-x .ic { width: 14px; height: 14px; }

.projet { border: 1px solid var(--line); border-radius: var(--r-xl); margin-bottom: var(--s75); }
.projet > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s100); padding: var(--s100) var(--s200); cursor: pointer; list-style: none; }
.projet > summary::-webkit-details-marker { display: none; }
.projet > summary > span:first-child { display: inline-flex; align-items: center; gap: var(--s75); }
.projet > form { padding: 0 var(--s200) var(--s200); }

.grille-article { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr auto auto; gap: var(--s100); align-items: end; }
.liste-articles .article + .article { border-top: 1px solid var(--line); }
.liste-articles summary { display: flex; align-items: center; gap: var(--s200); padding: var(--s100) var(--s75); cursor: pointer; list-style: none; border-radius: var(--r-xl); transition: background-color var(--t); }
.liste-articles summary::-webkit-details-marker { display: none; }
.liste-articles summary:hover { background: var(--soft); }
.liste-articles form { padding: var(--s100) var(--s75) var(--s200); }
.article.inactif .ligne-titre { color: var(--muted); }

.barre-action { position: sticky; bottom: var(--s200); display: flex; justify-content: flex-end; z-index: 5; }
.reglages .bloc .champ + .champ, .reglages .bloc .grille-2, .reglages .bloc .grille-3 { margin-top: var(--s200); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--lh-sm); }
.table th { text-align: left; font-weight: 500; color: var(--muted); padding: var(--s75) var(--s100); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: var(--s100); border-bottom: 1px solid var(--soft); font-variant-numeric: tabular-nums; }
.table th.droite { text-align: right; }

/* ---------- Fil ---------- */
.fil-page { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: var(--s300); flex: 1; min-height: 0; }
.conversation { display: flex; flex-direction: column; min-height: 0; }

/* Les journées du fil, comme une liste de conversations. */
.journees { display: flex; flex-direction: column; min-height: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s100); }
.journees-titre { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--muted); font-weight: 600; padding: var(--s50) var(--s100) var(--s100); }
.journees-entete { display: flex; justify-content: space-between; align-items: baseline; padding-right: var(--s100); }
.journees-compte { display: none; }
.btn-conversations { display: none; }
.journees-liste { display: flex; flex-direction: column; gap: var(--s25); overflow-y: auto; min-height: 0; }
.journee { display: flex; flex-direction: column; gap: var(--s25); padding: var(--s100); border-radius: var(--r-xl); transition: background-color var(--t); }
.journee:hover { background: var(--soft); }
.journee.active { background: var(--marque-soft); }
.journee-tete, .journee-bas { display: flex; justify-content: space-between; align-items: center; gap: var(--s75); }
.journee-nom { font-weight: 600; font-size: var(--text-sm); line-height: var(--lh-sm); }
.journee.active .journee-nom { color: var(--marque); }
.journee-heure { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.journee-extrait { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.journee-badge { flex: none; min-width: 20px; height: 20px; padding: 0 var(--s50); border-radius: var(--r-full); background: var(--att); color: #fff; font-size: var(--text-xs); line-height: 20px; text-align: center; font-weight: 600; }
.note-jour { display: flex; align-items: center; gap: var(--s75); margin-bottom: var(--s75); }
.note-jour .ic { width: 16px; height: 16px; color: var(--marque); }
/* Le fil ne fait pas défiler la page : l'en-tête et le composeur restent en place, seule la
   conversation défile (comme une messagerie). */
html:has(.fil-page), body:has(.fil-page) { height: 100%; overflow: hidden; }
.app-main:has(.fil-page) { height: 100dvh; display: flex; flex-direction: column; padding-bottom: var(--s300); }
.fil-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s200); flex-wrap: wrap; margin-bottom: var(--s300); }
.contexte { display: flex; flex-direction: column; gap: var(--s50); min-width: 260px; }
.fil { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--s300); padding: 0 var(--s25) var(--s300); }
.fil > :first-child { margin-top: auto; }
.capture { display: flex; flex-direction: column; gap: var(--s100); }
.bulle { max-width: 640px; padding: var(--s100) var(--s200); border-radius: var(--r-2xl); position: relative; font-size: var(--text-base); line-height: var(--lh-base); }
.bulle-moi { align-self: flex-end; background: var(--marque); color: #fff; border-bottom-right-radius: var(--r-md); }
.bulle-source { display: flex; align-items: center; gap: var(--s50); font-size: var(--text-xs); line-height: var(--lh-xs); color: rgba(255, 255, 255, .7); margin-bottom: var(--s50); }
.bulle-source .ic { width: 14px; height: 14px; }
.bulle-pieces { display: flex; flex-wrap: wrap; gap: var(--s75); margin-bottom: var(--s75); }
.bulle-photo img { display: block; width: 136px; height: 136px; object-fit: cover; border-radius: var(--r-lg); }
.bulle-fichier { display: inline-flex; align-items: center; gap: var(--s50); padding: var(--s50) var(--s100); border-radius: var(--r-lg); background: rgba(255, 255, 255, .16); font-size: var(--text-sm); line-height: var(--lh-sm); }
.bulle-saisie { flex-wrap: wrap; }
.fichiers-choisis { display: flex; flex-wrap: wrap; gap: var(--s50); width: 100%; padding: var(--s50) var(--s100) 0; }
.fichier-choisi { display: inline-flex; align-items: center; gap: var(--s50); padding: var(--s25) var(--s75); border-radius: var(--r-full); background: var(--marque-soft); color: var(--marque); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 500; max-width: 200px; }
.fichier-choisi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grille-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s100); margin-bottom: var(--s200); }
.piece { display: flex; flex-direction: column; gap: var(--s75); padding: var(--s75); border: 1px solid var(--line); border-radius: var(--r-xl); }
.piece.piece-visible { border-color: var(--marque-ligne); background: var(--marque-soft); }
.piece img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.piece-fichier { display: flex; align-items: center; gap: var(--s50); padding: var(--s200) var(--s100); font-size: var(--text-sm); line-height: var(--lh-sm); word-break: break-word; }
.piece-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--s50); }
.piece-actions .btn { flex: 1; }
.ajout-pieces label { cursor: pointer; }
.papier-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s100); margin-top: var(--s75); }
.papier-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.bulle-heure { display: block; text-align: right; font-size: var(--text-xs); line-height: var(--lh-xs); color: rgba(255, 255, 255, .6); margin-top: var(--s50); }
.reponse { align-self: flex-start; width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: var(--s75); }
.passage { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s200); display: flex; flex-direction: column; gap: var(--s100); }
.passage.lien-suggere { border-color: #fde68a; }
.passage.lien-aucun { border-color: #fde68a; background: #fffdf3; }
.passage-tete { display: flex; align-items: center; gap: var(--s100); }
.passage-qui { flex: 1; min-width: 0; }
.passage-doc {
  display: flex; align-items: center; gap: var(--s100); padding: var(--s100); border: 1px solid var(--line);
  border-radius: var(--r-xl); font-size: var(--text-sm); line-height: var(--lh-sm); transition: border-color var(--t), background-color var(--t);
}
.passage-doc:hover { border-color: var(--marque); background: var(--marque-soft); }
.passage-doc > span:first-of-type { flex: 1; font-weight: 500; }
.passage-changer summary { cursor: pointer; width: max-content; }
.paiement-dicte { display: flex; align-items: center; gap: var(--s100); padding: var(--s100); border: 1px solid var(--marque-ligne); background: var(--marque-soft); border-radius: var(--r-xl); }
.passage-changer[open] summary { margin-bottom: var(--s75); }
.choix-client { display: flex; gap: var(--s75); margin-top: var(--s75); }
.choix-client select, .choix-client input { font-size: var(--text-sm); line-height: var(--lh-sm); padding: var(--s50) var(--s100); }
.extrait { color: var(--ink-2); border-left: 0; padding: var(--s75) var(--s100); background: var(--soft); border-radius: var(--r-lg); }

.composeur {
  position: relative; flex: none; display: flex; align-items: flex-end; gap: var(--s75);
  padding: var(--s75); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-3xl); box-shadow: var(--ombre);
}
.bulle-saisie { flex: 1; position: relative; display: flex; align-items: center; }
.bulle-saisie textarea { border: 0; box-shadow: none; resize: none; overflow-y: hidden; max-height: 200px; padding: var(--s75) var(--s100); background: transparent; }
.bulle-saisie textarea:focus { box-shadow: none; }
.minuteur { position: absolute; left: var(--s100); color: var(--non); font-variant-numeric: tabular-nums; font-weight: 500; display: flex; align-items: center; gap: var(--s75); }
.minuteur::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--non); animation: pulse 1s var(--ease) infinite; }
.rond {
  width: 40px; height: 40px; border-radius: var(--r-full); border: 0; display: grid; place-items: center; cursor: pointer; flex: none; color: #fff;
  transition: background-color var(--t), transform var(--t), opacity var(--t);
}
.rond:active { transform: scale(0.94); }
.rond:disabled { opacity: .4; cursor: not-allowed; }
.rond-vert { background: var(--vert); }
.rond-vert:hover:not(:disabled) { background: var(--vert-fonce); }
.rond-noir { background: var(--marque); }
.rond .ic-stop { display: none; }
/* Pièce jointe : vert pâle de la marque, icône verte (la règle .rond met l'icône en blanc). */
.rond.rond-clair { background: var(--marque-soft); color: var(--marque); box-shadow: inset 0 0 0 1px var(--marque-ligne); cursor: pointer; }
.rond.rond-clair:hover { background: var(--marque-ligne); }
.rond.rond-clair .ic { width: 20px; height: 20px; }
.enregistre .rond-vert { background: var(--non); }
.enregistre .rond .ic-micro { display: none; }
.enregistre .rond .ic-stop { display: block; }
.enregistre textarea { visibility: hidden; }
.attente { display: none; position: absolute; left: var(--s200); right: var(--s200); bottom: calc(100% + var(--s200)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s200); flex-direction: column; gap: var(--s75); }
.attente .ligne-a { width: 62%; }
.attente .ligne-b { width: 38%; }
.htmx-request .attente, .attente.htmx-request, .composeur.envoi .attente { display: flex; }

/* ---------- Document ---------- */
.doc-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s300); align-items: start; }
.doc-cote .collant { position: sticky; top: var(--s300); }
.papier { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s400); margin-bottom: var(--s300); display: flex; flex-direction: column; gap: var(--s200); }
.papier-tete { display: flex; justify-content: space-between; gap: var(--s300); padding-bottom: var(--s200); border-bottom: 2px solid var(--marque); }
.papier-emetteur { font-weight: 600; font-size: var(--text-lg); line-height: var(--lh-lg); }
.papier-titre { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: 600; letter-spacing: -0.02em; }
.papier-numero { font-weight: 500; font-variant-numeric: tabular-nums; }
.papier-parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s300); }
.etiquette-papier { font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s50); }
.papier-mention .etiquette-papier { margin-bottom: var(--s25); }
.papier-lignes { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--lh-sm); }
.papier-lignes th { background: var(--soft); font-weight: 500; color: var(--muted); text-align: left; padding: var(--s75) var(--s100); }
.papier-lignes th.droite { text-align: right; }
.papier-lignes td { padding: var(--s100); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; vertical-align: top; }
.papier-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--lh-sm); }
.papier-table td { padding: var(--s75) 0; border-bottom: 1px solid var(--soft); font-variant-numeric: tabular-nums; }
.papier-totaux { display: grid; gap: var(--s50); font-size: var(--text-sm); line-height: var(--lh-sm); }
.papier-totaux p { display: flex; justify-content: space-between; color: var(--muted); }
.papier-total { color: var(--ink) !important; font-weight: 600; font-size: var(--text-lg); line-height: var(--lh-lg); padding-top: var(--s75); border-top: 1px solid var(--ink); }

.totaux { margin-left: auto; width: 100%; max-width: 320px; display: grid; gap: var(--s50); font-size: var(--text-sm); line-height: var(--lh-sm); }
.totaux p { display: flex; justify-content: space-between; gap: var(--s200); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.totaux .total-fort { color: var(--ink); font-weight: 600; font-size: var(--text-lg); line-height: var(--lh-lg); padding-top: var(--s75); border-top: 2px solid var(--marque); }
.totaux .mention { display: block; }

.papier-edition { gap: var(--s300); }
.entete-doc { display: flex; flex-direction: column; gap: var(--s100); padding-bottom: var(--s200); border-bottom: 1px solid var(--line); }
.plus-options summary { cursor: pointer; width: max-content; }
.plus-options[open] { display: flex; flex-direction: column; gap: var(--s100); }
.lignes-edit { display: flex; flex-direction: column; }
.ligne-edit { display: grid; grid-template-columns: minmax(0, 1fr) 64px 72px 88px 96px 112px; gap: var(--s75); align-items: start; padding: var(--s75) 0; border-bottom: 1px solid var(--soft); }
.ligne-entete { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); font-weight: 500; padding: 0 0 var(--s75); border-bottom: 1px solid var(--line); }
.ligne-edit input { font-size: var(--text-sm); line-height: var(--lh-sm); padding: var(--s50) var(--s75); border-color: transparent; background: transparent; }
.ligne-edit input:hover { border-color: var(--line-2); }
.ligne-edit input:focus { border-color: var(--ink); background: var(--paper); }
.ligne-edit .montant { padding-top: var(--s50); font-size: var(--text-sm); line-height: var(--lh-sm); }
.ligne-alerte { background: #fffdf3; border-radius: var(--r-lg); }
.ligne-note { display: flex; align-items: center; gap: var(--s50); font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--att); padding: var(--s25) var(--s75); }
.ligne-note .ic { width: 14px; height: 14px; }
.ligne-actions { display: flex; align-items: center; gap: var(--s50); justify-content: flex-end; }
.taxe { display: flex; align-items: center; gap: var(--s25); font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); cursor: pointer; }
.taxe input { width: 14px; height: 14px; }
.vide-lignes { padding: var(--s200) 0; }
.ajout-ligne { display: grid; grid-template-columns: 2fr 2fr 72px 80px 96px auto; gap: var(--s75); align-items: center; padding: var(--s100); background: var(--soft); border-radius: var(--r-xl); }
.ajout-ligne input, .ajout-ligne select { font-size: var(--text-sm); line-height: var(--lh-sm); padding: var(--s50) var(--s75); }

.verifs { display: flex; flex-direction: column; gap: var(--s75); margin-bottom: var(--s200); }
.verif { display: flex; gap: var(--s75); align-items: flex-start; font-size: var(--text-sm); line-height: var(--lh-sm); }
.verif .ic { width: 18px; height: 18px; margin-top: var(--s25); }
.verif.non { color: var(--non); }
.verif.attention { color: var(--att); }
.total-cote { font-size: var(--text-3xl); line-height: var(--lh-3xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--s200); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--s75); }
.doc-cote .bloc .btn-plein + .tiny { margin-top: var(--s75); margin-bottom: var(--s200); }
.lien-copie { display: flex; gap: var(--s75); margin-bottom: var(--s75); }
.envoi { margin-top: var(--s100); }
.envoi > summary { list-style: none; }
.envoi > summary::-webkit-details-marker { display: none; }
.envoi[open] > summary { margin-bottom: var(--s100); }
.envoi textarea { font-size: var(--text-sm); line-height: var(--lh-sm); }
.envoi-rappel > summary { color: var(--att); border-color: #fde68a; }
.lien-copie input { font-size: var(--text-sm); line-height: var(--lh-sm); padding: var(--s50) var(--s75); background: var(--soft); }
.historique { display: flex; flex-direction: column; gap: var(--s100); font-size: var(--text-sm); line-height: var(--lh-sm); }
.historique li { display: flex; flex-direction: column; padding-left: var(--s200); position: relative; }
.historique li::before { content: ""; position: absolute; left: 0; top: var(--s75); width: 6px; height: 6px; border-radius: var(--r-full); background: var(--marque); }
.empreinte { margin-top: var(--s200); }
.source { margin: 0 0 var(--s75); padding: var(--s100) var(--s200); background: var(--soft); border-radius: var(--r-xl); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-2); }

/* ---------- Lien public ---------- */
.public { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: var(--s300); }
.public-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s200); flex-wrap: wrap; }
.public-total { font-size: var(--text-4xl); line-height: var(--lh-4xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--s75); }
.public-actions { display: flex; gap: var(--s100); align-items: center; flex-wrap: wrap; }
.public .papier { margin-bottom: 0; }
.public-pied { display: flex; flex-direction: column; gap: var(--s50); text-align: center; padding: var(--s300) 0; }

/* ---------- Messages et dialogue ---------- */
.toasts { position: fixed; bottom: var(--s300); left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: var(--s75); width: max-content; max-width: calc(100% - var(--s400)); pointer-events: none; }
.toast {
  pointer-events: auto; background: var(--ink); color: #fff; padding: var(--s100) var(--s200); border-radius: var(--r-xl);
  font-size: var(--text-sm); line-height: var(--lh-sm); box-shadow: var(--ombre);
  animation: toast 600ms var(--ease);
}
.toast.erreur { background: var(--non); }
@keyframes toast { from { opacity: 0; transform: translateY(16px); } }
dialog.confirmer { border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s300); max-width: 420px; width: calc(100% - var(--s400)); box-shadow: var(--ombre); }
dialog.confirmer::backdrop { background: rgba(10, 10, 10, .32); }
dialog.confirmer p { margin-bottom: var(--s300); }
dialog.confirmer .rangee { justify-content: flex-end; }



/* ---------- Feuille du document (aperçu, document émis, lien public) ---------- */
.papier { gap: var(--s300); }
.papier .papier-tete { align-items: flex-start; padding-bottom: var(--s300); }
.papier-marque { display: flex; gap: var(--s200); align-items: flex-start; min-width: 0; }
.papier-logo { max-width: 160px; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.papier-monogramme {
  width: 48px; height: 48px; flex: none; border-radius: var(--r-xl); background: var(--marque); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: var(--text-lg); line-height: var(--lh-lg); letter-spacing: .02em;
}
.papier-emetteur { font-weight: 600; font-size: var(--text-lg); line-height: var(--lh-lg); }
.papier-coord { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--muted); }
.papier-coord.fort { color: var(--ink-2); }
.papier-titre-bloc { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s25); }
.papier .papier-titre { font-size: var(--text-3xl); line-height: var(--lh-3xl); letter-spacing: -0.02em; }
.papier .papier-numero { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 500; }
.papier-etat { font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600; padding: var(--s25) var(--s75); border-radius: var(--r-full); }
.papier-etat.brouillon { background: var(--att-soft); color: var(--att); }
.papier-etat.paye { background: var(--ok-soft); color: var(--ok); }
.papier-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0;
  border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
}
.papier-meta > div { padding: var(--s100) var(--s200); }
.papier-meta > div + div { box-shadow: -1px 0 0 var(--line); }
.papier-meta dt { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.papier-meta dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.papier-meta-total { background: var(--marque-soft); }
.papier-meta-total dd { color: var(--marque); font-weight: 600; font-size: var(--text-lg); line-height: var(--lh-lg); }
.papier-client { font-weight: 600; }
.papier-lignes { font-size: var(--text-sm); line-height: var(--lh-sm); }
.papier-lignes th { background: var(--soft); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600; padding: var(--s100); }
.papier-lignes th:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.papier-lignes th:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.papier-lignes td { padding: var(--s100); }
.papier-lignes tbody tr:last-child td { border-bottom: 0; }
.papier-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: var(--s300); align-items: start; }
.papier-mentions { display: flex; flex-direction: column; gap: var(--s50); }
.papier-totaux-bloc { max-width: none; }
.papier-acceptation { display: flex; flex-direction: column; gap: var(--s100); }
.papier-acceptation .alerte { margin: 0; }
.papier-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s200); padding-top: var(--s200); box-shadow: 0 -1px 0 var(--line); }
.papier-pied { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); text-align: center; padding-top: var(--s200); box-shadow: 0 -1px 0 var(--line); }

/* Aperçu : la feuille au format Lettre, posée sur un fond, comme à l'impression. */
.apercu-barre {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s200); flex-wrap: wrap;
  position: sticky; top: 0; z-index: 10; padding: var(--s100) 0; margin-bottom: var(--s200); background: var(--bg);
}
.apercu-barre .retour { margin: 0; }
.feuille-fond { background: #e7e5e4; border-radius: var(--r-3xl); padding: var(--s500) var(--s300); }
.feuille { max-width: 816px; margin: 0 auto; }
.feuille .papier { min-height: 1056px; border: 0; border-radius: var(--r-sm); padding: var(--s700); margin: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 48px rgba(0, 0, 0, .12); }

/* Lignes du brouillon : dès que leur zone est étroite (téléphone, ou colonne serrée à côté du
   panneau « Avant d'émettre »), chaque ligne passe sur trois rangées étiquetées. */
.papier-edition { container-type: inline-size; container-name: lignes; }
@container lignes (max-width: 760px) {
  .ligne-entete { display: none; }
  .ligne-edit {
    grid-template-columns: 64px minmax(0, 1fr) 96px; grid-template-areas: "desc desc desc" "qte unite prix" "act act mnt";
    gap: var(--s75); padding: var(--s100) 0; border-bottom: 1px solid var(--line);
  }
  .c-desc { grid-area: desc; } .c-qte { grid-area: qte; } .c-unite { grid-area: unite; } .c-prix { grid-area: prix; }
  .c-mnt { grid-area: mnt; align-self: center; font-size: var(--text-base) !important; line-height: var(--lh-base) !important; font-weight: 600; }
  .c-act { grid-area: act; justify-content: flex-start; }
  .c-qte, .c-unite, .c-prix { display: flex; flex-direction: column; gap: var(--s25); }
  .c-qte::before, .c-unite::before, .c-prix::before { content: attr(data-label); font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); }
  .ligne-edit input { border-color: var(--line-2); background: var(--paper); font-size: var(--text-base); line-height: var(--lh-base); }
  .ligne-edit .c-desc input { font-weight: 500; }
  .taxe { font-size: var(--text-sm); line-height: var(--lh-sm); gap: var(--s50); }
  .taxe input { width: 18px; height: 18px; }
  .ajout-ligne { grid-template-columns: 1fr 1fr; }
  .ajout-ligne select, .ajout-ligne input[name="description"] { grid-column: 1 / -1; }
}

/* =========================================================
   TAILLES D'ÉCRAN
   ========================================================= */
@media (max-width: 1100px) {
  .doc-grille { grid-template-columns: 1fr; }
  .doc-cote .collant { position: static; }
  .grille-article { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1023px) {
  .sidebar { display: none; }
  .app-main { margin-left: 0; padding: var(--s300) var(--s200) var(--s900); }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -1px 0 var(--line); padding: var(--s50) var(--s50) calc(var(--s50) + env(safe-area-inset-bottom));
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s25); padding: var(--s50) 0; font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); border-radius: var(--r-xl); }
  .tabbar a[aria-current="page"] { color: var(--ink); background: var(--soft); }
  .app-main:has(.fil-page) { height: calc(100dvh - 52px); padding-bottom: calc(var(--s700) + env(safe-area-inset-bottom)); }
  .fil-tete { margin-bottom: var(--s200); }
  .fil-tete > div > .muted { display: none; }
  /* Téléphone et tablette, comme une messagerie : une conversation à la fois, et la liste des
     journées sur son propre écran (bouton « Conversations »). */
  .fil-page { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .journees { display: none; }
  .btn-conversations { display: inline-flex; }
  .btn-conversations .journee-badge { margin-left: var(--s25); }
  .fil-tete { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s100); }
  .fil-tete > div { order: 1; flex: 1; min-width: 0; }
  .fil-tete h1 { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
  .btn-conversations { order: 2; }
  .fil-tete .contexte { order: 3; width: 100%; min-width: 0; }
  .vue-liste .conversation { display: none; }
  .vue-liste .journees { display: flex; padding: var(--s50); }
  .vue-liste .journees-titre { font-size: var(--text-2xl); line-height: var(--lh-2xl); color: var(--ink); padding: var(--s75) var(--s100) var(--s100); }
  .vue-liste .journees-compte { display: inline; }
  .vue-liste .journee { padding: var(--s100) var(--s100); }
  .vue-liste .journee + .journee { box-shadow: 0 -1px 0 var(--line); border-radius: 0; }
  .vue-liste .journee.active { border-radius: var(--r-xl); box-shadow: none; }
  .vue-liste .journee-nom { font-size: var(--text-base); line-height: var(--lh-base); }
  .tuiles-4 { grid-template-columns: 1fr 1fr; }
  .barre-action { bottom: var(--s800); padding: var(--s75) 0; background: rgba(250, 250, 250, .92); }
  .barre-action .btn { width: 100%; }

  /* En-tête de l'app sur téléphone et tablette : le logo, et le menu de l'entreprise (réglages,
     tests A/B, changement d'entreprise, déconnexion), absent de la barre du bas. */
  .mobile-tete {
    display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 30;
    padding: var(--s75) var(--s200); background: rgba(250, 250, 250, .92);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line);
  }
  .mobile-menu { position: relative; }
  .mobile-menu > summary { list-style: none; cursor: pointer; }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .mobile-menu .avatar { width: 36px; height: 36px; background: var(--marque-soft); color: var(--marque); border-color: var(--marque-ligne); }
  .mobile-menu-panneau {
    position: absolute; right: 0; top: calc(100% + var(--s75)); width: 264px; padding: var(--s50);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--ombre);
  }
  .mobile-menu-titre { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); font-weight: 600; padding: var(--s75) var(--s100) var(--s50); }
  .mobile-menu-panneau a[aria-current="page"] { color: var(--marque); font-weight: 600; }
  .app-main { padding-top: var(--s200); }

  /* Brouillon : le total et le bouton Émettre restent visibles au dessus de la barre du bas. */
  .barre-emettre {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s100);
    position: sticky; bottom: var(--s800); z-index: 6; margin-top: var(--s200);
    padding: var(--s75) var(--s75) var(--s75) var(--s200); background: var(--paper);
    border: 1px solid var(--marque-ligne); border-radius: var(--r-2xl); box-shadow: var(--ombre);
  }
  .barre-total { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
  .barre-total strong { font-size: var(--text-lg); line-height: var(--lh-lg); }
  .doc-grille { display: flex; flex-direction: column; }
  .doc-principal, .doc-cote { width: 100%; }
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
  .hero { grid-template-columns: 1fr; padding-top: var(--s600); }
  .tagline-texte { font-size: var(--text-5xl); }
  .grille-benefices, .etapes { grid-template-columns: 1fr 1fr; }
  .benefice:nth-child(4) { grid-column: auto; }
  .contenu-facture { grid-template-columns: 1fr; gap: var(--s400); }
}

@media (max-width: 767px) {
  .island-links, .island-cta { display: none; }
  .burger { display: block; }
  .island { gap: var(--s200); padding-left: var(--s200); }
  .hero-titre { font-size: var(--text-4xl); line-height: var(--lh-4xl); }
  .hero-sous { font-size: var(--text-base); line-height: var(--lh-base); }
  .section { padding-top: var(--s600); padding-bottom: var(--s600); }
  .section-titre { font-size: var(--text-3xl); line-height: var(--lh-3xl); margin-bottom: var(--s400); }
  .tagline { padding-top: var(--s700); padding-bottom: var(--s700); }
  .tagline-texte { font-size: var(--text-4xl); line-height: var(--lh-4xl); }
  .final-titre { font-size: var(--text-4xl); line-height: var(--lh-4xl); }
  .avant-apres, .grille-benefices, .etapes, .grille-metiers, .footer-grid { grid-template-columns: 1fr; }
  .demo-dictee { width: 100%; }
  .demo-facture { margin-left: 0; }
  /* Tuiles compactes : une ligne chacune, le libellé à gauche, le montant à droite. */
  .tuiles, .tuiles-4 { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--paper); overflow: hidden; }
  .tuile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--s100); border: 0; border-radius: 0; padding: var(--s100) var(--s200); }
  .tuile + .tuile { border-top: 1px solid var(--line); }
  a.tuile:hover { transform: none; background: var(--soft); }
  .tuile-lib { grid-column: 1; grid-row: 1; color: var(--ink); }
  .tuile > .small { grid-column: 1; grid-row: 2; }
  .tuile-val { grid-column: 2; grid-row: 1 / span 2; font-size: var(--text-xl); line-height: var(--lh-xl); }
  .tagline { width: auto; margin: var(--s400) var(--s200); padding: var(--s600) var(--s300); border-radius: var(--r-2xl); }
  .final { width: auto; margin: var(--s400) var(--s200) 0; padding-left: var(--s300); padding-right: var(--s300); border-radius: var(--r-2xl); }
  .page-tete { margin-bottom: var(--s300); }
  .grille-2, .grille-3, .choix { grid-template-columns: 1fr; }
  .grille-4 { grid-template-columns: 1fr 1fr; }
  .logo-reglage { grid-template-columns: minmax(0, 1fr); }
  .papier { padding: var(--s200); }
  .papier-tete, .papier-parties { grid-template-columns: 1fr; flex-direction: column; }
  .papier-tete .droite { text-align: left; }
  .papier .papier-tete { flex-direction: column; }
  .papier-titre-bloc { text-align: left; align-items: flex-start; }
  .papier-meta { grid-template-columns: 1fr 1fr; }
  .papier-meta-total { grid-column: 1 / -1; box-shadow: 0 -1px 0 var(--line) !important; }
  .papier-bas { grid-template-columns: minmax(0, 1fr); }
  .feuille-fond { padding: var(--s200) var(--s75); border-radius: var(--r-2xl); }
  .feuille .papier { min-height: 0; padding: var(--s300) var(--s200); }
  .papier-lignes thead { display: none; }
  .papier-lignes tr { display: grid; grid-template-columns: auto auto 1fr auto; gap: 0 var(--s75); padding: var(--s100) 0; border-bottom: 1px solid var(--line); }
  .papier-lignes td { border: 0; padding: 0; }
  .papier-lignes td:first-child { grid-column: 1 / -1; font-weight: 500; margin-bottom: var(--s25); }
  .papier-lignes td:nth-child(2), .papier-lignes td:nth-child(3), .papier-lignes td:nth-child(4) { color: var(--muted); text-align: left; }
  .papier-lignes td:nth-child(4)::before { content: "× "; }


  .deroulant-panneau { position: fixed; left: var(--s200); right: var(--s200); top: auto; bottom: 96px; width: auto; }
  .page-tete h1 { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
  .carte-seule { padding: var(--s400) var(--s300); }
  .bulle, .reponse { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .js .tagline-texte .mot { color: var(--ink); }
}

@media print {
  .mobile-tete, .apercu-barre, .toasts { display: none !important; }
  .feuille-fond { background: none; padding: 0; }
  .feuille .papier { box-shadow: none; padding: 0; min-height: 0; }
  html:has(.fil-page), body { overflow: visible !important; height: auto !important; }
  .sidebar, .tabbar, .page-actions, .doc-cote, .retour, .public-actions, .accepter, .public-pied { display: none !important; }
  .app-main { margin: 0; padding: 0; }
  .papier { border: 0; padding: 0; }
}