/* MACHINA_VISUAL_2_START
   Refonte exclusivement visuelle — aucune logique ni architecture métier.
   Direction : registre d’expédition / carnet de terrain.
*/
@media screen {
  :root{
    --bg:#f3efe6;
    --panel:#fbf9f3;
    --ink:#1c2321;
    --muted:#4a5551;
    --line:#d9d2c3;
    --primary:#1c2321;
    --primary-dark:#1c2321;
    --accent:#2f5d50;
    --danger:#8a2b22;
    --shadow:0 1px 0 rgba(28,35,33,.04),0 6px 20px -12px rgba(28,35,33,.35);
    --m2-paper:#f3efe6;
    --m2-paper-2:#ece6d9;
    --m2-card:#fbf9f3;
    --m2-card-strong:#fffdf7;
    /* La feuille où l'on écrit : blanche, pour se détacher du papier (Armand, 12/09/2026). */
    --m2-feuille:#ffffff;
    /*
     * LES MESSAGES D'UNE CONVERSATION (Armand, 13/09/2026 : « une différence
     * de couleur entre nos messages et ceux du participant, idem avec le
     * tiers, mais pas de blanc, rester dans les mêmes tons »). Les leurs sur le
     * papier soutenu ; les nôtres sur le papier teinté de forêt — deux teintes
     * dérivées de la palette, aucune écrite à part.
     */
    --m2-message-eux:var(--m2-paper-2);
    --m2-message-nous:color-mix(in srgb,var(--m2-forest) 10%,var(--m2-card));
    --m2-line:#d9d2c3;
    --m2-line-strong:#b7ae99;
    --m2-brick:#7c3b2e;
    --m2-forest:#2f5d50;
    --m2-gold:#a8862c;
    --m2-danger:#8a2b22;
    --m2-serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
    --m2-sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    --m2-mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
    --m2-radius:3px;
  }

  html{background:var(--m2-paper)}
  body{
    min-height:100vh;
    color:var(--ink);
    background:
      radial-gradient(circle at 8% 0%,rgba(255,255,255,.72),transparent 30rem),
      var(--m2-paper);
    font-family:var(--m2-sans);
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:var(--m2-serif);font-weight:600;letter-spacing:-.01em}
  h1{font-size:22px}
  h2{font-size:28px}
  h3{font-size:18px}
  h4{font-size:15px}
  p{line-height:1.5}
  a{color:inherit}
  small{line-height:1.35}
  code,kbd,pre{font-family:var(--m2-mono)}

  /* Coque générale */
  .app{
    width:min(1664px,100%);
    min-height:100vh;
    margin:0 auto;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .content{padding:26px 32px 54px}
  .app-footer{
    margin:0 32px;
    padding:16px 0 22px;
    border-top:1px solid var(--m2-line);
    color:var(--muted);
    font-family:var(--m2-mono);
    font-size:10.5px;
    letter-spacing:.04em;
  }

  /* Bandeau supérieur */
  .topbar{
    grid-template-columns:minmax(210px,.8fr) minmax(205px,.72fr) minmax(210px,1fr) auto;
    gap:16px;
    padding:12px 32px;
    border-bottom:1px solid var(--m2-line-strong);
    background:rgba(251,249,243,.96);
  }
  .brand{gap:11px;margin:0}
  .brand-mark{
    width:39px;height:39px;
    border:1px solid var(--ink);
    border-radius:0;
    color:var(--ink);
    background:var(--m2-card)!important;
    font-family:var(--m2-serif);
    font-size:17px;
  }
  .brand-mark-image{padding:2px;background:var(--m2-card)!important}
  .brand-mark-image img{object-fit:contain}
  .brand h1{font-size:20px;line-height:1}
  .brand .subtitle{
    margin-top:4px;
    color:var(--m2-brick);
    font-family:var(--m2-mono);
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .event-switcher label{
    margin:0 0 3px;
    color:var(--muted);
    font-family:var(--m2-mono);
    font-size:9.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .event-switcher select,.glossary-search input[type=search]{
    min-height:36px;
    padding:7px 9px;
    border-color:var(--m2-line-strong);
    border-radius:var(--m2-radius);
    background:var(--m2-card);
    font-size:12.5px;
  }
  .glossary-search{min-width:190px}
  .glossary-search input[type=search]{border-radius:var(--m2-radius)}
  .glossary-search-results{
    border-color:var(--m2-line-strong);
    border-radius:var(--m2-radius);
    background:var(--m2-card-strong);
    box-shadow:var(--shadow);
  }
  .glossary-search-item{border-radius:2px}
  .glossary-search-item:hover,.glossary-search-item:focus{background:var(--m2-paper-2)}
  .glossary-search-tag,.glossary-search-inactive{border-radius:2px}
  .userbox{gap:5px 8px;color:var(--muted);font-size:11.5px}
  .userbox strong{font-family:var(--m2-serif);font-size:14px}

  /* Navigation hiérarchique */
  .main-nav.main-nav-dynamic{
    border-bottom:1px solid var(--m2-line-strong);
    background:var(--m2-card);
    box-shadow:none;
  }
  .main-nav-row{min-height:50px;gap:0;padding:0 24px}
  .main-nav-groups{gap:0}
  .nav-dropdown{flex:0 1 auto;max-width:none}
  .nav-main-button{
    min-width:0;
    min-height:49px;
    padding:13px 14px 12px;
    border:0;
    border-bottom:2px solid transparent;
    border-radius:0;
    color:var(--muted);
    background:transparent;
    box-shadow:none;
    font-size:12.5px;
    font-weight:650;
    transform:none;
  }
  .nav-dropdown>.nav-main-button{width:auto}
  .nav-main-button:hover,.nav-main-button:focus-visible,.nav-dropdown.open>.nav-main-button{
    color:var(--ink);
    border-color:transparent;
    background:var(--m2-paper-2);
    box-shadow:none;
    transform:none;
  }
  .nav-home-button.active,.nav-dropdown.active>.nav-main-button{
    color:var(--ink);
    border-bottom-color:var(--m2-brick);
    background:transparent;
    box-shadow:none;
  }
  .nav-chevron{color:var(--m2-line-strong);font-size:10px}
  .nav-dropdown-panel{
    top:calc(100% + 2px);
    gap:2px;
    padding:6px;
    border-color:var(--m2-line-strong);
    border-radius:var(--m2-radius);
    background:var(--m2-card-strong);
    box-shadow:var(--shadow);
  }
  .nav-dropdown-link{
    min-height:34px;
    padding:7px 9px;
    border-radius:2px;
    color:var(--ink-soft,var(--muted));
    background:transparent;
    font-size:12.5px;
    font-weight:650;
  }
  .nav-dropdown-link:hover,.nav-dropdown-link:focus-visible{
    color:var(--ink);
    border-color:transparent;
    background:var(--m2-paper-2);
  }
  .nav-dropdown-link.active{
    color:var(--m2-brick);
    border-color:transparent;
    background:var(--m2-paper-2);
    box-shadow:inset 3px 0 0 var(--m2-brick);
  }
  .main-nav-dynamic .nav-view-menu{margin-left:auto}
  .main-nav-dynamic .nav-view-menu>summary{
    min-width:auto;
    min-height:32px;
    padding:6px 10px;
    border-color:var(--m2-line-strong);
    border-radius:var(--m2-radius);
    color:var(--muted);
    background:var(--m2-card);
    font-size:11.5px;
  }
  .main-nav-dynamic .nav-view-menu[open]>summary,.main-nav-dynamic .nav-view-menu>summary:hover{
    color:var(--ink);
    border-color:var(--ink);
    background:var(--m2-card);
  }
  .view-menu-panel{
    gap:6px;
    padding:10px;
    border-color:var(--m2-line-strong);
    border-radius:var(--m2-radius);
    background:var(--m2-card-strong);
    box-shadow:var(--shadow);
  }

  /* En-tête compact des pages — entièrement dérivé du thème actif */
  .page-heading{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:48px!important;
    margin:0 0 12px!important;
    padding:7px 9px 7px 12px;
    overflow:visible!important;
    border:1px solid var(--m2-line);
    border-left:3px solid var(--m2-brick);
    border-bottom-color:var(--m2-line-strong);
    border-radius:var(--m2-radius);
    color:var(--ink);
    background:color-mix(
      in srgb,
      var(--m2-brick) 5%,
      var(--m2-card)
    );
    box-shadow:var(--m2-panel-shadow);
  }
  .page-heading-title{
    position:relative;
    display:flex;
    align-items:center;
    min-width:0;
    gap:7px;
  }
  .page-heading h2{
    display:block!important;
    margin:0;
    color:var(--ink);
    font-family:var(--m2-serif);
    font-size:26px;
    font-weight:600;
    line-height:1.08;
    letter-spacing:-.012em;
  }
  .page-heading-help{
    position:relative;
    flex:0 0 auto;
  }
  .page-heading-help>summary{
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    list-style:none;
    border:1px solid var(--m2-line-strong);
    border-radius:50%;
    color:var(--muted);
    background:var(--m2-card-strong);
    font:700 12px/1 var(--m2-sans);
    cursor:pointer;
    user-select:none;
  }
  .page-heading-help>summary::-webkit-details-marker{display:none}
  .page-heading-help>summary:hover,
  .page-heading-help>summary:focus-visible,
  .page-heading-help[open]>summary{
    color:var(--ink);
    border-color:var(--m2-brick);
    outline:0;
  }
  .page-heading-help-panel{
    position:absolute;
    z-index:80;
    top:calc(100% + 8px);
    left:0;
    width:min(440px,calc(100vw - 48px));
    padding:10px 12px;
    border:1px solid var(--m2-line-strong);
    border-left:3px solid var(--m2-brick);
    border-radius:var(--m2-radius);
    color:var(--ink);
    background:var(--m2-card-strong);
    box-shadow:var(--shadow);
  }
  .page-heading-help-panel p{
    max-width:none;
    margin:0;
    color:var(--muted);
    font-size:12.5px;
    line-height:1.45;
  }
  .page-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:6px;
  }
  .page-heading .button{
    min-height:var(--m2-button-height);
    padding-top:5px;
    padding-bottom:5px;
  }
  body[data-page="dashboard"] .content{padding-top:26px!important}

  /* Sous-onglets */
  .subnav-tabs{
    display:flex;
    gap:0;
    margin:0 0 16px;
    overflow-x:auto;
    border-bottom:1px solid var(--m2-line-strong);
    background:transparent;
  }
  .subnav-tabs a{
    min-width:max-content;
    padding:10px 16px 11px;
    border:0;
    border-bottom:2px solid transparent;
    border-radius:0;
    color:var(--muted);
    background:transparent;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
  }
  .subnav-tabs a:hover{color:var(--ink);background:transparent}
  .subnav-tabs a.active{
    color:var(--ink);
    border-bottom-color:var(--m2-brick);
    background:transparent;
    box-shadow:none;
  }

  /* Formulaires */
  label{margin-bottom:4px;color:#3f4a46;font-size:12px;font-weight:700}
  input,select,textarea{
    min-height:36px;
    padding:7px 9px;
    border:1px solid var(--m2-line-strong);
    border-radius:var(--m2-radius);
    background:var(--m2-card-strong);
    color:var(--ink);
    font-size:13.5px;
  }
  textarea{min-height:78px}
  input:focus,select:focus,textarea:focus{
    border-color:var(--m2-forest);
    box-shadow:0 0 0 2px rgba(47,93,80,.13);
  }
  input:disabled,select:disabled,textarea:disabled{color:#7c837f;background:var(--m2-paper-2);opacity:.82}
  input[type=checkbox],input[type=radio],input[type=color]{min-height:auto}
  .readonly-field{
    min-height:36px;
    padding:7px 9px;
    border-color:var(--m2-line);
    border-radius:var(--m2-radius);
    background:var(--m2-paper-2);
  }
  .form-grid{gap:11px 13px}
  .form-actions{gap:7px}
  .check-row{
    min-height:34px;
    padding:7px 8px;
    border-color:var(--m2-line);
    border-radius:var(--m2-radius);
    background:var(--m2-card);
    color:var(--ink);
    font-family:var(--m2-sans);
    font-size:12.5px;
    font-weight:600;
    text-transform:none;
    letter-spacing:0;
  }
  .checkbox-grid{
    gap:5px;
    padding:7px;
    border-color:var(--m2-line);
    border-radius:var(--m2-radius);
    background:var(--m2-paper-2);
  }

  /* Boutons */
  .button{
    min-height:32px;
    padding:6px 10px;
    border-radius:var(--m2-radius);
    font-size:12.5px;
    font-weight:700;
    line-height:1;
    box-shadow:none;
  }
  .button-primary{
    color:var(--m2-paper);
    border-color:var(--ink);
    background:var(--ink);
  }
  .button-secondary{
    color:var(--m2-paper);
    border-color:var(--m2-forest);
    background:var(--m2-forest);
  }
  .button-light{
    color:var(--ink);
    border-color:var(--m2-line-strong);
    background:var(--m2-card);
  }
  .button-warning{color:#725314;border-color:#e6d3a3;background:#f6ecd8}
  .button-danger{color:var(--m2-danger);border-color:#e2c3bf;background:#f4e4e2}
  .button-mini{min-height:28px;padding:5px 9px;font-size:11.5px}
  .button-block{margin-top:15px}
  .button:hover{filter:none;opacity:.9}

  /* Alertes */
  .alert{
    margin-bottom:15px;
    padding:11px 14px;
    border-radius:var(--m2-radius);
    font-size:13px;
  }
  .alert-success{color:#245847;background:#e7edea;border-color:#cddbd5}
  .alert-error{color:var(--m2-danger);background:#f4e4e2;border-color:#e2c3bf}
  .alert-warning{color:#6b551f;background:#fff8ec;border-color:#e6d3a3}
  .alert-info{color:#334f49;background:#edf3f0;border-color:#cddbd5}

  /* Panneaux, cartes et listes */
  .panel,.compact-panel{
    margin-top:14px;
    padding:16px 18px;
    border:1px solid var(--m2-line);
    border-radius:var(--m2-radius);
    background:var(--m2-card);
    box-shadow:none;
  }
  .panel h3+p{color:var(--muted)}
  .panel-head,.panel-header,.entity-card-head{gap:14px}
  .subpanel{
    margin-top:10px;
    padding:11px;
    border:1px solid var(--m2-line);
    border-radius:var(--m2-radius);
    background:var(--m2-paper-2);
  }
  .creation-box>summary,.edit-box>summary{
    color:var(--m2-brick);
    font-family:var(--m2-serif);
    font-weight:600;
  }
  .creation-box>summary{font-size:16px}
  .edit-box{border-top-color:var(--m2-line-strong)}
  .empty-state{
    padding:19px;
    border-color:var(--m2-line-strong);
    border-radius:var(--m2-radius);
    background:rgba(251,249,243,.55);
  }
  .card-list{gap:10px;margin-top:14px}
  .entity-card,.module-card{
    padding:14px 16px;
    border:1px solid var(--m2-line);
    border-left:3px solid var(--m2-forest);
    border-radius:var(--m2-radius);
    background:var(--m2-card);
    box-shadow:none;
  }
  .module-card{min-height:94px;border-left-width:1px}
  .module-link:hover{transform:none;background:var(--m2-card-strong);box-shadow:var(--shadow)}
  .detail-grid{gap:8px;margin:10px 0}
  .detail-grid div{
    padding:8px;
    border:1px solid var(--m2-line);
    border-radius:2px;
    background:var(--m2-paper);
  }
  .quick-actions{gap:5px;padding-top:9px;border-top-color:var(--m2-line)}
  .integration-card,.runtime-grid>span{
    border-color:var(--m2-line)!important;
    border-radius:var(--m2-radius)!important;
    background:var(--m2-card)!important;
    box-shadow:none!important;
  }

  /* Indicateurs et badges */
  .stat-grid{gap:9px;margin-bottom:15px}
  .stat-card,.budget-kpi,.annual-kpi,.biztax-kpi{
    padding:12px 14px;
    border:1px solid var(--m2-line);
    border-radius:var(--m2-radius);
    background:var(--m2-card);
    box-shadow:none;
  }
  .stat-card strong,.budget-kpi strong,.annual-kpi strong,.biztax-kpi strong{
    color:var(--ink);
    font-family:var(--m2-serif);
    font-size:22px;
    font-weight:600;
  }
  .stat-card span,.budget-kpi span{color:var(--muted)}
  .stat-success strong,.positive{color:var(--m2-forest)}
  .stat-warning strong{color:var(--m2-gold)}
  .stat-danger strong,.negative{color:var(--m2-danger)}
  .badge,.pill,.progress-badge,.evidence-chip{
    padding:3px 8px;
    border-radius:2px;
    font-size:11px;
    font-weight:700;
  }
  .badge-role,.badge-blue{color:#315b50;background:#e7edea}
  .badge-green{color:#245847;background:#e7edea}
  .badge-yellow,.badge-orange{color:#725314;background:#f6ecd8}
  .badge-red{color:var(--m2-danger);background:#f4e4e2}
  .badge-gray{color:#59635e;background:#e8e4dc}
  .progress-track,.dashboard-simple-progress,.dashboard-simple-track{
    border-radius:2px;background:#e2ddd3
  }
  .progress-fill,.dashboard-simple-progress>span,.dashboard-simple-fill{
    border-radius:2px;background:var(--m2-forest)
  }

  /* Tableaux généraux */
  .table-wrap,.table-scroll{border:0;border-radius:0;background:transparent}
  table{margin-top:9px}
  th,td{
    padding:9px 10px;
    border-bottom:1px solid var(--m2-line);
    font-size:13px;
  }
  th{
    color:var(--muted);
    background:var(--m2-paper-2);
    font-family:var(--m2-mono);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  tbody tr{background:var(--m2-card)}
  tbody tr:hover{background:var(--m2-card-strong)}
  .subtotal{background:var(--m2-paper-2)}
  .total{background:#e7edea}
  .inline-form{gap:5px}
  .inline-form input,.inline-form select{min-height:31px;padding:5px 7px;font-size:12.5px}

  /* Participants — outils */
  .participant-overview-toolbar{
    gap:11px;
    margin:0 0 12px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .participant-kpis{border-bottom-color:var(--m2-line)}
  .participant-kpi{padding:2px 16px 10px 0}
  .participant-kpi+.participant-kpi{padding-left:16px;border-left-color:var(--m2-line)}
  .participant-kpi strong{font-family:var(--m2-serif);font-size:22px;font-weight:600}
  .participant-kpi span{color:var(--muted)}
  .participant-toolbar-row{gap:10px}
  .participant-search-form label{font-size:11.5px}
  .participant-search-control{gap:6px}
  .participant-quick-filters{
    border-color:var(--m2-line-strong);
    border-radius:var(--m2-radius);
    background:var(--m2-card);
  }
  .participant-quick-filter{
    padding:7px 12px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
  }
  .participant-quick-filter+.participant-quick-filter{border-left-color:var(--m2-line)}
  .participant-quick-filter:hover,.participant-quick-filter.active{color:var(--m2-paper);background:var(--ink)}
  .participant-operations>summary,.participant-advanced-filters>summary{
    min-height:32px;
    padding:6px 10px;
    border-color:var(--m2-line-strong);
    border-radius:var(--m2-radius);
    color:var(--ink);
    background:var(--m2-card);
    font-size:12px;
    font-weight:700;
  }
  .participant-operation-menu{
    padding:5px;
    border-color:var(--m2-line-strong);
    border-radius:var(--m2-radius);
    background:var(--m2-card-strong);
    box-shadow:var(--shadow);
  }
  .participant-operation-menu a{border-radius:2px;color:var(--ink);font-weight:650}
  .participant-operation-menu a:hover{color:var(--ink);background:var(--m2-paper-2)}
  .participant-advanced-filters{border-top-color:var(--m2-line)}

  /* Participants — liste compacte à 5 colonnes */
  .registration-table-panel{
    padding:0;
    overflow:visible;
    border:0;
    background:transparent;
  }
  .registration-table-toolbar{
    padding:8px 4px 10px;
    border-bottom:1px solid var(--m2-line-strong);
    color:var(--muted);
    background:transparent;
  }
  .registration-table-toolbar strong{color:var(--ink);font-family:var(--m2-serif);font-size:15px}
  .registration-dense-wrap{overflow:auto;border:0;border-radius:0;background:transparent}
  .registration-dense-table{
    min-width:980px;
    margin-top:0;
    border-collapse:separate;
    border-spacing:0;
  }
  .registration-dense-table thead th{
    position:sticky;
    top:0;
    z-index:2;
    padding:10px 12px;
    border-bottom:1px solid var(--m2-line-strong);
    background:var(--m2-paper);
  }
  .registration-dense-table tbody tr{background:var(--m2-card)}
  .registration-dense-table tbody tr:hover{background:var(--m2-card-strong)}
  .registration-dense-table tbody td{padding:9px 12px;vertical-align:middle}
  .registration-dense-table tbody tr td:first-child{border-left:3px solid var(--m2-forest)}
  .registration-dense-table tbody tr.registration-paid-row td:first-child{border-left-color:var(--m2-forest)}
  .registration-participant-layout{gap:5px}
  .registration-name-edit{gap:4px}
  .registration-name-edit input,
  .registration-email-field input{
    min-height:25px;
    padding:1px 3px;
    border:1px solid transparent;
    border-radius:2px;
    background:transparent;
    box-shadow:none;
  }
  .registration-name-edit input{
    font-family:var(--m2-serif);
    font-size:16px;
    font-weight:600;
    line-height:1.2;
  }
  .registration-email-field input{color:var(--muted);font-size:12.5px}
  .registration-name-edit input:hover,.registration-name-edit input:focus,
  .registration-email-field input:hover,.registration-email-field input:focus{
    border-color:var(--m2-line-strong);
    background:var(--m2-paper);
  }
  .registration-inline-label{
    margin-bottom:1px;
    color:#768079;
    font-family:var(--m2-mono);
    font-size:8.5px;
    font-weight:700;
    letter-spacing:.08em;
  }
  .registration-field-stack{gap:2px}
  .registration-category-cell select,
  .registration-status-cell select{
    width:auto;
    max-width:100%;
    min-height:27px;
    padding:3px 25px 3px 8px;
    border-radius:2px;
    font-size:12px;
    font-weight:650;
  }
  .registration-category-cell select[data-registration-field="category"]{
    border-color:#cddbd5;
    color:var(--m2-forest);
    background-color:#e7edea;
  }
  .registration-category-cell select[data-registration-field="stewardship_type"]{
    min-height:24px;
    padding:2px 22px 2px 2px;
    border-color:transparent;
    color:var(--muted);
    background-color:transparent;
    font-size:11.5px;
  }
  .registration-category-cell select[data-registration-field="stewardship_type"]:hover:not(:disabled){
    border-color:var(--m2-line);background-color:var(--m2-paper)
  }
  .status-select{
    border-color:#cddbd5!important;
    color:var(--m2-forest)!important;
    background:#e7edea!important;
  }
  .status-select.status-liste_attente,.status-select.status-waiting,.status-select.status-en_attente{
    border-color:#e6d3a3!important;color:#725314!important;background:#f6ecd8!important
  }
  .status-select.status-annule,.status-select.status-cancelled,.status-select.status-refuse{
    border-color:#e2c3bf!important;color:var(--m2-danger)!important;background:#f4e4e2!important
  }
  .registration-payment-cell .badge{font-size:11.5px}
  .registration-payment-cell .muted{font-size:10.5px}
  .registration-actions{gap:5px;justify-content:flex-end}
  .registration-actions .button{min-height:28px;padding:5px 9px;font-size:11.5px}
  .inline-save-state{color:var(--m2-forest);font-size:10.5px}

  /* Participants 2.2.4 — statistiques et barre d'opérations */
  .participant-registration-stats a.stat-card{
    color:inherit;
    text-decoration:none;
  }
  .participant-registration-stats a.stat-card:hover{
    border-color:var(--m2-line-strong);
    background:var(--m2-card-strong);
  }
  .registration-table-toolbar{
    align-items:center;
  }
  .registration-table-toolbar .participant-operations{
    margin-left:auto;
  }
  .registration-table-toolbar .participant-operations>summary{
    min-height:30px;
  }

  /* Inscriptions uniquement — fond continu, sans blocs ni alternance payée */
  .registration-uniform-background tbody tr,
  .registration-uniform-background tbody tr.registration-paid-row,
  .registration-uniform-background tbody tr td,
  .registration-uniform-background tbody tr.registration-paid-row td{
    background:var(--m2-card)!important;
  }
  .registration-uniform-background tbody tr:hover,
  .registration-uniform-background tbody tr:hover td,
  .registration-uniform-background tbody tr.registration-paid-row:hover,
  .registration-uniform-background tbody tr.registration-paid-row:hover td{
    background:var(--m2-card-strong)!important;
  }
  .registration-uniform-background tbody tr td:first-child,
  .registration-uniform-background tbody tr.registration-paid-row td:first-child{
    border-left:0!important;
    box-shadow:none!important;
  }
  .registration-uniform-background td.registration-actions{
    display:table-cell!important;
    vertical-align:middle;
    text-align:right;
  }
  .registration-uniform-background td.registration-actions .inline-save-state{
    display:block;
    margin-top:4px;
    text-align:right;
  }
  .prospect-source{color:var(--m2-gold);font-size:10.5px}

  /* Dialogues */
  .app-dialog{
    width:min(940px,calc(100% - 30px));
    max-height:calc(100vh - 30px);
    padding:0;
    overflow:auto;
    border:1px solid var(--m2-line-strong);
    border-radius:var(--m2-radius);
    color:var(--ink);
    background:var(--m2-paper);
    box-shadow:0 18px 60px -25px rgba(0,0,0,.55);
  }
  .app-dialog::backdrop{background:rgba(28,35,33,.58);backdrop-filter:blur(3px)}
  .dialog-head{
    position:sticky;
    top:0;
    z-index:3;
    padding:15px 18px;
    border-bottom:1px solid var(--m2-line);
    background:rgba(243,239,230,.97);
  }
  .dialog-head h2{font-size:27px}
  .dialog-head p{color:var(--muted);font-size:12.5px}
  .dialog-body,.registration-detail-dialog>form{padding:16px 18px}
  .dialog-danger-zone{border-color:#e2c3bf!important;border-radius:var(--m2-radius)!important;background:#fbf3f1!important}
  .sync-record-state{border-radius:var(--m2-radius);background:var(--m2-paper-2)}

  /* Tableau de bord */
  .dashboard-simple-note{
    border-color:#e6d3a3!important;
    border-radius:var(--m2-radius)!important;
    background:#fff8ec!important;
    color:#6b551f!important;
  }
  .dashboard-simple-general{
    padding:16px!important;
    border:1px solid var(--m2-line)!important;
    border-radius:var(--m2-radius)!important;
    background:var(--m2-card)!important;
    box-shadow:none!important;
  }
  .dashboard-simple-general-title,.dashboard-simple-name strong{font-family:var(--m2-serif)}
  .dashboard-simple-general-value,.dashboard-simple-value{color:var(--m2-forest)}
  .dashboard-simple-row{
    padding:11px 13px;
    border-color:var(--m2-line);
    border-radius:var(--m2-radius);
    background:var(--m2-card);
  }
  .dashboard-simple-row:hover{transform:none;background:var(--m2-card-strong);box-shadow:var(--shadow)}
  .dashboard-simple-weight-line,.dashboard-simple-total{
    border-color:var(--m2-line);
    border-radius:var(--m2-radius);
    background:var(--m2-card);
  }

  /* TODO, scénarios, distribution, rôles */
  .todo-overdue{border-left-color:var(--m2-danger);background:#fbf3f1}
  .todo-inline-row,.scenario-row,.role-board-row,.distribution-row{
    border-color:var(--m2-line)!important;
    border-radius:var(--m2-radius)!important;
    background:var(--m2-card)!important;
    box-shadow:none!important;
  }
  .scenario-card,.scenario-role-section,.scenario-detail-panel,.role-board-section,
  .role-dropzone,.writer-assignment,.native-sheet-section{
    border-color:var(--m2-line)!important;
    border-radius:var(--m2-radius)!important;
    background:var(--m2-card)!important;
    box-shadow:none!important;
  }
  .role-dropzone{border-style:dashed!important}
  .role-dropzone:hover{border-color:var(--m2-forest)!important;background:#edf3f0!important}
  .scenario-status,.role-status{border-radius:2px!important}
  .section-heading,.role-board-section-label{
    color:var(--muted)!important;
    font-family:var(--m2-mono)!important;
    font-size:10.5px!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }

  /* Documents, lieux, matériel et relations */
  .cross-link-card,.link-card,.onedrive-item,.reference-edit-card,.reference-option{
    border-color:var(--m2-line)!important;
    border-radius:var(--m2-radius)!important;
    background:var(--m2-card)!important;
    box-shadow:none!important;
  }
  .onedrive-breadcrumb,.onedrive-root-actions{
    border-color:var(--m2-line)!important;
    border-radius:var(--m2-radius)!important;
    background:var(--m2-paper-2)!important;
  }
  .onedrive-item:hover,.reference-option:hover{border-color:var(--m2-line-strong)!important;background:var(--m2-card-strong)!important}

  /* Budget et comptabilité */
  .budget-summary-grid{gap:9px}
  .accounting-tabs{gap:0;border-bottom:1px solid var(--m2-line-strong)}
  .accounting-tabs a{
    padding:9px 13px;
    border:0;
    border-bottom:2px solid transparent;
    border-radius:0;
    color:var(--muted);
    background:transparent;
    font-size:12.5px;
  }
  .accounting-tabs a.active{color:var(--ink);border-bottom-color:var(--m2-brick);background:transparent}
  .accounting-year-switch{align-items:end}
  .accounting-transaction,.accounting-inline-card{
    border-color:var(--m2-line)!important;
    border-radius:var(--m2-radius)!important;
    background:var(--m2-card)!important;
    box-shadow:none!important;
  }
  .accounting-inline-header{
    top:0;
    padding:.42rem .65rem;
    border-color:var(--m2-line-strong);
    border-radius:var(--m2-radius);
    color:var(--muted);
    background:var(--m2-paper-2);
    font-family:var(--m2-mono);
    font-size:10px;
    letter-spacing:.07em;
  }
  .accounting-inline-row{padding:.48rem .62rem}
  .accounting-inline-row select,.accounting-inline-row input{min-height:31px;padding:.38rem .45rem;font-size:12.5px}
  .accounting-inline-details>summary{color:var(--m2-brick);background:var(--m2-paper-2)}
  .accounting-transaction-detail-grid>div,.allocation-list li{
    border:1px solid var(--m2-line);
    border-radius:var(--m2-radius);
    background:var(--m2-paper);
  }
  .evidence-chip{border-color:var(--m2-line);background:var(--m2-card)}

  /* Timeline : dimensions métier conservées, habillage seulement */
  .timeline-v3-shell,.timeline-board,.timeline-v3-viewport,.timeline-v3-content{
    border-color:var(--m2-line)!important;
    border-radius:var(--m2-radius)!important;
    background:var(--m2-card)!important;
    box-shadow:none!important;
  }
  .timeline-v3-toolbar-actions,.timeline-v3-controls,.timeline-v3-topbar,
  .timeline-v3-period-label,.timeline-v3-lane-label{
    border-color:var(--m2-line)!important;
    background:var(--m2-paper-2)!important;
  }
  .timeline-v3-event{
    border-radius:var(--m2-radius)!important;
    box-shadow:0 4px 12px -10px rgba(28,35,33,.55)!important;
  }
  .timeline-v3-event-actions button,.timeline-card-action{border-radius:2px!important}

  /* Fiches narratives et PJ/PNJ à l’écran */
  .native-sheet-editor,.native-sheet-form,.native-sheet-save-bar,
  .pj-sheet-page .pj-sheet,.pnj-sheet-page .pj-sheet{
    border-color:var(--m2-line)!important;
    border-radius:var(--m2-radius)!important;
    background:var(--m2-card)!important;
    box-shadow:none!important;
  }
  .native-sheet-section-head,.pj-sheet-page-heading{
    border-bottom-color:var(--m2-line-strong)!important;
  }
  .native-long-field,.text-block{
    border-color:var(--m2-line)!important;
    border-radius:var(--m2-radius)!important;
    background:var(--m2-paper)!important;
  }

  /* Connexion */
  .shell{background:var(--m2-paper);padding:24px}
  .login-card{
    width:min(440px,100%);
    padding:28px;
    border:1px solid var(--m2-line-strong);
    border-radius:var(--m2-radius);
    background:var(--m2-card);
    box-shadow:var(--shadow);
  }
  .login-card .brand{margin-bottom:22px}
  .login-card .brand-mark{
    width:42px;height:42px;border-radius:0;color:var(--ink);background:var(--m2-card)!important
  }
  .login-card h1{font-size:24px}

  /* Densité */
  body.density-compact .panel{padding:13px 15px}
  body.density-compact th,body.density-compact td{padding:7px 8px}
  body.density-compact input,body.density-compact select{min-height:32px;padding:5px 7px}
  body.density-compact .button{min-height:29px;padding:5px 8px}
}

@media screen and (max-width:1200px){
  .topbar{grid-template-columns:1fr 1fr;padding:11px 20px}
  .glossary-search{grid-column:1/-1}
  .content{padding:22px 22px 46px}
  .app-footer{margin:0 22px}
  .main-nav-row{align-items:flex-start;flex-wrap:wrap;padding:0 16px}
  .main-nav-groups{order:3;width:100%;overflow-x:auto}
  .nav-dropdown{flex:0 0 auto}
  .main-nav-dynamic .nav-view-menu{margin-left:auto}
}

@media screen and (max-width:760px){
  .topbar{grid-template-columns:1fr;padding:10px 14px}
  .event-switcher,.glossary-search{grid-column:auto}
  .userbox{justify-content:flex-start;text-align:left}
  .userbox strong{width:auto}
  .content{padding:18px 14px 38px}
  .app-footer{margin:0 14px}
  .main-nav-row{padding:0 10px}
  .nav-home-button{width:auto}
  .main-nav-groups{gap:0;flex-wrap:nowrap}
  .nav-dropdown{flex:0 0 auto}
  .nav-dropdown-panel{position:fixed;left:10px!important;right:10px!important;top:auto;width:auto;max-width:none}
  .main-nav-dynamic .nav-view-menu{width:auto;margin-left:0}
  .main-nav-dynamic .nav-view-menu>summary{width:auto}
  .page-heading{
    align-items:flex-start;
    flex-direction:column;
    min-height:0!important;
    padding:9px 10px;
  }
  .page-heading h2{font-size:24px}
  .page-heading-help-panel{
    position:fixed;
    top:72px;
    left:12px;
    right:12px;
    width:auto;
    max-height:calc(100vh - 96px);
    overflow:auto;
  }
  .page-actions{
    width:100%;
    justify-content:flex-start;
  }
  .page-actions .button{flex:1 1 180px}
  .stat-grid-four,.stat-grid-six,.budget-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid,.filter-grid,.todo-filter-grid{grid-template-columns:1fr}
  .span-2,.span-3{grid-column:auto}
  .two-columns{grid-template-columns:1fr}
  .participant-toolbar-row{grid-template-columns:1fr}
  .participant-quick-filters{grid-column:auto;width:100%}
  .participant-quick-filter{flex:1;text-align:center}
  .participant-operations{grid-column:auto;grid-row:auto}
  .registration-table-toolbar .participant-operations{width:auto}
  .participant-operation-menu{position:static;min-width:0;margin-top:5px}
  .participant-kpis{overflow-x:auto}
  .app-dialog{width:calc(100% - 16px);max-height:calc(100vh - 16px)}
}

@media screen and (max-width:520px){
  .stat-grid-four,.stat-grid-six,.budget-summary-grid{grid-template-columns:1fr}
  .page-heading h2{font-size:22px}
  .subnav-tabs a{padding-left:12px;padding-right:12px}
  .button{white-space:normal}
}

  /* MACHINA 2.2.5 — Inscriptions : code visuel repris de Tous les participants */
  body:not(.portal-body) .participant-registration-panel{
    /* Utilise directement le composant général .panel, sans fond spécifique. */
    overflow:visible;
  }

  body:not(.portal-body) .participant-registration-panel .table-wrap{
    /* Même enveloppe que Tous les participants. */
    overflow-x:auto;
  }

  body:not(.portal-body) .participant-registration-table{
    /* Même rythme de tableau que participant-table, tout en conservant
       les dimensions nécessaires aux champs éditables des inscriptions. */
    margin-top:9px;
    border-collapse:collapse;
    border-spacing:0;
  }

  body:not(.portal-body) .participant-registration-table thead th{
    position:relative;
    top:auto;
    z-index:auto;
    background:var(--m2-paper-2);
  }

  body:not(.portal-body) .participant-registration-table tbody tr,
  body:not(.portal-body) .participant-registration-table tbody tr.registration-paid-row{
    background:var(--m2-card);
  }

  body:not(.portal-body) .participant-registration-table tbody tr:hover,
  body:not(.portal-body) .participant-registration-table tbody tr.registration-paid-row:hover{
    background:var(--m2-card-strong);
  }

  body:not(.portal-body) .participant-registration-table tbody td,
  body:not(.portal-body) .participant-registration-table tbody tr.registration-paid-row td,
  body:not(.portal-body) .participant-registration-table tbody tr:hover td,
  body:not(.portal-body) .participant-registration-table tbody tr.registration-paid-row:hover td{
    background:transparent!important;
  }

  body:not(.portal-body) .participant-registration-table tbody td{
    padding:9px 10px;
    border-bottom:1px solid var(--m2-line);
    vertical-align:middle;
  }

  body:not(.portal-body) .participant-registration-table tbody tr td:first-child,
  body:not(.portal-body) .participant-registration-table tbody tr.registration-paid-row td:first-child{
    border-left:0!important;
    box-shadow:none!important;
  }


/* MACHINA 2.2.6 — cellule Action alignée comme une vraie cellule */
body:not(.portal-body)
.participant-registration-table
td.participant-registration-action-cell{
  display:table-cell!important;
  padding:9px 10px;
  border-bottom:1px solid var(--m2-line);
  vertical-align:middle;
  text-align:right;
  background:transparent!important;
}

body:not(.portal-body)
.participant-registration-table
.participant-registration-action-content{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  min-height:100%;
}

body:not(.portal-body)
.participant-registration-table
.participant-registration-action-content .button{
  min-height:28px;
  padding:5px 9px;
  font-size:11.5px;
}

body:not(.portal-body)
.participant-registration-table
.participant-registration-action-content .inline-save-state{
  display:block;
  margin:0;
  min-height:0;
  color:var(--m2-forest);
  font-size:10.5px;
  line-height:1.2;
  text-align:right;
}


/* MACHINA 2.2.7 — six compteurs Inscriptions */
body:not(.portal-body)
.participant-registration-stats.stat-grid-six{
  grid-template-columns:repeat(6,minmax(0,1fr));
}

@media screen and (max-width:860px){
  body:not(.portal-body)
  .participant-registration-stats.stat-grid-six{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media screen and (max-width:520px){
  body:not(.portal-body)
  .participant-registration-stats.stat-grid-six{
    grid-template-columns:1fr;
  }
}


/* MACHINA 2.2.8 — filtres extensibles et paiement inline */
body:not(.portal-body)
.participant-registration-table{
  width:max-content;
  min-width:100%;
  table-layout:auto!important;
}

body:not(.portal-body)
.participant-registration-table
.table-column-filter[open]{
  min-width:230px;
}

body:not(.portal-body)
.participant-registration-table
th:first-child
.table-column-filter[open]{
  min-width:300px;
}

body:not(.portal-body)
.participant-registration-table
.table-column-filter-form{
  min-width:220px;
}

body:not(.portal-body)
.participant-registration-table
th:first-child
.table-column-filter-form{
  min-width:290px;
}

body:not(.portal-body)
.participant-registration-panel
.table-wrap{
  overflow-x:auto;
  scrollbar-gutter:stable;
}

/* Tous les compteurs sur une ligne, quel que soit leur nombre (Armand, 08/09/2026) :
   le huitième (« À confirmer ») passait à la ligne sous une grille à sept colonnes,
   et le cinquième du répertoire sous une grille à quatre. */
body:not(.portal-body)
.participant-registration-stats.stat-grid-seven,
body:not(.portal-body)
.participant-directory-stats.stat-grid-four{
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
}

body:not(.portal-body)
.registration-payment-cell
.payment-status-select{
  width:auto;
  min-width:118px;
  min-height:30px;
  padding:4px 28px 4px 8px;
  border-radius:2px;
  font-size:11.5px;
  font-weight:700;
}

body:not(.portal-body)
.registration-payment-cell
.payment-status-a_payer{
  border-color:#e2c3bf;
  color:var(--m2-danger);
  background:#f4e4e2;
}

body:not(.portal-body)
.registration-payment-cell
.payment-status-paye{
  border-color:#cddbd5;
  color:#245847;
  background:#e7edea;
}

body:not(.portal-body)
.registration-payment-cell
.payment-status-partiel{
  border-color:#e6d3a3;
  color:#725314;
  background:#f6ecd8;
}

body:not(.portal-body)
.registration-payment-cell
.payment-status-non_du{
  border-color:var(--m2-line);
  color:#59635e;
  background:#e8e4dc;
}

body:not(.portal-body)
.registration-payment-cell
.participant-payment-note{
  display:block;
  max-width:220px;
  margin-top:4px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.3;
}

body:not(.portal-body)
.registration-payment-cell
.participant-payment-note.is-empty{
  display:none;
}

@media screen and (max-width:1100px){
  body:not(.portal-body)
  .participant-registration-stats.stat-grid-seven{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media screen and (max-width:760px){
  body:not(.portal-body)
  .participant-registration-stats.stat-grid-seven{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media screen and (max-width:520px){
  body:not(.portal-body)
  .participant-registration-stats.stat-grid-seven{
    grid-template-columns:1fr;
  }
}



/* MACHINA 2.2.9 — Budget central, TODO volontaire, listes nom seul */
body:not(.portal-body) .budget-results-panel{
  overflow:visible;
}
body:not(.portal-body) .budget-results-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:8px;
}
body:not(.portal-body) .budget-results-scroll{
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-gutter:stable;
}
body:not(.portal-body) .budget-results-table{
  min-width:1040px;
  margin-top:8px;
}
body:not(.portal-body) .budget-results-table th,
body:not(.portal-body) .budget-results-table td{
  vertical-align:middle;
}
body:not(.portal-body) .budget-results-table .budget-actions-column,
body:not(.portal-body) .budget-results-table .budget-actions-cell{
  width:1%;
  text-align:right;
  white-space:nowrap;
}
body:not(.portal-body) .budget-section-row th{
  padding:10px 12px;
  border-top:2px solid var(--m2-line-strong);
  background:var(--m2-paper-2);
}
body:not(.portal-body) .budget-section-row th{
  display:table-cell;
}
body:not(.portal-body) .budget-section-row th>span{
  float:left;
  padding-top:5px;
  font-family:Georgia,serif;
  font-size:16px;
  letter-spacing:.02em;
}
body:not(.portal-body) .budget-section-row .budget-create-menu{
  float:right;
}
body:not(.portal-body) .budget-result-row strong{
  display:block;
}
body:not(.portal-body) .budget-row-meta{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:10.5px;
}
body:not(.portal-body) .budget-money{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
body:not(.portal-body) .budget-inline-estimate-form{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:190px;
}
body:not(.portal-body) .budget-inline-estimate-form input{
  width:105px;
  min-height:30px;
  padding:4px 7px;
  border-radius:2px;
}
body:not(.portal-body) .budget-variance-positive{color:var(--m2-forest);font-weight:800}
body:not(.portal-body) .budget-variance-negative{color:var(--m2-danger);font-weight:800}
body:not(.portal-body) .budget-variance-neutral{color:var(--muted)}
body:not(.portal-body) .budget-row-cancelled{
  opacity:.58;
  text-decoration:none;
}
body:not(.portal-body) .budget-row-cancelled strong{
  text-decoration:line-through;
}
body:not(.portal-body) .budget-action-details,
body:not(.portal-body) .budget-create-menu,
body:not(.portal-body) .budget-category-menu{
  position:relative;
  display:inline-block;
  margin-left:4px;
}
body:not(.portal-body) .budget-action-details>summary,
body:not(.portal-body) .budget-create-menu>summary,
body:not(.portal-body) .budget-category-menu>summary{
  list-style:none;
}
body:not(.portal-body) .budget-action-details>summary::-webkit-details-marker,
body:not(.portal-body) .budget-create-menu>summary::-webkit-details-marker,
body:not(.portal-body) .budget-category-menu>summary::-webkit-details-marker{
  display:none;
}
body:not(.portal-body) .budget-floating-panel{
  position:fixed;
  z-index:350;
  top:76px;
  right:28px;
  width:min(920px,calc(100vw - 56px));
  max-height:calc(100vh - 112px);
  overflow:auto;
  padding:18px;
  border:1px solid var(--m2-line-strong);
  border-radius:4px;
  background:var(--m2-card);
  box-shadow:0 18px 50px rgba(28,35,33,.28);
  text-align:left;
  white-space:normal;
}
body:not(.portal-body) .budget-todo-panel,
body:not(.portal-body) .budget-category-panel{
  width:min(600px,calc(100vw - 56px));
}
body:not(.portal-body) .budget-floating-panel h4{
  margin:0 0 12px;
  font-family:Georgia,serif;
  font-size:19px;
}
body:not(.portal-body) .budget-todo-active{
  border-color:var(--m2-forest)!important;
  color:var(--m2-forest)!important;
}
body:not(.portal-body) .budget-subtotal-row td,
body:not(.portal-body) .budget-final-row td{
  font-weight:850;
}
body:not(.portal-body) .budget-opening-row td{
  border-top:2px solid var(--m2-line-strong);
}
body:not(.portal-body) .budget-fold{
  padding:0;
  overflow:hidden;
}
body:not(.portal-body) .budget-fold-summary{
  padding:13px 16px;
  list-style:none;
  cursor:pointer;
  font-family:Georgia,serif;
  font-size:16px;
  font-weight:700;
  background:var(--m2-paper-2);
}
body:not(.portal-body) .budget-fold-summary::-webkit-details-marker{display:none}
body:not(.portal-body) .budget-fold-summary::after{
  content:'▸';
  float:right;
  color:var(--muted);
}
body:not(.portal-body) .budget-fold[open]>.budget-fold-summary::after{content:'▾'}
body:not(.portal-body) .budget-fold-content{
  padding:15px 16px 18px;
  border-top:1px solid var(--m2-line);
}
body:not(.portal-body) .todo-delete-form{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--m2-line);
}
body:not(.portal-body) .name-only-entity-card{
  padding:0;
  overflow:visible;
}
body:not(.portal-body) .name-only-entity-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:8px 10px 8px 14px;
}
body:not(.portal-body) .name-only-entity-row h3{
  margin:0;
  font-size:14px;
  font-weight:750;
}
body:not(.portal-body) .name-only-edit-box{
  margin:0;
  padding:0;
  border:0;
}
body:not(.portal-body) .name-only-edit-box>summary{
  padding:6px 10px;
  border:1px solid var(--m2-line-strong);
  border-radius:2px;
  background:var(--m2-card);
  font-size:11.5px;
  font-weight:750;
  list-style:none;
  cursor:pointer;
}
body:not(.portal-body) .name-only-edit-box>summary::-webkit-details-marker{display:none}
body:not(.portal-body) .name-only-edit-box[open]{
  grid-column:1/-1;
  width:100%;
  margin-top:4px;
  padding-top:10px;
  border-top:1px solid var(--m2-line);
}
body:not(.portal-body) .name-only-edit-content{
  padding:8px 4px 4px;
}
@media screen and (max-width:700px){
  body:not(.portal-body) .budget-floating-panel{
    top:18px;
    right:12px;
    width:calc(100vw - 24px);
    max-height:calc(100vh - 36px);
  }
  body:not(.portal-body) .budget-results-heading{
    flex-direction:column;
  }
  body:not(.portal-body) .name-only-entity-row{
    grid-template-columns:1fr auto;
  }
}

/* MACHINA_VISUAL_2_END */

/* MACHINA 2.2.11 — Budget Réel / Estimé / Projeté */
body:not(.portal-body) .budget-summary-grid-four{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
body:not(.portal-body) .budget-kpi small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10.5px;
}
body:not(.portal-body) .budget-results-three-values{
  min-width:880px;
}
body:not(.portal-body) .budget-results-three-values th:nth-child(2),
body:not(.portal-body) .budget-results-three-values td:nth-child(2){
  width:105px;
  white-space:nowrap;
}
body:not(.portal-body) .budget-results-three-values th:nth-child(3),
body:not(.portal-body) .budget-results-three-values th:nth-child(4),
body:not(.portal-body) .budget-results-three-values th:nth-child(5),
body:not(.portal-body) .budget-results-three-values td:nth-child(3),
body:not(.portal-body) .budget-results-three-values td:nth-child(4),
body:not(.portal-body) .budget-results-three-values td:nth-child(5){
  width:150px;
  text-align:right;
}
body:not(.portal-body) .budget-calculation-panel,
body:not(.portal-body) .budget-reconciliation-panel{
  margin-top:12px;
}
body:not(.portal-body) .budget-calculation-table,
body:not(.portal-body) .budget-reconciliation-table{
  min-width:760px;
}
body:not(.portal-body) .budget-calculation-table th:not(:first-child),
body:not(.portal-body) .budget-calculation-table td:not(:first-child){
  width:170px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
body:not(.portal-body) .budget-reconciliation-table th{
  width:310px;
}
body:not(.portal-body) .budget-reconciliation-table td:nth-child(2){
  width:150px;
  text-align:right;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
body:not(.portal-body) .budget-reconciliation-table td:nth-child(3){
  color:var(--muted);
  font-size:11px;
}
body:not(.portal-body) .budget-settings-separator{
  margin-top:4px;
  padding:9px 0 5px;
  border-top:1px solid var(--m2-line);
}
body:not(.portal-body) .budget-settings-separator strong,
body:not(.portal-body) .budget-settings-separator small{
  display:block;
}
@media screen and (max-width:1100px){
  body:not(.portal-body) .budget-summary-grid-four{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media screen and (max-width:620px){
  body:not(.portal-body) .budget-summary-grid-four{
    grid-template-columns:1fr;
  }
}


/* MACHINA 2.2.13 — Budget regroupé et vérifiable */
body:not(.portal-body) .budget-inline-detail-row td{
  padding:0;
  background:var(--m2-paper-2);
}
body:not(.portal-body) .budget-inline-detail-content{
  padding:16px;
  border-top:1px solid var(--m2-line);
  border-bottom:1px solid var(--m2-line-strong);
}
body:not(.portal-body) .budget-inline-detail-content h4{
  margin:0 0 10px;
  font-family:Georgia,serif;
  font-size:17px;
}
body:not(.portal-body) .budget-opus-parameters-panel{
  width:min(980px,calc(100vw - 56px));
}
body:not(.portal-body) .budget-opus-parameters-panel .budget-settings-separator{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--m2-line-strong);
}
body:not(.portal-body) .budget-final-row td{
  border-top:2px solid var(--m2-line-strong);
  background:var(--m2-paper-2);
}
body:not(.portal-body) .budget-opening-row td{
  background:var(--m2-paper-2);
}


/* ==========================================================================
   Phase D — état d'évolution PJ
   Ces marqueurs appartiennent au document canonique MACHINA.
   Le Portail peut déclencher l'état via l'API, mais ne possède plus leur rendu.
   ========================================================================== */
.portal-player-editable {
    background: #fffaf0 !important;
    box-shadow: inset 4px 0 0 #b47a2a;
}

.portal-player-editable input:not(:disabled),
.portal-player-editable select:not(:disabled) {
    cursor: pointer;
}

.portal-player-baseline {
    opacity: .88;
}

/* Phase E — contexte Portail, structure interne possédée par MACHINA. */
.portal-pj-sheet-page .app {
    width: min(1780px, calc(100% - 24px));
    margin: 12px auto 34px;
    background: rgba(251, 247, 238, .95);
    border-color: rgba(105, 79, 43, .30);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .30);
    backdrop-filter: blur(6px);
}

.portal-pj-sheet-page .preview {
    background: rgba(238, 243, 248, .92);
}

.portal-pj-sheet-page .preview-head {
    background: rgba(255, 255, 255, .96);
}

.portal-pj-sheet-page #portalStaticCoverMark {
    pointer-events: none;
    cursor: default;
}

.portal-pj-sheet-page #technicalPage {
    display: none !important;
}

.portal-pj-sheet-page input:disabled,
.portal-pj-sheet-page textarea:disabled,
.portal-pj-sheet-page select:disabled:not(.spell-select) {
    color: inherit;
    opacity: 1;
    -webkit-text-fill-color: currentColor;
}

/*
 * Le moteur MACHINA affiche le nom du sort via .spell-select-display
 * et garde le vrai select transparent. En lecture seule, MACHINA conserve
 * ce comportement sans dépendre d'une feuille CSS du Portail.
 */
.portal-pj-sheet-page .spell-name-cell .spell-select:disabled {
    opacity: 0 !important;
    -webkit-text-fill-color: transparent !important;
}

.portal-pj-sheet-page [contenteditable="false"] {
    cursor: default;
}

.portal-pj-sheet-page .app-footer {
    background: rgba(255, 253, 248, .86);
}

@media (max-width: 760px) {
    .portal-pj-sheet-page .app {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }
}

@media print {
    .portal-pj-sheet-page .preview-head,
    .portal-pj-sheet-page .app-footer {
        display: none !important;
    }
}

/* MACHINA 2.4.31 — la colonne « Messages » des listes de participants (10/09/2026) */

/*
 * L'INDICATEUR NE CRIE QUE QUAND IL LE FAUT. Sur cent trente lignes, ce qui
 * compte est de voir d'un coup qui attend une réponse ; « 3 échanges » est du
 * contexte et reste dans le ton commun. Une colonne où tout serait en couleur ne
 * vaudrait pas mieux qu'une colonne vide.
 */
.registration-messages-alerte{
  color:#7a2718;
  font-weight:800;
  background:#f7e2dc;
  border-color:#d9a99b;
}

.registration-messages-alerte:hover,
.registration-messages-alerte:focus-visible{
  background:#f0d2c9;
}

td.registration-messages-cell{
  vertical-align:middle;
  text-align:left;
  white-space:nowrap;
}

/*
 * L'EN-TÊTE « ACTION » ÉTAIT CALÉ À GAUCHE PENDANT QUE SA CELLULE ÉTAIT CALÉE À
 * DROITE — remarque d'Armand le 10/09/2026 en regardant sa liste. Ce n'est pas
 * un titre ordinaire mais un <details> de filtre, et rien ne lui disait de
 * suivre sa colonne.
 */
body:not(.portal-body)
.participant-registration-table
thead th:last-child > .table-column-filter > summary{
  justify-content:flex-end;
}

/* MACHINA 2.4.32 — la pastille de la messagerie (10/09/2026) */

/*
 * ELLE NE PARAÎT QUE S'IL Y A QUELQUE CHOSE, et le PHP s'en charge : pas de
 * pastille à zéro. Un compteur permanent finit par ne plus être lu, et celui-ci
 * n'a d'intérêt que le jour où il n'est pas vide.
 *
 * Assez petite pour ne pas déformer le bouton, assez contrastée pour se voir du
 * coin de l'œil — c'est tout ce qu'on lui demande.
 */
.nav-pastille{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  margin-left:6px;
  padding:0 5px;
  color:#fff;
  font-size:.68rem;
  font-weight:900;
  line-height:1;
  letter-spacing:0;
  background:#b03a26;
  border-radius:9px;
}

/* Sur le bouton actif, le fond change : la pastille garde son contraste. */
.nav-main-button.active .nav-pastille{
  background:#8f2d1c;
}

/* ==========================================================================
   MESSAGERIE — LE TRI PAR LES TITRES, ET LA LIGNE CLIQUABLE (10/09/2026)
   ========================================================================== */

/*
 * LE TITRE DE COLONNE EST LE BOUTON. Il doit donc se voir cliquable sans
 * ressembler à un lien de texte au milieu d'un tableau : même graisse, même
 * couleur que le titre qu'il remplace, et seule la flèche signale le geste.
 */
.tri-titre{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
}
.tri-titre:hover{
  color:var(--primary-dark);
}

/*
 * LA FLÈCHE AU REPOS EST PÂLE ET PETITE : elle dit « on peut trier ici ». Sur
 * la colonne qui trie, elle devient franche — c'est le seul endroit de la
 * ligne d'en-tête où l'œil doit s'arrêter.
 */
.tri-fleche{
  font-size:.62rem;
  line-height:1;
  opacity:.32;
}
.tri-titre:hover .tri-fleche{
  opacity:.7;
}
.tri-actif{
  color:var(--primary-dark);
}
.tri-actif .tri-fleche{
  opacity:1;
}

/* Toute la ligne mène à sa page : le curseur doit le dire avant le clic. */
.ligne-cliquable{
  cursor:pointer;
}
.ligne-cliquable:hover{
  background:#f3f8fd;
}

/* ==========================================================================
   MESSAGERIE — LE BANDEAU D'UNE CONVERSATION (10/09/2026)
   ========================================================================== */

/*
 * TROIS PANNEAUX EMPILÉS SONT DEVENUS TROIS COLONNES, ET ELLES SONT NOMMÉES.
 *
 * Premier essai : `repeat(auto-fit,minmax(260px,1fr))`. Rendu sur un écran de
 * 1600 px, il taillait cinq pistes, en collapsait deux et laissait SIX CENTS
 * PIXELS VIDES à droite — le gâchis même qu'on venait corriger. Trois colonnes
 * connues d'avance se déclarent, elles ne se devinent pas.
 *
 * LES PROPORTIONS NE SONT PAS ÉGALES, parce que le contenu ne l'est pas :
 * l'état tient en une pastille et un bouton, le rattachement porte une liste de
 * tout le monde, l'objet une phrase.
 */
.fil-bandeau{
  display:grid;
  grid-template-columns:minmax(180px,auto) minmax(330px,1.5fr) minmax(280px,1fr);
  gap:10px 22px;
  align-items:start;
  padding:13px 16px;
}

/* Sous mille pixels, les trois colonnes se rangent l'une sous l'autre. */
@media(max-width:1000px){
  .fil-bandeau{grid-template-columns:1fr}
}
.fil-colonne{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

/* L'étiquette remplace les anciens titres de panneau, pour un dixième de la
   hauteur : c'est le mot qui compte, pas le bandeau autour. */
.fil-etiquette{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.fil-ligne{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  min-width:0;
}
.fil-gestes{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:6px;
}

/*
 * ICI SE GAGNE LA HAUTEUR, ET C'EST UNE SEULE RÈGLE QUI LA PERDAIT.
 * `app.css` pose `input,select,textarea{width:100%}` pour toute l'application :
 * le sélecteur de personne s'étirait donc sur toute la largeur de l'écran, en
 * poussant tout le reste à la ligne. On rend leur largeur aux champs, et on les
 * ramène à la taille d'une barre d'outils.
 */
.fil-bandeau select,
.fil-bandeau input[type=text]{
  width:auto;
  flex:1 1 190px;
  min-width:0;
  min-height:34px;
  padding:6px 9px;
  font-size:13px;
}
.fil-bandeau .button{
  min-height:34px;
  padding:6px 11px;
  font-size:12px;
}
.fil-bandeau .button-mini{
  min-height:26px;
  padding:3px 7px;
}
.fil-bandeau label{
  margin:0;
  font-weight:400;
}
.fil-case{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  white-space:normal;
}
.fil-case input{
  margin:0;
}
.fil-note{
  font-size:12px;
  line-height:1.35;
}

/* Les adresses retenues tiennent sur une ligne, chacune avec son « Oublier ». */
.fil-adresses{
  font-size:12px;
}
.fil-adresse{
  gap:4px;
  padding:2px 4px 2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f8fafc;
}

/*
 * LES EXPLICATIONS SE REPLIENT, ELLES NE DISPARAISSENT PAS. Elles portent des
 * décisions qu'on oublie — l'adresse retenue ne sert qu'à la messagerie — et
 * qu'il faut pouvoir relire. Repliées, elles coûtent une ligne.
 */
.fil-notes{
  grid-column:1/-1;
  margin-top:2px;
  padding-top:8px;
  border-top:1px dashed #dbe4ee;
}
.fil-notes>summary{
  width:max-content;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.fil-notes p{
  margin:8px 0 0;
  font-size:12px;
  line-height:1.45;
}

/* ==========================================================================
   MESSAGERIE — LA TÂCHE PROPOSÉE PAR « JE M'EN OCCUPE » (10/09/2026)
   ========================================================================== */

/*
 * MÊME PIÈGE QUE POUR LE BANDEAU, ET IL EST DÉJÀ TOMBÉ UNE FOIS AUJOURD'HUI :
 * `app.css` pose `input{width:100%}` pour toute l'application. Sans ce
 * contre-ordre, le champ de date s'étirerait sur toute la largeur et pousserait
 * les deux boutons à la ligne suivante — pour choisir une date.
 */
.tache-proposition input[type=date]{
  width:auto;
  min-width:0;
  min-height:34px;
  padding:6px 9px;
}
.tache-proposition label{
  margin:0;
}
.tache-proposition .button{
  min-height:34px;
  padding:6px 11px;
}

/* Le rappel discret d'une tâche déjà prise : une ligne, pas un encart. */
.tache-rappel{
  padding:10px 16px;
}
.tache-rappel a{
  margin-left:8px;
  font-size:12px;
}

/* ==========================================================================
   INSCRIPTIONS — LE SECOND NOMBRE DES TUILES DE CATÉGORIE (10/09/2026)
   ========================================================================== */

/*
 * « 12 +9 non inscrits ». Le second nombre est PLUS PETIT, et c'est le fond de
 * la demande : les deux ne pèsent pas pareil. Le premier va chez l'assureur et
 * dans le budget ; le second est une information de travail. À taille égale on
 * les lirait comme équivalents, et on finirait par les additionner d'un coup
 * d'œil.
 *
 * Il vit DANS le <strong>, sur sa propre ligne, pour rester accroché au nombre
 * qu'il complète plutôt que de flotter au-dessus du libellé de catégorie.
 */
.stat-hors{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  font-style:normal;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
}

/*
 * ET LES LIBELLÉS RESTENT ALIGNÉS. Une tuile qui porte un second nombre est
 * plus haute d'une ligne ; sans cela, « Intendance » se retrouverait au niveau
 * du « +3 non inscrits » de sa voisine, et la rangée deviendrait irrégulière
 * là où l'œil attend une grille. Le libellé est poussé en bas de sa carte,
 * qu'il y ait un second nombre ou non.
 *
 * Cadré à cette grille-là : `.stat-card` sert ailleurs, et les autres écrans
 * n'ont pas ce second nombre.
 */
.participant-registration-stats .stat-card{
  display:flex;
  flex-direction:column;
}
.participant-registration-stats .stat-card>span{
  margin-top:auto;
}

/* ==========================================================================
   LES CLÔTURÉES, REGROUPÉES PAR PERSONNE
   Demande d'Armand du 11/09/2026 : « il faut mettre un peu de rangement dans
   clôturé sinon ça va devenir un enfer ».
   ========================================================================== */

.groupes-tri{
  margin:0 0 10px;
  font-size:12px;
}

/*
 * UN BLOC PAR PERSONNE, ET LE TRAIT QUI LES SÉPARE PLUTÔT QU'UNE BOÎTE.
 * Une bordure complète autour de chacun ferait, à quarante personnes, quarante
 * cadres empilés — un mur. Le trait suffit à dire où l'un finit.
 */
.groupe-personne{
  border-bottom:1px solid var(--line);
}
.groupe-personne:first-of-type{
  border-top:1px solid var(--line);
}

.groupe-resume{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 4px;
  cursor:pointer;
  list-style:none;
}
.groupe-resume::-webkit-details-marker{
  display:none;
}

/*
 * LE TRIANGLE EST ÉCRIT À LA MAIN, parce que le marqueur natif ne se place ni
 * ne se colore de la même façon selon le navigateur. Il tourne à l'ouverture :
 * c'est le seul signe que le bloc est déplié quand on a fait défiler.
 */
.groupe-resume::before{
  content:"▸";
  flex:0 0 auto;
  color:var(--muted);
  font-size:.75rem;
  transition:transform .12s ease;
}
.groupe-personne[open] > .groupe-resume::before{
  transform:rotate(90deg);
}

.groupe-resume:hover{
  background:#f8fafc;
}

.groupe-nom{
  flex:1 1 auto;
  min-width:0;
  font-weight:600;
}
.groupe-compte,
.groupe-date{
  flex:0 0 auto;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

/* « C'est un participant » sur la ligne d'un tiers : sous le résumé, aligné sur ses conversations. */
.groupe-geste{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:4px 4px 6px 26px;
  font-size:13px;
}
.groupe-geste select{
  max-width:320px;
}

/* Le journal des erreurs : une zone à copier telle quelle, en police fixe (16/09/2026). */
.journal-texte{width:100%;min-width:0;font-family:var(--m2-mono);font-size:12px;line-height:1.4;white-space:pre;overflow:auto;background:var(--m2-paper-2);border:1px solid var(--m2-line);border-radius:var(--m2-radius);padding:8px}

/* --- Les conversations d'une personne, une fois dépliées --- */

.groupe-fils{
  margin:0;
  padding:0 4px 10px 26px;
  list-style:none;
}
.groupe-fils li{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:5px 0;
  font-size:13px;
}
.groupe-fils li + li{
  border-top:1px dotted var(--line);
}

/*
 * LA DATE EST DE LARGEUR FIXE ET EN CHIFFRES TABULAIRES : les objets doivent
 * s'aligner les uns sous les autres, sinon l'œil ne peut plus les parcourir.
 */
.groupe-fil-date{
  flex:0 0 auto;
  min-width:112px;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.groupe-fils li a{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.groupe-fil-compte{
  flex:0 0 auto;
  font-size:12px;
}

/* ==========================================================================
   LE BANDEAU DE LA MESSAGERIE, SUR UNE SEULE LIGNE
   « On a toutes ces informations et toute cette largeur, et on les empile
   l'une en dessous de l'autre » (Armand, 12/09/2026).
   ========================================================================== */

.jauges{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin:0 0 14px;
  padding:10px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/*
 * UN FILET ENTRE LES INDICATEURS, ET NON UNE BOÎTE AUTOUR DE CHACUN. Quatre
 * cadres alignés pèsent plus que les quatre nombres qu'ils portent.
 */
.jauge{
  display:flex;
  align-items:baseline;
  gap:6px;
  padding-left:18px;
  border-left:1px solid var(--line);
  font-size:13px;
  white-space:nowrap;
}
.jauge:first-child{
  padding-left:0;
  border-left:0;
}

.jauge-nom{
  color:var(--muted);
  font-size:12px;
}
.jauge strong{
  color:var(--ink);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.jauge-detail{
  color:var(--muted);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

/*
 * LA COULEUR NE TOUCHE QUE L'INDICATEUR CONCERNÉ, nom et détail compris : un
 * chiffre rouge à côté d'une étiquette grise se lit comme une erreur
 * d'affichage. Trois indicateurs calmes et un coloré se lisent sans lire.
 */
.jauge-orange strong,
.jauge-orange .jauge-nom,
.jauge-orange .jauge-detail{
  color:#b45309;
}
.jauge-rouge strong,
.jauge-rouge .jauge-nom,
.jauge-rouge .jauge-detail{
  color:#b91c1c;
}

.jauge-lien{
  margin-left:auto;
  color:var(--primary-dark);
  font-size:12px;
  white-space:nowrap;
}

/*
 * SUR PETIT ÉCRAN, LES INDICATEURS PASSENT À LA LIGNE DEUX PAR DEUX, et le
 * filet de gauche disparaît pour ceux qui se retrouvent en tête de rang — un
 * trait vertical en début de ligne n'aurait plus rien à séparer.
 */
@media(max-width:560px){
  .jauges{
    gap:10px 14px;
  }
  .jauge{
    padding-left:14px;
  }
  .jauge-lien{
    margin-left:0;
  }
}

/* ==========================================================================
   MESSAGERIE — LA PEAU RATTRAPE LA PAGE (12/09/2026)
   « Elle paraît austère, plate et administrative. » Le vrai défaut n'était
   pas l'austérité : c'était le BLEU. Plusieurs règles de la messagerie
   contournaient les variables avec des littéraux hérités de la palette
   d'app.css — un dégradé bleu sur « Écrire », un retour bleu, un survol
   bleu pâle, une barre #3975b7 en style inline sur les messages envoyés.
   Sur fond ivoire à accents brique et forêt, c'est ce qui donnait
   l'impression d'une autre application posée dans MACHINA.

   RÈGLE DU BLOC : aucune couleur en dur. Tout passe par var(--m2-*) ou par
   les variables de base, que la peau et les thèmes enregistrés surchargent.
   ========================================================================== */

/* --- L'en-tête : le titre commande, la technique s'efface --- */

/*
 * « Épreuve de la boîte » est un outil de vérification, pas un geste de la
 * journée. En bouton, il pesait autant que tout le reste ; en lien discret
 * dans les actions du titre, il reste à portée sans faire concurrence.
 */
.page-heading-lien{
  color:var(--muted);
  font-size:12.5px;
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--m2-line-strong);
  text-underline-offset:3px;
}
.page-heading-lien:hover,
.page-heading-lien:focus-visible{
  color:var(--ink);
  text-decoration-color:var(--m2-brick);
  outline:0;
}

/* --- Le panneau de tête : jauges, alertes, écrire, onglets --- */

.messagerie-tete .alert{margin:0 0 12px}
.messagerie-tete .note-liste{margin:0 0 12px}

/*
 * « ALLER CHERCHER LE COURRIER » REJOINT LA BARRE D'ÉTAT. C'est son sujet —
 * la relève — et c'est là qu'on regarde quand on se demande si la boîte est
 * à jour. Il était flotté à droite du panneau, en bouton noir, au même poids
 * qu'un geste qui crée ; il redevient un bouton clair, à côté du « Détail ».
 */
.jauges-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.jauges-actions form{margin:0}
.jauge-lien{margin-left:0}

/*
 * LES DEUX COULEURS DE JAUGE PASSENT PAR LA PEAU. Elles étaient écrites en
 * dur (#b45309, #b91c1c) — justes sur le thème bleu, fausses ailleurs.
 */
.jauge-orange strong,
.jauge-orange .jauge-nom,
.jauge-orange .jauge-detail{color:var(--m2-gold)}
.jauge-rouge strong,
.jauge-rouge .jauge-nom,
.jauge-rouge .jauge-detail{color:var(--m2-danger)}

/*
 * « ÉCRIRE À UN PARTICIPANT » EST LE SEUL GESTE QUI CRÉE, et il prend la
 * couleur que la peau réserve à ça — la brique de .creation-box>summary —
 * au lieu du dégradé bleu d'app.css. Serif comme les titres de création,
 * pour qu'on le lise comme une porte et non comme un filtre.
 */
.ecrire-participant{margin:0 0 14px}
.messagerie-ecriture-raccourcis{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.messagerie-ecriture-raccourcis .ecrire-participant{margin:0;min-width:min(100%,680px);flex:1 1 680px}
.messagerie-copies{margin:10px 0 14px}
.messagerie-copies>summary{cursor:pointer;font-weight:800;color:var(--primary-dark)}
.messagerie-copies .form-grid{margin-top:10px}
.messagerie-copies textarea{width:100%;min-width:0}
/* CC/CCI en étiquettes (16/09/2026) : le champ complète depuis le répertoire, le choix se voit, la zone d'adresses reste la valeur et se cache quand le script la tient. */
.copies-saisie{display:flex;gap:6px;align-items:stretch}
.copies-saisie input{flex:1 1 auto;min-width:0}
.copies-etiquettes{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:6px 0 0;padding:0}
.copies-etiquette{display:inline-flex;align-items:center;gap:6px;padding:2px 4px 2px 10px;border:1px solid var(--m2-line-strong);border-radius:999px;background:var(--m2-card-strong);font-size:13px}
.copies-retirer{border:0;background:none;cursor:pointer;color:var(--muted);font-size:16px;line-height:1;padding:0 4px}
.copies-retirer:hover{color:var(--m2-brick)}
.copies-actif textarea{display:none}
.ecrire-participant>summary{
  gap:9px;
  padding:8px 14px 8px 11px;
  border:1px solid var(--m2-brick);
  border-radius:var(--m2-radius);
  background:var(--m2-card-strong);
  color:var(--m2-brick);
  font-family:var(--m2-serif);
  font-size:15px;
  font-weight:600;
}
.ecrire-participant>summary:hover,
.ecrire-participant>summary:focus-visible{
  border-color:var(--m2-brick);
  background:color-mix(in srgb,var(--m2-brick) 7%,var(--m2-card-strong));
  outline:0;
}
.ecrire-participant>summary::before{
  width:18px;height:18px;
  border-radius:50%;
  background:var(--m2-brick);
  color:var(--m2-paper);
  font-family:var(--m2-sans);
  font-size:13px;
}
/*
 * OUVERTE, LA BOÎTE D'ÉCRITURE PREND LE TON DU PAPIER, pas celui de la carte :
 * « c'est trop blanc autour » (Armand, 12/09/2026). Le blanc est réservé à la
 * feuille où l'on écrit — l'éditeur — qui se détache alors du cadre au lieu
 * de se fondre dedans, ton sur ton.
 */
.ecrire-participant[open]>summary{
  border-radius:var(--m2-radius) var(--m2-radius) 0 0;
  border-bottom-color:transparent;
  background:var(--m2-paper);
}
.ecrire-participant[open]>.ecrire-participant-corps{
  padding:14px;
  border:1px solid var(--m2-brick);
  border-radius:0 var(--m2-radius) var(--m2-radius) var(--m2-radius);
  background:var(--m2-paper);
}
.ecrire-participant p{margin:0 0 8px}
.ecrire-participant form{margin-top:10px}
.ecrire-participant select,
.ecrire-participant input[type=text]{width:auto;min-width:340px;max-width:100%}
.ecrire-participant .form-envoi{margin-top:10px}

/*
 * LES ONGLETS SONT DES ONGLETS. La messagerie était la seule page à liste de
 * MACHINA à dessiner ses vues en boutons ; elle adopte .subnav-tabs, le
 * composant du glossaire, des référentiels et du module Participants. Le
 * compteur devient un petit chiffre, pas une parenthèse grise.
 */
.messagerie-tete .subnav-tabs{margin:0 0 14px}
.subnav-tabs a span{
  margin-left:5px;
  padding:1px 6px;
  border-radius:999px;
  background:var(--m2-paper-2);
  color:var(--muted);
  font-family:var(--m2-mono);
  font-size:10.5px;
  font-weight:700;
}
.subnav-tabs a.active span{background:var(--ink);color:var(--m2-paper)}
.subnav-tabs a:focus-visible{outline:2px solid var(--m2-forest);outline-offset:-2px}

/*
 * LES DEUX BOÎTES SE VOIENT COMME DEUX BOUTONS (Armand, 13/09/2026 : « la
 * différence entre les deux onglets n'est pas assez marquée, on ne comprend
 * pas que ce sont deux onglets »). Un commutateur à deux cases, bordé, la
 * case active pleine à l'encre : ce n'est plus un onglet parmi les onglets
 * d'état, c'est le choix qui vient avant eux. Variables seulement.
 */
.boite-choix{
  border:1px solid var(--m2-line-strong);
  border-radius:var(--m2-radius);
  background:var(--m2-card);
  padding:3px;
  gap:3px;
  margin:0 0 14px;
  overflow:visible;
}
.boite-choix a{
  flex:1 1 0;
  text-align:center;
  padding:9px 16px;
  border:1px solid transparent;
  border-radius:var(--m2-radius);
  color:var(--muted);
  font-family:var(--m2-serif);
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
}
.boite-choix a:hover{color:var(--ink);background:var(--m2-feuille)}
.boite-choix a.active{
  color:var(--m2-paper);
  background:var(--ink);
  border-color:var(--ink);
  box-shadow:none;
}
.boite-choix a:focus-visible{outline:2px solid var(--m2-gold);outline-offset:2px}

/*
 * LES BOUTONS DU BANDEAU SE VOIENT (Armand, 13/09/2026 : « la touche
 * Rattacher, on ne la voit pas, on voit juste le texte, le reste se fond
 * complètement avec la couleur de fond »). Un bord, un fond de feuille ; et
 * celui qui agit — Rattacher — est plein à l'encre, comme un bouton principal.
 */
.fil-bandeau .button{
  border:1px solid var(--m2-line-strong);
  background:var(--m2-feuille);
  color:var(--ink);
}
.fil-bandeau .button:not(.button-light):not(.button-mini):not(.button-danger){
  background:var(--ink);
  border-color:var(--ink);
  color:var(--m2-paper);
}
.fil-bandeau .button:hover{border-color:var(--ink)}

/*
 * LA QUARANTAINE SE SIGNALE SANS CRIER : un point or devant son nom quand
 * quelque chose y attend un regard. Une quarantaine n'est jamais urgente ;
 * c'est le signe qu'un passage s'impose, pas une alarme.
 */
.onglet-point{
  display:inline-block;
  width:7px;height:7px;
  margin-right:5px;
  border-radius:50%;
  background:var(--m2-gold);
  vertical-align:1px;
}

/* --- L'état vide : une phrase posée, pas un blanc --- */
.messagerie-tete .empty-state{margin:0}
.messagerie-tete .empty-state p{margin:0}

/* --- La liste : lire d'un coup d'œil qui, quoi, quand, et qui a parlé en dernier --- */

.ligne-cliquable:hover{background:var(--m2-card-strong)}

/*
 * LA DATE EN MONO ET EN CHIFFRES TABULAIRES, pour que la colonne se lise
 * comme un registre — c'est la direction de la peau. Dans À suivre et En
 * cours elle vient en premier : là, la chronologie prime (Armand,
 * 12/09/2026). Ailleurs, la personne d'abord.
 */
.col-date{
  white-space:nowrap;
  font-family:var(--m2-mono);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.col-fil{min-width:0}
.fil-qui{display:block;color:var(--ink);font-weight:700}
.fil-qui .badge{margin-left:0}
.fil-objet{display:block;margin-top:2px;color:var(--ink)}
.fil-objet a{text-decoration:none}
.fil-objet a:hover{text-decoration:underline;text-decoration-color:var(--m2-line-strong)}
.fil-objet code{margin-left:6px;font-size:11px}
.col-dernier{white-space:nowrap;color:var(--muted);font-size:12.5px}
.col-dernier strong{color:var(--ink);font-weight:700}
.col-nombre{font-variant-numeric:tabular-nums}
.col-geste{text-align:right;white-space:nowrap}
.geste-inline{display:inline;margin:0}
.preneur{display:block;margin-top:3px;font-size:11.5px}

/*
 * CE QUI ATTEND UNE RÉPONSE DE NOUS PORTE UN FILET FORÊT, le même que
 * .entity-card : une marque de la peau, pas une couleur de plus. Et jamais
 * la couleur seule — l'état est aussi écrit dans sa pastille.
 */
tr.fil-attente>td:first-child{box-shadow:inset 3px 0 0 var(--m2-forest)}

/* Les deux piles de la quarantaine : un titre léger, pas un h2 de page. */
.pile-titre{margin:0 0 6px;font-size:16px}
.pile-titre .muted{font-family:var(--m2-sans);font-size:13px;font-weight:400}
.pile-suite{margin-top:18px}

/* --- L'aide : présente, repliée, jamais plus lourde que les conversations --- */

.messagerie-aide{
  margin:12px 0 0;
  padding:8px 0 0;
  border-top:1px dashed var(--m2-line);
}
.messagerie-aide>summary{
  width:max-content;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.messagerie-aide>summary:focus-visible{outline:2px solid var(--m2-forest);outline-offset:2px}
.messagerie-aide p{margin:8px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}

/* --- La conversation --- */

.page-retour-lien{
  border-color:var(--m2-line-strong);
  color:var(--ink);
  background:var(--m2-card);
}
.page-retour-lien:hover,
.page-retour-lien:focus-visible{background:var(--m2-paper-2);border-color:var(--m2-line-strong)}

.fil-adresse{background:var(--m2-paper-2)}
.fil-notes{border-top-color:var(--m2-line)}

/*
 * REÇU ET ENVOYÉ SE LISENT COMME UNE CORRESPONDANCE. Un message reçu est un
 * panneau ordinaire ; un message envoyé porte le filet forêt et le papier
 * plus clair — la même marque que .entity-card, à la place d'une barre bleue
 * écrite en style inline.
 */
/* Les leurs : papier soutenu, filet discret ; les nôtres : papier teinté de forêt, filet forêt. Jamais de blanc (13/09/2026). */
.fil-message{margin-top:10px;background:var(--m2-message-eux);border-left:3px solid var(--m2-line-strong)}
.fil-message-sortant{
  border-left:3px solid var(--m2-forest);
  background:var(--m2-message-nous);
}
.fil-message>details>summary{cursor:pointer;list-style-position:outside}
.fil-message>details>summary:focus-visible{outline:2px solid var(--m2-forest);outline-offset:2px}
.fil-texte{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:inherit;
}
.fil-note-message{margin-top:0}
.fil-pieces{margin-bottom:0}

/* La zone de réponse : un titre, l'éditeur, le bouton — sans cadre en plus. */
.fil-reponse h3{margin:0 0 8px}
.fil-reponse .fil-a{margin-top:0}
.fil-reponse .form-envoi{margin-top:10px}
.fil-transfert{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.fil-transfert>summary{cursor:pointer;font-weight:800;color:var(--primary-dark)}

/* Les dernieres marges qui vivaient en style inline sur les deux pages. */
.fin-panneau{margin-bottom:0}
.sans-marge{margin:0}
.titre-panneau{margin-top:0}
.tache-proposition h3{margin:0 0 8px}
.ecrire-participant p:last-child{margin-bottom:0}

/*
 * LA PHOTO D'UNE PERSONNE DEPUIS MACHINA (13/09/2026) : le rond de cadrage est
 * l'avatar tel qu'il sera vu, en grand ; on y tire l'image au doigt ou à la
 * souris. Variables seulement.
 */
.portrait-panneau h3{margin-top:0}
.portrait-actuel{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.portrait-actuel img{width:144px;height:144px;border-radius:50%;border:1px solid var(--m2-line);background:var(--m2-paper-2);object-fit:cover}
.cadrage{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px}
.cadrage-toile{width:256px;height:256px;border-radius:50%;border:1px solid var(--m2-line-strong);background:var(--m2-paper-2);cursor:grab;touch-action:none;flex:0 0 auto}
.cadrage-toile:active{cursor:grabbing}
.cadrage-reglages{display:grid;gap:8px;min-width:260px;max-width:420px;flex:1 1 260px}
.cadrage-reglages label{display:grid;gap:4px;font-size:13px}
.cadrage-reglages input[type=range]{width:100%}
.trombi-photo-lien{margin-left:auto;font-size:12px;white-space:nowrap}