:root{
    --cream:      #F7F1E3;
    --cream-alt:  #EFE6CE;
    --white:      #FFFFFF;
    --olive:      #3E4A2C;
    --olive-dark: #2E3821;
    --olive-mid:  #5F6E44;
    --olive-pale: #E1E6CE;
    --gold:       #B9945C;
    --ink:        #2B2A22;
    --ink-soft:   #6B6656;
    --radius: 2px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  body{
    margin:0;
    background:var(--cream-alt);
    color:var(--ink);
    font-family:'Lora', serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,h4{ font-family:'Fraunces', serif; color:var(--olive); }
  a{ color:var(--olive-mid); }
  :focus-visible{ outline:2px solid var(--olive); outline-offset:3px; }

  .canvas{ max-width:900px; margin:0 auto; padding:0 20px 80px; }

  /* ---------- top bar (screen only) ---------- */
  .topbar{
    position:sticky; top:0; z-index:20;
    background:rgba(247,241,227,0.94); backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(185,148,92,0.35);
  }
  .topbar-inner{
    max-width:900px; margin:0 auto; padding:14px 20px;
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  }
  .topbar img.logo{ width:40px; height:40px; flex:none; }
  .topbar-title{ font-family:'Fraunces', serif; font-weight:600; font-size:1rem; color:var(--olive); margin-right:auto; }
  .topbar-title span{ display:block; font-family:'Lora', serif; font-weight:400; font-size:.76rem; color:var(--ink-soft); }

  .progress-wrap{ display:flex; align-items:center; gap:10px; }
  .progress-bar{ width:120px; height:7px; border-radius:30px; background:rgba(62,74,44,0.15); overflow:hidden; }
  .progress-fill{ height:100%; border-radius:30px; background:linear-gradient(90deg, var(--gold), var(--olive)); transition:width .25s ease; width:0%; }
  .progress-text{ font-size:.78rem; color:var(--olive-dark); font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    font-family:'Lora', serif; font-weight:700; font-size:.85rem;
    letter-spacing:.01em; text-decoration:none; cursor:pointer;
    padding:11px 20px; border-radius:var(--radius); border:1px solid transparent;
    transition:transform .15s ease, background-color .15s ease;
    line-height:1.4;
  }
  .btn svg{ width:15px; height:15px; flex:none; }
  .btn-primary{ background:var(--olive); color:var(--cream); }
  .btn-primary:hover{ background:var(--olive-dark); transform:translateY(-1px); }
  .btn-outline{ background:transparent; color:var(--olive); border-color:var(--olive); }
  .btn-outline:hover{ background:var(--olive-pale); }
  .btn-text{ background:none; border:0; color:var(--olive-mid); font-size:.78rem; text-decoration:underline; padding:4px; cursor:pointer; }

  /* ---------- intro ---------- */
  .intro{ padding:40px 0 8px; }
  .intro .eyebrow{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 12px; }
  .intro h1{ font-size:clamp(1.7rem, 4vw, 2.35rem); margin:0 0 14px; line-height:1.18; }
  .intro p{ color:var(--ink-soft); max-width:64ch; margin:0 0 10px; font-size:.98rem; }
  .intro-actions{ display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 4px; }

  .howto{
    background:var(--olive-pale); border-radius:var(--radius); padding:16px 20px;
    margin:22px 0 0; font-size:.88rem; color:var(--olive-dark); display:flex; gap:12px; align-items:flex-start;
  }
  .howto svg{ width:20px; height:20px; flex:none; margin-top:1px; stroke:var(--olive); }
  .howto strong{ color:var(--olive); }

  /* ---------- master info panel ---------- */
  .master-panel{
    background:var(--white); border:1px solid var(--gold); border-radius:var(--radius);
    padding:26px clamp(18px,4vw,34px); margin:28px 0 44px;
  }
  .master-panel h2{ font-size:1.15rem; margin:0 0 4px; }
  .master-panel > p{ margin:0 0 18px; font-size:.86rem; color:var(--ink-soft); }
  .field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
  .field{ display:flex; flex-direction:column; gap:5px; }
  .field.full{ grid-column:1 / -1; }
  .field label{ font-size:.76rem; letter-spacing:.02em; color:var(--ink-soft); }
  .field input, .field select{
    font-family:inherit; font-size:16px; color:var(--ink);
    background:var(--cream); border:1px solid #DCD0AE; border-radius:var(--radius);
    padding:9px 11px; width:100%;
  }

  /* ---------- document pages ---------- */
  .doc-page{
    background:var(--white); border:1px solid var(--gold); border-radius:var(--radius);
    padding:38px clamp(18px,4.5vw,50px) 0; margin:0 0 30px; position:relative;
  }
  .doc-page-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:22px; }
  .doc-page-head .doc-num{
    font-family:'Fraunces', serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--gold); font-weight:700;
  }
  .doc-page-head h2{ font-size:1.3rem; margin:0; }
  .doc-page h3{ font-size:1.02rem; margin:20px 0 8px; }
  .doc-page p{ margin:0 0 9px; font-size:.94rem; }
  .doc-page ul.legal-list, .doc-page ol.legal-list{ margin:0 0 14px; padding-left:22px; font-size:.94rem; }
  .doc-page ul.legal-list li, .doc-page ol.legal-list li{ margin-bottom:6px; }
  .doc-page .lede{ color:var(--ink-soft); }

  .blank{
    font-family:'Lora', serif; font-size:16px; color:var(--ink);
    background:transparent; border:0; border-bottom:1.3px dotted var(--olive-mid);
    padding:2px 3px; min-width:10ch;
  }
  .blank:focus{ outline:none; border-bottom-style:solid; border-bottom-color:var(--olive); background:var(--olive-pale); }
  .blank.wide{ min-width:100%; width:100%; display:block; margin-top:4px; }
  .blank.name{ min-width:26ch; }
  .blank.short{ min-width:9ch; }

  .fiche-table{
    display:grid; grid-template-columns:1fr; gap:14px 22px;
    border:1px solid #DCD0AE; border-radius:var(--radius); padding:20px; margin:0 0 20px;
    background:var(--cream);
  }
  @media (min-width:560px){ .fiche-table{ grid-template-columns:1fr 1fr; } }
  .fiche-table .field.full{ grid-column:1 / -1; }

  .choice-row{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 12px; }
  .choice-pill{
    position:relative; display:flex; align-items:flex-start; gap:9px;
    background:var(--cream); border:1px solid #DCD0AE; border-radius:var(--radius);
    padding:11px 14px; cursor:pointer; font-size:.88rem; flex:1 1 200px;
  }
  .choice-pill:has(input:checked){ border-color:var(--olive); background:var(--olive-pale); }
  .choice-pill input{ margin-top:2px; accent-color:var(--olive); flex:none; }
  .choice-pill .amount{ display:block; font-size:.78rem; color:var(--ink-soft); margin-top:2px; font-variant-numeric:tabular-nums; }

  .check-item{ display:flex; align-items:flex-start; gap:9px; margin:0 0 9px; font-size:.9rem; }
  .check-item input{ margin-top:3px; accent-color:var(--olive); flex:none; }

  /* ---------- file upload rows, nested under a check-item ---------- */
  .upload-item{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin:-3px 0 14px 27px; padding:9px 12px;
    background:var(--cream); border:1px dashed #DCD0AE; border-radius:var(--radius);
  }
  .upload-item input[type="file"]{
    font-family:inherit; font-size:.8rem; color:var(--ink-soft); max-width:100%;
  }
  .upload-item input[type="file"]::file-selector-button{
    font-family:inherit; font-size:.78rem; font-weight:600; color:var(--olive);
    background:var(--olive-pale); border:1px solid var(--olive-mid); border-radius:var(--radius);
    padding:6px 12px; margin-right:10px; cursor:pointer;
  }
  .upload-item input[type="file"]::file-selector-button:hover{ background:var(--white); }
  .upload-item .upload-hint{ font-size:.74rem; color:var(--ink-soft); }
  .upload-item .upload-name{ font-size:.78rem; color:var(--olive-dark); font-weight:600; }

  .table-grid{ width:100%; border-collapse:collapse; margin:0 0 18px; font-size:.82rem; }
  .table-grid th, .table-grid td{ border:1px solid #DCD0AE; padding:4px 10px; text-align:left; }
  .table-grid th{ background:var(--olive-pale); font-weight:700; color:var(--olive-dark); white-space:nowrap; }
  .table-grid input{
    width:100%; border:0; background:transparent; font-family:inherit; font-size:16px;
    padding:2px; border-bottom:1px dotted var(--olive-mid);
  }
  .table-wrap{ overflow-x:auto; }
  .table-wrap.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
  .table-wrap.two-col .table-grid{ margin-bottom:0; }
  .table-grid .eche-date{ display:inline; font-size:.72rem; font-weight:400; color:var(--ink-soft); margin-left:6px; }
  @media (max-width:640px){
    .table-wrap.two-col{ grid-template-columns:1fr; gap:18px 0; }
    /* Tableau des chèques sur téléphone : les 4 colonnes tiennent dans la
       largeur (avant, « Banque » était coupée et il fallait faire défiler). */
    .table-wrap.two-col > *{ min-width:0; }
    .table-grid{ table-layout:fixed; width:100%; min-width:0; }
    .table-grid th, .table-grid td{ padding:4px 5px; }
    .table-grid th{ font-size:.66rem; white-space:normal; line-height:1.25; vertical-align:bottom; }
    .table-grid th:nth-child(1){ width:28%; }
    .table-grid th:nth-child(2){ width:22%; }
    .table-grid th:nth-child(3){ width:25%; }
    .table-grid th:nth-child(4){ width:25%; }
    .table-grid td:first-child{ font-size:.8rem; line-height:1.25; }
    .table-grid .eche-date{ display:block; margin-left:0; }
    .table-grid .eche-date .sep{ display:none; }
    .table-grid input{ min-width:0; padding:2px 0; }
  }

  .reglement-total{
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px;
    margin:0 0 14px; padding:10px 14px; border:1px solid #DCD0AE; border-radius:8px;
    background:var(--olive-pale); font-size:.9rem;
  }
  .reglement-total .rt-val{ font-family:'Fraunces', serif; font-size:1.15rem; font-weight:600; font-variant-numeric:tabular-nums; }
  .reglement-total .rt-msg{ flex-basis:100%; font-size:.8rem; color:var(--ink-soft); }
  .reglement-total.is-ok{ border-color:var(--olive); }
  .reglement-total.is-ok .rt-val{ color:var(--olive); }
  .reglement-total.is-off{ border-color:#B4472F; background:#FBEDE8; }
  .reglement-total.is-off .rt-val, .reglement-total.is-off .rt-msg{ color:#8E2F1B; }
  .approval label.lu input:disabled{ cursor:not-allowed; opacity:.5; }
  .callout-box{
    background:var(--olive-pale); border-left:3px solid var(--gold); border-radius:var(--radius);
    padding:12px 16px; margin:0 0 18px; font-size:.85rem; color:var(--olive-dark);
  }

  /* ---------- per-page approval footer ---------- */
  .approval{
    margin:30px calc(-1 * clamp(18px,4.5vw,50px)) 0; padding:18px clamp(18px,4.5vw,50px);
    background:var(--olive-pale); border-top:1px solid var(--gold);
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    border-radius:0 0 1px 1px;
  }
  .approval label.lu{
    display:flex; align-items:center; gap:9px; font-size:.88rem; font-weight:600; color:var(--olive-dark); cursor:pointer;
  }
  .approval label.lu input{ width:18px; height:18px; accent-color:var(--olive); }
  .approval .sig-field{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-soft); flex:1 1 220px; }
  .approval .sig-field input{
    flex:1; font-family:'Fraunces', serif; font-style:italic; font-size:1rem; color:var(--olive-dark);
    background:var(--white); border:1px solid #DCD0AE; border-radius:var(--radius); padding:6px 10px;
  }
  .approval .page-of{ font-size:.72rem; color:var(--ink-soft); letter-spacing:.05em; white-space:nowrap; }

  /* ---------- footer note under each page (matches "ACADEMIE MTJ AURA / Page X sur 12") ---------- */
  .doc-foot{
    display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink-soft);
    letter-spacing:.03em; padding:10px clamp(18px,4.5vw,50px) 14px; margin-top:0;
  }

  /* ---------- closing engagement + final actions ---------- */
  .closing-actions{
    background:var(--olive-dark); color:var(--cream); border-radius:var(--radius);
    padding:34px clamp(20px,4.5vw,44px); text-align:center; margin:8px 0 40px;
  }
  .closing-actions h2{ color:var(--cream); font-size:1.4rem; margin:0 0 10px; }
  .closing-actions p{ color:rgba(247,241,227,.82); max-width:56ch; margin:0 auto 22px; font-size:.92rem; }
  .closing-actions .btn-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .closing-actions .btn-outline{ color:var(--cream); border-color:rgba(247,241,227,.6); }
  .closing-actions .btn-outline:hover{ background:rgba(247,241,227,.1); }
  .closing-actions .btn[disabled]{ opacity:.6; cursor:wait; }
  .send-status{
    margin:18px auto 0; max-width:52ch; font-size:.86rem; min-height:1.4em;
  }
  .send-status[data-state="ok"]{ color:#BFE3B0; }
  .send-status[data-state="error"]{ color:#F2B9AE; }
  .send-status[data-state="sending"]{ color:rgba(247,241,227,.82); }
  .send-alt{ font-size:.82rem !important; margin-top:14px !important; }
  .link-btn{
    background:none; border:0; padding:0; margin:0; font:inherit; cursor:pointer;
    color:var(--gold); text-decoration:underline; text-underline-offset:2px;
  }
  .link-btn:hover, .link-btn:focus-visible{ color:var(--cream); }
  .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  /* Pendant la construction du PDF : le document est mis en forme comme à
     l'impression, sans les éléments d'écran. */
  body.export-pdf .no-print{ display:none !important; }
  body.export-pdf .doc-page{ border:none; border-radius:0; box-shadow:none; }

  footer.site-foot{ text-align:center; font-size:.82rem; color:var(--ink-soft); padding:10px 0 30px; }
  footer.site-foot a{ color:var(--olive-mid); }
  footer.site-foot .copy-btn{
    display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
    width:22px; height:22px; margin:0 2px; padding:0;
    background:transparent; border:1px solid rgba(46,56,33,.28); border-radius:var(--radius);
    color:var(--ink-soft); cursor:pointer;
    transition:background-color .18s ease, color .18s ease, border-color .18s ease;
  }
  footer.site-foot .copy-btn:hover, footer.site-foot .copy-btn:focus-visible{ color:var(--olive); border-color:var(--olive); background:var(--olive-pale); }
  footer.site-foot .copy-btn svg{ width:12px; height:12px; }
  footer.site-foot .copy-btn .ci-check{ display:none; }
  footer.site-foot .copy-btn.copied{ color:var(--olive); border-color:var(--olive); }
  footer.site-foot .copy-btn.copied .ci-copy{ display:none; }
  footer.site-foot .copy-btn.copied .ci-check{ display:block; }

  /* ---------- print ---------- */
  @media print{
    .no-print{ display:none !important; }
    body{ background:#fff; }
    .canvas{ max-width:none; padding:0; }
    .doc-page{
      border:none; border-radius:0; padding:0; margin:0;
      page-break-after:always; break-after:page;
    }
    .doc-page:last-of-type{ page-break-after:auto; break-after:auto; }
    .approval{ margin:24px 0 0; background:#fff; border-top:1px solid #999; }
    .master-panel{ page-break-after:always; break-after:page; border:none; padding:0; }
    .blank{ border-bottom-style:solid; }
    a{ color:inherit; text-decoration:none; }
  }

  @media (max-width:640px){
    .field-grid{ grid-template-columns:1fr; }
    .approval{ flex-direction:column; align-items:stretch; }
    .doc-page-head{ flex-direction:column; align-items:flex-start; gap:4px; }
  }