/* Edwin — feuille de style unique.
   Palette et typographie : 04-identite-de-marque.md (V1 corail, actée).
   Fond clair et chaleureux, contraste fort mais doux : l'accessibilité est
   fonctionnelle ici, la cible lit beaucoup à l'écran.

   Aucune police distante : la PWA doit s'ouvrir hors ligne, et une police
   qui n'arrive pas est un écran qui saute. La pile système suffit, en gras
   assumé pour les titres (le goût acté : typo grasse). */

:root {
  --bg: #FCF9F4;
  --ink: #17213B;
  --ink-soft: #55607A;
  --coral: #FF6F5B;
  --coral-deep: #DC4B32;
  --coral-hover: #C53F28;
  --peach: #FEECE6;
  --peach-line: #F4D6CC;
  --green: #0FA06A;
  --green-deep: #0B7D52;
  --green-tint: #E3F5EC;
  --radius: 12px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Cartes (2026-09-14, alignement sur la maquette validée par Greg) : une
     bordure plus neutre que --peach-line pour une carte "de base" (le
     corail reste réservé à ce qui demande vraiment l'attention), et une
     ombre légère pour la sensation de relief de la maquette. Aucune police
     distante : « la PWA doit s'ouvrir hors ligne » (règle du haut de ce
     fichier) tient toujours, donc le rendu plus marqué de la maquette
     (Montserrat 800) est repris avec la pile système déjà en place plutôt
     qu'importé — voir le commentaire au-dessus de .masthead h1. */
  --card-line: #ECE3D6;
  --shadow: 0 1px 2px rgba(23, 33, 59, .04), 0 6px 16px -8px rgba(23, 33, 59, .10);
}

* { box-sizing: border-box; }

/* Le piège classique : la feuille de style du navigateur pose
   `[hidden] { display: none }`, mais n'importe quelle règle d'auteur qui
   fixe `display` la bat — et l'élément « caché » reste à l'écran. Toute
   l'application masque par l'attribut `hidden` (c'est ce qui la retire aussi
   des lecteurs d'écran, contrairement à une classe CSS), donc cette ligne
   est ce qui rend ce mécanisme fiable. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  padding-bottom: 3rem;
}

/* --- accessibilité de base ------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: .7rem 1rem;
  z-index: 50;
}
.skip:focus { left: 0; }

/* Un anneau de focus visible partout, y compris sur les éléments que le
   navigateur ne décore pas par défaut. Le supprimer est la façon la plus
   courante de rendre une interface inutilisable au clavier. */
:focus-visible {
  outline: 3px solid var(--coral-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

main:focus { outline: none; }

/* --- bandeaux --------------------------------------------------------- */

.banner {
  padding: .7rem 1rem;
  font-weight: 600;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.banner-warn { background: var(--peach); border-bottom: 1px solid var(--peach-line); }
.banner-update { background: var(--ink); color: #fff; }
.banner-update button {
  background: #fff;
  color: var(--ink);
  border: 0;
  font-weight: 700;
  padding: .4rem .9rem;
  border-radius: 999px;
  cursor: pointer;
}

/* --- en-tête ---------------------------------------------------------- */

/* 2026-09-28, Greg : « le header doit etre mini [...] quand on defile il
 * faut qu'il reste affiche sur ordinateur ». Deux demandes liees : plus
 * compact (padding vertical reduit, l'ancien 16px passait pour genereux
 * une fois fixe a l'ecran en permanence), et sticky plutot que de
 * defiler avec la page. `position: sticky` plutot que `fixed` : pas
 * besoin de compenser un espace reserve sous le header ailleurs dans la
 * mise en page (`main` garde son flux normal), et il redevient un bloc
 * ordinaire tant qu'on n'a pas atteint le haut de l'ecran. z-index
 * au-dessus du contenu ordinaire, en dessous du lien d'evitement (.skip,
 * 50) et de la barre mobile fixe (.bottom-nav, 40) - ils ne se
 * chevauchent jamais (l'un en haut, l'autre en bas) mais autant rester
 * dans le meme ordre. Sur mobile (`#nav` masque, en dessous de 560px),
 * ce header ne contient plus que la marque : rester sticky ne gene pas
 * et evite un saut de comportement entre les deux tailles d'ecran. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 10px 28px;
  border-bottom: 1px solid var(--peach-line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}

/* --- installé sur l'écran d'accueil (2026-09-20) ----------------------- */
/* Ce qui distingue une app d'un site dans un cadre : l'en-tête descend sous
   l'encoche, la page ne rebondit pas ni ne se rafraîchit en tirant, et un
   tap ne clignote pas en gris. Le sélecteur est le mode d'affichage réel,
   pas un sniffing d'agent. */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .site-header { padding-top: calc(10px + env(safe-area-inset-top)); }
  html { overscroll-behavior: none; }
  body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
  /* Sur un site, le bouton « Install » n'a plus d'objet une fois installé. */
  #dash-install { display: none !important; }
}

.install-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--peach-line);
  border-radius: var(--radius);
  background: #fff;
}
.install-card .install-body { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 16rem; font-size: .88rem; }
.install-card .row { margin-top: 0; }
.phone-hint { margin: 0 0 .6rem; font-size: .88rem; color: var(--ink-soft, #555); }
.phone-hint .link-btn { margin-left: .4rem; }
.phone-steps { margin: 0 0 1rem; padding: .6rem 1rem; border-left: 3px solid var(--peach-line); font-size: .86rem; }
.phone-steps p { margin: .2rem 0; }
.phone-steps .share-glyph, .install-card .share-glyph { vertical-align: baseline; }
.install-card .share-glyph {
  display: inline-block;
  padding: 0 .3rem;
  border: 1px solid var(--peach-line);
  border-radius: 4px;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--coral-deep);
}

.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
}
.brand-name {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

nav { display: flex; gap: 4px; flex-wrap: wrap; }

/* Onglets : valeurs de la maquette validée (2026-09-14) — sans bordure,
   l'onglet courant en pêche avec le texte corail profond. */
.tab {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { background: var(--peach); color: var(--coral-deep); }
.tab[aria-current="page"] {
  background: var(--peach);
  color: var(--coral-deep);
}
.tab-quiet { opacity: .7; }

/* --- structure -------------------------------------------------------- */

/* 1180px, pas 720 (2026-09-14, Greg : « le widht est max de 680px sur
   ordi, il faudrait qu'il soit plus large ») — la largeur de `.stage` dans
   la maquette validée. Un écran de téléphone est déjà plus étroit que
   720px, donc relever cette valeur ne change rien sur mobile : c'est la
   largeur de l'écran, pas cette règle, qui contraignait déjà `main` là-bas. */
main { max-width: 1180px; margin: 0 auto; padding: 26px 28px 48px; }

h1 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 800; letter-spacing: -.01em; margin: .8rem 0 4px; text-wrap: balance; }
/* Titres de section : 1rem / 700, collés à leur légende (maquette,
   `section.block h3`). Le h1 de page garde la taille au-dessus. */
h2 { font-size: 1rem; font-weight: 700; margin: 1.6rem 0 3px; }
.card h2 { margin-top: 0; }

.lede { color: var(--ink-soft); margin: 0 0 1.2rem; font-size: .92rem; }
.empty { color: var(--ink-soft); font-size: .8rem; padding: 10px 2px; margin: 0; }
.hint { color: var(--ink-soft); font-size: .8rem; line-height: 1.5; margin: 0 0 12px; }

/* A computed one-line summary under a section title (Lot 8, dashboard) —
   marked with a small coral dot so it reads as "what's happening now",
   distinct from a plain static hint. */
.hint.dyn {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 12px;
}
.hint.dyn::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  flex-shrink: 0;
  margin-top: 5px;
}
/* Sous-titre dynamique de page (Emails, Agenda & Appointment) : la seule
   ligne sous le titre sur ces pages — `.page-sub.dyn` de la maquette. */
.page-sub.dyn {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: .95rem;
  color: var(--ink);
  font-weight: 500;
  margin: 4px 0 24px;
  max-width: 60ch;
  line-height: 1.5;
}
.page-sub.dyn::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  flex-shrink: 0;
  margin-top: 6px;
}
.mockup-note { margin: 0 0 16px; font-size: .76rem; color: var(--ink-soft); line-height: 1.5; }

/* --- outils de l'onglet Emails (2026-09-15) ----------------------------- */

.masthead-tools { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.masthead-tools .meta { font-weight: 400; }

.emails-toolbar { margin: 0 0 14px; }
.emails-toolbar input[type="search"] { width: 100%; }

/* La bannière d'envoi groupé (Lot 9+) : même habillage que l'avertissement
   « Edwin est en pause » — une action qui attend explicitement un geste,
   pas une notification passive. */
#emails-bulk-send { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
#emails-bulk-trash { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* Selection generique multi-messages (2026-10-02) : pas de fond colore
   comme les bannieres Pub/relance ci-dessus - c'est une barre d'outils
   ordinaire, visible des qu'il y a au moins un email, pas une alerte. */
.emails-bulk-select { align-items: center; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.emails-bulk-select .meta { margin: 0; }
.item .mail-select-check {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  accent-color: var(--coral-deep);
  cursor: pointer;
}

/* Le corps d'un brouillon en cours d'édition (réponse depuis l'onglet
   Emails) : un textarea pleine largeur, pas un simple <p>. */
.reply-box { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--card-line); }
.reply-box textarea { width: 100%; min-height: 6rem; margin-bottom: .5rem; }

/* Les grandes lignes facultatives avant « Draft with Edwin » (2026-09-24,
   Greg : « il faut... donner des grandes lignes ou pas »), même gabarit
   que .reply-box mais sa propre classe : les deux zones se ferment l'une
   l'autre (resetMailComposeState, app.js) et doivent rester repérables
   séparément. */
.auto-draft-box { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--card-line); }
.auto-draft-box textarea { width: 100%; min-height: 4rem; margin-bottom: 0; }

/* Le brouillon visible sur la ligne de l'email (2026-09-15, Greg : « le
   Draft soit visible sur la ligne de l'email pas uniquement sur le
   Dashboard, par exemple 2/3 - 1/3 ») : `.mail-item-body-split` transforme
   `.item-body` en deux colonnes seulement quand un brouillon ou un statut
   "Reply sent" a été joint au message (`buildMailItem`/`buildMailSidePane`
   dans app.js) — sans ça, `.item-body` reste le simple conteneur qu'il a
   toujours été. En dessous de 400px (règle maison, cf. `Artifact` design
   guidance), les deux colonnes s'empilent : une carte email reste lisible
   sur un téléphone étroit avant tout. */
.mail-item-body-split { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
.mail-side-col { border-left: 1px solid var(--card-line); padding-left: 14px; min-width: 0; }
.mail-side-col .pill { margin-bottom: 4px; }
.mail-side-col button { width: 100%; margin-top: 6px; }
@media (max-width: 400px) {
  .mail-item-body-split { grid-template-columns: 1fr; }
  .mail-side-col { border-left: none; padding-left: 0; border-top: 1px solid var(--card-line); padding-top: 10px; margin-top: 4px; }
}

/* "Reply sent" (Lot 13) : même vocabulaire de couleur que `.pill.done`
   (une action menée à bien), sur le nom qui parle à l'utilisateur plutôt
   qu'un état interne. */
.pill.sent { background: var(--green-tint); color: var(--green-deep); }

/* La proposition de relance après un envoi (Lot 13, 2026-09-15) : une
   seule fois, jamais une confirmation par email - voir `offerFollowUpPrompt`
   dans app.js. Même habillage discret qu'une note d'action
   (`.mail-action-state`, `.meta`), pas une bannière qui réclame l'attention. */
.follow-up-prompt { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--card-line); }
.follow-up-prompt .row { margin-top: .4rem; }

.state { color: var(--ink-soft); font-size: .9rem; }
.error { color: var(--coral-hover); font-weight: 600; margin: .6rem 0 0; }

.card {
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

/* En-tête de page (2026-09-14) : titre + sous-titre, avec la place pour un
   indicateur d'état à droite (la puce "I'm on watch" du tableau de bord).
   `h1`/`.lede` gardent leurs styles existants — seul l'habillage autour
   change, pas leur typographie. */
.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.masthead h1 { margin-top: 0; }
.masthead .lede { margin: 0; }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--green-tint);
  color: var(--green-deep);
  font-weight: 600;
  font-size: .82rem;
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
}
.status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.status-chip.paused { background: var(--peach); color: var(--coral-deep); }
.status-chip.paused .dot { background: var(--coral); }

/* Trois chiffres déjà calculés ailleurs dans la même réponse
   (`urgent_count`, `agenda.count`, `mail.count`) — un coup d'œil avant le
   détail, pas une nouvelle source de vérité (2026-09-14, maquette). */
.glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 30px;
}
.glance-tile {
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: var(--shadow);
}
.glance-tile .num {
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.glance-tile.attn .num { color: var(--coral-deep); }
.glance-tile .label {
  display: block;
  margin-top: 5px;
  font-size: .74rem;
  color: var(--ink-soft);
  font-weight: 500;
}

/* Deux colonnes sur le tableau de bord : colonne prioritaire (ce qui
   demande une action) à gauche, colonne d'information à droite — repasse
   en une seule colonne sous 900px plutôt qu'à la largeur mobile seule,
   pour éviter une colonne de droite trop étroite sur tablette. */
.board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.block h2 { margin-top: 0; }
.block .hint:not(.dyn) { margin-bottom: 12px; }

@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; }
}

/* Puce de statut sur un item (2026-09-14, maquette) : vocabulaire visuel
   partagé par les notices, l'agenda, le courrier et les tâches, chacun
   posant seulement la classe qui correspond à un champ déjà réel
   (`level`, `starts_in_minutes`, `unread`, `due`/`overdue`) — jamais une
   catégorie inventée pour l'occasion. */
.pill {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill.attn, .pill.soon { background: var(--peach); color: var(--coral-deep); }
.pill.done { background: var(--green-tint); color: var(--green-deep); }
.pill.now { background: var(--coral-deep); color: #fff; }
.pill.later { background: #F1EEE6; color: var(--ink-soft); }
/* Pub / promotionnel (2026-09-29, tri automatique) - reprend le beige
   neutre de .pill.later plutôt qu'une nouvelle couleur : Greg a déjà
   pointé qu'il y avait trop de nuances différentes à retenir dans la
   légende ("orange, vert, beige [...] il faudrait voir assez simplement à
   quoi ça correspond"), donc pas de quatrième teinte pour une catégorie de
   plus - juste un contour pour la distinguer de "Read" au survol rapide. */
.pill.promo { background: #F1EEE6; color: var(--ink-soft); border: 1px solid var(--card-line); }

/* Légende de l'onglet Emails (2026-09-25) : les mêmes classes .pill que
   sur chaque carte email, juste alignées en ligne à côté de Refresh. */
.mail-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-block;
  margin-right: 6px;
  flex-shrink: 0;
}

/* Un bouton-texte corail dans une carte (maquette, `.link-btn`) : l'action
   secondaire d'un item — rouvrir, relire, retirer — sans le poids d'un vrai
   bouton. Toujours un <button> : la règle du clavier ne change pas. */
.link-btn {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  color: var(--coral-deep);
  cursor: pointer;
  padding: 0;
  margin: 6px 12px 0 0;
  min-height: 0;
  border-radius: 4px;
}
.link-btn:hover { color: var(--coral-hover); text-decoration: underline; border-color: transparent; }
.link-btn[disabled] { opacity: .55; cursor: default; }

.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .9rem; }
.row-form { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.grow { flex: 1 1 14rem; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: .8rem; }
.field:last-of-type { margin-bottom: 0; }
.field label { font-weight: 600; font-size: .74rem; color: var(--ink-soft); }
.mock-form { display: flex; flex-direction: column; }
.field-check { flex-direction: row; align-items: flex-start; gap: .55rem; }
.field-check label { font-weight: 400; }

/* Fournisseur détecté depuis l'adresse tapée (2026-09-14) : un petit logo
   dans le champ, jamais seul (le texte du bouton ou du libellé porte
   toujours la même information) — décoratif pour un lecteur d'écran. */
.provider-icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.address-with-icon { position: relative; }
.address-with-icon .provider-icon {
  position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
}
.address-with-icon.has-icon input { padding-left: 2.5rem; }
.oauth-button { display: inline-flex; align-items: center; gap: .5rem; }
.item .provider-icon { vertical-align: -.2rem; margin-right: .35rem; }

/* Le guide pas à pas pour obtenir un mot de passe d'application (2026-09-24,
   retour de Greg : « un rapide guide par plateforme pour expliquer
   précisément comment générer le mot de passe »). Un <details> natif :
   ouvert ou fermé au clavier sans une ligne de JS (règle n°1 en tête de
   app.js). */
.password-guide { margin: 0 0 12px; }
.password-guide summary {
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  color: var(--coral-deep);
  list-style: none;
}
.password-guide summary::-webkit-details-marker { display: none; }
.password-guide summary::before { content: '▸ '; }
.password-guide[open] summary::before { content: '▾ '; }
.password-guide ol {
  margin: 8px 0 0;
  padding-left: 1.15rem;
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.55;
}
.password-guide li + li { margin-top: 4px; }
.password-guide .hint { margin: 8px 0 10px; }

/* Le bouton direct vers la page Google/Apple/etc. qui genere le mot de
   passe d'application (2026-10-02, retour de Greg : remonte en tete du
   guide, avant les champs adresse/mot de passe - voir index.html). Meme
   famille visuelle que .oauth-button (icone + libelle), mais en contour
   corail plutot qu'en bouton neutre : c'est la premiere action attendue
   sur cet ecran pour un fournisseur a mot de passe d'application, elle
   merite plus de poids qu'un simple lien texte. */
.guide-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 9px 16px;
  border: 1px solid var(--coral-deep);
  border-radius: 10px;
  color: var(--coral-deep);
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
}
.guide-cta:hover { background: var(--peach); }

/* La section decennale de l'onglet Rates (`claude/70`) : un disclosure natif,
   mais l'affordance de `.password-guide` (juste un triangle discret,
   couleur corail) se confondait avec l'anneau de focus clavier, lui aussi
   corail (Greg, 2026-09-29 : "on ne comprend pas que c'est cliquable").
   Ici, une vraie boite avec un fond, pour qu'elle se lise comme un
   controle qu'on peut ouvrir, jamais comme une erreur. */
.tax-decennale {
  margin: 0 0 .8rem;
  border: 1px solid var(--card-line);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--peach);
}
.tax-decennale summary {
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.tax-decennale summary::-webkit-details-marker { display: none; }
.tax-decennale summary::before { content: '▸ '; }
.tax-decennale[open] summary::before { content: '▾ '; }
.tax-decennale[open] summary { margin-bottom: 10px; }
.tax-decennale .field:last-of-type { margin-bottom: 0; }

/* Chantier 2 (`claude/70`) : les trois sections de l'onglet Rates une fois
   le profil fiscal complet - tarifs horaires, prestations, classes de TVA. */
#rates-content .card { margin: 0 0 .8rem; }
#rates-content .card h3 { margin: 0 0 .3rem; }
.rate-form { margin-top: .8rem; }
.rate-form .field { margin-bottom: .6rem; }
.rate-form button[type="submit"] { margin-right: .6rem; }
.rate-item-actions { display: flex; gap: .6rem; margin-top: 2px; }
.rate-item-actions .link-btn { margin: 0; padding: 0; }

input, textarea, select {
  font: inherit;
  font-size: .85rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 10px;
  padding: 9px 12px;
  min-height: 2.6rem;
}
textarea { resize: vertical; }
input[type="checkbox"] { min-height: 0; width: 1.15rem; height: 1.15rem; margin-top: .25rem; }

button {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  min-height: 2.6rem;
}
button:hover { border-color: var(--ink-soft); }
button[disabled] { opacity: .55; cursor: not-allowed; }

/* Le corail vif ne porte pas de texte blanc lisible : les boutons utilisent
   le corail profond (règle actée dans l'identité de marque). */
.primary {
  background: var(--coral-deep);
  border-color: var(--coral-deep);
  color: #fff;
}
.primary:hover { background: var(--coral-hover); border-color: var(--coral-hover); }

/* Le micro doit se voir tout de suite, ordinateur comme PWA (Greg,
   2026-09-16) : bordure corail et icône au repos, pas seulement pendant
   l'écoute, pour qu'il ne se perde pas à côté du bouton Send. `.voice-btn`
   est partagée avec #talk-shortcut (en-tête, 2026-09-16) : même look pour
   « parler », qu'on l'atteigne par le formulaire ou par le raccourci.
   `.mic-toggle` est en plus posée sur #dictate et #talk (Greg, 2026-09-17,
   qui a remplacé l'unique #mic par ce choix Dictate / Start Talking) : les
   règles d'état ci-dessous (pressé, écoute, réponse) s'appliquent aux deux
   pareillement, un seul étant actif à la fois. */
.voice-btn, .mic-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 3rem;
  padding: 9px 18px;
  border-width: 2px;
  border-color: var(--coral-deep);
  color: var(--coral-deep);
  font-weight: 700;
}
.mic-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.mic-toggle[aria-pressed="true"] {
  background: var(--coral);
  border-color: var(--coral-deep);
  color: var(--ink);
}

/* Anneau qui respire pendant l'écoute : le seul signal que l'arrêt est
   automatique (silence) et non plus un second clic à faire. « Replying » —
   Edwin réfléchit ou répond — n'a pas ce même anneau (rien à couper par un
   silence ici), mais reste visuellement « pressé » : un clic y annule la
   suite de la conversation mains libres (Greg, 2026-09-16). Désactivé par
   la règle prefers-reduced-motion générale du fichier, plus bas. */
.mic-toggle.mic-listening { animation: mic-pulse 1.4s ease-out infinite; }
.mic-toggle.mic-replying { background: var(--peach); border-color: var(--coral-deep); color: var(--ink); }

/* Le choix Dictate / Start Talking se fait pour toute la boucle, pas tour
   par tour (Greg, 2026-09-17) : celui qui n'est pas choisi disparaît plutôt
   que de rester cliquable pendant que l'autre écoute ou répond. */
#dictate, #talk { margin-right: .5rem; }
@keyframes mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 111, 91, .45); }
  70%  { box-shadow: 0 0 0 13px rgba(255, 111, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 111, 91, 0); }
}

/* Le raccourci de l'en-tête (Greg, 2026-09-16) : « Conversation » puis
   « Talk » en deux clics devient un seul. Posé après les onglets plutôt
   qu'au milieu, pour ne pas déplacer les repères déjà appris. */
#talk-shortcut { margin-left: .4rem; }

/* Le bouton rond du centre, PWA (Greg, 2026-09-16) : deux icônes à gauche,
   lui au milieu, deux à droite. Il déborde au-dessus de la barre (comme un
   bouton d'appareil photo) pour qu'il n'y ait aucun doute sur lequel des
   cinq active la voix. */
@media (max-width: 860px) {
  .bottom-talk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    flex: 0 0 auto;
    width: 4rem;
    margin-top: -1.15rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
  }
  .talk-bubble {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--coral-deep);
    color: #fff;
    box-shadow: 0 6px 16px rgba(220, 75, 50, .4);
  }
  .talk-bubble .mic-icon { width: 22px; height: 22px; }
}

/* --- listes ----------------------------------------------------------- */

.stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }

/* La liste des connexions (2026-09-24, retour de Greg : « un look comme
   l'image » — une capture d'un écran de réglages iOS : un badge d'icône,
   un nom, un état en dessous, une puce et une action à droite, des
   rangées séparées par un simple filet plutôt que chacune sa propre
   carte). Volontairement différent de `.item`/`.rail` juste en dessous :
   ce n'est pas une liste de contenu métier (notices, tâches, courrier...)
   mais un panneau de réglages, et Greg a demandé ce vocabulaire visuel
   pour cette liste précisément. `.apps-card` est une `.card` normale (le
   cadre, l'ombre) ; ce bloc ne pose que ce qu'elle contient. */
.apps-card { padding: .35rem 1rem; }
.apps-list { list-style: none; margin: 0; padding: 0; }
.app-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
}
.app-row + .app-row { border-top: 1px solid var(--card-line); }
.app-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--card-line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-icon img { width: 20px; height: 20px; }
.app-row-body { flex: 1; min-width: 0; }
.app-name {
  display: block;
  font-weight: 600;
  font-size: .87rem;
  color: var(--ink);
  line-height: 1.3;
  word-break: break-word;
}
.app-sub { display: block; font-size: .76rem; color: var(--ink-soft); margin-top: 2px; }
.app-sub-inline { font-weight: 400; color: var(--ink-soft); font-size: .78rem; }
.app-row-trail { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.app-row-trail .link-btn { margin: 0; }
/* Le catalogue "Connect another" (2026-09-24) et les rangées "Coming soon"
   posent leur action directement dans `.app-row` (pas de puce, pas de
   retrait) : un simple lien à droite, ou un texte neutre quand rien n'est
   encore branché derrière. */
.app-row > .link-btn, .app-row > .soon-label { flex-shrink: 0; margin: 0; }
.soon-label { font-size: .78rem; color: var(--ink-soft); font-weight: 500; }
.app-icon.soon { background: #F1EEE6; border-color: #F1EEE6; color: var(--ink-soft); }
.app-icon.soon svg { width: 18px; height: 18px; }

/* Le formulaire de connexion, déplacé sous la ligne cliquée (2026-09-24,
   retour de Greg : « on ne voit pas les contacts, calendrier à connecter
   il faut être précis » — remplace les deux formulaires génériques qu'il a
   demandé de supprimer). `--peach` (déjà la teinte "ceci demande votre
   attention" ailleurs dans l'app) marque ce <li> comme différent d'une
   ligne de catalogue ordinaire ; le padding gauche aligne le contenu sous
   la colonne d'icône (38px + 12px d'écart) plutôt que sous le bord de la
   carte. Largeurs en % et box-sizing global (`* { box-sizing: border-box }`
   en tête de fichier) : aucun risque de débordement horizontal même sur un
   écran étroit — voir la remarque de Greg du 2026-09-24 sur le mode app. */
.app-row-form-slot {
  padding: 14px 12px 16px 54px;
  background: var(--peach);
  border-top: 1px solid var(--card-line);
}
.app-row-form-slot #connect-mail-form h3,
.app-row-form-slot #connect-calendar-form h3 {
  margin: 0 0 .7rem;
  font-size: .92rem;
}

/* Le titre de groupe au-dessus d'une carte "apps" ("Connected", "Connect
   another") — même vocabulaire que les autres petits titres discrets de
   l'application (`.meta`), en capitales pour marquer la coupure entre deux
   cartes plutôt qu'un `<h3>` de plus. */
.group-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 18px 2px 6px;
}
.group-label:first-of-type { margin-top: 0; }

/* Le compte n'a plus de sous-navigation propre (2026-10-06) : chaque entrée
   du menu principal ouvre directement sa sous-page, voir `showAccountSubpanel`
   dans app.js. Seuls les `.account-subpanel` non sélectionnés portent
   `hidden` — c'est `show()` qui le pose et le retire, jamais une classe. */
.account-shell { display: block; }
.account-content { min-width: 0; }
.account-subpanel > h2:first-child { margin-top: 0; }


/* La carte de la maquette : une barre de couleur (`.rail`, 4px, arrondie,
   posée DANS la carte — pas une bordure gauche) puis le corps. Toutes les
   cartes du produit passent par `card()` dans app.js, qui produit
   exactement cette structure ; les classes de rail ci-dessous ne font que
   choisir la couleur depuis un champ réel (`level`, `starts_in_minutes`,
   `unread`, `overdue`, `done`). */
.item {
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 13px;
  padding: 12px 14px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  box-shadow: var(--shadow);
}
.item .rail {
  width: 4px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--card-line);
  flex-shrink: 0;
}
.item-body { flex: 1; min-width: 0; }
.item h3 { margin: 0; font-size: .89rem; font-weight: 600; }
.item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* Un brouillon est du texte écrit à la main : ses retours à la ligne font
   partie du message, et les écraser change ce que l'utilisateur relit avant
   d'envoyer. */
.item p { margin: 3px 0 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.45; white-space: pre-wrap; }
.item .row { margin-top: .5rem; }
.item button { padding: 6px 12px; min-height: 2rem; font-size: .8rem; }
.item .link-btn { padding: 0; min-height: 0; }
.item-snippet { font-style: italic; margin-top: 5px; }
/* Brouillon complet dans la colonne 1/3 (2026-09-25, Greg : relire tout
   avant d'envoyer, pas seulement un aperçu tronqué) - pas italique comme
   `.item-snippet`, ça reste un texte à vérifier, pas une citation ; les
   retours à la ligne du brouillon sont préservés, et un très long
   brouillon scrolle plutôt que de pousser toute la page. */
.mail-draft-body {
  white-space: pre-wrap;
  margin-top: 5px;
  font-size: .85rem;
  line-height: 1.5;
  max-height: 40vh;
  overflow-y: auto;
}
.dictate-btn { margin-top: 4px; }
/* Edition d'un brouillon en place (2026-09-28) - meme empreinte que
   .mail-draft-body pour que le textarea ne fasse pas sauter la mise en
   page en passant de lecture a edition. */
.mail-draft-edit {
  width: 100%;
  min-height: 8rem;
  max-height: 40vh;
  font: inherit;
  line-height: 1.5;
  margin-top: 5px;
}
/* Pied de page de l'onglet Emails (2026-09-28, Greg : « bloquer a 15 par
   page et avoir une pagination en pied de page ») - centre, discret,
   n'apparait que s'il y a plus d'une page (renderEmailsPage). */
.emails-pagination {
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
/* Composer depuis zero (2026-09-28, Greg : « depuis la page Email on ne
   peut pas rediger un email ! ») - meme carte que le reste de l'onglet,
   ouverte/fermee par #emails-compose-toggle plutot que de rester visible
   en permanence. */
.mail-compose-pane {
  border: 1px solid var(--card-line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--card-bg, var(--bg));
}
.mail-compose-pane input[type="text"],
.mail-compose-pane textarea {
  width: 100%;
  font: inherit;
}
.mail-compose-pane textarea { min-height: 7rem; line-height: 1.5; }

/* Le corps complet d'un email, ouvert sur place. Texte brut, à la ligne
   près : c'est ce que l'expéditeur a écrit, pas une mise en page. */
.mail-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--card-line);
  color: var(--ink);
  font-size: .85rem;
  line-height: 1.55;
  max-height: 60vh;
  overflow-y: auto;
}
.item.is-open .item-snippet { display: none; }

.item-urgent .rail, .item-unread .rail, .item-overdue .rail, .item-soon .rail { background: var(--coral); }
.item-done .rail { background: var(--green); }
/* Agenda : même vocabulaire de couleur que les notices/tâches plutôt qu'un
   troisième système — "now" reprend le corail profond de `.pill.now`. */
.item-now .rail { background: var(--coral-deep); }
.item-read h3 { font-weight: 500; }

/* Une tâche (maquette, `.item.todo`) : la coche ronde, puis titre et puce
   sur une ligne. La coche est un vrai bouton (règle du clavier). */
.item.todo { align-items: flex-start; }
.item.todo .item-body > .item-top { align-items: baseline; }
.todo-check {
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--card-line);
  background: #fff;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
}
.todo-check[aria-checked="true"] { background: var(--green); border-color: var(--green); }
.item.todo.item-done h3 { text-decoration: line-through; color: var(--ink-soft); }

.todo-form { display: flex; gap: 8px; margin-bottom: 12px; }
.todo-form input[type="text"] { flex: 1; min-width: 0; }
.todo-form input[type="date"], .todo-form input[type="time"] { flex: 0 0 auto; }

.meta { font-size: .78rem; color: var(--ink-soft); font-weight: 400; }

.notice-paused {
  background: var(--peach);
  border: 1px solid var(--peach-line);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  font-weight: 600;
}

.voice-summary {
  background: var(--green-tint);
  border: 1px solid #BFE6D3;
  border-radius: var(--radius);
  padding: .7rem .9rem;
  font-weight: 600;
  margin: 0;
}

/* --- la barre d'utilisation de la voix (2026-09-20) -------------------- */
.usage {
  border: 1px solid var(--peach-line);
  border-radius: var(--radius);
  background: #fff;
  padding: .8rem .9rem;
  margin: 0;
}
.usage-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .88rem; }
.usage-head strong { font-size: 1rem; }
.usage-bar {
  position: relative;
  height: .55rem;
  margin: .5rem 0 .45rem;
  border-radius: 999px;
  background: #F1EEE6;
  overflow: hidden;
}
.usage-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--green);
  transition: width .3s ease;
}
.usage.is-high .usage-fill { background: var(--coral); }
.usage.is-out .usage-fill { background: var(--coral-deep); }
.usage-meta { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.usage-note { margin: .35rem 0 0; }
.usage.is-out .usage-note { color: var(--ink); font-weight: 600; }

/* --- conversation ----------------------------------------------------- */

.transcript {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin-bottom: 1rem;
  max-height: 55vh;
  overflow-y: auto;
}

.turn { border-radius: var(--radius); padding: .75rem .9rem; }
.turn-you {
  background: var(--peach);
  border: 1px solid var(--peach-line);
  align-self: flex-end;
  max-width: 85%;
}
.turn-edwin {
  background: #fff;
  border: 1px solid var(--peach-line);
  border-left: 4px solid var(--coral);
  max-width: 95%;
}
.turn-error { border-left-color: var(--coral-deep); background: var(--peach); }
.turn p { margin: 0; white-space: pre-wrap; }
.turn .who { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
              color: var(--ink-soft); display: block; margin-bottom: .25rem; }
.turn audio { margin-top: .6rem; width: 100%; }
.turn .tools { font-size: .82rem; color: var(--ink-soft); margin-top: .45rem; }

/* Étape 1 (2026-09-18) : la carte de confirmation d'une action GATED
   (réserver, déplacer, annuler un rendez-vous ; envoyer un email ; oublier
   un souvenir). Un geste plutôt qu'une phrase à retaper — mais un clic
   n'est qu'un raccourci vers le même mécanisme que taper « oui » : voir
   `edwin/voice/session.py`, docstring de `respond()`. Une fois cliquée,
   la carte se fige (boutons désactivés, choix affiché en toutes lettres)
   pour qu'on ne puisse jamais la déclencher deux fois par erreur. */
.confirm-card {
  margin-top: .6rem;
  padding: .7rem .8rem;
  border: 1px solid var(--peach-line);
  border-radius: 10px;
  background: var(--peach);
}
.confirm-card p { font-weight: 600; margin-bottom: .55rem; }
/* claude/140 : la carte d'envoi d'un email montre le mail COMPLET (À, objet,
   texte), avec ses retours à la ligne, et défile s'il est long. */
.confirm-card p { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 45vh; overflow-y: auto; }
.confirm-card .actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.confirm-card .actions button { min-height: 2.4rem; padding: 7px 16px; }
.confirm-card .decided { font-size: .85rem; color: var(--ink-soft); }

/* Edwin réfléchit (2026-09-18) : trois points qui respirent, à la place des
   phrases toutes faites — muet, et immobile si l'utilisateur préfère moins
   d'animation (règle prefers-reduced-motion plus bas). */
.turn-thinking .dots { display: flex; gap: .3rem; font-size: 1.6rem; line-height: 1; color: var(--coral); }
.turn-thinking .dots span { animation: edwin-breathe 1.2s ease-in-out infinite; }
.turn-thinking .dots span:nth-child(2) { animation-delay: .2s; }
.turn-thinking .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes edwin-breathe { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* --- confort ---------------------------------------------------------- */

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

@media (prefers-contrast: more) {
  .item, .card { border-color: var(--ink-soft); }
  .lede, .hint, .state, .item p { color: var(--ink); }
}

/* --- accueil ---------------------------------------------------------- */

.onb-question { margin: 0 0 .3rem; font-size: 1.25rem; }

.onb-choices { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0 0; }

/* Les jours de la semaine (horaires de travail, 2026-09-19) : sept cases à
 * cocher natives habillées en pastilles — Espace coche, Tab passe, un
 * lecteur d'écran lit « Monday, case à cocher, cochée ». */
.day-picker { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .6rem; }
.day-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.1rem;
  padding: .45rem .7rem;
  border: 1px solid var(--peach-line);
  border-radius: 999px;
  background: #fff;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.day-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.day-pill:has(input:checked) { background: var(--coral); border-color: var(--coral); color: #fff; }
.day-pill:has(input:focus-visible) { outline: 2px solid var(--coral-deep); outline-offset: 2px; }
.hours-row, .zone-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.hours-row label, .zone-row label { font-weight: 600; font-size: .74rem; color: var(--ink-soft); }
.hours-row input[type=time] { width: 7.5rem; }
.same-hours { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: .86rem; }
.same-hours input { width: auto; margin: 0; }
.hours-per-day { display: flex; flex-direction: column; gap: .35rem; }
.hours-day-row label { min-width: 2.4rem; }
.zone-row input[type=text] { flex: 1 1 12rem; }
/* « within [50] km » reste sur une ligne : la ville prend toute la première. */
.zone-radius { display: inline-flex; align-items: center; gap: .5rem; }
.zone-row input[type=number] { width: 5.5rem; }
.onb-choice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .8rem;
  border: 1px solid var(--peach-line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}
.onb-choice:hover { border-color: var(--ink-soft); }
.onb-choice input { margin-top: .15rem; }
.onb-choice span { flex: 1; }

/* La barre de progression est décorative : le compte exact est écrit en
   toutes lettres juste au-dessus, pour qui ne voit pas la barre. */
.onb-bar {
  height: 6px;
  background: var(--peach);
  border-radius: 999px;
  overflow: hidden;
  margin: .3rem 0 1.2rem;
}
.onb-bar span { display: block; height: 100%; background: var(--coral); }

/* Visible pour les lecteurs d'écran, invisible à l'œil. Sert aux étiquettes
   dont le texte est déjà porté par le titre de l'étape juste au-dessus. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Lot 10 : l'écoute de rendez-vous ---------------------------------- */

/* Un libellé réservé aux lecteurs d'écran. `display: none` le retirerait de
 * l'arbre d'accessibilité — c'est-à-dire qu'il ne serait lu par personne,
 * ce qui est exactement le contraire du but. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* L'annonce de consentement est le seul bloc du produit qui a le droit
 * d'attirer l'œil : la sauter est un délit, pas une maladresse. */
.consent { border-left: 4px solid var(--accent, #FF6F5B); }

.consent-text {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid rgba(0, 0, 0, 0.15);
  font-size: 1.05rem;
  line-height: 1.5;
}

.report-summary { white-space: pre-wrap; line-height: 1.55; }

.quote-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; }
.quote-table th,
.quote-table td { text-align: left; padding: 0.4rem 0.5rem; vertical-align: middle; }
.quote-table thead th { border-bottom: 1px solid rgba(0, 0, 0, 0.15); font-size: 0.9rem; }
.quote-table tbody tr + tr td { border-top: 1px solid rgba(0, 0, 0, 0.07); }
.quote-table input { width: 100%; box-sizing: border-box; }
.quote-table input.qty,
.quote-table input.unit,
.quote-table input.price { max-width: 7rem; }

.quote-total { font-weight: 700; font-size: 1.15rem; }

/* Une ligne sans prix n'est pas une erreur : c'est un trou visible, à
 * remplir. La marquer discrètement vaut mieux que de l'afficher à 0 €, qui
 * est la façon dont un devis part gratuit. */
.to-price input.price { outline: 2px dashed rgba(255, 111, 91, 0.6); outline-offset: 1px; }

@media (max-width: 560px) {
  .quote-table thead { display: none; }
  .quote-table tbody tr { display: block; margin-bottom: 0.75rem; }
  .quote-table td { display: block; padding: 0.2rem 0; }
  .quote-table input.qty,
  .quote-table input.unit,
  .quote-table input.price { max-width: 100%; }

  main { padding: 18px 16px 36px; }
  .site-header { padding: 10px 16px; }
  .glance { gap: 8px; }
  .glance-tile { padding: 12px 10px 10px; }
  .glance-tile .num { font-size: 1.35rem; }
  .glance-tile .label { font-size: .64rem; }
  .todo-form { flex-wrap: wrap; }
  .todo-form input[type="text"], .todo-form button { flex: 1 1 100%; }
  .todo-form input[type="date"], .todo-form input[type="time"] { flex: 1 1 40%; min-width: 0; }
}

/* --- puces de sélection de boîte mail (Lot 9, onglet Emails) ---------- */
/* N'apparaissent que si plusieurs boîtes sont connectées : une seule à
   choisir n'a rien à faire dans une barre de choix. */

.chipbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  min-height: 0;
}
.chip:hover { background: var(--peach); }
.chip-active {
  background: var(--peach);
  border-color: var(--peach-line);
  color: var(--coral-deep);
}

/* --- barre de navigation mobile (Lot 9) -------------------------------- */
/* Cachée par défaut : c'est la largeur d'écran, plus bas, qui décide
   laquelle des deux barres (celle de l'en-tête ou celle-ci) est affichée.
   `show()`/`hidden` (app.js) contrôlent seulement SI une barre de nav
   devrait être visible en général (jamais sur les écrans de connexion) ;
   cette règle décide LAQUELLE, et gagne toujours sur `[hidden]` retiré. */
.bottom-nav { display: none; }

/* 2026-10-06 : le seuil passe de 560 à 860 px. Au-dessus, la navigation est
   la barre latérale de l'ordinateur (voir le bloc « refonte » en fin de
   fichier) ; en dessous, la barre du bas, y compris sur tablette. */
@media (max-width: 860px) {
  #nav { display: none !important; }

  body { padding-bottom: 5rem; }

  .bottom-nav:not([hidden]) {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: #fff;
    border-top: 1px solid var(--peach-line);
    padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: flex-start;
  }

  .bottom-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem .5rem;
    min-height: 0;
    cursor: pointer;
    flex: 1 1 0;
  }
  .bottom-tab[aria-current="page"] { color: var(--coral-deep); }
  .bottom-icon {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .bottom-icon-solid { fill: currentColor; stroke: none; }

  /* <details> natif : pas de JavaScript pour ouvrir/fermer le tiroir, donc
     rien qui puisse le laisser dans un état incohérent avec le clavier. */
  .bottom-more { position: relative; flex: 1 1 0; }
  .bottom-more-summary {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bottom-more-summary::-webkit-details-marker { display: none; }
  .bottom-more-sheet {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: .5rem;
    background: #fff;
    border: 1px solid var(--peach-line);
    border-radius: var(--radius);
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    box-shadow: 0 4px 18px rgba(23, 33, 59, .15);
    min-width: 9rem;
  }
  .bottom-more-sheet .tab { text-align: left; }
}

/* --- un véritable agenda : la semaine (2026-09-20) ---------------------- */
/* Sept colonnes heure par heure, dans l'onglet Agenda & Appointment
   (`renderWeek`, app.js). Chaque bloc est posé à son heure de début et à sa
   durée réelles (`start`/`end` de GET /agenda/week, dans le fuseau du
   tenant). La grille est toujours visible, même vide : c'est ce qui manquait
   (« je ne vois pas l'agenda »). Sur un téléphone, elle défile à
   l'horizontale plutôt que d'écraser sept colonnes dans 360 px. */
.week-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.week-head h2 { margin: 0; }
.week-nav { display: flex; gap: .3rem; }
.week-nav .ghost {
  min-height: 0;
  padding: .3rem .7rem;
  font-size: .82rem;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 999px;
}
.week-nav .ghost[aria-label] { font-size: 1.1rem; line-height: 1; padding: .2rem .7rem; }
.week-hint { margin: .5rem 0 0; }
.week {
  --week-hour: 44px;
  --week-gutter: 42px;
  position: relative;
  margin-top: .6rem;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 13px;
  box-shadow: var(--shadow);
  overflow-x: auto;
  overflow-y: hidden;
}
.week-inner { min-width: 100%; }
.week-days, .week-strip, .week-body {
  display: grid;
  grid-template-columns: var(--week-gutter) repeat(7, minmax(0, 1fr));
}
.week-days { border-bottom: 1px solid #F1EEE6; position: sticky; top: 0; background: #fff; z-index: 2; }
.week-dayhead {
  padding: .45rem .2rem .35rem;
  text-align: center;
  font-size: .72rem;
  color: var(--ink-soft);
  border-left: 1px solid #F1EEE6;
  line-height: 1.2;
}
.week-dayhead span { display: block; }
.week-dayhead b { display: block; font-size: .95rem; color: var(--ink); font-weight: 600; }
.week-dayhead.is-today b {
  display: inline-block; min-width: 1.7em; padding: .1em .2em;
  border-radius: 999px; background: var(--coral); color: #fff;
}
.week-dayhead.is-off { color: #B4B9C7; }
.week-holiday {
  grid-column: 1 / -1;
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .6rem;
  background: #FFF4E5;
  color: #8A5A00;
  border-bottom: 1px solid #F1EEE6;
}
.week-strip .week-allday { border-left: 1px solid #F1EEE6; padding: 2px 3px; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.week-strip .week-allday span, .week-holiday-cell {
  font-size: .68rem; font-weight: 600; background: #F1EEE6; color: var(--ink-soft);
  padding: 2px 6px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.week-holiday-cell { background: #FFF4E5; color: #8A5A00; }
.week-gutter { position: relative; }
.week-hourlabel {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-size: .66rem; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.week-col {
  position: relative;
  border-left: 1px solid #F1EEE6;
  background-image: repeating-linear-gradient(to bottom, #F1EEE6 0 1px, transparent 1px var(--week-hour));
  cursor: pointer;
}
.week-col.is-off { background-color: #FBFAF7; }
.week-col.is-today { background-color: #FFF9F6; }
.week-col:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: -2px; }
.week-off {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.035) 6px 7px);
  pointer-events: none;
}
.week-event {
  position: absolute; left: 2px; right: 3px;
  background: var(--peach);
  border-left: 3px solid var(--coral);
  border-radius: 7px;
  padding: 2px 5px;
  font-size: .7rem;
  line-height: 1.25;
  overflow: hidden;
  color: var(--ink);
  z-index: 1;
  cursor: pointer;
}
/* Cliquable depuis le 2026-10-02 (Greg : « pas la possibilité de cliquer
   dessus pour l'éditer ») - un contour au survol/focus, comme `.week-col`
   juste au-dessus, pour que ça se voie avant même le clic. */
.week-event:hover, .week-event:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: -2px; }
.week-event.is-now { background: var(--coral-deep); border-left-color: var(--coral-deep); color: #fff; }
.week-event.is-past { background: #F1EEE6; border-left-color: var(--card-line); color: var(--ink-soft); }
.week-event b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-event span { opacity: .85; }
/* Le logo du fournisseur dans un bloc de la grille semaine (2026-09-24) :
   flottant à gauche pour rester sur la même ligne qu'un titre `display:
   block` déjà tronqué en ellipse, à une taille qui tient dans un créneau
   de 30 min (hauteur minimale 18px). N'apparaît que si le serveur envoie
   `event.provider`, donc jamais avec un seul agenda connecté. */
.week-event .provider-icon { float: left; width: .68rem; height: .68rem; margin: .12rem .25rem 0 0; }
.week-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--coral-deep); pointer-events: none; z-index: 1; }
.week-now::before { content: ""; position: absolute; left: -4px; top: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral-deep); }
.week-pick {
  position: absolute; left: 2px; right: 3px;
  border: 2px dashed var(--coral); border-radius: 7px; background: rgba(255,255,255,.6);
  pointer-events: none; z-index: 1;
}
.book-form { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--peach-line); border-radius: var(--radius); background: #fff; }
.book-form h3 { margin: 0 0 .6rem; font-size: 1rem; }
.book-when { align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.book-when .field { margin-bottom: .6rem; }
.book-when input[type=time] { width: 7rem; }
@media (max-width: 560px) {
  .week { --week-gutter: 36px; }
  .week-inner { min-width: 620px; }
}

/* Pied de page (2026-09-24, retour de Greg) : dans le flux normal de la
   page, jamais en `position: fixed` — la barre mobile (.bottom-nav) l'est
   déjà, et `body { padding-bottom: 5rem }` (plus haut) lui réserve déjà la
   place voulue après tout le contenu réel ; un deuxième élément fixé au
   même endroit les ferait se chevaucher. Texte discret, centré, qui ne
   prétend pas être un bouton ni un lien. */
.app-footer { padding: 1.2rem 1rem 1.6rem; text-align: center; }
.app-footer-version { color: var(--ink-soft); font-size: .74rem; margin: 0; }

/* Dernier état connu d'un onglet, en attendant le serveur (2026-10-05, voir
 * `snapshot` dans app.js) : estompé, jamais présenté comme actuel. */
.panel.is-stale #mail,
.panel.is-stale #notices,
.panel.is-stale #agenda,
.panel.is-stale #todos,
.panel.is-stale #emails-list,
.panel.is-stale #week-grid,
.panel.is-stale #agenda-full { opacity: 0.55; transition: opacity 0.2s; }

/* Catalogue produit (2026-10-05, claude/130) : vignette dans la liste,
 * galerie de photos et lignes de variantes dans la fiche, groupes de
 * champs « Stock et variantes », « Livraison », « Réservation ». */
.pill.muted { background: #F1EEE6; color: var(--ink-soft); }
.pill.urgent { background: var(--coral-deep); color: #fff; }
.item.is-off-sale .item-body { opacity: 0.6; }
.item.has-thumb { display: grid; grid-template-columns: auto 64px 1fr; align-items: start; column-gap: .7rem; }
.catalogue-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--card-line); background: #fff; }
.catalogue-group { border: 1px solid var(--card-line); border-radius: 12px; padding: .7rem .8rem .2rem; margin: 0 0 .8rem; }
.catalogue-group legend { font-weight: 700; font-size: .78rem; color: var(--ink-soft); padding: 0 .3rem; }
.field-title { font-weight: 600; font-size: .74rem; color: var(--ink-soft); }
.catalogue-photos { display: flex; flex-wrap: wrap; gap: .6rem; }
.catalogue-photos:empty { display: none; }
.catalogue-photo { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.catalogue-photo img { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; border: 1px solid var(--card-line); }
.catalogue-photo .link-btn { margin: 0; padding: 0; font-size: .72rem; }
.catalogue-variants { display: flex; flex-direction: column; gap: .4rem; }
.catalogue-variants:empty { display: none; }
.catalogue-variant { display: grid; grid-template-columns: 2fr 1fr 70px 1fr auto; gap: .4rem; align-items: center; }
.catalogue-variant input { min-width: 0; }
.catalogue-variant .link-btn { margin: 0; padding: 0 .2rem; }
@media (max-width: 600px) {
  .catalogue-variant { grid-template-columns: 1fr 1fr; }
  .catalogue-variant .variant-label { grid-column: 1 / -1; }
}

/* Tester comme un client (2026-10-06, claude/130 tranche 4) : bandeau, et
 * micro masque le temps de l'essai (le client, lui, ecrit). */
.conv-mode-row { margin-top: .2rem; }
.customer-mode-banner { background: var(--peach); border-color: var(--peach-line); margin-bottom: 1rem; }
.customer-mode-banner p { margin: 0; font-size: .9rem; }
#panel-conversation.customer-mode .mic-toggle { display: none; }
body.customer-mode #talk-shortcut, body.customer-mode #talk-bottom { display: none; }
#panel-conversation.customer-mode .transcript { border: 2px dashed var(--peach-line); border-radius: var(--radius); padding: .6rem; }
.turn .tools a { color: var(--coral-deep); font-weight: 600; }

/* Compte > Mentions légales : les deux pages publiques (2026-10-06). */
.legal-links { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .6rem; }
.legal-links a { font-weight: 600; }

/* =========================================================================
   Refonte 2026-10-06 : le système de l'interface admin, appliqué à l'app
   client (Greg : « revoir toute l'interface en copiant la version
   administrateur »).

   Ce bloc est VOLONTAIREMENT en fin de fichier : il reprend, règle par
   règle, les jetons et les composants de `frontend-admin/css/admin.css`
   (même palette, même échelle de rayons, d'ombres et d'espacements) et
   l'emporte sur ce qui précède sans en toucher la logique. Rien dans le
   HTML ni dans app.js n'a besoin de changer pour qu'il s'applique, à une
   exception près : les seuils de la barre du bas (560 -> 860 px, plus haut).

   Contraintes tenues : aucune police distante, aucun anneau de focus
   supprimé (test_pwa_source), les ids et l'attribut `hidden` intacts, et
   `prefers-reduced-motion` respecté par la règle générale plus haut.
   Charte de référence : claude/144-charte-graphique-interface-admin.
   ========================================================================= */

:root {
  --surface: #ffffff;
  --muted: #55607a;
  --faint: #67718b;
  --btn: #cf452c;            /* corail profond : texte blanc à 4,6:1 (AA) */
  --btn-hover: #b93a23;
  --coral-text: #b93a23;     /* corail pour du TEXTE sur fond clair ou pêche */
  --peach-soft: #fff5f1;
  --bad: #b5381f;
  --amber: #8a5a00;
  --amber-tint: #fff3d6;
  --line: #ebe4d8;
  --line-strong: #d9d0c0;
  --radius-sm: 10px;
  --shadow-pop: 0 10px 40px rgba(23, 33, 59, .18);
  --sidebar-w: 256px;

  /* Les jetons historiques de l'app pointent maintenant sur ceux de l'admin :
     tout ce qui les utilise (cartes, boutons, pastilles...) suit. */
  --radius: 16px;
  --card-line: var(--line);
  --shadow: 0 1px 2px rgba(23, 33, 59, .04), 0 6px 20px rgba(23, 33, 59, .045);
  --coral-deep: #cf452c;
  --coral-hover: #b93a23;
}

body { font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin-top: 0; }
a { text-decoration-color: var(--peach-line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--coral); }
svg { flex-shrink: 0; }

/* Anneau de focus : encre, net sur crème, blanc et corail (comme l'admin). */
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.skip { border-radius: 0 0 10px 0; font-weight: 700; }

/* --- titres et en-têtes de page ------------------------------------------ */

h1 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; margin: 0 0 4px; }
h2 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; margin: 28px 0 6px; line-height: 1.25; }
h3 { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.card h2, .card h3, .book-form h3, .app-row-form-slot h3 { font-size: 16px; margin-top: 0; }
.lede { color: var(--muted); font-size: 15px; margin: 0 0 20px; max-width: 70ch; }
.hint { color: var(--muted); font-size: 13.5px; }
.empty { color: var(--muted); font-size: 14px; padding: 12px 2px; }
.meta { color: var(--muted); font-size: 13px; }
.masthead { margin-bottom: 24px; gap: 16px 20px; }
.masthead h1 { margin: 0 0 4px; }
.masthead .lede { margin: 0; }
.block h2 { margin-top: 0; }
.col { gap: 28px; }
.board { gap: 28px; }

/* « I'm on watch » : une pastille d'état, comme .badge-ok de l'admin. */
.status-chip { font-size: 13px; font-weight: 700; padding: 5px 12px; background: var(--green-tint); border: 1px solid #bfe6d3; }
.status-chip.paused { background: var(--peach); border-color: var(--peach-line); color: var(--bad); }

/* --- cartes, éléments de liste, tuiles ----------------------------------- */

.card, .item, .usage, .book-form, .week, .install-card, .mail-compose-pane, .apps-card,
.catalogue-group, .glance-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card { padding: 22px; }
.card h2:first-child { margin-top: 0; }
.item { padding: 14px 16px; gap: 12px; border-radius: 14px; }
.item h3 { font-size: 14.5px; font-weight: 750; letter-spacing: 0; }
.item p { font-size: 13.5px; color: var(--muted); }
.stack { gap: 10px; }
.item .rail { width: 4px; background: var(--line); }
.item-urgent .rail, .item-unread .rail, .item-overdue .rail, .item-soon .rail { background: var(--coral); }
.item-done .rail { background: var(--green); }
.item-now .rail { background: var(--btn); }
.apps-card { padding: 6px 18px; }
.install-card { padding: 14px 16px; background: var(--peach-soft); border-color: var(--peach-line); box-shadow: none; }
.mail-compose-pane { background: var(--surface); padding: 18px 20px; }
.book-form { padding: 18px 20px; margin-top: 16px; }
.catalogue-group { box-shadow: none; padding: 14px 16px 6px; border-radius: 14px; }
.catalogue-group legend { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* Les trois chiffres du tableau de bord = les tuiles de l'admin : libellé
   au-dessus, valeur de 32 px en graisse 800. */
.glance { gap: 16px; margin: 0 0 32px; }
.glance-tile {
  display: flex; flex-direction: column; gap: 6px; min-height: 112px;
  padding: 18px 20px; border-radius: var(--radius);
}
.glance-tile .label {
  order: -1; margin: 0; font-size: 13.5px; font-weight: 650; color: var(--muted);
}
.glance-tile .num { font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.glance-tile.attn { background: linear-gradient(180deg, #fff 0%, var(--peach-soft) 100%); border-color: var(--peach-line); }
.glance-tile.attn .num { color: var(--coral-text); }

/* --- pastilles = badges de l'admin --------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0; line-height: 1.5;
  padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
}
.pill.attn, .pill.soon { background: var(--peach); color: var(--bad); border-color: var(--peach-line); }
.pill.done, .pill.sent { background: var(--green-tint); color: var(--green-deep); border-color: #bfe6d3; }
.pill.now, .pill.urgent { background: var(--btn); color: #fff; border-color: var(--btn); }
.pill.later, .pill.muted, .pill.promo { background: var(--bg); color: var(--muted); border-color: var(--line); }
.unread-dot { background: var(--coral); }

/* --- boutons, liens-boutons, puces, champs ------------------------------- */

button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; line-height: 1.2;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  transition: background .15s, border-color .15s, color .15s;
}
button:hover { background: var(--peach-soft); border-color: var(--peach-line); }
button[disabled] { opacity: .5; }
.primary, button.primary { background: var(--btn); border-color: var(--btn); color: #fff; }
.primary:hover, button.primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.item button, .confirm-card .actions button { min-height: 34px; padding: 5px 12px; font-size: 13.5px; border-radius: 10px; }
.ghost { background: transparent; border-color: transparent; }

.link-btn {
  display: inline; min-height: 0; padding: 4px 2px; margin: 6px 12px 0 0;
  background: none; border: 0; border-radius: 4px;
  font-size: 13.5px; font-weight: 650; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--peach-line); text-underline-offset: 3px;
}
.link-btn:hover { background: none; color: var(--ink); text-decoration-color: var(--coral); border-color: transparent; }
.item .link-btn { padding: 4px 2px; }

.voice-btn, .mic-toggle {
  min-height: 44px; padding: 8px 18px; border-width: 2px; border-color: var(--btn);
  color: var(--coral-text); background: var(--surface);
}
.mic-toggle[aria-pressed="true"] { background: var(--coral); border-color: var(--btn); color: var(--ink); }
.mic-toggle.mic-replying { background: var(--peach); border-color: var(--btn); color: var(--ink); }
.guide-cta { border-color: var(--btn); color: var(--coral-text); border-radius: 12px; font-weight: 700; font-size: 14px; }

input, textarea, select {
  font-size: 15px; min-height: 42px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color .15s;
}
input:hover, textarea:hover, select:hover { border-color: #c4baa8; }
input::placeholder, textarea::placeholder { color: #8b93a8; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 1px; border-radius: var(--radius-sm); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
select { padding-right: 34px; }
.field { gap: 6px; margin-bottom: 14px; }
.field label, .field-title, .hours-row label, .zone-row label, .orders-toolbar label {
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.field-check label { font-weight: 500; }
.error { color: var(--bad); font-weight: 650; font-size: 14px; }
.state { color: var(--muted); }

.chip, .chipbar .chip {
  border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px;
  padding: 6px 14px; min-height: 34px; font-size: 13.5px; font-weight: 650; color: var(--ink);
}
.chip:hover { background: var(--peach-soft); border-color: var(--peach-line); }
.chip-active { background: var(--peach); border-color: var(--peach-line); color: var(--ink); font-weight: 750; }

.day-pill { border-color: var(--line-strong); font-size: 13.5px; }
.day-pill:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.day-pill:has(input:focus-visible) { outline: 2.5px solid var(--ink); }
.onb-choice { border-color: var(--line-strong); border-radius: 14px; padding: 12px 14px; }
.onb-choice:hover { background: var(--peach-soft); border-color: var(--peach-line); }
.onb-bar { height: 6px; background: var(--peach); }
.onb-question { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }

/* --- encadrés (callout), bandeaux, confirmation, usage ------------------- */

.banner { font-size: 14px; }
.banner-warn { background: var(--amber-tint); border-bottom-color: #f1dca4; color: var(--amber); }
.notice-paused, .customer-mode-banner { background: var(--peach); border: 1px solid var(--peach-line); border-radius: 14px; padding: 12px 16px; font-weight: 650; font-size: 14px; }
.voice-summary { border-radius: 14px; font-size: 14px; padding: 12px 16px; }
.confirm-card { border-radius: 14px; border-color: var(--peach-line); background: var(--peach-soft); padding: 14px 16px; }
.usage { padding: 18px 20px; }
.usage-head { font-size: 14.5px; }
.usage-bar { height: 10px; background: #f1ebe0; }
.usage.is-high .usage-fill { background: var(--coral); }
.usage.is-out .usage-fill { background: var(--btn); }
.turn { border-radius: var(--radius); padding: 14px 16px; }
.turn-you { background: var(--peach); border-color: var(--peach-line); }
.turn-edwin { background: var(--surface); border-color: var(--line); border-left: 4px solid var(--coral); box-shadow: var(--shadow); }
.turn-error { background: var(--peach); }
.turn .who { font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.transcript { gap: 12px; }
.tax-decennale, .app-row-form-slot { background: var(--peach-soft); border-color: var(--peach-line); }
.tax-decennale { border-radius: 14px; }

/* --- listes de réglages (Compte > Apps) ---------------------------------- */

.app-icon { border-color: var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.app-name { font-size: 14.5px; font-weight: 700; }
.app-sub, .app-sub-inline, .soon-label { color: var(--muted); font-size: 13px; }
.app-row + .app-row { border-top-color: var(--line); }
.group-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--coral-text); margin: 24px 2px 8px; }

/* --- agenda semaine ------------------------------------------------------- */

.week { border-radius: var(--radius); }
.week-event { background: var(--peach); border-left-color: var(--coral); }
.week-event.is-now { background: var(--btn); border-left-color: var(--btn); }
.week-dayhead.is-today b { background: var(--btn); }
.week-nav .ghost { border-color: var(--line-strong); min-height: 34px; font-weight: 700; }

/* --- écrans hors coquille : connexion, accueil, paiement ------------------ */

#panel-auth, #panel-onboarding {
  max-width: 460px; margin: 7vh auto 0; padding: 28px 28px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
}
#panel-onboarding { max-width: 580px; margin-top: 5vh; }
#panel-auth h1, #panel-onboarding h1 { font-size: 28px; }
#panel-paywall { max-width: 920px; margin: 3vh auto 0; }
#paywall-plans .item { padding: 20px 22px; border-radius: var(--radius); }
#paywall-plans .item h3 { font-size: 18px; font-weight: 800; }
#paywall-plans .item p { font-size: 14px; }

/* --- coquille : barre latérale (ordinateur) ------------------------------- */

.app-footer { padding: 28px 16px 12px; }
.app-footer-version { color: var(--faint); font-size: 12px; }

.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
main { max-width: 1360px; padding: 36px 40px 72px; }

@media (min-width: 861px) {
  body:has(#nav:not([hidden])) { padding-left: var(--sidebar-w); padding-bottom: 0; }
  body:has(#nav:not([hidden])) .site-header {
    position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: var(--sidebar-w);
    flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 8px;
    padding: 20px 14px 14px; background: var(--surface);
    border-bottom: 0; border-right: 1px solid var(--line); overflow-y: auto;
  }
  body:has(#nav:not([hidden])) .brand { padding: 4px 10px 18px; }
  body:has(#nav:not([hidden])) #nav {
    display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1; gap: 2px;
  }
  #nav .tab {
    position: relative; display: flex; align-items: center; gap: 12px; justify-content: flex-start;
    min-height: 0; padding: 10px 12px; border-radius: 12px; border: 0; background: transparent;
    font-size: 15px; font-weight: 650; color: var(--muted); text-align: left;
    transition: background .15s, color .15s;
  }
  #nav .tab:hover { background: var(--peach-soft); color: var(--ink); }
  #nav .tab[aria-current="page"] { background: var(--peach); color: var(--ink); font-weight: 750; }
  #nav .tab[aria-current="page"]::after {
    content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px;
    border-radius: 0 4px 4px 0; background: var(--coral);
  }
  #nav .tab::before {
    content: ""; width: 20px; height: 20px; flex-shrink: 0; background-color: currentColor;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  }
  #nav .tab[aria-current="page"]::before { color: var(--btn); }
  #nav-dashboard { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 4l8 7.5'/%3E%3Cpath d='M6 10v9h12v-9'/%3E%3C/svg%3E"); }
  #nav-emails { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E"); }
  #nav-agenda { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E"); }
  #nav-messagerie { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-11.6 7.1L4 20l1-4.2A8 8 0 1 1 20 12Z'/%3E%3C/svg%3E"); }
  #nav-conversation { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4Z'/%3E%3Cpath d='M8.5 9.5h7M8.5 12.5h4'/%3E%3C/svg%3E"); }
  #logout { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4.5H6A1.5 1.5 0 0 0 4.5 6v12A1.5 1.5 0 0 0 6 19.5h4M15 8l4 4-4 4M19 12H9'/%3E%3C/svg%3E"); }
  #nav .tab-quiet { opacity: 1; margin-top: auto; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; padding-top: 14px; }
  #nav #logout { margin-top: auto; }
  /* Le raccourci « Talk » : le bouton principal de la barre, tout en haut. */
  #nav #talk-shortcut {
    order: -1; margin: 0 0 10px; width: 100%; min-height: 44px; justify-content: center;
    background: var(--btn); border: 1px solid var(--btn); color: #fff;
  }
  #nav #talk-shortcut:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
  #talk-shortcut .mic-icon { stroke: #fff; }
}

/* --- coquille : téléphone et tablette (barre du bas) ---------------------- */

@media (max-width: 860px) {
  .site-header {
    position: sticky; top: 0; height: 56px; padding: 0 16px; flex-wrap: nowrap;
    background: rgba(252, 249, 244, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  main { padding: 20px 16px 56px; }
  h1 { font-size: 25px; }
  .card { padding: 16px; border-radius: 14px; }
  .glance { gap: 10px; margin-bottom: 24px; }
  .glance-tile { min-height: 0; padding: 14px 14px 12px; border-radius: 14px; }
  .glance-tile .num { font-size: 26px; }
  .glance-tile .label { font-size: 12.5px; }
  input, textarea, select { font-size: 16px; }   /* sous 16 px, iOS zoome au focus */
  #panel-auth, #panel-onboarding { margin-top: 2vh; padding: 22px 18px 20px; border-radius: 18px; }
  .bottom-nav:not([hidden]) { border-top-color: var(--line); background: rgba(255, 255, 255, .97); box-shadow: 0 -6px 20px rgba(23, 33, 59, .05); }
  .bottom-tab { font-size: 11.5px; font-weight: 700; border-radius: 12px; }
  .bottom-tab[aria-current="page"] { color: var(--coral-text); background: var(--peach); }
  .bottom-more-sheet { border-color: var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); }
  .talk-bubble { background: var(--btn); box-shadow: 0 8px 20px rgba(207, 69, 44, .38); }
}

/* --- suite de la refonte : liens, tableau de bord en cartes, connexion ----- */

a { color: inherit; }

/* Le tableau de bord, comme les pages de l'admin : chaque bloc est une carte
   avec un titre de 16 px ; les lignes à l'intérieur restent des cartes plates. */
.board .block {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px;
}
.board .block h2 { font-size: 16px; margin: 0 0 6px; }
.board .block .item { box-shadow: none; background: #fffdfa; }
.board .block .empty { padding: 4px 0 2px; }
.board .block .hint.dyn { margin-bottom: 12px; }
@media (max-width: 860px) { .board .block { padding: 16px; border-radius: 14px; } }

/* Connexion et accueil : UNE carte (le titre et le formulaire ensemble), pas
   une carte dans une carte. */
#panel-auth .card, #panel-onboarding .card {
  background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0;
}
#panel-auth h1 { margin-bottom: 6px; }
#panel-auth .lede { margin-bottom: 20px; }

/* Largeurs intermédiaires : la barre latérale prend 256 px, donc une fenêtre de
   1100 px n'offre que ~760 px au contenu. Le tableau de bord passe alors sur
   une seule colonne, et le formulaire d'une tâche a le droit de passer à la
   ligne au lieu d'écraser le champ de texte. */
@media (min-width: 861px) and (max-width: 1240px) {
  .board { grid-template-columns: minmax(0, 1fr); }
}
.todo-form { flex-wrap: wrap; }
.todo-form input[type="text"] { flex: 1 1 200px; }

/* --- menu groupé (2026-10-06) : « Mon activité », « Compte », « More » ------
   Greg : éclater « Account » dans le menu principal, ranger Mentions légales,
   Aide et Quitter Edwin derrière « More ». Les entrées de sous-page sont des
   `.tab` comme les autres (data-panel="account" + data-subpanel). */

.nav-group-label {
  margin: 0; padding: 10px 12px 2px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.nav-more > summary { list-style: none; cursor: pointer; }
.nav-more > summary::-webkit-details-marker { display: none; }

@media (min-width: 861px) {
  #nav-rates { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5V4.5h8l9 9-8 8Z'/%3E%3Ccircle cx='8' cy='9' r='1.2'/%3E%3C/svg%3E"); }
  #nav-orders { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-3-2-3 2-3-2-3 2Z'/%3E%3Cpath d='M9 8.5h6M9 12h6'/%3E%3C/svg%3E"); }
  #nav-quotes { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7a1.5 1.5 0 0 0-1.5 1.5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8Z'/%3E%3Cpath d='M14 3.5V8h4.5M9 12h6M9 15.5h4'/%3E%3C/svg%3E"); }
  #nav-apps { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E"); }
  #nav-voice { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15a3.4 3.4 0 0 0 3.4-3.4V6.4a3.4 3.4 0 0 0-6.8 0v5.2A3.4 3.4 0 0 0 12 15Z'/%3E%3Cpath d='M6.2 10.6a5.8 5.8 0 0 0 11.6 0M12 16.4v3.4'/%3E%3C/svg%3E"); }
  #nav-plan { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E"); }
  #nav-settings { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='8' cy='17' r='2'/%3E%3C/svg%3E"); }
  #nav-legal { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5 6v5.5c0 4.2 2.8 7.3 7 9 4.2-1.7 7-4.8 7-9V6Z'/%3E%3C/svg%3E"); }
  #nav-help { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.6 9.6a2.5 2.5 0 1 1 3.4 2.3c-.7.3-1 .9-1 1.6M12 16.8v.1'/%3E%3C/svg%3E"); }
  #nav-leave { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M9 7V4.5h6V7M6.5 7l1 13h9l1-13'/%3E%3C/svg%3E"); }
  #nav-more-label { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='12' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Ccircle cx='18' cy='12' r='1.2'/%3E%3C/svg%3E"); }
  .nav-more > summary {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border-radius: 12px; font-size: 15px; font-weight: 650; color: var(--muted);
  }
  .nav-more > summary:hover { background: var(--peach-soft); color: var(--ink); }
  .nav-more > summary::before {
    content: ""; width: 20px; height: 20px; flex-shrink: 0; background-color: currentColor;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  }
  .nav-more > summary::after {
    content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s;
  }
  .nav-more[open] > summary::after { transform: rotate(-135deg); }
  .nav-more .tab { width: 100%; margin-top: 2px; padding-left: 14px; }
  body:has(#nav:not([hidden])) #nav .tab { padding-top: 8px; padding-bottom: 8px; }
  .nav-more > summary { padding-top: 8px; padding-bottom: 8px; }
  .nav-group-label { display: block; }
}

/* Feuille « More » du téléphone : toutes les entrées, qui défilent. */
@media (max-width: 860px) {
  .nav-more { display: none; }
  .bottom-more-sheet {
    max-height: min(70vh, 520px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    min-width: 230px; display: flex; flex-direction: column; gap: 2px;
  }
  .bottom-more-sheet .tab { text-align: left; justify-content: flex-start; padding: 10px 14px; min-height: 0; }
  .bottom-more-sheet { margin-bottom: 1.4rem; max-height: min(66vh, 480px); }
  .bottom-more-sheet .tab[aria-current="page"] { background: var(--peach); color: var(--coral-text); font-weight: 750; }
  .bottom-more-sheet .nav-group-label { padding: 12px 14px 4px; }
}

/* « More » s'allume quand la page courante vit dans la feuille. */
@media (max-width: 860px) {
  .bottom-more:has(.bottom-more-sheet .tab[aria-current="page"]) > .bottom-more-summary {
    color: var(--coral-text); background: var(--peach);
  }
}

/* --- Onglet Catalogue (2026-10-07) : refait d'après la maquette de Greg ----
   Profil en une ligne, recherche collée en haut, deux grilles de cartes
   d'environ 300 px (3 ou 4 par ligne sur ordinateur), deux colonnes
   d'ajout, import, classes de TVA. */

#subpanel-rates .lede { color: var(--muted); margin: 0 0 18px; }

.profile-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); font-size: 14.5px;
}
.profile-name { font-weight: 800; }
.profile-meta { color: var(--muted); flex: 1; min-width: 0; }
.profile-edit { min-height: 34px; padding: 0 14px; font-size: 13.5px; font-weight: 700; border-radius: 10px; }

.rates-searchbar {
  position: sticky; top: 0; z-index: 20; padding: 8px 0 14px;
  background: linear-gradient(var(--bg) 82%, rgba(252, 249, 244, 0));
}
.rates-search {
  display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 0 14px; min-height: 50px; box-shadow: var(--shadow);
}
.rates-search:focus-within { outline: 3px solid var(--btn); outline-offset: 2px; }
.rates-search svg { width: 20px; height: 20px; stroke: var(--faint); fill: none; stroke-width: 1.8; stroke-linecap: round; flex-shrink: 0; }
.rates-search input[type="search"] {
  flex: 1; border: 0; background: transparent; min-height: 48px; padding: 0; box-shadow: none; outline: 0; min-width: 0; font-size: 16px;
}
.rates-search input[type="search"]:focus-visible { outline: 0; }
@media (max-width: 860px) { .rates-searchbar { top: 56px; } }

.cat-section { margin-top: 30px; }
.rates-searchbar + .cat-section { margin-top: 6px; }
.cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cat-head h2 { margin: 0; font-size: 21px; letter-spacing: -.01em; font-weight: 800; }
.cat-count { background: #f1eee6; color: var(--muted); border-radius: 999px; padding: 1px 10px; font-size: 13px; font-weight: 750; }

.help-wrap { position: relative; display: inline-flex; }
.help-btn {
  width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--muted); font-size: 13.5px; font-weight: 800; cursor: help; line-height: 1;
}
.help-btn:hover, .help-wrap.is-open .help-btn { border-color: var(--btn); color: var(--coral-text); background: var(--peach-soft); }
.help-tip {
  position: absolute; left: -10px; top: calc(100% + 10px); width: min(300px, 78vw); z-index: 40;
  background: var(--ink); color: #fff; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; font-weight: 500;
  line-height: 1.45; text-align: left; box-shadow: 0 12px 30px rgba(23, 33, 59, .25); display: none;
}
.help-tip::before { content: ""; position: absolute; top: -6px; left: 14px; width: 12px; height: 12px; background: var(--ink); transform: rotate(45deg); }
.help-wrap:hover .help-tip, .help-wrap:focus-within .help-tip, .help-wrap.is-open .help-tip { display: block; }

/* Les cartes : photo 150 px à gauche, titre + description + puces à côté, une
   ligne de faits, puis Modifier / Supprimer. */
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.cat-grid > .cat-empty { grid-column: 1 / -1; padding: 18px; text-align: center; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.cat-card {
  display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0;
}
.cat-card.is-off-sale { opacity: .72; }
.cat-main { display: flex; gap: 12px; min-width: 0; }
.cat-thumb {
  width: 150px; height: 150px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; overflow: hidden; position: relative;
  background: #fbf8f2;
}
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-thumb svg { width: 56px; height: 56px; fill: none; stroke: rgba(23, 33, 59, .5); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cat-thumb.is-service { background: linear-gradient(135deg, #feece6, #f9c9bb); }
.cat-thumb.is-product { background: linear-gradient(135deg, #e8eef9, #c6d4ee); }
.cat-thumb .cat-nophoto { position: absolute; bottom: 12px; font-size: 12px; font-weight: 650; color: var(--muted); }
.cat-thumb.is-empty svg { margin-bottom: 14px; }
.cat-txt { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cat-txt h3 {
  margin: 0; font-size: 15.5px; line-height: 1.25; font-weight: 800;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; hyphens: auto;
}
.cat-txt p {
  margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.cat-pills .pill, .cat-line .pill {
  display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 750; white-space: nowrap;
  background: var(--peach); color: var(--coral-text); margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.cat-pills .pill.done { background: var(--green-tint); color: var(--green-deep); }
.cat-pills .pill.urgent { background: #fde3e0; color: #a32b1c; }
.cat-pills .pill.muted { background: #f1eee6; color: var(--muted); }
.cat-facts { margin: 0; font-size: 12.5px; color: var(--faint); display: flex; flex-wrap: wrap; gap: 2px 12px; }
.cat-acts { display: flex; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: -2px; }
.cat-acts button { flex: 1; min-height: 38px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.cat-acts .cat-del, .cat-mini .cat-del { color: #a32b1c; }
.cat-acts .cat-del:hover, .cat-mini .cat-del:hover { background: #fdf0ee; border-color: #f2c5bf; }
@media (max-width: 500px) {
  .cat-thumb { width: 112px; height: 112px; }
  .cat-thumb svg { width: 44px; height: 44px; }
}

/* Ajouter : deux colonnes (prestation puis tarifs horaires | produit). */
.add-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1100px) { .add-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.add-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
#subpanel-rates .card { margin: 0; }
.add-card h3, #catalog-import-section h3, #vat-classes-section h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
#subpanel-rates .intro, #subpanel-rates .card > .hint { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.kicker {
  display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; background: var(--peach); color: var(--coral-text);
}
.kicker.kicker-product { background: #e8eef9; color: #2c4a86; }
.f-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rate-form .f-row + .hint { margin: -2px 0 12px; font-size: 12.5px; color: var(--faint); }
.rate-form .field input[type="text"], .rate-form .field input[type="number"], .rate-form .field select, .rate-form .field textarea { width: 100%; }

details.more { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; margin: 0 0 12px; background: #fffdfa; }
details.more > summary {
  cursor: pointer; padding: 11px 0; font-weight: 750; font-size: 14px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; background: transparent; border: 0;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s; flex-shrink: 0; margin-left: 10px;
}
details.more[open] > summary::after { transform: rotate(-135deg); }
.more-body { padding: 2px 0 8px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip-field { position: relative; margin: 0 !important; }
.chip-field input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-field label {
  display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; font-size: 13.5px;
  font-weight: 650; background: #fff; pointer-events: none;
}
.chip-field input:checked + label { background: var(--peach); border-color: var(--peach-line); color: var(--coral-text); }
.chip-field input:focus-visible + label { outline: 3px solid var(--btn); outline-offset: 2px; }

.catalogue-photos-field { padding: 12px; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: #fffdfa; }
.form-foot, .inline-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 4px; }
.form-foot .primary, .inline-actions .primary { margin: 0; }

/* Lignes plates : tarifs horaires et classes de TVA. */
.cat-lines { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cat-lines > .empty { padding: 4px 2px; }
.cat-line { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fffdfa; }
.cat-line-name { font-weight: 750; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cat-line-sub { display: block; color: var(--muted); font-size: 13px; font-weight: 500; }
.cat-mini { display: flex; gap: 6px; }
.cat-mini button { min-height: 30px; padding: 0 10px; font-size: 13px; font-weight: 700; border-radius: 8px; }
.inline-form { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 0; }
.inline-form .field { margin-bottom: 0; }
.inline-form .error, .inline-form .inline-actions { grid-column: 1 / -1; }
.inline-form .inline-actions { margin-top: 0; }

/* Import : une ligne (texte collé | fichiers | Analyser). */
#subpanel-rates #catalog-import-section, #subpanel-rates #vat-classes-section { margin-top: 30px; }
.import-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: stretch; margin-top: 0; }
@media (min-width: 1100px) { .import-grid { grid-template-columns: 1.15fr 1fr auto; } .import-grid .error { grid-column: 1 / -1; order: 5; } }
.import-grid .field { margin: 0; }
.import-grid textarea { min-height: 120px; }
.import-go { display: flex; align-items: flex-end; }
.import-go button { margin: 0; }

/* Cases et boutons radio : le bouton d'abord, son libellé à côté (le formulaire
   de profil les affichait l'un au-dessus de l'autre). */
.field.field-check { flex-direction: row; align-items: center; gap: 8px; }
.field.field-check input[type="radio"], .field.field-check input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--btn);
}
.field.field-check label { margin: 0; }

@media (max-width: 600px) {
  .profile-strip { flex-direction: column; align-items: stretch; }
  .profile-meta { flex: none; }
  .profile-edit { align-self: flex-start; }
  .cat-line { flex-wrap: wrap; }
  .cat-line-name { flex: 1 1 100%; }
  .cat-line .cat-mini { margin-left: auto; }
}

/* --- Page Commandes (2026-10-07) : refaite d'après la maquette de Greg ----------
   Chiffres clés, barre collante (recherche, filtres, nouvelle commande), cartes
   d'environ 300 px, détail dans un tiroir, deux colonnes d'ajout. Réutilise la
   couche du Catalogue (.cat-section, .cat-grid, .cat-card, .help-wrap, .add-grid). */

#subpanel-orders .lede { color: var(--muted); margin: 0 0 18px; }
#subpanel-orders .card { margin: 0; }
#subpanel-orders .intro { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
#subpanel-orders .add-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
#subpanel-orders .rate-form .field input, #subpanel-orders .add-card .field input[type="text"],
#subpanel-orders .add-card .field input[type="email"], #subpanel-orders .add-card .field input[type="tel"],
#subpanel-orders .add-card .field input[type="datetime-local"], #subpanel-orders .add-card .field select,
#subpanel-orders .add-card .field textarea { width: 100%; }

.pill.warn { background: #fff1cf; color: #8a5a00; }
.pill.info { background: #e8eef9; color: #2c4a86; }

.order-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.order-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); min-width: 0;
}
.order-stat-v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.order-stat-l { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.order-stat-s { font-size: 12.5px; color: var(--faint); min-height: 1em; }
.order-stat.is-hot { background: var(--peach-soft); border-color: var(--peach-line); }
.order-stat.is-hot .order-stat-v { color: var(--coral-text); }
.order-stat.is-good .order-stat-v { color: var(--green-deep); }

.order-bar-row { display: flex; gap: 12px; align-items: stretch; }
.order-bar-row .rates-search { flex: 1; min-width: 0; }
.order-search-n { color: var(--faint); font-size: 13px; white-space: nowrap; }
.order-new { min-height: 50px; border-radius: 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.order-new svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.order-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.order-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 6px 12px; min-height: 0; font-size: 13.5px; font-weight: 650; background: #fff; cursor: pointer; flex-shrink: 0; margin: 0;
}
.order-chip.is-on { background: var(--peach); border-color: var(--peach-line); color: var(--coral-text); }
.order-chip-n { background: #f1eee6; color: var(--muted); border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 800; }
.order-chip.is-on .order-chip-n { background: #fff; color: var(--coral-text); }
@media (max-width: 600px) {
  .order-new .t, .order-new span { display: none; }
  .order-new { padding: 0 14px; }
  .order-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .order-filters::-webkit-scrollbar { display: none; }
}

/* carte */
.order-card.is-attn { border-color: var(--peach-line); background: linear-gradient(var(--peach-soft), #fff 60%); }
.order-card.is-off { opacity: .74; }
.order-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.order-top .pill { flex-shrink: 0; margin: 0; }
.order-num { font-weight: 800; font-size: 15.5px; line-height: 1.25; }
.order-who { font-size: 14px; font-weight: 650; margin-top: 1px; overflow-wrap: anywhere; }
.order-chan { font-size: 12.5px; color: var(--faint); font-weight: 650; margin-top: 2px; }
.order-body { display: flex; gap: 12px; min-width: 0; }
.order-thumb { width: 64px; height: 64px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; position: relative; }
.order-thumb svg { width: 28px; height: 28px; fill: none; stroke: rgba(23, 33, 59, .55); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.order-thumb.is-service { background: linear-gradient(135deg, #feece6, #f9c9bb); }
.order-thumb.is-product { background: linear-gradient(135deg, #e8eef9, #c6d4ee); }
.order-thumb-more { position: absolute; right: -6px; bottom: -6px; background: var(--ink); color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 800; padding: 1px 7px; }
.order-lines { list-style: none; margin: 0; padding: 2px 0 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.order-lines li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.order-q { color: var(--faint); font-weight: 750; flex-shrink: 0; }
.order-nm { min-width: 0; overflow-wrap: anywhere; }
.order-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.order-total { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.order-due { font-size: 12.5px; color: var(--coral-text); font-weight: 750; }
.order-when { font-size: 12.5px; color: var(--faint); margin-left: auto; }
.order-card .cat-acts { margin-top: auto; }
.order-card .cat-acts button { white-space: nowrap; }

/* le suivi : quatre étapes */
.order-steps { display: flex; align-items: flex-start; }
.order-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; position: relative; font-size: 11.5px; font-weight: 700; color: var(--faint); text-align: center; }
.order-step i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--line-strong); position: relative; z-index: 1; }
.order-step::before { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--line-strong); }
.order-step:first-child::before { display: none; }
.order-step.is-done { color: var(--green-deep); }
.order-step.is-done i { background: var(--green); border-color: var(--green); }
.order-step.is-done::before, .order-step.is-now::before { background: var(--green); }
.order-step.is-now { color: var(--ink); }
.order-step.is-now i { border-color: var(--btn); box-shadow: 0 0 0 3px var(--peach); }
.order-steps.is-cancelled { opacity: .45; }
.order-steps.is-cancelled .order-step::before { background: var(--line-strong); }

/* le tiroir */
.order-scrim { position: fixed; inset: 0; background: rgba(23, 33, 59, .38); z-index: 900; }
.order-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; z-index: 910; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); box-shadow: -14px 0 40px rgba(23, 33, 59, .2); padding: 22px 22px 28px;
  padding-top: max(22px, env(safe-area-inset-top)); padding-bottom: max(28px, env(safe-area-inset-bottom));
}
body.has-order-drawer { overflow: hidden; }
.d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.d-head h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.d-close { border-radius: 50%; width: 36px; height: 36px; min-height: 0; padding: 0; font-size: 20px; line-height: 1; flex-shrink: 0; background: #fff; border: 1px solid var(--line-strong); margin: 0; }
.d-sub { color: var(--muted); font-size: 14px; margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.d-sub .pill { margin: 0; }
.d-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 12px; }
.d-card h4 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.d-card p { margin: 0; }
.d-card p + p { margin-top: 4px; }
.d-strong { font-weight: 750; overflow-wrap: anywhere; }
.d-lines { list-style: none; margin: 0; padding: 0; }
.d-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.d-lines li:last-child { border-bottom: 0; }
.d-sub-line { display: block; color: var(--faint); font-size: 12.5px; }
.d-tot { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); padding: 3px 0; }
.d-tot.is-big { font-size: 18px; font-weight: 800; color: var(--ink); border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.d-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.d-row:first-child { margin-top: 0; }
.d-row a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; background: #fff; }
.d-row button { min-height: 38px; font-size: 14px; border-radius: 10px; margin: 0; }
.copyfield { display: flex; gap: 8px; }
.copyfield input { flex: 1; min-width: 0; font-size: 13.5px; }
.copyfield button { margin: 0; flex-shrink: 0; }
#order-detail .field { margin: 12px 0 0; }
#order-detail input[type="text"], #order-detail input[type="email"] { width: 100%; }
.d-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.d-actions button { min-height: 46px; border-radius: 12px; margin: 0; }
.d-actions .link-btn { min-height: 0; padding: 8px 0; text-align: left; justify-content: flex-start; }
.d-danger { color: #a32b1c; font-weight: 700; }
.d-page-link { display: inline-block; margin-top: 14px; font-size: 14px; }
@media (max-width: 600px) { .order-drawer { width: 100%; padding-left: 16px; padding-right: 16px; } }

/* formulaire : une ligne par article (article, quantité, retirer ; variante dessous) */
.order-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.order-item { display: grid; grid-template-columns: minmax(0, 1fr) 76px 36px; gap: 8px; align-items: center; }
.order-item .order-item-variant { grid-column: 1 / -1; }
.order-item select, .order-item input { width: 100%; min-height: 42px; }
.order-item-remove { min-height: 34px; height: 34px; padding: 0; border-radius: 8px; color: #a32b1c; font-weight: 800; margin: 0; }
.order-foot-left { justify-content: flex-start; }
.order-senders { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.order-senders li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fffdfa; font-size: 14px; font-weight: 650; }
#order-item-add { display: block; text-align: left; padding: 4px 0 0; }

/* « Envoyés » du tableau de bord (2026-10-08) : une ligne par email parti,
   à qui, quel objet, quand. Compact et sans bouton, pour ne jamais ressembler
   à un brouillon à renvoyer. */
.sent-list { list-style: none; margin: 0; padding: 0; }
.sent-list:empty { display: none; }
.sent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sent-row:last-child { border-bottom: 0; }
.sent-to { grid-column: 1; font-size: 14px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sent-when { grid-column: 2; grid-row: 1; font-size: 12.5px; color: var(--muted); white-space: nowrap; align-self: center; }
.sent-subject { grid-column: 1 / -1; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Onglet Aide (2026-10-08) : la meilleure aide, c'est Edwin. Maquette
   validée par Greg (maquette-aide.html). */
#subpanel-help { max-width: 760px; }
.help-hero { background: linear-gradient(180deg, #fff 0%, var(--peach-soft) 100%); border: 1px solid var(--peach-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 28px 26px; }
.help-eyebrow { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--coral-text); background: var(--peach); border: 1px solid var(--peach-line); border-radius: 999px; padding: 2px 10px; margin-bottom: 14px; }
.help-hero h3 { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; margin: 0 0 10px; }
.help-hero p { margin: 0 0 20px; font-size: 16px; color: var(--muted); max-width: 56ch; }
.help-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; margin: 0; border: 0; border-radius: 999px; background: var(--btn); color: #fff; font: inherit; font-weight: 750; font-size: 15.5px; cursor: pointer; }
.help-cta:hover { background: var(--btn-hover); }
.help-cta svg { width: 18px; height: 18px; flex: none; }
.help-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.help-step { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; }
.help-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--peach); color: var(--coral-text); font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.help-step h4 { margin: 0 0 4px; font-size: 15px; font-weight: 750; }
.help-step p { margin: 0; font-size: 13.5px; color: var(--muted); }
.help-examples { margin-top: 26px; }
.help-examples h4 { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.help-examples-hint { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.help-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.help-chips li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; }
.help-foot { margin-top: 28px; display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.help-foot-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--green-tint); color: var(--green-deep); display: flex; align-items: center; justify-content: center; }
.help-foot-ico svg { width: 20px; height: 20px; }
.help-foot p { margin: 0; font-size: 14px; color: var(--muted); }
.help-foot a { color: var(--ink); font-weight: 750; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .help-steps { grid-template-columns: 1fr; }
  .help-hero { padding: 22px 18px; }
  .help-hero h3 { font-size: 24px; }
  .help-cta { width: 100%; justify-content: center; }
}

/* Page Applications (2026-10-08), d'après la maquette validée par Greg
   (maquette-applications.html). Réutilise les briques de Catalogue et de
   Commandes : chiffres clés, sections à « ? », cartes, boutons de carte. */
.order-stat.is-warn { background: #fffaeb; border-color: #f3e2b0; }
.order-stat.is-warn .order-stat-v { color: #8a5a00; }
.logo { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0; font-weight: 800; font-size: 20px; letter-spacing: -.03em; overflow: hidden; }
.logo img, .logo svg { width: 26px; height: 26px; display: block; }
.logo.g { color: #4285f4; } .logo.y { color: #6001d2; font-size: 18px; } .logo.aol { color: #3399ff; font-size: 13px; }
.logo.stripe { background: #635bff; color: #fff; border-color: #635bff; }
.logo.pp { background: #0070ba; color: #fff; border-color: #0070ba; }
.logo.wa { background: var(--green-tint); color: var(--green-deep); border-color: #bfe6d3; }
/* comptes connectés */
.acct-card.is-attn { border-color: #f3e2b0; background: linear-gradient(#fffaeb, #fff 60%); }
.acct-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acct-who { min-width: 0; flex: 1; }
.acct-who h3 { margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.acct-addr { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.acct-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cat-acts button.primary { background: var(--btn); border-color: var(--btn); color: #fff; }
.cat-acts button.primary:hover { background: var(--btn-hover); }
.cat-acts .cat-del { color: #a32b1c; }
/* catalogue d'applications */
.apps-group { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.tiles + .form-slot + .apps-group, .tiles + .apps-group { margin-top: 20px; }
.apps-sub { margin: -6px 0 14px; color: var(--muted); font-size: 14px; max-width: 70ch; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.tile.is-on { border-color: var(--btn); box-shadow: 0 0 0 3px var(--peach), var(--shadow); }
.tile-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tile-name { margin: 0; font-size: 15px; font-weight: 800; }
.tile-sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.tile-btn { width: 100%; margin: auto 0 0; min-height: 38px; border-radius: 10px; font-size: 14px; font-weight: 700; background: #fff; border: 1px solid var(--line-strong); color: var(--ink); }
.tile-btn:hover { background: var(--peach-soft); border-color: var(--peach-line); }
@media (max-width: 700px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { flex-direction: row; align-items: center; }
  .tile-top { flex: 1; }
  .tile-btn { width: auto; margin: 0; padding: 0 14px; }
  .tile-top .tile-sub { display: none; }
}
/* formulaires de connexion, juste sous la catégorie */
.form-slot { margin-top: 14px; }
.form-slot[hidden] { display: none; }
.connect-card { position: relative; background: var(--surface); border: 1px solid var(--peach-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; max-width: 640px; }
.connect-card[hidden] { display: none; }
.connect-card h3 { margin: 0 34px 10px 0; font-size: 17px; font-weight: 800; }
.connect-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--line-strong); background: #fff; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; }
.form-slot .field input[type="email"], .form-slot .field input[type="password"], .form-slot .field input[type="text"], .form-slot .field input[type="number"], .form-slot .field select { width: 100%; }
.form-slot .guide-cta { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 10px; background: var(--peach); color: var(--coral-text); font-weight: 750; font-size: 14px; text-decoration: none; margin: 4px 0 8px; }
@media (max-width: 700px) { .connect-card { padding: 16px; } }
/* paiement en ligne */
.pay-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .pay-grid { grid-template-columns: 1fr 1fr; } }
.pay { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pay.is-ok { border-color: #bfe6d3; background: linear-gradient(#f3fbf7, #fff 70%); }
.pay-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pay-who { min-width: 0; flex: 1; }
.pay-who h3 { margin: 0; font-size: 16.5px; font-weight: 800; }
.pay-sub, .pay-off { margin: 0; color: var(--muted); font-size: 13.5px; }
.pay-open { margin-top: auto; }
.pay-open button { width: 100%; min-height: 40px; margin: 0; border-radius: 10px; font-weight: 750; }
.pay .payment-connected { margin-top: auto; }
.pay .payment-connected .row { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin: 0; }
.pay .payment-connected .row button { flex: 1; min-width: 120px; min-height: 38px; margin: 0; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.pay .payment-connected .row button:hover { background: var(--peach-soft); border-color: var(--peach-line); }
.pay .payment-connected .row button[id$="-replace"] { order: -1; }
.pay .payment-connected .row button[id$="-disconnect"] { color: #a32b1c; }

/* ===== Le travail d'Edwin (2026-10-08, maquette validée) ===== */
.work-state { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin: 0 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.work-state[hidden] { display: none; }
.work-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px var(--green-tint); flex-shrink: 0; margin-top: 6px; }
.work-state h2 { margin: 0 0 2px; font-size: 18px; font-weight: 800; }
.work-state p { margin: 0; color: var(--muted); font-size: 14.5px; }
.work-grow { flex: 1; min-width: 0; }
.work-acts { margin-top: 10px; }
.work-acts[hidden] { display: none; }
.work-acts button { width: auto; min-height: 40px; padding: 0 18px; margin: 0; border-radius: 10px; font-weight: 750; }
.work-state.is-bad { border-color: #F3C9C0; background: linear-gradient(#FFF4F1, #fff 70%); }
.work-state.is-bad .work-dot { background: #d23b1f; box-shadow: 0 0 0 5px #FBDDD6; }
.work-state.is-warn { border-color: #F3E2B0; background: linear-gradient(#FFFAEB, #fff 70%); }
.work-state.is-warn .work-dot { background: #d99a00; box-shadow: 0 0 0 5px #FBEBC0; }
.work-log { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.work-day { padding: 8px 16px; background: #F7F3EA; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border-top: 1px solid var(--line); }
.work-day:first-child { border-top: 0; }
.work-lg { display: grid; grid-template-columns: 64px 128px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 16px; border-top: 1px solid var(--line); }
.work-day + .work-lg { border-top: 0; }
.work-lg .t { font-weight: 800; font-variant-numeric: tabular-nums; }
.work-lg .what { font-size: 14.5px; }
.work-lg .what small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.work-lg.is-quiet .what { color: var(--faint); }
.work-lg .pill { justify-self: start; }
@media (max-width: 560px) {
  .work-lg { grid-template-columns: 52px minmax(0, 1fr); }
  .work-lg .pill { grid-column: 2; order: 3; }
  .work-lg .what { grid-column: 2; }
}
.work-prefs { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .work-prefs { grid-template-columns: 1fr; } }
.work-pref-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 16px; }
.work-pref { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.work-pref:first-child { border-top: 0; }
.work-tx { flex: 1; min-width: 0; }
.work-tx b { display: block; font-size: 15px; }
.work-tx small { color: var(--muted); font-size: 13px; }
.work-sw { position: relative; width: 46px; height: 28px; min-height: 0; padding: 0; margin: 0; border-radius: 999px; background: var(--line-strong); border: 0; cursor: pointer; flex-shrink: 0; }
.work-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.work-sw[aria-checked="true"] { background: var(--green); }
.work-sw[aria-checked="true"]::after { left: 21px; }
.work-sw:disabled { opacity: .45; cursor: not-allowed; }
.work-sw:focus-visible { outline: 3px solid var(--btn); outline-offset: 2px; }
.work-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.work-slots span { background: var(--peach); color: var(--ink); border-radius: 999px; padding: 2px 10px; font-weight: 750; font-size: 13px; }
.work-slots span.is-soon { background: #F1EEE6; color: var(--muted); }
.work-preview { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: linear-gradient(135deg, #FEECE6, #F9E3D8); border: 1px solid var(--peach-line); border-radius: var(--radius); }
.work-cap { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-text); }
.work-notif { background: #17213B; color: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(23,33,59,.25); display: flex; gap: 12px; align-items: flex-start; max-width: 420px; }
.work-ic { width: 38px; height: 38px; border-radius: 10px; background: #fff; display: grid; place-items: center; flex-shrink: 0; }
.work-n1 { font-size: 12.5px; opacity: .75; display: flex; justify-content: space-between; gap: 10px; }
.work-n2 { font-weight: 750; font-size: 14.5px; margin-top: 1px; }
.work-n3 { font-size: 13.5px; opacity: .9; margin-top: 1px; }

/* claude/179, lot 1 : la carte à boutons directs (mail, rendez-vous, souvenir). */
.confirm-direct .q { font-weight: 700; margin: 0 0 .6rem; }
.confirm-direct .mail { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: .93rem; margin-bottom: .6rem; }
.confirm-direct .mail dl { margin: 0 0 .5rem; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.confirm-direct .mail dl:last-child { margin-bottom: 0; }
.confirm-direct .mail dt { color: var(--ink-soft); }
.confirm-direct .mail dd { margin: 0; overflow-wrap: anywhere; }
.confirm-direct .mail .body { border-top: 1px solid var(--line); padding-top: .5rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; }
.confirm-direct p.warn { font-size: .85rem; font-weight: 400; color: var(--ink-soft); margin: 0 0 .7rem; }
.confirm-direct .actions { align-items: center; }
.confirm-direct .decided { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700; }
.confirm-direct .decided.ok { color: #0B7D52; }
.confirm-direct .decided.no { color: var(--ink-soft); }
.confirm-direct .decided.bad { color: var(--btn); }
.confirm-direct p.sub { flex-basis: 100%; font-weight: 400; color: var(--ink-soft); font-size: .88rem; margin: .15rem 0 0; }
.confirm-direct.frozen .mail { opacity: .85; }

.confirm-direct .tweaks { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .7rem; }
.confirm-direct .tweaks button { min-height: 34px; padding: 5px 12px; font-size: 13.5px; font-weight: 600; border-radius: 999px; }
.confirm-direct .busy { font-size: .9rem; font-weight: 400; color: var(--ink-soft); margin: 0 0 .6rem; }
.confirm-direct .lab { display: block; font-size: .8rem; color: var(--ink-soft); margin-bottom: 2px; }
.confirm-direct .field { display: block; width: 100%; font: inherit; font-size: .93rem; border: 1px solid var(--line-strong, var(--line)); border-radius: 8px; padding: 7px 9px; background: #fff; color: var(--ink); margin-bottom: .5rem; }
.confirm-direct textarea.field { min-height: 150px; resize: vertical; }
.confirm-direct .actions[hidden], .confirm-direct .tweaks[hidden], .confirm-direct p[hidden] { display: none; }

/* Lot 3 (claude/180) : lignes de liste avec leurs boutons, sous la réponse d'Edwin. */
.lot3-items { display: grid; gap: .5rem; margin-top: .6rem; }
.lot3-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface, #fff); }
.lot3-t { font-weight: 600; font-size: .93rem; overflow-wrap: anywhere; }
.lot3-s { color: var(--ink-soft); font-size: .85rem; margin-top: 2px; overflow-wrap: anywhere; }
.lot3-body { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; font-size: .9rem; }
.lot3-error { color: var(--btn); font-size: .85rem; margin: .4rem 0 0; }
.lot3-item .tweaks, .confirm-direct .tweaks { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 0; }
.lot3-item .tweaks button { min-height: 34px; padding: 5px 12px; font-size: 13.5px; font-weight: 600; border-radius: 999px; }
.lot3-item .lab { font-size: .8rem; color: var(--ink-soft); margin: .5rem 0 0; }
.lot3-item .decided { font-size: .93rem; font-weight: 700; }
.lot3-item .decided.ok { color: #0B7D52; }
.lot3-item .decided.no { color: var(--ink-soft); }
.lot3-item .confirm-card { margin-top: .6rem; }
.lot3-picker input[type="datetime-local"] { min-height: 34px; }

/* Télécharger mes données et confirmation avant suppression (claude/191). */
.confirm-backdrop {
  position: fixed; inset: 0; z-index: 960; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(23, 33, 59, .5); overflow-y: auto;
}
.confirm-dialog {
  width: 100%; max-width: 520px; background: var(--surface, #fff); border: 1px solid var(--line, #ebe4d8);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(23, 33, 59, .3); padding: 22px;
}
.confirm-dialog h2 { margin: 0 0 8px; font-size: 20px; }
.confirm-dialog .check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; cursor: pointer; line-height: 1.4; }
.confirm-dialog .check input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }
.confirm-dialog .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
button.danger { background: var(--bad, #b5381f); border-color: var(--bad, #b5381f); color: #fff; }
button.danger:hover:not([disabled]) { background: #8f2a16; border-color: #8f2a16; }
body.has-confirm { overflow: hidden; }

/* Messagerie : sous-onglets, conversation avec My Edwin, pastille de non lus (claude/230) */
.msg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.msg-tab {
  font: inherit; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
.msg-tab[aria-pressed="true"] { background: var(--peach); border-color: var(--coral); color: var(--coral-deep); }
.msg-tab:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.support-thread { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.support-msg { max-width: min(560px, 92%); padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.support-msg-client { align-self: flex-end; background: var(--peach); border-color: var(--peach-line); }
.support-msg-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-msg-meta { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }
.support-form { display: flex; flex-direction: column; gap: 8px; }
.support-form label { font-weight: 700; }
.support-form textarea { font: inherit; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line-strong); resize: vertical; }
.support-form button { align-self: flex-start; }
.support-hint { margin: 0; font-size: .85rem; color: var(--muted); }
.nav-badge {
  display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 6px; border-radius: 999px;
  background: var(--btn); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.5; text-align: center;
}


/* --- Page Abonnement (2026-10-14) : formules et recharges en cartes, comme les
   autres pages (chiffres clés = .order-stats, sections = .cat-section). */
.plan-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.plan-card {
  display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0;
}
.plan-card.is-current { border-color: var(--peach-line); background: var(--peach-soft); }
.plan-card.is-soon { opacity: .72; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-head h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.plan-pill {
  display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 750; white-space: nowrap;
  background: var(--green-tint); color: var(--green-deep);
}
.plan-pill.is-muted { background: #f1eee6; color: var(--muted); }
.plan-price { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.plan-price small { display: block; margin: 4px 0 0; font-size: 13px; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.plan-qty { margin: 0; color: var(--muted); font-size: 14px; font-weight: 650; }
.plan-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.plan-lines li { position: relative; padding-left: 20px; line-height: 1.35; }
.plan-lines li::before {
  content: ""; position: absolute; left: 3px; top: .4em; width: 6px; height: 10px;
  border-right: 2px solid var(--green-deep); border-bottom: 2px solid var(--green-deep); transform: rotate(40deg);
}
.plan-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.plan-actions .row { margin: 0; }
.plan-balance { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--green-deep); }
#subpanel-plan .lede { color: var(--muted); margin: 0 0 18px; }
#subpanel-plan .cat-section > .hint { margin: -4px 0 14px; color: var(--muted); font-size: 14px; }

/* Onglet Emails rangé par le travail d'Edwin (2026-10-20) */
.mail-group-head { list-style: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 8px; padding: 0; }
.mail-group-head:first-child { margin-top: 0; }
.mail-group-title,
.mail-group-title:hover { background: var(--btn, #cf452c); color: #fff; font-weight: 700; font-size: 1rem;
  padding: 7px 16px; border: 0; border-bottom: 0; border-radius: 999px; text-decoration: none; cursor: pointer; }
.mail-group-title:hover { background: var(--btn-hover, #b93a23); }
.mail-group-title:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.mail-group-title::before { content: "\25BE"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.mail-group-title[aria-expanded="false"]::before { transform: rotate(-90deg); }
.mail-triage-note { font-style: normal; }

/* Boîte affichée, pastille active et éditeur de brouillon (2026-10-20) */
.emails-current { margin: 6px 0 10px; font-weight: 600; color: var(--ink); }
.chipbar .chip.chip-active { background: var(--btn, #cf452c); border-color: var(--btn, #cf452c); color: #fff; font-weight: 700; }
.chipbar .chip.chip-active:hover { background: var(--btn-hover, #b93a23); }
.chip-check { margin-left: 4px; }
.draft-editor { max-width: 760px; }
.draft-editor input[type="text"] { width: 100%; margin: 4px 0 12px; }
.draft-editor .draft-editor-body { width: 100%; min-height: 46vh; max-height: 68vh; font: inherit; line-height: 1.55; margin-top: 4px; }


/* --- Devis (2026-10-20, lot 1) --- */
.quote-lines td.vat-cell select { min-width: 92px; }
.pill.info { background: #e6f0fb; color: #1d4f91; }
.quotes-period { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 8px; font-size: 13.5px; color: var(--muted); }
.quotes-period select { min-height: 34px; }
.quotes-batch { margin: 0 0 14px; }
.quote-card .quote-pick { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.quote-card .quote-pick input { width: 18px; height: 18px; }
.quote-card .quote-meta { font-size: 13px; color: var(--muted); }
.quote-editor { max-width: 920px; }
.quote-editor .quote-back { margin-bottom: 10px; }
.quote-editor h3 { margin: 18px 0 8px; }
.quote-editor .f-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.quote-editor input[type="text"], .quote-editor input[type="email"], .quote-editor input[type="number"], .quote-editor textarea, .quote-editor select { width: 100%; }
.quote-lines { width: 100%; border-collapse: collapse; margin: 6px 0; }
.quote-lines th { text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 700; padding: 4px 6px; }
.quote-lines td { padding: 4px 6px; vertical-align: top; }
.quote-lines .num { text-align: right; white-space: nowrap; }
.quote-lines td.num-in input { text-align: right; }
.quote-lines .line-sub { font-size: 12.5px; color: var(--muted); }
.quote-lines tr.to-price .price-in { border-color: var(--coral); }
.quote-totals { margin: 12px 0 0 auto; max-width: 360px; font-size: 14.5px; }
.quote-totals div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.quote-totals .grand { font-weight: 800; border-top: 1px solid var(--line-strong); margin-top: 4px; padding-top: 6px; font-size: 16px; }
.quote-editor .quote-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.quote-editor .quote-locked { background: var(--peach-soft); border: 1px solid var(--peach-line); border-radius: var(--radius); padding: 10px 14px; margin: 10px 0; }
.quote-editor .quote-state { color: var(--muted); font-size: 13.5px; }
.quote-template .tpl-logo-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.quote-template .tpl-logo-row img { max-height: 56px; max-width: 160px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: #fff; }
.quote-template .tpl-disclaimer { background: var(--peach-soft); border: 1px solid var(--peach-line); border-radius: var(--radius); padding: 10px 14px; }
.quote-template input[type="color"] { width: 56px; min-height: 38px; padding: 2px; }
.quote-dialog { max-width: 640px; }
.quote-dialog .field { margin: 10px 0; }
.quote-dialog input[type="text"], .quote-dialog input[type="number"], .quote-dialog select, .quote-dialog textarea { width: 100%; }
.quote-dialog .quote-msg { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; max-height: 34vh; overflow: auto; }
.quote-dialog ul.quote-recipients { list-style: none; margin: 8px 0; padding: 0; }
.quote-dialog ul.quote-recipients li { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.quote-dialog .quote-bad { color: #a32b1c; }

/* Devis, lot 2 : paiement d'un devis accepté, réglage des modes de paiement. */
.quote-card .quote-pay { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.quote-payment .quote-mode .check-row { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.quote-payment .quote-mode input[type="checkbox"] { width: 20px; height: 20px; }
.quote-payment .quote-mode .hint { margin: 4px 0 0 30px; }

/* Devis : le lien du mail, montré comme le bouton que le client verra. */
.quote-msg .quote-msg-text { white-space: pre-wrap; display: block; }
.quote-mail-btn { display: inline-block; margin: .5rem 0; padding: .6rem 1.1rem; border-radius: 8px; text-decoration: none; font-weight: 600; background: #c8412b; color: #fff; }

/* Conversations des clients (lot 3) */
.conv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.conv-open { display: grid; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--peach-line); border-radius: var(--radius); background: #fff; cursor: pointer; font: inherit; color: inherit; }
.conv-open:hover { background: var(--peach); }
.conv-open:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.conv-tags { color: var(--coral-deep); font-weight: 600; }
.conv-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-meta { font-size: .85rem; opacity: .7; }
.conv-thread { max-height: 50vh; overflow-y: auto; }

/* Premiers pas (lot 4) */
.first-steps { border-left: 4px solid var(--coral); }
.fs-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fs-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.fs-step { display: flex; align-items: center; gap: 10px; }
.fs-mark { width: 1.4em; text-align: center; color: var(--coral-deep); font-weight: 700; }
.fs-step.done .fs-body { opacity: .6; }
.fs-body { display: grid; flex: 1; }
.fs-hint { font-size: .9rem; opacity: .75; }
.fs-go { font: inherit; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--coral); background: var(--peach); color: var(--coral-deep); cursor: pointer; }
.fs-go:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.fs-calendar { display: grid; gap: 4px; margin: 8px 0; }