/* Dosis, typographie officielle du brand book Moriarty, embarquée pour que la
   maquette rende la vraie identité sans dépendre d'une police installée ni d'un
   service externe. Police variable : une seule fonte porte 400 à 800. */
@font-face{
  font-family:'Dosis';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(data:font/woff2;base64,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) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Dosis';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(data:font/woff2;base64,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) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Charte Moriarty (brand book) : bleu dominant, orange en accent seul */
  --bleu:#002E72;
  --bleu-800:#0a3f8c;
  --bleu-100:#eaf0fa;
  --bleu-pastel:#99B8E0;
  --orange:#E14F0A;          /* accents, gros textes, états */
  --orange-txt:#A8390A;      /* variante lisible sous 18px : 6,5:1 sur blanc */
  /* EXCEPTION BORNÉE, comme celle du drapeau français. Vert « nous y sommes »
     du bandeau du congrès, et de rien d'autre. Hors charte, assumé, daté du
     01/09/2026, et un test interdit qu'il se répande ailleurs. Il part avec le
     bandeau le 19 septembre. */
  --vert-congres:#22C55E;
  --orange-100:#fdeee6;
  --gris:#F6F6F6;
  --surface:#ffffff;
  /* LE SOL EST BLANC, ET C'EST LA CHARTE QUI LE DIT. Il a été bleuté (#eaeff7)
     et couvert d'une trame de points bleus, au motif que « c'est ce qui donne
     sa profondeur à un produit comme Pennylane ». L'argument était celui d'un
     autre produit : le brand book Moriarty pose un fond BLANC TEXTURÉ, clin
     d'œil à l'artisanat, et réserve le bleu aux titres, aux structures et aux
     en-têtes. Un sol teinté fait du bleu la couleur de l'écran entier alors
     qu'il doit rester celle de ce qui structure.

     Le vrai problème que la teinte réglait reste vrai : à #fbfcfd, un blanc à
     1 % du blanc des cartes, rien ne se détachait de rien. La texture le règle
     mieux, et sans coloriser : une feuille blanche posée sur un mur crépi se
     voit, une feuille blanche sur du blanc plat ne se voit pas. */
  --fond:#F6F6F6;
  --panneau:#f3f6fb;         /* second niveau de neutre, pour la barre d'app */
  /* Trois profondeurs, pas plus. Les ombres remplacent les bordures : une carte
     posée sur un fond se lit par son ombre, pas par son contour. */
  --ombre:0 1px 2px rgba(0,32,84,.05), 0 4px 14px rgba(0,32,84,.05);
  --ombre-haute:0 2px 6px rgba(0,32,84,.07), 0 12px 30px rgba(0,32,84,.09);
  --ombre-sur:0 2px 4px rgba(0,32,84,.07), 0 8px 22px rgba(0,32,84,.09);
  --ink:#1e2430;
  /* ENCRE SECONDE. Le secondaire des lignes (commune, dispositif, remboursable)
     était en encre douce, à 60 % : douze lignes de gris, et l'écran se lisait
     fade. Les logiciels financiers mûrs gardent leurs lignes secondaires en
     gris FONCÉ et réservent le gris clair aux libellés d'en-tête. */
  --encre-2:#374151;         /* 9,7:1 sur blanc */
  --ink-doux:#5a6270;        /* 4,9:1 sur blanc, libellés d'en-tête seulement */
  --filet:#e3e8f0;
  --vert:#146c47;
  --vert-100:#e7f4ee;
  /* ==================================================== LES RAYONS ==
   Trois, pas onze. La feuille en comptait onze valeurs différentes, de deux
   à vingt pixels : chaque zone devenait une carte d'un arrondi différent, et
   l'écran ressemblait à un assemblage de morceaux venus d'endroits différents.
   Les cartes sont passées de quatorze à douze pixels et les contrôles de dix
   à huit : moins bombé, plus outil. */
  --r:12px;          /* cartes et grandes surfaces */
  --r-s:8px;         /* contrôles : boutons, champs, blocs internes */
  --r-pill:999px;    /* pastilles de file, et rien d'autre */

  /* ================================================ LES ESPACEMENTS ==
   Une échelle, au lieu de onze valeurs de rembourrage voisines (5, 6, 7, 8,
   9, 10, 12, 13, 14, 16, 20). Des écarts voisins mais jamais égaux, c'est
   exactement ce qui donne l'impression qu'un écran a été assemblé à la main,
   morceau par morceau, plutôt que dessiné. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e7:32px;

  /* ================================================= LA TYPOGRAPHIE ==
   Sept niveaux. La feuille en comptait treize entre onze et dix-sept pixels
   (15, 14, 14.5, 13.5, 16, 13, 12.5, 12, 15.5, 11.5...). Treize tailles si
   proches ne font pas une hiérarchie, elles font une impression
   administrative : tout se ressemble, donc rien ne ressort.

   L'ordre de lecture voulu, du plus fort au plus faible :
   VALEUR FINANCIÈRE > TITRE > ACTION > CORPS > MÉTADONNÉE. */
  --tp-valeur:clamp(30px,3.1vw,38px);   /* le montant, point d'ancrage */
  --tp-titre:26px;                       /* titre de page */
  --tp-sous:19px;                        /* titre de bloc */
  --tp-corps:15px;                       /* corps, et nom d'entreprise en 700 */
  --tp-meta:13px;                        /* métadonnée, source, précision */
  --tp-label:11.5px;                     /* étiquette de structure, majuscules */
  --gr-fort:700; --gr-moyen:600; --gr-normal:400;

  --t:170ms cubic-bezier(.22,1,.36,1);
  /* échelle z sémantique */
  --z-sticky:100; --z-popover:200; --z-modale:300;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--fond);color:var(--ink);
     font-family:"Dosis",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     font-size:16px;line-height:1.55;letter-spacing:.005em;-webkit-font-smoothing:antialiased}

/* LE SOL TEXTURÉ DE TOUTE L'APPLICATION. En `position:fixed` plutôt qu'en
   `background-attachment:fixed` sur le body, que Safari mobile ignore et qui
   saccade au défilement sur les autres. Le champ ne bouge donc pas quand la
   page défile, et la texture ne se répète ni ne s'étire jamais.

   `z-index:-1` fonctionne ici parce que le fond du body est propagé au canvas :
   le body ne peint rien dans sa propre boîte, et le pseudo-élément se voit.
   C'est déjà le motif de l'écran d'arrivée, dont la règle, plus spécifique,
   continue de prendre le dessus sur celle-ci. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--fond);
  background-image:url("/fond-texture.jpg");
  background-size:cover;background-position:center;
}

/* ---------- bandeau de maquette, hors application ---------- */
.meta{background:var(--bleu);color:#dbe5f5;padding:9px 20px;display:flex;gap:16px;align-items:center;
      flex-wrap:wrap;font-size:14px}
.meta b{color:#fff}
.meta button{background:transparent;border:1px solid rgba(255,255,255,.28);color:#dbe5f5;border-radius:20px;
             padding:4px 12px;font:inherit;font-size:13.5px;cursor:pointer;transition:background var(--t),color var(--t)}
.meta button:hover{background:rgba(255,255,255,.12);color:#fff}
.meta button[aria-current="true"]{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:700}
.meta button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---------- coque applicative ---------- */
/* ============================================== LA BARRE EST BLEUE ==
   Le brand book fait du bleu nuit la couleur DOMINANTE. Dans Radar, le bleu
   n'était que du texte posé sur du blanc : la barre était blanche, l'avatar
   bleu pâle, et la marque ne se voyait qu'au wordmark orange. L'app de Ruddy
   pose une colonne bleu nuit avec le wordmark blanc : le bleu domine avant
   qu'on ait lu un mot. Radar prend la même chrome, pour être reconnu comme le
   même produit d'un écran à l'autre.

   La barre avait été bleue du 3 au 27 août 2026 et remise en blanc parce que
   le wordmark ORANGE n'atteint que 3,3:1 sur le bleu. Le blocage était la
   couleur du logo, pas celle de la barre : en blanc (12,85:1), variante que le
   brand book autorise page 8, il n'y a plus de raison. Arbitré par Yohan le
   01/09/2026 : « utilise le blanc du brand book, comme Ruddy ». */
.appbar{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bleu);
        border-bottom:0;display:flex;align-items:center;gap:22px;
        padding:0 max(20px,calc(50% - 540px));height:58px}
.appbar .marque{display:flex;align-items:center;gap:10px;border-radius:var(--r-s);color:#fff}
body[data-etape="ouvrir"] .appbar .marque,
body[data-etape="envoye"] .appbar .marque{cursor:pointer;transition:opacity var(--t)}
body[data-etape="ouvrir"] .appbar .marque:hover,
body[data-etape="envoye"] .appbar .marque:hover{opacity:.72}
.appbar .marque:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.appbar .marque svg{display:block}
.onglets{display:flex;gap:2px;height:100%}
/* Sur le bleu : blanc atténué au repos, blanc plein au survol et sur la page
   courante, et le trait orange sous l'onglet courant, comme le brand book
   l'écrit (« onglet sélectionné = trait gras orange dessous »). */
.onglets a{display:flex;align-items:center;padding:0 14px;font-size:15px;font-weight:600;
           color:rgba(255,255,255,.8);text-decoration:none;border-bottom:3px solid transparent;
           transition:color var(--t),border-color var(--t)}
.onglets a:hover{color:#fff}
.onglets a[aria-current="page"]{color:#fff;border-bottom-color:var(--orange)}
.onglets a:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:var(--r-s)}
.cabinet{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:15px;
         color:rgba(255,255,255,.85)}
/* L'identité est un bouton : elle ouvre le menu du compte. Le chevron le dit,
   sinon rien n'indique qu'il y a quelque chose dessous. */
.cabinet{position:relative}
.cabinet-bouton{display:flex;align-items:center;gap:10px;background:none;border:0;padding:5px 8px;
                font:inherit;font-size:15px;color:#fff;cursor:pointer;border-radius:var(--r-s)}
.cabinet-bouton:hover{background:rgba(255,255,255,.12);color:#fff}
.cabinet-bouton:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cabinet-bouton .chevron{transition:transform var(--t);opacity:.7}
.cabinet-bouton[aria-expanded="true"] .chevron{transform:rotate(180deg)}
/* Ancré à droite sous l'identité, et au dessus de tout le reste : un menu que la
   page recouvre à moitié ne se clique pas. */
.menu-compte{position:absolute;top:calc(100% + 6px);right:0;min-width:230px;z-index:60;
             background:#fff;border:1px solid var(--filet);border-radius:var(--r);
             box-shadow:var(--ombre-haute);padding:6px;display:flex;flex-direction:column}
.menu-compte[hidden]{display:none}
.menu-compte a,.menu-compte button{display:block;width:100%;text-align:left;background:none;border:0;
             padding:10px 12px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;
             border-radius:var(--r-s);text-decoration:none}
.menu-compte a:hover,.menu-compte button:hover{background:var(--bleu-100);color:var(--bleu)}
.menu-compte a:focus-visible,.menu-compte button:focus-visible{outline:2px solid var(--bleu);outline-offset:-2px}
/* La sortie est détachée du reste par un filet : c'est le seul geste du menu
   qui ne se rattrape pas d'un clic, il ne doit pas se prendre pour un autre. */
.menu-compte #btnDeconnexion{margin-top:6px;border-top:1px solid var(--filet);
             border-radius:0 0 var(--r-s) var(--r-s);padding-top:12px}
/* L'avatar est orange, comme dans l'app : le seul orange plein de la chrome,
   et le seul endroit où la marque met son accent dans la barre. */
.cabinet .jeton{width:32px;height:32px;border-radius:50%;background:var(--orange);color:#fff;
                display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:.02em}

main{max-width:1120px;margin:0 auto;padding:26px 20px 72px}
.ecran{display:none}
.ecran[data-actif]{display:block;animation:apparait var(--t) both}
@keyframes apparait{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- typographie, échelle fixe ---------- */
h1{font-size:26px;line-height:1.25;margin:0 0 4px;color:var(--bleu);letter-spacing:-.01em;text-wrap:balance}
h2{font-size:16px;margin:30px 0 12px;color:var(--bleu)}
h2:first-child{margin-top:0}
p{margin:0 0 12px;max-width:70ch}
.chapeau{color:var(--ink-doux);font-size:15.5px;margin-bottom:22px}
.aide{font-size:14px;color:var(--ink-doux);margin:0}
.section{border-top:1px solid var(--filet);padding-top:22px;margin-top:26px}

/* ---------- contrôles ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--bleu);color:#fff;border:1px solid var(--bleu);
     border-radius:var(--r-s);padding:10px 18px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
     transition:background var(--t),transform var(--t),box-shadow var(--t)}
.btn{text-decoration:none}   /* un <a> déguisé en bouton ne se souligne pas */
.btn:hover{background:var(--bleu-800)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.btn[disabled]{background:#c9d2e0;border-color:#c9d2e0;color:#fff;cursor:not-allowed;transform:none}
/* Le contour d'un bouton secondaire est bleu Moriarty, pas bleu délavé : un
   trait pâle (#c8d4e8) faisait lire « + Analyser un dossier » comme un bouton
   inactif. Yohan, 02/09/2026. */
.btn.fant{background:transparent;color:var(--bleu);border-color:var(--bleu);border-width:1.5px}
.btn.fant:hover{background:var(--bleu-100)}
.btn.discret{background:transparent;border-color:transparent;color:var(--ink-doux);padding:8px 10px}
.btn.discret:hover{background:var(--gris);color:var(--bleu)}
.champ{display:block;margin-bottom:16px;max-width:420px}
.champ span{display:block;font-size:14.5px;font-weight:600;margin-bottom:5px}
.champ input{width:100%;padding:10px 12px;border:1px solid #cfd8e6;border-radius:var(--r-s);font:inherit;
             font-size:15.5px;background:#fff;transition:border-color var(--t),box-shadow var(--t)}
.champ input::placeholder{color:#767f8e}
.champ input:hover{border-color:#adbcd2}
.champ input:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(0,46,114,.12)}
.champ .indice{font-size:14px;color:var(--ink-doux);margin-top:5px}

/* ---------- surfaces ---------- */
.panneau{background:var(--surface);background-clip:padding-box;border:1px solid var(--filet);border-radius:var(--r);padding:20px}
/* LE CHIFFRE-TITRE EST BLEU, ET C'EST LA HIÉRARCHIE DE LA CHARTE. Il a été
   orange, ce qui se défendait : un potentiel détecté ressemble à un verdict, et
   le brand book donne les verdicts à l'orange. Mais c'est le plus gros objet de
   l'écran, à 38 px : lui donner l'accent revient à faire de l'accent la couleur
   dominante, et le book dit exactement l'inverse, « le bleu domine, l'orange
   n'est QU'un accent, jamais l'inverse ».
   Mesuré avant la correction : bleu saturé et orange vif se partageaient
   l'écran à 0,9 pour 1, soit la parité. À parité l'orange gagne toujours, c'est
   la couleur la plus agressive des deux. L'orange reste sur ce qui appelle une
   action unique, pas sur ce qui structure la lecture. */
.montant{font-size:38px;font-weight:800;color:var(--bleu);letter-spacing:-.02em;line-height:1.05}
.montant + .libelle{font-size:15px;color:var(--ink-doux);margin-top:2px;max-width:26ch}
.mesures{display:flex;gap:32px;flex-wrap:wrap;margin:0}
.mesures div{min-width:120px}
.mesures dt{font-size:14px;color:var(--ink-doux)}
.mesures dd{margin:2px 0 0;font-size:20px;font-weight:700;color:var(--bleu)}

/* ---------- tableau ---------- */
.masse{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--bleu-100);
       border:1px solid #c9d9f0;border-radius:var(--r-s);padding:8px 12px;margin-bottom:12px;font-size:15px}
.masse b{color:var(--bleu);margin-right:6px}
.masse .btn{padding:6px 12px;font-size:14.5px}
.outils{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.recherche{flex:1;min-width:230px;max-width:360px;padding:9px 12px;border:1px solid #cfd8e6;
           border-radius:var(--r-s);font:inherit;font-size:15px}
.recherche:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(0,46,114,.12)}
.filtres{display:flex;gap:6px;flex-wrap:wrap}
/* `display:flex` posé ici bat le `[hidden]{display:none}` du navigateur : le
   portefeuille affichait DEUX rangées de filtres identiques, l'une au-dessus de
   l'autre, alors que la seconde portait `hidden` depuis le début. Même collision
   que sur le lien du bandeau du congrès. Constaté le 01/09/2026. */
.filtres[hidden]{display:none}
.puce{background:#fff;border:1px solid #d6dfec;color:var(--ink-doux);border-radius:20px;padding:6px 13px;
      font:inherit;font-size:14.5px;cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t)}
.puce:hover{border-color:var(--bleu);color:var(--bleu)}
.puce[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff;font-weight:600}
.puce:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.collab{font-size:14px;color:var(--ink-doux);white-space:nowrap}
tbody td:first-child{width:34px;padding-right:0}
.suivi{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-doux)}
.pastille{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.pastille.a-faire{background:var(--orange)}
.pastille.encours{background:var(--bleu-pastel)}
.pastille.lance{background:var(--vert)}
.cadre-table{border:1px solid var(--filet);border-radius:var(--r);overflow:auto;background:var(--surface)}
.defile{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:900px}
/* Le nom du dispositif est ce que l'oeil cherche en premier et c'est la chaîne la
   plus longue du tableau : on lui réserve de la place, sans figer la mise en page
   (table-layout:fixed déformait la hauteur des lignes). */
.col-dispositif{min-width:260px;max-width:420px}
/* LE NOM DU CLIENT EST CE QU'ON CHERCHE EN PREMIER, et il tombait sur deux ou
   trois lignes dans cent quarante pixels pendant que la colonne du motif en
   occupait six cent quarante. On rééquilibre : de quoi écrire « Atelier Bois
   du Grand Est » sur deux lignes courtes, et « Fonderie de l'Est » sur une. */
.cadre-table td.principal{min-width:210px}
/* CHAQUE COLONNE A LA PLACE DE SON CONTENU, sinon le navigateur la lui prend
   ailleurs. L'action tombait sur deux lignes (« Répondre à 1 » puis
   « question → ») pendant que la colonne du motif s'étalait : ce n'est pas une
   question de goût, c'est une répartition qui n'était jamais posée. */
.cadre-table th.col-action,.cadre-table td.col-action{width:1%;white-space:nowrap}
.cadre-table td.col-etat{width:1%;white-space:nowrap}
.col-etroit{white-space:nowrap}
/* PLUS DE BARRE BLEUE PLEINE. Un bandeau saturé en tête de tableau est la
   signature d'un outil d'administration ; il pèse plus lourd que les chiffres
   qu'il annonce, alors qu'il ne fait que les nommer. Une étiquette discrète et
   un filet suffisent : le regard descend directement sur les entreprises. */
/* L'EN-TÊTE EST UN APLAT BLEU MORIARTY. Le brand book le dit en toutes
   lettres (« le bleu domine : titres, structures, en-têtes de tableaux »),
   Yohan l'a redemandé le 02/09/2026 à 0 h 15. La version claire de la V1
   voulait alléger ; elle rendait le tableau anonyme. La colonne triée porte le
   trait orange, comme l'onglet courant. */
thead th{background:var(--bleu);color:#fff;text-align:left;
         padding:var(--e1) var(--e3) var(--e2);font-size:var(--tp-label);
         font-weight:var(--gr-fort);letter-spacing:.09em;
         text-transform:uppercase;white-space:nowrap;
         border-bottom:1px solid var(--filet)}
/* DE L'AIR. Huit pixels de haut et douze de large donnaient douze lignes
   collées les unes aux autres, où le nom du client, la commune, l'effectif, le
   motif, son dispositif, l'enjeu, le remboursable, l'état et l'action se
   disputaient la même bande. Un expert-comptable balaie ce tableau ; il ne le
   lit pas ligne à ligne. Constaté le 08/09/2026 sur un portefeuille réel de
   douze dossiers : « ça fait très chargé ». */
tbody td{padding:13px 14px;border-top:1px solid #eef1f6;vertical-align:middle;line-height:1.5}
tbody tr:hover td{background:#fafcff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
td:has(> .btn.discret){vertical-align:middle;text-align:right}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* L'ENJEU EST LA COLONNE QU'ON VIENT LIRE. Il avait la même graisse et la même
   couleur qu'un nom de commune. Il prend le bleu et le poids, son complément
   remboursable passe en dessous, en gris : deux informations, deux niveaux. */
.cadre-table tbody td.num{font-size:16.5px;font-weight:700;color:var(--bleu);
  letter-spacing:-.01em}
.cadre-table tbody td.num .secondaire{display:block;margin-top:2px;font-size:var(--tp-meta);
  font-weight:var(--gr-normal);color:var(--encre-2);letter-spacing:0}
/* LE NOM DE L'ENTREPRISE EST LE POINT D'ENTRÉE DE LA LIGNE. Il partageait sa
   graisse avec le motif et sa taille avec la commune. */
.principal{font-weight:var(--gr-fort);color:var(--bleu);font-size:var(--tp-corps);
  letter-spacing:-.005em}
.cadre-table tbody td.principal .secondaire{font-size:var(--tp-meta);margin-top:2px;
  color:var(--encre-2);font-weight:var(--gr-normal)}
/* Le carré de famille devant le nom : deux lettres dans la couleur de la
   famille du dispositif principal. La colonne se balaie par couleur. */
.pr{display:flex;align-items:flex-start;gap:var(--e2)}
.pr-txt{min-width:0}
.fam{flex:0 0 auto;display:inline-grid;place-items:center;width:30px;height:30px;
  border-radius:7px;font-size:10.5px;font-weight:800;letter-spacing:.04em;margin-top:1px}
.fam-ci{background:var(--bleu-100);color:var(--bleu)}
.fam-sub{background:var(--vert-100);color:var(--vert)}
.fam-pret{background:var(--orange-100);color:var(--orange-txt)}
.fam-statut{background:#eef1f6;color:var(--encre-2)}
/* LE POIDS SUIT L'ENJEU : les trois premières lignes du tri par enjeu. */
.cadre-table tbody tr.fort .principal{font-size:16px}
.cadre-table tbody tr.fort td.num{font-size:19px}
.cadre-table tbody tr.fort td.col-dispositif{font-weight:var(--gr-moyen)}
/* Le motif, le texte le plus long de la ligne : un cran sous le nom, en encre
   pleine, pour rester lisible sans concurrencer le titre. */
.cadre-table tbody td.col-dispositif{font-size:var(--tp-corps);line-height:1.45;color:var(--ink)}
.cadre-table tbody td.col-dispositif .disp{display:block;font-weight:var(--gr-moyen);
  line-height:1.35}
.cadre-table tbody td.col-dispositif .secondaire{font-size:var(--tp-meta);margin-top:var(--e1);
  color:var(--ink-doux)}
/* Une ligne, pas quatre : le motif est du contexte, pas le fait. La règle porte
   la spécificité du sélecteur qu'elle corrige, sinon le `display:block` de
   `.secondaire` gagne et le rognage ne s'applique à rien. */
.cadre-table tbody td.col-dispositif .secondaire.uneligne{
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;line-clamp:1}
/* La prochaine action : un lien, pas un bouton. Il ne se répète pas douze fois
   en orange plein, et il tient sur deux lignes courtes plutôt qu'une longue. */
/* L'ACTION EST UN PETIT BOUTON, PAS UN LIEN ORANGE. Douze liens orange
   identiques faisaient de l'accent la couleur du tableau. Contour bleu au
   repos ; l'orange ne vient qu'au survol, là où il signale. */
.cadre-table tbody .action-ligne{display:inline-block;padding:8px 12px;
  border:1.5px solid var(--bleu);border-radius:var(--r-s);background:var(--surface);
  color:var(--bleu);font-size:var(--tp-meta);font-weight:var(--gr-fort);line-height:1.25;
  text-align:left;white-space:nowrap;transition:border-color var(--t),color var(--t)}
.cadre-table tbody .action-ligne:hover{border-color:var(--orange);color:var(--orange-txt);
  text-decoration:none}
.secondaire{display:block;font-size:13.5px;color:var(--ink-doux);font-weight:400}

/* ---------- états ---------- */
/* LA MÊME GRAMMAIRE QUE LA MATURITÉ DU PORTEFEUILLE. Une pastille pleine par
   ligne, sur cinq dispositifs, dans une colonne étroite : le tableau prenait
   des airs de tableau de bord coloré plutôt que d'état financier. Un point et
   un mot, comme dans la liste des clients. Plein quand c'est acquis, cerclé
   quand cela reste à établir. Un cabinet qui passe du portefeuille à la fiche
   retrouve le même signe pour la même idée. */
.etat{display:inline-block;padding:3px 9px;border-radius:6px;font-size:12.5px;
      font-weight:var(--gr-fort);letter-spacing:.01em;line-height:1.3;white-space:nowrap}
.etat::before{content:none}
/* LA COULEUR EST DANS LE POINT, PAS DANS LE MOT. « À consolider » est l'état
   ORDINAIRE d'un dispositif tant qu'aucun projet n'est décrit : sur cinq
   lignes, cinq libellés orange teintaient toute la colonne d'une alerte qui
   n'en est pas une. Le mot reste en encre, lisible ; c'est le point de sept
   pixels qui porte le sens, et l'orange redevient rare. */
.etat.solide{background:var(--vert-100);color:var(--vert)}
.etat.consolider{background:var(--orange-100);color:var(--orange-txt)}
.etat.competitif{background:var(--bleu-100);color:var(--bleu-800)}

/* Toute case à cocher et tout bouton radio prennent le bleu de la charte. */
input[type="checkbox"],input[type="radio"]{accent-color:var(--bleu)}

/* ---------- listes d'événements ---------- */
ul.flux{list-style:none;padding:0;margin:0}
ul.flux li{display:flex;gap:12px;padding:12px 0;border-top:1px solid #eef1f6;font-size:15px}
ul.flux li:first-child{border-top:0}
.jours{flex:0 0 auto;background:var(--orange-100);color:var(--orange-txt);font-size:13.5px;font-weight:700;
       border-radius:6px;padding:2px 8px;height:fit-content}
.puce-q{flex:0 0 auto;color:var(--orange);font-weight:800}

/* ---------- dépôt de fichier ---------- */
.depot{border:1.5px dashed var(--bleu-pastel);border-radius:var(--r);padding:34px 20px;text-align:center;
       background:#fafcff;transition:border-color var(--t),background var(--t)}
.depot:hover{border-color:var(--bleu);background:var(--bleu-100)}
.depot .fleche{font-size:26px;color:var(--orange);line-height:1}

/* ---------- squelette de chargement ---------- */
.squelette{height:13px;border-radius:6px;background:linear-gradient(90deg,#eef1f6 25%,#e3e8f0 37%,#eef1f6 63%);
           background-size:400% 100%;animation:glisse 1.4s ease-in-out infinite}
@keyframes glisse{0%{background-position:100% 0}100%{background-position:0 0}}
.barre{height:6px;background:var(--gris);border-radius:20px;overflow:hidden}
.barre i{display:block;height:100%;width:72%;background:var(--orange);border-radius:20px;
         transition:width 400ms cubic-bezier(.22,1,.36,1)}

/* ---------- deux colonnes ---------- */
.deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
/* LE BLOC INTERNE. Il doit se distinguer du courriel au premier coup d'oeil,
   sans crier : un filet orange, un libellé, et de l'air. C'est la seule chose
   de cet écran qui ne doit jamais partir. */
.interne{margin-top:26px;padding-top:20px;border-top:1px solid var(--filet)}
.interne-titre{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange)}
.interne-sous{margin:0 0 12px;max-width:60ch}
.interne .courriel{border-left:2px solid var(--orange)}

/* ---- la trame, mise en forme pour être LUE PENDANT L'APPEL ----
   Elle s'affichait en Markdown brut : « ## Trame d'entretien », « **1. ... ?** »,
   trois espaces d'indentation pour « Si oui ». C'était un format d'export devenu
   l'interface par accident. Un expert-comptable au téléphone doit trouver sa
   question suivante d'un coup d'œil, pas la reconstituer.
   L'ORANGE RESTE UN SIGNAL, PAS UN DÉCOR : un filet de deux pixels et une
   étiquette de douze. Aucun aplat, aucun encadré. Le bleu numérote, la
   structure fait le reste. */
.trame{border-left:2px solid var(--orange);padding:2px 0 2px 16px;max-width:70ch}
.trame-client{margin:0;font-weight:700;font-size:15.5px;color:var(--bleu)}
.trame-secteur{margin:3px 0 0;font-size:14px;color:var(--ink-doux)}
.trame-section{margin:22px 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-doux)}
.trame-questions{margin:0;padding:0;list-style:none;counter-reset:trameq}
.trame-questions>li{counter-increment:trameq;margin:0 0 20px}
.trame-questions>li:last-child{margin-bottom:0}
.trame-q{margin:0;font-size:15.5px;font-weight:600;color:var(--ink);text-wrap:balance}
.trame-q::before{content:counter(trameq) ". ";color:var(--bleu);font-weight:700}
.trame-suite{margin:6px 0 0;display:grid;grid-template-columns:max-content 1fr;
  gap:4px 14px;font-size:14.5px;line-height:1.55}
.trame-suite dt{margin:0;color:var(--ink-doux);white-space:nowrap}
.trame-suite dd{margin:0;color:var(--ink)}
.trame-vide{margin:0;color:var(--ink)}
.trame-apres{margin:0;padding-left:18px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.trame-apres li{margin-bottom:5px}
.courriel-aide{margin:12px 0 0;max-width:64ch}
.courriel-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:12px}
.interne-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.interne-pied{margin:10px 0 0;max-width:62ch}

/* 390 px : « Dispositif visé » et sa valeur ne tiennent pas côte à côte. On
   empile, et l'intitulé devient une étiquette au lieu d'une colonne. */
@media (max-width:640px){
  .trame{padding-left:12px}
  .trame-suite{grid-template-columns:1fr;gap:0}
  .trame-suite dt{margin-top:8px;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
  /* `balance` équilibre les lignes d'un titre large ; à 390 px il fabrique
     trois lignes courtes là où deux pleines se lisent mieux. */
  .trame-q{text-wrap:auto}
  /* L'aperçu du courriel est du texte brut en chasse fixe : à cette largeur,
     deux caractères de moins par ligne changent la lecture. */
  .courriel{font-size:13px;padding:13px;line-height:1.6}
}
.courriel{background:var(--gris);border-radius:var(--r-s);padding:16px;font-size:14.5px;line-height:1.65;
          white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- vide ---------- */
.vide{text-align:center;padding:40px 20px;color:var(--ink-doux)}
.vide b{display:block;color:var(--bleu);font-size:16px;margin-bottom:6px}

.burger{display:none;background:transparent;border:0;font-size:19px;color:#fff;cursor:pointer;
        padding:6px 8px;border-radius:var(--r-s)}
.burger:hover{background:rgba(255,255,255,.12)}
.burger:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:720px){
  .burger{display:block}
  /* Le menu déplié prolonge la barre : même bleu, mêmes blancs. Un panneau
     blanc sous une barre bleue aurait rendu ses liens blancs illisibles. */
  .onglets{position:absolute;top:58px;left:0;right:0;background:var(--bleu);border-bottom:0;
           flex-direction:column;height:auto;padding:6px 0;display:none;box-shadow:0 8px 20px rgba(0,20,60,.18)}
  .onglets[data-ouvert]{display:flex}
  .onglets a{padding:12px 20px;border-bottom:0;border-left:3px solid transparent}
  .onglets a[aria-current="page"]{border-left-color:var(--orange);background:rgba(255,255,255,.1)}
  .cabinet-bouton > span:first-child{display:none}
  .montant{font-size:30px}
  main{padding:20px 16px 56px}
  .appbar{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---- ajouts propres à l'application ---- */
.vue{display:none}
/* FONDU SEUL, SANS DÉCALAGE (17/10/2026). La vue porte la barre du pouce et
   d'autres éléments fixés à l'écran. Un `transform`, même de 4 px et même le
   temps d'une animation, fait de la vue leur repère : la barre suivait alors la
   page au lieu de rester en bas de l'écran. Le fondu suffit à l'œil. */
.vue[data-actif]{display:block;animation:apparaitFondu var(--t) both}
@keyframes apparaitFondu{from{opacity:0}to{opacity:1}}
.centre{max-width:460px;margin:8vh auto}
/* Écran d'accueil : deux colonnes, la promesse à côté du formulaire. Un formulaire
   seul au milieu du vide ne dit pas ce qu'on obtient en le remplissant. */
.accueil{max-width:1000px;margin:5vh auto 0}
.accueil h1{font-size:30px;max-width:18ch}
.accueil .chapeau{font-size:16px;margin-bottom:26px}
.accueil .puce-q{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
                 background:var(--bleu);color:#fff;font-size:13.5px;font-weight:700}
.erreur{background:#fff4f0;border:1px solid #f3c9b2;color:var(--orange-txt);
        border-radius:var(--r-s);padding:11px 14px;font-size:15px;margin-bottom:14px}
.charge{display:inline-block;width:14px;height:14px;border:2px solid #cfd8e6;
        border-top-color:var(--bleu);border-radius:50%;animation:tourne .7s linear infinite;
        vertical-align:-2px;margin-right:8px}
@keyframes tourne{to{transform:rotate(360deg)}}
tbody tr{cursor:pointer}
.muet{color:var(--ink-doux)}
#lienRetour{background:none;border:0;color:var(--bleu);font:inherit;font-size:15px;
            cursor:pointer;padding:0;margin-bottom:10px}
#lienRetour:hover{text-decoration:underline}
.suivi{white-space:nowrap}
td.coche, th.coche{width:34px;padding-right:0;vertical-align:middle}
.deuxlignes{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
            overflow:hidden;line-height:1.5}
.etat{max-width:none}
tbody td{padding-top:13px;padding-bottom:13px}


/* ---- tri, pagination, dépôt ---- */
th.triable{cursor:pointer;user-select:none}
th.triable:hover{background:var(--bleu-800)}
thead th[aria-sort="ascending"],thead th[aria-sort="descending"]{box-shadow:inset 0 -3px 0 var(--orange)}
thead th input[type="checkbox"]{accent-color:var(--orange)}
th.triable:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.pagination{display:flex;align-items:center;gap:14px;justify-content:flex-end;margin-top:12px}
.pagination .btn[disabled]{opacity:.45;cursor:not-allowed}
.depot.survol{border-color:var(--orange);background:var(--orange-100)}
.depot{cursor:pointer}


/* ---- la barre du logo est BLANCHE ----
   Elle a été bleue du 3 au 27 août 2026, au motif que le bleu est la couleur
   dominante de la charte. C'est vrai des surfaces, pas de la zone du logo : le
   wordmark Moriarty est dessiné pour du blanc, et il n'atteint sur le bleu que
   3,3:1, soit le minimum d'un élément graphique, jamais le confort d'une
   signature. Arbitrage de Yohan, déjà posé sur la maquette du hero puis reperdu
   à l'intégration : la barre est blanche, la marque y respire, et le bleu
   commence juste en dessous avec le hero. Deux aplats francs valent mieux qu'un
   dégradé de bleus qui se ressemblent.

   Aucune règle de couleur n'est nécessaire ici : les styles de base de
   `.onglets`, `.cabinet` et `.burger` sont déjà écrits pour un fond clair
   (encre douce, bleu au survol, souligné orange sur l'onglet courant). Les
   rétablir revient à supprimer ce qui les écrasait. Un test verrouille la
   couleur du fond. */

/* ---- la marque est permanente ----
   Masquer la barre entière avant connexion faisait disparaître le logo de l'écran
   d'accueil, c'est-à-dire du seul écran que voit un cabinet qui découvre l'outil.
   On masque désormais la navigation et le compte, jamais la marque. */
body[data-connecte="non"] .onglets,
body[data-connecte="non"] .cabinet,
body[data-connecte="non"] .burger{display:none}
body[data-connecte="non"] .appbar{justify-content:space-between;height:66px}
/* Les deux actions de l'écran d'arrivée : entrer pour qui a déjà un accès,
   ouvrir pour qui n'en a pas. Elles n'existent que là, et disparaissent dès
   qu'une session est ouverte, où la navigation reprend la place. */
.appbar-arrivee{display:none}
body[data-etape="ouvrir"] .appbar-ouvrir,
body[data-etape="envoye"] .appbar-ouvrir,
body[data-etape="ouvrir"] .appbar-connexion{display:none}
body[data-connecte="non"] .appbar-arrivee{
  display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);margin-left:auto;
}
.appbar-connexion{
  font-size:15px;font-weight:600;color:#fff;text-decoration:none;
  border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color var(--t);
  white-space:nowrap;
}
.appbar-connexion:hover{border-bottom-color:rgba(255,255,255,.5)}
.appbar-connexion:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Sur le bleu, un bouton bleu disparaît et un bouton orange tombe sous AA
   (blanc sur orange : 3,94:1). Le bouton d'ouverture est blanc, texte bleu :
   12,85:1, et c'est le blanc-sur-bleu de la charte. */
.btn.appbar-ouvrir{
  background:#fff;border-color:#fff;color:var(--bleu);
  font-size:15px;padding:10px 18px;white-space:nowrap;
}
.btn.appbar-ouvrir:hover{background:var(--bleu-100);border-color:var(--bleu-100);color:var(--bleu);filter:none}
@media (max-width:560px){
  .appbar-connexion{font-size:14px}
  .btn.appbar-ouvrir{font-size:14px;padding:9px 13px}
  .btn.appbar-ouvrir svg{display:none}
  body[data-connecte="non"] .appbar{gap:10px;padding:0 14px}
}
body[data-connecte="non"] .appbar .marque svg{height:32px;width:114px}
/* La marque agrandie mangeait la marge de la barre sur un petit téléphone : les
   deux actions venaient toucher le bord. Sous 560 px c'est la place qui
   commande, elle reprend donc sa taille précédente. Écrite APRÈS la règle
   générale, sans quoi, à spécificité égale, c'est cette dernière qui l'emporte
   et la règle du petit écran ne s'applique jamais. */
@media (max-width:560px){
  body[data-connecte="non"] .appbar .marque svg{height:26px;width:93px}
  body[data-connecte="non"] .appbar{padding:0 12px;gap:8px}
}
/* Le logo n'est JAMAIS recoloré (brand book, page des interdits) : il reste dans
   son orange d'origine, y compris sur le bleu. Contraste mesuré 3,1:1, au-dessus
   du seuil de 3:1 applicable aux éléments graphiques. */


/* Le geste de conversion porte l'accent de la charte : c'est la seule action
   orange de l'application, pour qu'elle ne se confonde avec aucune autre. */
.btn.orange{background:var(--orange);border-color:var(--orange)}
/* survol sans inventer de teinte : on assombrit l'orange officiel */
.btn.orange:hover{filter:brightness(.92)}
.journal-date{font-variant-numeric:tabular-nums;white-space:nowrap}


/* ---- lisibilité du bandeau clé ----
   Le libellé se comprimait en colonne étroite à côté du chiffre : il tenait sur
   quatre lignes de trois mots. On lui rend de la largeur et on descend la
   fourchette sous le montant, à qui elle appartient. */
.montant + .libelle{max-width:34ch;font-size:15px;line-height:1.55}
.montant + .libelle span{display:block;margin-top:4px;color:var(--ink-doux)}

/* ---- légende dépliable ---- */
.legende{margin-top:14px;border-top:1px solid var(--filet);padding-top:12px}
.legende summary{cursor:pointer;font-size:15px;font-weight:600;color:var(--bleu);
                 list-style:none;padding:4px 0}
.legende summary::-webkit-details-marker{display:none}
.legende summary::before{content:"?";display:inline-grid;place-items:center;width:18px;height:18px;
   border-radius:50%;background:var(--bleu-100);color:var(--bleu);font-size:12.5px;margin-right:8px}
.legende[open] summary{margin-bottom:8px}
.legende p{font-size:15px}
.legende .flux li{align-items:flex-start;gap:10px;font-size:15px}
.legende .etat{flex:0 0 auto;margin-top:1px}

/* ---- aperçu du document ---- */
.onglets-doc{display:flex;gap:6px;margin-bottom:12px}
.marque{text-decoration:none;display:flex;align-items:center;gap:10px;border-radius:var(--r-s)}
.marque:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.ligne-dispositif{cursor:pointer}
.detail-dispositif{background:var(--gris)}
.detail-dispositif td{padding:14px 16px;font-size:14.5px}

/* ---- cartouche de tête du portefeuille ----
   L'ancien bandeau posait un chiffre géant à gauche et un paragraphe de méthode à
   droite : deux tiers de la largeur ne servaient qu'à se justifier. Le chiffre
   garde sa place, la largeur récupérée porte la segmentation puis l'action. */
.cartouche{background:var(--surface);border:1px solid var(--filet);border-radius:var(--r);
           overflow:hidden}
.cartouche-tete{display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:28px;
                align-items:center;padding:22px 26px}
/* Le filet suit le chiffre qu'il souligne : bleu comme lui. */
/* LE MÊME GESTE POUR LA MÊME IDÉE. Le potentiel du portefeuille est posé sur
   un fond bleu Moriarty ; celui de la fiche l'était sur du blanc avec un filet.
   Deux traitements pour un seul concept obligent à réapprendre l'écran. Même
   fond, même hiérarchie, d'un écran à l'autre. */
.cartouche-cle{background:var(--bleu-100);border-radius:var(--r-s);
               padding:16px 18px;align-self:start}
.sur-titre{display:block;font-size:var(--tp-label);font-weight:var(--gr-fort);
           letter-spacing:.09em;text-transform:uppercase;color:var(--orange-txt)}
.cartouche .montant{margin-top:6px;font-size:40px}
.cartouche .fourchette{display:block;margin-top:4px;font-size:14px;color:var(--ink-doux)}

.mesures-cle{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
             gap:0;margin:0}
.mesures-cle > div{padding:2px 0 2px 22px;border-left:1px solid var(--filet)}
.mesures-cle > div:first-child{border-left:none;padding-left:0}
.mesures-cle dt{font-size:14px;color:var(--ink-doux);line-height:1.3}
.mesures-cle dd{margin:4px 0 0;font-size:22px;font-weight:700;color:var(--bleu);
                letter-spacing:-.01em;line-height:1.1}
.mesures-cle .appoint{display:block;margin-top:3px;font-size:13.5px;font-weight:400;
                      color:var(--ink-doux)}

.cartouche-pied{border-top:1px solid var(--filet);background:var(--gris);
                padding:14px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.prochain{margin:0;flex:1;min-width:260px;font-size:15px;color:var(--ink)}
.prochain b{color:var(--bleu)}
.prochain .lien-dossier{background:none;border:none;padding:0;font:inherit;font-weight:700;
   color:var(--orange-txt);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.prochain .lien-dossier:hover{color:var(--orange)}
.prochain .lien-dossier:focus-visible{outline:2px solid var(--orange);outline-offset:2px;
                                      border-radius:3px}
.methode{font-size:14.5px}
.methode summary{cursor:pointer;color:var(--bleu);font-weight:600;list-style:none;
                 white-space:nowrap}
.methode summary::-webkit-details-marker{display:none}
.methode summary::before{content:"i";display:inline-grid;place-items:center;width:17px;height:17px;
   border-radius:50%;background:var(--bleu-100);color:var(--bleu);font-size:12.5px;
   font-style:italic;margin-right:7px}
.methode[open]{flex:1 0 100%}
.methode p{margin:10px 0 0;font-size:14.5px;color:var(--ink-doux);max-width:78ch}

@media (max-width:880px){
  .cartouche-tete{grid-template-columns:1fr;gap:20px}
  .cartouche .montant{font-size:34px}
  .mesures-cle > div{padding-left:0;border-left:none}
  .mesures-cle{gap:14px 24px}
}
.mesures-cle dd.compact{font-size:17px;line-height:1.25}
.cartouche .montant{white-space:nowrap}
.cartouche .approx{display:block;font-size:16px;font-weight:600;color:var(--ink-doux);
                   letter-spacing:0;margin-bottom:-4px}

/* La fiche client reprend le cartouche, mais son côté droit porte les actions
   plutôt que des mesures : sur une fiche, la question n'est plus « combien »
   mais « qu'est-ce que j'en fais ». */
.cartouche-fiche{grid-template-columns:minmax(230px,340px) 1fr}
/* Deux actions, une seule primaire, alignées sur une ligne qui ne se replie pas :
   trois boutons dont deux pleins se disputaient la hiérarchie, et le troisième
   passait à la ligne. */
.actions-fiche{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.actions-fiche .btn{white-space:nowrap}
@media (max-width:880px){
  .cartouche-fiche{grid-template-columns:1fr}
  .actions-fiche{justify-content:flex-start}
}

/* ---- niveau de détail d'un dossier ----
   Quatre marches, jamais une note sur 100 : « 20/100 » se lit comme un bulletin
   scolaire et laisse croire que le calcul de Moriarty ne vaut rien. Les marches
   se remplissent en BLEU, la couleur dominante de la charte. L'orange resterait
   lu comme une alerte, or il n'y a rien à corriger : il y a une progression. */
.marches{display:inline-flex;gap:3px;align-items:center}
.marches i{display:block;width:14px;height:5px;border-radius:2px;background:var(--filet)}
.marches i.pleine{background:var(--bleu-pastel)}
.marches.bon i.pleine, .marches.fort i.pleine{background:var(--bleu)}
.marches.grandes i{width:34px;height:8px;border-radius:3px}

.niv{display:inline-flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}
.niv b{font-weight:600;color:var(--ink-doux)}

.fiab-tete{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:14px}
#fiabMarches{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.marches-txt{font-size:14.5px;font-weight:700;color:var(--bleu);white-space:nowrap}
.fiab-intro{margin:0 0 14px;font-size:15px;color:var(--ink)}

/* Ce que Moriarty sait déjà. Volontairement sobre : c'est un état des lieux,
   pas une récompense. Les cartes d'apport, elles, appellent une action. */
.fiab-connu{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 14px}
.fiab-connu span{display:inline-flex;align-items:baseline;gap:7px;font-size:14.5px}
.fiab-connu .coche{color:var(--bleu);font-weight:700}
.fiab-connu .partiel .coche{color:var(--ink-doux)}
.fiab-connu .provenance{color:var(--ink-doux);font-size:var(--tp-meta)}

/* ================================== LE TÉLÉPHONE N'EST PAS UN BUREAU ÉTROIT ==
   Deux blocs de l'écran de qualification étaient des lignes horizontales
   « intitulé à gauche, précision à droite ». Repliés dans trois cent
   soixante-quinze pixels, ils devenaient deux colonnes de trois mots qui
   descendaient chacune sur deux ou trois lignes : « Chiffre / d'affaires »
   d'un côté, « comptes publiés ou saisie du / cabinet » de l'autre. Le fait et
   sa source se lisent alors en zigzag.

   Sur téléphone, la précision passe SOUS ce qu'elle précise. Même hiérarchie
   métier, présentation adaptée. */
@media (max-width:560px){
  .fiab-connu{gap:var(--e3) 0}
  .fiab-connu > span{width:100%;flex-wrap:wrap}
  .fiab-connu > span > .provenance{flex:1 0 100%;padding-left:22px;box-sizing:border-box}
  /* « fait passer ce dossier au niveau 4 » et son action se partageaient une
     ligne de deux cent quarante pixels, en trois colonnes. */
  .apport-vers{flex-wrap:wrap;gap:var(--e1) var(--e2)}
  .apport-vers .apport-action,
  .apport-vers .apport-bientot{flex:1 0 100%;margin-top:var(--e1)}
}
/* Les quatre marches. Celle qui est atteinte porte le seul accent de couleur :
   quatre lignes également mises en avant ne diraient plus laquelle est la vôtre. */
.fiab-paliers{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.fiab-paliers li{display:flex;gap:10px;align-items:baseline;padding:7px 10px;
       border-radius:var(--r-s);font-size:14px;color:var(--ink-doux)}
.fiab-paliers li .rang{font-weight:700;min-width:78px}
.fiab-paliers li.atteint{background:var(--bleu-100);color:var(--bleu)}
.fiab-paliers li.atteint .rang{color:var(--bleu)}
.fiab-apports{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.apport{display:flex;flex-direction:column;justify-content:space-between;gap:10px;
        background:var(--gris);border:1px solid var(--filet);border-radius:var(--r-s);
        padding:14px;transition:border-color var(--t),background var(--t)}
.apport:hover{border-color:var(--bleu-pastel);background:#fff}
.apport b{display:block;color:var(--bleu);font-size:15px}
.apport .secondaire{display:block;margin-top:4px;font-size:14.5px;line-height:1.55}
.apport .aide{display:block;margin-top:6px;font-size:13.5px}
.apport-vers{display:flex;align-items:baseline;gap:5px;font-size:13.5px;color:var(--ink-doux);
             border-top:1px solid var(--filet);padding-top:9px}
.apport-vers b{display:inline;color:var(--bleu);font-size:14.5px}

/* ---- aperçu du diagnostic, rendu par la page ----
   Reprend la mise en page du PDF : marge blanche, en-tête au nom du cabinet,
   montant en accent orange, tableau sobre. L'expert-comptable doit reconnaître
   à l'écran le document que son client recevra. */
.apercu{padding:0;overflow:hidden;background:var(--gris)}
.apercu-page{background:#fff;margin:20px;padding:30px 34px;border:1px solid var(--filet);
             border-radius:var(--r-s)}
.apercu-pied{margin:0;padding:12px 20px 16px;border-top:1px solid var(--filet)}
.apercu-pied a{color:var(--bleu);font-weight:600}
.doc-tete{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
          border-bottom:2px solid var(--bleu);padding-bottom:8px;margin-bottom:18px;
          font-size:13.5px;flex-wrap:wrap}
.doc-cabinet{font-weight:700;color:var(--bleu);text-transform:uppercase;letter-spacing:.06em}
.doc-date{color:var(--ink-doux)}
.doc-titre{margin:0;font-size:21px;color:var(--bleu)}
.doc-sous{margin:3px 0 18px;font-size:14px;color:var(--ink-doux)}
.doc-cle{background:var(--orange-100);border-radius:var(--r-s);padding:14px 16px;margin-bottom:22px}
.doc-cle b{display:block;font-size:26px;color:var(--orange);letter-spacing:-.01em}
.doc-cle span{font-size:14px;color:var(--ink-doux)}
.doc-h4{margin:22px 0 8px;font-size:14.5px;color:var(--bleu);text-transform:uppercase;
        letter-spacing:.05em}
/* Liste plutôt que tableau : la règle globale `table` impose min-width:900px
   pour les tableaux de données qui défilent, et l'aperçu doit au contraire tenir
   dans la page comme le PDF. Une liste évite ce conflit et se replie mieux. */
.doc-liste{list-style:none;margin:0;padding:0}
.doc-liste li{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
              border-bottom:1px solid var(--filet);padding:11px 0}
.doc-liste li:last-child{border-bottom:none}
.doc-disp{flex:1;min-width:0}
.doc-disp b{display:block;font-size:14.5px;color:var(--ink);line-height:1.5}
.doc-disp span{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-doux);line-height:1.55}
.doc-chiffre{flex:0 0 auto;text-align:right}
.doc-chiffre b{display:block;font-size:14.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.doc-chiffre span{display:block;margin-top:3px;font-size:13px;color:var(--ink-doux)}
.doc-questions{margin:0;padding-left:20px;font-size:14.5px;line-height:1.6}
.doc-mentions{margin:22px 0 0;padding-top:12px;border-top:1px solid var(--filet);
              font-size:13px;color:var(--ink-doux);line-height:1.5}

/* ---- proposition de montage, en fin de fiche ---- */

.carte-montage h2{margin:0 0 6px;font-size:17px}
.carte-montage p{margin:0;font-size:15px;color:var(--ink);max-width:62ch}
/* (voir plus bas : la mise en ligne des enfants directs a été retirée) */
.carte-montage .btn{flex:0 0 auto;white-space:nowrap}

/* ---- tableaux en cartes sur mobile ----
   Un tableau qui défile horizontalement met hors écran la colonne qui justifie
   le produit : sur téléphone, le potentiel disparaissait à droite. Chaque ligne
   devient donc une carte, la case à cocher tenant la gouttière de gauche pour
   que les actions de masse restent possibles.

   L'en-tête n'est pas masqué avec display:none, qui le retirerait aussi des
   lecteurs d'écran : il est simplement sorti du cadre visible. */
@media (max-width:760px){
  .cadre-table{border:none;background:transparent;border-radius:0}
  .cadre-table .defile{overflow-x:visible}
  .cadre-table table{display:block;min-width:0;width:100%;font-size:15px}
  .cadre-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
                     white-space:nowrap}
  .cadre-table tbody{display:block}
  .cadre-table tbody tr{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 12px;
        background:var(--surface);border:1px solid var(--filet);border-radius:var(--r-s);
        padding:14px;margin-bottom:10px}
  .cadre-table tbody tr:nth-child(even){background:var(--surface)}
  .cadre-table tbody td{display:flex;justify-content:space-between;align-items:baseline;
        gap:16px;grid-column:2;border:none;padding:5px 0;width:auto;max-width:none}
  .cadre-table tbody td::before{content:attr(data-libelle);flex:0 0 auto;
        color:var(--ink-doux);font-size:14px}
  .cadre-table tbody td:not([data-libelle]){display:block}

  /* LA CASE À COCHER DISPARAÎT SUR TÉLÉPHONE. Elle sert à traiter plusieurs
     dossiers d'un coup, geste de bureau, et elle prenait vingt-deux pixels de
     gouttière sur trois cent quatre-vingt-dix. Debout dans une allée de congrès,
     on lit, on ne fait pas de sélection multiple. */
  .cadre-table tbody td.coche{display:none}
  .cadre-table tbody tr{grid-template-columns:minmax(0,1fr)}
  .cadre-table tbody td{grid-column:1}

  /* « Pourquoi elle remonte » écrasait deux colonnes de texte dans deux
     gouttières étroites : trois lignes hachées d'un côté, six de l'autre. Le
     libellé passe au-dessus, le texte prend toute la largeur. */
  .cadre-table tbody td.col-dispositif{display:block}
  .cadre-table tbody td.col-dispositif::before{display:block;margin-bottom:2px}
  .cadre-table tbody td.col-dispositif .deuxlignes{text-align:left}
  .cadre-table tbody td.col-dispositif .secondaire{display:block;margin-top:3px}

  /* le nom du client tient lieu de titre de carte */
  .cadre-table tbody td.principal{padding:0 0 8px;font-size:16px;font-weight:700;
        color:var(--bleu);border-bottom:1px solid var(--filet);margin-bottom:6px}
  .cadre-table tbody td.principal .secondaire{font-weight:400;font-size:14px;margin-top:3px}

  /* le potentiel est la raison d'être de l'écran : il reprend son poids */
  .cadre-table tbody td.num{font-size:16px;font-weight:700;color:var(--bleu);
        font-variant-numeric:tabular-nums}
  .cadre-table tbody td.num::before{font-weight:400;color:var(--ink-doux);font-size:14px}
  .cadre-table tbody td .deuxlignes{-webkit-line-clamp:3;text-align:right}
  .cadre-table tbody td.cellule-action{padding-top:12px}
  .cadre-table tbody td.cellule-action .btn{width:100%;justify-content:center}

  /* lignes de détail dépliées sous un dispositif : elles n'ont pas de libellé */
  .cadre-table tbody tr.detail-dispositif{display:block}
  .cadre-table tbody tr.detail-dispositif td{display:block;grid-column:auto}
  .cadre-table tbody tr.ligne-dispositif td.principal .secondaire{display:none}

  /* une ligne « Collaborateur — » n'apprend rien et coûte une ligne d'écran :
     sur téléphone, une cellule vide disparaît au lieu d'occuper la place. */
  .cadre-table tbody td.cel-vide{display:none}

  .pagination{justify-content:space-between}
  .journal-date{white-space:normal}
}

/* ---- questionnaire de qualification ---- */
.qualif{border:1px solid var(--filet);border-radius:var(--r-s);padding:14px 16px;margin:0 0 12px;
        background:var(--gris)}
.qualif legend{font-weight:700;color:var(--bleu);font-size:15px;padding:0 6px;line-height:1.55}
.qualif .aide{margin:2px 0 10px}
.qualif-choix{display:flex;gap:8px;flex-wrap:wrap}
.qualif-choix label{display:inline-flex;align-items:center;gap:7px;background:#fff;
        border:1px solid #d6dfec;border-radius:20px;padding:7px 14px;font-size:15px;
        cursor:pointer;transition:border-color var(--t),background var(--t)}
.qualif-choix label:hover{border-color:var(--bleu)}
.qualif-choix input{accent-color:var(--bleu);margin:0}
.qualif-choix label:has(input:checked){background:var(--bleu);border-color:var(--bleu);color:#fff}
.qualif-choix label:focus-within{outline:2px solid var(--orange);outline-offset:2px}
.qualif-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.deux.qualif-ouverte{grid-template-columns:1fr}
@media (min-width:900px){
  .qualif-ouverte #qualifChamps{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .qualif-ouverte .qualif{margin:0}
}

/* ---- carte de montage, en fin de fiche ---- */
.carte-montage{background:var(--panneau);border:1px solid var(--filet);
        border-radius:var(--r);padding:20px 24px;margin-top:22px}
.carte-montage h2{margin:0 0 4px;font-size:17px}
.carte-montage p{margin:0;font-size:15px;color:var(--ink-doux);max-width:60ch}

/* ---- retour d'activité et filet d'annulation ---- */
.barre-activite{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;
                transform:scaleX(0);transform-origin:left;background:var(--orange);
                transition:transform .35s ease;pointer-events:none}
body.occupe .barre-activite{transform:scaleX(.85);transition:transform 2.5s cubic-bezier(.1,.8,.2,1)}

.bandeau-annuler{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;
        display:flex;align-items:center;gap:16px;background:var(--bleu);color:#fff;
        border-radius:var(--r);padding:12px 14px 12px 20px;font-size:15px;
        box-shadow:0 10px 30px rgba(0,46,114,.28);max-width:calc(100vw - 32px)}
.bandeau-annuler .btn.discret{color:#fff;border-color:rgba(255,255,255,.45);
        background:transparent;font-weight:700;padding:7px 14px}
.bandeau-annuler .btn.discret:hover{background:rgba(255,255,255,.14);color:#fff}

/* ---- squelette de fiche ----
   Les blocs gardent leur place pendant le chargement : la page ne saute pas au
   moment où les données arrivent. */
.squelette .cartouche, .squelette .section, .squelette #ficheNom, .squelette #ficheSous,
.squelette .carte-montage{position:relative;overflow:hidden}
.squelette #ficheNom, .squelette #ficheSous{min-height:1em;border-radius:6px;
        background:var(--filet);color:transparent}
.squelette #ficheNom{width:min(320px,60%)}
.squelette #ficheSous{width:min(440px,80%)}
.squelette .cartouche, .squelette .carte-montage{min-height:118px;background:var(--gris);
        border-color:var(--filet)}
.squelette .cartouche *, .squelette .carte-montage *{visibility:hidden}
.squelette .section{opacity:.35}
.squelette .cartouche::after, .squelette #ficheNom::after, .squelette #ficheSous::after{
        content:"";position:absolute;inset:0;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
        animation:balayage 1.2s infinite}
@keyframes balayage{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .barre-activite,.squelette .cartouche::after,.squelette #ficheNom::after,
  .squelette #ficheSous::after{animation:none;transition:none}
}

/* ---- bouton en apparence de lien, pour une action secondaire dans un texte ---- */
.lien-texte{background:none;border:none;padding:0;font:inherit;color:var(--bleu);
        font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lien-texte:hover{color:var(--orange-txt)}
.lien-texte:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:3px}
textarea{font:inherit;font-size:15px;padding:10px 12px;border:1px solid #cfd8e6;
         border-radius:var(--r-s);resize:vertical;width:100%}
textarea:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(0,46,114,.12)}
.bandeau-annuler.erreur-bandeau{background:var(--orange)}

/* Un message d'information n'est pas une erreur : effacer ses données est une
   action réussie, l'annoncer en rouge la ferait passer pour un incident. */
.erreur.info{background:var(--bleu-100);border-color:#c9d9f0;color:var(--bleu)}

/* ---- prise de rendez-vous de montage ----
   La carte passe en bloc quand le formulaire s'ouvre : en ligne, les trois
   champs se serreraient contre le texte de présentation. */
.carte-montage{display:block}
/* RÈGLE ATTRAPE-TOUT RETIRÉE (le même défaut que sur le cartouche du montant).
   « .carte-montage > div » mettait en ligne TOUS les enfants directs de la
   carte. Elle avait été écrite quand la carte n'en avait qu'un. Elle en a
   quatre aujourd'hui, et chacun déclare sa propre mise en page :
     - « montage-tete » devenait une rangée : le titre à gauche, la phrase
       d'introduction rejetée à droite, l'arithmétique des honoraires sur une
       troisième ligne ;
     - « voies » déclare display:grid pour poser les deux voies côte à côte ;
       la règle, plus spécifique, la repassait en flex et les voies se
       repliaient l'une sous l'autre dans une demi-colonne ;
     - « montage-champs » déclare une grille de champs, écrasée de même.
   Trois mises en page déclarées, trois annulées par une règle plus spécifique
   écrite plus haut. */
.montage-intro{margin:16px 0 12px;font-size:15px;color:var(--ink)}
.montage-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
        gap:14px;margin-bottom:12px}
.montage-champs .champ{margin:0;max-width:none}
.case{display:flex;align-items:center;gap:9px;font-size:15px;cursor:pointer;margin-bottom:12px}
.case input{accent-color:var(--bleu);width:16px;height:16px;margin:0;flex:0 0 auto}
.montage-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---- volet financement ----
   Visuellement distinct du potentiel, et jamais dans la même couleur : l'orange
   est réservé au gain qui entre en trésorerie. Un prêt se rembourse, il ne se
   confond pas avec un crédit d'impôt. */
.financement{margin-top:12px;padding-top:10px;border-top:1px dashed var(--filet);
             font-size:14.5px;line-height:1.55;max-width:42ch}
.financement b{color:var(--bleu);font-size:15px}
.financement span{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-doux)}

/* Qui monte les dossiers. Placé dans la carte de montage et nulle part ailleurs :
   le diagnostic PDF part sous la marque du CABINET, chez son client final. Y
   glisser Moriarty briserait le blanc de marque qui fait la valeur du gratuit. */
.equipe{margin:12px 0 0;padding:12px 14px;background:var(--surface);
        border-left:3px solid var(--bleu);border-radius:0 var(--r-s) var(--r-s) 0;
        font-size:15px;line-height:1.5;max-width:66ch}
.equipe b{color:var(--bleu)}

/* ---- les deux voies du montage ----
   Côte à côte et de poids visuel proche : un cabinet structuré qui veut garder
   la main ne doit pas lire « déléguer ou rien ». L'accent orange marque la voie
   qui mobilise nos juristes, pas la voie « recommandée ». */
.montage-tete{margin-bottom:var(--e5)}
.montage-tete h2{margin:0 0 var(--e2)}
.montage-tete p{margin:0 0 var(--e2)}
.voies{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.voie{background:var(--surface);border:1px solid var(--filet);border-radius:var(--r-s);
      padding:var(--e5) var(--e5);display:flex;flex-direction:column;gap:var(--e3)}
.voie-accent{border-color:var(--orange);border-width:1px}
.voie h3{margin:0;font-size:var(--tp-sous);color:var(--bleu);font-weight:var(--gr-fort)}
/* flex:1 RETIRÉ. Il faisait grandir CHAQUE paragraphe de la voie pour occuper
   la hauteur restante : la carte la plus courte s'étirait, et un trou de cent
   pixels s'ouvrait entre la promesse et la description. Le bouton porte déjà
   « margin-top:auto », ce qui suffit à l'aligner en bas des deux cartes. */
.voie p{margin:0;font-size:var(--tp-corps);line-height:1.5;color:var(--ink-doux)}
.voie .equipe{margin:0;padding:0;background:none;border:none;max-width:none}
.voie .btn{align-self:flex-start}
.voie .btn[disabled]{opacity:.5}

/* ---- l'arithmétique de l'offre, écrite en toutes lettres ----
   Trois grandeurs distinctes : ce que paie le client, ce que garde le bureau, ce
   que coûte la licence. Les confondre coûte la confiance d'un cabinet. */
.calcul{display:block;margin-top:10px;font-size:15px;line-height:1.7;color:var(--ink-doux)}
.calcul b{color:var(--bleu)}
.calcul b.gain{color:var(--orange-txt);font-size:16px}
.licence{display:block;margin-top:10px;padding:10px 14px;border-radius:var(--r-s);
         background:var(--bleu-100);color:var(--bleu);font-size:15px;font-weight:600}
.licence.ok{background:var(--vert-100);color:var(--vert)}
.couverture-licence{flex:1 0 100%;margin:0 0 10px;padding:10px 14px;border-radius:var(--r-s);
        background:var(--vert-100);color:var(--vert);font-size:15px;line-height:1.5}
.couverture-licence b{font-weight:700}

/* ---- comparateur de formules ----
   Les deux cartes ont le même poids : celle qui est recommandée l'est par le
   calcul, pas par le design. Mettre en avant la plus chère se verrait. */
.baremes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.bareme{position:relative;background:var(--surface);border:1px solid var(--filet);
        border-radius:var(--r-s);padding:18px 20px}
.bareme.recommande{border-color:var(--vert);background:var(--vert-100)}
.bareme h3{margin:0 0 4px;font-size:16px;color:var(--bleu)}
.bareme .aide{margin:0 0 12px}
.bareme-net b{display:block;font-size:22px;font-weight:800;color:var(--bleu);
              letter-spacing:-.01em}
.bareme.recommande .bareme-net b{color:var(--vert)}
.bareme-net span{display:block;margin-top:2px;font-size:14px;color:var(--ink-doux)}
.bareme.gratuit{border-color:var(--vert);background:var(--vert-100)}
.bareme.gratuit .bareme-net b{color:var(--vert)}
.bareme .qui{margin:0 0 12px;font-size:14px;color:var(--ink-doux);font-style:italic}
.seuil{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--ink-doux)}
.seuil.ok{color:var(--vert);font-weight:600}

/* ---- densité du cartouche sur téléphone ----
   Le cartouche occupait tout le premier écran : montant, quatre mesures avec
   leurs légendes, puis une phrase de cinq lignes. Il fallait faire défiler deux
   fois avant de voir un seul client, c'est à dire avant de voir le produit. */
@media (max-width:760px){
  .cartouche-tete{padding:16px 18px 12px;gap:14px}
  .cartouche .montant{font-size:31px}
  .cartouche .approx{font-size:14.5px}
  .cartouche .sur-titre{font-size:12px;letter-spacing:.05em}
  .cartouche-cle{padding-left:12px}
  .mesures-cle{gap:12px 18px}
  .mesures-cle dd{font-size:19px}
  .mesures-cle .appoint{font-size:13px;line-height:1.5}
  .cartouche-pied{padding:12px 18px}
  .prochain{font-size:15px}
  /* le nom du dispositif rallonge la phrase de trois lignes sans rien ajouter à
     la décision : le nom du client et le montant suffisent à cliquer */
  .prochain .sur-dispositif{display:none}
  .methode summary{white-space:normal}
}

/* ---- filtres : pastilles sur écran large, liste déroulante sur téléphone ----
   Les quatre pastilles occupaient deux lignes sous 560 px et repoussaient le
   premier dossier hors de l'écran. La liste déroulante tient sur une ligne, se
   vise au pouce, et n'escamote aucune option, contrairement à un défilement
   latéral où les derniers filtres deviennent invisibles.
   display:none et non visibility : la commande masquée sort aussi de l'arbre
   d'accessibilité, sinon un lecteur d'écran annoncerait deux fois le même filtre. */
.filtre-mobile{display:none}
/* Le menu déroulant remplaçait le bloc « .filtres » sur petit écran. Ce bloc
   faisait doublon avec les files de travail et a été masqué : son remplaçant
   n'a donc plus d'objet, et affichait un troisième filtre identique aux deux
   autres. Les files se replient d'elles-mêmes sur deux lignes.
   (La commande reste dans le document, alimentée, mais invisible : la retirer
   du HTML demande de toucher au script, ce qui n'appartient pas à ce lot.) */
@media (max-width:560px){
  .filtres{display:none}
  /* SANS OBJET, deux commandes identiques sous les files.
     .filtre-mobile reste sur display:none, hérité de la règle générale. */
  .outils{gap:10px}
  .recherche{max-width:100%}
}

/* ---- signalement d'un problème ----
   Présent partout, y compris avant connexion : le défaut à signaler peut être
   l'impossibilité de se connecter. Discret pour ne pas concurrencer les actions
   du produit, atteignable au pouce sur téléphone. */
.signaler{position:fixed;right:18px;bottom:18px;z-index:55;width:42px;height:42px;
        border-radius:50%;border:1px solid var(--filet);background:var(--surface);
        color:var(--ink-doux);font-size:18px;cursor:pointer;line-height:1;
        box-shadow:0 4px 14px rgba(0,20,60,.10);transition:color var(--t),border-color var(--t)}
.signaler:hover{color:var(--bleu);border-color:var(--bleu-pastel)}
.signaler:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.voile{position:fixed;inset:0;z-index:70;background:rgba(0,20,60,.42);
       display:flex;align-items:center;justify-content:center;padding:20px}
.voile .boite{background:var(--surface);border-radius:var(--r);padding:24px 26px;
       width:min(520px,100%);max-height:90vh;overflow:auto;
       box-shadow:0 20px 50px rgba(0,20,60,.28)}
.voile h2{margin:0 0 8px;font-size:18px}
.voile .champ{margin:14px 0 0}
.avertissement{margin-top:10px;padding:10px 12px;border-radius:var(--r-s);
       background:var(--orange-100);color:var(--orange-txt);line-height:1.5}
.voile .montage-actions{margin-top:16px}
@media (max-width:560px){
  .signaler{right:12px;bottom:12px;width:36px;height:36px;font-size:15px;transition:bottom .3s cubic-bezier(.2,.7,.3,1)}
  /* 17/10/2026 : quand la barre du pouce monte, le drapeau passait PAR-DESSUS
     son bouton « Analyser mon portefeuille ». Il monte avec elle. */
  body:has(.cta-mobile.visible:not([hidden])) .signaler{bottom:calc(82px + env(safe-area-inset-bottom))}
}

/* ---- prise en main ----
   Une étape faite reste visible mais s'efface visuellement : elle vaut preuve de
   progression, ce qui compte plus que le gain de place. */
.demarrage{background:var(--panneau);border:1px solid var(--filet);border-radius:var(--r);
        padding:18px 22px;margin-top:20px}
.demarrage-tete{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.demarrage h2{margin:0 0 12px;font-size:16px}
.etapes{list-style:none;margin:0;padding:0;display:grid;
        grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.etape{display:flex;gap:12px;align-items:flex-start}
.etape-num{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;
        border-radius:50%;background:var(--bleu);color:#fff;font-size:14px;font-weight:700}
.etape.faite{opacity:.55}
.etape.faite .etape-num{background:var(--vert)}
.etape b{display:block;font-size:15px;color:var(--bleu);line-height:1.5}
.etape .secondaire{display:block;margin-top:3px;font-size:14px;line-height:1.55}
.etape-action{margin-top:10px;padding:7px 13px;font-size:14.5px}

/* ---- montant non calculable ----
   Un montant absent doit se lire comme une consigne, pas comme une erreur. D'où le
   bleu et non le rouge : rien n'est cassé, il manque une donnée que le cabinet
   possède. La taille reste proche de celle du montant qu'elle remplace, sinon le
   cartouche s'effondre et l'écran a l'air vide. */
.sans-montant{display:block;font-size:19px;font-weight:600;color:var(--bleu);
              line-height:1.25;max-width:22ch}
.doc-cle-sans{font-size:19px;color:var(--bleu)}

/* ---- cartes d'apport ----
   Une carte qui décrit une action doit la déclencher. Celles qui le peuvent
   deviennent cliquables et le montrent ; les autres portent « bientôt » plutôt
   que de laisser chercher un bouton absent. */
.apport-agissable{cursor:pointer;transition:border-color .15s,background .15s}
.apport-agissable:hover,.apport-agissable:focus-visible{border-color:var(--bleu);
  background:#fff;outline:none}
.apport-action{display:block;margin-top:6px;font-weight:700;color:var(--orange)}
.apport-bientot{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-doux)}

/* ---- saisie de l'effectif ou du chiffre d'affaires ----
   Placée sous le montant absent, à l'endroit exact où le cabinet constate le
   manque. Un formulaire relégué ailleurs dans la page ne serait jamais trouvé,
   comme les quatre cartes d'apport avant qu'elles ne deviennent cliquables. */
.saisie-donnees{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:14px}
.saisie-donnees .champ{margin:0;max-width:132px}
.saisie-donnees .champ span{font-size:13.5px}
.saisie-donnees .champ input{padding:8px 10px;font-size:15px}
.saisie-donnees .btn{padding:9px 16px;font-size:15px}
.saisie-donnees .aide{flex-basis:100%;margin:2px 0 0;min-height:16px}

/* ---- dépôt du FEC ----
   Sous la saisie manuelle : c'est le chemin court pour qui a le fichier, pas le
   chemin principal. La mention « lu puis oublié » vit à côté du bouton, là où
   la question se pose, et non dans une page d'engagements jamais ouverte. */

/* ---- accès anticipé ----
   Contenu dans la largeur du contenu, pas une barre qui traverse l'écran : un
   message de statut n'a pas à peser autant qu'une alerte. Il ne défile pas non
   plus, un bandeau animé ferait amateur devant un expert-comptable. */
/* UNE SURFACE, UN SENS. Les deux avis étaient posés sur le bleu clair de la
   charte, exactement celui du bloc de valeur : trois bandes bleu pâle empilées
   en haut de l'écran, dont deux qui ne sont que de l'aide, et le bleu clair
   cessait de désigner le montant. L'aide passe sur la surface blanche
   ordinaire ; le filet orange suffit à la signaler. Le bleu clair ne désigne
   plus qu'une chose dans tout le produit : la valeur détectée. */
.anticipe{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
        margin:0 0 var(--e2);width:auto;
        background:var(--surface);border:1px solid var(--filet);
        border-left:3px solid var(--orange);border-radius:var(--r-s);
        padding:var(--e2) var(--e3);font-size:var(--tp-corps);color:var(--ink-doux);
        line-height:1.5}
.anticipe .lien-nu{background:none;border:0;padding:0;font:inherit;cursor:pointer;
        color:var(--orange-txt);text-decoration:underline;text-underline-offset:2px}
.anticipe .lien-nu:hover{text-decoration-thickness:2px}
.fermer-anticipe{background:none;border:0;cursor:pointer;font-size:19px;line-height:1;
        color:var(--ink-doux);padding:0 2px;flex-shrink:0}
.fermer-anticipe:hover{color:var(--ink)}
/* ============================================ DEBOUT, AU CONGRÈS ==
   Un expert-comptable qui scanne un code sur un stand tient son téléphone
   d'une main et donne quelques secondes. Sur ces quelques secondes, trois
   cent quatre-vingts pixels partaient en messages avant le premier chiffre :
   le bandeau d'environnement, l'accès anticipé, la double authentification.

   Aucun des trois n'est supprimé. Sur petit écran, chaque avis se réduit à ce
   qui appelle une action, la phrase qui l'entoure se replie. Le geste reste
   proposé, la prose attend le bureau. */
@media (max-width:560px){
  .anticipe{font-size:13.5px;padding:7px 12px;margin:0 0 var(--e2);gap:10px;
            line-height:1.45}
  .anticipe .avis-long{display:none}
  .anticipe .lien-nu{font-weight:600}
}

/* ---- projets du client ----
   Des cartes cliquables plutôt que des cases à cocher : sur onze familles, une
   liste de cases se lit mal et se clique mal au doigt. L'exemple sous le titre
   fait le travail que ferait sinon une infobulle que personne n'ouvre. */
.projets-client{background:var(--panneau);border:1px solid var(--filet);
        border-radius:var(--r);padding:20px 22px}
.projets-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.titre-projet{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.ex-projet{display:block;font-size:14px;color:var(--ink-doux);margin-top:3px;line-height:1.5}
.projets-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
/* Le budget appartient au projet, pas au formulaire : il s'affiche dans le bloc
   du projet retenu, et un projet non retenu n'en montre aucun. */
#aideBudgets{margin:0;flex:1;min-width:240px}
@media (max-width:560px){
  .projets-client{padding:16px}
}

/* ---- recherche et ajout, deux gestes distincts ----
   La loupe dit ce que fait le champ. Sans elle, il ressemblait à un endroit où
   saisir un nouveau client, et c'est ce que les cabinets y faisaient. */
.champ-recherche{position:relative;flex:1;min-width:230px;max-width:360px}
.champ-recherche .loupe{position:absolute;left:11px;top:50%;transform:translateY(-50%);
        color:var(--ink-doux);font-size:16px;pointer-events:none}
.champ-recherche .recherche{width:100%;max-width:none;padding-left:32px}

/* ---- en-tête de groupe : un projet, ses dispositifs ----
   Le moteur rattache chaque dispositif au projet qu'il sert. Sans cette ligne,
   six dispositifs se lisaient comme une liste alors qu'ils forment deux dossiers
   distincts à monter. */
tr.groupe-projet td{background:var(--gris);padding:9px 14px;border-top:1px solid var(--filet)}
tr.groupe-projet b{color:var(--bleu);font-size:14.5px;letter-spacing:.01em}
tr.groupe-projet span{color:var(--ink-doux);font-size:13.5px;margin-left:9px}
.doc-mention-groupe{font-weight:400;font-size:14px;color:var(--ink-doux)}

/* ---- documents déjà existants chez le client ----
   Visuellement distincts des projets : un projet est à venir, un document est
   acquis. Les confondre ferait cocher l'un pour l'autre. */
.documents-existants{margin-top:20px;padding-top:18px;border-top:1px solid var(--filet)}
.doc-h3{margin:0;font-size:16px;color:var(--bleu)}
.grille-antecedents{display:grid;gap:10px;margin-top:12px;
        grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.carte-antecedent{text-align:left;background:var(--surface);border:1px solid var(--filet);
        border-radius:var(--r-s);padding:11px 13px;cursor:pointer;display:block;
        transition:border-color var(--t),background var(--t)}
.carte-antecedent:hover{border-color:var(--vert)}
.carte-antecedent.choisi{border-color:var(--vert);background:var(--vert-100);
        box-shadow:inset 0 0 0 1px var(--vert)}
@media (max-width:560px){.grille-antecedents{grid-template-columns:1fr}}
.appui{display:block;font-size:13.5px;color:var(--vert);margin-top:3px;line-height:1.5}

/* ---- hypothèse de départ ----
   Le montant existe, il n'est simplement pas encore assis sur du publié. Assez
   visible pour être lue, assez discrète pour ne pas éteindre le chiffre. */
.hypothese{display:block;font-size:14px;color:var(--orange-txt);margin-top:6px;
        line-height:1.4;max-width:46ch}
.doc-cle .hypothese{margin-top:4px}

/* Retour d'un affinage, sous le montant qu'il commente. Vert : il annonce un
   acquis, pas une réserve, et se distingue de l'hypothèse en orange. */
.retour-affinage{display:block;font-size:14.5px;color:var(--vert);margin-top:8px;
        line-height:1.55;max-width:52ch;background:var(--vert-100);
        padding:8px 11px;border-radius:var(--r-s)}

/* Part du potentiel qui ne fait entrer aucun euro : une exonération n'est pas un
   encaissement, et le cabinet doit pouvoir le dire au dirigeant. */
.economie-part{display:block;font-size:14px;color:var(--ink-doux);margin-top:6px;
        line-height:1.4;max-width:48ch}

/* ---- bandeau de confiance (écran d'accès) ----
   Sobre et dense : quatre faits vérifiables, pas un argumentaire. Le dernier est
   mis en avant parce qu'aucun concurrent qui aspire la comptabilité ne peut
   l'écrire. Le drapeau est dessiné en CSS, aucun emoji ne fait office d'icône. */
.confiance{list-style:none;display:flex;flex-wrap:wrap;gap:9px 20px;
        margin:0 0 24px;padding:0;font-size:15px;color:var(--ink-doux)}
.confiance li{display:flex;align-items:center;gap:7px;line-height:1.3}
.confiance li.fort{color:var(--bleu);font-weight:600}
.confiance .drapeau{display:inline-flex;width:18px;height:12px;border-radius:2px;
        overflow:hidden;box-shadow:0 0 0 1px var(--filet)}
.confiance .drapeau i{flex:1}
.confiance .drapeau i:nth-child(1){background:#002395}
.confiance .drapeau i:nth-child(2){background:#fff}
.confiance .drapeau i:nth-child(3){background:#ED2939}
.confiance .pastille-c{display:inline-flex;align-items:center;justify-content:center;
        width:18px;height:18px;border-radius:50%;background:var(--bleu-100);
        color:var(--bleu);font-size:12.5px;font-style:normal;line-height:1}
.confiance li.fort .pastille-c{background:var(--vert-100);color:var(--vert)}
@media (max-width:560px){.confiance{gap:8px 14px;font-size:14px}}

/* ================= écran d'arrivée =================
   REFONTE 27/08/2026. Le message à gauche, l'instrument à droite, et il
   travaille. Le bleu structure, l'orange signale : dix cases sur
   quatre-vingt-quinze, jamais plus. Un signal fréquent n'est plus un signal.

   TOUT EST FLUIDE, ET C'EST LA LEÇON DE LA VERSION PRÉCÉDENTE. Les points de
   rupture successifs (960, puis 720, puis 520) faisaient repasser le produit
   SOUS le texte à des largeurs où il y avait toute la place. Ici une seule
   rupture, à 660 px, et partout ailleurs des dimensions bornées à la fois par
   la largeur ET la hauteur de la vue, `min(vw, vh)`, pour que rien ne sorte de
   l'écran sur un portable posé à plat. */
.hero{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(20px,3vw,52px);align-items:center;
  max-width:1080px;margin:0 auto clamp(26px,3vw,44px);
  padding:clamp(24px,3.4vw,52px) clamp(20px,3vw,46px);
  background:var(--bleu);border-radius:22px;color:#fff;
  box-shadow:0 2px 6px rgba(0,32,84,.10),0 26px 60px -30px rgba(0,32,84,.55);
}
/* La trame du fond de page ne traverse pas le bleu : elle y ferait du bruit là
   où il faut du calme. On en repose une, deux fois plus discrète. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(153,184,224,.06) 1px,transparent 1px);
  background-size:40px 40px;
}
.hero > *{position:relative}

.hr-oeil{
  display:inline-flex;align-items:center;gap:7px;
  font-size:clamp(10px,.95vw,13px);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--orange);
  margin-bottom:clamp(10px,1.4vw,20px);
}
.hr-oeil i{width:5px;height:5px;border-radius:50%;background:var(--orange);
  animation:hrRespire 3.2s ease-in-out infinite}
@keyframes hrRespire{0%,100%{opacity:1}50%{opacity:.3}}

/* La question domine, la réponse la suit d'un cran plus bas : deux titres de
   même force ne laissent dominer ni l'un ni l'autre. */
.hero h1{
  font-size:clamp(26px,min(3.9vw,6.2vh),52px);
  line-height:1.05;letter-spacing:-.026em;font-weight:700;
  margin:0;color:#fff;max-width:none;text-wrap:balance;
}
.hero .hero-fort{
  display:block;color:var(--orange);
  font-size:.66em;line-height:1.16;font-weight:600;letter-spacing:-.014em;
  margin-top:.4em;
}
.hero .chapeau{
  margin:clamp(12px,1.6vw,24px) 0 0;
  font-size:clamp(14px,min(1.5vw,2.3vh),20px);line-height:1.5;
  color:rgba(255,255,255,.64);max-width:34ch;font-weight:500;
}
.hr-acte{margin:clamp(16px,2.1vw,30px) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hero .btn.hr-btn{
  width:auto;display:inline-flex;align-items:center;gap:9px;
  background:var(--orange);border-color:var(--orange);color:#fff;
  font-size:clamp(15px,min(1.5vw,2.1vh),19px);
  padding:clamp(12px,1.3vw,17px) clamp(18px,2vw,28px);
  box-shadow:0 12px 30px -14px rgba(225,79,10,.75);
}
.hero .btn.hr-btn:hover{
  background:var(--orange);border-color:var(--orange);
  filter:brightness(.93);transform:translateY(-1px);
  box-shadow:0 16px 36px -14px rgba(225,79,10,.85)}
.hr-fl{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.hero .btn.hr-btn:hover .hr-fl{transform:translateX(3px)}
.hr-sous{display:block;flex-basis:100%;margin-top:0;font-size:clamp(12px,1.1vw,15px);
  font-weight:600;color:rgba(255,255,255,.64)}
.hr-sous b{color:#fff;font-weight:700}

.hr-confiance{
  list-style:none;margin:clamp(16px,2.1vw,28px) 0 0;padding:clamp(13px,1.7vw,22px) 0 0;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:clamp(5px,.7vw,9px);
}
.hr-confiance li{display:flex;align-items:center;gap:9px;
  font-size:clamp(12.5px,min(1.1vw,1.6vh),15.5px);font-weight:500;
  color:rgba(255,255,255,.64);line-height:1.35}
.hr-m{flex:0 0 auto;width:15px;height:15px;color:var(--orange)}

/* ---- l'instrument ---- */
.hr-scene{position:relative}
.hr-vitre{
  position:relative;overflow:hidden;background:#fff;border-radius:18px;
  padding:clamp(12px,1.4vw,22px);
  box-shadow:0 1px 2px rgba(0,0,0,.10),0 18px 40px -22px rgba(0,0,0,.34),
             0 54px 100px -50px rgba(0,0,0,.42);
}
.hr-vitre-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:clamp(9px,1vw,14px);margin-bottom:clamp(9px,1.1vw,15px);
  border-bottom:1px solid rgba(0,46,114,.05)}
.hr-vitre-titre{font-size:clamp(10.5px,1vw,14px);font-weight:700;color:var(--bleu);
  white-space:nowrap}
.hr-demo{font-size:clamp(7.5px,.7vw,10px);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(0,46,114,.46);white-space:nowrap;
  border:1px solid rgba(0,46,114,.10);border-radius:99px;padding:3px 8px}

/* Dix colonnes, toujours. En `auto-fill`, leur nombre changeait avec la largeur
   et les dix repères, espacés d'un pas régulier, retombaient en colonne puis en
   diagonale selon la vue : on lisait un tri, pas une découverte. La largeur des
   cases, elle, reste fluide. */
.hr-grille{position:relative;display:grid;grid-template-columns:repeat(10,1fr);
  gap:clamp(3px,.45vw,7px)}
.hr-c{aspect-ratio:1.42;border-radius:5px;background:rgba(0,46,114,.05);
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:0 clamp(3px,.4vw,6px)}
.hr-c::before,.hr-c::after{content:"";display:block;height:2px;border-radius:2px;
  background:rgba(0,46,114,.24)}
.hr-c::before{width:70%}
.hr-c::after{width:40%;background:rgba(0,46,114,.10)}
.hr-c.hr-s{background:var(--orange);transform:scale(1.06);
  box-shadow:0 3px 10px -3px rgba(225,79,10,.55)}
.hr-c.hr-o{background:var(--bleu);transform:scale(1.06);
  box-shadow:0 3px 12px -3px rgba(0,46,114,.5)}
.hr-c.hr-s::before,.hr-c.hr-o::before{background:rgba(255,255,255,.94)}
.hr-c.hr-s::after,.hr-c.hr-o::after{background:rgba(255,255,255,.55)}

/* Pas un sonar, pas un cercle : une lame de lumière qui traverse le portefeuille
   une fois, lentement. Elle est découpée par la vitre, donc elle naît et meurt
   au bord de l'instrument, et elle ne peut pas élargir la page. */
.hr-lame{position:absolute;top:-4px;bottom:-4px;width:clamp(60px,9vw,140px);
  left:-160px;opacity:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(225,79,10,.04) 40%,
    rgba(225,79,10,.13) 72%,rgba(225,79,10,.26) 86%,rgba(225,79,10,.05) 93%,transparent)}

.hr-pied{display:flex;align-items:baseline;gap:8px;
  margin-top:clamp(9px,1.1vw,15px);padding-top:clamp(9px,1vw,14px);
  border-top:1px solid rgba(0,46,114,.05)}
.hr-n{font-size:clamp(15px,min(1.8vw,2.5vh),24px);font-weight:700;color:var(--bleu);
  line-height:1;font-variant-numeric:tabular-nums}
.hr-l{font-size:clamp(9.5px,.92vw,12.5px);font-weight:600;color:rgba(0,46,114,.46)}
.hr-n.hr-a,.hr-l.hr-a{color:var(--orange)}
.hr-sep{width:1px;align-self:stretch;background:rgba(0,46,114,.10);margin:0 6px}

/* La fiche est la conséquence du balayage, pas un élément de plus qui bouge en
   même temps : elle arrive APRÈS le dernier repère. */
.hr-fiche{
  position:absolute;z-index:5;
  right:clamp(-22px,-1.9vw,-8px);bottom:clamp(58px,5.5vw,76px);
  width:clamp(180px,min(50%,320px),320px);   /* 09/09/2026 : libellés plus longs, la fiche s'élargit */
  background:#fff;border-radius:14px;border-left:3px solid var(--orange);
  /* DIX PIXELS À TROUVER. « l'investissement » demande 101 px et la colonne du
     libellé n'en offrait que 91 : la césure était le symptôme, pas la cause.
     Quatre pixels de gouttière en moins et huit de marge intérieure suffisent,
     sans toucher à la typographie ni au gabarit de la carte. */
  padding:clamp(11px,1.25vw,18px) clamp(10px,1.05vw,15px);
  box-shadow:0 2px 4px rgba(0,0,0,.06),0 22px 46px -20px rgba(0,0,0,.38);
}
.hr-fiche-tete{margin-bottom:clamp(9px,1.1vw,14px)}
.hr-fiche-nom{display:block;font-size:clamp(11.5px,1.1vw,15.5px);font-weight:700;
  color:var(--bleu);line-height:1.25}
.hr-fiche-meta{display:block;margin-top:2px;font-size:clamp(9px,.88vw,12px);
  font-weight:500;color:rgba(0,46,114,.46)}
/* EN GRILLE, PAS EN FLEX AVEC `space-between`.
   La colonne du montant faisait 60 px, la gouttière 12, et il restait 92 px au
   libellé dans une carte de 202. « l'investissement » est un mot insécable plus
   large que 92 px : un élément flexible ne descend pas sous sa largeur de mot le
   plus long, alors il poussait le montant TREIZE PIXELS hors de la ligne. Les
   trois montants ne s'alignaient donc plus, et celui du milieu dépassait la
   carte. Signalé par Yohan le 01/09/2026 sur une capture.
   `minmax(0, 1fr)` autorise la colonne du libellé à descendre sous son mot le
   plus long ; `max-content` fige celle du montant. Les montants ne bougent plus,
   quel que soit le libellé. */
.hr-ln{display:grid;grid-template-columns:minmax(0,1fr) max-content;
  align-items:baseline;gap:7px;
  padding:clamp(5px,.65vw,8px) 0}
.hr-ln + .hr-ln{border-top:1px solid rgba(0,46,114,.05)}
/* La césure ne sert plus qu'de FILET. Avec la place rendue ci-dessus, aucun
   libellé actuel ne se coupe. Elle reste là pour qu'un libellé plus long, un
   jour, casse un mot plutôt que l'alignement des montants. */
/* 12,5 px et non 13 : le mot le plus long demandait 101 px pour 100,45
   disponibles. Un pixel d'écart suffisait à casser le mot. On se donne quatre
   pixels de marge plutôt que de viser juste, parce qu'une police de repli ou
   un autre moteur de rendu ne mesure pas exactement pareil. */
.hr-d{font-size:clamp(9.5px,.9vw,12.5px);font-weight:500;color:rgba(0,46,114,.72);
  min-width:0;hyphens:auto;hyphenate-limit-chars:12 5 5;overflow-wrap:anywhere}
.hr-v{font-size:clamp(10px,.98vw,13.5px);font-weight:700;color:var(--bleu);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hr-total{margin-top:clamp(9px,1.1vw,14px);padding-top:clamp(9px,1vw,13px);
  border-top:1px solid rgba(0,46,114,.10)}
/* « Montant potentiel », jamais « acquis » ni « obtenu » : un cabinet ne doit
   pas pouvoir lire ce chiffre comme une promesse. Le mot porte le conditionnel. */
.hr-total-l{display:block;margin-bottom:3px;font-size:clamp(8.5px,.82vw,11px);
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(0,46,114,.46)}
.hr-total-v{font-size:clamp(15px,min(1.6vw,2.3vh),23px);font-weight:700;
  color:var(--orange);line-height:1;font-variant-numeric:tabular-nums}

/* ---- la séquence ----
   Portefeuille calme, la lame traverse, chaque repère s'allume AU MOMENT OÙ ELLE
   LE CROISE (d'où le retard porté par sa colonne), le compteur monte, la fiche
   remonte, et tout reste. Seule la lame repart. `both` retient l'état de départ
   pendant l'attente et fige l'arrivée ; l'arrivée étant aussi l'état par défaut,
   une animation coupée laisse le bon résultat. */
.hr-joue .hr-lame{animation:hrLame 4.5s cubic-bezier(.45,0,.25,1) .4s infinite}
@keyframes hrLame{
  0%{left:-18%;opacity:0}
  3%{opacity:1}
  34%{left:100%;opacity:1}
  40%,100%{left:100%;opacity:0}
}
.hr-joue .hr-c.hr-s,.hr-joue .hr-c.hr-o{
  animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.7,.3,1);
  animation-fill-mode:both;animation-delay:calc(.6s + var(--d,0s))}
.hr-joue .hr-c.hr-s{animation-name:hrParait}
.hr-joue .hr-c.hr-o{animation-name:hrParaitO}
.hr-joue .hr-c.hr-s::before,.hr-joue .hr-c.hr-o::before{
  animation:hrTrait .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(.6s + var(--d,0s))}
.hr-joue .hr-c.hr-s::after,.hr-joue .hr-c.hr-o::after{
  animation:hrTrait2 .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(.6s + var(--d,0s))}
@keyframes hrParait{
  from{background:rgba(0,46,114,.05);transform:scale(1);box-shadow:0 0 0 rgba(225,79,10,0)}
  to{background:var(--orange);transform:scale(1.06);box-shadow:0 3px 10px -3px rgba(225,79,10,.55)}
}
@keyframes hrParaitO{
  from{background:rgba(0,46,114,.05);transform:scale(1);box-shadow:0 0 0 rgba(0,46,114,0)}
  to{background:var(--bleu);transform:scale(1.06);box-shadow:0 3px 12px -3px rgba(0,46,114,.5)}
}
@keyframes hrTrait{from{background:rgba(0,46,114,.24)}to{background:rgba(255,255,255,.94)}}
@keyframes hrTrait2{from{background:rgba(0,46,114,.10)}to{background:rgba(255,255,255,.55)}}
.hr-joue .hr-fiche{animation:hrMonte .55s cubic-bezier(.2,.7,.3,1) 2s both}
@keyframes hrMonte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .hr-oeil i,.hr-joue .hr-lame,.hr-joue .hr-fiche,
  .hr-joue .hr-c.hr-s,.hr-joue .hr-c.hr-o,
  .hr-joue .hr-c.hr-s::before,.hr-joue .hr-c.hr-s::after,
  .hr-joue .hr-c.hr-o::before,.hr-joue .hr-c.hr-o::after{animation:none!important}
  .hr-lame{opacity:0}
}

/* ============ TÉLÉPHONE ============
   Une seule rupture, et elle arrive tôt : sous 780 px, deux colonnes ne
   laissent assez de place ni au texte ni à l'instrument.

   BORD À BORD, ET C'EST LE POINT PRINCIPAL. La version précédente posait le
   hero en carte, avec une bande claire de chaque côté et un coin arrondi sous
   une barre d'application déjà bleue : on lisait un encart, pas un écran
   d'arrivée. Pennylane et Shine occupent toute la largeur, et c'est ce qui leur
   donne leur assise. Les marges négatives annulent exactement le rembourrage de
   `main`, en deux temps parce qu'il change lui-même à 720 px.

   L'ORDRE SUIT CELUI DES DEUX AUTRES : titre, promesse, action, PREUVE, puis
   l'instrument. La réassurance arrive là où Pennylane met ses notes et Shine ses
   volumes, c'est-à-dire juste après le bouton, pendant qu'on hésite encore. */
@media (max-width:780px){
  .hero{
    display:flex;flex-direction:column;gap:0;align-items:stretch;
    margin:-20px -20px clamp(22px,5vw,32px);
    border-radius:0;
    padding:clamp(26px,7vw,40px) clamp(18px,5vw,26px) clamp(28px,7vw,40px);
  }
  .hero-dire{display:contents}
  .hr-oeil{order:1}
  /* Le titre montait à 30 px là où Pennylane et Shine tiennent 40 : sur un
     écran de six pouces, c'est la différence entre une promesse et une note. */
  .hero h1{order:2;font-size:clamp(30px,9vw,42px);letter-spacing:-.03em}
  .hero .hero-fort{font-size:.68em}
  .hero .chapeau{order:3;font-size:17px;max-width:none;line-height:1.45;
    margin-top:clamp(12px,3.4vw,18px)}
  .hr-acte{order:4;margin-top:clamp(18px,5vw,26px)}
  .hero .btn.hr-btn{width:100%;justify-content:center;font-size:17px;padding:16px 20px}
  .hr-sous{text-align:center;margin-top:11px}
  .hr-confiance{order:5;margin-top:clamp(16px,4.4vw,24px);padding-top:clamp(14px,3.8vw,20px)}
  .hr-confiance li{font-size:14.5px}
  .hr-scene{order:6;margin-top:clamp(20px,5.5vw,30px)}
  .hr-grille{gap:4px}
  /* Le cartouche « exemple » pesait autant que le titre du panneau. Il doit se
     lire, pas s'annoncer. */
  .hr-demo{font-size:8.5px;letter-spacing:.08em;padding:2px 6px}
  /* La fiche ne flotte plus : elle se pose sous la vitre, en pleine largeur. */
  .hr-fiche{position:relative;right:auto;bottom:auto;width:100%;margin-top:12px;
    animation:none!important;opacity:1;transform:none}
}
@media (max-width:720px){
  /* `main` passe à 16 px de rembourrage : la marge négative suit, sinon le
     bord à bord laisse un liseré de quatre pixels. */
  .hero{margin-left:-16px;margin-right:-16px;margin-top:-20px}
}
#v-acces .accueil{max-width:1080px}
#acces .btn.btn-large{background:var(--orange);border-color:var(--orange)}
#acces .btn.btn-large:hover{background:var(--orange);border-color:var(--orange);filter:brightness(.93)}
.hero-agir{max-width:520px;margin:0 auto clamp(26px,3vw,38px);padding:26px 26px 24px}
.hero-agir-titre{margin:0 0 18px;font-size:17px;color:var(--bleu)}
.btn-large{width:100%;justify-content:center;font-size:16px;padding:13px 20px}

/* ================= les deux étapes de l'écran d'arrivée =================
   Le formulaire n'existe qu'après un clic. L'attribut est porté par la section,
   ce qui évite d'ajouter une vue au routeur : `appliquerAncre` renvoie sur
   `v-acces` tant qu'il n'y a pas de session, et cette protection ne se négocie
   pas pour une question d'affichage. */
#v-acces[data-etape="arrivee"] .etape-ouvrir{display:none}
#v-acces[data-etape="ouvrir"] .etape-arrivee{display:none}
#v-acces[data-etape="envoye"] .etape-arrivee{display:none}
#v-acces[data-etape="envoye"] .ouvrir-deux{display:none}
#v-acces:not([data-etape="envoye"]) .envoye-cadre{display:none}
/* UNE SEULE ACTION DOMINANTE. À cette étape, le bouton orange « Ouvrir un accès »
   de l'en-tête n'a plus d'objet, et deux oranges sur le même écran se disputent
   le regard. Il se retire pendant que le cabinet regarde sa boîte. */
#v-acces[data-etape="envoye"] ~ * .appbar-ouvrir,
body[data-etape="envoye"] .appbar-ouvrir{display:none}

/* LE BLEU, TEL QUE VALIDÉ. Cette carte est repassée en blanc quand la direction
   artistique est arrivée : elle proscrit les grands encadrés bleus, le texte
   clair et l'orange réparti. J'avais tranché seul ce qui était un choix de
   goût, alors que Yohan avait explicitement validé la version bleue à 19h40.
   Elle est rétablie. Restent appliquées les deux consignes venues après, qui ne
   portaient pas sur la couleur : l'enveloppe décorative ne revient pas, et le
   chemin se tait.

   CE QUI S'ÉCARTE DE LA DIRECTION ÉCRITE, et qui est assumé : l'aplat bleu, le
   texte à opacité réduite, et l'orange sur deux éléments plutôt qu'un. */
.envoye-cadre{
  position:relative;overflow:hidden;width:100%;max-width:620px;margin:0 auto;
  background:var(--bleu);border-radius:26px;color:#fff;text-align:center;
  padding:clamp(32px,5vw,48px) clamp(26px,5vw,52px) clamp(28px,4vw,40px);
  box-shadow:0 2px 6px rgba(0,32,84,.10),0 30px 70px -34px rgba(0,32,84,.6);
}
/* La trame du fond de page ne traverse pas le bleu, comme sur le hero. */
.envoye-cadre::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(153,184,224,.06) 1px,transparent 1px);
  background-size:40px 40px}
.envoye-cadre > *{position:relative}

/* LE CHEMIN, DISCRET. Il garde sa fonction, situer et annoncer la suite, mais
   il ne dispute pas le regard à l'action : un cran plus petit, contraste bas,
   seule l'étape en cours ressort. */
.envoye-pas{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:0 0 30px;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.38)}
.envoye-pas span{display:inline-flex;align-items:center;gap:6px}
.envoye-pas .fait{color:rgba(255,255,255,.6)}
.envoye-pas .ici{color:var(--orange)}
.envoye-pas b{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  font-size:9.5px;font-weight:600;border:1px solid currentColor;color:inherit}
.envoye-pas .ici b{background:var(--orange);border-color:var(--orange);color:#fff}
.envoye-pas i{width:14px;height:1px;background:currentColor;opacity:.4}

.envoye-cadre h1{margin:0 0 14px;color:#fff;text-align:center;max-width:none;
  font-size:clamp(26px,4vw,38px);line-height:1.12;letter-spacing:-.024em}
/* L'adresse est la seule information à vérifier avant d'ouvrir sa boîte : elle
   porte l'accent. Un point de coupure lui est offert avant l'arobase. */
.envoye-adresse{display:block;text-align:center;margin:0 auto 28px;padding:9px 18px;
  width:fit-content;max-width:100%;background:rgba(225,79,10,.14);
  border:1px solid rgba(225,79,10,.32);border-radius:999px;color:var(--orange);
  font-weight:700;font-size:clamp(14px,1.7vw,16.5px)}
.envoye-adresse:empty{display:none}

/* L'ACTION DOMINANTE. */
.envoye-actes{display:flex;flex-direction:column;align-items:center;gap:15px;margin:0 0 28px}
.envoye-webmail{display:inline-flex;align-items:center;gap:10px;background:var(--orange);
  color:#fff;border:0;border-radius:12px;padding:15px 30px;font:inherit;font-size:17px;
  font-weight:700;cursor:pointer;text-decoration:none;
  transition:transform .16s,filter .16s;box-shadow:0 10px 24px -12px rgba(225,79,10,.9)}
.envoye-webmail:hover{transform:translateY(-1px);filter:brightness(.95)}
.envoye-webmail:focus-visible{outline:2px solid #fff;outline-offset:3px}
.envoye-duree{margin:0;font-size:13.5px;color:rgba(255,255,255,.55)}
.envoye-duree b{color:rgba(255,255,255,.82);font-weight:600}

.envoye-secours{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;margin:0 auto;
  font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.55);max-width:44ch}
.envoye-relance{background:none;border:0;padding:0;font:inherit;color:#fff;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.envoye-relance:hover{color:var(--orange)}
.envoye-relance:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* MOBILE. Une action dominante, l'information prioritaire d'abord. Seule
   l'étape en cours garde son libellé : sur 375 px, « MOT DE PASSE » tombait sur
   trois lignes. L'adresse ne se coupe qu'au point offert avant l'arobase. */
@media (max-width:520px){
  .envoye-pas{gap:8px;font-size:10.5px;margin-bottom:26px}
  .envoye-pas span{gap:0}
  .envoye-pas .fait, .envoye-pas span:last-child{font-size:0}
  .envoye-pas .fait b, .envoye-pas span:last-child b{font-size:9.5px}
  .envoye-pas .ici{gap:6px}
  .envoye-pas i{width:12px}
  .envoye-adresse{border-radius:14px;padding:10px 14px;width:auto;
    font-size:13px;line-height:1.5;word-break:normal;overflow-wrap:normal}
  .envoye-webmail{width:100%;justify-content:center}
}



/* Deux colonnes, le texte à gauche sur le blanc texturé et la carte à cheval
   sur la verticale. La hauteur minimale tient l'ensemble centré dans la vue :
   sans elle, la composition se tasse en haut et laisse le bas des deux champs
   vide. */
body[data-etape="ouvrir"] main,
body[data-etape="envoye"] main{padding-top:0;padding-bottom:0}
body[data-etape="ouvrir"] main{
  max-width:none;
  padding-left:max(20px,calc(50vw - 540px));
  padding-right:max(20px,calc((48vw - 520px) / 2));
}
#v-acces[data-etape="ouvrir"] .accueil{max-width:none}
/* Le texte, lui, garde sa mesure : sans ce plafond il s'étirerait avec la
   colonne sur un grand écran et finirait par passer sur le bleu. */
.ouvrir-dire{max-width:560px}
#v-acces[data-etape="ouvrir"] .accueil,
/* CENTRÉ, ET PAS SEULEMENT HORIZONTALEMENT. La carte flottait en haut d'une
   page vide : c'est ce qui donnait l'impression d'un écran inachevé. */
#v-acces[data-etape="envoye"] .accueil{margin-top:0;display:grid;place-items:center;
  min-height:min(72vh,620px)}
.ouvrir-deux{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(24px,3vw,48px);align-items:center;
  min-height:calc(100vh - 66px);padding:clamp(18px,4vh,46px) 0;
}
/* ---- LE FOND DE L'ÉCRAN D'OUVERTURE ----
   CE QUI FAIT TENIR LA PAGE DE PENNYLANE, une fois qu'on l'a regardée de près :
   la frontière entre les deux couleurs est une VERTICALE FRANCHE qui court du
   haut au bas de la vue, sans arrondi ; la couleur monte jusqu'au bord supérieur
   de l'écran, sans bandeau blanc qui la coupe ; et la carte du formulaire est
   assez large pour être à cheval sur cette verticale.

   Nos deux tentatives précédentes rataient les trois. La nappe contenue était un
   encadré au milieu du vide ; le grand arrondi qui a suivi transformait le champ
   bleu en pastille, ce qui est exactement ce qui faisait « moche ». On garde
   donc la verticale, et l'identité vient de la matière : blanc TEXTURÉ à gauche,
   comme le demande le brand book (fond texturé, clin d'œil à l'artisanat), bleu
   Moriarty à droite.

   Le champ est en `fixed` : c'est la seule manière d'occuper toute la largeur et
   toute la hauteur sans dépendre de `100vw`, qui compte la barre de défilement
   et élargirait la page de quinze pixels sous Windows. */
.etape-ouvrir{position:relative}
body[data-etape="ouvrir"]::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:#fff;
  background-image:url("/fond-texture.jpg");
  background-size:cover;background-position:center;
}
body[data-etape="ouvrir"]::after{
  content:"";position:fixed;top:0;bottom:0;right:0;width:48%;z-index:-1;
  pointer-events:none;background-color:var(--bleu);
  background-image:radial-gradient(rgba(153,184,224,.075) 1px,transparent 1px);
  background-size:38px 38px;
}
/* LA BARRE S'EFFACE SUR CET ÉCRAN. Un bandeau blanc en travers du bleu coupait
   la couleur à trente pixels du haut et cassait toute la composition : chez
   Pennylane la couleur monte jusqu'au bord. La marque reste, posée sur le blanc
   texturé, et elle reste le chemin du retour. */
body[data-etape="ouvrir"] .appbar{background:transparent;border-bottom:0;box-shadow:none}

/* La nappe ne porte plus la couleur : le champ derrière s'en charge. Elle ne
   sert qu'à donner à la carte sa place dans la grille. */
.ouvrir-nappe{position:relative}
.ouvrir-nappe .hero-agir{
  position:relative;max-width:none;margin:0;
  padding:clamp(24px,2.6vw,38px) clamp(24px,2.6vw,38px) clamp(22px,2.4vw,34px);
  border-radius:20px;
  box-shadow:0 3px 10px rgba(0,32,84,.10),0 40px 80px -38px rgba(0,32,84,.6);
}
.ouvrir-dire h1{
  margin:0;font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.025em;
  color:var(--bleu);max-width:19ch;
}
.ouvrir-chapeau{
  margin:clamp(14px,1.8vw,24px) 0 0;font-size:clamp(15px,1.25vw,18px);
  line-height:1.55;color:var(--ink-doux);max-width:46ch;
}
.ouvrir-points{
  list-style:none;margin:clamp(22px,2.8vw,36px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);
}
.ouvrir-points li{
  position:relative;padding-left:30px;font-size:clamp(14.5px,1.15vw,16.5px);
  line-height:1.55;color:var(--ink-doux);max-width:52ch;
}
.ouvrir-points b{color:var(--bleu)}
/* La coche est dessinée, pas écrite : un caractère coché change de dessin selon
   le système et ne se contrôle pas. */
.ouvrir-points li::before{
  content:"";position:absolute;left:2px;top:.45em;width:13px;height:8px;
  border-left:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);
  transform:rotate(-45deg);border-radius:1px;
}
@media (max-width:820px){
  .ouvrir-deux{grid-template-columns:1fr;gap:clamp(22px,6vw,32px);align-items:stretch;
    min-height:0}
  .ouvrir-dire h1{max-width:none;font-size:clamp(26px,7vw,34px)}
  .hero-agir{max-width:none}
  /* Le champ fixe ne vaut que pour le bureau : sur téléphone la page est plus
     haute que la vue, et une bande immobile passe au travers du texte pendant
     qu'il défile. Le bleu redevient une nappe attachée à la carte. */
  body[data-etape="ouvrir"]::after{display:none}
  body[data-etape="ouvrir"] main{padding-left:16px;padding-right:16px}
  .ouvrir-dire{max-width:none}
  .ouvrir-nappe{
    border-radius:20px;overflow:hidden;background:var(--bleu);
    padding:clamp(12px,3.5vw,20px);
    box-shadow:0 2px 6px rgba(0,32,84,.10),0 24px 54px -30px rgba(0,32,84,.55);
  }
  .ouvrir-nappe::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(153,184,224,.07) 1px,transparent 1px);
    background-size:34px 34px;
  }
  .ouvrir-nappe .hero-agir{box-shadow:var(--ombre)}
}

/* ---- liste des projets d'un dossier ----
   Une entreprise en porte souvent plusieurs, parfois deux de même nature. Les
   onze cases à cocher les confondaient et obligeaient à traduire un projet réel
   en catégorie avant de pouvoir l'écrire. */
.liste-projets{list-style:none;margin:16px 0 0;padding:0;display:flex;
        flex-direction:column;gap:9px}
.projet-vide{padding:16px 18px;border:1px dashed var(--filet);border-radius:var(--r-s);
        color:var(--ink-doux);font-size:15px;background:var(--surface)}
.projet-decrit{display:flex;align-items:flex-start;justify-content:space-between;
        gap:16px;padding:13px 16px;background:var(--surface);
        border:1px solid var(--filet);border-radius:var(--r-s)}
.projet-decrit b{display:block;color:var(--bleu);font-size:15.5px}
.projet-decrit .secondaire{display:block;margin-top:3px}
.projet-texte{display:block;margin-top:6px;font-size:14.5px;color:var(--ink);
        line-height:1.55;max-width:70ch}
/* `.voile .boite` (deux classes) l'emportait sur `.boite-large` (une seule) :
   la règle « large » n'a jamais été appliquée et TOUTES les modales tenaient
   dans 520 px, y compris le formulaire de projet et ses trois colonnes de
   champs. Même sélecteur, donc même spécificité, donc la règle gagne. */
.voile .boite-large{width:min(780px,100%)}
.champs-cote{display:flex;gap:14px;flex-wrap:wrap}
.champs-cote .champ{flex:1;min-width:170px;margin:0}
.lieu-projet{border:1px solid var(--filet);border-radius:var(--r-s);
        padding:14px 16px 4px;margin:4px 0 0}
.lieu-projet legend{font-size:14.5px;font-weight:600;color:var(--bleu);padding:0 6px}
.boite textarea{font:inherit;font-size:15px;padding:9px 11px;resize:vertical;
        border:1px solid var(--filet);border-radius:var(--r-s);background:var(--surface);
        color:var(--ink);width:100%}
.boite select{font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--filet);
        border-radius:var(--r-s);background:var(--surface);color:var(--ink);width:100%}
@media (max-width:560px){.champs-cote{flex-direction:column;gap:0}}

/* L'ACTION DOMINANTE DU BLOC CLIENT EST BLEUE, comme toute action pleine dans
   l'application. Ce bouton était le dernier orange plein d'un écran connecté.
   La classe reste : elle marque LE geste dominant du bloc (un seul), et un test
   la vérifie. L'orange plein n'existe plus que sur la page d'arrivée, surface
   de marketing où le brand book l'autorise comme couleur de CTA. */
.btn-accent{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.btn-accent:hover{background:var(--bleu-800);border-color:var(--bleu-800)}
.actions-fiche{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* ---- cartouche du dossier, en deux colonnes ----
   Tout était empilé à gauche : la moitié droite restait blanche sur toute la
   hauteur. Le chiffre et ce qui l'explique d'un côté, ce qui l'améliore de
   l'autre : aucune zone morte, et les deux gestes sont là où le regard tombe
   après avoir lu le montant. */
.cartouche-fiche{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;
        align-items:start}
.cartouche-agir{border-left:1px solid var(--filet);padding-left:32px}
.agir-titre{margin:0 0 14px;font-size:14.5px;font-weight:700;letter-spacing:.06em;
        text-transform:uppercase;color:var(--bleu)}
.agir-boutons{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.agir-boutons .btn{width:100%;justify-content:center}
.cartouche-agir .aide{margin:0;font-size:14px;line-height:1.5}
@media (max-width:900px){
  .cartouche-fiche{grid-template-columns:1fr;gap:24px}
  .cartouche-agir{border-left:none;border-top:1px solid var(--filet);
        padding-left:0;padding-top:20px}
}
.doc-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.doc-tete .lien-texte{flex-shrink:0;white-space:nowrap}

/* ---- tableau des dispositifs : moins dense ----
   « Ça fait un peu fouillis » (Yohan, 02/08/2026). Trois causes : les lignes se
   touchaient, la colonne d'hypothèse écrasait les autres, et l'invite « cliquez
   pour le détail » se répétait sous chaque nom. Air entre les lignes, largeurs
   tenues, invite réservée au survol. */
#ficheDisp td{padding-top:15px;padding-bottom:15px;vertical-align:top}
#ficheDisp tr.ligne-dispositif + tr.detail-dispositif td{padding-top:0}
#ficheDisp .principal{max-width:34ch}
#ficheDisp .principal .secondaire{opacity:0;transition:opacity var(--t)}
#ficheDisp tr.ligne-dispositif:hover .principal .secondaire,
#ficheDisp tr.ligne-dispositif:focus-within .principal .secondaire{opacity:1}
#ficheDisp .num{white-space:nowrap}
#ficheDisp tr.ligne-dispositif:hover{background:var(--surface)}
#ficheDisp tr.ligne-dispositif:hover .principal{color:var(--orange-txt)}
#ficheDisp td:nth-child(3){color:var(--ink-doux);font-size:var(--tp-corps);line-height:1.5;
        max-width:52ch}

/* ============================ LE TABLEAU DES DISPOSITIFS SUR TÉLÉPHONE ==
   Chaque ligne devient une carte, et chaque cellule se met alors en
   « intitulé à gauche, valeur à droite ». Cela vaut pour une valeur courte,
   pas pour la cellule « Lecture », qui en porte trois : l'état, la nature du
   gain et l'effort. Sur trois cent soixante-quinze pixels, elles se
   partageaient la ligne en quatre colonnes de deux mots, chacune cassée sur
   trois lignes. Ici l'intitulé passe au-dessus et chaque valeur prend la
   largeur de la carte. */
@media (max-width:760px){
  #ficheDisp td{display:block}
  #ficheDisp td::before{display:block;margin-bottom:2px}
  #ficheDisp td.num{text-align:left}
  #ficheDisp td.num .secondaire{display:block}
  #ficheDisp td .etat{margin-bottom:var(--e1)}
  #ficheDisp .ligne-effort{margin-top:var(--e1)}
}

/* ---- section repliable des projets ----
   Elle prenait un écran entier pour un geste occasionnel. Repliée, son résumé
   dit déjà l'essentiel : combien de projets, combien de documents. */
details.projets-client > summary{cursor:pointer;list-style:none;
        display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
details.projets-client > summary::-webkit-details-marker{display:none}
/* DEUX BARRES OBLIQUES au lieu d'une : la séquence d'échappement n'était pas
   interprétée et l'écran affichait le texte « \25BE », à l'envers, en haut à
   droite du bloc. Vu sur la capture du 01/09/2026. */
details.projets-client > summary::after{content:"\25BE";color:var(--ink-doux);
        font-size:14.5px;margin-left:auto;transition:transform var(--t);flex-shrink:0}
details.projets-client[open] > summary::after{transform:rotate(180deg)}
details.projets-client > summary:hover h2{color:var(--orange-txt)}
details.projets-client > summary .etat{margin-left:0}

/* La colonne du montant respire : le texte tenait sur 34 caractères et se
   cassait en trois lignes là où il y avait la place pour deux. */
.cartouche-cle{max-width:none}
.cartouche-cle .economie-part,
.cartouche-cle .hypothese{max-width:60ch}

/* Filtre porteur d'un montant : le nombre dit combien de dossiers, le montant dit
   lequel ouvrir en premier. Repris de la barre de filtres de Pennylane, transposé
   à notre charte : bleu nuit dominant, aucun vert emprunté. */
#filtres .puce{display:inline-flex;align-items:baseline;gap:8px}
.puce-montant{color:var(--orange-txt);font-weight:700;font-variant-numeric:tabular-nums}
.puce[aria-pressed="true"] .puce-montant{color:#fff}

/* ---- densité du cartouche ----
   Il portait six mesures sur une ligne, dont trois en jargon de métier
   (« droits constatables », « financements mobilisables ») et une fourchette de
   198 K€ à 1,61 M€ dont l'amplitude décrédibilisait le chiffre principal. Deux
   mesures restent, le reste vit dans un repli. */
.mesures-cle{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
/* CETTE RÈGLE BATTAIT TROIS REPLIS MOBILES. Elle fixe deux colonnes sans
   condition de largeur, et elle est écrite APRÈS les trois requêtes de média
   qui les remettent sur une seule (lignes 601, 621 et 1955). Même spécificité,
   écrite plus bas : c'est elle qui gagnait, à toutes les largeurs. Sur trois
   cent quatre-vingt-dix pixels, le bloc « Resserrer ce diagnostic » vivait donc
   dans cent dix pixels de large, ses deux boutons coupés en plein mot, sur la
   carte la plus importante de la fiche. Trois personnes ont écrit le repli,
   aucune n'a vu qu'il ne s'appliquait pas.
   Elle porte maintenant sa condition de largeur. */
@media (min-width:901px){
  .cartouche-tete{grid-template-columns:minmax(260px,340px) 1fr}
}
.cartouche .montant{font-size:46px}
.detail-cartouche{margin:0 0 10px}
.detail-cartouche summary{font-size:14px;color:var(--ink-doux);cursor:pointer}
.detail-cartouche ul{margin:8px 0 0;padding-left:18px;font-size:14.5px;color:var(--ink-doux)}
.detail-cartouche li{margin:3px 0}
.detail-cartouche b{color:var(--ink);font-weight:600}
/* L'hypothèse tenait deux lignes pleine largeur en orange, plus visible que le
   montant qu'elle nuance. Une ligne, sous la fourchette, à sa juste place. */
.cartouche .hypothese{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;
  color:var(--ink-doux);border:0;padding:0;background:none}
@media(max-width:820px){.mesures-cle{grid-template-columns:1fr 1fr;gap:18px}}

/* Le repli partageait sa ligne avec la première action : deux propositions de
   niveaux différents côte à côte, l'oeil ne sait pas laquelle lire. Il passe
   dessous, en retrait. */
.detail-cartouche{order:9;width:100%;margin:10px 0 0;padding-top:8px;
  border-top:1px solid var(--filet)}
.cartouche-pied{flex-wrap:wrap}

/* ---- le formulaire projet porte ce qui a déjà été déclaré ----
   La liste vivait 1533 pixels plus bas, mesurés. Le cabinet validait, ne voyait
   rien, rouvrait le formulaire vide et croyait avoir tout perdu. */
.projets-deja{margin:0 0 18px;padding:12px 14px;background:var(--gris);
  border:1px solid var(--filet);border-radius:10px}
.projets-deja-titre{margin:0 0 8px;font-size:13.5px;font-weight:700;color:var(--bleu);
  text-transform:uppercase;letter-spacing:.04em}
.liste-compacte{margin:0;padding:0;list-style:none}
.liste-compacte .projet-decrit{padding:8px 0;font-size:14.5px;border:0;
  border-top:1px solid var(--filet)}
.liste-compacte .projet-decrit:first-child{border-top:0}
.liste-compacte .projet-texte{font-size:14px}
.projet-actions{display:flex;gap:14px;flex-shrink:0;align-items:flex-start}
/* Le montant s'estompe pendant son recalcul : il annonce lui-même qu'il n'est
   plus à jour, au lieu de rester figé pendant huit secondes. */
.montant.en-calcul{opacity:.35;transition:opacity .15s}

/* La boîte défile DANS le voile fixe, jamais l'inverse : mettre `overflow-y`
   sur un conteneur `position:fixed;inset:0` le fait rivaliser avec le
   défilement de la page derrière, et l'écran se disloque. Le contenu revient en
   tête à chaque ouverture par `boite.scrollTop = 0`, côté script. */
.voile .boite{scroll-behavior:auto}

/* ---- le bloc qui fait réserver ----
   Le brand book impose le bleu nuit dominant et l'orange en accent seul. La
   chaleur vient donc de la hiérarchie et du chiffre, pas d'un aplat criard :
   un cabinet ne réserve pas parce que c'est rouge, il réserve parce qu'il lit
   son propre montant et qu'il sait ce qu'il obtient en trente minutes. */
.badge-urgence{display:inline-block;margin:0 0 10px;padding:5px 11px;
  border-radius:999px;background:rgba(225,79,10,.1);color:var(--orange-txt);
  font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.promesse-chiffree{margin:0 0 12px;font-size:16px;line-height:1.5;color:var(--ink)}
/* LE MONTANT EST BLEU PARTOUT AILLEURS. « 1,5 M€ » s'affiche en bleu dans le
   portefeuille, dans la fiche et sur chaque ligne de dispositif ; ici seul, il
   passait en orange. Une même grandeur ne change pas de couleur selon l'écran
   où on la lit, sinon la couleur ne veut plus rien dire. */
.promesse-chiffree b{font-size:22px;color:var(--bleu);font-weight:var(--gr-fort)}
.ce-qui-arrive{margin:14px 0 18px;padding:0;list-style:none}
.ce-qui-arrive li{position:relative;padding:0 0 0 24px;margin:7px 0;
  font-size:15px;line-height:1.5;color:var(--ink-doux)}
/* SIX POINTS ORANGE DANS DEUX LISTES. Ce sont des puces de liste, pas des
   signaux : elles ne demandent rien et n'alertent de rien. L'orange servait de
   décor, à l'endroit exact où l'écran doit vendre deux voies à poids égal. */
.ce-qui-arrive li::before{content:"";position:absolute;left:5px;top:8px;
  width:5px;height:5px;border-radius:50%;background:var(--bleu-pastel)}
.btn.grand{width:100%;justify-content:center;padding:13px 20px;font-size:16px;
  font-weight:700}
.rarete{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-doux)}

/* ---- lisibilité ----
   Mesuré le 02/08/2026 : 63 déclarations de taille sous 13 px, dont 32 à
   12,5 px. Le corps annonçait 15,5 px mais presque aucun texte réel n'y était.
   Un associé qui lit vingt fiches par jour ne déchiffre pas du 12 px. Toute
   l'échelle monte d'un cran ; les titres, déjà dimensionnés, ne bougent pas. */
.aide, .secondaire, .indice, .muet{line-height:1.55}

.alerte-branchements{border-left:3px solid var(--orange);margin-bottom:18px}
.alerte-branchements .ce-qui-arrive li::before{background:var(--orange)}
.rappel-file{margin:12px 0 0;padding:10px 12px;background:rgba(225,79,10,.08);
  border-radius:8px;font-size:14px;color:var(--ink)}

/* ---- choisir ses colonnes (pattern « Personnaliser » de l'espace cabinet) ---- */
.choix-colonnes{position:relative}
.choix-colonnes summary{list-style:none;cursor:pointer;display:inline-flex}
.choix-colonnes summary::-webkit-details-marker{display:none}
.menu-colonnes{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:210px;
  padding:10px 12px;background:var(--surface);border:1px solid var(--filet);
  border-radius:10px;box-shadow:0 12px 30px rgba(0,20,60,.16)}
.menu-colonnes .case{display:flex;align-items:center;gap:9px;margin:5px 0;font-size:14px}

/* ---- actions au survol d'une ligne ----
   Agir sur un dossier imposait d'ouvrir sa fiche, de la lire, puis de
   redescendre : trois gestes là où l'espace cabinet de Pennylane en demande un.
   Les boutons restent invisibles jusqu'au survol pour ne rien ajouter à la
   densité de lecture. */
.col-actions{width:1%;white-space:nowrap;text-align:right}
.actions-ligne{display:inline-flex;gap:6px;opacity:0;transition:opacity .12s}
tr:hover .actions-ligne, tr:focus-within .actions-ligne{opacity:1}
.mini{border:1px solid var(--bleu);background:var(--surface);color:var(--bleu);
  border-radius:7px;padding:5px 10px;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;line-height:1.2}
.mini:hover{background:var(--gris);border-color:var(--bleu-100)}
.mini.accent{background:var(--orange);border-color:var(--orange);color:#fff}
.mini.accent:hover{filter:brightness(1.06)}
/* Sur écran tactile il n'y a pas de survol : les actions restent lisibles. */
@media(hover:none){.actions-ligne{opacity:1}}

/* ---- premier écran ----
   Un portefeuille vide accueillait par « 0 dossier sur 0 » posé au-dessus d'un
   bloc gris pâle et de deux commandes flottant au centre du vide. Un zéro n'a
   jamais donné envie de rien. La chaleur ne vient pas d'un aplat de couleur
   (le brand book garde le bleu nuit dominant et l'orange en accent seul) : elle
   vient d'un accueil nominatif, d'un chiffre vrai, et d'un seul geste évident. */
.accueil-vide{margin:8px 0 0;padding:44px 40px 38px;background:var(--surface);
  border:1px solid var(--filet);border-radius:16px;
  box-shadow:0 1px 2px rgba(0,20,60,.04)}
.accueil-corps{max-width:660px}
.accueil-sur-titre{margin:0 0 14px;font-size:15px;font-weight:600;color:var(--ink-doux)}
/* La pastille de bienvenue, affichée une fois, à l'instant où le cabinet vient
   de terminer son inscription. Même langage que la pastille du courriel, pour
   que les deux moments se répondent. */
.accueil-fete{display:inline-block;margin-right:10px;padding:5px 12px;border-radius:999px;
              background:var(--bleu-100);color:var(--bleu);font-size:13px;font-weight:700;
              letter-spacing:.02em;vertical-align:middle}
.accueil-promesse{margin:0 0 16px;font-size:31px;line-height:1.25;color:var(--bleu);
  font-weight:800;letter-spacing:-.01em}
/* L'orange du brand book (#E14F0A), pas la variante assombrie réservée aux
   textes sous 18 px. À 31 px en gras, le seuil de contraste est de 3:1 et
   #E14F0A le dépasse : rien ne justifiait de ternir l'accent de la marque. */
.accueil-promesse b{color:var(--orange);font-weight:800}
.accueil-detail{margin:0 0 26px;font-size:16px;line-height:1.6;color:var(--ink-doux)}
.accueil-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.accueil-actions .btn.grand{width:auto;min-width:240px}
.accueil-duree{margin:14px 0 0;font-size:14px;color:var(--ink-doux)}
.accueil-confiance{display:flex;flex-wrap:wrap;gap:10px 22px;margin:28px 0 0;padding:20px 0 0;
  border-top:1px solid var(--filet);list-style:none}
.accueil-confiance li{position:relative;padding-left:19px;font-size:13.5px;color:var(--ink-doux)}
/* QUATRE ACCENTS NE FONT PLUS UN ACCENT. Les quatre garanties portaient
   chacune une coche orange épaisse, sur le seul écran dont l'unique accent
   devrait être le bouton. La réassurance est dans les mots. */
.accueil-confiance li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;
  border-radius:1px;border:1.5px solid var(--ink-doux);border-top:0;border-right:0;
  transform:rotate(-45deg)}
@media(max-width:720px){
  .accueil-vide{padding:30px 22px 26px}
  .accueil-promesse{font-size:25px}
  .accueil-actions .btn.grand{width:100%;min-width:0}
}

/* ---- écran d'import ----
   Les deux entrées avaient exactement le même poids alors qu'elles ne servent
   pas au même moment : déposer son export est le geste attendu, coller trois
   SIREN est le premier essai. La grille donne 3 parts au chemin principal
   contre 2, et le CTA orange (accent réservé aux appels à l'action selon le
   brand book) passe du côté du dépôt. */
.import-deux{display:grid;grid-template-columns:3fr 2fr;gap:26px;align-items:start}
.import-principal .depot{padding:48px 24px}
.depot-titre{margin:10px 0 4px;font-size:18px;font-weight:700;color:var(--bleu)}
/* Le glisser-déposer existait sans jamais se montrer : la zone ne réagissait
   qu'au survol de souris, pas au fichier qu'on lui amène. */
.depot.survol{border-color:var(--orange);background:var(--orange-100);
  border-style:solid}
.import-alternative{align-self:start}

/* Ce qui arrive après le dépôt. Le mur de texte de quatre lignes en bas de page
   mêlait durée, engagement de confidentialité et droit à l'effacement : trois
   sujets qu'un cabinet lit à trois moments différents. */
.apres-import{margin-top:26px;padding:22px 24px;background:var(--gris);
  border:1px solid var(--filet);border-radius:14px}
.apres-titre{margin:0 0 12px;font-size:12.5px;font-weight:700;color:var(--bleu);
  text-transform:uppercase;letter-spacing:.05em}
.apres-etapes{margin:0;padding-left:20px;font-size:14.5px;line-height:1.6;color:var(--ink-doux)}
.apres-etapes li{margin:5px 0}
.apres-etapes b{color:var(--ink)}
.apres-confiance{margin-top:18px;padding-top:16px}
@media(max-width:860px){
  .import-deux{grid-template-columns:1fr}
  .import-principal .depot{padding:32px 18px}
}

/* Sous le point d'équilibre, on montre le seuil à atteindre, jamais le montant
   négatif : le bleu dit un objectif, le rouge disait un échec. */
.bareme-net.seuil-a-atteindre b{color:var(--bleu);font-size:22px}
.bareme-net.seuil-a-atteindre{opacity:.95}

/* ---- onglets de la fiche ----
   Sept sections empilées sur plus de deux mille pixels : le cabinet qui
   cherchait le bloc de montage repassait devant tout à chaque fois. Le trait
   orange sous l'onglet actif est la règle du brand book pour un onglet
   sélectionné. */
.onglets-fiche{display:flex;gap:2px;margin:22px 0 0;border-bottom:1px solid var(--filet);
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.onglets-fiche button{position:relative;flex:0 0 auto;border:0;background:none;
  padding:12px 18px;font:inherit;font-size:15px;font-weight:600;color:var(--encre-2);
  cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.onglets-fiche button:hover{color:var(--bleu);background:var(--gris)}
.onglets-fiche button[aria-selected="true"]{color:var(--bleu);border-bottom-color:var(--orange)}
.onglets-fiche button:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.panneau-onglet{padding-top:6px}
/* Un panneau masqué ne doit rien laisser dépasser, y compris ses marges. */
.panneau-onglet[hidden]{display:none}
.pastille-compte{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--bleu-100);color:var(--bleu);font-size:12.5px;font-weight:700}
@media(max-width:640px){.onglets-fiche button{padding:11px 13px;font-size:14px}}

/* ---- agenda intégré ----
   Le cabinet réservait dans un onglet séparé : il quittait le produit au moment
   exact où il décidait, et ne savait plus où revenir. */
/* Même piège de spécificité que `.boite-large` : une classe seule perd contre
   `.voile .boite`, et l'agenda tenait dans 520 px. */
.voile .boite-agenda{width:min(920px,100%);padding:0;overflow:hidden}
.agenda-tete{display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;border-bottom:1px solid var(--filet)}
.agenda-tete{align-items:flex-start;gap:18px;padding:22px 24px 18px;
  border-bottom:1px solid var(--filet);background:#fff;box-shadow:inset 0 -3px 0 var(--bleu-100)}
.agenda-dire{min-width:0}
.agenda-sur{margin:0 0 6px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-txt)}
.agenda-tete h2{margin:0;font-size:22px;line-height:1.2;color:var(--bleu);font-weight:700}
.agenda-sous{margin:6px 0 0;font-size:14.5px;line-height:1.45;color:var(--encre-2);max-width:56ch}
.agenda-fermer{flex:0 0 auto;margin-top:2px}
@media(max-width:640px){.agenda-tete{padding:16px 16px 14px}.agenda-tete h2{font-size:19px}.agenda-sous{font-size:13.5px}}
/* Hauteur en pixels d'abord, `vh` en plafond : `min(660px,72vh)` s'effondre à
   zéro partout où l'unité de vue n'est pas résolue, et l'agenda disparaît sans
   la moindre erreur. */
#cadreAgenda{display:block;width:100%;height:660px;max-height:72vh;min-height:420px;border:0}
.agenda-repli{margin:0;max-width:none;width:100%;padding:12px 22px;border-top:1px solid var(--filet);
  background:var(--gris)}
#btnPlutotRappel{display:block;margin:10px 0 0;font-size:14px}
/* LA FENÊTRE NE DÉPASSE JAMAIS L'ÉCRAN. Avec l'en-tête qui dit la promesse,
   la boîte dépassait 900 px : le haut se coupait sous la barre, le pied
   sortait en bas. Le voile devient défilant et la boîte se pose en haut,
   l'iframe prend ce qui reste. */
.voile#voileAgenda{align-items:flex-start;overflow-y:auto;padding:16px;z-index:calc(var(--z-sticky) + 30)}
.voile#voileAgenda .boite-agenda{margin:auto;display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
.voile#voileAgenda #cadreAgenda{flex:1 1 auto;height:660px;max-height:calc(100vh - 250px);min-height:380px}
@media(max-width:640px){
  .voile#voileAgenda{padding:8px}
  .voile#voileAgenda .boite-agenda{max-height:calc(100vh - 16px)}
  .voile#voileAgenda #cadreAgenda{height:560px;max-height:calc(100vh - 200px);min-height:360px}
  .agenda-sous{display:none}
}

/* Les deux voies au même poids. L'une avait un bouton fantôme face à un bouton
   orange pleine largeur : le poids visuel décidait à la place du cabinet, et il
   décidait toujours de déléguer. Le bleu plein et l'orange plein pèsent pareil,
   la charte est respectée (bleu dominant, orange en accent). */
.voies{align-items:stretch}
.voie{display:flex;flex-direction:column}
.voie .btn.grand{margin-top:auto}
.promesse-voie{margin:0 0 10px;font-size:15px;color:var(--ink)}
.promesse-voie b{color:var(--bleu);font-size:16px}
/* Même règle : la promesse chiffrée reste bleue des deux côtés. Ce qui
   distingue la voie accompagnée, c'est son filet, pas la couleur de son
   chiffre. */
.voie-accent .promesse-voie b{color:var(--bleu)}

/* Les quatre nuances du montant, repliées : empilées, elles faisaient un
   paragraphe sous le chiffre, dans une colonne trop étroite pour elles. */
.nuances-montant{margin-top:8px}
.nuances-montant summary{font-size:13px;color:var(--ink-doux);cursor:pointer}
.nuances-montant .economie-part,
.nuances-montant .hypothese{display:block;margin-top:8px;font-size:13px;line-height:1.55;
  color:var(--ink-doux)}
/* Un montant ne se coupe jamais entre le nombre et son unité. */
.montant, .fourchette, .retour-affinage b, .financement b{white-space:nowrap}
.retour-affinage{white-space:normal}

/* Le mot du cabinet : deux blocs libres qui transforment un export de catalogue
   en document signé par un professionnel. */
/* TROIS SURFACES, ET UNE SEULE PAR RÔLE. Le fond de page vaut #F6F6F6 et le
   gris des blocs vaut #F6F6F6 : ce bloc, posé directement sur la page, était
   donc de la même couleur qu'elle et ne tenait que par son filet d'un pixel.
   Le gris est la surface SECONDE, celle d'un bloc à l'intérieur d'une carte ;
   une carte posée sur la page est blanche. */
.mot-cabinet{margin:var(--e5) 0 0;padding:var(--e5) var(--e5);background:var(--surface);
  border:1px solid var(--filet);border-radius:var(--r)}
.mot-champs{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5)}
.mot-actions{display:flex;align-items:center;gap:var(--e3);margin-top:var(--e4);flex-wrap:wrap}
/* L'INTITULÉ ET SA PRÉCISION AVAIENT LE MÊME POIDS. « Votre mot d'introduction »
   et « (en tête du rapport) » s'écrivaient dans la même taille, sur deux
   lignes : cela se lisait comme deux intitulés. L'un nomme le champ, l'autre
   dit où le texte ira. */
.mot-champs .champ > span{font-size:var(--tp-corps);font-weight:var(--gr-moyen);
  color:var(--ink)}
.mot-champs .champ > span .muet{display:block;margin-top:2px;font-size:var(--tp-meta);
  font-weight:var(--gr-normal);color:var(--ink-doux)}
@media(max-width:820px){.mot-champs{grid-template-columns:1fr}}

/* ---- fiche dispositif dépliée ----
   Le détail tenait en quatre lignes grises. Le catalogue portait déjà l'objet,
   les bénéficiaires et les conditions d'obtention de chaque dispositif : trois
   champs en base que rien n'affichait, et qui obligeaient le cabinet à sortir du
   produit pour savoir ce qu'il vendait. */
.fiche-dispositif{display:grid;grid-template-columns:1fr 300px;gap:26px;
  padding:6px 2px 10px}
.fiche-bloc{margin:0 0 16px}
.fiche-bloc h4{margin:0 0 5px;font-size:12px;font-weight:700;color:var(--bleu);
  text-transform:uppercase;letter-spacing:.04em}
.fiche-bloc p{margin:0 0 6px;font-size:14px;line-height:1.6;color:var(--ink-doux)}
.fiche-question{color:var(--ink)}
.fiche-question b{color:var(--orange-txt)}
.fiche-appui{color:var(--vert)}
.fiche-reserve{font-size:13.5px}
.fiche-cote{background:var(--gris);border:1px solid var(--filet);border-radius:12px;
  padding:16px 18px;align-self:start}
.fiche-cle{padding-bottom:12px;border-bottom:1px solid var(--filet)}
.fiche-cle span{display:block;font-size:11.5px;font-weight:700;color:var(--ink-doux);
  text-transform:uppercase;letter-spacing:.04em}
.fiche-cle b{display:block;margin-top:3px;font-size:24px;color:var(--bleu);
  font-weight:800;white-space:nowrap}
.fiche-cle em{display:block;margin-top:2px;font-size:12.5px;font-style:normal;
  color:var(--ink-doux)}
.fiche-meta{margin:12px 0 0}
.fiche-meta > div{margin:0 0 10px}
.fiche-meta dt{font-size:11.5px;color:var(--ink-doux);text-transform:uppercase;
  letter-spacing:.03em}
.fiche-meta dd{margin:1px 0 0;font-size:14px;font-weight:600;color:var(--bleu)}
.fiche-meta dd span{display:block;font-size:12.5px;font-weight:400;color:var(--ink-doux)}
/* La priorité se lit d'un coup d'oeil : c'est ce qui décide de l'ordre. */
.prio-haute{color:var(--orange)}
.prio-a_saisir{color:var(--ink-doux)}
.fiche-fin{color:var(--orange-txt)}
.fiche-financeur, .fiche-lecture{margin:10px 0 0;font-size:12.5px;color:var(--ink-doux)}
@media(max-width:900px){.fiche-dispositif{grid-template-columns:1fr}}

/* La priorité et l'effort sur la ligne : le cabinet décide sans déplier. */
.ligne-effort{display:block;margin-top:5px;font-size:12.5px;font-weight:600;color:var(--bleu)}
.ligne-effort span{font-weight:400;color:var(--ink-doux)}
/* UN SEUL SYSTÈME DE POINTS PAR LIGNE. La priorité portait un point de
   couleur, deux lignes sous le point de l'état : deux pastilles pour deux axes
   différents dans la même cellule. Le mot « Haute » dit déjà la priorité et ne
   se confond avec rien. Le point part, le mot reste. */
.puce-prio{display:none}

/* Le résultat obtenu, au-dessus du potentiel : c'est la seule preuve que le
   travail paie, et le seul chiffre qui compte devant un investisseur. */
.bandeau-obtenu{margin:0 0 14px;padding:14px 22px;border-radius:12px;
  background:rgba(20,108,71,.07);border:1px solid rgba(20,108,71,.22);font-size:15px}
.bandeau-obtenu b{font-size:22px;color:var(--vert);font-weight:800;white-space:nowrap}
.bandeau-obtenu span{display:block;margin-top:2px;font-size:13px;color:var(--ink-doux)}
/* Le suivi d'obtention, dans la fiche dépliée. */
.fiche-obtenu{margin-top:14px;padding-top:14px;border-top:1px solid var(--filet)}
.fiche-obtenu .case{display:flex;align-items:center;gap:9px;font-size:13.5px}
.champ-obtenu{margin-top:10px;max-width:100%}

.bandeau-obtenu .just{font-size:15px;color:var(--vert)}


/* ═══════════════════════════════════════════════════════════════════════════
   PROFONDEUR
   Yohan, 02/08/2026 : « c'est très blanc tout ça ». Le fond valait #fbfcfd et
   les cartes #ffffff : un écart d'un pour cent, donc aucune séparation visible.
   L'écran entier se lisait comme une seule feuille de papier, et les blocs ne
   tenaient que par des filets d'un pixel.

   La correction ne consiste pas à ajouter de la couleur mais de la PROFONDEUR :
   un fond franchement teinté, des cartes blanches qui s'en détachent par leur
   ombre, et des filets réduits au strict nécessaire. C'est ce qui donne à un
   produit comme Pennylane son air de logiciel plutôt que de document. La charte
   ne bouge pas : bleu nuit dominant, orange en accent seul.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Les grandes surfaces se posent sur le fond, elles ne s'y fondent plus. */
.panneau, .cadre-table, .cartouche, .demarrage, .accueil-vide, .carte-montage,
.apres-import, .mot-cabinet, .alerte-branchements, .voie{
  box-shadow:var(--ombre);
  border-color:rgba(0,32,84,.07);
}
.accueil-vide, .cartouche{border-radius:16px}

/* La zone de dépôt : une invitation, pas un cadre administratif. */
.depot{background:var(--surface);box-shadow:var(--ombre);
  border-color:var(--bleu-pastel)}
.depot:hover{box-shadow:var(--ombre-sur);border-color:var(--bleu)}

/* Le tableau, pièce maîtresse de l'écran : ses lignes réagissent. */
.cadre-table tbody tr{transition:background var(--t)}
/* LE SURVOL DU BRAND BOOK : « fond blanc opaque + typo orange ». Le fond bleu
   pâle au survol disait « sélection » ; le nom qui passe à l'orange dit
   « c'est ici que vous allez cliquer », et c'est l'accent de la marque. */
.cadre-table tbody tr:hover{background:var(--surface)}
.cadre-table tbody tr:hover .principal{color:var(--orange-txt)}
#lignes tr{cursor:pointer}

/* Les blocs de second niveau reposent sur le gris, désormais teinté lui aussi,
   ce qui suffit à les distinguer sans un trait de plus. */
.section{border-top-color:rgba(0,32,84,.08)}

/* Les modales flottent nettement au-dessus du reste. */
.voile .boite{box-shadow:var(--ombre-haute)}

/* Les commandes gagnent le même relief que les surfaces : un bouton plat sur un
   fond plat ne se distingue d'un libellé que par son cadre. */
.btn{box-shadow:0 1px 2px rgba(0,32,84,.06)}
.btn:hover{box-shadow:var(--ombre-sur);transform:translateY(-1px)}
.btn.orange{box-shadow:0 1px 2px rgba(225,79,10,.18)}
.btn.orange:hover{box-shadow:0 4px 14px rgba(225,79,10,.28)}
.btn:active{transform:translateY(0)}
.btn.fant, .btn.discret{box-shadow:none}
.btn.fant:hover, .btn.discret:hover{box-shadow:var(--ombre)}
/* Personne ne veut voir bouger un bouton désactivé. */
.btn:disabled, .btn:disabled:hover{transform:none;box-shadow:none}
@media(prefers-reduced-motion:reduce){
  .btn:hover, .btn:active{transform:none}
}

/* La barre d'application ancre le haut de l'écran au lieu d'y flotter. */
.appbar{box-shadow:0 1px 3px rgba(0,32,84,.12)}


/* ---- l'onglet des dispositifs se voit ----
   Yohan, 02/08/2026 : « je ne l'avais pas vu ». La pastille était bleu pâle sur
   fond blanc, à côté d'un libellé de même graisse que les trois autres onglets :
   rien ne disait que c'était LÀ que se trouvait le résultat de l'analyse.

   Sur le clignotement demandé : un clignotement PERMANENT fatigue, se fait
   ignorer en quelques secondes, et pose un problème d'accessibilité (WCAG 2.2.2
   impose de pouvoir arrêter tout mouvement de plus de cinq secondes). L'effet
   ne joue donc qu'UNE fois, à l'ouverture du dossier, là où l'attention est
   disponible. Ensuite l'orange fait le travail, en permanence et sans bouger. */
.pastille-compte{background:var(--orange);color:#fff;font-weight:800;
  padding:2px 9px;font-size:13px;box-shadow:0 1px 3px rgba(225,79,10,.35)}
.onglets-fiche button[aria-selected="false"] .pastille-compte{opacity:.92}

/* L'attention initiale : trois pulsations, puis plus rien. */
@keyframes appel-pastille{
  0%,100%{transform:scale(1);box-shadow:0 1px 3px rgba(225,79,10,.35)}
  50%{transform:scale(1.18);box-shadow:0 0 0 6px rgba(225,79,10,.18)}
}
.pastille-compte.appel{animation:appel-pastille 900ms ease-in-out 3}
/* Et l'onglet lui-même, tant que le cabinet n'y est pas allé. */
.onglets-fiche button.a-voir{color:var(--bleu)}
.onglets-fiche button.a-voir::after{content:"";position:absolute;left:12px;right:12px;
  bottom:-1px;height:3px;border-radius:2px;background:rgba(225,79,10,.28)}
@media(prefers-reduced-motion:reduce){
  .pastille-compte.appel{animation:none}
}

/* ---- parler à quelqu'un, en tête de l'onglet ----
   Le moyen de nous joindre existait mais arrivait après un titre, deux colonnes
   et trois paragraphes. Un cabinet qui ouvre cet onglet veut décider. */
.barre-parler{display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin:18px 0 6px;padding:18px 22px;border-radius:14px;
  background:var(--surface);border:1px solid var(--filet);box-shadow:var(--ombre);
  border-left:3px solid var(--orange)}
.barre-parler-titre{margin:0;font-size:16px;font-weight:700;color:var(--bleu)}
.barre-parler-sous{margin:3px 0 0;font-size:14px;color:var(--ink-doux)}
.barre-parler-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
@media(max-width:720px){
  .barre-parler{flex-direction:column;align-items:stretch}
  .barre-parler-actions .btn{width:100%;justify-content:center}
}

/* La preuve sous la promesse : ce qui rend crédible « nous le défendons ». */
.barre-parler-preuve{margin:6px 0 0;font-size:13px;color:var(--bleu);font-weight:600}

/* La part fiscale du montant. Crédit d'impôt recherche, crédit d'impôt
   innovation, statut JEI : le concurrent les sous-traite à un partenaire et
   affiche « aides fiscales : 0 » sur son écran de potentiel. C'est notre seul
   avantage structurel, il ne doit pas rester invisible. */
.part-fiscale{display:block;margin-top:10px;padding:10px 12px;border-radius:10px;
  background:var(--orange-100);font-size:14px;line-height:1.5;color:var(--ink)}
.part-fiscale b{font-size:17px;color:var(--orange);font-weight:800;white-space:nowrap}
.part-fiscale span{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-doux)}

/* Le cumul sur exercices antérieurs : c'est ce chiffre qui décide un dirigeant,
   pas le montant d'une seule année. */
.part-fiscale .cumul{display:inline-block;margin-top:4px;font-size:19px;color:var(--vert)}

/* Bandeau d'environnement : visible, permanent, impossible à confondre avec un
   message du produit. Il n'existe qu'en recette.

   D'OÙ VENAIT LE MARRON. Le bandeau était blanc sur un orange Moriarty assombri
   d'environ quarante pour cent. Cette couleur n'appartient pas à la charte :
   elle a été fabriquée pour une seule raison, le contraste. Du blanc sur
   l'orange de la charte donne 3,94:1, sous le seuil AA de 4,5:1 ; assombri, il
   monte à 7,62:1. Le contraste était réglé, la marque était perdue : cent
   pixels de marron en haut de chaque écran, plus lourds que le titre de la
   page. (Le code de cette teinte est nommé dans tests/test_branding.py, où il
   est désormais refusé ; l'écrire ici le ferait ressortir du test.)

   ON INVERSE LE RAPPORT. Orange foncé de la charte sur son propre fond clair
   (#A8390A sur #fdeee6 : 5,7:1, AA tenu), un filet de trois pixels en orange
   plein pour que la bande reste impossible à manquer, et des majuscules
   espacées : le bandeau se voit toujours au premier regard, mais il ne domine
   plus rien. Vingt-six pixels au lieu de cent. L'information n'est pas
   atténuée, elle est remise à sa place. */
.bandeau-env{position:sticky;top:0;z-index:calc(var(--z-sticky) + 10);
  padding:5px 20px;background:var(--orange-100);color:var(--orange-txt);
  box-shadow:inset 0 3px 0 var(--orange);border-bottom:1px solid var(--filet);
  font-size:11.5px;font-weight:700;line-height:1.45;
  text-align:center;letter-spacing:.06em;text-transform:uppercase}
/* La barre d'application se collait au même bord que le bandeau : en défilant,
   elle passait DESSOUS et la navigation disparaissait. Elle se cale maintenant
   sous lui. */
body.hors-prod .appbar{top:26px}

/* ---------- mot de passe et appareils ----------
   La jauge encourage, elle ne bloque pas : le refus vient du serveur. Elle va de
   l'orange foncé au vert en passant par le bleu de la marque, et n'affiche
   jamais de verdict écrit (« faible », « moyen ») : un mot de passe déclaré
   « moyen » se garde quand même, et le mot inquiète sans rien apprendre.
   Aucun rouge : la charte n'en a pas, et l'orange terre battue dit déjà
   « insuffisant » sans sortir de la palette. */

.ligne-appareil{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:11px 0;border-bottom:1px solid var(--filet)}
.ligne-appareil:last-child{border-bottom:0}
.ligne-appareil .secondaire{display:block;font-size:13px;color:var(--ink-doux)}
.ligne-appareil .etiq{display:inline-block;margin-left:6px;font-size:12px;
  font-weight:700;padding:2px 8px;border-radius:20px;
  background:var(--bleu-100);color:var(--bleu)}

/* ---------- page de connexion ----------
   Écran plein, centré, sans navigation. Tout ce qui n'aide pas à entrer en est
   retiré : chiffres, arguments, menu. La marque tient la moitié haute, comme
   chez Pennylane, parce qu'un écran de connexion est aussi le lieu où l'on
   vérifie qu'on est bien sur le bon site avant de taper son mot de passe. */
body.page-entree{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:32px 20px;
  /* Dégradé très doux, bleu de la charte vers un souffle d'orange. Il donne une
     profondeur que le blanc plat n'a pas, sans jamais concurrencer la carte. */
  background:
    radial-gradient(1100px 520px at 12% -10%, #ffffff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 460px at 92% 4%, var(--orange-100) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(170deg, var(--bleu-100) 0%, var(--fond) 100%);
}
.entree{width:100%;max-width:460px;text-align:center}
.entree-marque{display:inline-block;margin-bottom:34px}
.entree-marque img{height:52px;width:auto;display:block}
.entree-carte{
  background:var(--surface);border-radius:var(--r);padding:30px 28px 26px;
  box-shadow:var(--ombre-haute);text-align:left}
.entree-carte h1{font-size:24px;margin:0 0 20px;text-align:center}
.entree-carte .champ{max-width:100%;margin-bottom:16px}
.entree-btn{width:100%;justify-content:center;margin-top:4px}
.entree-case{display:flex;align-items:flex-start;gap:10px;margin:2px 0 20px;
  font-size:14px;color:var(--ink-doux);cursor:pointer}
.entree-case input{margin-top:2px;flex:0 0 auto}
.entree-code{font-size:26px;letter-spacing:8px;text-align:center}
.entree-liens{margin:16px 0 0;font-size:14px;color:var(--ink-doux);text-align:center}
.entree-bas{margin:22px 0 0;font-size:14.5px;color:var(--ink-doux)}
.entree-confiance{margin:26px 0 0;font-size:13px;color:var(--ink-doux);
  display:flex;align-items:center;justify-content:center;gap:8px}
@media (max-width:520px){
  .entree-marque img{height:42px}
  .entree-carte{padding:24px 20px 22px}
}

/* ---------- annonce du congrès ----------
   TRENTE-SIX PIXELS, PLAT, ET RIEN D'AUTRE. La version précédente était une carte
   bleue arrondie et ombrée, posée dans le hero : elle lui disputait l'attention,
   et elle a été retirée le 31/08/2026. Celle-ci est un bandeau système. Il pose
   une information, il ne vend rien, et il ne repousse le formulaire que de sa
   propre hauteur.
   BLANC SUR BLEU : 12,85:1. L'orange plafonne à 3,26:1 sur ce fond, sous le seuil
   de 4,5:1 du texte courant ; il ne sert donc que de pastille, où la règle des
   éléments non textuels s'applique et où 3:1 suffit. */
/* EN BLOC, PAS EN FLEX. En conteneur flex, le paragraphe était réduit à 490 px
   dans un bandeau de 1080 et la ligne se coupait en deux : « Stand FM3 » passait
   à la ligne suivante, seul, précédé de son point médian. Un bandeau sur deux
   lignes n'est plus un bandeau. */
.bandeau-congres{
  display:block;text-align:center;
  min-height:36px;padding:8px 18px;margin:0 0 22px;
  background:var(--bleu);color:#fff;
  font-size:14px;line-height:1.4;letter-spacing:.005em}
/* `p{max-width:70ch}`, posé globalement pour le confort de lecture, ramenait
   ce paragraphe à 490 px dans un bandeau de 1080 : « Stand FM3 » partait
   seul à la ligne. Une largeur de lecture n'a pas de sens sur une ligne
   d'information centrée. */
.bandeau-congres-texte{margin:0;max-width:none}
.bc-quand{color:var(--bleu-pastel)}
.bc-sep{color:var(--bleu-pastel)}
.bc-stand{font-weight:700;white-space:nowrap}
.bc-flash{font-weight:600;color:#fff}
.bc-flash::before{content:" · ";color:var(--bleu-pastel);font-weight:400}
.bc-flash[hidden]{display:none}
/* LE POINT DU CONGRÈS, VERT ET PULSANT. Demandé par Yohan le 01/09/2026.
   C'est une EXCEPTION À LA CHARTE, assumée et bornée comme celle du drapeau
   français : `--vert-congres` n'a le droit d'exister que sur ce point, un test
   le vérifie, et il disparaîtra avec le bandeau le 19 septembre.
   Le vert tient 5,64:1 sur le bleu, très au-dessus des 3:1 exigés d'un élément
   non textuel. La pulsation dure 1,6 s, soit 0,6 Hz : loin des 3 Hz à partir
   desquels un clignotement devient un risque pour les personnes photosensibles.
   Ce n'est pas un clignotement dur mais un battement d'opacité : sur un écran de
   stand, un allumé-éteint franc fatigue en trente secondes. */
/* PULSATION RETIRÉE le 01/09/2026, arbitrage de Yohan : elle était décorative et
   contredisait la règle produit « pas d'animations décoratives ». Le vert reste,
   statique, pour comparaison avec l'orange. Rien de tout cela n'est déployé. */
.bc-point{display:inline-block;width:8px;height:8px;margin-right:7px;
  border-radius:50%;background:var(--vert-congres);vertical-align:middle}
/* `vertical-align` sur un exposant agrandit la boîte de ligne : le bandeau
   mesurait 52 px au lieu des 36 visés. Décalé en position relative, il ne
   pousse plus rien. */
.bandeau-congres sup{font-size:.72em;line-height:0;vertical-align:baseline;position:relative;top:-.32em}
.bc-court{display:none}
.bandeau-congres-lien{display:inline-block;margin-left:14px;color:#fff;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;font-weight:600}
.bandeau-congres-lien:hover{text-decoration-thickness:2px}
.bandeau-congres-lien:focus-visible{outline:2px solid #fff;outline-offset:3px;
  border-radius:3px}
/* `display:inline-block` vient d'une feuille d'auteur : elle bat la règle
   `[hidden]{display:none}` du navigateur, et le lien s'affichait alors
   qu'aucune destination n'existe. Il faut donc le redire ici. */
.bandeau-congres-lien[hidden]{display:none}
@media (max-width:640px){
  /* Le titre long ne tient pas sur une ligne à 390 px, et un bandeau sur trois
     lignes n'est plus un bandeau : la forme courte le remplace. */
  .bc-long{display:none}
  .bc-court{display:inline}
  .bandeau-congres{font-size:13.5px;padding:7px 14px;gap:2px 10px}
  /* Les passages passent à la ligne : un bandeau de deux lignes reste un
     bandeau, une ligne de quatre-vingts caractères sur téléphone n'en est plus un. */
  .bc-flash{display:block;margin-top:2px}
  .bc-flash::before{content:none}
}

/* Le drapeau est dessiné en CSS et sa règle vivait sous `.confiance`, donc
   invisible partout ailleurs. Il sert aussi sur la page de connexion : la règle
   se détache de son emplacement d'origine plutôt que d'être recopiée. */
.drapeau{display:inline-flex;width:18px;height:12px;border-radius:2px;
  overflow:hidden;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,32,84,.10)}
.drapeau i{flex:1}
.drapeau i:nth-child(1){background:#002395}
.drapeau i:nth-child(2){background:#fff}
.drapeau i:nth-child(3){background:#ED2939}

/* Les liens de la page de connexion prennent le bleu de la marque : le bleu
   souligné du navigateur y jure, et sur l'écran qui doit inspirer le plus de
   confiance, un détail de ce genre se remarque. */
.page-entree a{color:var(--bleu-800);text-decoration:none;font-weight:700}
.page-entree a:hover{text-decoration:underline}
.page-entree .entree-marque:hover{text-decoration:none}

/* ---------- l'urgence en tête de hero ----------
   Elle doit se voir avant le titre sans le concurrencer. Le nombre est énorme
   parce que c'est lui qui arrête l'oeil : « 149 » se lit avant qu'on ait décidé
   de lire. L'orange terre battue de la charte porte l'alerte, le bleu porte
   l'explication ; l'inverse ferait crier la page entière. */
.urgence{display:inline-flex;align-items:center;gap:16px;margin:18px 0 4px;
  padding:12px 20px 12px 16px;border-radius:var(--r);text-decoration:none;
  background:var(--orange-100);border-left:3px solid var(--orange);
  transition:transform var(--t), box-shadow var(--t)}
.urgence:hover{transform:translateY(-1px);box-shadow:var(--ombre)}
.urgence-nombre{font-size:40px;line-height:1;font-weight:800;color:var(--orange);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.urgence-dire{font-size:14px;line-height:1.35;color:var(--ink-doux);max-width:38ch}
.urgence-dire b{display:block;color:var(--orange-txt);font-size:15px}

/* La réponse à l'objection numéro un. Encadrée et non noyée dans une liste :
   c'est la phrase qui décide si le reste sera lu. */
.promesse-forte{display:flex;align-items:flex-start;gap:10px;margin:20px 0 4px;
  padding:13px 16px;border-radius:var(--r-s);background:var(--bleu-100);
  color:var(--bleu);font-weight:700;font-size:15px;line-height:1.4;
  border-left:3px solid var(--bleu-800)}
.promesse-forte span[aria-hidden]{color:var(--vert);font-size:17px;line-height:1.2}

@media (max-width:720px){
  .urgence{gap:12px;padding:10px 14px}
  .urgence-nombre{font-size:32px}
  .urgence-dire{font-size:13px}
}

/* `hidden` doit gagner contre le `display` du composant. Sans cette règle,
   l'attribut est ignoré et le bloc s'affiche vide, ce qui est exactement le cas
   qu'il servait à éviter : une urgence sans son chiffre. */
.urgence[hidden]{display:none}

/* ---------- le guide, en sortie de hero ----------
   Discret volontairement : il ne doit pas concurrencer le formulaire
   d'inscription, il ramasse ceux qui ne sont pas encore prêts à s'inscrire. */
.guide-lien{margin:22px 0 0}
.guide-lien a{display:inline-flex;align-items:flex-start;gap:12px;
  padding:12px 16px;border-radius:var(--r-s);text-decoration:none;
  background:var(--surface);border:1px solid var(--filet);
  transition:border-color var(--t), box-shadow var(--t)}
.guide-lien a:hover{border-color:var(--bleu-pastel);box-shadow:var(--ombre)}
.guide-lien-icone{color:var(--orange);font-size:15px;line-height:1.5}
.guide-lien b{display:block;color:var(--bleu);font-size:14.5px}
.guide-lien-sous{display:block;margin-top:2px;font-size:13px;
  color:var(--ink-doux);max-width:44ch;font-weight:400;line-height:1.4}

/* Le logo du cabinet, dans les réglages. Le cadre est neutre et la hauteur
   bornée : un logo très large ne doit pas pousser le bouton hors de l'écran. */
.logo-ligne{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo-ligne img{max-height:56px;max-width:220px;object-fit:contain;
       padding:6px 10px;border:1px solid var(--filet);border-radius:var(--r-s);
       background:var(--surface)}

/* L'appel à l'action du moment. Un seul accent orange sur toute la vue : s'il y
   en avait deux, il n'y en aurait aucun. */
.appel-action{display:flex;align-items:center;justify-content:space-between;
       gap:20px;flex-wrap:wrap;border-left:4px solid var(--orange)}
.appel-action h2{font-size:19px}
.appel-action .aide{max-width:62ch}


/* ---- les règles du mot de passe, visibles avant de taper ----
   Elles se découvraient une par une, refus après refus : ajoutez un chiffre,
   validez, ajoutez un caractère spécial, validez encore. Trois allers-retours
   sur l'écran qui sépare un prospect de son premier portefeuille, et autant
   d'occasions d'abandonner. Ici tout est posé d'emblée et chaque ligne se coche
   pendant la frappe. Le vert ne récompense pas, il informe. */
.mdp-regles{list-style:none;margin:10px 0 0;padding:0;display:flex;
  flex-direction:column;gap:7px}
.mdp-regles li{display:flex;align-items:flex-start;gap:9px;font-size:14px;
  line-height:1.45;color:var(--ink-doux);transition:color var(--t)}
.mdp-regles li i{flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:50%;
  border:2px solid var(--filet);position:relative;transition:border-color var(--t),
  background var(--t)}
.mdp-regles li[data-ok] {color:var(--vert)}
.mdp-regles li[data-ok] i{background:var(--vert);border-color:var(--vert)}
.mdp-regles li[data-ok] i::after{content:"";position:absolute;left:4px;top:1px;
  width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg)}
.mdp-compte{font-variant-numeric:tabular-nums;font-weight:600}


/* Le compte concerné se lit, il ne se modifie pas : c'est une information, pas
   une saisie. Il reste un vrai champ, avec son `autocomplete="username"`, parce
   que c'est ce qui permet au gestionnaire du navigateur d'associer le mot de
   passe au bon compte au lieu de l'enregistrer sous « Aucun nom d'utilisateur ». */
#mdpIdentite{background:var(--panneau);color:var(--ink-doux);cursor:default}
#mdpIdentite:focus{outline:none;border-color:var(--filet);box-shadow:none}

/* ============================================================== LE COCKPIT ==
   Trois nombres et une action, au-dessus de la ligne de flottaison. L'ancien
   cartouche empilait sept objets pour répondre à une seule question. */
/* LA LÉGENDE DES QUATRE NIVEAUX EST UNE RÉFÉRENCE, PAS UNE ACTION. Elle
   occupait quatre paragraphes pleine largeur et repoussait sous la ligne de
   flottaison la seule chose à faire sur cet écran. Elle reste lisible, en
   retrait, et rend sa place au geste. */
#fiabPaliers{font-size:13px;line-height:1.45;color:var(--ink-doux);
  display:grid;gap:2px;margin:14px 0 0;padding:0;list-style:none}
#fiabPaliers li{display:grid;grid-template-columns:74px minmax(0,1fr);gap:10px;
  padding:3px 0;opacity:.72}
#fiabPaliers li.atteint{opacity:1;color:var(--ink);font-weight:500}
#fiabPaliers .rang{color:var(--ink-doux);font-size:12px;letter-spacing:.02em}
#fiabPaliers li.atteint .rang{color:var(--bleu);font-weight:700}
#fiabPaliers b{font-weight:650}

/* LE CARTOUCHE EST BLEU NUIT depuis le 8 septembre 2026, comme la maquette
   validée. Ce n'est pas une préférence : c'est le seul aplat sombre de l'écran,
   donc le seul endroit que l'oeil trouve avant d'avoir cherché, et c'est là que
   se trouve le chiffre qu'un expert-comptable retient. */
.cockpit{background:var(--bleu);border:0;border-radius:15px;
         box-shadow:var(--ombre);margin-bottom:18px;overflow:hidden}
/* UNE LIGNE DE CONTEXTE, PLUS QUATRE CARTES. Quatre cellules de cent quatre-vingt-
   dix pixels tenaient le haut de l'écran, dont deux qui ne disent rien tant que
   le cabinet n'a pas déclaré la taille de son portefeuille. Elles repoussaient
   la première entreprise sous la ligne de flottaison. Ce sont des compteurs de
   contexte : ils se lisent après le montant, pas avant les clients. */
.cockpit-mesures{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e2) var(--e6);
                 padding:var(--e3) var(--e5);background:var(--surface)}
.cm{background:transparent;padding:0;display:flex;align-items:baseline;gap:7px}
.cm span{font-size:var(--tp-meta);color:var(--ink-doux)}
/* DES COMPTEURS, PAS DES TITRES. Quatre nombres de trente-quatre pixels, dont
   deux qui ne disent rien (« — » et « 0 »), écrasaient le seul chiffre qui
   compte vraiment : le potentiel du portefeuille, relégué douze pixels plus bas
   en gris. On inverse le rapport de force. */
.cm b{display:inline;font-size:16px;font-weight:var(--gr-fort);line-height:1.1;
      color:var(--bleu);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* Un seul compteur en orange, celui qui appelle une action. Deux accents ne
   font plus un accent. */
.cm-signal b{color:var(--orange)}
/* Le compteur dont la donnée manque : il reste lisible et cliquable du regard,
   il ne pèse plus comme une mesure. Il passe aussi en dernier de la ligne. */
.cm-absent{order:9}
.cm-absent b{color:var(--ink-doux);font-weight:var(--gr-normal)}
.cm-absent span{color:var(--ink-doux)}
/* ================================================ LE MOMENT DE VALEUR ==
   « 2 M€ » est la promesse du produit, pas une donnée parmi d'autres. Il se
   lisait en vingt et un pixels, gris sur gris, à côté d'un bouton bleu plein
   qui pesait trois fois plus lourd que lui. Trois corrections, aucune fioriture :

   1. LE FOND DEVIENT BLEU MORIARTY (bleu-100). Le bloc du montant se détache du
      reste de la carte et porte la couleur de la marque, pas un gris neutre.
   2. LE CHIFFRE PASSE EN TÊTE DE BLOC, sur sa propre ligne, à quarante pixels.
      Ce qui le qualifie (« de potentiel, 252 K€ à confirmer ») devient sa
      légende, en dessous, en gris : la hiérarchie dit ce qui compte.
   3. LE BOUTON RESTE À DROITE et ne grossit pas. L'action se lit après la
      valeur, jamais avant.

   Aucun dégradé, aucune ombre portée, aucun encadré décoratif : la hiérarchie
   se fait par la taille, la couleur de la charte et le blanc autour. */
/* Les compteurs du haut vivent maintenant dans les tuiles de files (même
   nombres, avec les montants en plus). Le bloc reste dans le document et le
   script le remplit : il n'est plus affiché. */
.cockpit-mesures{display:none}
.cockpit-pied{display:grid;align-items:center;gap:var(--e4) var(--e6);
              grid-template-columns:minmax(0,1fr) auto auto;
              padding:20px 22px;border-top:0;background:transparent}
.cockpit-cote{border-left:1px solid rgba(255,255,255,.16);padding-left:20px;min-width:180px}
.cockpit-cote[hidden]{display:none}
.cockpit-cote span{display:block;font-size:12px;color:rgba(255,255,255,.72);
                   letter-spacing:.06em;text-transform:uppercase}
.cockpit-cote strong{display:block;margin-top:4px;font-size:20px;font-weight:600;
                     color:#fff;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .cockpit-pied{grid-template-columns:1fr}
  .cockpit-cote{border-left:0;padding-left:0;padding-top:14px;
                border-top:1px solid rgba(255,255,255,.16)}
}
/* LE CHIFFRE D'ABORD, L'ACTION ENSUITE. Le bouton précédait le montant dans le
   document : on lisait « Répondre à onze questions » avant de savoir qu'il y
   avait deux millions d'euros à la clé. C'est l'ordre inverse de l'argument.
   L'ordre du document ne bouge pas, il reste juste pour le clavier et les
   lecteurs d'écran, où l'action en premier a du sens. */
.cockpit-pied #btnCommencer{order:2;margin-left:auto;background:#fff;color:var(--bleu)}
.cockpit-pied #btnCommencer:hover{background:var(--bleu-100)}
.cockpit-pied .cockpit-montant{order:1}
.cockpit-pied .cockpit-cote{order:3}
@media (max-width:560px){
  .cockpit-pied #btnCommencer{margin-left:0;width:100%;justify-content:center}
}
/* LE CHIFFRE DE L'ÉCRAN. C'est lui que l'expert-comptable retient, pas le
   nombre de lignes analysées. Il passe devant les compteurs. */
.cockpit-montant{margin:0;font-size:var(--tp-corps);color:rgba(255,255,255,.78);line-height:1.5;
  font-variant-numeric:tabular-nums;flex:1 1 260px;min-width:0}
/* L'ÉTIQUETTE AVANT LE CHIFFRE. « 2 M€ » posé nu se lit comme une donnée ;
   « POTENTIEL DÉTECTÉ / 2 M€ » se lit comme un résultat. Deux mots, onze
   pixels et demi, et le chiffre cesse d'être une cellule de tableau. */
.cockpit-montant::before{content:"Potentiel détecté";display:block;
  font-size:var(--tp-label);font-weight:var(--gr-fort);letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:var(--e1)}
.cockpit-montant b{display:block;color:#fff;font-size:var(--tp-valeur);
  font-weight:var(--gr-fort);line-height:1.02;letter-spacing:-.025em;margin-bottom:1px}
/* Les trois tranches de certitude, séparées par des points médians discrets. */
.cockpit-montant .tr{white-space:nowrap}
/* Sur le bleu nuit, le vert et le gris du fond clair passent sous le seuil de
   lisibilité : le prêt à proposer garde son poids par la graisse et le blanc,
   le remboursable reste en retrait par l'opacité. */
.cockpit-montant .tr.fort{color:#fff;font-weight:700}
.cockpit-montant .tr.remb{display:block;margin-top:3px;color:rgba(255,255,255,.6);font-style:italic}

/* Les files de travail. Ce sont des files, pas des catégories : on les vide. */
/* LES FILES SONT DES TUILES. Une pastille « À qualifier 12 » est un filtre ; une
   tuile « À QUALIFIER · 12 · 1,9 M€ » est une décision. C'est ce que fait la
   tête de liste d'un logiciel financier mûr : compte, montant, tuile active
   cerclée. La ligne de compteurs qui vivait au-dessus disait la même chose
   en gris ; elle disparaît dans les tuiles. */
.files{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e3);
       margin:var(--e4) 0 var(--e5)}
.file{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
      padding:var(--e3) var(--e4);border-radius:var(--r-s);border:1px solid var(--filet);
      background:var(--surface);box-shadow:var(--ombre);font:inherit;text-align:left;
      cursor:pointer;transition:border-color var(--t),box-shadow var(--t);min-width:0}
.file:hover{border-color:var(--bleu-pastel)}
.file .file-lib{font-size:var(--tp-label);font-weight:var(--gr-fort);letter-spacing:.08em;
      text-transform:uppercase;color:var(--bleu)}
.file b{font-size:22px;font-weight:var(--gr-fort);color:var(--ink);line-height:1.1;
      font-variant-numeric:tabular-nums}
.file .file-montant{font-style:normal;font-size:var(--tp-meta);color:var(--encre-2);
      font-variant-numeric:tabular-nums}
/* La tuile active porte le seul orange de la bande : un cerclage, pas un aplat. */
.file[aria-pressed="true"]{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.file[aria-pressed="true"] .file-lib{color:var(--orange-txt)}
.file:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
/* UNE FILE VIDE S'EFFACE SANS DISPARAÎTRE. Deux des quatre tuiles affichaient
   « 0 » et un tiret avec le même poids visuel que les autres, et occupaient un
   quart de la bande pour ne rien dire. Les retirer ferait sauter la mise en
   page au premier dossier traité ; on les met en retrait et on ne les propose
   plus au clic. */
.file-vide{background:transparent;box-shadow:none;border-style:dashed;cursor:default}
.file-vide:hover{border-color:var(--filet)}
.file-vide .file-lib,.file-vide b,.file-vide .file-montant{color:var(--encre-2)}
.file-vide b{font-weight:var(--gr-normal,500)}

/* La maturité, dans le tableau. Trois niveaux, jamais un pourcentage.

   PLUS UNE PASTILLE. Une pastille cerclée par ligne, sur douze lignes, fait
   douze objets qui appellent l'œil pour dire une chose qu'aucun cabinet ne
   cherche en premier. Un relevé bancaire ne met pas ses libellés en badges.
   Un point et un mot : plein quand c'est acquis, cerclé quand ce n'est encore
   qu'une détection. La couleur porte le sens, la forme porte le degré. */
/* PASTILLE PLEINE, DE NOUVEAU, ET C'EST UN RETOUR ASSUMÉ. Le point-et-mot du
   01/09 après-midi rendait la colonne d'état grise et muette : sur douze
   lignes, rien ne se voyait. Les logiciels financiers mûrs font de l'état une
   colonne de COULEUR : fond teinté, texte foncé de la même teinte. Vérifié sur
   les écrans du logiciel Pennylane (« À payer » rouge pâle, « Payée » vert
   pâle, « À rapprocher » bleu pâle). */
.mat{display:inline-block;padding:3px 9px;border-radius:6px;font-size:12.5px;
     font-weight:var(--gr-fort);letter-spacing:.01em;line-height:1.3;white-space:nowrap}
.mat::before{content:none}
/* TROIS ÉTATS QUI SE DISTINGUENT À DEUX MÈTRES. Ils partageaient la même
   pastille blanche cerclée : sur un portefeuille entier, la colonne « maturité »
   ne hiérarchisait donc rien du tout, alors que c'est son seul travail. Le poids
   monte avec la maturité, comme la valeur. */
.mat.pret{background:var(--vert-100);color:var(--vert)}
.mat.qualifie{background:var(--bleu-100);color:var(--bleu)}
.mat.detecte{background:#eef1f6;color:var(--encre-2)}

/* La prochaine action. Un bouton discret par ligne : l'orange plein répété
   douze fois ferait de l'accent la couleur du tableau. */
.action-ligne{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:700;
              color:var(--orange-txt);cursor:pointer;text-align:left;line-height:1.35}
.action-ligne:hover{text-decoration:underline}
.action-ligne:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

/* La monétisation, dans la fiche et seulement quand l'opportunité est mûre. */
.offre-contextuelle{margin-top:22px;padding:18px 20px;background:var(--gris);
                    border-left:3px solid var(--bleu);border-radius:0 var(--r-s) var(--r-s) 0}
.offre-contextuelle h3{margin:0 0 6px;font-size:16px;color:var(--bleu)}
.offre-contextuelle p{margin:0 0 14px;font-size:14.5px;color:var(--ink-doux)}
.offre-contextuelle .choix{display:flex;flex-wrap:wrap;gap:10px}

@media (max-width:760px){
  /* Le titre et son chapeau redisent ce que la barre d'application affiche
     déjà : le nom du cabinet, et qu'on est sur le portefeuille. Ils gardent
     leur place, ils ne gardent pas leur hauteur. */
  h1{font-size:22px}
  .chapeau{font-size:14px;margin-bottom:14px}
  #v-portefeuille > h1{margin-bottom:2px}
  .bandeau-env{padding:4px 12px;font-size:10.5px;letter-spacing:.05em}
  /* LA VALEUR PASSE DEVANT LES COMPTEURS. Sur un écran de bureau, quatre
     compteurs sur une ligne coûtent trente pixels et se lisent d'un coup.
     Sur un téléphone, ils prennent deux cent quinze pixels, dont deux lignes
     pour dire qu'un chiffre n'est pas renseigné, et ils repoussent « 2 M€ »
     hors du premier écran. Le contexte se lit après la valeur, jamais avant.
     L'ordre du document ne change pas : au clavier et au lecteur d'écran,
     les compteurs restent en tête. */
  .cockpit{display:flex;flex-direction:column}
  .cockpit-pied{order:1;padding:16px;border-top:0}

  /* DEBOUT, AU CONGRÈS. Quatre compteurs empilés repoussaient la première
     entreprise à neuf cents pixels : deux écrans de pouce avant de voir un
     client. Deux colonnes, et le rembourrage des anciennes cartes retiré. */
  /* La ligne de compteurs est masquée partout (elle vit dans les tuiles) ; la
     règle mobile qui la posait en deux colonnes la RALLUMAIT, plus spécifique
     par sa requête de média. Attrapé sur la capture 375 px du 01/09 au soir. */
  .cockpit-mesures{display:none}
  .cm{padding:0}   /* sans objet tant que la ligne est masquée, conservé pour le test */
  .cockpit-pied{padding:14px 16px}
  /* QUATRE FILES SUR DEUX LIGNES COÛTAIENT QUARANTE PIXELS pour rien : la
     quatrième pastille tombait seule sur sa ligne. Serrées d'un cran, les
     quatre tiennent sur une, et la première entreprise remonte d'autant. */
  .files{grid-template-columns:1fr 1fr;gap:var(--e2)}
  .file{padding:var(--e2) var(--e3)}
  .file b{font-size:19px}
}

/* Pourquoi cette entreprise remonte. En tête de fiche, avant les montants. */
.pourquoi-fiche{background:var(--surface);border:1px solid var(--filet);border-radius:var(--r);
                box-shadow:var(--ombre);padding:22px 24px;margin-bottom:16px}
.pf-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
         gap:10px 18px;margin-bottom:14px}
/* TROIS COLONNES QUI SE RESSEMBLAIENT. Le raisonnement de la fiche (ce qui est
   confirmé, ce qui reste à confirmer, ce qui lèverait l'incertitude) est ce
   qu'il y a de plus fort dans le produit, et il était posé en trois listes
   grises identiques : rien ne disait, d'un coup d'œil, laquelle est un acquis
   et laquelle est un manque.

   Chaque colonne prend un filet vertical de deux pixels, dans la couleur de ce
   qu'elle dit : vert pour l'acquis, orange pour le manque, bleu pour ce qui
   déciderait. C'est un seul trait par colonne, pas un cadre, pas un fond. */
.pf-listes{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
           gap:20px 30px}
/* align-self:start : sans lui, la grille étire chaque colonne à la hauteur de
   la plus haute, et le filet de couleur d'une colonne à un élément descendait
   sur trois cents pixels de vide. Un trait qui souligne du vide attire l'œil
   sur ce qui n'est pas là. */
.pf-bloc{align-self:start;padding-left:14px;border-left:2px solid var(--filet)}
#pfVerifieBloc{border-left-color:var(--vert)}
#pfConfirmerBloc{border-left-color:var(--orange)}
#pfAppuisBloc{border-left-color:var(--bleu-pastel)}
/* LES TROIS BLOCS N'ONT PAS LE MÊME RÔLE. « Confirmé » et « à confirmer »
   décrivent un état ; « ce qui lèverait l'incertitude » est la seule colonne
   qui contient une DÉCISION à prendre. Elle prend donc une surface, pas
   seulement un filet : c'est le bloc qu'on doit voir en dernier ressort si on
   ne lit qu'une chose. Une surface, pas un cadre, pas une ombre. */
#pfQuestionsBloc{border-left-color:var(--bleu);background:var(--bleu-100);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:var(--e3) var(--e4)}
#pfQuestionsBloc h3{color:var(--bleu)}
.pf-bloc h3{margin:0 0 var(--e2);font-size:var(--tp-label);font-weight:var(--gr-fort);
            letter-spacing:.09em;text-transform:uppercase;color:var(--bleu)}
.pf-bloc ul{margin:0;padding:0;list-style:none}
.pf-bloc li{position:relative;padding-left:18px;margin-bottom:var(--e2);
            font-size:var(--tp-corps);color:var(--ink);line-height:1.45}
.pf-bloc li:last-child{margin-bottom:0}
.pf-bloc li::before{position:absolute;left:0;top:0;font-weight:700}
#pfVerifie li::before{content:"\2713";color:var(--vert)}
#pfConfirmer li::before{content:"\25B3";color:var(--orange-txt);font-size:11px;top:2px}
#pfAppuis li::before{content:"\2022";color:var(--bleu-pastel)}
.pf-sante{margin:16px 0 0;padding:12px 14px;background:var(--orange-100);border-radius:var(--r-s);
          font-size:14px;color:var(--orange-txt);line-height:1.5}
/* ESSAI ABANDONNÉ : REMONTER LE MONTANT SUR TÉLÉPHONE.
   La fiche ouvre sur le raisonnement, et sur trois cent quatre-vingt-dix
   pixels cela repousse « 1,5 M€ » au deuxième écran, alors que le cabinet
   vient de lire ce montant dans la liste. Le remède essayé (faire de la vue
   une boîte flexible et donner un ordre aux blocs) coûte plus qu'il ne
   rapporte : le bouton de retour devient un élément flexible étiré et centré,
   et tout enfant sans ordre explicite remonte en tête. Trois correctifs pour
   un déplacement, c'est le signe qu'il faut le faire dans le document, pas
   dans la feuille de style. Question posée à l'arbitrage. */
@media (max-width:760px){ .pourquoi-fiche{padding:var(--e4)} }
.offre-part{display:inline-block;margin-top:6px;font-size:13.5px;color:var(--ink-doux)}

/* ========================================================== LE CONSENTEMENT ==
   Une barre en bas, pas une fenêtre modale : elle n'enferme pas, ne recouvre pas
   le contenu et ne se referme pas sur un clic à côté, qui vaudrait acceptation
   tacite. Tant que rien n'est choisi, rien ne se charge. */
/* UNE BANDE BASSE, COURTE, ET LE OUI EN AVANT. Le bloc prenait quarante pour
   cent d'un écran de téléphone : un titre, quatre lignes, deux boutons de
   même taille. Le commentaire d'origine affirmait que « les deux boutons sont
   de même poids » alors que le balisage rendait déjà l'acceptation pleine et
   le refus en contour : la règle écrite n'était pas celle appliquée.
   Arbitré par Yohan le 01/09/2026 après avoir vu le bandeau de Pennylane :
   accepter en bouton plein, refuser en lien texte, au même niveau, un clic
   chacun, premier dans l'ordre de lecture. C'est ce que la CNIL exige (un
   refus aussi simple que l'acceptation), pas un refus aussi gros. */
.consentement{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-modale);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--e2) var(--e6);padding:var(--e3) clamp(16px,4vw,32px);
  background:var(--surface);border-top:1px solid var(--filet);
  box-shadow:0 -4px 24px rgba(0,32,84,.10)}
.consentement[hidden]{display:none}
.cons-texte{flex:1 1 320px;min-width:0}
.cons-texte p{margin:0;font-size:var(--tp-meta);line-height:1.45;color:var(--encre-2);max-width:70ch}
.cons-choix{display:flex;align-items:center;gap:var(--e4);flex:0 0 auto}
.cons-choix .btn{min-width:150px;justify-content:center;padding:9px 18px}
/* Le refus : un lien, lisible, de la hauteur d'un bouton pour le pouce. */
.cons-lien{background:none;border:0;padding:9px 4px;font:inherit;font-size:var(--tp-meta);
  font-weight:var(--gr-moyen);color:var(--encre-2);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;white-space:nowrap;border-radius:var(--r-s)}
.cons-lien:hover{color:var(--bleu)}
.cons-lien:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
@media (max-width:560px){
  .consentement{padding:var(--e3) var(--e4);gap:var(--e2) var(--e3)}
  .cons-texte{flex:1 1 100%}
  .cons-choix{width:100%;justify-content:space-between}
  .cons-choix .btn{flex:0 0 auto;min-width:0}
}
/* La question qui décide, et ce qu'elle débloque. Sans l'enjeu, une question
   ressemble à une formalité ; avec, on voit ce qu'elle vaut. */
#pfQuestions li{display:block;padding-left:18px}
#pfQuestions li::before{content:"?";color:var(--orange-txt);font-weight:800}
#pfQuestions b{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}
.q-source{display:block;font-size:12.5px;color:var(--ink-doux)}

/* ---------- la bande d'outils du portefeuille ----------
   « Dossiers prioritaires » répétait « Votre portefeuille » quatre-vingts pixels
   plus haut, et la barre d'outils occupait une ligne entière pour un champ de
   filtre et un bouton secondaire. Sur trois dossiers comme sur trois cents,
   c'est de la hauteur prise à ce qu'on est venu voir. Le titre et les outils
   partagent maintenant la même ligne. */
#titreDossiers{font-size:var(--tp-label);font-weight:var(--gr-fort);letter-spacing:.09em;
  color:var(--bleu);text-transform:uppercase;margin:0}
.section:has(#titreDossiers){display:grid;gap:10px}
.section:has(#titreDossiers) > .outils{margin:0}
@media (min-width:900px){
  .section:has(#titreDossiers){grid-template-columns:auto 1fr;align-items:center}
  #titreDossiers{grid-column:1;grid-row:1}
  .section:has(#titreDossiers) > .outils{grid-column:2;grid-row:1;justify-content:flex-end}
  .section:has(#titreDossiers) > .cadre-table{grid-column:1 / -1}
  .section:has(#titreDossiers) #champRecherchePf{max-width:260px}
}


/* ---------- le mode Exemple ----------
   Le vrai cockpit, ouvert sans compte sur douze entreprises inventées. Ce qui
   change à l'écran tient en quatre objets : le second bouton du hero, un
   bandeau qui dit que rien n'est enregistré, un appel dans la barre à la place
   du compte, et une boîte qui s'ouvre à la première action. Rien d'autre :
   le visiteur doit voir le produit, pas une visite guidée. */
.hero .btn.hr-btn.hr-second{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);
  color:#fff;box-shadow:none;padding-inline:clamp(16px,1.6vw,22px)}
.hero .btn.hr-btn.hr-second:hover{background:rgba(255,255,255,.16);border-color:#fff;
  filter:none;box-shadow:none;transform:translateY(-1px)}
.bandeau-exemple{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:7px 16px;background:var(--orange-100);color:var(--orange-txt);
  font-size:13px;font-weight:600;line-height:1.35;text-align:center}
.bandeau-exemple .be-puce{display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.bandeau-exemple .be-puce::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.bandeau-exemple .be-quitter{color:var(--orange-txt);font-weight:700;white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.bandeau-exemple .be-quitter:hover{color:var(--orange)}
.appbar-cta{display:none}
body.exemple .cabinet{display:none}
/* Le bloc « combien de dossiers gérez-vous ? » écrit au serveur : il n'a
   rien à demander à un visiteur qui regarde des entreprises inventées. */
body.exemple #blocProfondeur{display:none!important}
body.exemple #blocAppel{display:none!important}
body.exemple .appbar-cta{display:inline-flex;margin-left:auto;background:#fff;color:var(--bleu);
  border-color:#fff;font-size:14px;font-weight:700;padding:8px 14px;white-space:nowrap}
body.exemple .appbar-cta:hover{background:var(--bleu-100);border-color:var(--bleu-100)}
.ex-voile{position:fixed;inset:0;z-index:1200;background:rgba(0,30,80,.48);
  display:flex;align-items:center;justify-content:center;padding:20px}
.ex-voile[hidden]{display:none}
.ex-carte{background:#fff;border-radius:var(--r);padding:28px 30px 26px;max-width:460px;width:100%;
  box-shadow:0 28px 70px -24px rgba(0,30,80,.5)}
.ex-carte .ex-sur{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-txt);margin:0 0 8px}
.ex-carte h2{font-size:23px;line-height:1.2;color:var(--bleu);margin:0 0 10px;font-weight:700}
.ex-carte p{font-size:15px;color:var(--encre-2);line-height:1.55;margin:0 0 20px}
.ex-carte p b{color:var(--encre)}
.ex-actes{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.ex-actes .btn{justify-content:center;padding:13px 20px;font-size:16px}
.ex-lien{background:none;border:0;color:var(--bleu);font:inherit;font-size:14.5px;font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px}
@media (max-width:760px){
  .hero .btn.hr-btn.hr-second{width:100%;justify-content:center}
  .bandeau-exemple{font-size:12px;padding:6px 12px;gap:2px;flex-direction:column}
  .bandeau-exemple .be-long{display:none}
  body.exemple .appbar-cta{font-size:13px;padding:7px 10px}
  .ex-carte{padding:22px 20px 20px}
}

/* ================================================================
   L'OSSATURE, TELLE QU'ELLE A ÉTÉ VALIDÉE LE 8 SEPTEMBRE 2026
   ================================================================
   Le produit tient dans un cadre : une colonne bleu nuit qui porte l'OS entier,
   une barre de recherche, et l'écran. La marque vit DANS la colonne, pas dans
   une bande pleine largeur au-dessus : deux origines à gauche se voient tout de
   suite et coupent l'écran en deux.

   Les couleurs sont celles du brand book de Moriarty (#002E72, accent #E14F0A)
   et non celles relevées sur l'application payante : la maquette avait été
   dessinée sur les secondes, mais l'arbitrage sur l'orange du 7 septembre vaut
   pour le bleu.

   La vitrine ne change pas. Avant connexion, le cadre s'efface et la barre
   bleue d'arrivée reprend sa place : une navigation d'application sur une page
   que personne n'a encore ouverte ne veut rien dire. */
.cadre{min-width:0}
body[data-connecte="oui"] .cadre{
  max-width:1320px;margin:16px auto 30px;padding:0 0;
  border:1px solid var(--filet);border-radius:18px;overflow:hidden;
  box-shadow:var(--ombre);background:var(--surface);
  display:grid;grid-template-columns:228px minmax(0,1fr);min-height:660px}
body[data-connecte="oui"] .appbar{display:none}
body[data-connecte="oui"] main{max-width:none;margin:0;padding:22px}

/* ---------- la colonne ---------- */
.rail{background:var(--bleu);padding:18px 12px;display:flex;flex-direction:column;gap:18px}
body[data-connecte="non"] .rail{display:none}
/* LA BARRE DE RECHERCHE EST UN OUTIL DE SESSION. Montrée à un visiteur anonyme,
   elle promet une recherche dans un portefeuille qu'il n'a pas, et elle prend
   la première ligne d'un écran de téléphone. Constaté le 09/09/2026 sur la page
   publique, au lendemain de l'ossature : la règle du rail ne la couvrait pas.
   `:not(oui)` plutôt que `non` : avant que le script ait tranché, rien ne doit
   s'afficher non plus. */
body:not([data-connecte="oui"]) .barre{display:none}
.rail-marque{display:block;color:#fff;padding:2px 8px;border-radius:var(--r-s)}
.rail-marque svg{display:block}
.rail-marque:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.rail-cab{background:var(--bleu-800);border-radius:11px;padding:10px 12px;
          display:flex;gap:10px;align-items:center;min-width:0}
.rail-jeton{width:32px;height:32px;border-radius:9px;background:rgba(0,0,0,.3);color:#fff;
            display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px;flex:none}
.rail-q{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.7)}
/* LE NOM DU CABINET SE COUPE, IL NE DÉBORDE PAS. Le bloc est un élément de
   flex sans `min-width:0` : un nom long (« Cabinet du poste de développement »)
   l'élargissait à sa mesure et le texte sortait de la colonne de 97 px, par
   dessus la barre de recherche. Mesuré le 08/09/2026. Le `min-width:0` sur le
   parent ne suffit pas, il faut celui de l'enfant qui porte le texte. */
.rail-cab > div{min-width:0;flex:1 1 auto}
.rail-n{font-size:15px;font-weight:600;color:#fff;line-height:1.2;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rail-liste a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
              color:rgba(255,255,255,.78);text-decoration:none;font-size:15.5px;font-weight:500;
              transition:background var(--t),color var(--t),opacity var(--t)}
/* La pastille dit « il y a une suite », elle ne dit pas « c'est fermé ».
   Orange plein et texte blanc : sur le bleu nuit, un orange en texte sur fond
   translucide passe sous le seuil de lisibilité, et le brand book ne connaît
   pas de teinte claire d'orange. C'est le seul aplat orange de la colonne. */
.rail-liste a .p{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;
                 text-transform:uppercase;color:#fff;background:var(--orange);
                 border-radius:20px;padding:2px 7px}
.rail-liste a:hover{background:var(--bleu-800);color:#fff}
.rail-liste a[aria-current="page"]{background:#fff;color:var(--bleu);font-weight:600}
.rail-liste a[aria-current="page"] .p{color:var(--orange-txt);background:var(--orange-100)}
/* ESTOMPÉ, JAMAIS DÉSACTIVÉ. L'entrée reste cliquable et ouvre une destination
   qui explique ce qu'elle fait : un cadenas n'apprend rien à personne. */
.rail-liste a[data-hors-portee]{opacity:.45}
.rail-liste a[data-hors-portee]:hover{opacity:.8}
.rail-liste a:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Juste sous la liste, pas « en bas de la colonne » : la colonne s'étire avec la
   page et un bouton collé en bas partait hors de l'écran sur les réglages. */
.rail-sortie{margin-top:6px;display:flex;align-items:center;gap:9px;padding:10px 11px;border:0;border-radius:10px;
  background:transparent;color:rgba(255,255,255,.72);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;text-align:left}
.rail-liste + .rail-sortie{position:relative}
.rail-liste + .rail-sortie::before{content:"";position:absolute;left:11px;right:11px;top:-4px;height:1px;background:rgba(255,255,255,.14)}
.rail-sortie:hover{background:var(--bleu-800);color:#fff}
.rail-sortie:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- la barre de la zone ---------- */
.zone{display:flex;flex-direction:column;min-width:0}
.barre{display:flex;align-items:center;gap:14px;padding:14px 22px;
       border-bottom:1px solid var(--filet)}
.rech{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--panneau);
      border:1px solid var(--filet);border-radius:11px;padding:9px 12px;color:var(--ink-doux);
      font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:border-color var(--t)}
.rech:hover{border-color:var(--bleu-pastel)}
.rech:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.rech > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rech kbd{margin-left:auto;font-family:inherit;font-size:12px;font-weight:600;color:var(--encre-2);
          background:var(--surface);border:1px solid var(--filet);border-radius:6px;padding:2px 6px}
/* Dans la barre blanche, l'identité n'est plus qu'un avatar : le nom du cabinet
   est déjà en tête de colonne, l'écrire deux fois ne dit rien de plus. */
.barre .cabinet{margin-left:0;color:var(--encre-2)}
.barre .cabinet-bouton{color:var(--ink);padding:0}
.barre .cabinet-bouton:hover{background:none}
.barre .cabinet-bouton:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
.barre .cabinet-bouton #nomCabinet,
.barre .cabinet-bouton .chevron{display:none}

/* ---------- téléphone : la colonne devient un ruban ---------- */
@media (max-width:860px){
  body[data-connecte="oui"] .cadre{grid-template-columns:1fr;margin:0;border:0;
                                   border-radius:0;box-shadow:none;min-height:0}
  body[data-connecte="oui"] .rail{flex-direction:row;align-items:center;gap:10px;
    padding:10px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  body[data-connecte="oui"] .rail::-webkit-scrollbar{display:none}
  body[data-connecte="oui"] .rail-liste{flex-direction:row}
  body[data-connecte="oui"] .rail-liste a{padding:7px 10px;font-size:14px;white-space:nowrap}
  body[data-connecte="oui"] .rail-cab,
  body[data-connecte="oui"] .rail-liste a .p{display:none}
  body[data-connecte="oui"] .rail-marque svg{height:24px;width:86px}
  /* LE RUBAN DIT QU'IL DÉFILE. Sans cela il se coupe net au bord de l'écran,
     « Financem », et se lit comme un texte qui déborde de sa case, pas comme
     une liste à faire glisser. Vu sur le téléphone de Yohan le 08/09/2026. */
  body[data-connecte="oui"] .rail{position:relative}
  body[data-connecte="oui"] .rail::after{content:"";position:sticky;right:0;top:0;
    flex:0 0 34px;align-self:stretch;margin-left:-34px;pointer-events:none;
    background:linear-gradient(to right,rgba(0,46,114,0),var(--bleu) 70%)}
  body[data-connecte="oui"] .barre{padding:10px 14px}
  body[data-connecte="oui"] main{padding:16px 14px 56px}
}
@media (max-width:560px){
  .rech > span{font-size:14px}
  .rech kbd{display:none}
}

/* ================================================================
   L'ÉCRAN « VERSION COMPLÈTE »
   ================================================================
   Une entrée estompée n'est pas un cadenas : elle ouvre un écran qui sépare ce
   que le cabinet a déjà de ce que fait la solution complète, et qui nomme dans
   les deux cas qui prononce. Aucune démonstration à réclamer, aucun formulaire. */
.suite-fil{margin:0 0 6px;font-size:var(--tp-label);font-weight:var(--gr-fort);
           letter-spacing:.09em;text-transform:uppercase;color:var(--orange-txt)}
#v-suite h1{margin:0 0 8px}
.suite-deux{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;align-items:start}
.suite-deux h2{margin:0 0 12px;font-size:var(--tp-sous)}
.suite-la{border-color:var(--bleu-pastel);background:var(--bleu-100)}
.suite-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.suite-liste li{position:relative;padding-left:26px;font-size:var(--tp-corps);
                line-height:1.5;color:var(--encre-2)}
.suite-liste li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;
                        border-top:2px solid var(--bleu);border-right:2px solid var(--bleu);
                        transform:rotate(45deg)}
.suite-la .suite-liste li::before{border-color:var(--orange)}
.suite-reserve{margin-top:20px;padding:2px 0 2px 14px;border-left:3px solid var(--bleu-pastel);
               max-width:70ch}
.suite-actions{margin-top:24px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.suite-actions .btn.grand{width:auto;align-self:flex-start}
@media (max-width:760px){
  .suite-deux{grid-template-columns:1fr}
}

/* Le choix du mot de passe est le dernier geste de l'inscription et n'a qu'une
   issue : y laisser une navigation complète invite à partir voir ailleurs avec
   un compte qui n'est pas fini de créer. */
body:has(#v-mot-de-passe[data-actif]) .rail,
body:has(#v-mot-de-passe[data-actif]) .barre{display:none}
/* ET LE CADRE REDEVIENT UNE SEULE COLONNE. Remonté par Florence le 10/09/2026 :
   connectée, la colonne cachée laissait `main` prendre sa place dans la grille,
   soit 228 px pour tout l'écran, le formulaire écrasé à gauche et le reste vide.
   Une règle qui cache un élément d'une grille doit aussi dire ce que devient la
   grille. Même chose à venir pour tout écran qui cacherait la colonne. */
body[data-connecte="oui"]:has(#v-mot-de-passe[data-actif]) .cadre{
  grid-template-columns:minmax(0,1fr)}
body[data-connecte="oui"]:has(#v-mot-de-passe[data-actif]) main{
  padding:clamp(26px,6vh,56px) 22px 60px}
/* La marque et le repère d'étape, uniquement quand rien d'autre ne les porte :
   avant connexion la barre du haut affiche déjà le logo. */
.mdp-marque{display:none;margin:0 0 22px}
.mdp-marque img{display:block;height:28px;width:auto}
body[data-connecte="oui"] .mdp-marque{display:block}
.mdp-kicker{margin:0 0 6px;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-txt)}
/* Le bouton du dernier geste porte l'accent, comme celui de l'arrivée. */
#btnMdp{background:var(--orange);border-color:var(--orange);justify-content:center;width:100%}
#btnMdp:hover{background:var(--orange);border-color:var(--orange);filter:brightness(.93)}

/* ---------- la jauge de profondeur ---------- */
.jauge{display:flex;align-items:center;gap:12px;background:var(--panneau);
       border:1px solid var(--filet);border-radius:13px;padding:13px 16px;
       flex-wrap:wrap;margin-bottom:18px}
.jauge[hidden]{display:none}
.jauge .pas{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-doux)}
.jauge .pas i{width:9px;height:9px;border-radius:50%;background:var(--bleu-pastel);
              font-style:normal;flex:none}
.jauge .pas.fait{color:var(--ink)}
.jauge .pas.fait i{background:var(--vert)}
.jauge .pas.suivant{color:var(--orange-txt);font-weight:600}
.jauge .pas.suivant i{background:var(--orange)}
.jauge .fleche{color:var(--bleu-pastel)}
.jauge .cta{margin-left:auto}
.jauge .attente{margin-left:auto;font-size:13.5px;color:var(--ink-doux);font-style:italic}
@media (max-width:560px){
  .jauge{gap:8px}
  .jauge .cta,.jauge .attente{margin-left:0;width:100%}
  .jauge .cta{justify-content:center;text-align:center}
}


/* ================================================================
   L'ÉCRAN DOSSIERS
   ================================================================
   De l'air, et cinq colonnes. Le modèle est la liste des dossiers de la
   plateforme : un nom, un état, un identifiant, une ville, une action. Le
   motif, l'enjeu, les questions et la fiabilité vivent sur la fiche, qui est à
   un clic : les rapatrier ici referait le portefeuille en moins bien. */
.dos-entete{display:flex;align-items:flex-start;justify-content:space-between;
            gap:16px;flex-wrap:wrap}
.dos-entete h1{margin:0}
.dos-outils{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0 16px}
.dos-outils .champ-recherche{flex:1 1 320px;min-width:0}
.dos-compte{margin:0;font-size:var(--tp-corps);color:var(--ink-doux);white-space:nowrap}
.dos-filtres{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.dos-filtres button{border:1px solid var(--filet);background:var(--surface);color:var(--encre-2);
  border-radius:var(--r-pill);padding:7px 14px;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:border-color var(--t),color var(--t),background var(--t)}
.dos-filtres button:hover{border-color:var(--bleu-pastel);color:var(--bleu)}
.dos-filtres button[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
.dos-filtres button:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.dos-filtres .n{opacity:.7;font-weight:400;margin-left:5px}

/* Des lignes hautes : la liste se balaie du regard, elle ne se déchiffre pas. */
#dosTable{min-width:720px}
#dosTable tbody td{padding:16px 14px}
.dos-cli{display:flex;align-items:center;gap:12px;min-width:0}
.dos-jeton{flex:0 0 auto;display:inline-grid;place-items:center;width:38px;height:38px;
  border-radius:10px;background:var(--bleu-100);color:var(--bleu);
  font-size:12px;font-weight:800;letter-spacing:.04em}
/* LE NOM A LA PLACE DE S'ÉCRIRE. « Laboratoire Cosmétique Armor » tombait sur
   trois lignes dans cent cinquante pixels pendant que la colonne SIREN, large
   de neuf chiffres, en occupait deux cents. On donne au nom ce qu'il demande :
   c'est la seule colonne que l'oeil cherche. */
#dosTable th:first-child,#dosTable td:first-child{min-width:290px}
.dos-nom{font-size:16px;font-weight:var(--gr-fort);color:var(--bleu);line-height:1.3;
  text-wrap:balance}
#dosTable td.dos-id{font-variant-numeric:tabular-nums;color:var(--encre-2);white-space:nowrap}
#dosTable td.dos-manque{color:var(--ink-doux)}
#dosTable td.dos-acte{width:1%;white-space:nowrap;text-align:right}
@media (max-width:560px){
  .dos-filtres{margin-left:0}
  .dos-compte{width:100%}
}

/* ================================================================
   L'ÉCRAN FINANCEMENTS
   ================================================================
   Les cartes de tête reprennent celles de l'accueil de la plateforme : une
   icône, un libellé, un chiffre, une ligne de contexte. Rien d'autre. */
.fin-cartes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
            margin-top:18px}
.fin-carte{border:1px solid var(--filet);border-radius:13px;background:var(--panneau);
           padding:18px 20px}
.fin-carte .ico{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--surface);color:var(--orange);margin-bottom:14px}
.fin-carte .lib{display:block;font-size:var(--tp-corps);color:var(--encre-2)}
.fin-carte .val{display:block;margin-top:4px;font-size:30px;font-weight:var(--gr-fort);
  color:var(--bleu);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fin-carte .ctx{display:block;margin-top:8px;font-size:var(--tp-meta);color:var(--ink-doux)}

#finTable{min-width:820px}
#finTable tbody td{padding:15px 14px}
#finTable th:first-child,#finTable td:first-child{min-width:280px}
.fin-nom{font-size:16px;font-weight:var(--gr-fort);color:var(--bleu);line-height:1.3;
  text-wrap:balance}
.fin-nature{display:inline-block;font-size:12.5px;font-weight:600;border-radius:6px;
  padding:3px 8px;background:var(--surface);border:1px solid var(--filet);
  color:var(--encre-2);white-space:nowrap}
#finTable td.num{font-size:16.5px;font-weight:700;color:var(--bleu)}
#finTable td.num .secondaire{font-weight:400;font-size:var(--tp-meta);color:var(--ink-doux)}
#finTable td.fin-n{font-variant-numeric:tabular-nums;white-space:nowrap}
#finTable td.dos-acte{width:1%;white-space:nowrap;text-align:right}

/* LE FILTRE VENU DE L'ÉCRAN FINANCEMENTS SE VOIT ET SE RETIRE. Sans cette
   ligne, la liste des dossiers afficherait quatre entreprises sur douze sans
   dire pourquoi, et le cabinet croirait en avoir perdu huit. */
.dos-origine{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 14px;
  padding:10px 14px;border-radius:11px;background:var(--bleu-100);color:var(--bleu);
  font-size:var(--tp-corps)}
.dos-origine[hidden]{display:none}
.dos-origine b{font-weight:600}
.dos-origine button{margin-left:auto;background:none;border:0;padding:4px 6px;font:inherit;
  font-weight:600;color:var(--bleu);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}

/* ================================================================
   L'ÉCRAN QUESTIONS
   ================================================================ */
.questions-cadre{margin-top:18px;padding:16px 18px;border-radius:13px;background:var(--bleu-100);
  border:1px solid var(--bleu-pastel);color:var(--ink)}
.questions-cadre p{margin:0}
.questions-cadre p + p{margin-top:8px}
.questions-cadre .lien-nu{font:inherit;font-weight:600;color:var(--bleu);background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.questions-liste{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.question{border:1px solid var(--filet);border-radius:13px;background:var(--surface);
  box-shadow:var(--ombre);overflow:hidden}
.question-tete{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;flex-wrap:wrap}
.question-texte{flex:1 1 320px;min-width:0}
.question-texte h2{margin:0;font-size:17px;line-height:1.35;color:var(--bleu)}
.question-texte .secondaire{margin-top:4px}
.question-enjeu{text-align:right;white-space:nowrap}
.question-enjeu b{display:block;font-size:19px;color:var(--bleu);font-variant-numeric:tabular-nums}
.question-enjeu span{font-size:var(--tp-meta);color:var(--ink-doux)}
.question-corps{border-top:1px solid var(--filet)}
.reponse{display:flex;align-items:center;gap:12px;padding:11px 18px;flex-wrap:wrap}
.reponse + .reponse{border-top:1px solid #eef1f6}
.reponse .qui{flex:1 1 220px;min-width:0;font-weight:600;color:var(--ink)}
.reponse .qui .secondaire{font-weight:400}
.reponse .choix{display:flex;gap:6px;flex-wrap:wrap}
.reponse .choix button{border:1px solid var(--filet);background:var(--surface);color:var(--encre-2);
  border-radius:var(--r-pill);padding:7px 13px;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;transition:border-color var(--t),color var(--t),background var(--t)}
.reponse .choix button:hover{border-color:var(--bleu-pastel);color:var(--bleu)}
.reponse .choix button:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.reponse .choix button[disabled]{opacity:.55;cursor:default}
.reponse.faite{background:var(--panneau)}
.reponse.faite .qui::after{content:" · répondu";font-weight:400;color:var(--vert)}
.reponse.ecartee .qui{text-decoration:line-through;color:var(--ink-doux)}
.reponse.ecartee .qui::after{content:" · dispositif écarté";text-decoration:none}
.reponse .choix button[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
.reponse .choix input[type="number"]{width:120px;padding:7px 10px;border:1px solid var(--filet);
  border-radius:var(--r-s);font:inherit;font-size:14px;background:var(--surface)}
.reponse .choix input[type="number"]:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.reponse.faite .choix input[type="number"]{opacity:.6}
.reponse .erreur{flex-basis:100%;font-size:var(--tp-meta);color:var(--orange-txt)}
@media (max-width:560px){
  .question-enjeu{text-align:left}
  .reponse .choix{width:100%}
  .reponse .choix button{flex:1 1 auto;text-align:center}
}


/* ======================= L'ÉCRAN D'ARRIVÉE DU 09/09/2026 =======================
   Validé par Yohan sur maquette, contre la page de Pennylane pour experts-
   comptables : grand conteneur arrondi en dégradé doux, titre très grand, peu de
   mots, et une réaction au survol partout. Bleu dominant, orange en seul accent,
   le vert réservé aux états « obtenu ». Rien de vert décoratif. */

/* --- le hero : le lien de rendez-vous, les jalons, la main --- */
.hr-lien{color:rgba(255,255,255,.8);font-weight:600;font-size:clamp(14px,1.2vw,16px);text-decoration:underline;
  text-underline-offset:4px;padding:8px 4px;background:none;border:0;font-family:inherit;cursor:pointer;border-radius:var(--r-s)}
.hr-lien:hover{color:#fff}
.hr-lien:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.hr-lien[hidden]{display:none}
.hero .chapeau b{color:#fff;font-weight:700}
.hr-trajet{display:grid;gap:4px;margin-top:clamp(9px,1.1vw,14px);padding-top:clamp(8px,1vw,12px);border-top:1px solid rgba(0,46,114,.10)}
.hr-jalon{display:flex;align-items:center;gap:7px;font-size:clamp(9px,.85vw,11.5px);font-weight:700;letter-spacing:.02em;
  padding:5px 9px;border-radius:8px;white-space:nowrap;opacity:.28;transition:transform .25s,opacity .25s,box-shadow .25s}
.hr-jalon i{width:6px;height:6px;border-radius:50%;background:currentColor}
.hr-jalon.j1{background:var(--orange-100);color:var(--orange-txt)}
.hr-jalon.j2{background:var(--bleu-100);color:var(--bleu)}
.hr-jalon.j3{background:var(--vert-100);color:var(--vert)}
.hr-joue .hr-jalon{animation:hrJalon .5s ease-out both}
.hr-joue .j1{animation-delay:2.7s}.hr-joue .j2{animation-delay:3.4s}.hr-joue .j3{animation-delay:4.1s}
@keyframes hrJalon{from{opacity:.28;transform:translateY(3px)}to{opacity:1;transform:none}}
/* L'INSTRUMENT RÉPOND À LA MAIN : cases qui s'éclairent, fiche qui se soulève,
   compteur qui bat, scène inclinée vers le curseur. Rien sur écran tactile ni
   avec les animations réduites. */
.hr-scene{perspective:1200px}
.hr-vitre,.hr-fiche{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.hr-scene[data-suit="oui"] .hr-vitre{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.hr-c{transition:transform .18s cubic-bezier(.2,.7,.3,1),background .18s,box-shadow .18s}
.hr-c:hover{transform:scale(1.14);background:var(--bleu-100)}
.hr-c.hr-s:hover{transform:scale(1.18);box-shadow:0 8px 18px -6px rgba(225,79,10,.7)}
.hr-c.hr-o:hover{transform:scale(1.18);box-shadow:0 8px 18px -6px rgba(0,46,114,.7)}
.hr-fiche:hover{transform:translateY(-6px);box-shadow:0 4px 8px rgba(0,0,0,.08),0 30px 60px -22px rgba(0,0,0,.45)}
.hr-fiche .hr-total-v{display:inline-block;transition:transform .25s;transform-origin:left}
.hr-fiche:hover .hr-total-v{transform:scale(1.06)}
.hr-fiche:hover .hr-jalon{transform:translateX(4px)}
.hr-n{display:inline-block}
.hr-pied:hover .hr-n.hr-a{animation:hrBat .6s ease-in-out}
@keyframes hrBat{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}}
@media (hover:none),(prefers-reduced-motion:reduce){
  .hr-scene[data-suit="oui"] .hr-vitre{transform:none}
  .hr-c:hover,.hr-fiche:hover,.hr-fiche:hover .hr-jalon,.hr-fiche:hover .hr-total-v{transform:none}
  .hr-joue .hr-jalon{animation:none;opacity:1}
}

/* --- les sections : titres, révélation --- */
.sect{margin:0 0 clamp(34px,4.5vw,64px)}
.sect-tete{max-width:640px;margin-bottom:clamp(40px,4.5vw,64px)}
.sur{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-txt);margin-bottom:10px}
.sur::before{content:"";width:18px;height:2px;background:var(--orange);border-radius:2px}
.sect h2,.qui-bande h2,.engagements h2{margin:0;font-size:clamp(28px,3.2vw,42px);font-weight:700;letter-spacing:-.022em;line-height:1.1;color:var(--bleu);text-wrap:balance}
.sect-tete p{margin:12px 0 0;font-size:17px;color:var(--encre-2);max-width:56ch;line-height:1.5}
.revele{opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.revele.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.revele{opacity:1;transform:none;transition:none}}

/* --- la preuve : Moriarty, pas le catalogue --- */
.reperes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 clamp(34px,4.5vw,64px);
  background:linear-gradient(135deg,var(--bleu-100) 0%,#fff 58%,#fff 100%);border:1px solid var(--filet);
  border-radius:24px;overflow:hidden;box-shadow:var(--ombre)}
.repere{position:relative;padding:clamp(24px,2.8vw,40px) clamp(22px,2.6vw,36px) clamp(26px,2.8vw,40px);transition:background .25s ease}
.repere + .repere{border-left:1px solid var(--filet)}
.repere b{display:block;font-size:clamp(40px,4.4vw,62px);font-weight:800;color:var(--bleu);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;transition:color .25s ease}
.repere b .compte{display:inline;font:inherit;margin:0;color:inherit}
.repere b small{font-size:.5em;font-weight:800;letter-spacing:-.01em;margin-left:.12em}
.repere > span{display:block;margin-top:12px;font-size:16px;color:var(--encre-2);line-height:1.4;max-width:30ch;transition:color .25s}
.repere::after{content:"";position:absolute;left:clamp(22px,2.6vw,36px);right:clamp(22px,2.6vw,36px);bottom:0;height:3px;
  border-radius:3px 3px 0 0;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.repere:hover{background:#fff}
.repere:hover b{color:var(--orange)}
.repere:hover > span{color:var(--ink)}
.repere:hover::after{transform:scaleX(1)}
@media (max-width:720px){.reperes{grid-template-columns:1fr}.repere + .repere{border-left:0;border-top:1px solid var(--filet)}
  .repere{display:flex;align-items:baseline;gap:16px;padding:20px 22px}.repere b{font-size:34px;min-width:120px}.repere > span{margin:0}}
/* Sous 380 px, la colonne du texte tombait à un mot par ligne à côté de
   « + 2 400 » (17/10/2026) : le chiffre passe au-dessus de sa phrase. */
@media (max-width:380px){.repere{display:block;padding:18px 20px}.repere b{min-width:0;font-size:32px}.repere > span{margin-top:6px;max-width:none}}

/* --- de la détection à la mission : trois temps reliés --- */
.trajet{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.trajet::before{content:"";position:absolute;left:12%;right:12%;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--bleu) 0%,var(--orange) 50%,var(--bleu) 100%);opacity:.22}
.pas{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--filet);border-radius:22px;
  padding:0 clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px);box-shadow:var(--ombre);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.pas:hover{transform:translateY(-6px);box-shadow:var(--ombre-haute);border-color:var(--bleu-pastel)}
.pas-tete{display:flex;align-items:center;gap:12px;transform:translateY(-27px);margin-bottom:-10px}
.pas-n{width:54px;height:54px;border-radius:50%;background:var(--bleu);color:#fff;font-weight:800;font-size:21px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 7px var(--fond),0 10px 24px -10px rgba(0,46,114,.6);
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.pas.vous .pas-n{background:var(--orange);box-shadow:0 0 0 7px var(--fond),0 10px 24px -10px rgba(225,79,10,.6)}
.pas:hover .pas-n{transform:scale(1.08)}
.pas-qui{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);background:var(--bleu-100);border-radius:999px;padding:5px 11px}
.pas.vous .pas-qui{color:var(--orange-txt);background:var(--orange-100)}
.pas-tag{margin-left:auto;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-2);
  background:var(--surface);border:1.5px solid var(--filet);border-radius:999px;padding:5px 11px;white-space:nowrap}
.pas-tag.gratuit{color:var(--orange-txt);background:var(--orange-100);border-color:#f3c9b2}
@media (max-width:1000px){.pas-tag{margin-left:0}}
.pas h3{font-size:22px;font-weight:700;margin:6px 0 8px;color:var(--bleu);line-height:1.15}
.pas p{font-size:15.5px;color:var(--encre-2);line-height:1.5;margin:0 0 18px}
.mini{margin-top:auto;background:var(--panneau);border:1px solid var(--filet);border-radius:14px;padding:12px;overflow:hidden}
.mini-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(0,46,114,.55);padding:0 4px 10px}
.mini-tete > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-tete > span:last-child{flex:0 0 auto;white-space:nowrap}
.mini-tete i{width:7px;height:7px;border-radius:50%;background:var(--vert);display:inline-block;margin-right:6px}
.mini .ligne{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--bleu);background:var(--surface);
  border:1px solid var(--filet);border-radius:9px;padding:9px 10px;transition:transform .25s,border-color .25s}
.mini .ligne + .ligne{margin-top:6px}
.mini .av{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--bleu-100);color:var(--bleu);font-size:10.5px;
  font-weight:800;display:flex;align-items:center;justify-content:center}
.mini .nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini small{font-weight:700;font-size:12px;color:var(--ink-doux);white-space:nowrap}
.mini .ligne.on{border-color:var(--orange);background:var(--orange-100);color:var(--orange-txt)}
.mini .ligne.on .av{background:var(--orange);color:#fff}
.mini .ligne.on small{color:var(--orange-txt)}
.mini .ligne.ok{border-color:rgba(20,108,71,.28);background:var(--vert-100);color:var(--vert)}
.mini .ligne.ok .av{background:var(--vert);color:#fff}
.mini .ligne.ok small{color:var(--vert)}
.pas:hover .ligne.on,.pas:hover .ligne.ok{transform:translateX(4px)}
.choix{display:flex;gap:8px;background:var(--surface);border:1px solid var(--filet);border-radius:11px;padding:5px}
.choix span{flex:1;text-align:center;font-size:13px;font-weight:700;border-radius:8px;padding:9px 6px;color:var(--encre-2);transition:background .25s,color .25s}
.choix span.pris{background:var(--bleu);color:#fff}
.pas:hover .choix span.pris{background:var(--orange)}
.mini-jauge{margin-top:8px;height:6px;border-radius:6px;background:var(--surface);border:1px solid var(--filet);overflow:hidden}
.mini-jauge i{display:block;height:100%;width:62%;background:linear-gradient(90deg,var(--bleu),var(--orange));border-radius:6px;transition:width .6s cubic-bezier(.2,.7,.3,1)}
.pas:hover .mini-jauge i{width:100%}
.mini-note{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink-doux);padding:8px 4px 0}
.tarif{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(20px,2.4vw,32px)}
.tarif-tuile{display:flex;align-items:center;gap:clamp(16px,2vw,28px);padding:clamp(18px,2.2vw,28px) clamp(20px,2.4vw,32px);
  border-radius:20px;background:var(--surface);border:1px solid var(--filet);box-shadow:var(--ombre);transition:transform .3s,box-shadow .3s,border-color .3s}
.tarif-tuile:hover{transform:translateY(-4px);box-shadow:var(--ombre-haute);border-color:var(--bleu-pastel)}
.tarif-tuile b{flex:0 0 auto;font-size:clamp(30px,3vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--bleu);max-width:5.2em}
/* même dégradé vers l'orange que le bas du bloc engagements (Yohan, 09/09) */
.tarif-tuile.gratuit{background:linear-gradient(150deg,#fff 0%,#fff 30%,var(--orange-100) 100%);border-color:#f3c9b2}
.tarif-tuile.gratuit b{color:var(--orange)}
.tarif-tuile strong{display:block;font-size:17px;font-weight:700;color:var(--bleu);line-height:1.25;margin-bottom:4px}
.tarif-tuile span{font-size:14.5px;color:var(--encre-2);line-height:1.4}
@media (max-width:820px){.trajet{grid-template-columns:1fr;gap:44px}.trajet::before{display:none}.tarif{grid-template-columns:1fr}.tarif-tuile b{font-size:28px}}

/* --- qui est Moriarty --- */
.qui-bande{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,3vw,44px);align-items:center;
  background:var(--bleu-100);border-radius:22px;padding:clamp(24px,3vw,44px);margin:0 0 clamp(34px,4.5vw,64px)}
.qui-bande h2{font-size:clamp(24px,2.6vw,34px)}
.qui-bande p{margin:12px 0 0;font-size:17px;color:var(--encre-2);line-height:1.55;max-width:58ch}
.qui-bande p b{color:var(--bleu)}
.signature{display:flex;align-items:center;gap:14px;margin-top:22px}
.portrait{width:56px;height:56px;border-radius:50%;background:var(--bleu);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:19px;letter-spacing:.02em;flex:0 0 auto}
.signature b{display:block;color:var(--bleu);font-size:16px}
.signature span{font-size:14px;color:var(--ink-doux)}
.qui-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.qui-liste li{background:var(--surface);border-radius:12px;padding:14px 16px;box-shadow:var(--ombre);display:flex;gap:12px;align-items:flex-start;
  font-size:15px;color:var(--encre-2);border:1px solid transparent;transition:transform .25s,box-shadow .25s,border-color .25s}
.qui-liste li:hover{transform:translateY(-3px);box-shadow:var(--ombre-haute);border-color:var(--bleu-pastel)}
.qui-liste b{display:block;color:var(--bleu);font-size:16px;margin-bottom:2px}
.qui-liste .pic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--bleu-100);display:flex;align-items:center;justify-content:center;
  color:var(--bleu);transition:background .25s,color .25s}
.qui-liste li:hover .pic{background:var(--bleu);color:#fff}
.qui-liste .pic svg{width:18px;height:18px}
.qui-congres[hidden]{display:none}
@media (max-width:820px){.qui-bande{grid-template-columns:1fr}}

/* --- engagements : un seul bloc, comme une charte --- */
.engagements{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);
  align-items:center;margin:0 0 clamp(34px,4.5vw,64px);padding:clamp(28px,4vw,56px);border-radius:28px;border:1px solid var(--filet);
  background:linear-gradient(150deg,var(--bleu-100) 0%,#fff 52%,var(--orange-100) 100%);box-shadow:var(--ombre)}
.engagements::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(0,46,114,.06) 1px,transparent 1px);background-size:26px 26px}
.engagements > *{position:relative}
.engagements h2{font-size:clamp(30px,3.6vw,48px);letter-spacing:-.025em;max-width:16ch}
.eng-liste{list-style:none;margin:clamp(22px,2.6vw,36px) 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.eng-liste li{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;margin-left:-14px;border-radius:14px;
  font-size:16.5px;line-height:1.45;color:var(--encre-2);transition:background .25s,transform .25s}
.eng-liste li b{color:var(--bleu);font-weight:700}
.eng-liste li:hover{background:rgba(255,255,255,.85);transform:translateX(4px)}
/* Rangée sous `.eng-liste` : la classe `coche` sert aussi à la cellule de
   sélection des tableaux, qui devenait une pastille orange (vu le 23/09/2026). */
.eng-liste .coche{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--orange);margin-top:1px;position:relative;
  box-shadow:0 6px 14px -6px rgba(225,79,10,.7);transition:transform .25s}
.eng-liste .coche::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.eng-liste li:hover .coche{transform:scale(1.12)}
.schema{display:flex;flex-direction:column;align-items:center;padding:clamp(10px,1.5vw,20px) 0}
.noeud{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:clamp(15px,1.4vw,19px);border-radius:999px;
  padding:14px 26px;box-shadow:var(--ombre-haute);background:#fff;color:var(--bleu);border:1.5px solid var(--filet);transition:transform .3s}
.noeud.nous{background:var(--orange);border-color:var(--orange);color:#fff}
.noeud.cab{background:var(--bleu);border-color:var(--bleu);color:#fff}
.noeud .pt{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.85}
.sch-lien{width:3px;height:clamp(34px,4vw,54px);background:var(--bleu);border-radius:3px;position:relative;opacity:.9}
.sch-lien.flux::after{content:"";position:absolute;left:-3px;width:9px;height:9px;border-radius:50%;background:var(--orange);animation:flux 1.8s ease-in-out infinite}
@keyframes flux{0%{top:-4px;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:calc(100% - 5px);opacity:0}}
.sch-lien.coupe{background:repeating-linear-gradient(180deg,var(--bleu-pastel) 0 6px,transparent 6px 12px);opacity:.8}
.sch-lien.coupe::before{content:"\2715";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  background:#fff;border:2px solid var(--orange);color:var(--orange);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.3)}
.schema-legende{margin:12px 0 0;font-size:13px;font-weight:600;color:var(--ink-doux);text-align:center;max-width:30ch}
.engagements:hover .noeud.nous{transform:translateY(-3px)}
@media (max-width:820px){.engagements{grid-template-columns:1fr}.engagements h2{max-width:none}}
@media (prefers-reduced-motion:reduce){.sch-lien.flux::after{animation:none}}

/* --- le dernier bloc : parler ou charger --- */
.fin{background:var(--bleu);color:#fff;border-radius:22px;padding:clamp(26px,3.4vw,48px);display:grid;grid-template-columns:minmax(0,1.1fr) auto;gap:24px;align-items:center}
.fin h2{color:#fff;font-size:clamp(24px,2.8vw,36px);margin:0;letter-spacing:-.02em;line-height:1.1}
.fin p{margin:10px 0 0;color:rgba(255,255,255,.72);font-size:16.5px;max-width:52ch;line-height:1.5}
.fin .actes{display:flex;flex-direction:column;gap:10px;min-width:260px}
.btn.fin-btn{background:var(--orange);border-color:var(--orange);color:#fff;font-size:17px;padding:14px 22px;justify-content:center;
  box-shadow:0 12px 30px -14px rgba(225,79,10,.75)}
.btn.fin-btn:hover{background:var(--orange);border-color:var(--orange);filter:brightness(.93)}
.btn.fin-blanc{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);color:#fff;justify-content:center}
.btn.fin-blanc:hover{background:rgba(255,255,255,.16);border-color:#fff}
.btn.fin-blanc[hidden]{display:none}
.fin small{color:rgba(255,255,255,.62);font-size:13px;text-align:center}
@media (max-width:760px){.fin{grid-template-columns:1fr}.fin .actes{min-width:0}}

/* --- téléphone : la page se lit d'un pouce --- */
.cta-mobile{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--filet);box-shadow:0 -8px 30px rgba(0,32,84,.12);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.cta-mobile.visible{transform:none}
.cta-mobile b{display:block;font-size:13.5px;color:var(--bleu);line-height:1.2}
.cta-mobile span{display:block;font-size:12px;color:var(--ink-doux)}
.cta-mobile .btn{flex:0 0 auto;padding:12px 16px;font-size:15px}
@media (max-width:780px){
  .cta-mobile:not([hidden]){display:flex}
  .sect,.reperes,.qui-bande,.engagements{margin-bottom:30px}
  .sect-tete{margin-bottom:30px}
  .sect h2,.engagements h2,.qui-bande h2{font-size:clamp(26px,7.6vw,32px)}
  .hero h1{font-size:clamp(30px,8.4vw,38px)}
  .hero .hero-fort{font-size:.7em}
  .hr-lien{padding:12px 4px;display:inline-block}
  .hr-vitre{padding:12px;border-radius:14px}
  .hr-c{aspect-ratio:1.7}
  .hr-fiche{padding:14px 14px 12px}
  .hr-jalon{font-size:11px}
  .trajet{gap:26px}
  .trajet::before{display:block;left:47px;right:auto;top:0;bottom:0;width:2px;height:auto;
    background:linear-gradient(180deg,var(--bleu) 0%,var(--orange) 50%,var(--bleu) 100%);opacity:.22}
  .pas-tete{flex-wrap:wrap;gap:8px 10px}
  .pas h3{font-size:20px}
  .tarif-tuile{padding:18px 18px}
  .noeud{padding:11px 20px;font-size:15px}
  .sch-lien{height:30px}
  .qui-liste li{padding:12px 14px}
  .fin{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){.cta-mobile{transition:none}}
/* LA BARRE DU POUCE DÉBORDAIT (17/10/2026, mesuré à 320 px) : le bouton garde
   sa largeur (214 px), le texte n'avait plus que 62 px, et le bouton sortait de
   l'écran de 7 px, ce qui élargissait toute la page. Le texte peut désormais
   rétrécir ; sous 480 px il garde sa seule ligne forte, et sous 375 px le
   bouton prend toute la barre, seul. */
.cta-mobile > div{min-width:0}
@media (max-width:480px){.cta-mobile span{display:none}}
@media (max-width:374px){
  .cta-mobile > div{display:none}
  .cta-mobile .btn{flex:1 1 auto;justify-content:center}
  .fin .actes .btn{padding-left:16px;padding-right:16px}
}

/* ======================= CE QUI DÉBORDAIT, RELEVÉ LE 10/09/2026 =======================
   Le balayage de tous les écrans (deploiement/balayer_ecrans.py) a montré la page
   publique large de 1 498 px sur un écran de 1 400, et de 482 px sur un téléphone
   de 375 : une colonne de grille en `1fr` ne descend jamais sous le contenu le plus
   large de ses cartes, et une étiquette en une ligne suffisait à tout élargir. Une
   grille dit toujours `minmax(0,1fr)`, et ce qui ne peut pas rétrécir défile dans
   sa propre boîte, jamais la page. */
/* `main` est un enfant flex de `.zone` : sans `min-width:0`, la largeur minimale
   d'un tableau remonte jusqu'à lui et pousse tout l'écran hors du téléphone,
   alors que `.cadre-table` sait défiler. */
.zone > main{min-width:0;align-self:stretch;width:auto;max-width:100%}
/* Et les boîtes qui défilent ne dictent plus leur largeur à la page : leur
   contenu ne compte plus dans la largeur intrinsèque de leurs ancêtres. */
.cadre-table,.onglets-fiche{contain:inline-size}
@media (max-width:780px){.panneau-onglet,.cartouche{contain:inline-size}}
.pas{min-width:0}
.pas > *{min-width:0}
.pas-tete{flex-wrap:wrap}
.pas-tag{white-space:normal}
.repere{min-width:0}
.tarif-tuile{min-width:0}
.dos-entete{flex-wrap:wrap;gap:12px}
.dos-entete > *{min-width:0}
.onglets-fiche{overflow-x:auto;scrollbar-width:none}
.cartouche{min-width:0}
#ficheNom{overflow-wrap:anywhere}
@media (max-width:780px){
  .cartouche,.panneau-onglet,.panneau{overflow-x:auto}
  .fin-cartes{grid-template-columns:minmax(0,1fr)}
}
/* Le bandeau de mesure couvrait un quart de l'écran d'un téléphone. Même
   choix, même niveau pour refuser (CNIL), en deux fois moins de place. */
@media (max-width:560px){
  .consentement{padding:10px 14px;gap:6px 12px}
  .cons-texte p{font-size:13px;line-height:1.4}
  .cons-lien{font-size:13px;padding:6px 2px}
  .cons-choix .btn{padding:7px 16px;font-size:14px}
}
/* MOBILE ALLÉGÉ (Yohan, 17/10/2026, sur téléphone : « trop d'infos, trop
   chargé »). Sur un écran de téléphone : le titre, la promesse, le bouton,
   rien d'autre au-dessus de la ligne de flottaison. Le sur-titre répétait le
   logo de la barre ; la suite du chapeau et la réassurance redisent ce que la
   page détaille plus bas. L'ordinateur garde sa version complète. */
@media (max-width:560px){
  .hr-oeil{display:none}
  .hero .chapeau .chapeau-suite{display:none}
  .hr-sous{display:none}
  .hero .chapeau{margin-top:clamp(14px,4vw,20px)}
  .hr-lien{font-size:14.5px}
  /* Trois actions se disputaient l'écran : « Se connecter », « Ouvrir un
     accès » et « Analyser mon portefeuille », les deux dernières menant au
     même endroit. La barre garde la connexion, le bouton du titre garde
     l'action. */
  body[data-connecte="non"] .btn.appbar-ouvrir{display:none}
  /* Deuxième passe (Yohan, 17/10 : « trop d'info pour le mobile ») : la
     grille et la fiche d'exemple sont des effets d'écran large ; sur
     téléphone, le haut de page tient en un titre, une promesse, un bouton. */
  /* Quatrième passe (Yohan, 17/10, « Pennylane ferait comment ») : leur
     mobile tient en un titre, une phrase, un bouton, une preuve, puis un
     visuel du produit, le tout dans le bloc de couleur. Ici : le titre, la
     promesse orange, le bouton, « Détection gratuite et illimitée » comme
     preuve sous le bouton, puis la fiche d'exemple comme visuel. Le bloc bleu
     retrouve sa hauteur ; la grille reste un effet d'écran large. */
  .hr-acte{order:3}
  .hero .chapeau{order:4;font-size:15px;text-align:center;margin-top:12px}
  /* Lisibilité du titre (Yohan, 17/10 : « comment rendre plus lisible ») :
     à 32-35 px, le resserrement pensé pour 52 px colle les lettres et les
     lignes. On desserre un peu les deux, on détache la promesse orange d'un
     cran, et on donne de l'air avant le bouton. Mots et couleurs inchangés. */
  .hero h1{letter-spacing:-.018em;line-height:1.12}
  .hero .hero-fort{font-size:.62em;line-height:1.25;margin-top:.55em;letter-spacing:-.008em}
  .hr-acte{margin-top:28px}
  .hr-scene{order:6}
  .hr-vitre{display:none}
  .hr-fiche{margin-top:0}
  .hr-fiche::before{content:"Exemple · données fictives";display:block;
    font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:rgba(0,46,114,.46);margin-bottom:10px} /* teinte reprise de « Montant potentiel », même fiche */
  /* Lisibilité de la fiche (17/10, mesuré à 375 px) : ses tailles suivent la
     largeur de l'écran (vw) parce qu'elle flotte à côté du portefeuille sur
     l'ordinateur ; sur le téléphone elle prend toute la largeur mais restait
     au plancher, de 8,5 à 11,5 px. On la remet à une taille de lecture, et les
     trois jalons passent sur une ligne pour que la fiche ne s'allonge pas. */
  .hr-fiche{padding:16px 18px 14px}
  .hr-fiche-nom{font-size:16px}
  .hr-fiche-meta{font-size:12.5px;margin-top:3px}
  .hr-fiche-tete{margin-bottom:10px}
  .hr-ln{padding:8px 0;gap:12px}
  .hr-d{font-size:14px}
  .hr-v{font-size:14.5px}
  .hr-total{margin-top:8px;padding-top:12px}
  .hr-total-l{font-size:11px;margin-bottom:4px}
  .hr-total-v{font-size:24px}
  .hr-trajet{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px;padding-top:12px}
  .hr-jalon{justify-content:center;gap:5px;font-size:clamp(11px,3.4vw,12.5px);padding:7px 2px}
  /* Les trois temps gardent leur titre et leur phrase ; les fragments d'écran
     sont un luxe d'ordinateur. */
  .pas .mini{display:none}
  /* Troisième passe (Yohan, 17/10 : « simplifie et rends plus efficace ») :
     un message par bloc. L'introduction des trois temps, les étiquettes
     « Nous / Vous » et les sous-phrases des prix répétaient ce que le titre
     du bloc dit déjà ; « Qui est Moriarty » passe sur l'ordinateur. Aucune
     couleur ne change : on masque, on ne repeint pas. */
  section[aria-labelledby="titreMission"] .sect-tete p{display:none}
  .pas-qui,.pas-tag{display:none}
  /* Comme les cartes de Pennylane : un numéro, un titre. « Nous repérons »,
     « Vous décidez », « Nous montons, jusqu'au bout » se suffisent. */
  .pas > p{display:none}
  .tarif-tuile span{display:none}
  .qui-bande{display:none}
  /* Les engagements se lisent en quatre phrases en gras, sans leur
     développement ni le schéma. */
  .eng-liste li > div{font-size:0}
  .eng-liste li > div b{font-size:15.5px}
  .eng-visu{display:none}
}