/* Police Playfair Display hébergée sur le site : déposez PlayfairDisplay.woff2 (ou .ttf) dans le dossier fonts/.
   Sans ce fichier, le navigateur utilise Georgia (voir README). */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay.woff2') format('woff2'), url('fonts/PlayfairDisplay.ttf') format('truetype');
  font-weight: 400 900; font-style: normal; font-display: swap;
}

  :root {
    --sable: #f3e5c8;
    --creme: #fbf4e2;
    --terre: #a4512a;
    --terre-fonce: #5e3219;
    --turquoise: #2b9a8f;
    --turquoise-fonce: #1d6f67;
    --sauge: #8a9a6b;
    --nuit: #3a271a;
    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 1.5rem 1rem 3rem;
    font-family: Georgia, 'Times New Roman', serif; color: var(--nuit);
    background-color: #5a3820;
    background-image: radial-gradient(rgba(255,220,170,.07) 1px, transparent 1px), radial-gradient(rgba(0,0,0,.12) 1px, transparent 1px);
    background-size: 14px 14px, 22px 22px; background-position: 0 0, 7px 9px;
  }

  /* ---- Cadre parchemin ---- */
  .page {
    max-width: 860px; margin: 9px auto 0; overflow: hidden;
    background: var(--sable); border: 3px solid var(--terre-fonce); border-radius: 6px;
    box-shadow: 0 0 0 6px var(--turquoise-fonce), 0 0 0 9px var(--terre-fonce), 0 14px 30px rgba(0,0,0,.55);
  }
  .contenu { padding: 1.5rem 1.6rem 1.8rem; }

  /* ---- Bandes en zigzag (motif tissé) ---- */
  .bande {
    height: 28px; background-color: var(--terre);
    background-image:
      linear-gradient(135deg, var(--creme) 25%, transparent 25%),
      linear-gradient(225deg, var(--creme) 25%, transparent 25%),
      linear-gradient(315deg, var(--creme) 25%, transparent 25%),
      linear-gradient(45deg,  var(--creme) 25%, transparent 25%);
    background-size: 28px 28px;
    background-position: -14px 0, -14px 0, 0 0, 0 0;
    border-top: 4px solid var(--turquoise); border-bottom: 4px solid var(--turquoise);
  }

  /* ---- Bannière ---- */
  .banniere { text-align: center; padding: 1.2rem 1rem 1rem; background: linear-gradient(var(--terre-fonce), #47260f); color: var(--creme); }
  .banniere strong { display: block; font-family: var(--serif); font-weight: 800; font-size: clamp(1.3rem, 4vw, 1.9rem); letter-spacing: .12em; text-transform: uppercase; color: #f6d9a0; text-shadow: 0 2px 3px rgba(0,0,0,.6); }
  .banniere small { display: block; margin-top: .35rem; font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; color: #bfe3da; }
  .banniere .nat { font-size: 1.2rem; margin: 0 .7rem; }
  .nature { text-align: center; padding: .6rem; font-size: 1.3rem; letter-spacing: .9rem; background: linear-gradient(#47260f, var(--terre-fonce)); }

  /* ---- Titres, liens, messages ---- */
  h1, h2 { font-family: var(--serif); color: var(--terre-fonce); }
  h1 { margin: .2rem 0 .6rem; font-size: 1.6rem; }
  h2 { margin: 1.6rem 0 .4rem; font-size: 1.25rem; padding-bottom: .3rem; border-bottom: 2px dotted #b98b5e; }
  h2::before { content: "❖ "; color: var(--turquoise); }
  a { color: var(--turquoise-fonce); font-weight: 700; }
  a:hover { color: var(--terre); }
  .ok  { background: #e2ead2; border: 2px solid var(--sauge); color: #2f4a1f; padding: .6rem .9rem; border-radius: 4px; }
  .err { background: #f6dccd; border: 2px solid #c0472b; color: #7a2410; padding: .6rem .9rem; border-radius: 4px; }

  /* ---- Formulaires ---- */
  label { display: block; margin-top: .9rem; font-weight: 700; color: var(--terre-fonce); letter-spacing: .03em; }
  input[type=text], input[type=url], input[type=password], textarea {
    width: 100%; margin-top: .25rem; padding: .6rem; font-size: 1rem; font-family: inherit; color: var(--nuit);
    background: var(--creme); border: 2px solid #b98b5e; border-radius: 3px;
  }
  input:focus, textarea:focus { outline: none; border-color: var(--turquoise); box-shadow: 0 0 0 3px rgba(43,154,143,.3); }
  button {
    margin-top: 1rem; padding: .6rem 1.3rem; cursor: pointer;
    font-family: var(--serif); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--creme); background: linear-gradient(#c0643a, var(--terre));
    border: 2px solid var(--terre-fonce); border-radius: 3px;
    box-shadow: 0 2px 0 var(--terre-fonce), 0 4px 6px rgba(0,0,0,.3);
  }
  button:hover { background: linear-gradient(#d07a4a, #b05a30); }
  button:active { transform: translateY(1px); }

  .haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
  .haut button { margin: 0; background: linear-gradient(#3aa99d, var(--turquoise-fonce)); }

  /* ---- Liste des liens ---- */
  table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
  td { padding: .65rem .5rem; border-bottom: 2px dotted #b98b5e; vertical-align: top; }
  tr:hover td { background: rgba(43,154,143,.09); }
  td strong { color: var(--terre-fonce); }
  td strong::before { content: "◆ "; color: var(--turquoise); font-size: .8em; }
  td.actions { white-space: nowrap; text-align: right; }
  td form { display: inline; }
  td button { margin: 0 0 0 .4rem; padding: .3rem .7rem; font-size: .7rem; background: linear-gradient(#c24b34, #8f2f1d); }
  .tag { background: var(--turquoise-fonce); color: var(--creme); font-style: normal; font-size: .72rem; letter-spacing: .05em; padding: .12rem .6rem; border-radius: 10px; margin-left: .5rem; }

  /* ---- Ajouts : partage de dépenses ---- */
  select, input[type=date] {
    width: 100%; margin-top: .25rem; padding: .6rem; font-size: 1rem; font-family: inherit; color: var(--nuit);
    background: var(--creme); border: 2px solid #b98b5e; border-radius: 3px;
  }
  select:focus, input[type=date]:focus { outline: none; border-color: var(--turquoise); box-shadow: 0 0 0 3px rgba(43,154,143,.3); }
  input[readonly] { background: #efe2c2; }
  .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  @media (max-width: 560px) { .deux { grid-template-columns: 1fr; } }
  .etiq { margin: 1.1rem 0 0; font-weight: 700; color: var(--terre-fonce); }
  label.choix { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin-top: .45rem; color: var(--nuit); }
  label.choix input { width: auto; margin: 0; }
  .cases, .parts { margin-top: .4rem; padding: .6rem 1rem .8rem; background: var(--creme); border: 2px dotted #b98b5e; border-radius: 4px; }
  .ligne-part { display: flex; align-items: center; gap: .8rem; margin-top: .45rem; }
  .ligne-part span { flex: 1; }
  .ligne-part input { width: 9rem; margin: 0; }
  .petit { font-size: .85rem; color: #7b5b40; }
  .pos { color: #2f6b2a; font-weight: 700; }
  .neg { color: #9b2c16; font-weight: 700; }
  th { text-align: left; font-family: var(--serif); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--terre-fonce); padding: .4rem .5rem; border-bottom: 2px solid var(--terre); }
  th.droite, td.droite { text-align: right; white-space: nowrap; }
  .defile { overflow-x: auto; }
  form.inline { display: inline; }
  .tag.grand { display: inline-block; font-size: .9rem; padding: .25rem .4rem .25rem .8rem; margin: 0 .4rem .4rem 0; }
  .tag.grand form { margin-left: .2rem; }
  button.x { margin: 0; padding: 0 .35rem; font-size: 1rem; line-height: 1.2; background: none; border: none; box-shadow: none; color: var(--creme); }
  button.x:hover { background: none; color: #ffb199; }
  button.mini { margin: 0 0 0 .4rem; padding: .3rem .7rem; font-size: .7rem; }
  .propo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .8rem; margin-top: .5rem; background: var(--creme); border: 2px solid #b98b5e; border-radius: 4px; }

  input.court[type=password] { width: 11rem; display: inline-block; margin: 0 .3rem 0 0; padding: .3rem .5rem; font-size: .85rem; }
  td button.neutre { background: linear-gradient(#c0643a, var(--terre)); }

  /* ---- Accessibilité / utilitaires ---- */
  .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  [hidden] { display: none !important; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #2b9a8f; outline-offset: 2px; }
  caption { text-align: left; }
  fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  .pager { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: .8rem 0; font-size: .85rem; }

  .bandeau { background: #efe2c2; border: 2px solid #b98b5e; padding: .6rem .9rem; border-radius: 4px; font-weight: 700; color: var(--terre-fonce); }
  .rangee { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .6rem; }
  .rangee form { display: inline; }
  .rangee button.mini { margin: 0; }
  button.mini.neutre { background: linear-gradient(#3aa99d, var(--turquoise-fonce)); }
  .filtres { margin: .5rem 0 1rem; padding: .3rem 1rem .8rem; background: var(--creme); border: 2px dotted #b98b5e; border-radius: 4px; }
  .filtres button.mini { margin: .8rem .6rem 0 0; }
  details { margin-top: .4rem; }
  summary { cursor: pointer; font-weight: 700; color: var(--terre-fonce); }
  .pager a { color: var(--turquoise-fonce); }
  input[type=number] { width: 100%; margin-top: .25rem; padding: .6rem; font-size: 1rem; font-family: inherit; color: var(--nuit); background: var(--creme); border: 2px solid #b98b5e; border-radius: 3px; }
  .ligne-part label { flex: 1; margin: 0; font-weight: 400; }

  /* ---- Petits écrans : les actions passent à la ligne au lieu de forcer un défilement ---- */
  @media (max-width: 560px) {
    td.actions { white-space: normal; text-align: left; }
    td.actions form, td.actions a { display: inline-block; margin: .2rem .4rem .2rem 0; }
    input.court[type=password] { width: 100%; margin-bottom: .3rem; }
  }