/* Maquette de démonstration BTP : l'outil d'un artisan (Rénov'Exemple), PAS le site de KewStudio.
   Verre dépoli sur une lumière douce, bleu pétrole pour agir, ambre et rouge brique pour l'attention.
   Clair ou sombre selon le réglage de l'appareil. Base : la version choisie par Kewan le 09/10/2026 (« v2 »), affinée.
   Aucune valeur n'est posée par script : uniquement des classes et des attributs data-* (CSP stricte). */

:root {
  --texte: #0d1b24;
  --texte-2: #44545e;
  --texte-3: #5d6c76;
  --texte-4: rgb(13 27 36 / 0.3);
  --accent: #0a6c7e;
  --accent-fort: #07505e;
  --accent-voile: rgb(10 108 126 / 0.11);
  --sur-accent: #ffffff;
  --alerte: #b3360f;
  --alerte-texte: #8f2a0b;
  --alerte-voile: rgb(179 54 15 / 0.11);
  --attention: #c98a10;
  --attention-texte: #6b4500;
  --attention-voile: rgb(214 148 20 / 0.18);
  --ok: #1a6e45;
  --ok-texte: #14573a;
  --ok-voile: rgb(26 110 69 / 0.12);
  --trait: rgb(13 27 36 / 0.09);
  --creux: rgb(13 27 36 / 0.055);
  --creux-fort: rgb(13 27 36 / 0.09);
  --survol: rgb(255 255 255 / 0.5);
  --carte: rgb(255 255 255 / 0.62);
  --carte-pleine: #ffffff;
  --actif: rgb(255 255 255 / 0.85);
  /* Le verre : translucide, flou, un liseré de lumière en haut, une ombre longue et douce. */
  --verre: rgb(255 255 255 / 0.5);
  --verre-flou: blur(30px) saturate(190%);
  --verre-bord: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 0 0 0.5px rgb(255 255 255 / 0.6);
  --ombre: 0 1px 1px rgb(13 40 60 / 0.05), 0 14px 40px -10px rgb(13 40 60 / 0.18);
  --ombre-carte: 0 0.5px 1px rgb(13 40 60 / 0.05), 0 14px 36px -20px rgb(13 40 60 / 0.22);
  --heros: linear-gradient(155deg, #0b7386 0%, #07505e 72%);
  --fond: #e9eff3;
  --lueur-1: #b9dfe6; --lueur-2: #f6ddca; --lueur-3: #cbd6f4;
  --police: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --ronde: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --rayon: 1.375rem;
  --rayon-2: 0.875rem;
  --marge: 1rem;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --texte: #f1f5f7; --texte-2: #a9b6be; --texte-3: #8b99a2; --texte-4: rgb(255 255 255 / 0.3);
    --accent: #2aa5ba; --accent-fort: #6fd0e0; --accent-voile: rgb(64 190 210 / 0.16); --sur-accent: #04161b;
    --alerte: #ff8a5c; --alerte-texte: #ffab8a; --alerte-voile: rgb(255 122 69 / 0.16);
    --attention: #e0a93c; --attention-texte: #f0c36a; --attention-voile: rgb(236 176 60 / 0.17);
    --ok: #3fbf86; --ok-texte: #7fe0b0; --ok-voile: rgb(63 191 134 / 0.16);
    --trait: rgb(255 255 255 / 0.09);
    --creux: rgb(255 255 255 / 0.075); --creux-fort: rgb(255 255 255 / 0.12);
    --survol: rgb(255 255 255 / 0.05);
    --carte: rgb(255 255 255 / 0.065); --carte-pleine: #18222a;
    --actif: rgb(255 255 255 / 0.13);
    --verre: rgb(30 42 51 / 0.55);
    --verre-bord: inset 0 1px 0 rgb(255 255 255 / 0.15), inset 0 0 0 0.5px rgb(255 255 255 / 0.09);
    --ombre: 0 1px 1px rgb(0 0 0 / 0.3), 0 16px 44px -10px rgb(0 0 0 / 0.6);
    --ombre-carte: 0 0.5px 1px rgb(0 0 0 / 0.3), 0 16px 40px -20px rgb(0 0 0 / 0.7);
    --heros: linear-gradient(155deg, #10687a 0%, #0a3a46 76%);
    --fond: #0a1116; --lueur-1: #0d4350; --lueur-2: #4a2a1c; --lueur-3: #1d2a56;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 4rem; background: var(--fond); color-scheme: light dark; }
body {
  margin: 0; min-height: 100dvh;
  color: var(--texte); font-family: var(--police); font-size: 1.0625rem; line-height: 1.4;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  accent-color: var(--accent); caret-color: var(--accent);
}
/* Le fond : une lumière douce derrière le verre (c'est elle que la barre et les cartes laissent passer). */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(70rem 46rem at 0% -12%, var(--lueur-1) 0%, transparent 62%),
    radial-gradient(56rem 40rem at 108% 8%, var(--lueur-2) 0%, transparent 60%),
    radial-gradient(70rem 50rem at 46% 118%, var(--lueur-3) 0%, transparent 62%),
    var(--fond);
}
::selection { background: var(--accent-voile); }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 0.5rem; }
main:focus { outline: none; }
.icone { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: -100rem; }
.evitement:focus { left: 0.5rem; top: 3.5rem; z-index: 40; background: var(--carte-pleine); padding: 0.75rem 1rem; border-radius: var(--rayon-2); }
.sans-script { padding: 2rem var(--marge); }

/* Bandeau permanent, visible sur tous les écrans, vidéo comprise : une pastille de verre, en haut. */
.bandeau {
  position: sticky; top: max(0.5rem, env(safe-area-inset-top)); z-index: 30;
  display: flex; align-items: center; gap: 0.5rem;
  width: fit-content; max-width: calc(100% - 1.5rem); margin: 0.5rem auto 0;
  padding: 0.375rem 0.875rem 0.375rem 0.625rem; border-radius: 2rem;
  background: var(--verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  box-shadow: var(--verre-bord), var(--ombre);
  font-size: 0.8125rem; letter-spacing: 0.01em; white-space: nowrap;
}
.lames { width: 0.9375rem; height: 0.9375rem; flex: none; fill: #c8771f; touch-action: none; }
.bandeau strong { font-weight: 600; }
.bandeau-marque { padding-left: 0.5rem; border-left: 1px solid var(--trait); color: var(--texte-2); }

main { max-width: 70rem; margin: 0 auto; padding: 0.75rem var(--marge) 7.5rem; }
.page.etroite { max-width: 36rem; margin: 0 auto; }
.logo { display: block; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 22.5%; box-shadow: 0 6px 16px -6px rgb(120 40 20 / 0.55); }

/* En-tête d'écran */
.tete { padding: 1.125rem 0.375rem 0.25rem; }
.tete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tete-date { margin-bottom: 0.1875rem; font-size: 0.9375rem; font-weight: 600; color: var(--accent-fort); }
.grand { font-size: 2.25rem; line-height: 1.06; font-weight: 700; letter-spacing: -0.028em; text-wrap: balance; }
.grand.moyen { font-size: 1.75rem; letter-spacing: -0.022em; line-height: 1.12; }
.page > .grand { padding: 0.75rem 0.375rem 0; }
.tete-phrase { margin-top: 0.4375rem; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--texte-2); text-wrap: balance; }
.tete-sous { margin-top: 0.4375rem; max-width: 40rem; color: var(--texte-2); text-wrap: pretty; }
.tete-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.625rem; font-size: 0.9375rem; color: var(--texte-2); }
.retour { display: inline-flex; align-items: center; gap: 0.125rem; min-height: 2.75rem; margin-left: -0.375rem; padding-right: 0.5rem; color: var(--accent-fort); font-weight: 500; }
.retour .icone { width: 1.375rem; height: 1.375rem; stroke-width: 2.2; }

/* Surfaces de verre */
.liste-groupee, .liste, .cellule, .carte, .frise, .message, .tuile, .vide {
  background: var(--carte); border-radius: var(--rayon);
  box-shadow: var(--ombre-carte), var(--verre-bord);
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
}
.liste-groupee, .liste { overflow: hidden; }
.groupe { margin-top: 1.875rem; }
.groupe > h2, .groupe > h3 { padding: 0 0.375rem 0.5rem; font-size: 0.9375rem; line-height: 1.2; font-weight: 600; color: var(--texte-2); }
.page.etroite > .liste-groupee { margin-top: 1rem; }
.liste-groupee > li + li, .liste > li + li, .formulaire > label + label { box-shadow: inset 0 1px 0 var(--trait); }
.rang {
  display: flex; align-items: center; gap: 0.8125rem;
  width: 100%; min-height: 3.875rem; padding: 0.75rem 1rem;
  border: 0; background: none; text-align: left; cursor: default;
}
a.rang, button.rang { cursor: pointer; transition: background-color 0.15s; }
a.rang:hover, button.rang:hover, .ligne:hover, a.tuile:hover { background-color: var(--survol); }
a.rang:active, button.rang:active, .ligne:active { background-color: var(--creux); }
.rang-texte { flex: 1; min-width: 0; display: grid; gap: 0.0625rem; }
.rang-texte b { font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.rang-texte span { font-size: 0.9375rem; line-height: 1.35; color: var(--texte-2); }
.rang-valeur { flex: none; display: grid; justify-items: end; gap: 0.3125rem; text-align: right; }
.rang-valeur b { font-family: var(--ronde); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rang-chevron { flex: none; color: var(--texte-4); margin-right: -0.375rem; }
.rang-chevron .icone { width: 1.0625rem; height: 1.0625rem; stroke-width: 2.4; display: block; }
.rang-heure { flex: none; align-self: flex-start; width: 4.125rem; padding-top: 0.0625rem; white-space: nowrap; font-family: var(--ronde); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--accent-fort); }
.pied-groupe { padding: 0.5rem 0.375rem 0; font-size: 0.875rem; color: var(--texte-3); }

/* Pastilles d'icônes : rondes, une teinte par domaine, toutes prises dans la palette de l'outil */
.bulle { flex: none; display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; background: var(--creux); color: var(--texte-2); }
.bulle .icone { width: 1.25rem; height: 1.25rem; }
.bulle[data-ton] { color: #fff; background: linear-gradient(160deg, var(--t1), var(--t2)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 6px 14px -5px var(--t2); }
.bulle[data-ton='gris'] { background: var(--creux); color: var(--texte-2); box-shadow: none; }
.bulle[data-ton='bleu'] { --t1: #1289a0; --t2: #07505e; }
.bulle[data-ton='indigo'] { --t1: #5a76c8; --t2: #2f4391; }
.bulle[data-ton='vert'] { --t1: #2c9a66; --t2: #145c39; }
.bulle[data-ton='orange'] { --t1: #e08a2c; --t2: #b25c0c; }
.bulle[data-ton='jaune'] { --t1: #e2b13a; --t2: #b9820e; }
.bulle[data-ton='rouge'] { --t1: #d2501f; --t2: #9c2d0a; }

.etat { flex: none; padding: 0.1875rem 0.5625rem; border-radius: 1rem; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; background: var(--creux-fort); color: var(--texte-2); }
.etat.accent { background: var(--accent-voile); color: var(--accent-fort); }
.etat.attention { background: var(--attention-voile); color: var(--attention-texte); }
.etat.alerte { background: var(--alerte-voile); color: var(--alerte-texte); }
.etat.ok { background: var(--ok-voile); color: var(--ok-texte); }
.rang-texte .etat { justify-self: start; margin-top: 0.3125rem; font-size: 0.8125rem; }
.rang-texte .etat:not(.attention) { color: var(--texte-2); }
.rang-texte .etat.attention { color: var(--attention-texte); }

/* Tuiles du haut d'Aujourd'hui */
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.125rem; }
.tuile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.625rem 0.5rem; padding: 0.875rem 1rem 0.9375rem; transition: background-color 0.15s, transform 0.25s var(--sortie); }
.tuile:active { transform: scale(0.98); }
.tuile > b { font-family: var(--ronde); font-size: 2rem; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tuile-nom { grid-column: 1 / -1; display: grid; gap: 0.0625rem; font-size: 0.9375rem; line-height: 1.25; font-weight: 600; }
.tuile-nom span { font-size: 0.8125rem; font-weight: 400; color: var(--texte-3); font-variant-numeric: tabular-nums; }

/* Fiche de l'entreprise, en haut de « Plus » */
.profil { display: flex; align-items: center; gap: 0.9375rem; margin-top: 1rem; padding: 1rem; }
.profil .logo { width: 3.75rem; height: 3.75rem; }
.profil b { display: block; font-size: 1.25rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
.profil span { display: block; font-size: 0.875rem; line-height: 1.38; color: var(--texte-2); }

.pied { margin-top: 2rem; padding: 0 0.375rem; font-size: 0.8125rem; color: var(--texte-3); }
.note { margin-top: 0.625rem; padding: 0 0.375rem; font-size: 0.875rem; color: var(--texte-3); }
.vide { margin-top: 1.25rem; padding: 1.25rem; color: var(--texte-2); }
.cellule { padding: 0.875rem 1.125rem; }
.cellule > p + p { margin-top: 0.5rem; }

/* Boutons */
.suite { display: grid; gap: 0.625rem; margin-top: 1.25rem; }
.bouton {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.125rem; padding: 0.75rem 1.25rem; border: 0; border-radius: var(--rayon-2);
  background: var(--creux-fort); color: var(--accent-fort);
  font-weight: 600; text-align: center; cursor: pointer;
  transition: transform 0.2s var(--sortie), background-color 0.15s, opacity 0.2s, filter 0.15s;
}
.bouton:hover { background: var(--accent-voile); }
.bouton:active { transform: scale(0.975); }
.bouton .icone { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.bouton.plein { background: var(--accent); color: var(--sur-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 8px 18px -8px var(--accent); }
.bouton.plein:hover { filter: brightness(1.08); }
.bouton.discret { background: none; color: var(--texte-2); font-weight: 500; }
.bouton.attente { opacity: 0.45; box-shadow: none; }

/* Navigation de l'outil : barre flottante en verre */
.barre {
  position: fixed; z-index: 25; left: 50%; bottom: max(0.625rem, env(safe-area-inset-bottom));
  width: min(calc(100% - 1.25rem), 28rem); transform: translateX(-50%);
  padding: 0.3125rem; border-radius: 2rem;
  background: var(--verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  box-shadow: var(--verre-bord), var(--ombre);
}
.barre-nom { display: none; }
.barre ul { display: grid; grid-template-columns: repeat(5, 1fr); }
.barre a {
  position: relative; display: grid; justify-items: center; gap: 0.0625rem;
  min-height: 3.25rem; padding: 0.375rem 0.125rem 0.3125rem; border-radius: 1.6875rem;
  color: var(--texte-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em;
  transition: background-color 0.25s var(--sortie), color 0.2s;
}
.barre a[aria-current] { background: var(--actif); color: var(--accent-fort); box-shadow: var(--verre-bord), 0 4px 12px -4px rgb(13 40 60 / 0.18); }
.barre .icone { width: 1.5rem; height: 1.5rem; }
.badge { position: absolute; top: 0.1875rem; left: calc(50% + 0.375rem); min-width: 1.1875rem; padding: 0.0625rem 0.3125rem; border-radius: 1rem; background: #c8421a; color: #fff; font-style: normal; font-size: 0.6875rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Messages ---------- */
/* Le résumé du matin : la seule carte pleine de l'outil, en bleu pétrole. */
.resume { margin-top: 1rem; padding: 1.0625rem 1.125rem 1.125rem; border-radius: var(--rayon); color: #fff; background: var(--heros); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 14px 30px -14px rgb(7 80 94 / 0.6); }
.resume h2 { font-size: 1.5rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.resume ul { margin-top: 0.75rem; display: grid; gap: 0.25rem; }
.resume li a { display: grid; grid-template-columns: 1.625rem 1fr; align-items: baseline; color: rgb(255 255 255 / 0.92); }
.resume li b { font-family: var(--ronde); font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.resume-pret { display: grid; gap: 0.0625rem; margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid rgb(255 255 255 / 0.22); font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; }
.resume-pret span { font-size: 0.875rem; font-weight: 400; letter-spacing: 0; color: rgb(255 255 255 / 0.8); }

.onglets { display: flex; gap: 0.375rem; margin: 1rem calc(var(--marge) * -1) 0; padding: 0.25rem var(--marge); overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglet {
  flex: none; display: inline-flex; align-items: center; gap: 0.4375rem;
  min-height: 2.75rem; padding: 0 0.875rem; border-radius: 1.5rem;
  background: var(--carte); box-shadow: var(--verre-bord), 0 1px 3px rgb(13 40 60 / 0.07);
  font-size: 0.9375rem; font-weight: 600; white-space: nowrap; color: var(--texte-2);
  transition: background-color 0.2s, color 0.2s;
}
.onglet i { font-style: normal; font-family: var(--ronde); font-size: 0.8125rem; font-weight: 700; min-width: 1.375rem; padding: 0.0625rem 0.3125rem; border-radius: 1rem; background: var(--creux-fort); text-align: center; }
.onglet[aria-selected='true'] { background: var(--texte); color: var(--fond); box-shadow: 0 6px 14px -6px rgb(13 27 36 / 0.4); }
.onglet[aria-selected='true'] i { background: rgb(128 128 128 / 0.3); }

.liste { margin-top: 0.75rem; }
.ligne { display: grid; grid-template-columns: 0.625rem minmax(0, 1fr); column-gap: 0.6875rem; padding: 0.875rem 1rem; transition: background-color 0.15s; }
.pastille { width: 0.625rem; height: 0.625rem; margin-top: 0.4375rem; border-radius: 50%; background: var(--texte-4); }
.pastille[data-priorite='haute'] { background: var(--alerte); box-shadow: 0 0 0 3px var(--alerte-voile); }
.pastille[data-priorite='normale'] { background: var(--accent); }
.ligne-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.ligne-tete b { font-weight: 650; letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-tete time { flex: none; font-size: 0.875rem; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.ligne-tete time .icone { display: none; }
.ligne-objet { font-size: 0.9375rem; line-height: 1.38; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-apercu { color: var(--texte-2); font-size: 0.9375rem; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.etiquette { display: inline-block; margin-top: 0.4375rem; padding: 0.125rem 0.5625rem; border-radius: 1rem; font-size: 0.8125rem; font-weight: 600; background: var(--accent-voile); color: var(--accent-fort); }
.etiquette.rangee { background: var(--creux); color: var(--texte-2); font-weight: 500; }
.etiquette.traite { background: var(--ok-voile); color: var(--ok-texte); }

/* Fiche d'un e-mail */
.fiche { margin-top: 0.25rem; }
.fiche > h2 { font-size: 1.5rem; line-height: 1.18; font-weight: 700; letter-spacing: -0.018em; }
.expediteur { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.avatar { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--creux-fort); color: var(--texte-2); font-family: var(--ronde); font-size: 0.9375rem; font-weight: 700; }
.expediteur b { display: block; font-weight: 600; }
.expediteur div span { display: block; font-size: 0.875rem; color: var(--texte-2); }
.origine { margin-top: 1rem; border-radius: var(--rayon-2); background: var(--creux); }
.origine summary { min-height: 3rem; display: flex; align-items: center; padding: 0 0.875rem; font-weight: 600; color: var(--accent-fort); cursor: pointer; }
.origine div { padding: 0 0.875rem 0.875rem; color: var(--texte-2); font-size: 0.9375rem; }
.origine p + p { margin-top: 0.5rem; }
.origine .adresse { overflow-wrap: anywhere; color: var(--texte-3); }
/* Dans la fiche, les blocs sont du texte posé, sans carte : seule la réponse préparée est encadrée. */
.fiche .groupe { margin-top: 1.375rem; }
.fiche .groupe > h3 { padding: 0 0 0.25rem; font-size: 0.875rem; color: var(--texte-3); }
.fiche .cellule { padding: 0; background: none; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.infos { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; }
.infos > div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; padding: 0.4375rem 0; }
.infos > div + div { box-shadow: inset 0 1px 0 var(--trait); }
.infos > div:first-child { padding-top: 0.125rem; }
.infos > div:last-child { padding-bottom: 0.125rem; }
.infos dt { color: var(--texte-2); }
.infos dd { font-weight: 600; }
.infos dd.a-preciser { color: var(--attention-texte); }
.brouillon { margin-top: 1.125rem; padding: 1rem 1.125rem 1.125rem; border-radius: var(--rayon); background: var(--carte-pleine); box-shadow: 0 0 0 1.5px var(--accent), 0 16px 34px -18px var(--accent); }
.marque-ia { display: inline-flex; align-items: center; padding: 0.1875rem 0.625rem; border-radius: 1rem; background: var(--accent-voile); color: var(--accent-fort); font-size: 0.8125rem; font-weight: 650; }
.brouillon p { margin-top: 0.625rem; }
.brouillon .signature { color: var(--texte-2); }
.brouillon.parti { background: var(--carte); box-shadow: var(--ombre-carte), var(--verre-bord); }
.brouillon.parti p:first-child { margin-top: 0; }
input.a-completer {
  font: inherit; font-weight: 600; color: var(--texte);
  min-height: 2.75rem; max-width: 100%; padding: 0.125rem 0.625rem;
  border: 0; border-radius: 0.625rem; background: var(--attention-voile); box-shadow: inset 0 0 0 1.5px var(--attention);
}
input.a-completer::placeholder { color: var(--attention-texte); opacity: 1; font-weight: 500; }
input.a-completer:not(:placeholder-shown) { background: var(--creux); box-shadow: inset 0 0 0 1.5px var(--trait); }
.saisie { display: block; width: 100%; margin-top: 0.625rem; padding: 0.75rem; font: inherit; line-height: 1.45; color: var(--texte); background: var(--creux); border: 0; box-shadow: inset 0 0 0 1.5px var(--trait); border-radius: var(--rayon-2); resize: vertical; }
.saisie:focus-visible, input.a-completer:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.jointes { margin-top: 0.75rem; display: grid; gap: 0.25rem; }
.jointes li { padding: 0.4375rem 0.75rem; border-radius: 0.625rem; font-size: 0.9375rem; background: var(--creux); }
.jointes li::before { content: 'Joint : '; color: var(--texte-3); }
.alerte { margin-top: 0.75rem; padding: 0 0.375rem; font-weight: 600; color: var(--alerte-texte); }
.alerte:empty { display: none; }
.gestes { display: grid; gap: 0.5rem; margin-top: 1rem; }
.envoye { display: flex; align-items: center; gap: 0.625rem; margin-top: 1.25rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.012em; color: var(--ok-texte); animation: arrive 0.45s var(--sortie); }
.envoye::before { content: ''; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center / 1.25rem no-repeat; box-shadow: 0 6px 14px -5px var(--ok); }
.envoye.discret { color: var(--texte-2); }
.envoye.discret::before { background-image: none; background-color: var(--texte-3); box-shadow: none; }
.fiche > .bouton { margin-top: 0.875rem; }
.fiche[data-alerte] .groupe:last-of-type .cellule p:first-of-type { font-weight: 600; color: var(--alerte-texte); }
@keyframes arrive { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); filter: blur(4px); } }

/* Point du matin, réglages */
.page.etroite > p:not(.pied, .note, .envoye, .alerte, .vide) { margin-top: 0.75rem; padding: 0 0.375rem; }
.situation { color: var(--texte-2); }
.choix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 1rem; }
.groupe > .choix { margin-top: 0; }
.choix .bouton { background: var(--carte); box-shadow: var(--ombre-carte), var(--verre-bord); color: var(--texte); min-height: 3.5rem; }
.choix .bouton.plein { background: var(--accent); color: var(--sur-accent); }
.message { margin-top: 1rem; padding: 1.125rem; border-radius: var(--rayon) var(--rayon) var(--rayon) 0.5rem; }
.message-tete { font-size: 0.875rem; color: var(--texte-3); }
.message h2 { margin-top: 1rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.message ul { margin-top: 0.375rem; display: grid; gap: 0.3125rem; }
.message li { position: relative; padding-left: 1.5rem; }
.message li::before { content: ''; position: absolute; left: 0.25rem; top: 0.5625rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); }
.attente li::before { background: var(--attention-voile); box-shadow: inset 0 0 0 2px var(--attention); }
.attente a { color: var(--accent-fort); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.message .accord { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--trait); font-weight: 650; }

/* Détail d'un devis ou d'une facture, signature */
.carte { margin-top: 1.25rem; padding: 0.375rem 1.125rem 1rem; }
.groupe > .carte { margin-top: 0; }
.lignes-devis { width: 100%; border-collapse: collapse; }
.lignes-devis th { padding: 0.75rem 0.75rem 0.75rem 0; text-align: left; font-weight: 400; line-height: 1.3; }
.lignes-devis td { padding: 0.75rem 0; text-align: right; white-space: nowrap; font-family: var(--ronde); font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: top; }
.lignes-devis tbody tr + tr > * { border-top: 1px solid var(--trait); }
.lignes-devis tfoot > tr > * { border-top: 1.5px solid var(--texte); padding-top: 0.875rem; font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.01em; }
.lignes-devis tr.a-preciser > * { color: var(--attention-texte); font-weight: 600; }
.lignes-devis tr.a-preciser th span { display: block; font-size: 0.8125rem; font-weight: 500; }
.carte .note { padding: 0; }
.frise { padding: 0.375rem 1.125rem 0.5rem; }
.frise li { position: relative; display: grid; gap: 0.0625rem; padding: 0.75rem 0 0.75rem 1.875rem; }
.frise li::before { content: ''; position: absolute; left: 0.1875rem; top: 1.0625rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-voile); }
.frise li[data-fait='false']::before { background: transparent; box-shadow: inset 0 0 0 2px var(--texte-3); }
.frise li + li::after { content: ''; position: absolute; left: 0.5rem; top: -0.875rem; width: 2px; height: 1.625rem; border-radius: 1px; background: var(--trait); }
.frise b { font-weight: 600; }
.frise span { font-size: 0.9375rem; color: var(--texte-2); }
.texte-envoye { margin-top: 0.25rem; }
.texte-envoye summary { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--accent-fort); font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.texte-envoye p { padding: 0.75rem 0.875rem; border-radius: 1.125rem 1.125rem 1.125rem 0.375rem; background: var(--creux); font-size: 0.9375rem; line-height: 1.45; }
.carte.client { padding: 1.25rem 1.125rem; background: var(--carte-pleine); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--ombre); }
.client-de { display: flex; align-items: center; gap: 0.625rem; font-weight: 650; }
.client-de .logo { width: 2.25rem; height: 2.25rem; }
.carte.client h1 { margin: 1rem 0 0.375rem; font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.018em; }
.carte.client > p:not(.client-de, .envoye, .note, .alerte, .signature-titre) { color: var(--texte-2); }
.signature-titre { margin-top: 1.125rem; font-weight: 600; }
.zone-signature { display: block; width: 100%; height: 10rem; margin-top: 0.5rem; border-radius: var(--rayon-2); background: var(--creux); box-shadow: inset 0 0 0 1.5px var(--trait); color: var(--texte); touch-action: none; cursor: crosshair; }
.creneaux { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 1rem; }

/* Devis dicté */
.dictee { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem 1.125rem; }
.dictee p { flex: 1; min-height: 7rem; line-height: 1.45; }
.micro { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: linear-gradient(160deg, #1289a0, #07505e); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 8px 16px -6px #07505e; cursor: pointer; }
.micro.ecoute { background: linear-gradient(160deg, #d2501f, #9c2d0a); box-shadow: 0 0 0 6px var(--alerte-voile); animation: ecoute 0.9s ease-in-out infinite alternate; }
@keyframes ecoute { to { box-shadow: 0 0 0 12px transparent; } }
.question { margin-top: 0.75rem; padding: 0.875rem 1.125rem 1rem; border-radius: var(--rayon); background: var(--attention-voile); box-shadow: inset 0 0 0 1px rgb(214 148 20 / 0.35); }
.question b { display: block; font-weight: 650; color: var(--attention-texte); }
.question .choix { margin-top: 0.75rem; }
.question .choix .bouton { min-height: 3rem; box-shadow: var(--verre-bord); }

/* Facture fournisseur : la feuille (fictive) telle qu'elle arrive */
.papier { margin-top: 1rem; padding: 1.125rem 1.125rem 1rem; border-radius: 0.375rem; background: #fff; color: #1c1c1e; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 14px 30px -14px rgb(0 0 0 / 0.35); font-size: 0.8125rem; line-height: 1.4; }
.papier b { display: block; font-size: 1rem; }
.papier-tete { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #d5dade; }
.papier-tete span { display: block; text-align: right; color: #5d6c76; }
.papier table { width: 100%; margin-top: 0.5rem; border-collapse: collapse; }
.papier th { padding: 0.25rem 0; text-align: left; font-weight: 400; }
.papier td { padding: 0.25rem 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.papier tfoot tr:first-child > * { border-top: 1px solid #d5dade; padding-top: 0.5rem; }
.papier tfoot tr:last-child > * { font-weight: 700; }
.papier-mention { margin-top: 0.75rem; font-size: 0.6875rem; color: #7a878f; text-transform: uppercase; letter-spacing: 0.04em; }

/* Scène de l'appel manqué */
.carte.scene { padding: 1rem 1.125rem 1.125rem; animation: arrive 0.5s var(--sortie); }
.scene-titre { display: flex; align-items: center; gap: 0.75rem; }
.scene-titre b { flex: 1; font-weight: 600; }
.scene-titre span:last-child { font-size: 0.875rem; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.scene-gros { margin-top: 0.75rem; font-family: var(--ronde); font-size: 1.875rem; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.scene-resume { margin-top: 0.75rem; font-size: 1.1875rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.scene .infos { margin-top: 0.75rem; }
.scene .note { padding: 0; }
.scene .gestes { display: flex; flex-wrap: wrap; }
.scene .gestes .bouton { flex: 1; white-space: nowrap; }
.bulle-sms { margin-top: 0.75rem; padding: 0.75rem 0.9375rem; border-radius: 1.25rem 1.25rem 1.25rem 0.375rem; background: linear-gradient(160deg, #2c9a66, #145c39); color: #fff; line-height: 1.4; }

/* Calculateur */
.formulaire { margin-top: 1rem; }
.formulaire > label { cursor: text; }
.nombre { width: 6.5rem; min-height: 2.75rem; padding: 0 0.75rem; border: 0; border-radius: 0.75rem; background: var(--creux); color: var(--texte); font: inherit; font-family: var(--ronde); font-size: 1.25rem; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.nombre::placeholder { color: var(--texte-4); opacity: 1; }
.nombre:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
#resultat { margin-top: 1.5rem; }
#resultat .tete-phrase { padding: 0 0.375rem 0.5rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; }
.chiffre { display: grid; gap: 0.125rem; padding: 0.9375rem 1.125rem 1rem; }
.chiffre > span:first-child { font-size: 0.9375rem; font-weight: 600; color: var(--texte-2); }
.chiffre > b { font-family: var(--ronde); font-size: 2.5rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--accent-fort); }
.chiffre > span:last-child { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.35; color: var(--texte-3); }
.verdict { display: grid; gap: 0.25rem; margin-top: 0.875rem; padding: 0.875rem 1.125rem; border-radius: var(--rayon); background: var(--accent-voile); color: var(--accent-fort); font-weight: 650; }
.verdict span { font-size: 0.9375rem; font-weight: 400; color: var(--texte-2); }
.verdict.non { background: var(--attention-voile); color: var(--attention-texte); font-size: 1.1875rem; letter-spacing: -0.01em; }

/* Ce que ça coûterait */
.precision { max-width: 7.5rem; font-size: 0.8125rem; line-height: 1.25; color: var(--texte-3); }
.franc li { position: relative; padding: 0.8125rem 1.125rem 0.8125rem 2.5rem; line-height: 1.4; }
.franc li::before { content: ''; position: absolute; left: 1.125rem; top: 1.3125rem; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--accent); }
.hors-ligne { display: grid; gap: 0.25rem; margin: 0; padding: 1rem 1.125rem; text-align: center; color: var(--texte-2); }
.hors-ligne b { font-family: var(--ronde); font-size: 1.75rem; color: var(--texte); }

/* Mode visite : une barre de verre qui remplace la barre des rubriques */
.visite { position: fixed; left: 50%; bottom: max(0.625rem, env(safe-area-inset-bottom)); z-index: 26; width: min(calc(100% - 1.25rem), 30rem); transform: translateX(-50%); padding: 0.4375rem 0.5rem 0.5rem; border-radius: 1.75rem; background: var(--verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); box-shadow: var(--verre-bord), var(--ombre); }
.visite[hidden] { display: none; }
.visite p { display: flex; justify-content: center; align-items: center; gap: 0.75rem; font-size: 0.8125rem; font-weight: 600; color: var(--texte-2); }
.quitter { min-height: 2rem; padding: 0 0.5rem; border: 0; background: none; font-size: 0.8125rem; color: var(--accent-fort); cursor: pointer; }
.visite-boutons { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; margin-top: 0.125rem; }
.visite .bouton { min-height: 4rem; border-radius: 1.25rem; }
.visite .bouton:not(.plein) { background: var(--actif); }
.bouton.geant { font-size: 1.125rem; line-height: 1.2; }
.invisible { visibility: hidden; }
body[data-visite] .barre { display: none; }
body[data-visite] main { padding-bottom: 10rem; }

/* Changement d'écran : un fondu court, sans rien faire glisser. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; animation-timing-function: var(--sortie); }

/* Téléphone : la liste OU la fiche. */
.mail[data-vue='fiche'] .cote-liste { display: none; }
.mail[data-vue='liste'] .cote-fiche { display: none; }

/* Tablette : deux colonnes */
@media (min-width: 48rem) {
  :root { --marge: 1.5rem; }
  .colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
  .grand { font-size: 2.5rem; }
  .grand.moyen { font-size: 2rem; }
  .tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mail { display: grid; grid-template-columns: minmax(0, 22.5rem) minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
  .mail[data-vue] .cote-liste, .mail[data-vue] .cote-fiche { display: block; }
  .onglets { margin-inline: 0; padding-inline: 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); }
  .cote-fiche { position: sticky; top: 3.25rem; }
  .cote-fiche .retour { display: none; }
  .ligne[aria-current='true'] { background: var(--accent-voile); }
  .fiche { margin-top: 1.125rem; padding: 1.5rem; max-height: calc(100dvh - 5rem); overflow-y: auto; scrollbar-width: thin; background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-carte), var(--verre-bord); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); }
  .gestes { display: flex; flex-wrap: wrap; }
  .gestes .bouton { white-space: nowrap; }
}

/* Ordinateur : la barre devient une colonne de verre à gauche ; le mode visite reste une pastille compacte */
@media (min-width: 68rem) {
  body { padding-left: 16.5rem; }
  main { padding-bottom: 3rem; }
  .tete-ligne > a { display: none; }
  .barre { left: 1rem; top: 1rem; bottom: 1rem; width: 15rem; transform: none; padding: 1rem 0.625rem; border-radius: 1.75rem; }
  .barre-nom { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0.5rem 1.125rem; }
  .barre-nom b { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.25; }
  .barre-nom span span { display: block; font-size: 0.8125rem; color: var(--texte-3); line-height: 1.3; }
  .barre ul { grid-template-columns: 1fr; gap: 0.125rem; }
  .barre a { display: flex; align-items: center; gap: 0.75rem; min-height: 2.875rem; padding: 0 0.75rem; border-radius: 0.875rem; font-size: 1rem; letter-spacing: 0; }
  .barre a:not([aria-current]):hover { background: var(--survol); }
  .badge { position: static; margin-left: auto; font-size: 0.75rem; }
  body[data-visite] .barre { display: block; }
  body[data-visite] main { padding-bottom: 7rem; }
  .visite { left: auto; right: 1.25rem; bottom: 1.25rem; transform: none; width: 24rem; }
  .visite .bouton { min-height: 3.25rem; }
  .bouton.geant { font-size: 1rem; }
}

@media (prefers-color-scheme: dark) {
  .lames { fill: #e89a45; }
  .onglet[aria-selected='true'] { box-shadow: none; }
  .papier { box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.8); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --verre: var(--carte-pleine); --carte: var(--carte-pleine); --verre-flou: none; }
}