/* The Essential Lifestyle — Console privée
   Conforme à brand/charte-graphique.md : angles droits, filets greige, aucun effet.

   Les couleurs passent toutes par des jetons sémantiques : le thème clair ne
   redéfinit que ce bloc. `data-theme` est posé par l'application, qui résout
   elle-même la préférence « Système ». */

:root, :root[data-theme="sombre"] {
  color-scheme: dark;

  --fond: #0C0C0C;
  --fond-2: #141414;
  --fond-3: #171717;

  --texte: #F4F1EC;
  --texte-doux: #8A8A8A;
  --texte-lecture: #DCD8D1;
  --texte-fantome: #5A5A5A;

  --accent: #B8AC98;
  --accent-doux: #9A8E7E;
  --sur-accent: #0C0C0C;

  --filet: rgba(184, 172, 152, 0.18);
  --filet-fort: rgba(184, 172, 152, 0.42);

  --inverse-fond: #F4F1EC;
  --inverse-texte: #0C0C0C;

  --danger: #B4544A;
  --danger-texte: #E8C9C5;
  --ok: #7E9478;
}

:root[data-theme="clair"] {
  color-scheme: light;

  --fond: #F4F1EC;
  --fond-2: #EBE6DD;
  --fond-3: #FBFAF7;

  --texte: #0C0C0C;
  --texte-doux: #6F6A61;
  --texte-lecture: #2C2A26;
  --texte-fantome: #A8A296;

  --accent: #8A7C64;
  --accent-doux: #A2957E;
  --sur-accent: #F4F1EC;

  --filet: rgba(12, 12, 12, 0.12);
  --filet-fort: rgba(12, 12, 12, 0.26);

  --inverse-fond: #0C0C0C;
  --inverse-texte: #F4F1EC;

  --danger: #A8453B;
  --danger-texte: #7A2F27;
  --ok: #5E7458;
}

:root {
  --serif: 'Gloock', Georgia, 'Times New Roman', serif;
  --sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --pad: 1.25rem;
  --tabbar-h: 4.25rem;
  --fast: 0.18s ease;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* Le navigateur doit dégager un champ au-dessus des barres fixes lorsqu'il
   l'amène au premier plan, et non le glisser dessous. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem;
  scroll-padding-bottom: 12rem;
}

body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  min-height: 100dvh;
  overscroll-behavior-y: none;
  transition: background var(--fast), color var(--fast);
}

/* Une feuille ouverte fige la page derrière elle : sans cela le défilement
   file au document et la feuille paraît bloquée. */
body.feuille-ouverte { overflow: hidden; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* ————— Verrouillage ————— */
.lock {
  position: fixed; inset: 0; z-index: 200;
  background: var(--fond);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--pad) var(--pad) calc(var(--pad) + var(--safe-b));
  gap: 1.5rem;
}
.lock[hidden] { display: none; }
.lock__mark { width: 44px; height: 44px; color: var(--accent); }
.lock__label {
  font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--accent); font-weight: 400;
}
.lock__dots { display: flex; gap: 1rem; }
.lock__dots i {
  width: 10px; height: 10px; border: 1px solid var(--accent);
  transform: rotate(45deg); transition: background var(--fast);
}
.lock__dots i.is-on { background: var(--accent); }
.lock__hint { font-size: 0.8rem; color: var(--texte-doux); min-height: 1.2em; text-align: center; }
.lock.is-error .lock__dots { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.keypad {
  display: grid; grid-template-columns: repeat(3, 4.5rem); gap: 0.9rem;
  margin-top: 0.5rem;
}
.keypad button {
  height: 4.5rem; border: 1px solid var(--filet);
  font-size: 1.35rem; font-weight: 300; color: var(--texte);
  transition: background var(--fast);
}
.keypad button:active { background: var(--fond-3); }
.keypad__del { font-size: 0.7rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent) !important; }

/* ————— Barre supérieure ————— */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: 5rem 1fr 5rem; align-items: center;
  padding: calc(var(--safe-t) + 0.9rem) 1rem 0.9rem;
  background: var(--fond);
  border-bottom: 1px solid var(--filet);
}
.topbar__title {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 400;
  text-align: center; letter-spacing: 0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar__back, .topbar__action {
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); padding: 0.5rem 0;
}
.topbar__back {
  display: flex; align-items: baseline; gap: 0.3rem; text-align: left;
  overflow: hidden; white-space: nowrap;
}
.topbar__back > span:first-child { font-size: 1.15rem; line-height: 0.7; letter-spacing: 0; }
.topbar__back > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.topbar__action { text-align: right; }
.topbar__back[hidden], .topbar__action[hidden] { visibility: hidden; display: block; }

/* ————— Écrans ————— */
/* Le bas de page suit ce qui occupe l'écran : la dernière commande d'un écran
   ne doit jamais rester coincée sous une barre fixe. */
main {
  padding: 1.5rem var(--pad) calc(var(--tabbar-h) + var(--safe-b) + 2rem);
  max-width: 640px; margin: 0 auto;
}
body.avec-actionbar main { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 7rem); }
body.clavier main { padding-bottom: 2rem; }
.screen[hidden] { display: none; }

.block { margin: 1.75rem 0 0; }
.block__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.85rem; }
.block__title, .field__label {
  font-size: 0.63rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent); font-weight: 400;
}
.block__title--spaced { display: block; margin-top: 2.5rem; }
.hint { font-size: 0.78rem; color: var(--texte-doux); margin: 0.5rem 0 0.9rem; line-height: 1.5; }

/* État de synchronisation : lisible d'un coup d'œil, contrairement aux
   indications secondaires qui l'entourent. */
.etat {
  font-size: 0.85rem; line-height: 1.5; color: var(--texte);
  margin: 1.25rem 0 0.5rem; padding-left: 0.85rem;
  border-left: 2px solid var(--accent);
}
.etat.is-ok { border-left-color: var(--ok); }
.etat.is-souci { border-left-color: var(--danger); color: var(--danger-texte); }
.field__label em { font-style: normal; color: var(--texte-doux); letter-spacing: 0.1em; }

/* ————— Champs ————— */
.field, .segment, .picker, .ligne { scroll-margin-bottom: 12rem; }
.field { display: block; margin-top: 1.4rem; }
.field__label { display: block; margin-bottom: 0.55rem; }
.field input, .field textarea, .search, .saisie {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--filet-fort);
  padding: 0.65rem 0; font-size: 1rem; font-weight: 300;
  border-radius: 0; resize: none;
  transition: border-color var(--fast);
}
.field input:focus, .field textarea:focus, .search:focus, .saisie:focus {
  outline: none; border-bottom-color: var(--accent);
}
.field input::placeholder, .field textarea::placeholder,
.saisie::placeholder { color: var(--texte-fantome); }
.field input[type="date"] { -webkit-appearance: none; appearance: none; }

.row { display: flex; gap: 1rem; }
.row--actions { gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; }
.field--half { flex: 1; }
.field--third { flex: 0 0 34%; }
.field--rest { flex: 1; }

/* ————— Remise ————— */
.remise { align-items: flex-end; }
.remise__valeur { flex: 1; min-width: 0; }
.remise__unite { flex: 0 0 34%; }
.remise__unite .segment__item { font-size: 0.8rem; letter-spacing: 0.05em; }
.remise__motif { margin-top: 1rem; font-size: 0.9rem; }
.hint.is-ok { color: var(--ok); }
.hint--souci { color: var(--danger-texte); }

.search {
  border: 1px solid var(--filet-fort); padding: 0.8rem 1rem;
  margin-bottom: 1rem; -webkit-appearance: none;
}

/* ————— Segments ————— */
.segment { display: flex; border: 1px solid var(--filet-fort); }
.segment--filter { margin-bottom: 1.25rem; }
.segment__item {
  flex: 1; padding: 0.8rem 0.4rem;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texte-doux); transition: all var(--fast); white-space: nowrap;
}
.segment__item + .segment__item { border-left: 1px solid var(--filet); }
.segment__item.is-active { background: var(--accent); color: var(--sur-accent); font-weight: 500; }

/* ————— Sélecteur ————— */
.picker {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; margin-top: 1.6rem; padding: 0.9rem 0;
  border-bottom: 1px solid var(--filet-fort); text-align: left;
}
.picker__label { font-size: 0.63rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); flex: none; }
.picker__value {
  font-size: 0.95rem; color: var(--texte); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker__value.is-empty { color: var(--accent-doux); }
.picker::after {
  content: '\203A'; color: var(--accent); font-size: 1.15rem; line-height: 0.8;
  flex: none; margin-left: -0.4rem;
}

/* ————— Lignes de facturation ————— */
.lignes:empty + .ghost { margin-top: 0; }
.ligne {
  border: 1px solid var(--filet); padding: 0.9rem 1rem; margin-bottom: 0.75rem;
  background: var(--fond-3);
}
.ligne__top { display: flex; gap: 0.75rem; align-items: flex-start; }
.ligne__desc {
  flex: 1; background: transparent; border: none; padding: 0;
  font-size: 0.92rem; line-height: 1.45; resize: none;
}
.ligne__desc:focus { outline: none; }
.ligne__del { color: var(--texte-doux); font-size: 1.1rem; line-height: 1; padding: 0 0.2rem; }
.ligne__bottom { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.7rem; }
.ligne__nature {
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--filet-fort); padding: 0.35rem 0.6rem; color: var(--accent);
}
.ligne__nature.is-debours { color: var(--texte-doux); }
.ligne__montant {
  margin-left: auto; width: 8rem; text-align: right; background: transparent;
  border: none; border-bottom: 1px solid var(--filet); padding: 0.2rem 0;
  font-size: 1rem; border-radius: 0;
}
.ligne__montant:focus { outline: none; border-bottom-color: var(--accent); }
.ligne__qte {
  width: 2.6rem; text-align: center; background: transparent;
  border: none; border-bottom: 1px solid var(--filet); padding: 0.2rem 0; border-radius: 0;
}

/* ————— Boutons ————— */
.ghost {
  display: block; width: 100%; margin-top: 0.9rem; padding: 0.95rem 1rem;
  border: 1px solid var(--filet-fort); color: var(--texte);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400;
  text-align: center; text-decoration: none;
  transition: all var(--fast);
}
.ghost:active { background: var(--accent); color: var(--sur-accent); }
.ghost--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); margin-top: 2.5rem; }
.ghost--danger:active { background: var(--danger); color: var(--inverse-texte); }
.ghost--inline { width: auto; flex: 1; margin-top: 0; }

.primary {
  padding: 1rem 1.6rem; background: var(--accent); color: var(--sur-accent);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  transition: opacity var(--fast);
}
.primary:disabled { opacity: 0.35; }
.link {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--filet-fort); padding-bottom: 2px;
}

/* ————— Listes ————— */
.list { border-top: 1px solid var(--filet); }
.item {
  display: block; width: 100%; text-align: left;
  padding: 1.05rem 0; border-bottom: 1px solid var(--filet);
  transition: opacity var(--fast);
}
.item:active { opacity: 0.55; }
.item__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.item__title { font-size: 0.98rem; font-weight: 400; }
.item__amount { font-size: 0.95rem; color: var(--texte); white-space: nowrap; }
.item__meta { font-size: 0.76rem; color: var(--texte-doux); margin-top: 0.25rem; }
.item__tag {
  display: inline-block; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.18rem 0.45rem; border: 1px solid var(--filet-fort); color: var(--accent);
  margin-left: 0.5rem; vertical-align: 1px;
}
.item__tag--paye { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.item__tag--attente { color: var(--accent-doux); }
.empty { padding: 2.5rem 0; text-align: center; color: var(--texte-doux); font-size: 0.85rem; }

/* ————— Lecture document ————— */
.reader { padding-top: 0.5rem; }
.reader h1, .reader h2, .reader h3 {
  font-family: var(--serif); font-weight: 400; line-height: 1.25;
  margin: 2rem 0 0.8rem;
}
.reader h1 { font-size: 1.35rem; margin-top: 0; }
.reader h2 { font-size: 1.1rem; }
.reader h3 { font-size: 0.95rem; font-family: var(--sans); font-weight: 500; letter-spacing: 0.02em; }
.reader p { margin: 0.75rem 0; font-size: 0.92rem; line-height: 1.7; color: var(--texte-lecture); }
.reader strong { font-weight: 500; color: var(--texte); }
.reader em { font-style: italic; color: var(--accent); }
.reader ul, .reader ol { margin: 0.75rem 0 0.75rem 1.1rem; }
.reader li { margin: 0.35rem 0; font-size: 0.92rem; line-height: 1.65; color: var(--texte-lecture); }
.reader hr { border: none; border-top: 1px solid var(--filet); margin: 1.75rem 0; }
.reader code { font-family: inherit; color: var(--accent); }
.reader__table { overflow-x: auto; margin: 1rem 0; -webkit-overflow-scrolling: touch; }
.reader table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.reader th, .reader td { text-align: left; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--filet); white-space: nowrap; }
.reader th { color: var(--accent); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.reader td { color: var(--texte-lecture); }

/* ————— Détail document émis ————— */
.detail__num { font-family: var(--serif); font-size: 1.6rem; }
.detail__meta { font-size: 0.82rem; color: var(--texte-doux); margin-top: 0.35rem; }
.detail__section { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--filet); }
.detail__line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 0.9rem; }
.detail__line span:last-child { white-space: nowrap; }
.detail__line--total { border-top: 1px solid var(--filet-fort); margin-top: 0.5rem; padding-top: 0.75rem; font-size: 1rem; }
.detail__line--muted { color: var(--texte-doux); font-size: 0.82rem; }

/* ————— Barre d'action ————— */
.actionbar {
  position: fixed; left: 0; right: 0; z-index: 45;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem var(--pad);
  background: var(--fond-2); border-top: 1px solid var(--filet);
}
.actionbar[hidden] { display: none; }
.actionbar__total { flex: 1; min-width: 0; }
.actionbar__total:empty { display: none; }
.actionbar__total:empty ~ .primary { flex: 1; }
.actionbar__total b { display: block; font-size: 1.15rem; font-weight: 400; }
.actionbar__total b.is-todo { font-size: 0.9rem; color: var(--accent-doux); }
.actionbar__total i {
  font-style: normal; font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}

/* ————— Barre d'onglets ————— */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: var(--fond); border-top: 1px solid var(--filet);
}
.tabbar__item {
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--texte-doux); transition: color var(--fast); position: relative;
}
.tabbar__item.is-active { color: var(--accent); }
.tabbar__item.is-active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 1px; background: var(--accent);
}

/* Clavier ouvert : les barres fixes se retrouveraient sous lui, hors d'atteinte.
   Mieux vaut les retirer et rendre la hauteur au formulaire. */
body.clavier .tabbar, body.clavier .actionbar { display: none; }

/* ————— Feuille modale ————— */
.sheet { position: fixed; inset: 0; z-index: 100; }
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.sheet__panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  max-height: 88dvh; display: flex; flex-direction: column;
  background: var(--fond-2); border-top: 1px solid var(--filet-fort);
  padding-bottom: var(--safe-b);
  animation: rise 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes rise { from { transform: translateY(100%); } }
.sheet__grip { width: 34px; height: 2px; background: var(--filet-fort); margin: 0.7rem auto 0; }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem var(--pad); border-bottom: 1px solid var(--filet);
}
.sheet__head h2 { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; }
.sheet__close { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.sheet__body {
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 0.5rem var(--pad) 1.5rem;
}
.sheet__body > .ghost:last-child { margin-bottom: 0.5rem; }
/* Commande de validation d'une feuille : toujours visible, sans défilement. */
.sheet__pied {
  padding: 0.75rem var(--pad) 1rem;
  border-top: 1px solid var(--filet); flex: none;
}
.sheet__pied .primary { display: block; width: 100%; }

/* ————— Calculateur ————— */
.calc__result {
  border: 1px solid var(--filet-fort); padding: 1.1rem 1rem; margin-top: 1.5rem;
  background: var(--fond-3);
}
.calc__line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.32rem 0; font-size: 0.88rem; color: var(--texte-doux); }
.calc__line b { color: var(--texte); font-weight: 400; }
.calc__line--main { font-size: 1.05rem; padding-top: 0.7rem; margin-top: 0.5rem; border-top: 1px solid var(--filet); }
.calc__line--main b { font-size: 1.25rem; }
.calc__note { font-size: 0.76rem; color: var(--accent); margin-top: 0.8rem; line-height: 1.5; }
.preset {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  width: 100%; text-align: left; padding: 0.85rem 0; border-bottom: 1px solid var(--filet);
}
.preset span { font-size: 0.9rem; }
.preset b { font-weight: 400; color: var(--accent); white-space: nowrap; }

/* Une prestation du catalogue porte deux niveaux de lecture : le libellé et,
   dessous, la fourchette de repère — jamais confondus avec un montant retenu. */
.preset--presta { align-items: flex-start; }
.preset--presta span { display: block; }
.preset--presta em {
  display: block; font-style: normal; margin-top: 0.2rem;
  font-size: 0.7rem; color: var(--texte-doux);
}
.preset--presta b {
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texte-doux); padding-top: 0.2rem;
}

/* ————— Aperçu du document ————— */
/* Palette fixe : l'aperçu montre la feuille telle qu'elle sera imprimée, il ne
   suit donc jamais le thème de l'interface. */
.apercu {
  background: #FFFFFF; color: #0C0C0C;
  padding: 1.75rem 1.5rem 2rem;
  font-size: 0.82rem; line-height: 1.5;
  margin-top: 0.5rem;
}
.apercu__marque { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.apercu__marque svg { width: 32px; height: 32px; flex: none; }
.apercu__nom { font-family: var(--serif); font-size: 1.1rem; line-height: 1; }
.apercu__sur, .apercu__sous {
  font-size: 0.5rem; letter-spacing: 0.3em; color: #9A8E7E; text-transform: uppercase;
}
.apercu__titre {
  font-family: var(--serif); font-size: 1.05rem; text-align: right;
  border-top: 1px solid #B8AC98; padding-top: 1rem; margin-top: 0.5rem;
}
.apercu__meta { text-align: right; font-size: 0.72rem; color: #6E6E6E; margin-top: 0.2rem; }
.apercu__parties { display: flex; gap: 1.25rem; margin: 1.5rem 0; }
.apercu__partie { flex: 1; min-width: 0; }
.apercu__label {
  font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #9A8E7E; display: block; margin-bottom: 0.4rem;
}
.apercu__partie p, .apercu__objet p { margin: 0.1rem 0; word-wrap: break-word; }
.apercu__objet { margin: 1.25rem 0; }
.apercu__ligne {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid #E6E1D9;
}
.apercu__ligne:first-of-type { border-top: 1px solid #B8AC98; }
.apercu__ligne span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.apercu__nature { display: block; font-size: 0.62rem; color: #8A8A8A; margin-top: 0.15rem; }
.apercu__pu {
  display: block; font-style: normal; font-size: 0.66rem;
  color: #8A8A8A; margin-top: 0.2rem; font-variant-numeric: tabular-nums;
}
.apercu__recap { margin-top: 0.9rem; }
.apercu__recap div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.22rem 0; font-size: 0.78rem; color: #6E6E6E;
}
.apercu__recap div.is-total {
  border-top: 1px solid #B8AC98; margin-top: 0.5rem; padding-top: 0.6rem;
  font-size: 0.95rem; color: #0C0C0C; font-weight: 500;
}
.apercu__mentions { margin-top: 1.5rem; font-size: 0.68rem; color: #6E6E6E; line-height: 1.55; }
.apercu__mentions p { margin: 0.5rem 0; }
.apercu__mentions strong { color: #0C0C0C; font-weight: 500; }
/* Coordonnées et mentions R123-237, à leur place sur la feuille : en pied. */
.apercu__pied {
  margin-top: 1.75rem; padding-top: 0.7rem; border-top: 1px solid #B8AC98;
  font-size: 0.6rem; color: #8A8A8A; line-height: 1.6;
}
.apercu__pied p { margin: 0; }
.apercu__legal { color: #B8AC98; }

/* ————— Synthèse ————— */
.synthese { display: flex; gap: 1px; background: var(--filet); margin-bottom: 1.25rem; }
.synthese > div { flex: 1; background: var(--fond-3); padding: 0.85rem 0.9rem; min-width: 0; }
.synthese i {
  font-style: normal; display: block; font-size: 0.55rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem;
}
.synthese b { font-weight: 400; font-size: 1.02rem; white-space: nowrap; }
.synthese b.is-attente { color: var(--accent-doux); }

/* ————— Historique client ————— */
.historique { margin-top: 0.5rem; }

/* ————— Dates clés ————— */
.dates:not(:empty) { margin-top: 1.25rem; }
.date-cle {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--filet);
}
.date-cle input[type="text"] {
  flex: 1; min-width: 0; background: transparent; border: none;
  border-bottom: 1px solid var(--filet); padding: 0.2rem 0; border-radius: 0;
  font-size: 0.9rem;
}
.date-cle input[type="date"] {
  width: 8.6rem; flex: none; background: transparent; border: none;
  border-bottom: 1px solid var(--filet); padding: 0.2rem 0; border-radius: 0;
  font-size: 0.85rem; color: var(--texte); -webkit-appearance: none; appearance: none;
}
.date-cle input:focus { outline: none; border-bottom-color: var(--accent); }
.date-cle button { color: var(--texte-doux); font-size: 1.1rem; line-height: 1; padding: 0 0.2rem; }

/* ————— Bandeau d'alerte ————— */
.bandeau {
  display: block; width: 100%; text-align: left;
  margin-bottom: 1.25rem; padding: 0.85rem 1rem;
  border: 1px solid var(--danger); border-left-width: 2px;
  font-size: 0.82rem; line-height: 1.5; color: var(--danger-texte);
}
.bandeau[hidden] { display: none; }
.bandeau::after {
  content: '\203A'; float: right; margin-left: 0.5rem;
  font-size: 1.1rem; line-height: 0.9; color: var(--danger);
}

/* ————— Champs à compléter ————— */
/* Fragment du document rappelé sous une mention à trancher : sans lui,
   « 10 à 15 » ne veut rien dire hors de sa phrase. */
.hint--contexte {
  margin: 0.4rem 0 0; padding-left: 0.75rem;
  border-left: 1px solid var(--filet-fort);
  font-size: 0.74rem; font-style: italic;
}

.signature { margin-top: 1.6rem; }
/* Intitulé repris mot pour mot du contrat : trop long pour la capitale
   espacée des autres libellés, il se lit en casse normale. */
.signature__label {
  display: block; margin-bottom: 0.6rem;
  font-size: 0.8rem; line-height: 1.45; color: var(--accent);
}
/* Case à cocher : carré à filet, pastille pleine à l'intérieur — aucun arrondi,
   aucune coche importée. */
.coche {
  display: flex; align-items: flex-start; gap: 0.7rem;
  margin-bottom: 0.9rem; cursor: pointer;
}
.coche input { position: absolute; opacity: 0; width: 0; height: 0; }
.coche__case {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  border: 1px solid var(--filet-fort); position: relative;
  transition: border-color var(--fast);
}
.coche input:checked + .coche__case { border-color: var(--accent); }
.coche input:checked + .coche__case::after {
  content: ''; position: absolute; inset: 3px; background: var(--accent);
}
.coche input:focus-visible + .coche__case { outline: 1px solid var(--accent); outline-offset: 2px; }
.coche__texte { font-size: 0.85rem; line-height: 1.4; color: var(--texte); }

.signature__zone {
  display: block; width: 100%; height: 150px;
  border: 1px solid var(--filet-fort); background: var(--fond-3);
  touch-action: none; cursor: crosshair;
}
.signature.is-signee .signature__zone { border-color: var(--accent); }
.signature__effacer { display: inline-block; margin-top: 0.7rem; }

/* ————— Choix du mode d'envoi ————— */
.envoi {
  display: block; width: 100%; text-align: left;
  padding: 1rem 0; border-bottom: 1px solid var(--filet);
  transition: opacity var(--fast);
}
.envoi:active { opacity: 0.55; }
.envoi span {
  display: block; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--texte);
}
.envoi em {
  display: block; font-style: normal; font-size: 0.78rem;
  color: var(--texte-doux); margin-top: 0.3rem; line-height: 1.45;
}

/* ————— Rappels ————— */
.rappel { border: 1px solid var(--filet-fort); padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.rappel__titre {
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.7rem;
}
.rappel__item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  width: 100%; text-align: left; padding: 0.5rem 0; font-size: 0.9rem;
  border-top: 1px solid var(--filet);
}
.rappel__item:first-of-type { border-top: none; padding-top: 0; }
.rappel__item span:last-child { color: var(--accent); font-size: 0.78rem; white-space: nowrap; }
.rappel__item em { font-style: normal; display: block; font-size: 0.74rem; color: var(--texte-doux); }

/* ————— Bouton secondaire ————— */
.secondary {
  padding: 1rem 1.1rem; border: 1px solid var(--filet-fort); color: var(--texte);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400;
  white-space: nowrap; transition: all var(--fast);
}
.secondary:active { background: var(--fond-3); }
.secondary[hidden] { display: none; }

/* ————— Page de signature client ————— */
/* Pas d'onglets ni de code d'accès : le client arrive par un lien et n'a
   qu'une chose à faire. */
.signer main { padding-top: 0.5rem; }
.signer__tete {
  display: flex; align-items: center; gap: 0.85rem;
  max-width: 640px; margin: 0 auto;
  padding: calc(var(--safe-t) + 1.5rem) var(--pad) 1.25rem;
  color: var(--accent);
  border-bottom: 1px solid var(--filet);
}
.signer__marque { width: 34px; height: 34px; flex: none; }
.signer__sur, .signer__sous {
  display: block; font-size: 0.5rem; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--accent-doux);
}
.signer__nom { font-family: var(--serif); font-size: 1.15rem; line-height: 1.05; color: var(--texte); }
.signer__titre {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 400;
  line-height: 1.2; margin-bottom: 0.75rem;
}
.signer .actionbar { bottom: 0; padding-bottom: calc(0.75rem + var(--safe-b)); }
.signer.avec-actionbar main { padding-bottom: 8rem; }
.signer .reader { margin-top: 1.25rem; }

/* ————— Toast ————— */
.toast {
  position: fixed; z-index: 150; left: 50%; transform: translateX(-50%);
  top: calc(var(--safe-t) + 4.25rem);
  background: var(--inverse-fond); color: var(--inverse-texte);
  padding: 0.7rem 1.25rem; font-size: 0.82rem; max-width: calc(100% - 2.5rem);
  text-align: center; animation: descend 0.2s ease;
  pointer-events: none;
}
@keyframes descend { from { opacity: 0; transform: translate(-50%, -8px); } }
.toast[hidden] { display: none; }

/* Code d'appairage. Le carré reste noir sur blanc dans les deux thèmes : un
   appareil photo a besoin du contraste franc, pas de la charte. */
.appairage { margin: 1.25rem 0 0.5rem; }
.appairage__code {
  width: min(15rem, 70vw); margin: 0 auto 1rem;
  background: #fff; padding: 0.5rem; border: 1px solid var(--filet);
}
.appairage__code svg { display: block; width: 100%; height: auto; }
.appairage__code:empty { display: none; }
.appairage__video {
  display: block; width: min(18rem, 80vw); margin: 0 auto 1rem;
  border: 1px solid var(--filet); background: #000;
}

/* Placé en fin de feuille : `hidden` doit l'emporter sur les display des
   composants (.field, .ghost…), sans écraser les règles plus spécifiques. */
[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Segment de secours du calculateur : quatre mécaniques dans la largeur d'un
   iPhone SE. Les libellés y renoncent au nowrap — mieux vaut « Frais +
   marge » sur deux lignes qu'un onglet hors de l'écran. */
.segment--serre .segment__item {
  white-space: normal; line-height: 1.25;
  padding: 0.6rem 0.25rem; font-size: 0.6rem; letter-spacing: 0.08em;
}

/* Certains moteurs transforment courriels et adresses en liens malgré la
   balise format-detection. L'aperçu reproduit une feuille imprimée : rien n'y
   est cliquable, et surtout rien n'y est bleu souligné. */
.apercu a, .apercu a:visited {
  color: inherit; text-decoration: none; pointer-events: none;
}

/* ————— Listes natives ————— */
/* Le select reste l'élément natif : sur iPhone c'est lui qui ouvre la roue du
   système. On n'habille que sa boîte, et on lui laisse toute la surface de la
   ligne pour que le doigt tombe juste. */
.picker--natif { position: relative; cursor: pointer; }
.picker__select {
  flex: 1; min-width: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: none; border-radius: 0;
  padding: 0 1.1rem 0 0; margin: 0;
  font-size: 0.95rem; font-weight: 300; color: var(--texte);
  text-align: right; text-align-last: right;
  direction: ltr; cursor: pointer;
}
.picker__select:focus { outline: none; }
.picker--natif:focus-within { border-bottom-color: var(--accent); }
/* Une valeur non choisie se lit comme un appel à choisir, pas comme un choix. */
.picker__select:invalid, .picker__select option[value=""] { color: var(--accent-doux); }
.picker__chevron {
  position: absolute; right: 0; bottom: 0.85rem;
  color: var(--accent); font-size: 1.05rem; line-height: 1;
  pointer-events: none;
}
/* Les listes du système composent leurs options sur leur propre fond : sans
   couleur explicite, le thème sombre rendrait du gris sur gris. */
.picker__select option { color: #0C0C0C; background: #FFFFFF; }

/* Liste native posée dans un champ ordinaire plutôt que sur une ligne. */
.field select {
  width: 100%; -webkit-appearance: none; appearance: none;
  background: transparent; border: none;
  border-bottom: 1px solid var(--filet-fort); border-radius: 0;
  padding: 0.65rem 1.2rem 0.65rem 0;
  font-size: 1rem; font-weight: 300; color: var(--texte); cursor: pointer;
}
.field select:focus { outline: none; border-bottom-color: var(--accent); }
.field select option { color: #0C0C0C; background: #FFFFFF; }
.champ-liste { position: relative; }
.champ-liste::after {
  content: '›'; position: absolute; right: 0.1rem; bottom: 0.55rem;
  color: var(--accent); pointer-events: none; transform: rotate(90deg);
}

/* ————— Menu de réglages ————— */
/* Chaque entrée porte son état sous son titre : on lit ce qui est réglé sans
   ouvrir les six écrans l'un après l'autre. */
.menu { display: block; }
.menu__item {
  display: block; width: 100%; text-align: left;
  padding: 1.05rem 1.6rem 1.05rem 0; position: relative;
  border-bottom: 1px solid var(--filet);
}
.menu__item::after {
  content: '›'; position: absolute; right: 0.15rem; top: 50%;
  transform: translateY(-50%); color: var(--accent); font-size: 1.05rem;
}
.menu__item:active { background: var(--fond-3); }
.menu__titre { display: block; font-size: 0.98rem; color: var(--texte); }
.menu__note {
  display: block; margin-top: 0.2rem;
  font-size: 0.74rem; color: var(--texte-doux);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ————— Assistant de rédaction ————— */
/* Angles droits et filets greige, comme partout : une conversation ne justifie
   pas d'introduire la bulle arrondie que le reste de la console s'interdit. Ce
   qu'on a demandé porte un filet à gauche, ce qui est proposé n'en porte pas. */

.entree {
  display: block; width: 100%; text-align: left; position: relative;
  margin-bottom: 1.35rem; padding: 1rem 1.9rem 1rem 0.95rem;
  border: 1px solid var(--filet-fort);
}
.entree::after {
  content: '›'; position: absolute; right: 0.85rem; top: 50%;
  transform: translateY(-50%); color: var(--accent); font-size: 1.05rem;
}
.entree:active { background: var(--fond-3); }
.entree--forte { border-color: var(--accent-doux); }
.entree--forte .entree__titre { color: var(--accent); }
.entree__titre { display: block; font-size: 0.95rem; color: var(--texte); }
.entree__note { display: block; margin-top: 0.2rem; font-size: 0.74rem; color: var(--texte-doux); }

/* La barre de saisie occupe le bas de l'écran : le fil lui laisse la place. */
.screen--ia { padding-bottom: 4.5rem; }

.ia__intro { font-size: 0.82rem; color: var(--texte-doux); line-height: 1.6; margin: 0 0 1rem; }

.ia__tour { margin-top: 1.6rem; }
.ia__tour p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--texte-lecture); }
.ia__tour--moi { padding-left: 0.85rem; border-left: 2px solid var(--accent); }
.ia__tour--moi p { color: var(--texte); }
.ia__attente { color: var(--texte-doux); font-style: italic; }

/* Une proposition déjà tranchée reste lisible mais s'efface : le fil garde sa
   trace sans la faire passer pour la proposition courante. */
.ia__proposition { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--filet); }
.ia__proposition.is-passee { opacity: 0.45; }

/* Quatre informations sur 390 px, dont une seule est longue : les mettre en
   rangée obligeait à rogner la désignation, et une désignation rognée est
   une désignation fausse — elle part telle quelle sur le document. Elle
   prend donc toute la largeur, et la nature, la quantité et le montant
   tiennent sur la ligne d'en dessous. On paie en hauteur, pas en clarté. */
.ia__ligne {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 0.6rem 0; font-size: 0.86rem; color: var(--texte-doux);
}
.ia__ligne__desc { margin: 0; line-height: 1.5; color: var(--texte-lecture); text-wrap: pretty; }
.ia__ligne__bas { display: flex; align-items: center; gap: 0.75rem; }
.ia__ligne__bas b { margin-left: auto; }
.ia__ligne em { font-style: normal; color: var(--texte-fantome); }
.ia__ligne b { color: var(--texte); font-weight: 400; white-space: nowrap; }
/* Le total n’a que deux informations : il garde la rangée d’origine. */
.ia__ligne--total {
  flex-direction: row; justify-content: space-between; align-items: baseline;
  margin-top: 0.5rem; padding-top: 0.65rem;
  border-top: 1px solid var(--filet); font-size: 1rem;
}
.ia__ligne--total b { font-size: 1.15rem; }

.ia__questions, .ia__points { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.ia__questions li {
  position: relative; margin-top: 0.4rem; padding-left: 0.9rem;
  font-size: 0.82rem; line-height: 1.55; color: var(--accent);
}
.ia__questions li::before { content: '—'; position: absolute; left: 0; }

.ia__points li {
  margin-top: 0.85rem; padding-left: 0.85rem;
  border-left: 2px solid var(--filet-fort);
  font-size: 0.86rem; line-height: 1.55; color: var(--texte-lecture);
}
.ia__points li.is-bloquant { border-left-color: var(--danger); }
.ia__points em {
  display: block; margin-bottom: 0.2rem; font-style: normal;
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--texte-doux);
}
.ia__points li.is-bloquant em { color: var(--danger-texte); }

.ia__marque {
  margin-top: 0.9rem; font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ok);
}

/* Fixée au-dessus de la barre d'onglets, comme la barre d'action des autres
   écrans, et au même rang qu'elle. */
.ia__saisie {
  position: fixed; left: 0; right: 0; z-index: 45;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  display: flex; align-items: flex-end; gap: 0.75rem;
  padding: 0.7rem var(--pad);
  background: var(--fond-2); border-top: 1px solid var(--filet-fort);
}
.ia__saisie textarea {
  flex: 1; min-width: 0; max-height: 140px; resize: none;
  padding: 0.5rem 0; background: transparent; border: none; color: var(--texte);
  font-family: var(--sans); font-size: 0.95rem; font-weight: 300; line-height: 1.5;
}
.ia__saisie textarea::placeholder { color: var(--texte-fantome); }
.ia__saisie textarea:focus { outline: none; }
.ia__envoyer {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem;
  background: var(--accent); color: var(--sur-accent);
  font-size: 1.15rem; line-height: 1;
}

/* ————— Seuil de franchise ————— */

/* Un filet et une barre de deux pixels : la charte s’interdit la carte, le
   bandeau coloré et l’arrondi. La couleur ne dit qu’une chose — l’urgence. */
.seuil { border-top: 1px solid var(--filet); padding-top: 0.85rem; margin: 1.1rem 0 1.25rem; }
.seuil__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.seuil__tete i {
  font-style: normal; font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--texte-doux);
}
.seuil__tete b { font-weight: 400; font-size: 1.02rem; white-space: nowrap; }
.seuil__barre { height: 2px; background: var(--filet); margin: 0.65rem 0 0.5rem; }
.seuil__barre span { display: block; height: 100%; background: var(--accent-doux); transition: width var(--fast); }
.seuil__note { margin: 0; font-size: 0.76rem; line-height: 1.45; color: var(--texte-doux); }
.seuil.is-attention .seuil__barre span { background: var(--accent); }
.seuil.is-attention .seuil__tete b { color: var(--accent); }
.seuil.is-depasse .seuil__barre span { background: var(--danger); }
.seuil.is-depasse .seuil__tete b,
.seuil.is-depasse .seuil__note { color: var(--danger); }

/* ————— Dépliant des détails, marqueur de brouillon ————— */

/* Le dépliant emprunte la ligne du sélecteur plutôt que d’inventer un
   composant : même filet, même intitulé, même chevron — qui pivote pour dire
   qu’il ouvre vers le bas et non vers un autre écran. */
.picker::after { transition: transform var(--fast); }
.picker[aria-expanded="true"]::after { transform: rotate(90deg); }
.repli__corps { margin-top: 1rem; }
.repli__corps > :first-child { margin-top: 0; }

/* Deux filets, comme la jauge de seuil. Ni carte, ni bandeau coloré : c’est
   un état qu’on lit au passage, pas une alerte. */
.brouillon {
  margin: 0 0 1.6rem; padding: 0.75rem 0;
  border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
  font-size: 0.72rem; line-height: 1.5; color: var(--texte-doux);
}
.brouillon b { color: var(--texte); font-weight: 400; }

/* ————— Résumé de groupe sur deux lignes ————— */

/* Un intitulé de profil tient sur une ligne ; ce qu'il cache, presque jamais.
   Deux lignes portent l’essentiel — l’allergie, la taille, ce qu’il ne faut
   pas évoquer — sans qu'il faille ouvrir quoi que ce soit. Au-delà, on ouvre. */
.picker__value--long {
  white-space: normal; line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; font-size: 0.86rem;
}

/* ————— Reprise après effacement ————— */

/* Même fond, même marque que le verrouillage : c'est le même seuil. Ce qui
   change, c'est qu'on y explique quelque chose, donc le texte respire. */
.reprise { gap: 1.1rem; overflow-y: auto; justify-content: center; }
.reprise__texte {
  max-width: 27rem; text-align: center;
  font-size: 0.86rem; line-height: 1.6; color: var(--texte-doux);
}
.reprise__champ { display: block; width: min(100%, 22rem); }
.reprise__champ input {
  width: 100%; padding: 0.75rem 0.85rem;
  border: 1px solid var(--filet); background: var(--fond-2); color: var(--texte);
  font-size: 1rem; font-family: inherit;
}
.reprise__champ input:focus { outline: none; border-color: var(--accent); }
.reprise__actions {
  display: flex; flex-direction: column; gap: 0.7rem; width: min(100%, 22rem);
}
.reprise__actions .ghost { margin: 0; }
.ghost--fort { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.ghost--fort:active { opacity: 0.85; }

/* ————— Bandeau de conseil ————— */

/* Le bandeau rouge dit une panne. Celui-ci dit une précaution : même place,
   même poids de texte, mais le filet reprend l'accent et non l'alerte. */
.bandeau--conseil {
  display: flex; align-items: flex-start; gap: 0.75rem;
  border-color: var(--filet); border-left-color: var(--accent);
  color: var(--texte-doux);
}
/* Posé après la règle générale `[hidden]`, à spécificité égale, ce `display`
   l'emporterait : le bandeau resterait à l'écran une fois masqué. */
.bandeau--conseil[hidden] { display: none; }
.bandeau--conseil::after { content: none; }
.bandeau__fermer {
  flex: none; margin-left: auto; padding: 0 0.25rem;
  font-size: 1.1rem; line-height: 1; color: var(--texte-doux); background: none; border: none;
}

.reprise__empreinte {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); min-height: 1.1em;
}

/* ————— Versions antérieures ————— */

.versions { display: flex; flex-direction: column; margin-top: 0.9rem; }
.versions[hidden] { display: none; }
.version {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 0.8rem 0; text-align: left;
  border-bottom: 1px solid var(--filet);
}
.version:active { background: var(--fond-3); }
.version__date { font-size: 0.9rem; color: var(--texte); }
.version__taille { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--texte-doux); }