:root{
    --navy:#0A1F44; --navy-2:#142a55; --navy-deep:#061331;
    --gold:#C9A961; --gold-2:#b89548;
    --cream:#f5f3ee; --cream-2:#ecebe4;
    --ink:#1a1a1a; --ink-2:#4a4a4a; --ink-3:#8a8a8a;
    --line:rgba(10,31,68,.12);
    --serif:'Playfair Display','Times New Roman',serif;
    --sans:'Inter',system-ui,-apple-system,sans-serif;
    --mono:'JetBrains Mono','SF Mono',monospace;
    --go:#1c6b4a; --go-bg:#e8f3ed;
    --sous:#8a5a00; --sous-bg:#fdf4e3;
    --non:#9c2b2b; --non-bg:#fbeceb;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;font-family:var(--sans);background:var(--cream);color:var(--ink);
            -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6;}
  a{color:var(--navy);}

  .topbar{background:var(--navy-deep);color:var(--cream);font-family:var(--mono);font-size:11px;
          letter-spacing:.08em;text-transform:uppercase;padding:8px 40px;display:flex;
          justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
  .topbar a{color:var(--gold);text-decoration:none;}
  header.ah{background:rgba(245,243,238,.96);padding:16px 40px;display:flex;align-items:center;
            justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);
            position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);}
  header.ah .marque{font-family:var(--serif);font-size:22px;color:var(--navy);text-decoration:none;}
  header.ah nav{display:flex;gap:24px;font-family:var(--mono);font-size:11px;
                letter-spacing:.14em;text-transform:uppercase;}
  header.ah nav a{color:var(--ink-2);text-decoration:none;}
  header.ah nav a:hover{color:var(--navy);}

  .hero{max-width:1000px;margin:0 auto;padding:44px 40px 8px;}
  .fil-ariane{max-width:1000px;margin:16px auto 0;padding:0 40px;
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-3);}
  .fil-ariane a{color:var(--ink-3);}
  .fil-ariane a:hover{color:var(--navy);}
  .fil-ariane span{color:var(--ink-2);}
  .cat{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
       color:var(--gold-2);margin-bottom:14px;}
  h1{font-family:var(--serif);font-size:44px;line-height:1.12;color:var(--navy);margin:0 0 16px;font-weight:500;}
  .chapo{font-size:17px;color:var(--ink-2);max-width:660px;margin:0;}
  .rassure{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
           color:var(--ink-3);margin-top:18px;}

  .cpt{color:var(--gold-2);}
  .cpt b{font-family:var(--mono);color:var(--navy);font-weight:500;}

  .porte{position:fixed;inset:0;z-index:200;background:rgba(6,19,49,.90);
         display:flex;align-items:center;justify-content:center;padding:24px;
         overflow-y:auto;}
  /* « display: flex » l'emporte sur la règle [hidden] du navigateur, dont la
     spécificité est plus faible : sans cette ligne, le panneau reste affiché
     alors qu'il est marqué masqué. */
  .porte[hidden]{display:none;}
  .porte .carte{background:var(--cream);border-radius:4px;padding:34px 36px 30px;
         max-width:440px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35);}
  .porte h2{font-family:var(--serif);font-size:25px;color:var(--navy);margin:8px 0 12px;
            font-weight:500;line-height:1.2;}
  .porte .intro{font-size:14px;color:var(--ink-2);margin:0 0 22px;}
  .porte .champ{margin-bottom:14px;}
  .porte label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:5px;}
  .porte input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:2px;
               font-family:var(--sans);font-size:15px;background:#fff;}
  .porte input:focus{outline:none;border-color:var(--gold);}
  .porte button{width:100%;margin-top:8px;padding:13px;border:none;border-radius:2px;
        background:var(--navy);color:var(--cream);font-family:var(--mono);font-size:11.5px;
        letter-spacing:.14em;text-transform:uppercase;cursor:pointer;font-weight:500;}
  .porte button:hover{background:var(--navy-2);}
  .porte button[disabled]{opacity:.55;cursor:progress;}
  .porte .err{color:#9c2b2b;font-size:13px;margin:10px 0 0;}
  .porte .carte{position:relative;}
  .porte .fermer{position:absolute;top:12px;right:14px;background:none;border:none;
        font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;padding:4px 8px;
        width:auto;margin:0;letter-spacing:0;}
  .porte .fermer:hover{color:var(--navy);background:none;}
  .porte .patience{font-size:12px;color:var(--ink-3);margin:10px 0 0;text-align:center;}
  #p-siren-etat{min-height:16px;margin-top:5px;}
  #p-siren-etat.recherche{color:var(--ink-3);}
  #p-siren-etat.trouve{color:var(--go);font-weight:600;}
  #p-siren-etat.erreur{color:#9c2b2b;}
  .essai-rdv{display:block;text-align:center;background:var(--gold);color:var(--navy-deep);
        text-decoration:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
        text-transform:uppercase;font-weight:600;padding:14px;border-radius:2px;margin-top:6px;}
  .essai-rdv:hover{background:var(--gold-2);}
  .porte .rgpd{font-size:11.5px;color:var(--ink-3);margin:16px 0 0;line-height:1.5;}
  .porte .p-consent{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;
                    font-size:12.5px;color:var(--ink-2);line-height:1.5;cursor:pointer;}
  .porte .p-consent input{width:auto;margin-top:2px;flex:0 0 auto;}
  .piege-champ{position:absolute!important;left:-9999px!important;width:1px!important;
               height:1px!important;opacity:0!important;}

  /* Avis affiché quand l'outil demandé a été retiré depuis le back-office. */
  #outil-indispo{max-width:1000px;margin:18px auto 0;padding:12px 16px;
       background:var(--cream-2);border-left:2px solid var(--gold);font-size:13.5px;
       color:var(--ink-2);line-height:1.55;}

  /* Espace suggestions, en bas de page. */
  .suggest{max-width:1000px;margin:44px auto 0;padding:0 40px;}
  .suggest-carte{background:var(--cream-2);border:1px solid var(--line);border-radius:4px;
       padding:28px 30px;}
  .suggest h2{font-family:var(--serif);font-size:22px;color:var(--navy);margin:0 0 6px;font-weight:500;}
  .suggest p.intro{font-size:14px;color:var(--ink-2);margin:0 0 18px;}
  .suggest .rang{display:flex;gap:14px;flex-wrap:wrap;}
  .suggest .rang .champ{flex:1;min-width:200px;}
  .suggest .champ{margin-bottom:12px;}
  .suggest label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:4px;}
  .suggest input,.suggest textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
       border-radius:2px;font-family:var(--sans);font-size:14.5px;background:#fff;}
  .suggest input:focus,.suggest textarea:focus{outline:none;border-color:var(--gold);}
  .suggest textarea{min-height:110px;resize:vertical;}
  .suggest button{margin-top:4px;padding:12px 22px;border:none;border-radius:2px;
       background:var(--navy);color:var(--cream);font-family:var(--mono);font-size:11px;
       letter-spacing:.14em;text-transform:uppercase;cursor:pointer;}
  .suggest button:hover{background:var(--navy-2);}
  .suggest button[disabled]{opacity:.55;cursor:progress;}
  .suggest .err{color:#9c2b2b;font-size:13px;margin:10px 0 0;}
  .suggest .ok{color:#1a7f4b;font-size:13px;margin:10px 0 0;}
  @media(max-width:640px){.suggest{padding:0 22px;}.suggest-carte{padding:22px;}}

  /* Confirmation d'envoi, discrète et non bloquante. */
  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:180;
         background:var(--navy);color:var(--cream);padding:13px 20px;border-radius:3px;
         font-size:13.5px;box-shadow:0 8px 28px rgba(10,31,68,.28);max-width:calc(100% - 36px);
         opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;}
  .toast.vu{opacity:1;transform:translateX(-50%) translateY(-4px);}
  .toast b{color:var(--gold);font-weight:600;}

  .avert{max-width:660px;margin:18px 0 0;padding:13px 16px;background:var(--cream-2);
         border-left:2px solid var(--gold);font-size:13.5px;color:var(--ink-2);line-height:1.55;}
  .avert b{color:var(--navy);font-weight:600;}
  .avert a{color:var(--navy);}

  /* Bouton d'envoi : détaché de la couleur du verdict, pour qu'il se voie
     comme une action à part entière plutôt que comme un détail du bandeau. */
  .envoi{margin-top:18px;padding-top:16px;border-top:1px solid currentColor;
         border-top-color:rgba(0,0,0,.12);display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .btn-envoi{appearance:none;border:none;background:var(--gold);color:var(--navy-deep);
        font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
        text-transform:uppercase;padding:13px 22px;border-radius:2px;cursor:pointer;
        font-weight:600;box-shadow:0 3px 10px rgba(0,0,0,.18);
        transition:background .15s, transform .15s, box-shadow .15s;}
  .btn-envoi:hover{background:var(--gold-2);transform:translateY(-1px);
        box-shadow:0 5px 14px rgba(0,0,0,.22);}
  .btn-envoi[disabled]{opacity:.6;cursor:progress;transform:none;}
  .envoi .etat{font-size:12.5px;opacity:.9;font-weight:500;}

  .rappel{font-size:12px;color:var(--ink-3);margin:-8px 0 18px;padding-left:2px;font-style:italic;}

  /* Trois cartes plutôt que trois libellés : on doit voir d'un coup d'œil
     qu'il y a trois outils, lequel est ouvert, et que les autres se cliquent. */
  .onglets{max-width:1000px;margin:34px auto 0;padding:0 40px;
           display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  /* Les cartes sont soit des boutons (outils de cette page), soit un lien
     (l'outil 6, qui a sa propre page) : même apparence dans les deux cas. */
  .onglets button, .onglets a.carte{appearance:none;cursor:pointer;text-align:left;position:relative;
        background:#fff;border:1px solid var(--line);border-radius:3px;
        padding:18px 20px 16px;font-family:var(--sans);line-height:1.35;
        display:flex;flex-direction:column;gap:7px;text-decoration:none;
        border-top:3px solid var(--teinte, var(--gold));
        transition:border-color .16s, box-shadow .16s, transform .16s, background .16s;}
  /* Une teinte par outil : on les distingue d'un coup d'œil sans transformer
     la page en arc-en-ciel — la couleur ne touche que le filet du haut et le
     numéro, le corps de la carte reste blanc. */
  #tab1{--teinte:#9d7c31;} #tab2{--teinte:#2c7a5e;} #tab3{--teinte:#3a6b9e;}
  #tab4{--teinte:#a1552c;} #tab5{--teinte:#6d4f86;} #tab6{--teinte:#8f2d3f;}
  /* Même précaution que pour .porte et .plein : « display: flex » ci-dessus
     l'emporte sur la règle [hidden] du navigateur, dont la spécificité est plus
     faible. Sans cette ligne, un outil coupé depuis le back-office garde son
     onglet visible et cliquable. */
  .onglets button[hidden], .onglets a.carte[hidden]{display:none;}
  .onglets .num{font-size:15px;line-height:1;
        color:var(--teinte, var(--gold-2));font-weight:500;
        width:30px;height:30px;border:1px solid var(--teinte, var(--gold));border-radius:50%;
        display:flex;align-items:center;justify-content:center;
        transition:background .16s, color .16s, border-color .16s;}
  .onglets .q{font-size:15px;font-weight:600;color:var(--navy);}
  .onglets .s{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
        text-transform:uppercase;color:var(--ink-3);}
  .onglets button:hover, .onglets a.carte:hover{border-color:var(--teinte, var(--gold));
        box-shadow:0 3px 14px rgba(10,31,68,.09);transform:translateY(-2px);}
  .onglets button:hover .num, .onglets a.carte:hover .num{background:var(--surface-2, #eee);}
  .onglets button:focus-visible, .onglets a.carte:focus-visible{outline:2px solid var(--teinte, var(--gold));
        outline-offset:2px;}
  /* L'outil 6 ouvre une autre page : la flèche le dit avant le clic. */
  .onglets a.carte .fleche{position:absolute;top:14px;right:15px;font-family:var(--mono);
        font-size:13px;color:var(--teinte, var(--gold));opacity:.75;}
  /* L'outil ouvert bascule en navy : impossible de se tromper sur celui qu'on lit. */
  .onglets button.actif, .onglets span.carte.actif{background:var(--navy);border-color:var(--navy);transform:none;
        box-shadow:0 4px 18px rgba(10,31,68,.20);
        /* La teinte de l'outil reste visible même quand la carte est ouverte :
           « border-color » ci-dessus repeindrait sinon le filet du haut, et il
           ne reviendrait jamais à sa couleur ensuite. */
        border-top-color:var(--teinte, var(--gold));}
  .onglets button.actif .q, .onglets span.carte.actif .q{color:#fff;}
  .onglets button.actif .s, .onglets span.carte.actif .s{color:rgba(245,243,238,.62);}
  .onglets button.actif .num, .onglets span.carte.actif .num{background:rgba(255,255,255,.10);
        border-color:var(--teinte, var(--gold));}
  .onglets button.actif::after, .onglets span.carte.actif::after{content:'';position:absolute;left:50%;bottom:-8px;
        width:14px;height:14px;background:var(--navy);transform:translateX(-50%) rotate(45deg);}

  main{max-width:1000px;margin:0 auto;padding:0 40px 70px;}
  section.outil{display:none;padding-top:30px;}
  section.outil.actif{display:block;}
  h2{font-family:var(--serif);font-size:29px;color:var(--navy);margin:0 0 6px;font-weight:500;line-height:1.2;}
  .sous{color:var(--ink-2);font-size:15px;margin:0 0 26px;max-width:640px;}

  /* min-width:0 sur les enfants : sans cela, une grille CSS laisse un contenu
     large (ici le tableau des 12 mois) forcer sa colonne au-delà de sa part
     équitable, et déborder de la page. */
  .grille{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;}
  .grille > div{min-width:0;}
  .bloc{background:#fff;border:1px solid var(--line);border-radius:3px;padding:22px 24px;margin-bottom:18px;}
  .bloc h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
           color:var(--gold-2);margin:0 0 16px;font-weight:500;}

  /* Cartes pliables (saisie) : même carte que .bloc, mais un <summary> cliquable
     tient la place du <h3> — l'utilisateur ouvre ce dont il a besoin plutôt que
     de faire défiler tous les champs d'un coup. */
  details.bloc{padding:0;}
  details.bloc summary{cursor:pointer;list-style:none;padding:18px 24px;
    display:flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gold-2);font-weight:500;user-select:none;}
  details.bloc summary::-webkit-details-marker{display:none;}
  details.bloc summary::before{content:'+';font-family:var(--sans);font-size:17px;
    font-weight:400;color:var(--ink-3);line-height:1;width:14px;text-align:center;flex-shrink:0;}
  details.bloc[open] summary::before{content:'−';}
  details.bloc summary:hover{color:var(--navy);}
  details.bloc summary:hover::before{color:var(--navy);}
  details.bloc summary .resume{font-family:var(--sans);text-transform:none;
    letter-spacing:0;font-size:12.5px;color:var(--ink-3);font-weight:400;}
  details.bloc .bloc-corps{padding:2px 24px 22px;}

  .champ{margin-bottom:13px;}
  .champ label{display:block;font-size:13.5px;color:var(--ink-2);margin-bottom:5px;}
  .champ input,.champ select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:2px;
       font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;}
  .champ input:focus,.champ select:focus{outline:none;border-color:var(--gold);}
  .champ .aide{font-size:12px;color:var(--ink-3);margin-top:4px;}
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

  table.inst{width:100%;border-collapse:collapse;font-size:13px;}
  table.inst th{font-weight:500;color:var(--ink-2);text-align:left;padding:5px 6px 5px 0;
                font-size:12.5px;vertical-align:middle;}
  table.inst thead th{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
                      text-transform:uppercase;color:var(--ink-3);text-align:center;padding-bottom:7px;}
  table.inst thead th:first-child{text-align:left;}
  table.inst td{padding:3px 2px;}
  table.inst input{width:100%;padding:6px 7px;border:1px solid var(--line);border-radius:2px;
                   font-family:var(--sans);font-size:13.5px;text-align:right;}
  table.inst input:focus{outline:none;border-color:var(--gold);}

  table.cmp{width:100%;border-collapse:collapse;font-size:13.5px;}
  table.cmp th{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
               color:var(--ink-3);font-weight:500;text-align:right;padding:0 0 8px;}
  table.cmp th:first-child{text-align:left;}
  table.cmp td{padding:8px 0;border-top:1px solid var(--line);text-align:right;}
  table.cmp td:first-child{text-align:left;color:var(--ink-2);}
  table.cmp td.n{font-family:var(--mono);color:var(--navy);white-space:nowrap;}
  table.cmp tr.meilleure td{background:var(--go-bg);font-weight:600;}
  table.cmp tr.meilleure td:first-child{color:var(--go);}
  table.cmp tr.ecartee td{color:var(--ink-3);}
  table.cmp .rang{display:inline-block;width:18px;color:var(--ink-3);font-family:var(--mono);font-size:11px;}

  /* Tableau des 12 mois : une colonne par mois, table.inst le sait déjà
     empiler proprement en mobile — on réutilise la même mécanique. */
  table.mois{width:100%;border-collapse:collapse;font-size:12.5px;}
  table.mois th{font-family:var(--mono);font-size:9px;letter-spacing:.06em;
        text-transform:uppercase;color:var(--ink-3);text-align:center;padding:0 3px 7px;
        font-weight:500;}
  table.mois th:first-child{text-align:left;}
  table.mois td{padding:3px 2px;text-align:center;}
  table.mois td:first-child{text-align:left;color:var(--ink-2);font-size:12px;
        padding-right:10px;}
  /* Sans cette largeur imposée, chaque colonne se dimensionne sur la longueur du
     nom du mois : « août » se retrouvait à 30 px quand « septembre » en prenait 59,
     et sa case de saisie devenait inutilisable. Toutes les colonnes de mois ont
     désormais la même largeur, quel que soit le mois de départ. */
  table.mois th:not(:first-child),
  table.mois td:not(:first-child){width:82px;min-width:82px;}
  /* La colonne des libellés garde une largeur stable et va à la ligne au lieu
     d'élargir le tableau sur les intitulés longs. */
  table.mois th:first-child,
  table.mois td:first-child:not(.cat-titre){width:190px;min-width:190px;}
  table.mois input{width:100%;padding:6px 4px;border:1px solid var(--line);border-radius:2px;
        font-family:var(--sans);font-size:12.5px;text-align:right;}
  table.mois input:focus{outline:none;border-color:var(--gold);}
  table.mois .solde{font-family:var(--mono);font-weight:600;padding:5px 4px;border-radius:2px;}
  table.mois .solde.ok{color:var(--go);background:var(--go-bg);}
  table.mois .solde.tension{color:var(--sous);background:var(--sous-bg);}
  table.mois .solde.critique{color:var(--non);background:var(--non-bg);}
  .mois-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px;}

  /* Saisie de sensibilité : on choisit une charge dans une liste déroulante,
     on l'ajoute, et seule cette ligne-là (ancien coût / nouveau coût, taux
     calculé tout seul) apparaît — plus besoin d'afficher les 7 charges d'un
     coup pour n'en régler qu'une. */
  .sens-ajout{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
  .sens-ajout select{flex:1 1 200px;padding:9px 10px;border:1px solid var(--line);
        border-radius:3px;font-family:var(--sans);font-size:13.5px;color:var(--ink);background:#fff;}
  .sens-ajout button{padding:9px 16px;border:1px solid var(--navy);background:var(--navy);
        color:#fff;border-radius:3px;font-size:13px;font-family:var(--sans);cursor:pointer;
        white-space:nowrap;}
  .sens-ajout button:hover{background:var(--navy-2,#14315f);}
  .sens-ajout button:disabled{opacity:.4;cursor:not-allowed;}
  .sens-ligne{border:1px solid var(--line);border-radius:3px;padding:12px 14px;margin-bottom:10px;
        display:grid;grid-template-columns:1fr auto auto auto auto;gap:6px 12px;align-items:end;}
  .sens-ligne .nom{font-size:13px;font-weight:600;color:var(--navy);grid-column:1/-1;}
  .sens-ligne label{display:block;font-size:11px;color:var(--ink-3);margin-bottom:3px;}
  .sens-ligne input{width:100px;padding:7px 8px;border:1px solid var(--line);border-radius:2px;
        font-family:var(--sans);font-size:13px;text-align:right;}
  .sens-ligne input:focus{outline:none;border-color:var(--gold);}
  .sens-ligne .taux-calc{font-size:13px;font-weight:600;color:var(--gold-2);white-space:nowrap;
        padding-bottom:8px;}
  .sens-ligne .retirer{background:none;border:1px solid var(--line);color:var(--ink-3);
        cursor:pointer;font-size:14px;padding:7px 10px;border-radius:2px;line-height:1;}
  .sens-ligne .retirer:hover{color:#a3282c;border-color:#a3282c;}
  .sens-rappel{font-size:13px;color:var(--ink-2);margin:0 0 14px;}
  .sens-rappel{font-size:12.5px;color:var(--ink-2);margin:-8px 0 14px;}
  .sens-rappel b{color:var(--navy);}

  .btn-plein{display:block;width:100%;margin:0 0 14px;padding:13px 18px;
        background:var(--navy);color:var(--cream);border:none;border-radius:2px;
        font-family:var(--mono);font-size:11px;letter-spacing:.12em;
        text-transform:uppercase;font-weight:500;cursor:pointer;
        transition:background .15s;}
  .btn-plein:hover{background:var(--navy-2);}

  /* Vue plein écran du tableau. Même précaution que pour le panneau
     d'identité : « display:flex » l'emporte sur la règle [hidden] du
     navigateur, il faut donc la rétablir explicitement. */
  .plein{position:fixed;inset:0;z-index:210;background:var(--cream);
         display:flex;flex-direction:column;}
  .plein[hidden]{display:none;}
  .plein-tete{display:flex;align-items:center;justify-content:space-between;
        gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);
        background:#fff;flex-shrink:0;}
  .plein-tete h2{font-family:var(--serif);font-size:20px;color:var(--navy);
        margin:0;font-weight:500;}
  .plein-fermer{background:var(--navy);color:var(--cream);border:none;
        border-radius:2px;padding:10px 16px;cursor:pointer;
        font-family:var(--mono);font-size:11px;letter-spacing:.1em;
        text-transform:uppercase;}
  .plein-fermer:hover{background:var(--navy-2);}
  .plein-corps{flex:1;overflow:auto;padding:22px 24px 32px;}
  /* En plein écran, les colonnes peuvent respirer. */
  .plein-corps table.mois{font-size:13.5px;}
  .plein-corps table.mois input{font-size:13.5px;padding:8px 6px;}
  .plein-corps table.mois td:first-child{font-size:13px;}

  /* Lisibilité : entrées et sorties se distinguent d'un coup d'œil. */
  .signe-flux{display:inline-block;width:14px;font-family:var(--mono);
        font-weight:600;}
  table.mois tr.ligne-entree .signe-flux{color:var(--go);}
  table.mois tr.ligne-sortie .signe-flux{color:var(--non);}
  table.mois tr.ligne-sortie td:first-child{color:var(--ink-2);}
  table.mois tr.ligne-solde td{border-top:2px solid var(--line);padding-top:8px;}
  table.mois tr.ligne-solde td:first-child{font-weight:600;color:var(--navy);}

  /* Titres de catégorie (Exploitation / Investissement / Financement) : une
     ligne qui traverse tout le tableau, pas une donnée à saisir. */
  table.mois td.cat-titre{text-align:left;padding:14px 2px 6px;font-family:var(--mono);
        font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);
        font-weight:600;border-top:2px solid var(--line);}
  table.mois tbody tr:first-child td.cat-titre{border-top:none;padding-top:0;}
  table.mois td.cat-titre .unite{text-transform:none;letter-spacing:0;font-weight:400;
        color:var(--ink-3);}
  /* Investissement / financement : mêmes chiffres, mais visuellement en retrait —
     ce sont des mouvements ponctuels, pas le rythme d'activité qu'on surveille. */
  table.mois tr.cat-avancee td:first-child{color:var(--ink-3);}
  table.mois tr.cat-avancee input{background:#faf9f6;color:var(--ink-2);}

  .graphe{margin:18px 0 4px;}
  .graphe svg{width:100%;height:auto;display:block;}
  .bloc-graphe{margin-bottom:18px;}
  .bloc-graphe h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
        text-transform:uppercase;color:var(--ink-3);margin:0 0 8px;font-weight:500;}
  /* Légende : obligatoire dès deux séries, l'identité ne repose jamais sur la
     seule couleur. Le texte garde l'encre courante, jamais la couleur de série. */
  .legende{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;
        font-size:12px;color:var(--ink-2);}
  .legende span{display:inline-flex;align-items:center;gap:6px;}
  .legende i{width:10px;height:10px;border-radius:2px;display:inline-block;flex-shrink:0;}
  .info-graphe{font-size:12px;color:var(--ink-3);min-height:18px;margin-top:4px;}
  .graphe .pt-solde,.graphe .barre-flux{cursor:default;}
  .graphe .barre-flux:hover{opacity:.75;}

  /* Lignes calculées du tableau : ouverture et variation encadrent les flux. */
  table.mois td.calcule{font-family:var(--mono);font-size:12px;padding:5px 4px;}
  table.mois tr.ligne-ouverture td{border-bottom:1px solid var(--line);padding-bottom:7px;}
  table.mois tr.ligne-ouverture td:first-child{color:var(--ink-2);font-weight:600;}
  table.mois tr.ligne-variation td{border-top:1px solid var(--line);padding-top:7px;}
  table.mois tr.ligne-variation td:first-child{color:var(--ink-2);font-weight:600;}
  table.mois td.var-plus{color:var(--go);}
  table.mois td.var-moins{color:var(--non);}

  /* La phrase qui dit ce qu'il faut faire, plutôt qu'un tableau à interpréter. */
  .objectif-jour{margin:14px 0 0;padding:13px 16px;background:var(--go-bg);
        border-left:2px solid var(--go);font-size:14px;color:var(--ink);line-height:1.6;}
  .objectif-jour b{color:var(--navy);font-weight:600;}
  .objectif-jour.non{background:var(--non-bg);border-left-color:var(--non);}

  /* L'unité, discrète mais toujours sous les yeux. */
  .unite-saisie{color:var(--ink-3);font-weight:400;}

  .explic{list-style:none;margin:0;padding:0;font-size:13px;}
  .explic li{padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink-2);}
  .explic li:last-child{border-bottom:none;}
  .explic b{color:var(--navy);font-weight:600;display:block;margin-bottom:3px;font-size:13.5px;}
  .explic .seuil{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-3);font-style:italic;}

  .btn-excel{appearance:none;border:1px solid var(--navy);background:transparent;
        color:var(--navy);font-family:var(--mono);font-size:11px;letter-spacing:.1em;
        text-transform:uppercase;padding:11px 18px;border-radius:2px;cursor:pointer;
        font-weight:500;transition:background .15s, color .15s;}
  .btn-excel:hover{background:var(--navy);color:#fff;}
  .btn-excel[disabled]{opacity:.6;cursor:progress;}

  /* Sous quel nom partent les documents : discret mais toujours lisible,
     avec le moyen d'en changer sans vider le cache du navigateur. */
  .qui-telecharge{margin:10px 0 0;font-size:12px;opacity:.85;line-height:1.5;}
  .qui-telecharge b{font-weight:600;}
  .qui-telecharge a{color:inherit;text-decoration:underline;}

  /* L'invitation à prendre rendez-vous : le vrai objectif de la page, plus
     visible que les téléchargements ou l'analyse automatique. */
  .cta-rdv{margin-top:18px;padding:18px 20px;background:var(--navy);border-radius:3px;
        display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
  .cta-rdv p{margin:0;font-size:13.5px;color:rgba(245,243,238,.82);max-width:46ch;flex:1;
        min-width:200px;}
  .btn-rdv{flex:0 0 auto;background:var(--gold);color:var(--navy-deep);text-decoration:none;
        font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
        padding:13px 20px;border-radius:2px;font-weight:600;white-space:nowrap;
        transition:background .15s, transform .15s;}
  .btn-rdv:hover{background:var(--gold-2);transform:translateY(-1px);}

  @media(max-width:900px){
    table.mois{min-width:640px;}
  }
  @media(max-width:640px){
    .sens-ligne{grid-template-columns:1fr;}
    .sens-ligne .taux-calc,.sens-ligne .retirer{justify-self:start;}
  }

  .nonfin{list-style:none;margin:0;padding:0;font-size:13.5px;}
  .nonfin li{padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink-2);}
  .nonfin li:last-child{border-bottom:none;}
  .nonfin b{color:var(--navy);font-weight:600;}

  .mobil{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
  .mobil .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
            color:var(--ink-3);margin-bottom:7px;}
  .mobil ul{list-style:none;margin:0;padding:0;}
  .mobil li{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0;
            color:var(--ink-2);}
  .mobil li span:last-child{font-family:var(--mono);color:var(--navy);white-space:nowrap;}
  .mobil li.reste{color:var(--non);}
  .mobil li.reste span:last-child{color:var(--non);}

  .piege{background:var(--cream-2);border-left:2px solid var(--gold);padding:11px 14px;
         font-size:13px;color:var(--ink-2);margin:14px 0 4px;}
  .piege b{color:var(--navy);font-weight:600;}

  .lignes{list-style:none;margin:0;padding:0;}
  .lignes li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
             border-bottom:1px solid var(--line);font-size:14px;}
  .lignes li:last-child{border-bottom:none;}
  .lignes .lib{color:var(--ink-2);}
  .lignes .val{font-family:var(--mono);font-size:14px;color:var(--navy);white-space:nowrap;font-weight:500;}
  .lignes li.fort .lib{color:var(--ink);font-weight:600;}
  .lignes li.fort .val{font-size:16px;}
  .lignes li.fort{background:var(--cream-2);margin:6px -24px;padding:10px 24px;border-bottom:none;}

  .verdict{border-radius:3px;padding:22px 24px;margin-bottom:18px;border:1px solid transparent;}
  .verdict .etiq{font-family:var(--mono);font-size:22px;letter-spacing:.1em;font-weight:500;margin-bottom:4px;}
  .verdict .nuance{font-size:13.5px;opacity:.85;margin-bottom:14px;}
  .verdict p{margin:0 0 12px;font-size:14.5px;}
  .verdict p:last-child{margin-bottom:0;}
  .verdict .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
              display:block;margin-bottom:5px;opacity:.7;}
  .verdict ol{margin:0;padding-left:20px;font-size:14.5px;}
  .verdict ol li{margin-bottom:7px;}
  .verdict ol li:last-child{margin-bottom:0;}
  .v-go{background:var(--go-bg);border-color:rgba(28,107,74,.25);color:var(--go);}
  .v-sous{background:var(--sous-bg);border-color:rgba(138,90,0,.25);color:var(--sous);}
  .v-non{background:var(--non-bg);border-color:rgba(156,43,43,.25);color:var(--non);}
  .verdict strong{font-family:var(--mono);font-weight:500;}

  .pied{font-size:12.5px;color:var(--ink-3);margin-top:22px;line-height:1.55;}
  .cta{margin-top:26px;padding:22px 24px;background:var(--navy);border-radius:3px;color:var(--cream);}
  .cta h3{font-family:var(--serif);font-size:19px;margin:0 0 6px;color:#fff;font-weight:500;letter-spacing:0;
          text-transform:none;}
  .cta p{margin:0 0 14px;font-size:14px;color:rgba(245,243,238,.8);}
  .cta a{display:inline-block;background:var(--gold);color:var(--navy-deep);text-decoration:none;
         font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
         padding:11px 20px;border-radius:2px;font-weight:500;}

  footer.af{background:var(--navy-deep);color:rgba(245,243,238,.7);padding:26px 40px;font-size:12.5px;}
  footer.af .inner{max-width:1000px;margin:0 auto;display:flex;justify-content:space-between;
                   gap:16px;flex-wrap:wrap;}
  footer.af a{color:var(--gold);text-decoration:none;}

  /* Sur mobile, la colonne de résultats se retrouve sous toutes les saisies :
     une barre fixe garde le verdict sous les yeux pendant qu'on ajuste ses chiffres. */
  .barre{display:none;}
  @media(max-width:900px){
    .barre{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;
           justify-content:space-between;gap:12px;padding:11px 20px;cursor:pointer;
           border-top:1px solid rgba(0,0,0,.12);box-shadow:0 -2px 12px rgba(10,31,68,.10);}
    .barre .e{font-family:var(--mono);font-size:14px;letter-spacing:.08em;font-weight:500;}
    .barre .n{font-size:12px;opacity:.85;text-align:right;line-height:1.3;}
    .barre.v-go{background:var(--go-bg);color:var(--go);}
    .barre.v-sous{background:var(--sous-bg);color:var(--sous);}
    .barre.v-non{background:var(--non-bg);color:var(--non);}
    body{padding-bottom:64px;}
    .duo{grid-template-columns:1fr;gap:0;}
    /* Trois colonnes de saisie dans 285 px donnent des champs de 54 px :
       en mobile, chaque instrument devient un bloc et ses champs se nomment. */
    table.inst, table.inst tbody, table.inst tr, table.inst td, table.inst th{display:block;width:auto;}
    table.inst thead{display:none;}
    table.inst tr{border:1px solid var(--line);border-radius:2px;padding:10px 12px;margin-bottom:10px;}
    table.inst tbody th{font-size:14px;color:var(--navy);font-weight:600;padding:0 0 8px;}
    table.inst td{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 0;}
    table.inst td::before{content:attr(data-l);font-size:12.5px;color:var(--ink-2);flex:1;}
    table.inst input{width:110px;flex:0 0 110px;}
    .grille{grid-template-columns:1fr;gap:22px;}
    h1{font-size:32px;}
    .hero,.onglets,main,.fil-ariane{padding-left:20px;padding-right:20px;}
    .topbar{padding:8px 20px;} header.ah{padding:14px 20px;} header.ah nav{display:none;}
    .porte{padding:14px;align-items:flex-start;}
    .porte .carte{padding:26px 22px 22px;}
    .porte h2{font-size:21px;}
    .toast{bottom:70px;}
    .onglets{grid-template-columns:1fr;gap:10px;margin-top:24px;}
    .onglets button, .onglets a.carte{padding:14px 16px;flex-direction:row;align-items:center;gap:13px;flex-wrap:wrap;}
    .onglets .num{flex:0 0 30px;}
    .onglets .q{font-size:14.5px;flex:1;min-width:0;}
    .onglets .s{flex-basis:100%;padding-left:43px;}
    .onglets button.actif::after, .onglets span.carte.actif::after{display:none;}
    .lignes li.fort{margin-left:-24px;margin-right:-24px;}

    /* ── Lisibilite sur telephone ──
       Rien sous 12px, et les capitales se resserrent : l'espacement des
       lettres aide en grand, il gene la lecture en petit. */
    .topbar{font-size:11.5px;letter-spacing:.05em;}
    .cat{font-size:12px;letter-spacing:.1em;}
    .rassure{font-size:12px;letter-spacing:.08em;}
    .onglets .s{font-size:12.5px;letter-spacing:.06em;}
    .onglets .q{font-size:15.5px;}
    .bloc h3{font-size:12px;letter-spacing:.1em;}
    .bloc-graphe h4{font-size:12px;letter-spacing:.09em;}
    .mobil .t,.verdict .t{font-size:12px;letter-spacing:.08em;}
    table.inst thead th,table.cmp th,table.mois th{font-size:12px;letter-spacing:.05em;}
    table.cmp .rang{font-size:12.5px;}
    .explic .seuil{font-size:13px;}
    .porte .rgpd{font-size:13px;}
    .porte label{font-size:14px;}
    .porte .intro,.suggest p.intro{font-size:15px;}
    .suggest label{font-size:14px;}
    .p-consent{font-size:13.5px;}
  }