/* MC Business : base et composants existants (porte, connexion, administration). Téléphone d'abord : une colonne,
   gouttière 16 px, cibles >= 44 px. Couleurs, tailles, espaces et rayons uniquement par les jetons de charte.css ;
   nouveaux composants (pastilles, ronds d'action, barre basse, feuille du bas) dans composants.css. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;min-height:100%}
body{font-family:var(--font-body);background:var(--surface) var(--surface-grain) fixed;color:var(--text);font-size:var(--fs-16);line-height:1.45;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:contain}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-weight:700;color:var(--text-strong);margin:0;letter-spacing:-.01em}
/* Titres de page : condensée en capitales. Jamais sur une phrase ni sur un intertitre. */
.titre-page,.ecran-titre{font-family:var(--font-display);line-height:1.1;letter-spacing:.02em;text-transform:uppercase}
a{color:var(--lien)}
:focus-visible,.demo-focus{outline:2px solid var(--focus);outline-offset:2px}
#app{min-height:100vh}

/* Boutons : secondaire (.btn), principal, lien, petit. */
.btn{display:flex;align-items:center;justify-content:center;gap:var(--esp-2);width:100%;min-height:var(--cible);
  padding:var(--esp-2) var(--esp-4);border:1px solid var(--rule-control);border-radius:var(--rayon-carte);
  background:var(--surface-raised);color:var(--text);font-weight:600;text-decoration:none}
.btn:active{background:var(--surface-sunken)}
.btn:disabled{opacity:.5;cursor:default}
.btn-primaire{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
.btn-primaire:active{background:var(--accent-presse);border-color:var(--accent-presse)}
.btn-lien{border-color:transparent;background:none;color:var(--lien);text-decoration:underline;font-weight:600}
.btn-lien:active{background:none}
.btn-petit{width:auto;min-height:var(--cible);padding:var(--esp-2) var(--esp-4);font-size:var(--fs-15)}

/* Cartes ; écrans de connexion et de porte : bandeau de marque, carte posée dessus. */
.carte{width:100%;background:var(--surface-raised);border:1px solid var(--bord-carte);border-radius:var(--rayon-carte);
  padding:var(--esp-4);box-shadow:var(--ombre-carte)}
.ecran{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + var(--esp-6)) var(--esp-4) calc(env(safe-area-inset-bottom) + var(--esp-6));
  background:linear-gradient(var(--marque) 0 42%, var(--surface) 42% 100%)}
.ecran .carte{max-width:380px;padding:var(--esp-6) var(--esp-4);border:0;border-radius:var(--rayon-feuille);
  box-shadow:var(--ombre-haute)}
.ecran-titre{font-size:var(--fs-24);margin-bottom:var(--esp-4)}
.carte p{margin:0 0 var(--esp-3);color:var(--text-secondary)}
.texte-erreur{color:var(--danger)}
.attente{padding:var(--esp-3) var(--esp-4);border-radius:var(--rayon-champ);background:var(--warn-soft);
  border:1px solid var(--warn-soft-rule);border-left:4px solid var(--warn);font-size:var(--fs-19);font-weight:700;
  line-height:1.3;color:var(--text-strong)!important}
.qr{text-align:center;margin:var(--esp-3) 0}
.qr img{width:190px;height:190px;background:var(--surface-raised);border-radius:var(--rayon-champ)}
.secret{font-family:var(--font-mono);font-size:var(--fs-14);text-align:center;word-break:break-all;color:var(--text-muted)}
.ecran-actions{display:flex;flex-direction:column;gap:var(--esp-2);margin-top:var(--esp-4)}

/* Champs : libellé au-dessus, bordure de contrôle, erreur en rouge. */
.champ{display:block;margin:0 0 var(--esp-4)}
.champ[hidden]{display:none}
.champ .case input{min-height:0;padding:0;border:0}
.champ span{display:block;font-size:var(--fs-14);font-weight:600;color:var(--text-secondary);margin-bottom:var(--esp-1)}
.champ input,.champ textarea,.champ-code,.choix,.champ select,.recherche{width:100%;min-height:var(--cible);
  padding:var(--esp-2) var(--esp-3);border:1px solid var(--rule-control);border-radius:var(--rayon-champ);
  background:var(--surface-raised);outline:none}
.champ textarea{resize:vertical}
.champ input:focus,.champ textarea:focus,.champ-code:focus,.choix:focus,.champ select:focus,.recherche:focus{border-color:var(--focus);
  outline:2px solid var(--focus);outline-offset:-1px}
.champ input:disabled{background:var(--surface-sunken);color:var(--text-muted)}
.champ-erreur input,.champ-erreur select{border-color:var(--danger)}
.champ-erreur em{display:block;margin-top:var(--esp-1);font-style:normal;font-size:var(--fs-14);color:var(--danger)}
.champ-code{margin-top:var(--esp-3);font-family:var(--font-mono);font-size:var(--fs-24);letter-spacing:6px;text-align:center}

/* En-tête coloré, logotype, vue. */
.entete{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--esp-2);min-height:56px;
  padding:calc(env(safe-area-inset-top) + var(--esp-2)) var(--esp-4) var(--esp-2);background:var(--marque);
  color:var(--sur-marque)}
.entete-app{display:flex;align-items:center;gap:var(--esp-2);color:inherit;text-decoration:none;font-weight:700;
  font-family:var(--font-display);font-size:var(--fs-24);line-height:1;letter-spacing:.02em}
.logo{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--rayon-champ);
  border:2px solid var(--sur-marque);font-size:var(--fs-16);font-weight:700;letter-spacing:0}
.entete-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;
  color:var(--sur-marque-discret);font-size:var(--fs-15)}
.btn-entete{width:auto;flex:none;min-width:var(--cible);min-height:var(--cible);background:none;border-color:var(--sur-marque-discret);
  color:var(--sur-marque);font-size:var(--fs-15)}
.btn-entete:active{background:var(--marque-fonce)}
.btn-entete-picto{position:relative;padding:var(--esp-2)}
.pastille-entete{position:absolute;top:-6px;right:-6px;display:flex;align-items:center;justify-content:center;min-width:20px;
  height:20px;padding:0 var(--esp-1);border-radius:var(--rayon-plein);background:var(--danger);color:var(--blanc);
  font-size:var(--fs-12);font-weight:700;line-height:1}
.pastille-entete[hidden]{display:none}
.vue{max-width:640px;margin:0 auto;padding:var(--esp-4) var(--esp-4) calc(env(safe-area-inset-bottom) + var(--esp-6))}
.titre-page{font-size:var(--fs-24);margin-bottom:var(--esp-3)}
.vide{color:var(--text-muted);margin:0 0 var(--esp-4)}

/* Messages */
#toasts{position:fixed;left:var(--esp-4);right:var(--esp-4);bottom:calc(env(safe-area-inset-bottom) + var(--esp-4));
  z-index:1000;display:flex;flex-direction:column;gap:var(--esp-2);pointer-events:none}
.toast{padding:var(--esp-3) var(--esp-4);border-radius:var(--rayon-carte);background:var(--text-strong);
  color:var(--surface-raised);box-shadow:var(--ombre-haute);font-size:var(--fs-15);font-weight:500}
.toast-erreur{background:var(--danger-soft);border:1px solid var(--danger-soft-rule);color:var(--danger)}
.toast-ok{background:var(--success-soft);border:1px solid var(--success-soft-rule);color:var(--success)}

/* Dialogue (demander) */
.dialogue-fond{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;
  padding:var(--esp-4);background:var(--scrim-solid);background:var(--scrim-mid)}
.dialogue{width:100%;max-width:380px;background:var(--surface-raised);border-radius:var(--rayon-feuille);
  padding:var(--esp-5) var(--esp-4) var(--esp-4);box-shadow:var(--ombre-haute)}
.dialogue h2{font-size:var(--fs-19);margin-bottom:var(--esp-2)}
.dialogue p{margin:0 0 var(--esp-2);color:var(--text-secondary)}
.dialogue-actions{display:flex;gap:var(--esp-2);margin-top:var(--esp-4)}
.dialogue-actions .btn{flex:1}

/* Onglets : puces défilantes, l'actif à la couleur de marque. */
.onglets{display:flex;gap:var(--esp-2);overflow-x:auto;margin:0 calc(-1 * var(--esp-4)) var(--esp-4);
  padding:0 var(--esp-4);scrollbar-width:none}
.onglet{flex:none;min-height:var(--cible);display:flex;align-items:center;padding:0 var(--esp-4);border-radius:var(--rayon-plein);
  border:1px solid var(--bord-carte);background:var(--surface-raised);color:var(--text-secondary);text-decoration:none;
  font-weight:600;font-size:var(--fs-15)}
.onglets-retour{flex-wrap:wrap;overflow-x:visible}
/* Rangée qui défile : fondu au bord droit, la dernière puce sort du fondu en fin de course. */
.onglets:not(.onglets-retour,.onglets-grille){padding-right:var(--esp-8);
  mask-image:linear-gradient(to right,var(--text) calc(100% - var(--esp-8)),transparent)}
.onglet.actif,.onglet[aria-pressed="true"]{background:var(--marque);border-color:var(--marque);color:var(--sur-marque)}
/* Administration : six onglets sur deux rangs, tous visibles ; la pastille dit ce qui attend. */
.onglets-grille{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0 0 var(--esp-4);padding:0}
.onglets-grille .onglet{position:relative;justify-content:center;padding:0 var(--esp-1);font-size:var(--fs-14)}
.pastille-onglet{position:absolute;top:-6px;right:-4px;display:flex;align-items:center;justify-content:center;min-width:20px;
  height:20px;padding:0 var(--esp-1);border-radius:var(--rayon-plein);background:var(--danger);color:var(--blanc);
  font-size:var(--fs-12);font-weight:700;line-height:1}

/* Listes et lignes ; écrans d'administration. */
.titre-section{font-size:var(--fs-19);margin:var(--esp-5) 0 var(--esp-2)}
.compte{font-weight:600;color:var(--text-secondary);margin:0 0 var(--esp-3)}
.barre-outils{display:flex;gap:var(--esp-2);margin-bottom:var(--esp-3)}
.recherche{flex:1;min-width:0}
.ligne{display:flex;align-items:center;gap:var(--esp-3);width:100%;min-height:var(--cible);padding:var(--esp-3);
  margin:0 0 var(--esp-2);text-align:left;border:1px solid var(--bord-carte);border-radius:var(--rayon-carte);
  background:var(--surface-raised);box-shadow:var(--ombre-carte)}
button.ligne:active{background:var(--surface-sunken)}
.ligne-pile{flex-direction:column;align-items:stretch}
.ligne-texte{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ligne-texte strong{font-weight:600}
.ligne-texte span,.bloc span,.detail{font-size:var(--fs-14);color:var(--text-muted);overflow-wrap:anywhere}
.ligne-actions{display:flex;gap:var(--esp-2);justify-content:flex-end}
.ligne-saisie{display:flex;flex-wrap:wrap;gap:0 var(--esp-3);align-items:center}
.ligne-saisie .champ{flex:1 1 100%;min-width:0;margin:0}
.ligne-saisie .choix{flex:1;min-width:0}
.ligne-saisie .case{margin:0}
.fiche{padding:var(--esp-3);margin:0 0 var(--esp-3);border:1px solid var(--rule-strong);border-radius:var(--rayon-carte);
  background:var(--surface-sunken)}
.fiche-ligne .champ{margin-bottom:var(--esp-3)}
.mentions{display:flex;flex-wrap:wrap;gap:var(--esp-2);margin-bottom:var(--esp-3)}
.case{display:flex;align-items:center;gap:var(--esp-2);width:100%;min-height:var(--cible);margin-bottom:var(--esp-2);cursor:pointer}
.case input,.carte-lot input{width:22px;height:22px;flex:none;accent-color:var(--marque)}
.carte-lot{display:flex;gap:var(--esp-3);align-items:flex-start;padding:var(--esp-3);margin:0 0 var(--esp-2);
  border:1px solid var(--bord-carte);border-radius:var(--rayon-carte);background:var(--surface-raised);box-shadow:var(--ombre-carte)}
.carte-lot-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--esp-2)}
.bloc{display:flex;flex-direction:column;padding-left:var(--esp-2);border-left:3px solid var(--rule-strong)}
.bloc-propose{border-left-color:var(--info)}
.ferme{color:var(--danger);font-style:normal;font-weight:600}
.barre-lot{position:sticky;bottom:calc(env(safe-area-inset-bottom) + var(--esp-2));margin-top:var(--esp-3)}

/* Coque de l'application : la vue laisse la place de la barre basse ; les messages passent au-dessus. */
.vue:has(+ .barre-basse){padding-bottom:calc(env(safe-area-inset-bottom) + var(--plus) + var(--esp-8))}
body:has(.barre-basse) #toasts{bottom:calc(env(safe-area-inset-bottom) + var(--plus) + var(--esp-4))}

/* Portefeuille et « Ma journée » : recherche, filtres, lignes client (nom, métiers · dernière vente | CA, évolution). */
.vue > .recherche{margin-bottom:var(--esp-2)}
.filtres{display:flex;flex-wrap:wrap;gap:var(--esp-2);margin-bottom:var(--esp-3)}
.filtres .choix{flex:1 1 10rem;min-width:0}
.ligne-client{color:inherit;text-decoration:none}
.ligne-client:active{background:var(--surface-sunken)}
.ligne-chiffres{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ligne-chiffres .pastille{align-self:flex-end}

/* Fiche client : tête, cartes de relation (chiffre principal, statistiques, articles), sections, notes. */
.retour{display:inline-flex;align-items:center;min-height:var(--cible);margin-top:calc(-1 * var(--esp-2));
  color:var(--lien);font-weight:600;text-decoration:none}
.retour::before{content:'‹';margin-right:var(--esp-1);font-size:var(--fs-24);line-height:1}
.adresse{display:block;margin:0 0 var(--esp-4);color:var(--text-secondary);text-decoration:none}
.fiche-client .ronds{margin-bottom:var(--esp-5)}
/* 320 px : six ronds sur deux rangs de trois, taille pleine. */
@media (max-width:359px){
  .fiche-client .ronds,.sq-fiche .ronds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--esp-3) var(--esp-2)}
}
.relation{margin-bottom:var(--esp-3)}
.relation-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.relation .detail{margin:0}
.relation .libelle-ca{margin-top:var(--esp-3)}
.chiffre-principal{display:flex;align-items:center;gap:var(--esp-2);margin:0 0 var(--esp-3);font-size:var(--fs-30);
  font-weight:700;color:var(--text-strong)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-3) var(--esp-4);margin:0 0 var(--esp-3)}
.stats dt{font-size:var(--fs-14);color:var(--text-muted)}
.stats dd{margin:0;font-weight:600}
.stats div{position:relative}
.stat-lien{display:inline-flex;align-items:center;color:var(--lien);text-decoration:none}
.stat-lien::before{content:'›';order:1;margin-left:var(--esp-1);font-size:var(--fs-24);font-weight:400;line-height:.8} /* chevron après le chiffre */
.stat-lien::after{content:'';position:absolute;inset:calc(-1 * var(--esp-2)) 0} /* toute la case se touche */
/* Bilan : CA du mois, graphique des 12 mois (barres N-1 puis N ; un mois inconnu n'a pas de barre). */
.bilan .chiffre-principal{margin-bottom:var(--esp-1)}
.resume-fiche{margin:var(--esp-4) 0 var(--esp-2)}
.resume-fiche .chiffre-principal{margin-bottom:var(--esp-1)}
.graphique{display:block;width:100%;height:auto;margin-top:var(--esp-4)}
.graphique .barre-n{fill:var(--marque)}
.graphique .barre-n1{fill:var(--barre-n1)}
.graphique .courbe-reel{fill:none;stroke:var(--marque);stroke-width:2.5}
.graphique .courbe-objectif{fill:none;stroke:var(--barre-n1);stroke-width:2;stroke-dasharray:4 4}
.graphique text{fill:var(--text-muted);font-size:.8125rem;font-weight:600;text-anchor:middle}
.carte .legende{display:flex;align-items:center;gap:var(--esp-2);margin:var(--esp-3) 0 0;font-size:var(--fs-14);color:var(--text-muted)}
.objectifs{margin:0 0 var(--esp-3)}
.objectifs div{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:var(--esp-3);padding:var(--esp-2) 0}
.objectifs dd{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-weight:600}
.objectifs .ecart{font-size:var(--fs-14);font-weight:400;color:var(--text-muted)}
.reussite .pastille{margin-left:var(--esp-2)}
.cle{display:inline-block;width:10px;height:10px;border-radius:2px}
.cle-n{background:var(--marque)}
.cle-n1{background:var(--barre-n1);margin-left:var(--esp-2)}
.titre-articles{font-size:var(--fs-15);margin:var(--esp-4) 0 var(--esp-2)}
.articles{list-style:none;margin:0 0 var(--esp-3);padding:0}
.articles li{display:flex;justify-content:space-between;gap:var(--esp-3);padding:var(--esp-2) 0;
  border-bottom:1px solid var(--rule);font-size:var(--fs-15)}
.achats li{flex-wrap:wrap;row-gap:0}
.achats li .detail{flex-basis:100%;margin:0}
.lien-achats{display:inline-flex;align-items:center;min-height:var(--cible);font-weight:600}
.section-fiche{margin-top:var(--esp-5)}
.titre-ligne{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);margin-bottom:var(--esp-2)}
.titre-ligne .titre-section,.titre-ligne .titre-page{margin:0}
.titre-ligne>.titre-page:first-child:not(:nth-last-child(2)){margin-right:auto}
.ligne-simple{display:flex;justify-content:space-between;gap:var(--esp-3);margin:0;padding:var(--esp-2) 0;
  border-bottom:1px solid var(--rule)}
.possibles{display:flex;flex-wrap:wrap;gap:var(--esp-1)}
.ligne-simple strong{flex:1}
.ligne-simple span{color:var(--text-secondary)}
.contact{padding:var(--esp-2) var(--esp-3)}
.contact-nom{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;min-height:var(--cible);
  justify-content:center;padding:0;border:0;background:none;text-align:left}
.contact-nom span{font-size:var(--fs-14);color:var(--text-muted)}
.note{padding:var(--esp-3) 0;border-bottom:1px solid var(--rule)}
.note-tete{display:flex;align-items:center;gap:var(--esp-2);margin:0 0 var(--esp-1);font-size:var(--fs-14);
  color:var(--text-muted)}
.note-texte{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.note-photos{display:flex;flex-wrap:wrap;gap:var(--esp-2);margin:var(--esp-2) 0}
.note-photos:empty{display:none}
.vignette{width:72px;height:72px;padding:0;border:1px solid var(--rule);border-radius:var(--rayon-champ);overflow:hidden;
  background:none}
.vignette img{display:block;width:100%;height:100%;object-fit:cover}
.photo-grande{display:block;width:100%;height:auto;border-radius:var(--rayon-champ)}
.btn-danger{color:var(--danger)}
a.feuille-choix{color:var(--text);text-decoration:none}

/* Carte : la carte en tête, la liste de la zone dessous (à côté sur grand écran) ; points et grappes aux couleurs
   de la charte (MarkerCluster.Default.css n'est pas repris). */
.vue-carte{max-width:1100px}
.filtres .btn{flex:none;width:auto}
.carte-zone{height:62vh;min-height:280px;margin-bottom:var(--esp-3);border:1px solid var(--rule);
  border-radius:var(--rayon-carte);overflow:hidden;background:var(--surface-sunken)}
@media (min-width:900px){
  .carte-et-liste{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--esp-4);align-items:start}
  .carte-zone{height:calc(100vh - 220px);margin-bottom:0;position:sticky;top:var(--esp-4)}
}
.carte-zone .leaflet-container{font-family:var(--font-body)}
.leaflet-marker-icon.point-carte{border:2px solid var(--surface-raised);border-radius:var(--rayon-plein);background:var(--marque);
  box-shadow:var(--ombre-carte)}
/* Prospect en cours : losange ; établissement de l'annuaire : rond creux, estompé s'il est déjà client ou suivi. */
/* Le losange tourne à l'intérieur : tourner le marqueur ferait tourner aussi le translate3d de Leaflet. */
.point-prospect i{display:block;width:100%;height:100%;box-sizing:border-box;border:2px solid var(--surface-raised);
  border-radius:2px;background:var(--accent);rotate:45deg;box-shadow:var(--ombre-carte)}
.leaflet-marker-icon.point-annuaire{border:3px solid var(--info);border-radius:var(--rayon-plein);
  background:var(--surface-raised);box-shadow:var(--ombre-carte)}
.leaflet-marker-icon.point-pris{border-color:var(--text-muted);opacity:.7}
.bulle-annuaire{min-width:220px}
.bulle-annuaire .ligne{border:0;padding:0;margin:0;box-shadow:none;background:none}
.titre-ligne .compte{margin:0}
.titre-ligne[hidden]{display:none}
.leaflet-marker-icon.ma-position{border:3px solid var(--surface-raised);border-radius:var(--rayon-plein);background:var(--info);
  box-shadow:var(--ombre-haute)}
.leaflet-marker-icon.grappe{display:flex;align-items:center;justify-content:center;border:3px solid var(--surface-raised);
  border-radius:var(--rayon-plein);background:var(--marque);color:var(--sur-marque);font-size:var(--fs-13);
  font-weight:700;box-shadow:var(--ombre-carte)}
.leaflet-marker-icon.point-visite{display:flex;align-items:center;justify-content:center;border:2px solid var(--surface-raised);
  border-radius:var(--rayon-plein);background:var(--info);color:var(--surface-raised);font-size:var(--fs-13);
  font-weight:700;box-shadow:var(--ombre-carte)}
.bulle-lien{display:block;min-height:var(--cible);line-height:var(--cible);color:var(--lien);font-size:var(--fs-15);
  font-weight:600;text-decoration:none}

/* Bandeau d'état (hors ligne, en attente, refusées) sous l'en-tête ; liste des saisies refusées. */
.bandeau{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-1) var(--esp-3);padding:var(--esp-2) var(--esp-4);
  background:var(--warn-soft);border-bottom:1px solid var(--warn-soft-rule);color:var(--text-strong);font-size:var(--fs-14);
  font-weight:600}
.bandeau[hidden]{display:none}
.bandeau-refus{min-height:var(--cible);padding:0 var(--esp-2);border:1px solid var(--danger-soft-rule);border-radius:var(--rayon-plein);
  background:var(--danger-soft);color:var(--danger);font-weight:600}
.refusee{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);padding:var(--esp-2) 0;
  border-bottom:1px solid var(--rule)}
.refusee p{margin:0;display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.refusee span{font-size:var(--fs-14);color:var(--danger)}
.refusee .btn{width:auto;flex:none}

/* Alertes : ligne (libellé | CA en jeu), suite ou boutons « Déjà vu », « Normal » ; mise en sommeil par relation. */
.alerte{padding:var(--esp-3) 0;border-bottom:1px solid var(--rule)}
.alerte-tete{display:flex;justify-content:space-between;gap:var(--esp-3);margin:0}
.alerte .detail{margin:var(--esp-1) 0 0;color:var(--text-secondary)}
.alerte-actions{display:flex;gap:var(--esp-2);margin-top:var(--esp-2)}
.section-fiche > [data-sommeil]{margin:var(--esp-3) 0 var(--esp-4)}

/* Tâches : échéance (en retard en rouge), bandeau de file « Tâche 2/30 » en tête de fiche. */
.quand{font-weight:600;color:var(--text-secondary);white-space:nowrap}
.quand.retard{color:var(--danger)}
.file-tache{display:flex;align-items:center;gap:var(--esp-3);margin:0 0 var(--esp-3);padding:var(--esp-2) var(--esp-3);
  background:var(--surface-sunken);border:1px solid var(--rule);border-radius:var(--rayon-plein)}
.file-tache strong{flex:1;text-align:center}
.file-tache .btn{width:auto;flex:none}
.file-fleche{display:flex;align-items:center;justify-content:center;min-width:var(--cible);min-height:var(--cible);
  font-size:1.25rem;font-weight:700;color:var(--lien);text-decoration:none}
.file-fleche.inactif{color:var(--text-secondary);opacity:.4}
/* Calendrier : semaine en sept jours, le titre d'un jour à venir planifie ; mois en grille 7 × 6, le nombre du jour. */
.cal-jour{margin:0 0 var(--esp-3)}
.cal-qui{margin:0 0 var(--esp-2)}
button.ligne-client{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.cal-c1{box-shadow:inset 4px 0 0 var(--cal-1)}.cal-c2{box-shadow:inset 4px 0 0 var(--cal-2)}.cal-c3{box-shadow:inset 4px 0 0 var(--cal-3)}
.cal-c4{box-shadow:inset 4px 0 0 var(--cal-4)}.cal-c5{box-shadow:inset 4px 0 0 var(--cal-5)}.cal-c6{box-shadow:inset 4px 0 0 var(--cal-6)}
.cal-titre{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--cible);margin:0 0 var(--esp-1);
  padding:0;border:0;background:none;font:inherit;font-size:var(--fs-16);font-weight:700;color:var(--text-strong);text-align:left}
button.cal-titre .picto{color:var(--lien)}
.cal-auj .cal-titre{color:var(--marque)}
.cal-mois{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--esp-1)}
.cal-entete{text-align:center;font-size:var(--fs-14);font-weight:600;color:var(--text-secondary)}
.cal-case{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;min-height:var(--cible);
  padding:var(--esp-1) 0;border:1px solid var(--bord-carte);border-radius:var(--rayon-carte);background:var(--surface-raised);
  font:inherit;font-size:var(--fs-15);font-weight:600;color:var(--text)}
.cal-case:disabled{background:none;color:var(--text-muted)}
.cal-hors{opacity:.55}
.cal-case.cal-auj{border-color:var(--marque);color:var(--marque)}
.cal-nb{min-width:20px;padding:0 var(--esp-1);border-radius:var(--rayon-plein);background:var(--marque);color:var(--sur-marque);
  font-size:var(--fs-12);font-weight:700;line-height:20px;text-align:center}

/* Visites : liste numérotée de la journée, rang à gauche. */
.liste-visites{list-style:none;margin:0 0 var(--esp-3);padding:0}
.rang{flex:none;display:flex;align-items:center;justify-content:center;width:var(--rond);height:var(--rond);border-radius:50%;
  background:var(--surface-sunken);font-weight:700;color:var(--text)}

/* Mouvement : l'écran arrive, la feuille monte, le toucher répond. Transform et opacité seulement. */
@keyframes apparition{from{opacity:0}to{opacity:1}}
@keyframes arrivee{from{opacity:0;transform:translateY(var(--glisse))}to{opacity:1;transform:none}}
@keyframes monte{from{transform:translateY(var(--glisse-feuille))}to{transform:none}}
@keyframes descend{from{transform:none}to{transform:translateY(var(--glisse-feuille))}}
@keyframes disparition{from{opacity:1}to{opacity:0}}
#vue:focus{outline:none}
.vue.entree{animation:arrivee var(--duree) var(--courbe)}
.vue.entree[data-sens=avant]{animation:page-arrive var(--duree-page) var(--courbe)}
.vue.entree[data-sens=retour]{animation:page-revient var(--duree-page) var(--courbe)}
.feuille-fond,.dialogue-fond{animation:apparition var(--duree-courte) ease-out}
.feuille{animation:monte var(--duree-feuille) var(--courbe)}
.dialogue,.toast{animation:arrivee var(--duree) var(--courbe)}
.feuille-fond.sortie,.dialogue-fond.sortie{pointer-events:none;animation:disparition 160ms ease-in forwards}
.feuille-fond.sortie .feuille{animation:descend 160ms ease-in forwards}
/* Toucher : l'appui répond tout de suite, le relâchement revient en --duree-courte. Une ligne pleine largeur ne change que de fond. */
.btn,.onglet,.feuille-choix,.rond-action .rond{transition:transform var(--duree-courte) var(--courbe),
  background-color var(--duree-courte) linear,border-color var(--duree-courte) linear,color var(--duree-courte) linear}
.ligne{transition:background-color var(--duree-courte) linear,border-color var(--duree-courte) linear}
.btn:active:not(:disabled),.onglet:active,.rond-action:active .rond{transform:scale(.97)}
a.ligne:active{background:var(--surface-sunken)}
:is(.btn,.ligne,.onglet,.feuille-choix):active,.rond-action:active .rond{transition-duration:0s}
/* Squelettes, rattrapage (Annuler), tirer pour relire, glisser pour finir, nouvelles lignes. */
@keyframes respire{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes coche{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes tourne{from{rotate:270deg}to{rotate:630deg}}
/* Bouton qui attend (ui.js, occupe) : pas grisé ; après 300 ms (DELAI_ROUE) la roue remplace le libellé, largeur figée. */
.occupe:disabled{opacity:1}
.roue{position:relative;-webkit-text-fill-color:transparent}
.roue>*{opacity:0}
.roue::after{content:"";position:absolute;inset:0;margin:auto;width:var(--roue);height:var(--roue);border:2px solid currentColor;
  border-right-color:transparent;border-radius:var(--rayon-plein);animation:apparition var(--duree-courte) linear backwards,roue var(--duree-tour) linear infinite}
@keyframes roue{to{rotate:360deg}}
.squelettes{animation:apparition var(--duree-courte) linear var(--delai-squelette) backwards}
.squelette{display:block;border-radius:var(--rayon-champ);background:var(--surface-sunken);animation:respire var(--duree-respiration) ease-in-out infinite}
.sq-ligne{min-height:4.5625rem}
.sq-taches .sq-ligne,.sq-journee .sq-ligne{min-height:4.375rem}
.sq-visites .sq-ligne{min-height:4.625rem}
.sq-nom{height:1rem;width:60%}
.sq-sous{height:.75rem;width:40%;margin-top:var(--esp-1)}
.sq-montant{height:1rem;width:4rem}
.sq-pastille{height:1rem;width:2.75rem;border-radius:var(--rayon-plein)}
.sq-champ{height:var(--cible)}
.sq-recherche{margin-bottom:var(--esp-2)}
.sq-filtre{margin-bottom:var(--esp-3)}
.sq-onglets{height:var(--cible);margin-bottom:var(--esp-4);border-radius:var(--rayon-plein)}
.sq-compte{height:1.4375rem;width:30%;margin-bottom:var(--esp-3)}
.sq-titre-page{height:2.1875rem;width:60%;margin-bottom:var(--esp-3)}
.sq-adresse{height:1.4375rem;width:75%;margin-bottom:var(--esp-4)}
.sq-libelle{height:.9375rem;width:2.5rem}
.sq-fiche .ronds{margin-bottom:var(--esp-5)}
.sq-fiche .rond-action .rond{background:var(--surface-sunken)}
.sq-section{height:1.75rem;width:40%;margin:var(--esp-5) 0 var(--esp-2)}
.sq-journee .sq-section:first-child{margin-top:.4375rem}
.sq-bloc{margin-bottom:var(--esp-3);border-radius:var(--rayon-carte)}
.sq-resume{height:4.6875rem;margin-top:var(--esp-4)}
.sq-carte{height:15rem}
.sq-carte-basse{height:9rem}
.sq-reussite{height:14.1875rem}
.sq-bilan{height:19.25rem}
.sq-stats{height:18.5625rem}
/* Arrivée des données : un seul fondu, ce qui était déjà là ne clignote pas. */
.donnees-arrivent:not(#vue),
#vue.donnees-arrivent>:not(.titre-page,.titre-ligne,.retour,.onglets,.file-tache,.fiche-client,.fiche-prospect),
#vue.donnees-arrivent>:is(.fiche-client,.fiche-prospect)>:not(.retour,.retour-ligne){animation:apparition var(--duree-donnees) ease-out}
/* Lancement : même vert que le manifeste ; le script le lève, sinon la CSS le retire. */
@keyframes retrait-lancement{to{opacity:0;visibility:hidden}}
@keyframes repli-lancement{82%{opacity:1;transform:translateY(calc(var(--bas-entete) - 100%))}100%{opacity:0;transform:translateY(calc(var(--bas-entete) - 100%))}}
#lancement{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--esp-3);
  background:var(--marque);color:var(--sur-marque);animation:retrait-lancement var(--duree) linear var(--filet-lancement) forwards}
.lancement-logo{display:flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;border:3px solid var(--sur-marque);
  border-radius:var(--rayon-carte);font-family:var(--font-display);font-size:var(--fs-30);font-weight:700}
.lancement-nom{font-family:var(--font-display);font-size:var(--fs-30);font-weight:700;letter-spacing:.02em}
#lancement.replie{pointer-events:none;animation:repli-lancement var(--duree-lancement) var(--courbe) forwards}
#lancement.replie>*{animation:disparition var(--duree-courte) linear forwards}
#lancement.fondu{pointer-events:none;animation:disparition var(--duree) linear forwards}
.toast-action{display:flex;align-items:center;gap:var(--esp-3);pointer-events:auto}
.toast-action::before{content:"✓";flex:none;font-weight:700;animation:coche var(--duree) var(--courbe)}
.toast-action span{flex:1}
.toast.sortie{pointer-events:none;animation:disparition var(--duree-courte) ease-in forwards}
.toast-bouton{flex:none;min-height:var(--cible);padding:0 var(--esp-3);border:0;border-radius:var(--rayon-carte);background:transparent;
  color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
#tirer{position:fixed;top:calc(env(safe-area-inset-top) - 40px);left:50%;z-index:900;width:36px;height:36px;border-radius:50%;opacity:0;
  border:3px solid var(--rule);border-top-color:var(--lien);background:var(--surface-raised);pointer-events:none;transform:translate(-50%,0)}
body{overscroll-behavior-y:contain}
#tirer.revient{transition:transform var(--duree) var(--courbe),rotate var(--duree) var(--courbe),opacity var(--duree-courte) linear}
#tirer.tourne{animation:tourne var(--duree-tour) linear infinite}
[data-glisser]{touch-action:pan-y}
.ligne.glisse{background:var(--success-soft);border-color:var(--success-soft-rule)}
.ligne.nouvelle{animation:arrivee var(--duree) var(--courbe)}
/* Passages d'écran : en-tête et barre restent hors du fondu, le repère d'onglet glisse ; vers une fiche le nouvel écran
   arrive de la droite et l'ancien recule, au retour l'inverse ; d'onglet à onglet, un fondu seul (main.js pose data-sens). */
.entete{view-transition-name:entete}
.barre-basse{view-transition-name:barre}
@keyframes page-arrive{from{opacity:0;transform:translateX(var(--glisse-page))}}
@keyframes page-part{to{opacity:0;transform:translateX(calc(-1 * var(--recul-page)))}}
@keyframes page-revient{from{opacity:0;transform:translateX(calc(-1 * var(--recul-page)))}}
@keyframes page-sort{to{opacity:0;transform:translateX(var(--glisse-page))}}
::view-transition-old(root),::view-transition-new(root),::view-transition-old(barre),::view-transition-new(barre),
::view-transition-old(entete),::view-transition-new(entete){animation-duration:var(--duree-courte)}
::view-transition-group(repere){animation-duration:var(--duree);animation-timing-function:var(--courbe)}
:root[data-sens=avant]::view-transition-new(root){animation:page-arrive var(--duree-page) var(--courbe)}
:root[data-sens=avant]::view-transition-old(root){animation:page-part var(--duree-page-sortie) ease-in forwards}
:root[data-sens=retour]::view-transition-new(root){animation:page-revient var(--duree-page) var(--courbe)}
:root[data-sens=retour]::view-transition-old(root){animation:page-sort var(--duree-page-sortie) ease-in forwards}
@media (prefers-reduced-motion:reduce){
  :root{--glisse:0px;--glisse-feuille:0px;--glisse-page:0px;--recul-page:0px}
  #tirer.tourne{animation:respire var(--duree-respiration) ease-in-out infinite}
  .roue::after{animation:respire var(--duree-respiration) ease-in-out infinite}
  #tirer.revient{transition:opacity var(--duree-courte) linear}
  .squelette{animation:none}
  .toast-action::before{animation:none}
  .feuille{animation-name:apparition}
  .feuille-fond.sortie .feuille{animation:none}
  .btn:active:not(:disabled),.onglet:active,.rond-action:active .rond{transform:none}
}

/* Prospects : note libre de la fiche, texte tel quel. */
.note-prospect{margin:var(--esp-3) 0;white-space:pre-wrap;overflow-wrap:anywhere}
.fiche-prospect .ronds{justify-content:flex-start;gap:var(--esp-4);margin-bottom:var(--esp-4)}
@media (max-width:359px){
  .fiche-prospect .ronds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--esp-3) var(--esp-2)}
}
.fiche-prospect .choix,.fiche-prospect [data-reattribuer]{margin-bottom:var(--esp-3)}
.btn-voir-plus{margin-top:var(--esp-3);color:var(--lien);font-weight:600}
/* Ligne de « Ma journée » avec rond d'appel au bout. */
.ligne-appel{display:flex;align-items:center;gap:var(--esp-2);margin:0 0 var(--esp-2)}
.ligne-appel>.ligne{margin:0;flex:1;min-width:0}
.rond-ligne{flex:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:var(--cible);height:var(--cible);
  border-radius:var(--rayon-plein);background:var(--rond-fond);color:var(--rond-picto)}
.ligne-appel>.ligne{flex-wrap:wrap}
.ligne-appel .ligne-texte{flex:1 1 9rem}
.ligne-appel .ligne-chiffres{margin-left:auto}
.ligne-appel>.btn-petit{flex:none}
.ligne-ouvre{cursor:pointer}

/* Messages : liste des fils, un fil (messages, qui a lu, réponse), feuille Nouveau. */
.retour-ligne{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.retour-ligne .btn{margin-top:calc(-1 * var(--esp-2))}
.ligne-fil{color:inherit;text-decoration:none}
.ligne-fil:active{background:var(--surface-sunken)}
.ligne-fil.non-lu strong{font-weight:700}
.lien-fil-client{display:block;margin:0 0 var(--esp-3);color:var(--lien);font-weight:600;text-decoration:none}
.fil-messages{list-style:none;margin:var(--esp-3) 0;padding:0;display:flex;flex-direction:column;gap:var(--esp-2)}
.fil-message{max-width:88%;padding:var(--esp-2) var(--esp-3);border:1px solid var(--bord-carte);border-radius:var(--rayon-carte);
  background:var(--surface-raised)}
.fil-message.moi{align-self:flex-end;background:var(--surface-sunken)}
.fil-tete{display:flex;justify-content:space-between;gap:var(--esp-3);margin:0 0 var(--esp-1);font-size:var(--fs-14)}
.fil-texte{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.fil-lu{margin:0 0 var(--esp-4)}
.destinataires{border:0;margin:0 0 var(--esp-4);padding:0;max-height:16rem;overflow-y:auto}
.destinataires legend{padding:0;margin-bottom:var(--esp-2);font-weight:600}
.destinataires .case .detail{margin-left:auto}
.destinataires [hidden]{display:none}
.feuille .recherche{margin-bottom:var(--esp-2)}

/* Direction : lecture seule (app/js/direction.js, DECISIONS/droits.md#role-direction). La base refuse toute écriture ;
   l'écran retire les gestes qui écriraient et rend inertes les lignes qui ouvrent une correction. */
html[data-lecture] :is([data-message],[data-rond="note"],[data-rond="tache"],[data-rond="visite"],[data-principale],
  [data-contact-nouveau],[data-note-nouvelle],[data-rappeler],[data-classer],[data-tache-fait],[data-file-fait],
  [data-visite-fait],[data-visite-file-fait],[data-rattacher],[data-abandonner],[data-ouverture],[data-ouvrir],
  a[href="#/croisees"],[data-nouveau]){display:none!important}
html[data-lecture] :is([data-contact],[data-tache-ouvrir],[data-visite-ouvrir],[data-note-ouvrir]){pointer-events:none}

/* Pilotage : tableaux empilés sur téléphone, en grille sur ordinateur ; le titre ouvre la définition et la requête. */
.vue-pilotage{max-width:1100px}
.pilotage-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-3)}
.tableau{margin:0;padding:var(--esp-4)}
.tableau-titre{display:block;width:100%;min-height:var(--cible);margin:0 0 var(--esp-2);padding:0;border:0;background:none;
  color:var(--text-strong);font:600 var(--fs-16) var(--font-body);text-align:left;cursor:pointer}
.tableau-definition{margin:0 0 var(--esp-3);padding:var(--esp-3);border-radius:var(--rayon-carte);background:var(--surface-sunken);
  font-size:var(--fs-14);color:var(--text-secondary)}
.tableau-definition p{margin:0 0 var(--esp-2)}
.tableau-requete{margin:0;overflow-x:auto;font:var(--fs-12) var(--font-mono);white-space:pre-wrap;word-break:break-word}
.tableau .chiffre-principal{margin-bottom:var(--esp-1)}
@media (min-width:900px){
  .pilotage-grille{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tableau-haut{grid-column:span 2}
  .tableau-courbe,.tableau-barres,.tableau-stats{grid-column:span 3}
  .tableau-liste{grid-column:1/-1}
  .tableau-liste{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-2) var(--esp-3)}
  .tableau-liste>.tableau-titre,.tableau-liste>.tableau-definition{grid-column:1/-1}
  .tableau .graphique{max-height:200px}
}
/* Questions à l'IA : plein écran ouvert par « Demander » sur téléphone, colonne à droite sur ordinateur. */
.pilotage-chat{display:none}
.pilotage-chat.ouvert{position:fixed;inset:0;z-index:800;display:flex;flex-direction:column;gap:var(--esp-3);
  padding:calc(env(safe-area-inset-top) + var(--esp-3)) var(--esp-4) calc(env(safe-area-inset-bottom) + var(--esp-3));
  background:var(--surface);overflow-y:auto}
.chat-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.chat-tete .titre-section{margin:0}
.chat-fil{display:flex;flex-direction:column;gap:var(--esp-4);flex:1}
.chat-echange{display:flex;flex-direction:column;gap:var(--esp-2)}
.chat-question{margin:0;font-weight:600;color:var(--text-strong);overflow-wrap:anywhere}
.chat-texte{margin:0;overflow-wrap:anywhere}
.chat-saisie{display:flex;flex-direction:column;gap:var(--esp-2);margin:0}
.tableau>.btn-petit{margin-top:var(--esp-3)}
@media (min-width:1024px){
  .vue-pilotage{max-width:1440px}
  .chat-demander,.chat-fermer{display:none}
  .pilotage-corps{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--esp-4);align-items:start}
  .pilotage-chat,.pilotage-chat.ouvert{position:sticky;top:72px;z-index:auto;inset:auto;display:flex;flex-direction:column;
    gap:var(--esp-3);max-height:calc(100vh - 88px);padding:var(--esp-4);overflow-y:auto;background:var(--surface-raised);
    border:1px solid var(--bord-carte);border-radius:var(--rayon-carte)}
  .pilotage-chat .tableau-liste{display:block}
}
.liste-regles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--esp-2)}
.regle{display:flex;flex-direction:column;align-items:flex-start;gap:var(--esp-2)}
.regle p{margin:0;overflow-wrap:anywhere}