/* Bativia : base visuelle, définie à un seul endroit.
   Couleurs : jetons générés côté serveur (theme.css, OKLCH, clair et sombre) ; aucune couleur en dur ici.
   Échelles : tailles, espacements, rayons ci-dessous ; aucune taille en px hors de :root, sauf filets de 1 et 2 px. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter-latin-opsz.woff2?v=2c295d99e26d') format('woff2');
}

:root {
  --police: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-xs: 12px;
  --t-s: 13px;
  --t-m: 15px;
  --t-l: 18px;
  --t-xl: 24px;
  --t-xxl: 32px;
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --barre-largeur: 232px;
  --panneau-largeur: 320px;
  --cible-tactile: 44px;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-m);
  line-height: 1.55;
  font-optical-sizing: auto;
  font-feature-settings: 'cv11', 'ss01';
  color: var(--texte);
  background: var(--fond);
}

/* Titres en taille optique Display. */
h1, h2, h3 {
  margin: 0;
  font-variation-settings: 'opsz' 32;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-l); }
h3 { font-size: var(--t-m); }
p { margin: 0 0 var(--e-3); }

a { color: var(--accent-texte); text-underline-offset: 2px; }

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

.nombre, .tuile-nombre, td.montant { font-variant-numeric: tabular-nums; }

.icone {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.evitement {
  position: absolute;
  left: var(--e-2);
  top: -100px;
  padding: var(--e-2) var(--e-3);
  background: var(--fenetre);
  color: var(--texte);
  border-radius: var(--r-s);
  z-index: 10;
}
.evitement:focus { top: var(--e-2); }

/* ---------- Cadre en L ---------- */

.cadre {
  display: grid;
  grid-template-columns: var(--barre-largeur) minmax(0, 1fr);
  min-height: 100vh;
}

.barre {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding: var(--e-4) var(--e-3);
  background: var(--fond);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-2);
  color: var(--texte);
  text-decoration: none;
  font-weight: 650;
  font-size: var(--t-l);
  font-variation-settings: 'opsz' 32;
  letter-spacing: -0.015em;
}
.logo-marque {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-s);
  background: var(--accent);
  color: var(--sur-accent);
  font-size: var(--t-s);
}

.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 38px;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-s);
  color: var(--texte-doux);
  text-decoration: none;
  font-weight: 500;
}
.nav a:hover { background: var(--survol); color: var(--texte); }
.nav a[aria-current='page'] { background: var(--selection); color: var(--texte); }
.nav-compteur {
  margin-left: auto;
  min-width: 22px;
  padding: 0 var(--e-2);
  border-radius: 999px;
  background: var(--rouge-fond);
  color: var(--rouge-texte);
  font-size: var(--t-xs);
  font-weight: 600;
  text-align: center;
}

.nav-mobile { display: none; }

.barre-pied {
  margin-top: auto;
  display: grid;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-2) 0;
  border-top: 1px solid var(--filet);
}
/* Formule commerciale de la démonstration : discrète, au-dessus du prénom. */
.formule { display: block; margin-bottom: var(--e-2); color: var(--texte-doux); font-size: var(--t-xs); font-weight: 550; letter-spacing: 0.02em; }
.barre-utilisateur { font-weight: 600; padding: 0 var(--e-1); }
.barre-pied form { margin: 0; }

.vue {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: var(--e-2) var(--e-2) var(--e-2) 0;
  background: var(--contenu);
  border: 1px solid var(--filet);
  border-radius: var(--r-l);
}

.vue-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3) var(--e-5);
  padding: var(--e-5) var(--e-6) var(--e-4);
  border-bottom: 1px solid var(--filet);
}
.vue-soustitre { margin: var(--e-1) 0 0; color: var(--texte-doux); }
.vue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }

.vue-corps {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.vue-avec-panneau .vue-corps { grid-template-columns: minmax(0, 1fr) var(--panneau-largeur); }
.vue-principal { min-width: 0; padding: var(--e-5) var(--e-6) var(--e-7); }

.panneau {
  padding: var(--e-5);
  background: var(--panneau);
  border-left: 1px solid var(--filet);
  border-bottom-right-radius: var(--r-l);
}

.titre-section {
  margin-bottom: var(--e-3);
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--texte-doux);
  letter-spacing: 0;
  font-variation-settings: normal;
}

/* ---------- Boutons et champs ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 38px;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-s);
  background: var(--panneau);
  color: var(--texte);
  font: inherit;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { background: var(--survol); }
.bouton-principal { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.bouton-principal:hover { background: var(--accent-survol); border-color: var(--accent-survol); }
.bouton-discret { border-color: transparent; background: transparent; color: var(--texte-doux); padding-inline: var(--e-2); justify-content: flex-start; }
.bouton-discret:hover { color: var(--texte); }
.bouton-large { width: 100%; min-height: var(--cible-tactile); }
.bouton[disabled] { cursor: not-allowed; color: var(--texte-desactive); background: var(--survol); border-color: var(--filet); filter: none; }

.champ { display: grid; gap: var(--e-1); margin-bottom: var(--e-4); }
.champ label { font-weight: 550; }
.champ .aide { color: var(--texte-doux); font-size: var(--t-s); }
.champ .erreur { color: var(--rouge-texte); font-size: var(--t-s); font-weight: 550; }
input, select, textarea {
  width: 100%;
  min-height: 40px;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-s);
  background: var(--panneau);
  color: var(--texte);
  font: inherit;
}
textarea { min-height: 96px; resize: vertical; }
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--rouge); }

/* ---------- Messages, états, tuiles ---------- */

.message { padding: var(--e-3) var(--e-4); border-radius: var(--r-s); background: var(--accent-doux); color: var(--texte); }
.message-erreur { background: var(--rouge-fond); color: var(--rouge-texte); }
.message-attention { background: var(--orange-fond); color: var(--orange-texte); }
.message-succes { background: var(--vert-fond); color: var(--vert-texte); }

.etat-vide {
  max-width: 440px;
  margin: var(--e-7) auto;
  text-align: center;
  color: var(--texte-doux);
}
.etat-vide h2 { color: var(--texte); margin-bottom: var(--e-2); }

.tuiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--e-3);
}
.tuile {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-4);
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  background: var(--panneau);
}
.tuile-etape { display: flex; align-items: center; gap: var(--e-2); color: var(--texte-doux); font-size: var(--t-s); font-weight: 550; }
.tuile-nombre { font-size: var(--t-xxl); font-weight: 650; font-variation-settings: 'opsz' 32; letter-spacing: -0.02em; line-height: 1; }
.tuile-nulle .tuile-nombre { color: var(--texte-doux); }

/* Pastilles d'étape, discrètes : un point de couleur, toujours accompagné du texte. */
.pastille-etape { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--texte-desactive); }
.pastille-etape[data-etape='2'] { background: var(--etape-2); }
.pastille-etape[data-etape='3'] { background: var(--etape-3); }
.pastille-etape[data-etape='4'] { background: var(--etape-4); }
.pastille-etape[data-etape='5'] { background: var(--etape-5); }
.pastille-etape[data-etape='6'] { background: var(--etape-6); }
.pastille-etape[data-etape='7'] { background: var(--etape-7); }
.pastille-etape[data-etape='8'] { background: var(--etape-8); }
.pastille-etape[data-etape='9'] { background: var(--etape-9); }
.pastille-etape[data-etape='10'] { background: var(--etape-10); }

/* Délai : point + texte ; le rouge est réservé aux retards. */
.delai { display: inline-flex; align-items: center; gap: var(--e-1); padding: 1px var(--e-2); border-radius: 999px; font-size: var(--t-s); font-weight: 550; white-space: nowrap; flex: none; }
.delai::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.delai-vert { background: var(--vert-fond); color: var(--vert-texte); }
.delai-orange { background: var(--orange-fond); color: var(--orange-texte); }
.delai-rouge { background: var(--rouge-fond); color: var(--rouge-texte); }

/* ---------- Utilitaires ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
[hidden] { display: none !important; }
.sous-ligne { display: block; color: var(--texte-doux); font-size: var(--t-s); font-weight: 400; }
.lien-fort { color: var(--texte); font-weight: 600; text-decoration: none; }
.lien-fort:hover { text-decoration: underline; }
.requis { color: var(--texte-doux); }
.compteur {
  min-width: 22px;
  padding: 0 var(--e-2);
  border-radius: 999px;
  background: var(--survol);
  color: var(--texte-doux);
  font-size: var(--t-xs);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.texte-libre { white-space: pre-wrap; overflow-wrap: anywhere; }
.grand { font-size: var(--t-xl); font-weight: 650; margin: 0; }
.liste-simple { margin: 0; padding-left: var(--e-4); }
.action { color: var(--texte-doux); font-size: var(--t-s); }
.action-manquante { color: var(--orange-texte); font-size: var(--t-s); font-weight: 550; }
.statut {
  display: inline-flex;
  padding: 1px var(--e-2);
  border-radius: 999px;
  background: var(--survol);
  color: var(--texte-doux);
  font-size: var(--t-s);
  font-weight: 550;
}
.etiquette-etape { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 550; }

/* ---------- En-tête de vue : filtres, bascule d'affichage ---------- */

.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-bottom: var(--e-5); }
.filtres select { width: auto; min-width: 168px; }
.bascule { display: inline-flex; padding: 2px; border: 1px solid var(--filet-fort); border-radius: var(--r-s); background: var(--fond); }
.bascule a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--e-3);
  border-radius: 4px;
  color: var(--texte-doux);
  font-weight: 550;
  text-decoration: none;
}
.bascule a[aria-current] { background: var(--panneau); color: var(--texte); box-shadow: 0 1px 2px color-mix(in oklch, var(--ombre) 18%, transparent); }

/* ---------- Vue en colonnes ---------- */

.defile-colonnes { overflow-x: auto; margin: 0 calc(-1 * var(--e-6)); padding: 0 var(--e-6) var(--e-3); }
/* Barre de défilement toujours visible (sur Mac, elle est masquée par défaut : les étapes de droite passaient inaperçues). */
.defile-colonnes::-webkit-scrollbar { height: 12px; }
.defile-colonnes::-webkit-scrollbar-track { background: var(--filet); border-radius: 6px; }
.defile-colonnes::-webkit-scrollbar-thumb { background: var(--texte-doux); border-radius: 6px; }
.aide-defilement { margin: 0 0 var(--e-2); }
.colonnes { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e-3); align-items: flex-start; }
.colonne {
  flex: 0 0 236px;
  display: grid;
  gap: var(--e-2);
  padding: var(--e-3);
  border: 1px solid transparent;
  border-radius: var(--r-m);
  background: var(--fond);
}
.colonne.cible-ok { border-color: var(--accent-texte); background: var(--accent-doux); }
.colonne.cible-refus { border-color: var(--filet-fort); border-style: dashed; }
.colonne-titre { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-1) var(--e-1) var(--e-2); font-size: var(--t-s); font-variation-settings: normal; letter-spacing: 0; }
.colonne-titre .compteur { margin-left: auto; }
.colonne-vide { margin: 0; padding: var(--e-3) var(--e-2); color: var(--texte-doux); font-size: var(--t-s); }
.cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.carte-dossier {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-3);
  border: 1px solid var(--filet);
  border-radius: var(--r-s);
  background: var(--panneau);
  cursor: grab;
}
.carte-dossier:hover { border-color: var(--filet-fort); }
.carte-dossier.en-glisse { opacity: 0.5; }
.carte-lien { display: grid; color: var(--texte); text-decoration: none; }
.carte-lien:hover .carte-titre { text-decoration: underline; }
.carte-titre { font-weight: 600; }
.carte-ref, .carte-ligne { color: var(--texte-doux); font-size: var(--t-s); }

/* ---------- Vue en liste ---------- */

.groupe { margin-bottom: var(--e-6); }
.groupe-titre { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); font-size: var(--t-m); }
.defile { overflow-x: auto; max-width: 100%; position: relative; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th {
  padding: var(--e-2) var(--e-3);
  text-align: left;
  color: var(--texte-doux);
  font-size: var(--t-s);
  font-weight: 550;
  border-bottom: 1px solid var(--filet);
  white-space: nowrap;
}
.tableau td { padding: var(--e-3); border-bottom: 1px solid var(--filet); vertical-align: top; white-space: nowrap; }
.tableau td:first-child { white-space: normal; min-width: 180px; }
.tableau .montant { text-align: right; }
.tableau tbody tr:hover { background: var(--survol); }

/* ---------- Fiche dossier ---------- */

.actions-fiche { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5); }
.bande-etapes {
  list-style: none;
  margin: 0 0 var(--e-6);
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--e-1);
  position: relative;
}
.bande-etapes li {
  position: relative;
  padding: var(--e-2);
  border-top: 3px solid var(--filet);
  color: var(--texte-doux);
  font-size: var(--t-xs);
  font-weight: 550;
  /* Colonne étroite (fiche à 1 280 px) : « Rétroplanning » se coupe au lieu de déborder sur l'étape voisine. */
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.bande-etapes .fait { border-top-color: var(--texte-doux); }
.bande-etapes .courant { border-top-color: var(--accent-texte); background: var(--accent-doux); color: var(--texte); }
.bloc { margin-bottom: var(--e-6); }
.encart {
  margin-bottom: var(--e-5);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  background: var(--panneau);
}
.encart h2 { margin-bottom: var(--e-2); }
.encart-attention { background: var(--orange-fond); color: var(--orange-texte); border-color: transparent; }
.encart-attention .sous-ligne { color: inherit; }
.ligne-formulaire { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); }
.ligne-formulaire .champ { margin-bottom: 0; }
/* Fiche, bloc Mails : la liste des RDV et son bouton sur une ligne, Renoved sur la suivante. */
.mails-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-3); }
.mails-actions select { width: auto; max-width: 100%; }
.coordonnees, .grille-donnees, .proprietes { margin: 0; display: grid; gap: var(--e-3); }
.coordonnees, .grille-donnees { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
dt { color: var(--texte-doux); font-size: var(--t-s); }
dd { margin: 0; font-weight: 500; }
.proprietes > div { display: grid; gap: 2px; padding-bottom: var(--e-3); border-bottom: 1px solid var(--filet); }
.bouton-contact { min-height: var(--cible-tactile); }
.bouton-itineraire { margin-top: var(--e-2); }
.annuler-passage { margin: calc(-1 * var(--e-3)) 0 var(--e-4); text-align: right; }
.historique { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.historique li { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--e-3); }
.historique time { color: var(--texte-doux); font-size: var(--t-s); }

/* ---------- Formulaires ---------- */

.formulaire { max-width: 640px; }
.groupe-champs { margin: 0 0 var(--e-5); padding: 0; border: 0; }
.groupe-champs legend, .choix legend { margin-bottom: var(--e-3); font-weight: 600; }
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e-4); }
/* Civilité (courte) et nom côte à côte, même sur téléphone. */
.civilite-nom { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0 var(--e-3); align-items: end; }
.choix { border: 0; padding: 0; }
.option { display: flex; align-items: center; gap: var(--e-2); min-height: var(--cible-tactile); font-weight: 500; }
.option input { width: 20px; min-height: 20px; margin: 0; }
.option-bloc { align-items: flex-start; padding: var(--e-2) 0; }
.option-bloc input { margin-top: 3px; }
.actions-formulaire { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
.transition { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-bottom: var(--e-4); }
.message ul { margin: var(--e-2) 0 0; padding-left: var(--e-4); }
.message p { margin: 0; }
.message a { color: inherit; }

/* ---------- Recherche : champ de la barre latérale, fenêtre Cmd+K ---------- */

.recherche { position: relative; }
.recherche input { padding-right: 48px; background: var(--contenu); }
.raccourci {
  position: absolute;
  right: var(--e-2);
  top: 50%;
  transform: translateY(-50%);
  padding: 0 var(--e-1);
  border: 1px solid var(--filet-fort);
  border-radius: 4px;
  color: var(--texte-doux);
  font: inherit;
  font-size: var(--t-xs);
  pointer-events: none;
}
.palette {
  width: min(560px, calc(100vw - 2 * var(--e-4)));
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: var(--r-l);
  background: var(--fenetre);
  color: var(--texte);
  box-shadow: 0 24px 48px -16px color-mix(in oklch, var(--ombre) 35%, transparent);
}
.palette::backdrop { background: color-mix(in oklch, var(--ombre) 30%, transparent); }
.palette-formulaire { display: grid; }
.palette input { min-height: 52px; border: 0; border-bottom: 1px solid var(--filet); border-radius: 0; background: transparent; font-size: var(--t-l); padding: var(--e-3) var(--e-4); }
.palette input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-l) var(--r-l) 0 0; }
.palette-resultats { list-style: none; margin: 0; padding: var(--e-2); max-height: 50vh; overflow-y: auto; }
.palette-resultats:empty { display: none; }
.palette-resultats li { display: grid; padding: var(--e-2) var(--e-3); border-radius: var(--r-s); cursor: pointer; }
.palette-resultats li[aria-selected='true'] { background: var(--selection); }
.palette-aide { margin: 0; padding: var(--e-2) var(--e-4); border-top: 1px solid var(--filet); }

/* ---------- Activités, notes, barre d'actions sur téléphone ---------- */

.surtitre { display: block; color: var(--texte-doux); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.activites { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.activite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  background: var(--panneau);
}
.activite-prochaine { border-color: var(--filet-fort); box-shadow: inset 3px 0 0 var(--accent-texte); }
.activite-texte { display: grid; min-width: 0; }
.activite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); }
.activite-actions form { margin: 0; }
.faites { margin-top: var(--e-3); }
.faites summary { cursor: pointer; color: var(--texte-doux); font-weight: 550; min-height: var(--cible-tactile); display: flex; align-items: center; gap: var(--e-2); list-style: none; }
.faites summary::-webkit-details-marker { display: none; }
/* Triangle visible : le résumé se lit comme un élément qu'on ouvre. */
.faites summary::before { content: '▸'; font-size: 0.9em; transition: transform 120ms; }
.faites[open] summary::before { transform: rotate(90deg); }
.faites summary:hover { color: var(--texte); text-decoration: underline; }
.nouvelle-note { margin-bottom: var(--e-5); max-width: 640px; }
.nouvelle-note textarea { min-height: 72px; }
.historique-note > span { display: grid; gap: 2px; padding: var(--e-2) var(--e-3); border-radius: var(--r-s); background: var(--panneau); border: 1px solid var(--filet); }
.barre-mobile { display: none; }
.trois-colonnes { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 var(--e-4); }

/* ---------- Tableau de bord ---------- */

.chiffres { list-style: none; margin: 0 0 var(--e-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-3); }
.chiffre { display: grid; gap: var(--e-1); padding: var(--e-4); border: 1px solid var(--filet); border-radius: var(--r-m); background: var(--panneau); }
.chiffre-libelle { color: var(--texte-doux); font-size: var(--t-s); font-weight: 550; }
.chiffre-valeur { font-size: var(--t-xl); font-weight: 650; font-variation-settings: 'opsz' 32; font-variant-numeric: tabular-nums; }
.chiffre-alerte .chiffre-valeur { color: var(--rouge-texte); }
a.chiffre { color: inherit; text-decoration: none; height: 100%; }
a.chiffre:hover { border-color: var(--filet-fort); }
.grille-tableau { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-6); }
.panneau-tableau { padding: var(--e-4); border: 1px solid var(--filet); border-radius: var(--r-m); background: var(--panneau); min-width: 0; }
.panneau-tableau .titre-section { display: flex; align-items: center; gap: var(--e-2); }
.lignes { list-style: none; margin: 0; padding: 0; display: grid; }
.lignes li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) 0; border-top: 1px solid var(--filet); }
.lignes li:first-child { border-top: 0; }
.ligne-principale { display: grid; min-width: 0; }
.tuile-lien { display: grid; gap: var(--e-2); color: inherit; text-decoration: none; }
.tuile:hover { border-color: var(--filet-fort); }
.tuile-vide-retard { min-height: 22px; }

.vue-actions form { margin: 0; }
.filtres-entete { margin: 0; }
.grille-reglages { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 var(--e-4); }
input[type='color'] { padding: 2px; min-height: 40px; cursor: pointer; }
.tableau tfoot th, .tableau tfoot td { font-weight: 650; border-bottom: 0; }
.tableau .ligne-vide td { color: var(--texte-doux); }

.formulaire-mail { max-width: 760px; }
.formulaire-mail textarea { min-height: 320px; font-family: inherit; line-height: 1.6; }
.mail-lu { display: grid; gap: var(--e-3); margin: 0; max-width: 760px; }
.mail-lu dd { overflow-wrap: anywhere; min-width: 0; padding: var(--e-3) var(--e-4); background: var(--panneau); border: 1px solid var(--filet); border-radius: var(--r-s); }

/* ---------- Bandeau d'alerte (liaison Google à reconnecter) ---------- */

.bandeau-alerte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin: 0;
  padding: var(--e-3) var(--e-6);
  background: var(--rouge-fond);
  color: var(--rouge-texte);
  font-weight: 550;
  border-top-left-radius: var(--r-l);
  border-top-right-radius: var(--r-l);
}

/* ---------- Agenda de la semaine ---------- */

.semaine { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.jour-agenda { padding: var(--e-3) var(--e-4); border: 1px solid var(--filet); border-radius: var(--r-m); background: var(--panneau); }
.jour-agenda h2 { font-size: var(--t-m); margin-bottom: var(--e-2); display: flex; align-items: center; gap: var(--e-2); }
.jour-courant { border-color: var(--filet-fort); box-shadow: inset 3px 0 0 var(--accent-texte); }
.lignes .occupe { color: var(--texte-doux); }
/* Agenda : tâches repérables d'un coup d'œil, éléments faits en retrait. */
.etiquette-tache { display: inline-block; justify-self: start; width: max-content; padding: 0 var(--e-2); border: 1px solid var(--filet-fort); border-radius: var(--r-s); font-size: var(--t-xs); font-weight: 550; color: var(--texte-doux); }
.lignes .fait { color: var(--texte-doux); }
.cases { display: flex; flex-wrap: wrap; gap: 0 var(--e-4); }

/* ---------- Artisans et rétro par artisan (formule Pro) ---------- */

.titre-avec-action { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-3); }
.titre-avec-action .titre-section { margin: 0; }
.lignes-artisans .ligne-principale { display: grid; gap: 2px; }
.lignes-artisans .delai { justify-self: start; }
/* Rétro : due en orange (de l'argent à encaisser), payée en vert, prévue neutre. Le rouge reste aux retards. */
.statut-retro-due { background: var(--orange-fond); color: var(--orange-texte); }
.statut-retro-payee { background: var(--vert-fond); color: var(--vert-texte); }
.choix-multiple .cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--e-4); }
.libelle-fixe { margin: 0 0 var(--e-1); font-weight: 550; }
.formulaire-secondaire { margin-top: var(--e-4); }
.a-completer { color: var(--orange-texte); font-weight: 550; }
.a-completer-encart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.a-completer-encart h2, .a-completer-encart p { margin: 0; }
.formulaire-express { max-width: 480px; }
/* ---------- Documents et photos (formule Pro) ---------- */
.sous-titre-section { margin: var(--e-4) 0 var(--e-2); font-size: var(--t-s); font-weight: 600; color: var(--texte-doux); display: flex; align-items: center; gap: var(--e-2); }
.vignettes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--e-3); }
.vignette { display: grid; gap: 2px; align-content: start; }
.vignette img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--r-m); border: 1px solid var(--filet); background: var(--survol); }
.vignette-nom { font-size: var(--t-s); overflow-wrap: anywhere; }
.fichiers { list-style: none; margin: 0; padding: 0; display: grid; }
.fichiers .fichier { display: grid; gap: 2px; padding: var(--e-2) 0; border-top: 1px solid var(--filet); }
.fichiers .fichier:first-child { border-top: 0; }
.lien-discret { color: var(--texte-doux); font-size: var(--t-s); justify-self: start; }
.envoi-documents { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--filet); }
.envoi-documents input[type=file] { width: 100%; min-height: var(--cible-tactile); }
/* ---------- Ma journée (formule Pro), pensée pour le téléphone ---------- */
.journee-prochain { display: grid; gap: var(--e-2); }
.journee-prochain h2, .journee-prochain p { margin: 0; }
.journee-boutons { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.journee-boutons .bouton { min-height: var(--cible-tactile); }
.journee-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.journee-element { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) 0; border-top: 1px solid var(--filet); }
.journee-element:first-child { border-top: 0; }
.journee-courant { box-shadow: inset 3px 0 0 var(--accent-texte); padding-left: var(--e-3); }
.journee-lien { display: grid; gap: 2px; flex: 1; min-height: var(--cible-tactile); color: inherit; text-decoration: none; }
.journee-titre { font-weight: 600; }
.journee-quand { font-size: var(--t-s); }
/* ---------- Messages personnalisables (formule Pro) ---------- */
.message-editable { border-top: 1px solid var(--filet); padding: var(--e-3) 0; }
.message-editable summary { cursor: pointer; min-height: var(--cible-tactile); display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.message-editable textarea { min-height: 10rem; }
.apercu-message { margin-top: var(--e-3); padding: var(--e-3) var(--e-4); border: 1px dashed var(--filet-fort); border-radius: var(--r-m); background: var(--fond); }
.apercu-texte { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; margin: 0; }
.boutons-ligne { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; }

/* ---------- Page publique de réservation ---------- */

.page-publique { min-height: 100vh; padding: var(--e-5) var(--e-4); background: var(--fond); }
.public { width: min(720px, 100%); margin: 0 auto; display: grid; gap: var(--e-5); }
.public-entete .logo { padding: 0; }
.carte-publique { padding: var(--e-6); background: var(--panneau); border: 1px solid var(--filet); border-radius: var(--r-l); }
.carte-publique h1 { margin-bottom: var(--e-3); }
.jours { display: grid; gap: var(--e-4); margin-top: var(--e-4); }
.jour h2 { font-size: var(--t-m); margin-bottom: var(--e-2); }
.creneaux { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.bouton-creneau { min-width: 84px; min-height: var(--cible-tactile); font-variant-numeric: tabular-nums; }
.rdv-confirme { font-size: var(--t-l); }
.public-pied { color: var(--texte-doux); font-size: var(--t-s); }
.texte-long h2 { font-size: var(--t-m); margin: var(--e-5) 0 var(--e-2); }

/* ---------- Page seule (connexion, erreurs) ---------- */

.page-seule {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--e-4);
}
.carte-seule {
  width: min(420px, 100%);
  display: grid;
  gap: var(--e-4);
  padding: var(--e-6);
  background: var(--panneau);
  border: 1px solid var(--filet);
  border-radius: var(--r-l);
  box-shadow: 0 12px 32px -12px color-mix(in oklch, var(--ombre) 22%, transparent);
}
.carte-seule .logo { padding: 0; }
.carte-seule p { margin: 0; color: var(--texte-doux); }
.carte-seule .etat-vide { margin: 0; text-align: left; }
.signature { font-size: var(--t-xs); color: var(--texte-doux); }

/* ---------- Téléphone ---------- */

/* Résumé en haut de la fiche, actions du bas : téléphone seulement. */
.resume-fiche, .sur-telephone { display: none; }

@media (max-width: 760px) {
  .resume-fiche { display: grid; gap: var(--e-1); margin-bottom: var(--e-3); padding: var(--e-3); border: 1px solid var(--filet); border-radius: var(--r-m); background: var(--fond); }
  .resume-fiche p { margin: 0; }
  .resume-fiche .surtitre { display: block; }
  .resume-contact { display: flex; gap: var(--e-2); margin-top: var(--e-2) !important; }
  .resume-contact .bouton { flex: 1; min-height: var(--cible-tactile); justify-content: center; }
  /* La barre du bas propose déjà « Étape suivante » et « Planifier » ; perdu et modifier descendent en bas. */
  .actions-fiche .sur-ordinateur, .actions-fiche .action-secondaire { display: none; }
  .sur-telephone { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-5) 0; }
  .sur-telephone .bouton { min-height: var(--cible-tactile); }
  /* Cibles tactiles de 44 px partout (audit du 16/10 : boutons de 41 px, bascule de 32 px). */
  .bouton, .champ input, .champ select, .champ textarea, .filtres select, .bascule a { min-height: var(--cible-tactile); }
  .bascule a { display: inline-flex; align-items: center; }
  .journee-actions { display: flex; gap: var(--e-2); flex-wrap: wrap; }
  .vignette .bouton, .fichier .bouton { margin-top: var(--e-2); }
  /* L'en-tête garde sa hauteur sur une page courte ; le contenu prend le reste. */
  .cadre { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  /* « Note » de la barre du bas : le champ s'affiche sous l'en-tête collant, pas dessous. */
  .nouvelle-note { scroll-margin-top: 160px; }
  .barre {
    position: sticky;
    z-index: 5;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-4);
    border-bottom: 1px solid var(--filet);
  }
  .nav-bureau, .barre-pied { display: none; }
  .nav-mobile { display: block; }
  .nav-mobile summary {
    min-height: var(--cible-tactile);
    display: flex;
    align-items: center;
    padding: 0 var(--e-3);
    border: 1px solid var(--filet-fort);
    border-radius: var(--r-s);
    cursor: pointer;
    font-weight: 550;
  }
  .nav-mobile[open] { flex-basis: 100%; }
  .nav-mobile[open] summary { margin-left: auto; width: max-content; }
  .nav-mobile .nav { margin-top: var(--e-2); }
  .nav-mobile .nav a { min-height: var(--cible-tactile); }
  .vue { margin: 0; border: 0; border-radius: 0; }
  .vue-entete { padding: var(--e-4); }
  .vue-principal { padding: var(--e-4) var(--e-4) var(--e-7); }
  .vue-avec-panneau .vue-corps { grid-template-columns: minmax(0, 1fr); }
  .panneau { border-left: 0; border-top: 1px solid var(--filet); border-radius: 0; }
  .carte-seule { padding: var(--e-5); }
  .carte-publique { padding: var(--e-4); }
  .bandeau-alerte { padding: var(--e-3) var(--e-4); border-radius: 0; }
  .defile-colonnes { margin: 0 calc(-1 * var(--e-4)); padding: 0 var(--e-4) var(--e-3); }
  .colonne { flex-basis: 248px; }
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
  .historique li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .filtres select { flex: 1 1 140px; min-width: 0; }
  .actions-fiche .bouton, .mails-actions .bouton, .annuler-passage .bouton { min-height: var(--cible-tactile); }
  .bande-etapes { grid-auto-columns: minmax(92px, 1fr); overflow-x: auto; }
  .recherche { order: 3; flex-basis: 100%; }
  .raccourci { display: none; }
  .recherche input { padding-right: var(--e-3); }
  .trois-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trois-colonnes .champ:first-child { grid-column: 1 / -1; }
  .grille-tableau { grid-template-columns: minmax(0, 1fr); }
  /* Vue Liste sur téléphone : une carte par dossier (client, délai, prochaine action lisibles sans défiler). */
  .groupe .defile { overflow: visible; }
  .groupe .tableau, .groupe .tableau tbody, .groupe .tableau tr, .groupe .tableau td { display: block; width: auto; }
  .groupe .tableau thead { display: none; }
  .groupe .tableau tr { padding: var(--e-3) 0; border-bottom: 1px solid var(--filet); }
  .groupe .tableau td { border: 0; padding: 2px 0; text-align: left; }
  .groupe .tableau td, .groupe .tableau td * { white-space: normal; overflow-wrap: anywhere; }
  .groupe .tableau td:nth-child(2), .groupe .tableau td:nth-child(3) { color: var(--texte-doux); font-size: var(--t-s); }
  /* Rétro sur téléphone : les colonnes secondaires se retirent, les montants de rétro restent visibles. */
  .t-mois :is(th, td):nth-child(2), .t-mois :is(th, td):nth-child(3),
  .t-apporteurs :is(th, td):nth-child(2), .t-apporteurs :is(th, td):nth-child(4),
  .t-dossiers :is(th, td):nth-child(2), .t-dossiers :is(th, td):nth-child(3), .t-dossiers :is(th, td):nth-child(4), .t-dossiers :is(th, td):nth-child(5),
  .t-paiements :is(th, td):nth-child(2), .t-paiements :is(th, td):nth-child(3) { display: none; }
  .t-app-liste :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(6)),
  .t-app-dossiers :is(th, td):is(:nth-child(2), :nth-child(4), :nth-child(5)),
  .t-artisans :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4)),
  .t-artisan-lignes :is(th, td):is(:nth-child(2), :nth-child(4)) { display: none; }
  /* Tous les tableaux : tiennent dans la largeur (texte qui revient à la ligne, marges réduites, chiffres un peu
     plus petits) ; rien à faire glisser. */
  .tableau { width: 100%; }
  .tableau :is(th, td) { white-space: normal; overflow-wrap: anywhere; padding-left: var(--e-2); padding-right: var(--e-2); font-size: var(--t-s); }
  .tableau .delai { white-space: normal; flex: initial; border-radius: var(--r-s); }
  /* Cibles tactiles : liens des listes et champs de 44 px. */
  .tableau td a, .lignes a:not(.bouton), .ligne-principale a:not(.bouton), .liste-simple a, .lien-fiche-client a,
  .coordonnees a, main dd a:not(.bouton), .fichier a:not(.bouton), .vignette a:not(.bouton), main p.sous-ligne > a,
  .semaine a:not(.bouton) { display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
  /* Agenda : boutons de semaine sur une ligne. */
  .bascule a { white-space: nowrap; font-size: var(--t-s); padding-left: var(--e-2); padding-right: var(--e-2); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: var(--cible-tactile); }
  /* Compteurs du tableau de bord deux par ligne : « Aujourd'hui » reste dans le premier écran. */
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lignes li { flex-wrap: wrap; }
  .vue-avec-panneau { padding-bottom: 80px; }
  .barre-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3) calc(var(--e-2) + env(safe-area-inset-bottom));
    background: var(--fenetre);
    border-top: 1px solid var(--filet-fort);
  }
  .barre-mobile .bouton { min-height: var(--cible-tactile); padding-inline: var(--e-2); }
  .actions-fiche .bouton { flex: 1 1 100%; }
  /* Bouton dans un formulaire (« J’ai appelé le client ») : même largeur que les liens voisins. */
  .actions-fiche > form { flex: 1 1 100%; }
  .actions-fiche > form .bouton { width: 100%; }
}

/* Page « Les extensions » : une couleur par bloc (bordure et pastille seulement, le texte reste neutre). */
.extensions-petites { --couleur-bloc: oklch(62.7% 0.170 149.2); }
.extensions-moyennes { --couleur-bloc: oklch(74.4% 0.132 218.2); }
.extensions-grandes { --couleur-bloc: oklch(72.8% 0.138 89.7); }
.extensions-bloc { border-left: 4px solid var(--couleur-bloc); padding-left: var(--e-4); }
.extensions-entete { margin: 0 0 var(--e-3); }
.extensions-titre { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); margin: 0; }
.extensions-remise { margin: var(--e-1) 0 0; text-align: right; font-size: var(--t-s); color: var(--texte-doux); }
.extensions-pastille { width: 12px; height: 12px; border-radius: 50%; background: var(--couleur-bloc); flex: none; }
.extensions-prix { margin-left: auto; font-size: var(--t-s); font-weight: 550; color: var(--texte-doux); }
.extensions-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.extension { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4); background: var(--panneau); border: 1px solid var(--filet); border-radius: var(--r-m, 8px); }
.extension-nom { margin: 0; font-size: var(--t-m, 1rem); }
.extension-texte { margin: 0; flex: 1; color: var(--texte-doux); }
.extension-badge { margin: 0; align-self: flex-start; padding: 2px var(--e-2); border: 1px solid var(--filet); border-radius: 999px; font-size: var(--t-s); font-weight: 550; }
.extension-detail summary { cursor: pointer; display: inline-flex; align-items: center; min-height: var(--cible-tactile); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.extension-detail p { margin: 0 0 var(--e-2); }
.extension .bouton { align-self: flex-start; }
.extensions-pied { margin: 0 0 var(--e-2); color: var(--texte-doux); }
@media (max-width: 640px) {
  .extensions-liste { grid-template-columns: 1fr; }
  .extensions-prix { margin-left: 0; flex-basis: 100%; }
  .extensions-remise { text-align: left; }
  .extension .bouton { align-self: stretch; justify-content: center; }
}

/* Pages de présentation publiques (accueil sans connexion, confidentialité) : une colonne lisible, logo Naxoria. */
.page-vitrine { background: var(--fond); }
.vitrine { max-width: 46rem; margin: 0 auto; padding: var(--e-6) var(--e-4); }
.vitrine-entete { margin-bottom: var(--e-5); }
.vitrine-entete img { display: block; height: 40px; width: auto; }
.vitrine-carte { padding: var(--e-6); background: var(--panneau); border: 1px solid var(--filet); border-radius: var(--r-l); }
.vitrine-carte h2 { margin-top: var(--e-5); }
.vitrine-points { padding-left: var(--e-5); }
.vitrine-actions { margin: var(--e-5) 0 var(--e-3); }
.vitrine-identite { display: grid; grid-template-columns: max-content 1fr; gap: var(--e-1) var(--e-4); margin: var(--e-4) 0; }
.vitrine-identite dt { color: var(--texte-doux); }
.vitrine-pied { margin-top: var(--e-5); text-align: center; color: var(--texte-doux); font-size: var(--t-s); }
@media (max-width: 640px) {
  .vitrine-carte { padding: var(--e-4); }
  .vitrine-actions .bouton { width: 100%; justify-content: center; }
}

.liens-legaux { margin-top: var(--e-1); }
.public-pied .liens-legaux, .vitrine-pied .liens-legaux { font-size: var(--t-s); }

/* Couleurs de Bati via et associés (outil, après connexion) : le doré de la marque, en accent décoratif seulement
   (repère de la page active, liseré sous l'en-tête). Jamais pour du texte : contraste insuffisant sur fond clair. */
:root { --or-marque: oklch(73.7% 0.101 82.7); }
.nav a[aria-current='page'] { box-shadow: inset 3px 0 0 var(--or-marque); }
.cadre .vue-entete { border-bottom: 2px solid var(--or-marque); }

/* Logo de l'agence (Bâti Via et Associés) : version sur fond clair, ou sur fond foncé en thème sombre. */
.logo-agence { display: flex; align-items: center; }
.logo-agence img { display: block; width: 100%; max-width: 190px; height: auto; }
.public-entete .logo-agence img { max-width: 220px; }
.logo-agence-fonce { display: none !important; }
[data-theme="sombre"] .logo-agence-clair { display: none !important; }
[data-theme="sombre"] .logo-agence-fonce { display: block !important; }
@media (prefers-color-scheme: dark) {
  [data-theme="systeme"] .logo-agence-clair { display: none !important; }
  [data-theme="systeme"] .logo-agence-fonce { display: block !important; }
}