/* Tableau de bord d'Indigène : pensé d'abord pour l'iPad Pro (portrait et paysage, au doigt),
   puis l'iPhone (une colonne). Couleurs de la maquette du 01/11 ; palette des graphiques vérifiée
   (daltonisme, distinction) le 03/11. Aucune police ni ressource chargée depuis Internet. */
:root {
  color-scheme: light;
  --fond: #F2F5EF;
  --carte: #FFFFFF;
  --bord: #DCE4DC;
  --bord-doux: #E6ECE5;
  --vert-nuit: #123D29;
  --vert: #1F6B45;
  --vert-vif: #2E8B57;
  /* Bandes des chiffres (référence de Martin, 05/11) : texte vert nuit lisible sur les deux (6:1 et 9:1) */
  --menthe: #7CC79A;
  --lime: #DCEB8E;
  --encre: #17201A;
  --encre-2: #4C5A50;
  --encre-3: #7A867D;
  --grille: #E6E9E2;
  /* Séries, dans cet ordre, jamais recyclées */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6;
  /* États : réservés, toujours avec une icône et un mot */
  --bon: #1F6B45; --bon-fond: #E4F2E9;
  --attention: #9A5B00; --attention-fond: #FDF1D8;
  --critique: #B3261E; --critique-fond: #FBE7E5;
  --rayon: 24px;
  --ombre: 0 1px 2px rgba(18, 61, 41, .04), 0 12px 32px rgba(18, 61, 41, .07);
  --titre: ui-rounded, "SF Pro Rounded", "Bricolage Grotesque", system-ui, sans-serif;
  --texte: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--encre); font: 16px/1.45 var(--texte);
  /* Fond clair, une lueur menthe et lime en haut de page */
  background: radial-gradient(1100px 520px at 12% -8%, #DCEFE3 0%, rgba(220, 239, 227, 0) 62%),
    radial-gradient(900px 420px at 100% -4%, #EEF4D6 0%, rgba(238, 244, 214, 0) 58%), var(--fond);
  -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
h1, h2, h3 { font-family: var(--titre); margin: 0; letter-spacing: -.01em; }
button { font: inherit; }

/* --- En-tête --------------------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 24px; background: rgba(242, 245, 239, .86); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--bord-doux);
}
.marque { display: flex; align-items: center; gap: 12px; }
.marque img { border-radius: 11px; }
.marque strong { display: block; font: 700 18px/1.1 var(--titre); color: var(--vert-nuit); }
.marque span { font-size: 13px; color: var(--encre-2); }
.entete-actions { display: flex; align-items: center; gap: 10px; }
.maj { font-size: 13px; color: var(--encre-3); }

.bouton {
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font-weight: 650; font-size: 16px; touch-action: manipulation; transition: transform .08s, background .2s;
}
.bouton:active { transform: scale(.97); }
.bouton:focus-visible { outline: 3px solid var(--s1); outline-offset: 2px; }
.bouton-plein { background: var(--vert-nuit); color: #fff; box-shadow: 0 6px 16px rgba(18, 61, 41, .18); }
.bouton-plein.confirmer { background: #0B2A1C; box-shadow: 0 0 0 4px var(--lime); }
.bouton-clair { background: var(--carte); border-color: var(--bord); color: var(--vert-nuit); }
.bouton-fantome { background: transparent; color: var(--encre-2); }
.bouton[disabled] { opacity: .5; cursor: default; }
.entete .court { display: none; }

/* --- Grille : 3 colonnes (iPad paysage), 2 (iPad portrait), 1 (iPhone) ------------------- */
.page {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  max-width: 1400px; margin: 0 auto; padding: 24px;
}
.bonjour, .tuiles, .pleine { grid-column: 1 / -1; }
.large { grid-column: span 2; }
/* iPad en portrait : deux colonnes, les demi-cartes se rangent par paires (dense) */
@media (max-width: 1150px) {
  .page { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .pleine-portrait { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .page { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 16px 32px; }
  .large { grid-column: auto; }
  .entete { padding: 10px 16px; }
  .maj, .marque span, .entete .long { display: none; }
  .entete .court { display: inline; }
  .bouton { padding: 0 14px; }
}

.carte {
  background: var(--carte); border: 1px solid var(--bord-doux); border-radius: var(--rayon); padding: 22px;
  box-shadow: var(--ombre); min-width: 0; scroll-margin-top: 84px;
}
.tuiles, .section-titre { scroll-margin-top: 84px; }
.carte-titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 14px; }
.carte-titre h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; color: var(--vert-nuit); }
/* Dessins Lucide (icones.svg) : trait de la couleur du texte, sur une pastille teintée */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ico-petit { width: 14px; height: 14px; stroke-width: 2.4; }
.pastille {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--fond); color: var(--vert);
}
/* Pastille blanche cerclée (lignes de liste, fiches à valider), comme la référence de Martin */
.pastille-contour { width: 44px; height: 44px; background: #fff; border: 1.5px solid var(--bord); color: var(--vert); }
.p-vert { background: #E4F2E9; color: #1F6B45; }
.p-bleu { background: #E8F1FC; color: #1F5FAE; }
.p-orange { background: #FDEEE7; color: #B4471B; }
.p-jaune { background: #FDF4DE; color: #8A5A00; }
.p-rose { background: #FCEEF3; color: #A93A68; }
.p-violet { background: #EEEBFB; color: #4B3BB3; }
.p-turquoise { background: #E3F6EF; color: #0F7A55; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.note { font-size: 13px; color: var(--encre-3); text-align: right; }

/* --- Bonjour et chiffres financiers ------------------------------------------------------ */
.bonjour h1 { font-size: clamp(32px, 4vw, 46px); font-weight: 800; color: var(--vert-nuit); }
.sous-titre { margin: 6px 0 0; font-size: 18px; color: var(--encre-2); }

/* Référence visuelle de Martin (05/11) : bandes du vert nuit au lime, étiquette blanche en pointe.
   « Les tuiles sont trop grandes » (Martin, 05/11) : les trois bandes et la trésorerie sur une ligne
   (iPad paysage) ; les trois bandes sur une ligne et la trésorerie dessous (iPad portrait) ; empilées (iPhone). */
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 14px; }
@media (max-width: 1150px) { .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .treso-panneau { grid-column: 1 / -1; } }
@media (max-width: 760px) { .tuiles { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.bande {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "tag prin" "mes mes" "vis vis";
  align-content: start; gap: 10px 12px; padding: 12px 14px 12px 10px; border-radius: 22px; text-decoration: none;
  color: var(--vert-nuit); transition: transform .12s;
}
.bande:active, .treso-panneau:active { transform: scale(.99); }
.bande:focus-visible, .treso-panneau:focus-visible { outline: 3px solid var(--s1); outline-offset: 3px; }
.bande-1 { background: linear-gradient(115deg, var(--vert-nuit), var(--vert)); color: #fff; }
.bande-2 { background: var(--menthe); }
.bande-3 { background: var(--lime); }
.etiquette-ombre { grid-area: tag; filter: drop-shadow(0 4px 10px rgba(18, 61, 41, .18)); }
.etiquette {
  display: grid; place-content: center; width: 64px; height: 62px; padding-right: 6px; background: #fff;
  color: var(--vert-nuit); text-align: center; line-height: 1.1;
  clip-path: path("M12 0H47Q53 0 56 5L63 25Q65 31 63 37L56 57Q53 62 47 62H12Q0 62 0 50V12Q0 0 12 0Z");
}
.etiquette small { font-size: 11px; color: var(--encre-2); }
.etiquette b { font: 750 21px/1.1 var(--titre); }
.bande-principal { grid-area: prin; align-self: center; display: grid; gap: 2px; min-width: 0; }
.bande-libelle { font-size: 14px; font-weight: 650; }
.bande-valeur { font: 750 clamp(22px, 2.3vw, 28px)/1.1 var(--titre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bande-mesures { grid-area: mes; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 10px; }
.bande-mesure { display: grid; align-content: start; justify-items: start; gap: 2px; min-width: 0; }
.bande-mesure + .bande-mesure { padding-left: 10px; border-left: 1px solid rgba(18, 61, 41, .16); }
.bande-1 .bande-mesure + .bande-mesure { border-left-color: rgba(255, 255, 255, .22); }
.bande-mesure small { font-size: 12px; opacity: .85; }
.bande-mesure b { max-width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bande-visuel { grid-area: vis; align-self: end; }
.etincelle { display: block; width: 100%; height: auto; }
.etincelle-trait { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.etincelle-point { fill: var(--lime); stroke: var(--vert-nuit); stroke-width: 2; }
.part-retard { display: grid; gap: 6px; }
.part-retard small { font-size: 12px; font-weight: 650; text-align: right; }
.part-barre { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.part-barre i { display: block; min-width: 4px; }
.part-barre .retard { background: var(--critique); }
.part-barre .a-venir { background: rgba(18, 61, 41, .28); }

.treso-panneau {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 22px; background: var(--carte);
  border: 1px solid var(--bord-doux); box-shadow: var(--ombre); color: var(--encre); text-decoration: none; min-width: 0;
}
.treso-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; color: var(--vert-nuit); }
.treso-tete .pastille { width: 36px; height: 36px; }
.treso-tete small { margin-left: auto; font-size: 12px; color: var(--encre-3); }
.treso-valeur { font: 800 clamp(24px, 2.4vw, 30px)/1.1 var(--titre); color: var(--vert-nuit); font-variant-numeric: tabular-nums; }
.treso-sous { font-size: 12px; color: var(--encre-3); }
.treso-courbe { display: block; width: 100%; height: 36px; margin: 6px 0 2px; }
.treso-trait { fill: none; stroke: var(--vert-vif); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.treso-fin { font-size: 13px; color: var(--encre-2); }
.treso-fin b { color: var(--vert-nuit); }
/* iPad portrait : la trésorerie en largeur sous les bandes, la courbe au milieu */
@media (max-width: 1150px) and (min-width: 761px) {
  .treso-panneau { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px; align-items: center;
    grid-template-areas: "tete courbe fin" "valeur courbe fin" "sous courbe fin"; }
  .treso-tete { grid-area: tete; } .treso-valeur { grid-area: valeur; } .treso-sous { grid-area: sous; }
  .treso-fin { grid-area: fin; } .treso-courbe { grid-area: courbe; height: 48px; margin: 0; }
}
/* iPhone : bandes empilées, sans le petit graphique */
@media (max-width: 760px) { .bande-visuel { display: none; } }

/* Titres des parties de la page : listes à valider, suivi */
.section-titre { grid-column: 1 / -1; margin: 18px 0 -6px; font: 700 26px/1.2 var(--titre); color: var(--vert-nuit); }
@media (max-width: 760px) { .section-titre { font-size: 22px; margin-top: 10px; } }

/* --- Graphiques ------------------------------------------------------------------------ */
.graphique { width: 100%; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
svg text { font-family: var(--texte); }
.grille { stroke: var(--grille); stroke-width: 1; }
.ligne-zero { stroke: var(--encre-3); stroke-width: 1; }
.axe { fill: var(--encre-3); font-size: 12px; }
.valeur { fill: var(--encre); font-size: 13px; font-weight: 700; }
.zone-touche { fill: transparent; cursor: pointer; }
.zone-touche:hover, .zone-touche.actif { fill: rgba(18, 61, 41, .05); }
.barre { transform-box: fill-box; transform-origin: bottom; animation: pousse .6s cubic-bezier(.2, .8, .2, 1) both; }
.barre-bas { transform-origin: top; }
@keyframes pousse { from { transform: scaleY(0); } }
.trace { animation: trace 1.1s ease-out both; }
@keyframes trace { from { stroke-dashoffset: var(--longueur); } }
@media (prefers-reduced-motion: reduce) { .barre, .trace, .arc { animation: none !important; } }

.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 10px; font-size: 14px; color: var(--encre-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

.anneau-boite { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: center; }
@media (max-width: 1150px) and (min-width: 761px) { .anneau-boite { grid-template-columns: 150px minmax(0, 1fr); } }
@media (max-width: 380px) { .anneau-boite { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.anneau-boite svg { width: 100%; max-width: 190px; height: auto; }
.arc { animation: arc 1s ease-out both; }
@keyframes arc { from { stroke-dasharray: 0 1000; } }
.parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.parts li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; font-size: 14px; }
.parts li i { width: 12px; height: 12px; border-radius: 4px; }
.parts .nom { overflow-wrap: anywhere; line-height: 1.25; }
.parts .montant { font-weight: 700; font-variant-numeric: tabular-nums; }
.parts .jauge { grid-column: 2 / -1; height: 6px; border-radius: 3px; background: var(--fond); overflow: hidden; }
.parts .jauge b { display: block; height: 100%; border-radius: 3px; }

/* --- Devis ----------------------------------------------------------------------------- */
.empile { display: flex; gap: 2px; height: 22px; border-radius: 8px; overflow: hidden; margin: 6px 0 16px; }
.empile span { display: block; min-width: 4px; cursor: pointer; }
.devis-etats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.devis-etat { border-radius: 14px; padding: 12px; background: var(--fond); border-left: 6px solid; }
.devis-etat strong { display: block; font: 750 26px/1.1 var(--titre); font-variant-numeric: tabular-nums; }
.devis-etat span { font-size: 13px; color: var(--encre-2); }
.taux { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px; border-radius: 14px; background: var(--bon-fond); }
.taux svg { flex: none; }
.taux p { margin: 0; font-size: 14px; color: var(--encre-2); }
.taux strong { color: var(--vert-nuit); font-size: 16px; }

/* --- Marges ---------------------------------------------------------------------------- */
.chantier { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) 118px; gap: 6px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--grille); cursor: pointer; }
.chantier:first-child { border-top: 0; }
.chantier .nom { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chantier .barres { display: grid; gap: 4px; }
.chantier .barres b { display: block; height: 12px; border-radius: 0 4px 4px 0; transform-origin: left; animation: etire .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes etire { from { transform: scaleX(0); } }
.chantier .resultat { text-align: right; font-variant-numeric: tabular-nums; }
.chantier .resultat strong { display: block; font-size: 17px; }
@media (max-width: 760px) {
  .chantier { grid-template-columns: minmax(0, 1fr) auto; }
  .chantier .barres { grid-column: 1 / -1; grid-row: 2; }
}

.etat { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.etat-bon { background: var(--bon-fond); color: var(--bon); }
.etat-attention { background: var(--attention-fond); color: var(--attention); }
.etat-critique { background: var(--critique-fond); color: var(--critique); }
.etat-neutre { background: var(--fond); color: var(--encre-2); }

/* --- Listes : entrées, sorties, à faire ------------------------------------------------- */
.repartition { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; margin: 0 0 6px; }
.repartition span { display: block; }
.repartition-legende { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--encre-2); margin-bottom: 10px; }
.lignes { list-style: none; margin: 0; padding: 0; }
.lignes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--grille); }
.lignes li:first-child { border-top: 0; }
.lignes .tiers { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lignes .montant { font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; }
.lignes .detail { font-size: 13px; color: var(--encre-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vide { color: var(--encre-3); font-size: 15px; padding: 10px 0; }

.consigne { margin: -6px 0 6px; font-size: 13px; color: var(--encre-3); }
/* « À faire » : une seule liste par groupes (factures, devis, achats, autres, to-do), trois colonnes sur l'iPad
   en paysage. Le premier titre de groupe colle au titre de la carte. */
.sous-bloc { display: flex; align-items: center; gap: 8px; margin: 20px 0 6px; font-size: 16px; color: var(--vert-nuit); }
.groupes-afaire > .sous-bloc:first-child { margin-top: 0; }
.sous-bloc .nombre { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--fond); font: 700 13px/1.5 var(--texte);
  color: var(--encre-2); text-align: center; }
.afaire-liste .detail { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.groupes-afaire .vide { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--vert); background: var(--bon-fond);
  border-radius: 14px; padding: 18px; }
.todos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
@media (max-width: 760px) { .todos { grid-template-columns: minmax(0, 1fr); } }
/* Comme « Upcoming Schedule » de la référence : pastille ronde, titre, échéance à droite */
.todos li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--grille); }
.todo-texte { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.todos .detail { font-size: 13px; color: var(--encre-3); }
/* Lignes de « À faire » : toute la ligne s'ouvre au toucher */
.todos li.ouvrable { cursor: pointer; border-radius: 14px; padding-inline: 8px; transition: background .15s; }
.todos li.ouvrable:hover, .todos li.ouvrable:focus-visible { background: var(--fond); outline: none; }
.todos li.ouvrable:focus-visible { box-shadow: 0 0 0 3px #BFD9F6; }
.todos li.en-cours { opacity: .55; pointer-events: none; }
.todo-date b { color: var(--vert-nuit); font-variant-numeric: tabular-nums; }
.bouton-fantome.confirmer { background: var(--critique-fond); color: var(--critique); }
.todos .titre { font-weight: 650; color: var(--vert-nuit); }
.todo-date { font-size: 14px; color: var(--encre-3); white-space: nowrap; }
.date { display: inline-flex; align-items: center; gap: 4px; }

/* --- Aperçu d'une proposition et ses boutons, ouvert dans une feuille depuis « À faire » ------- */
.feuille-panneau.feuille-proposition { width: min(680px, 100%); }
.feuille-proposition .feuille-titre h2 { font-size: 20px; }
.feuille-corps-simple { padding: 16px 20px 22px; }
.feuille-proposition .decision { border: 0; padding: 0; }
.feuille-proposition .apercu { max-height: none; }
.decision { border: 1px solid var(--bord-doux); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.decision-entete { display: flex; align-items: center; gap: 12px; }
.decision-entete .pastille { width: 48px; height: 48px; background: #fff; border: 1.5px solid var(--bord); }
.decision-entete .pastille .ico { width: 22px; height: 22px; }
.decision-entete h3 { font-size: 17px; }
.decision-entete .etat { margin-left: auto; }
.apercu { white-space: pre-wrap; font-family: var(--texte); font-size: 15px; line-height: 1.5; margin: 0; max-height: 15em; overflow: hidden; position: relative; }
.apercu.replie::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3em; background: linear-gradient(transparent, #fff); }
.voir-tout { align-self: flex-start; background: none; border: 0; color: var(--s1); font-weight: 650; padding: 4px 0; min-height: 36px; cursor: pointer; }
.voir-plus { display: flex; margin: 14px auto 0; }
.erreur { display: flex; gap: 8px; align-items: flex-start; background: var(--critique-fond); color: var(--critique); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.choix .bouton { flex: 1 1 auto; }
.resultat-choix { display: flex; gap: 8px; align-items: center; font-weight: 650; padding: 12px; border-radius: 12px; }

/* --- « Modifier » une fiche d'« À faire » : champs, cases à cocher pour le doigt --------------- */
.modifier-fiche { border-top: 1px solid var(--bord-doux); padding-top: 16px; }
.form-fiche { display: grid; gap: 12px; }
.form-fiche .sous-titre-feuille { display: flex; align-items: center; gap: 8px; margin: 0; }
.form-fiche .choix { margin-top: 4px; }
.champs-2, .champs-3 { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.champs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .champs-2, .champs-3 { grid-template-columns: minmax(0, 1fr); } }
.champ textarea { font: 16px/1.4 var(--texte); color: var(--encre); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bord);
  background: #fff; width: 100%; min-width: 0; min-height: 96px; resize: vertical; }
.champ textarea:focus { outline: 3px solid #BFD9F6; border-color: var(--s1); }
.champ .aide, .champ-cases .aide { font-weight: 500; color: var(--encre-3); }
.aide.alerte { color: var(--attention); font-weight: 650; }
.aide-ligne { margin: 0; font-size: 14px; color: var(--encre-2); }
.sous-groupe { font-size: 15px; color: var(--vert-nuit); margin: 6px 0 0; }
.champ-cases { display: grid; gap: 6px; font-size: 13px; color: var(--encre-2); font-weight: 600; min-width: 0; }
.cases { display: flex; flex-wrap: wrap; gap: 8px; }
.case { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border: 1px solid var(--bord);
  border-radius: 12px; background: #fff; font: 600 15px/1.3 var(--texte); color: var(--encre); cursor: pointer; }
.case input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--vert-nuit); }
.case:has(input:checked) { border-color: var(--vert-nuit); background: var(--bon-fond); }
.case:has(input:focus-visible) { outline: 3px solid #BFD9F6; }

/* --- Activité dans Odoo ----------------------------------------------------------------- */
.activite { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 14px; }
@media (max-width: 760px) { .activite { grid-template-columns: minmax(0, 1fr); } }
.evenement { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--fond); }
.evenement .pastille { flex: none; width: 44px; height: 44px; }
.evenement-texte { min-width: 0; display: grid; gap: 2px; }
.evenement .titre { font-weight: 650; overflow-wrap: anywhere; }
.evenement .detail { font-size: 14px; color: var(--encre-2); overflow-wrap: anywhere; }
.evenement .quand { font-size: 13px; color: var(--encre-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.activite .vide { grid-column: 1 / -1; }

/* --- Calendrier -------------------------------------------------------------------------- */
.calendrier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendrier .tete { font-size: 12px; font-weight: 700; color: var(--encre-3); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.jour { aspect-ratio: 1.25; border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; font-variant-numeric: tabular-nums; min-height: 48px; }
.jour .num { font-size: 12px; font-weight: 600; opacity: .8; }
.jour .h { font-size: 15px; font-weight: 750; }
.jour .chantier-cal { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jour.aujourdhui { outline: 3px solid var(--s1); outline-offset: 1px; }
.jour.futur { background: repeating-linear-gradient(135deg, #fff, #fff 6px, var(--fond) 6px, var(--fond) 12px); color: var(--encre-3); }
@media (max-width: 760px) { .jour .chantier-cal { display: none; } .jour { aspect-ratio: 1; padding: 4px 5px; } }
.echelle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--encre-2); }
.echelle .degrade { display: flex; gap: 2px; }
.echelle .degrade i { width: 22px; height: 12px; border-radius: 3px; display: block; }

/* --- Infobulle, fin de session ------------------------------------------------------------ */
.bulle {
  position: fixed; z-index: 20; pointer-events: none; max-width: 280px; padding: 10px 12px; border-radius: 12px;
  background: var(--vert-nuit); color: #fff; font-size: 14px; line-height: 1.4; white-space: pre-line;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-variant-numeric: tabular-nums;
}
.bulle b { color: #9BE2B7; }
.fin-session { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(243, 244, 239, .96); padding: 16px; }
.refus { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.refus-carte { max-width: 460px; text-align: center; padding: 32px; }
.refus-carte h1 { color: var(--vert-nuit); font-size: 26px; margin-bottom: 8px; }
.refus-carte p { color: var(--encre-2); font-size: 17px; }
/* --- Fiche d'une facture d'achat (iPad d'abord : pièce à gauche, lignes à droite) ------- */
.apercu.ouvrable { cursor: pointer; }
.voir-facture { align-self: stretch; }
.feuille-ouverte { overflow: hidden; }
.feuille { position: fixed; inset: 0; z-index: 25; background: rgba(18, 61, 41, .35); display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.feuille-panneau { width: min(1240px, 100%); max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--fond); border-radius: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.feuille-attente { padding: 28px; display: grid; gap: 12px; justify-items: start; }
.feuille-titre { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  background: rgba(255, 255, 255, .95); border-bottom: 1px solid var(--bord); backdrop-filter: blur(8px); }
.feuille-titre h2 { font-size: 22px; color: var(--vert-nuit); }
.feuille-titre .fermer { margin-left: auto; padding: 0 12px; }
.feuille-corps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; padding: 20px; align-items: start; }
@media (max-width: 1000px) { .feuille-corps { grid-template-columns: minmax(0, 1fr); } }
.feuille-piece { position: sticky; top: 88px; display: grid; gap: 10px; }
@media (max-width: 1000px) { .feuille-piece { position: static; } }
.piece-image { display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--bord); background: #fff; }
.piece-image img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
@media (max-width: 1000px) { .piece-image img { max-height: 46vh; } }
.piece-absente { display: flex; gap: 10px; align-items: center; padding: 24px; border-radius: 16px; border: 2px dashed var(--bord); color: var(--encre-3); }
.feuille-form { display: grid; gap: 14px; }
.champs-entete { display: grid; grid-template-columns: 1fr 160px; gap: 10px; }
.champs-entete .champ:last-child { grid-column: 1 / -1; }
.champ { display: grid; gap: 4px; font-size: 13px; color: var(--encre-2); font-weight: 600; min-width: 0; }
.champ input, .champ select {
  font: 16px/1.3 var(--texte); color: var(--encre); min-height: 48px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--bord); background: #fff; width: 100%; min-width: 0; -webkit-appearance: none; appearance: none;
}
.champ select { background-image: linear-gradient(45deg, transparent 50%, var(--encre-3) 50%), linear-gradient(135deg, var(--encre-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 30px; }
.champ input:focus, .champ select:focus { outline: 3px solid #BFD9F6; border-color: var(--s1); }
.sous-titre-feuille { font-size: 17px; color: var(--vert-nuit); margin-top: 4px; }
.ligne-facture { margin: 0; border: 1px solid var(--bord); border-radius: 16px; padding: 12px 14px 10px; background: #fff; display: grid; gap: 10px; min-width: 0; }
.ligne-titre { font-weight: 700; color: var(--vert-nuit); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.ligne-chiffres { display: grid; grid-template-columns: 100px 120px minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
@media (max-width: 760px) { .ligne-chiffres { grid-template-columns: 1fr 1fr; } .champs-entete { grid-template-columns: 1fr; } }
.ligne-pied { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ligne-total { font-variant-numeric: tabular-nums; }
.totaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.totaux > div { background: #fff; border: 1px solid var(--bord); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; }
.totaux span { font-size: 13px; color: var(--encre-2); }
.totaux strong { font: 750 20px/1.2 var(--titre); font-variant-numeric: tabular-nums; }
.totaux .total-ttc { background: var(--vert-nuit); border-color: var(--vert-nuit); }
.totaux .total-ttc span { color: #CFE6D8; } .totaux .total-ttc strong { color: #fff; }
.feuille-actions { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; bottom: 0; padding: 12px 0 4px; background: var(--fond); }
.feuille-actions .bouton { flex: 1 1 auto; }
.changements { margin: 6px 0 0; padding-left: 18px; font-weight: 500; }
/* --- Fiche d'un devis ------------------------------------------------------------------ */
.devis-liste li.ouvrable { cursor: pointer; border-radius: 10px; }
/* Devis en cours : pastille ronde à gauche, sur deux lignes */
.devis-liste li { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.devis-liste li > .pastille { grid-row: span 2; }
.devis-liste .detail { grid-column: 2 / -1; }
.devis-liste li.ouvrable:hover, .devis-liste li.ouvrable:focus-visible { background: var(--fond); outline: none; }
.devis-resume { gap: 12px; }
.marges-devis { display: grid; gap: 8px; }
.marges-devis > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--bord); border-radius: 14px; padding: 10px 12px; font-size: 14px; color: var(--encre-2); }
.marges-devis strong { font: 700 17px/1.2 var(--titre); color: var(--encre); font-variant-numeric: tabular-nums; }
.marges-devis .marge-nette { background: var(--bon-fond); border-color: transparent; font-weight: 700; color: var(--vert-nuit); }
.ligne-chiffres-devis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ligne-pied > span:last-child { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.retirer { min-height: 40px; padding: 0 10px; color: var(--critique); }
.ligne-retiree { opacity: .5; }
.ligne-retiree input { text-decoration: line-through; }
.ligne-nouvelle { border-color: var(--s1); box-shadow: 0 0 0 3px #E8F1FC; }
.recherche-article { display: grid; gap: 8px; }
.recherche-article .champ > span { display: inline-flex; align-items: center; gap: 4px; }
.resultats-articles { display: grid; gap: 6px; }
.article-trouve { justify-content: flex-start; text-align: left; min-height: 48px; }
.article-trouve .note { margin-left: auto; }
.statut-envoi:empty { display: none; }
.statut-envoi .etat { white-space: normal; border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.35; align-items: flex-start; }
[hidden] { display: none !important; }

/* --- To-do qui proposent une action (Martin, 05/11) ------------------------------------- */
.todo-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; margin-top: 4px; }
.todo-qui { display: grid; gap: 1px; min-width: 0; flex: 1 1 160px; }
.todo-qui .note { text-align: left; margin: 0; font-size: 13px; }
.bouton.todo-lien { min-height: 44px; padding: 0 14px; text-decoration: none; }
.todo-prix { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; width: 100%; margin-top: 6px; }
.todo-prix .champ { flex: 1 1 180px; }
.todo-prix .erreur { flex-basis: 100%; }
.todo-note { text-align: left; margin: 2px 0 0; }
/* --- Lignes et fiches ouvertes d'un toucher (Martin, 06/11) ------------------------------- */
.lignes-ouvrables li.ouvrable, .chantier.ouvrable { cursor: pointer; border-radius: 12px; padding-inline: 8px; margin-inline: -8px; transition: background .15s; }
.lignes-ouvrables li.ouvrable:hover, .lignes-ouvrables li.ouvrable:focus-visible,
.chantier.ouvrable:hover, .chantier.ouvrable:focus-visible { background: var(--fond); outline: none; }
.lignes-ouvrables li.ouvrable:focus-visible, .chantier.ouvrable:focus-visible { box-shadow: 0 0 0 3px #BFD9F6; }
.zone-touche[role="button"]:focus-visible { outline: none; fill: rgba(18, 61, 41, .08); }
.partie-fiche { display: grid; gap: 8px; min-width: 0; }
.partie-fiche .lignes { background: #fff; border: 1px solid var(--bord); border-radius: 16px; padding: 2px 14px; }
.partie-fiche .lignes-ouvrables li.ouvrable { margin-inline: -6px; padding-inline: 6px; }
.partie-fiche .lignes-ouvrables li.ouvrable:hover, .partie-fiche .lignes-ouvrables li.ouvrable:focus-visible { background: var(--fond); }
.partie-fiche .vide { padding: 4px 0; }
.retour { justify-self: start; padding-inline: 10px; }
.ligne-libelle { margin: 0; overflow-wrap: anywhere; }
.feuille-etroite { width: min(760px, 100%); }
.feuille-etroite .totaux { grid-template-columns: minmax(0, 1fr); }
/* Téléphone : trois montants côte à côte débordaient (« 8 570,80 € ») ; le total passe sur sa propre rangée. */
@media (max-width: 480px) {
  .totaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .totaux .total-ttc { grid-column: 1 / -1; }
  .feuille-titre h2 { font-size: 19px; }
}

/* To-do « Préparer le devis » (Martin, 06/11) : ce qui a été dit sur la route, puis le devis prérempli. */
.todo-demande { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; margin-top: 6px; }
.demande-rappel { align-items: flex-start; text-align: left; }
.demande-rappel > div { display: flex; flex-direction: column; gap: 4px; }
.ligne-demande .ligne-chiffres { grid-template-columns: minmax(110px, 160px) 1fr; }
@media (max-width: 560px) { .ligne-demande .ligne-chiffres { grid-template-columns: 1fr; } }
.todo-demande .bouton { white-space: nowrap; }