/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIFS PROPRES À LA DÉMONSTRATION — SURCOUCHE DE L'APPLICATION
   ═══════════════════════════════════════════════════════════════════════════
   Chargée APRÈS le CSS en ligne de index.html.

   Cette feuille portait jusqu'au 14 octobre 2026 une direction artistique à
   part : papier bleuté, encre bleue, nuit du site, cartes en relief, boutons
   bleus en pilule. Elle rapprochait la démo de l'ancienne vitrine. La vitrine
   et le logiciel sont depuis passés au même style épuré — fond blanc, filets
   fins, chiffres clés sans cadre, une seule action pleine (noire) —, porté par
   la couche « Style épuré » en fin de feuille de index.html, recopiée du
   logiciel. Chargée après elle, l'ancienne direction la défaisait écran par
   écran : elle est retirée.

   Restent ici les correctifs de comportement trouvés par les sondes de la
   démo (cibles tactiles, surfaces flottantes, onglets atteignables, barre au-
   dessus du bandeau, une seule couche d'aide), sans aucune couleur propre :
   ils lisent les jetons du logiciel. Mêmes règles de conduite qu'avant :
   · aucun sélecteur, aucune classe, aucun texte dont dépend une sonde n'est
     renommé ;
   · toute animation passe par prefers-reduced-motion ;
   · les styles injectés par 00-demo.js arrivent APRÈS cette feuille : quand
     il faut les reprendre, on monte la spécificité (html body #id).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ALIAS — les noms qu'emploient les correctifs ci-dessous, rendus aux
   jetons du logiciel. Aucune couleur n'est définie ici. ────────────────── */
:root{
  --sortie:cubic-bezier(.22,.8,.2,1);
  --vif:var(--gold);
  --bleu:#3560c4;
  --line-forte:var(--filet-fort);
}

/* ── 4. COQUE — barre latérale au-dessus du bandeau de démonstration ───── */
/* Le bandeau fixe ne recouvre plus la fin de la barre latérale : la barre
   s'arrête au-dessus de lui (--h-bandeau, mesurée par 00-demo.js). */
@media (min-width:981px){
  .side{height:calc(100vh - 20px - var(--h-bandeau,0px));height:calc(100dvh - 20px - var(--h-bandeau,0px));
    scroll-padding-bottom:16px}
}
@media (min-width:981px) and (max-width:1200px){
  .side{height:calc(100vh - 16px - var(--h-bandeau,0px));height:calc(100dvh - 16px - var(--h-bandeau,0px))}
}
@media (min-width:981px) and (pointer:coarse){
  .side{height:calc(100vh - 16px - var(--h-bandeau,0px));height:calc(100dvh - 16px - var(--h-bandeau,0px))}
}
/* En tiroir (≤ 980 px), le bandeau reste visible jusqu'à 641 px : on lui
   laisse sa place au pied du tiroir. */
@media (max-width:980px){
  .side{padding-bottom:calc(24px + var(--h-bandeau,0px))}
}
/* Le contenu garde une gouttière basse au-dessus des surfaces flottantes. */
.main{scroll-padding-bottom:calc(var(--h-bandeau,0px) + 24px)}

/* L'état de synchronisation, en démonstration : neutre, pas une alarme. */
.syncbox.demo .dot2{background:var(--gold)}
.syncbox.demo{color:var(--muted)}

/* ── 5. COQUE — le guide flottant ────────────────────────────────────────
   Replié, il n'était plus une pastille mais une étiquette de 250 px posée sur
   la légende du camembert, la colonne « Fiche » des acquéreurs, ou (sur
   téléphone) à côté du bouton « + » et au-dessus de la barre d'onglets. Replié,
   il devient un rond de 48 px ; son nom reste lisible par les lecteurs
   d'écran, et il s'ouvre au même endroit. */
html body #guideDemo{border-radius:18px;border-color:var(--line);
  box-shadow:0 1px 2px rgba(14,26,54,.06),0 22px 48px -18px rgba(14,26,54,.38)}
html body #guideDemo .gd-pastille{background:var(--bleu)}
html body #guideDemo .gd-reprendre{background:var(--bleu);border-radius:999px;min-height:42px}
html body #guideDemo .gd-item{border-radius:12px}
html body #guideDemo.replie{width:48px;height:48px;border-radius:50%;padding:0;
  background:var(--bleu);border-color:transparent;
  box-shadow:0 10px 26px -8px rgba(53,96,196,.6),0 0 0 4px rgba(93,134,255,.14)}
html body #guideDemo.replie .gd-tete{width:48px;height:48px;padding:0;justify-content:center;gap:0}
html body #guideDemo.replie .gd-pastille{width:48px;height:48px;font-size:18px;background:transparent}
html body #guideDemo.replie .gd-tete b,
html body #guideDemo.replie .gd-tete small,
html body #guideDemo.replie .gd-fl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
@media (max-width:640px){
  /* Sur téléphone : au-dessus de la barre d'onglets, à gauche, face au « + ». */
  html body #guideDemo.replie{left:16px;bottom:calc(var(--h-onglets,64px) + 18px);width:44px;height:44px}
  html body #guideDemo.replie .gd-tete,html body #guideDemo.replie .gd-pastille{width:44px;height:44px}
}
html[data-theme="sombre"] body #guideDemo{background:var(--panel);
  box-shadow:0 22px 48px -16px rgba(0,0,0,.7)}
html[data-theme="sombre"] body #guideDemo.replie{background:#3560c4;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.7),0 0 0 4px rgba(93,134,255,.18)}

/* Le bouton d'action rapide (téléphone) : même famille, même relief. */
#actionRapide{box-shadow:0 10px 26px -8px rgba(14,26,54,.40)}

/* ── 11. AZUR — une cible tactile de 24 px ──────────────────────────────── */
/* Le bouton « Expliquer ce chiffre » des chiffres de tête mesurait 20 × 20 px,
   sous la cible tactile de 24 px (WCAG 2.5.8, tests/texte.js). Défaut du
   logiciel, à reporter avec le reste d'Azur : 24 px, même pastille. */
.ia-expliquer{width:24px;height:24px;margin-left:4px;vertical-align:-6px}

/* ── 12. ONGLETS DE DOSSIER : plus rien de caché sans le dire ────────────────
   Les cinq familles d'onglets tenaient sur une seule ligne défilante : sur
   « Les Terrasses du Parc », 1 829 px de contenu dans 1 062 px visibles, sans
   masque ni flèche — Factures, Réserves, Livraisons, Carnets, Documents…
   étaient invisibles à l'ouverture, et une souris sans molette horizontale
   ne pouvait pas les atteindre.
   · À la souris (pointer:fine), les familles passent à la ligne : tout est
     visible, chaque famille garde son nom et son trait.
   · Au doigt (tablette), la bande reste défilante — le geste est naturel —,
     mais ses bords s'estompent quand il reste des onglets de ce côté
     (classes fondu-g / fondu-d, déjà posées par fonduBandes()). */
@media (min-width:641px) and (pointer:fine){
  .sectiontabs.groupes{flex-wrap:wrap;overflow:visible;row-gap:10px;column-gap:26px;border-bottom:0;
    -webkit-mask-image:none;mask-image:none}
  .sectiontabs.groupes .stgroupe{border-bottom:1px solid var(--line);padding:0}
  .sectiontabs.groupes .stgroupe+.stgroupe{border-left:0;padding-left:0}
  .sectiontabs.groupes .stg-nom{padding-left:7px}
  .sectiontabs.groupes .aide-bascule{align-self:flex-end;margin-left:auto}
}
@media (min-width:641px) and (pointer:coarse){
  .sectiontabs.groupes.fondu-d{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 48px);
                                      mask-image:linear-gradient(to left,transparent 0,#000 48px)}
  .sectiontabs.groupes.fondu-g{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 48px);
                                      mask-image:linear-gradient(to right,transparent 0,#000 48px)}
  .sectiontabs.groupes.fondu-g.fondu-d{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
}

/* ── 13. TABLEAUX : la suppression à distance du geste courant ───────────────
   Le « × » de suppression (12 px de glyphe) touchait le bouton « Fiche » :
   un clic destructeur à 2 px du clic le plus fréquent de la ligne. Il devient
   un rond de 28 px, écarté de 8 px, gris au repos, rouge au survol. (La
   suppression demande toujours confirmation : delRowCh → showConfirm.) */
@media (min-width:641px){
  td .del{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
    min-width:28px;min-height:28px;padding:0;border-radius:50%;font-size:1.125rem;line-height:1;
    vertical-align:middle;color:var(--muted2)}
  td .btn+.del,td .del+.btn{margin-left:8px}
  td.colw-min{white-space:nowrap}
}

/* ── 16. UNE SEULE COUCHE D'AIDE À LA FOIS ───────────────────────────────────
   Repère de démonstration, sous-titre, phrase d'aide de l'onglet : trois
   textes empilés, qui se répétaient. Le sous-titre est une donnée (lieu,
   nombre de logements, date) : il reste. Quand le repère de démonstration
   est posé, la phrase d'aide de l'onglet se tait ; le repère, lui, ne
   s'affiche qu'une fois par écran (00-demo.js, poserRepereDemo). */
#main:has(>#demoRepere) .aide-section{display:none}

/* ── 18. MOUVEMENT (lot 5) : l'arrivée raconte, sans faire attendre ──────────
   Le changement d'écran a déjà son fondu (viewfade, 180 ms) et l'entrée
   échelonnée des cartes et chiffres clés (06-boot.js, animerEntreeEcran :
   .entre, 30 ms d'écart, 8 au plus). Il manquait les tuiles de « l'essentiel
   de la semaine » — les premiers chiffres qu'on lit — et les chiffres de
   tête d'un programme : ils arrivent maintenant en cascade, 280 ms, 40 ms
   d'écart, au changement d'écran seulement (.viewfade n'enveloppe que
   lui : une saisie qui recalcule ne rejoue rien). Dernier départ à 200 ms :
   aucun chiffre n'est retenu au-delà de 300 ms.
   Les fenêtres s'ouvraient à trois rythmes (160 ms « ease », 220 ms, 300 ms) :
   une seule courbe, celle du site (--sortie), une seule durée. */
@keyframes daMonte{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .viewfade .lundi-tuile,.viewfade .tete-k{animation:daMonte .28s var(--sortie) backwards}
  .viewfade .lundi-tuile:nth-child(2),.viewfade .tete-k:nth-child(2){animation-delay:40ms}
  .viewfade .lundi-tuile:nth-child(3),.viewfade .tete-k:nth-child(3){animation-delay:80ms}
  .viewfade .lundi-tuile:nth-child(4),.viewfade .tete-k:nth-child(4){animation-delay:120ms}
  .viewfade .lundi-tuile:nth-child(5),.viewfade .tete-k:nth-child(5){animation-delay:160ms}
  .viewfade .lundi-tuile:nth-child(n+6),.viewfade .tete-k:nth-child(n+6){animation-delay:200ms}
  .confirm-card{animation:confirmIn var(--duree-fenetre,.22s) var(--sortie)}
  #evenementModal{animation:confirmIn var(--duree-fenetre,.22s) var(--sortie)}
  @media (min-width:641px){
    .btn:active:not([disabled]),.confirm-btn:active{transform:scale(.97)}
  }
}
@media (prefers-reduced-motion:reduce){
  .viewfade .lundi-tuile,.viewfade .tete-k{animation:none}
}

/* ── 19. TÉLÉPHONE (lot 6) ───────────────────────────────────────────────────
   a. Une seule surface flottante au-dessus de la barre d'onglets : le « + »
      des actions rapides. Le rond du guide et celui d'Azur flottaient avec
      lui, trois ronds sur les 140 px du bas. En démonstration (#demoTag,
      la pastille « Démo » de la barre du haut, n'existe que là), le guide
      replié et la pastille d'Azur se retirent : la feuille « Démo » les
      propose (« Le guide de cet écran », « Demander à Azur »), et Azur reste
      dans le menu. Ouvert, le guide s'affiche comme avant. */
@media (max-width:640px){
  body:has(#demoTag) #guideDemo.replie{display:none}
  html.ia-tel body:has(#demoTag) .ia-pastille{display:none}
}
/* b. Cibles tactiles : 44 px pour les commandes principales, 24 px au moins
      partout. La zone active grandit sans que le dessin change (::after). */
@media (max-width:640px){
  .tabbar-eye{width:44px;height:44px}
  html body #demoTag{min-height:36px;position:relative}
  html body #demoTag::after{content:"";position:absolute;inset:-6px -2px}
  .ter-ligne .coche-zone{position:relative;display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;margin:-9px}
  .ft-retour{min-height:44px}
  /* Page complète ouverte depuis la fiche terrain : « ‹ Fiche de terrain »
     et le nom de la phase se touchaient sur la même ligne. */
  .tete-id>.ft-retour{display:flex;width:max-content;margin-bottom:2px}
}
/* c. Les écrans financiers depuis la fiche terrain. Sur téléphone, la fiche
      terrain remplace la page du programme : Bilan, Appels de fonds et
      Trésorerie n'étaient atteignables qu'en bas de page, par « Ouvrir la
      page complète ». Ils sont maintenant sous le titre (renderFicheTerrain). */
.ft-finances{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px}
.ft-fin{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--champ-bord);background:var(--tel-carte,var(--panel));color:var(--ink);
  font:inherit;font-size:var(--t4);font-weight:600;cursor:pointer;
  box-shadow:0 1px 2px rgba(var(--ink-rgb),.05)}
.ft-fin:active{transform:scale(.97)}
.ft-fin:focus-visible{outline:3px solid var(--vif);outline-offset:2px}
html[data-theme="sombre"] .ft-fin{border-color:var(--line-forte);color:var(--ink)}

/* ── 20. ACCESSIBILITÉ (lot 7) ────────────────────────────────────────────────
   Le titre d'une carte repliable n'est plus un bouton qui contient des
   boutons (05-actions.js) : c'est le bouton « ▾ » qui replie, avec son nom
   et son état (aria-expanded). Il se voit au clavier. */
.card-toggle:focus-visible{outline:3px solid var(--vif);outline-offset:2px;border-radius:8px}
@media (max-width:640px){
  /* Les noms de programme cliquables de « Résultats financiers » : 22 px. */
  #main b[data-on-click]{display:inline-flex;align-items:center;min-height:24px}
}

/* ── 21. Grille des lots en saisie rapide : défiler plutôt que s'écraser ──
   Avec le corps à 15 px et les champs en pilule, la grille (13 colonnes) ne
   tenait plus dans la carte à 1440 px : le navigateur écrasait les colonnes de
   texte, et « A11 » ou le nom de l'acquéreur se cassaient lettre par lettre. On
   garde une largeur minimale et le cadre .table-defile fait défiler. */
.table-saisie>table.tbl-lots:not(.tbl-fiches){min-width:1240px}
.table-saisie>table.tbl-lots:not(.tbl-fiches) td{overflow-wrap:normal;word-break:normal}
.table-saisie>table.tbl-lots:not(.tbl-fiches) td:first-child{white-space:nowrap}

/* ── 22. Sous-onglets : 24 px de cible ────────────────────────────────────
   La couche épurée du logiciel réduit les sous-onglets (Vue d'ensemble,
   Jalons, Bilan, Financement…) à leur texte, sans marge : 22 px de haut,
   sous la cible de 24 px (WCAG 2.2, 2.5.8 ; tests/texte.js). La zone de
   toucher reprend 24 px sans que le dessin change. */
.sectiontabs.secondary .stitem,
.sectiontabs.groupes .stgroupe.actif .stg-items .stitem{min-height:24px;display:inline-flex;align-items:center}

/* ── 23. Contraste avec les jetons du logiciel ────────────────────────────
   Le gris secondaire du style épuré (--muted2, #676d77) tombe à 4,48:1 sur le
   lavis bleu (--gold-wash) : fiche concurrente de l'étude de marché, ligne
   du mois courant ou de l'hypothèse centrale dans les tableaux, encart du
   concepteur dans le formulaire de contact (styles de 00-demo.js, d'où
   html body). Le rouge plus
   franc (#d6001c) tombe à 4,36:1 sur le fond rouge pâle d'une case en retard
   de la matrice des appels de fonds. Et le libellé blanc d'une barre de
   planning sur la phase « purge », plus claire, à 4,15:1. Seuil 4,5:1,
   tests/contraste.js. On prend l'encre faite pour ces fonds. */
.cp-qui .cp-k,
tr[style*="--gold-wash"] .muted2,
html body .fv-contact .fv-role,html body .fv-contact .fv-rgpd{color:var(--muted)}
.mx-retard .mx-v{color:var(--rouge-encre)}
.gantt-grand .gt-b em{background:rgba(0,0,0,.38)}

/* ── 24. Étude de marché : rien ne pousse la page de côté ─────────────────
   Avec l'échelle typographique du logiciel (corps à 15 px), les tableaux des
   ventes en VEFA prennent la classe tbl-large et sa largeur minimale (540 px
   au téléphone, 820 px sur tablette) ; nichés dans .liste-prog-corps, ils ne
   profitaient pas du défilement prévu pour un tableau large posé dans une
   carte, et poussaient toute la page (tests/debordement.js). Ils défilent
   désormais dans leur bloc. Sous 440 px, les filtres (Période, Rayon compté,
   ventes en bloc) passent sur une colonne : « Tout le secteur lu » ne tient
   pas dans une demi-largeur. */
.liste-prog-corps:has(> table.tbl-large){overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:440px){.fon-filtres{grid-template-columns:1fr}}