*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      /*font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 14px;
      background: #E8EEF7;
      color: #1A2B42;*/
      display: flex;
      flex-direction: column;
      min-height: 100%;
	  overflow-y: auto;
    }
	
	@media (max-width: 1201px) {
	html,body {
		background-color: #fff!important;
	}
}

    :root {
      --blue:    #1E4D8C;
      --blue-md: #3B6FC4;
      --blue-lt: #EBF0FA;
      --blue-bd: #B8CCEC;
      --muted:   #5A6E8A;
      --border:  #D4DDE8;
      --white:   #FFFFFF;

      /* Hauteur d'une ligne CDR : padding 4px + 4px + line-height ~20px = 28px */
      --cdr-row-h: 28px;
      /* Hauteur totale du CDR :
         titre section (26px) × 2
         + lignes charges (6 × 28px = 168px)
         + lignes produits (4 × 28px = 112px)
         + 2 totaux (28px × 2 = 56px)
         + en-têtes colonnes (30px × 2 = 60px)
         = 448px  — on ajoute le titre "Compte de résultat" (24px) + padding (22px)
         Total CDR wrap ≈ 494px  */
    }

    /* ════════════════════════════════════════════
       CONTENEUR PRINCIPAL — commun à exercise,
       result_type et result_amount
       ════════════════════════════════════════════ */
    .main-constrained {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
	  margin-top:30px;
    }
	
	main.screen {
		margin-top:30px;
	}

    /* ── Bandeau haut compact (question / saisie) ─ */
    .top-strip {
      /*background: var(--blue-lt);
      border-bottom: 1.5px solid var(--blue-bd);*/
      padding: 10px 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
      flex-wrap: wrap;
	  justify-content: center;
    }

    .strip-text  { color:#1b8278; }
    .strip-label { font-weight: 600;line-height: 1.3;color:#1b8278; }
    .strip-hint  { font-size: .9rem; margin-top: 1px;color:#1b8278; }

    .strip-amount { font-size: 1rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;color:#1b8278; }
    .strip-ask    { font-size: 1rem; white-space: nowrap; flex-shrink: 0;color:#1b8278; }
    .strip-form   { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

    .strip-input {
      width: 130px;
      font: 700 1.1rem/1 inherit;
      text-align: center;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1.5px solid var(--blue-bd);
      background: var(--white); color: #000; outline: none;
      -moz-appearance: textfield;
    }
    .strip-input:focus { border-color: var(--blue-md); }
    .strip-input::-webkit-outer-spin-button,
    .strip-input::-webkit-inner-spin-button { -webkit-appearance: none; }
    .strip-unit { font-size: .78rem; color: var(--muted); }

    /* ════════════════════════════════════════════
       COMPTE DE RÉSULTAT — taille fixe et stable
       ════════════════════════════════════════════ */
    .cdr-wrap {
      /* Prend tout l'espace restant mais ne déborde pas */
      height:300px;
      display: flex;
      flex-direction: column;
      padding: 10px 18px 12px;
      overflow: hidden;
	  margin-bottom:50px;
    }

    .cdr-title {
      font-weight: 700; color:#243C7E;text-transform: uppercase;
      margin-bottom: 7px; flex-shrink: 0;
	  text-align:center;
    }

    /* Grille 2 colonnes égales — même largeur à toutes les étapes */
    .cdr-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      flex: 1; min-height: 0;
      overflow: hidden;
    }

    .cdr-col {
      background: var(--white);
      border: 1px solid var(--blue-bd);
      border-radius: 10px;
      display: flex; flex-direction: column;
      overflow: hidden;
      /* Hauteur contrainte par le parent flex */
    }

    .cdr-col-head {
      font-weight: 700;
      letter-spacing: .06em; color: #243C7E;text-align:center;
      padding: 6px 10px; flex-shrink: 0;
    }
    .cdr-col.charges  .cdr-col-head { background: #b4efe9; }
    .cdr-col.produits .cdr-col-head { background: #b4efe9; }

    .cdr-body {
      flex: 1;
      /* Pas de scroll : la hauteur est fixée par les placeholders */
      padding: 0 10px;
    }

    /* Ligne réelle */
    .cdr-row {
      display: flex; justify-content: space-between; align-items: center;
      gap: 6px;
      height: var(--cdr-row-h);
      border-bottom: 1px dotted var(--border);
      font-size: .9rem;
    }
    .cdr-row:last-child { border-bottom: none; }

    /* Animation uniquement sur la dernière ligne ajoutée */
    .cdr-row[data-new="1"] { animation: fadein .3s ease; }

    .cdr-row-lbl { color: #1A2B42; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cdr-row-amt { font-weight: 700; color: var(--blue); white-space: nowrap; }

    /* Ligne placeholder (vide) */
    .cdr-placeholder .cdr-row-amt { color: var(--border); font-weight: 400; }
    .cdr-placeholder .cdr-row-lbl { color: var(--border); }

    /* Pied de colonne (total) */
    .cdr-foot {
      border-top: 1.5px solid var(--blue-bd);
      padding: 5px 10px;
      display: flex; justify-content: space-between;
      font-weight: 700;
      color: #243C7E; background: #b4efe9;
      flex-shrink: 0;
      height: var(--cdr-row-h);
      align-items: center;
    }
    /* Total non encore disponible */
    .cdr-foot .cdr-tot-placeholder { color: var(--border); font-weight: 400; }

	.top-strip.end {
		flex-direction: column;
	}
	.top-strip.end .strip-form {
		display:none;
	}

	button.boutorange {padding:8px;font-family: inherit;}

    /* ════════════════════════════════════════════
       MODALE
       ════════════════════════════════════════════ */
  .overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.05);
  z-index: 200;
  align-items: center; justify-content: center;
  align-items: flex-start;
  padding-top: 80px;
}
.overlay.open { display: flex; }

.modala {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #999;
  padding: 16px;
  max-width: 400px; width: 90%;
  box-shadow: 0 12px 40px rgba(10,25,50,.22);
  animation: popin .2s ease;
}
.modala-icon { flex-shrink: 0; }
.modala-msg {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem; line-height: 1.7;
  padding: 10px 13px; border-radius: 8px; margin-bottom: 14px;
  color: #243C7E;
}

.modala-close {
  display: block;
  margin-left: auto;
  padding: 5px 20px; border: none;
  border-radius: 15px;
  background: #F49521; color: #243C7E;
  font-family: "Century Gothic", "Avenir", "Segoe UI", Roboto, sans-serif;
  font-weight: 600; font-size: 1rem;
  cursor: pointer; transition: background .13s;
}
.modala-close:hover { background: #f2c6a2; }

    /* ════════════════════════════════════════════
       ANIMATIONS & RESPONSIVE
       ════════════════════════════════════════════ */
    @keyframes fadein { from { opacity:0; transform:translateY(-3px) } to { opacity:1; transform:translateY(0) } }
    @keyframes popin  { from { opacity:0; transform:scale(.93) }       to { opacity:1; transform:scale(1) } }

    @media (max-width: 560px) {
      body        { overflow: auto; }
      .top-strip  { /*flex-direction: column; align-items: flex-start; gap: 6px; */}
      .btn-row    { flex-direction: column; }
      .card       { padding: 22px 16px; }
    }
	@media (max-width: 725px) {
      .cdr-grid   { grid-template-columns: 1fr; }
	  .cdr-wrap   { height: auto; }
    }
	
	.footer {
		margin-top:auto;
	}