:root{
    color-scheme: light;
    --cream: #F6EFE1;
    --cream-2: #EFE5D2;
    --cream-3: #E4D6BC;
    --paper: #FBF7EE;
    --ink: #1C130C;
    --ink-2: #3B2B20;
    --ink-3: #6B5545;
    --terra: #C64B1F;
    --terra-2: #9A3513;
    --moss: #556B2F;
    --moss-2: #3F5021;
    --blush: #F1C9B4;
    --blush-2: #E3A888;
    --ochre: #D79A3A;
    --edge: rgba(28,19,12,0.12);
    --edge-soft: rgba(28,19,12,0.06);
    --shadow-soft: 0 1px 2px rgba(28,19,12,0.06), 0 8px 24px rgba(28,19,12,0.06);
    --shadow-hard: 0 2px 4px rgba(28,19,12,0.08), 0 20px 48px rgba(28,19,12,0.12);
    --serif: "Fraunces", "Iowan Old Style", "Palatino", serif;
    --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
    --radius: 14px;
  }
  [x-cloak]{ display: none !important; }
  .svg-sprite{ display: none; }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:var(--sans);
    font-weight:400;
    color:var(--ink);
    background:var(--cream);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    background-image:
      radial-gradient(800px 400px at 10% -10%, rgba(198,75,31,0.08), transparent 60%),
      radial-gradient(700px 500px at 110% 10%, rgba(85,107,47,0.06), transparent 60%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-attachment: fixed, fixed, fixed;
  }
  button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
  input,textarea,select{font-family:inherit;color:inherit}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--terra);color:var(--paper)}

  /* ============ APP SHELL ============ */
  .app{
    display:grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    min-height:100vh;
    gap:0;
  }
  .sidebar{
    grid-row: 1 / 3;
    background: linear-gradient(180deg, #1C130C 0%, #2A1D14 100%);
    color:#F1E7D5;
    padding: 30px 22px;
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    border-right:1px solid rgba(255,255,255,0.04);
    overflow:hidden;
  }
  .sidebar::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(300px 200px at 20% 10%, rgba(198,75,31,0.22), transparent 60%),
      radial-gradient(400px 400px at 80% 110%, rgba(215,154,58,0.10), transparent 60%);
    pointer-events:none;
  }
  .brand{
    position:relative;
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-bottom: 42px;
  }
  .brand-mark{
    font-family:var(--serif);
    font-weight:500;
    font-style:italic;
    font-size:36px;
    letter-spacing:-0.02em;
    font-variation-settings:"opsz" 144, "SOFT" 100;
    color:#FBF7EE;
    line-height:1;
  }
  .brand-dot{
    width:8px;height:8px;border-radius:50%;
    background: var(--terra);
    margin-left:2px;
    margin-bottom:6px;
    box-shadow: 0 0 0 4px rgba(198,75,31,0.18);
  }
  .brand-tag{
    position:relative;
    font-size:10.5px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:rgba(241,231,213,0.55);
    margin-top:-28px;
    margin-bottom:40px;
    padding-left:2px;
  }

  .nav{position:relative;display:flex;flex-direction:column;gap:2px}
  .nav-section{
    font-size:10.5px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:rgba(241,231,213,0.4);
    padding: 22px 10px 10px;
  }
  .nav-item{
    display:flex;align-items:center;gap:12px;
    padding:11px 12px;
    border-radius:10px;
    color:rgba(241,231,213,0.78);
    font-size:14px;
    font-weight:500;
    transition:all .18s ease;
    position:relative;
  }
  .nav-item:hover{background:rgba(255,255,255,0.04);color:#FBF7EE}
  .nav-item.active{
    background: linear-gradient(180deg, rgba(198,75,31,0.22), rgba(198,75,31,0.12));
    color:#FBF7EE;
    box-shadow: inset 0 0 0 1px rgba(198,75,31,0.3);
  }
  .nav-item.active::before{
    content:"";
    position:absolute;left:-22px;top:14px;bottom:14px;width:3px;
    background:var(--terra);
    border-radius:0 3px 3px 0;
  }
  .nav-item svg{width:18px;height:18px;stroke-width:1.6;flex:none;opacity:.9}
  .nav-badge{
    margin-left:auto;
    font-size:11px;
    font-weight:600;
    padding:2px 8px;
    background:rgba(241,231,213,0.1);
    border-radius:999px;
    color:rgba(241,231,213,0.9);
  }

  .sidebar-footer{
    position:relative;
    margin-top:auto;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.06);
    display:flex;align-items:center;gap:12px;
  }
  .avatar{
    width:38px;height:38px;border-radius:50%;
    background: linear-gradient(135deg, var(--blush), var(--terra));
    display:grid;place-items:center;
    font-family:var(--serif);font-weight:600;color:#1C130C;
    font-size:15px;
    box-shadow: 0 0 0 2px rgba(241,231,213,0.2);
  }
  .me-name{font-size:13.5px;font-weight:600;color:#FBF7EE;line-height:1.2}
  .me-role{font-size:11.5px;color:rgba(241,231,213,0.55);margin-top:2px}

  /* ============ TOPBAR ============ */
  .topbar{
    grid-column:2;
    padding: 22px 44px;
    display:flex;align-items:center;gap:28px;
    border-bottom: 1px solid var(--edge-soft);
    background: rgba(246,239,225,0.7);
    backdrop-filter: blur(8px);
    position:sticky;top:0;z-index:5;
  }
  .date-block{display:flex;align-items:baseline;gap:10px}
  .date-num{
    font-family:var(--serif);
    font-size:40px;font-weight:400;line-height:1;
    font-variation-settings:"opsz" 144, "SOFT" 50;
    letter-spacing:-0.02em;
  }
  .date-text{display:flex;flex-direction:column;gap:2px;line-height:1.1}
  .date-day{
    font-family:var(--serif);font-style:italic;font-size:18px;
    font-variation-settings:"opsz" 144, "SOFT" 100;
  }
  .date-month{font-size:11.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-3)}

  .search{
    flex:1;max-width:460px;position:relative;margin-left:20px;
  }
  .search input{
    width:100%;
    height:42px;
    padding: 0 14px 0 42px;
    background: var(--paper);
    color: var(--ink);
    border:1px solid var(--edge);
    border-radius:999px;
    font-size:13.5px;
    outline:none;
    transition:all .2s ease;
    color-scheme: light;
  }
  .search input::placeholder{color:var(--ink-3)}
  .search input:focus{
    background:var(--paper);
    border-color:var(--terra);
    box-shadow: 0 0 0 4px rgba(198,75,31,0.1);
  }
  .search svg{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    width:18px;height:18px;stroke:var(--ink-3);stroke-width:1.8;fill:none;
  }
  .search kbd{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    font-family:var(--sans);font-size:10.5px;font-weight:600;
    padding:3px 8px;border-radius:6px;
    background:var(--cream-2);
    color:var(--ink-3);
    border:1px solid var(--edge);
  }
  .topbar-search-popup{
    position:absolute;left:0;right:0;top:calc(100% + 8px);
    background:var(--paper);
    border:1px solid var(--edge);
    border-radius:14px;
    box-shadow: 0 16px 36px -16px rgba(31,21,12,0.18), 0 2px 8px rgba(31,21,12,0.06);
    padding:8px;
    max-height:480px;overflow-y:auto;
    z-index:50;
  }
  .topbar-search-section + .topbar-search-section{margin-top:6px;border-top:1px solid var(--edge-soft);padding-top:6px}
  .topbar-search-label{
    font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--ink-3);padding:6px 10px 4px;
  }
  .topbar-search-row{
    display:flex;align-items:center;gap:12px;
    padding:8px 10px;border-radius:10px;
    text-decoration:none;color:var(--ink);
    transition:background .15s ease;
  }
  .topbar-search-row:hover,.topbar-search-row:focus{background:var(--cream-2);outline:none}
  .topbar-search-avatar{
    width:32px;height:32px;border-radius:50%;
    background:var(--terra);color:var(--paper);
    display:grid;place-items:center;
    font-weight:600;font-size:12px;flex-shrink:0;
  }
  .topbar-search-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
  .topbar-search-name{font-weight:600;font-size:13.5px;line-height:1.2}
  .topbar-search-sub{font-size:11.5px;color:var(--ink-3);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-search-hint{
    padding:14px 12px;font-size:13px;color:var(--ink-3);text-align:center;
  }
  .topbar-search-all{
    display:block;text-align:center;
    padding:10px;margin-top:6px;
    border-top:1px solid var(--edge-soft);
    font-size:12.5px;font-weight:600;color:var(--terra);
    text-decoration:none;
  }
  .topbar-search-all:hover{background:var(--cream-2);border-radius:10px}

  .topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
  .icon-btn{
    width:40px;height:40px;border-radius:50%;
    display:grid;place-items:center;
    border:1px solid var(--edge);
    background:rgba(251,247,238,0.6);
    transition: all .18s ease;
    position:relative;
  }
  .icon-btn:hover{background:var(--paper);border-color:var(--ink-3);transform:translateY(-1px)}
  .icon-btn svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.8;fill:none}
  .icon-btn .dot{
    position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
    background:var(--terra);box-shadow:0 0 0 2px var(--cream);
  }
  .btn-primary{
    display:inline-flex;align-items:center;gap:8px;
    padding: 0 18px;height:42px;
    background: var(--ink);
    color:var(--paper);
    border-radius:999px;
    font-size:13.5px;font-weight:600;
    letter-spacing:-0.005em;
    transition:all .18s ease;
    border:1px solid var(--ink);
  }
  .btn-primary:hover{background:var(--terra);border-color:var(--terra);transform:translateY(-1px)}
  .btn-primary svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
  .btn-secondary{
    display:inline-flex;align-items:center;gap:8px;
    padding: 0 16px;height:42px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink-soft, #d1d5db);
    border-radius:999px;
    font-size:13px;font-weight:500;
    letter-spacing:-0.005em;
    transition:all .18s ease;
  }
  .btn-secondary:hover{
    background: var(--paper);
    border-color: var(--ink);
    transform: translateY(-1px);
  }
  .btn-secondary svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}

  /* ============ MAIN ============ */
  main{
    grid-column:2;
    padding: 32px 44px 56px;
    display:grid;
    grid-template-columns: 360px 1fr 300px;
    gap: 32px;
    align-items:start;
  }

  /* ---- Section titles ---- */
  .section-title{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:18px;
  }
  .section-title h2{
    font-family:var(--serif);
    font-weight:400;font-style:italic;
    font-size:26px;
    letter-spacing:-0.01em;
    font-variation-settings:"opsz" 144, "SOFT" 80;
  }
  .section-title .meta{
    font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-3);
  }

  /* ============ AGENDA COLUMN ============ */
  .agenda{
    position:sticky;
    top:100px;
    background: var(--paper);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    padding: 24px 22px 20px;
    box-shadow: var(--shadow-soft);
  }
  .weekstrip{
    display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
    margin: 16px 0 24px;
    padding: 8px 0;
    border-top:1px dashed var(--edge);
    border-bottom:1px dashed var(--edge);
  }
  .weekday{
    text-align:center;
    padding:8px 0 10px;
    border-radius:8px;
    transition:all .16s ease;
    cursor:pointer;
  }
  .weekday:hover{background:var(--cream-2)}
  .weekday .d{
    font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-3);
    display:block;margin-bottom:2px;
  }
  .weekday .n{
    font-family:var(--serif);font-size:17px;font-weight:500;
    font-variation-settings:"opsz" 144;
  }
  .weekday.today{
    background:var(--ink);color:var(--paper);
  }
  .weekday.today .d{color:rgba(251,247,238,0.6)}

  .timeline{position:relative;padding-left:58px}
  .timeline::before{
    content:"";
    position:absolute;top:8px;bottom:8px;
    left:42px;width:1px;
    background: repeating-linear-gradient(180deg, var(--edge) 0 4px, transparent 4px 8px);
  }
  .appt{
    position:relative;
    margin-bottom:10px;
    padding: 12px 14px;
    border-radius:12px;
    background: var(--cream);
    border:1px solid var(--edge-soft);
    cursor:pointer;
    transition: all .18s cubic-bezier(.2,.7,.3,1);
  }
  .appt:hover{
    border-color:var(--edge);
    transform:translateX(2px);
    background:var(--cream-2);
  }
  .appt.selected{
    background:var(--ink);
    color:var(--paper);
    border-color:var(--ink);
    transform:translateX(2px);
  }
  .appt.selected .appt-meta{color:rgba(251,247,238,0.6)}
  .appt.selected::after{
    content:"";
    position:absolute;top:18px;left:-70px;
    width:16px;height:16px;border-radius:50%;
    background:var(--terra);
    box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--terra);
  }
  .appt-time{
    position:absolute;left:-58px;top:14px;
    font-family:var(--serif);
    font-size:14px;font-weight:500;
    font-variation-settings:"opsz" 144;
    color:var(--ink);
  }
  .appt-name{
    font-weight:600;font-size:14px;letter-spacing:-0.005em;
    display:flex;align-items:center;gap:6px;
  }
  .appt-meta{
    margin-top:3px;
    font-size:12px;color:var(--ink-3);
    display:flex;align-items:center;gap:8px;
  }
  .chip{
    display:inline-flex;align-items:center;gap:4px;
    padding:2px 8px;border-radius:999px;
    font-size:10.5px;font-weight:600;letter-spacing:0.03em;
    background:var(--blush);color:var(--terra-2);
  }
  .chip.moss{background: rgba(85,107,47,0.15);color:var(--moss-2)}
  .chip.terra{background:rgba(198,75,31,0.12);color:var(--terra-2)}
  .chip.grey{background:var(--cream-2);color:var(--ink-3)}
  .appt.selected .chip{background:rgba(251,247,238,0.12);color:var(--paper)}

  .appt .dot-status{
    width:8px;height:8px;border-radius:50%;display:inline-block;
    background:var(--moss);
  }
  .appt.pending .dot-status{background:var(--ochre)}
  .appt.done .dot-status{background:var(--ink-3)}
  .appt.done{opacity:0.6}
  .appt.done .appt-name{text-decoration:line-through;text-decoration-color:var(--ink-3)}

  .agenda-summary{
    margin-top:22px;
    padding: 14px 14px;
    background: var(--cream-2);
    border-radius: 12px;
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;
    text-align:center;
  }
  .agenda-summary .s{
    font-family:var(--serif);
    font-size:22px;font-weight:500;letter-spacing:-0.01em;
    font-variation-settings:"opsz" 144;
    display:block;
  }
  .agenda-summary .l{
    font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);
    margin-top:2px;display:block;
  }
  .agenda-summary .l-sub{
    font-size:11.5px; letter-spacing:0.04em; color: var(--ink-3);
    margin-top:3px; display:block; font-style: italic;
  }
  .summary-payment-breakdown{
    grid-column: 1 / -1;
    margin: 4px 0 0;
    font-size: 12px; color: var(--ink-3);
    letter-spacing: 0.04em;
  }

  /* ============ FICHE (center) ============ */
  .fiche-hero{
    position:relative;
    background: var(--paper);
    border:1px solid var(--edge);
    border-radius: var(--radius);
    overflow:hidden;
    box-shadow: var(--shadow-hard);
  }
  .fiche-header{
    position:relative;
    padding: 36px 40px 28px;
    background:
      radial-gradient(500px 240px at 20% 0%, rgba(198,75,31,0.15), transparent 60%),
      radial-gradient(400px 240px at 100% 100%, rgba(85,107,47,0.12), transparent 60%),
      linear-gradient(180deg, var(--cream-2), var(--paper));
    border-bottom:1px solid var(--edge-soft);
    display:grid;
    grid-template-columns: 156px 1fr;
    gap: 32px;
    align-items:center;
  }
  .pet-portrait{
    width:156px;height:156px;border-radius:50%;
    background-color: var(--cream-2);
    background-image: conic-gradient(from 180deg at 50% 50%, #E6BFA3, #C28060, #7A4A30, #E6BFA3);
    background-size: cover;
    background-position: center;
    display:grid;place-items:center;
    position:relative;
    box-shadow: 0 10px 30px rgba(28,19,12,0.2), inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--edge);
  }
  /* Species-hued fallback gradients when no photo is uploaded */
  .pet-portrait[data-species="cat"]{ background-image: radial-gradient(circle at 35% 30%, #F5D58A, #C89754 70%, #8E6429); }
  .pet-portrait[data-species="rabbit"]{ background-image: radial-gradient(circle at 30% 30%, #FBF7EE, #EFE5D2 70%, #C6B38B); }
  .pet-portrait[data-species="ferret"]{ background-image: radial-gradient(circle at 40% 40%, #D98A4A, #8A3E15 70%, #3B1A06); }
  .pet-portrait[data-species="other"]{ background-image: radial-gradient(circle at 35% 30%, #FFFFFF, #E8DFC9 70%, #9A8763); }
  .pet-portrait svg{width:92px;height:92px;fill:#1C130C}
  .pet-portrait img,
  .pet-portrait-sm img{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    border-radius:inherit;
    display:block;
  }
  .pet-portrait::after{
    content:"";
    position:absolute;inset:-8px;
    border-radius:50%;
    border:1px dashed var(--edge);
  }
  .pet-identity .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
    color:var(--ink-3);margin-bottom:12px;
  }
  .pet-identity .eyebrow::before{
    content:"";width:20px;height:1px;background:var(--ink-3);
  }
  .pet-identity h1{
    font-family:var(--serif);
    font-weight:400;font-style:italic;
    font-size:64px;
    letter-spacing:-0.03em;
    line-height:0.95;
    font-variation-settings:"opsz" 144, "SOFT" 80;
    margin-bottom:8px;
  }
  .pet-identity h1 .amp{
    color:var(--terra);font-style:italic;font-weight:300;
  }
  .pet-subline{
    font-size:14.5px;color:var(--ink-2);line-height:1.5;
    max-width:480px;
  }
  .pet-subline em{color:var(--ink);font-style:italic;font-family:var(--serif);font-size:15.5px}

  .pet-attrs{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    border-top:1px solid var(--edge-soft);
  }
  .pet-attrs.cols-3{ grid-template-columns: repeat(3, 1fr); }
  .attr{
    padding: 22px 20px;
    border-right:1px solid var(--edge-soft);
    position:relative;
  }
  .attr:last-child{border-right:0}
  .attr .k{
    font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-3);
    display:block;margin-bottom:8px;
  }
  .attr .v{
    font-family:var(--serif);
    font-weight:500;font-size:22px;
    letter-spacing:-0.01em;
    line-height:1.1;
    font-variation-settings:"opsz" 144;
  }
  .attr .vs{font-size:12px;color:var(--ink-3);margin-top:3px;display:block;font-family:var(--sans);font-weight:500}

  /* Tabs */
  .tabs{
    display:flex;gap:0;
    padding: 0 28px;
    border-top:1px solid var(--edge-soft);
    background:var(--cream);
  }
  .tab{
    padding: 14px 16px;
    font-size:13px;font-weight:600;
    letter-spacing:-0.005em;
    color:var(--ink-3);
    border-bottom:2px solid transparent;
    transition:all .16s ease;
    position:relative;
  }
  .tab:hover{color:var(--ink)}
  .tab.active{
    color:var(--ink);
    border-bottom-color:var(--terra);
  }
  .tab-count{
    display:inline-block;
    margin-left:6px;
    font-size:10.5px;font-weight:700;
    padding:1px 7px;border-radius:999px;
    background:var(--cream-2);color:var(--ink-3);
  }
  .tab.active .tab-count{background:var(--terra);color:var(--paper)}

  .tab-body{padding: 28px 40px 36px}

  /* Historique */
  .hist-grid{
    display:grid;
    grid-template-columns: 140px 1fr auto;
    gap: 0;
  }
  .hist-row{
    display:contents;
  }
  .hist-row > *{
    padding: 18px 0;
    border-top: 1px solid var(--edge-soft);
  }
  .hist-row:first-child > *{border-top:0;padding-top:4px}
  .hist-date{
    font-family:var(--serif);
    font-size:14px;
    font-variation-settings:"opsz" 144;
    color:var(--ink-2);
  }
  .hist-date small{
    display:block;font-family:var(--sans);font-size:11px;color:var(--ink-3);margin-top:2px;
    letter-spacing:0.12em;text-transform:uppercase;
  }
  .hist-title{
    font-size:14.5px;font-weight:600;
    letter-spacing:-0.005em;
  }
  .hist-title p{
    font-weight:400;color:var(--ink-3);font-size:13px;margin-top:4px;line-height:1.5;
    max-width:480px;
  }
  .hist-duration{
    display:inline-block;
    margin-left:10px;
    font-size:11.5px; font-weight:500;
    letter-spacing:0.04em;
    color:var(--ink-3);
    background:var(--cream-2);
    border:1px solid var(--edge-soft);
    border-radius:999px;
    padding:2px 9px;
    vertical-align:middle;
  }
  .hist-price{
    font-family:var(--serif);
    font-size:18px;font-weight:500;
    letter-spacing:-0.01em;
    font-variation-settings:"opsz" 144;
    align-self:center;
    white-space:nowrap;
  }

  /* Historique animal sur la fiche RDV */
  .appt-pet-history{
    padding: 28px 40px 32px;
    border-top: 1px solid var(--edge-soft);
  }
  .appt-pet-history .hist-head{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:14px;gap:16px;flex-wrap:wrap;
  }
  .appt-pet-history .hist-head h2{
    margin:0;font-size:18px;letter-spacing:-0.01em;
  }
  .appt-pet-history .hist-empty{
    color:var(--ink-3);font-size:13.5px;margin:0;
  }

  /* Notes card */
  .notes{
    margin-top:14px;
    padding: 22px;
    border-radius: 12px;
    background: linear-gradient(180deg, #FEF7E8, #F8ECCB);
    border: 1px solid rgba(215,154,58,0.3);
    position:relative;
  }
  .notes::before{
    content:"";
    position:absolute;top:-1px;left:24px;right:24px;height:2px;
    background: repeating-linear-gradient(90deg, var(--ochre) 0 6px, transparent 6px 10px);
    opacity:0.6;
  }
  .notes .label{
    display:inline-flex;align-items:center;gap:6px;
    font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--terra-2);
    margin-bottom:10px;font-weight:600;
  }
  .notes p{
    font-family:var(--serif);
    font-size:16px;
    font-style:italic;
    line-height:1.55;
    color:var(--ink-2);
    font-variation-settings:"opsz" 144, "SOFT" 100;
  }
  .notes p strong{color:var(--terra-2);font-style:normal;font-weight:600}

  /* ============ RIGHT RAIL ============ */
  .rail{display:flex;flex-direction:column;gap:20px;position:sticky;top:100px}
  .card{
    background:var(--paper);
    border:1px solid var(--edge);
    border-radius: var(--radius);
    padding:22px;
    box-shadow:var(--shadow-soft);
  }
  .card h3{
    font-family:var(--serif);font-weight:500;font-style:italic;
    font-size:18px;letter-spacing:-0.005em;
    margin-bottom:14px;
    font-variation-settings:"opsz" 144, "SOFT" 80;
  }
  .owner{display:flex;align-items:center;gap:12px}
  .owner-avatar{
    width:48px;height:48px;border-radius:50%;
    background: linear-gradient(135deg, var(--moss), var(--moss-2));
    display:grid;place-items:center;
    font-family:var(--serif);font-size:18px;font-weight:500;color:var(--paper);
    font-variation-settings:"opsz" 144;
  }
  .owner-info{line-height:1.35}
  .owner-name{font-weight:600;font-size:14.5px;letter-spacing:-0.005em}
  .owner-role{font-size:11.5px;color:var(--ink-3);letter-spacing:0.03em}
  .owner-contact{
    margin-top:14px;
    padding-top:14px;
    border-top:1px dashed var(--edge);
    display:flex;flex-direction:column;gap:8px;
    font-size:13px;color:var(--ink-2);
  }
  .owner-contact div{display:flex;align-items:center;gap:10px}
  .owner-contact svg{width:14px;height:14px;stroke:var(--ink-3);stroke-width:1.8;fill:none;flex:none}
  .owner-cta{
    margin-top:16px;display:flex;gap:8px;
  }
  .outline-btn{
    flex:1;
    height:36px;
    border:1px solid var(--edge);
    border-radius:10px;
    font-size:12.5px;font-weight:600;
    background:var(--cream);
    transition:all .16s ease;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
  }
  .outline-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .outline-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}

  .kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .kpi{
    padding:14px;
    background:var(--cream);
    border:1px solid var(--edge-soft);
    border-radius:10px;
    position:relative;
    overflow:hidden;
  }
  .kpi .k{
    font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-3);
  }
  .kpi .v{
    display:flex;align-items:baseline;gap:4px;margin-top:6px;
  }
  .kpi .v b{
    font-family:var(--serif);
    font-weight:500;font-size:28px;letter-spacing:-0.02em;
    font-variation-settings:"opsz" 144;
  }
  .kpi .v span{font-size:13px;color:var(--ink-3);font-weight:500}
  .kpi .d{
    display:inline-flex;align-items:center;gap:3px;margin-top:4px;
    font-size:11px;font-weight:600;color:var(--moss);
  }
  .kpi.neg .d{color:var(--terra)}
  .kpi svg.spark{
    position:absolute;right:10px;bottom:10px;width:64px;height:22px;opacity:0.5;
  }

  .quickbook{
    background: linear-gradient(180deg, var(--ink), #2A1D14);
    color:var(--paper);
    position:relative;
    overflow:hidden;
  }
  .quickbook::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(300px 180px at 100% 0%, rgba(198,75,31,0.3), transparent 60%),
      radial-gradient(300px 180px at 0% 100%, rgba(215,154,58,0.15), transparent 60%);
    pointer-events:none;
  }
  .quickbook h3{color:var(--paper)}
  .quickbook .eyebrow{
    font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
    color:rgba(251,247,238,0.55);margin-bottom:6px;
    display:block;
  }
  .quickbook p{
    font-family:var(--serif);font-style:italic;
    font-size:15px;line-height:1.4;
    color:rgba(251,247,238,0.8);
    margin:10px 0 16px;
    font-variation-settings:"opsz" 144, "SOFT" 100;
  }
  .quickbook .row{display:flex;gap:8px}
  .quickbook input[type="text"], .quickbook select{
    flex:1;
    height:36px;border-radius:10px;
    padding:0 10px;
    background: rgba(251,247,238,0.08);
    color:var(--paper);
    border:1px solid rgba(251,247,238,0.12);
    font-size:13px;
    outline:none;
  }
  .quickbook input::placeholder{color:rgba(251,247,238,0.4)}
  .quickbook input:focus, .quickbook select:focus{
    border-color: rgba(198,75,31,0.6);
    box-shadow: 0 0 0 3px rgba(198,75,31,0.18);
    background: rgba(251,247,238,0.12);
  }
  .quickbook .full{
    margin-top:12px;
    width:100%;height:42px;border-radius:10px;
    background:var(--terra);color:var(--paper);
    font-weight:700;font-size:13.5px;letter-spacing:-0.005em;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    transition:all .18s ease;
  }
  .quickbook .full:hover{background:var(--terra-2);transform:translateY(-1px)}

  /* ============ DECORATIVE ============ */
  .decor-hash{
    font-family:var(--serif);font-style:italic;
    position:absolute;top:18px;right:24px;
    font-size:13px;color:var(--ink-3);letter-spacing:0.04em;
    font-variation-settings:"opsz" 144;
  }
  .decor-hash b{color:var(--terra);font-weight:500}

  /* ============ ANIMATIONS ============ */
  @keyframes riseIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
  }
  @keyframes fadeIn{
    from{opacity:0}to{opacity:1}
  }
  .rise{animation:riseIn .6s cubic-bezier(.2,.7,.3,1) both}
  .d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.2s}
  .d4{animation-delay:.28s}.d5{animation-delay:.36s}.d6{animation-delay:.44s}
  .d7{animation-delay:.52s}.d8{animation-delay:.60s}

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1240px){
    main{grid-template-columns: 320px 1fr;gap:24px}
    .rail{grid-column: 2;flex-direction:row;position:static}
    .rail .card{flex:1}
  }
  @media (max-width: 640px){
    .app{grid-template-columns: 1fr; min-width: 0}
    .sidebar{display:none}
    .topbar{display:none}
    main{grid-template-columns:1fr;padding:20px;min-width:0}
    .rail{flex-direction:column}
    .pet-identity h1{font-size:44px}
    .fiche-header{grid-template-columns:1fr;text-align:center}
    .pet-portrait{margin:0 auto}
    .pet-attrs{grid-template-columns:1fr 1fr}
    .attr:nth-child(2){border-right:0}
    .attr:nth-child(1), .attr:nth-child(2){border-bottom:1px solid var(--edge-soft)}
    /* Agenda : conteneurs ne doivent pas s'étendre avec leur contenu (la
       .wt-grid est elle-même contrainte en max-width:100% + overflow-x:auto,
       cf. règle plus bas). NE PAS mettre overflow-x:hidden sur html/body :
       ça casse position:fixed sur iOS Safari (bug connu, cf. e6a619f). */
    .agenda, .week-pick { min-width: 0; max-width: 100%; }
  }

/* Logout button styled as inline text link */
.logout-link{background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;}

/* ── Error pages (404, 500) ── */
.error-page{min-height:100vh;display:grid;place-items:center;background:var(--cream);padding:20px}
.error-card{
  max-width:460px;text-align:center;padding:48px;
  background:var(--paper);border:1px solid var(--edge);border-radius:var(--radius);
}
.error-card h1{
  font-family:var(--serif);font-weight:400;font-style:italic;font-size:96px;
  letter-spacing:-0.03em;color:var(--terra);margin-bottom:12px;
}
.error-card p{font-size:16px;color:var(--ink-2);margin-bottom:24px}

/* ============================================================
   PAGES LISTE (Clients, Animaux, Prestations)
   ============================================================ */
.page{
  grid-column: 1 / -1;
  display:flex; flex-direction:column; gap:28px;
}
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.page-head-titles{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.page-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
}
.page-eyebrow::before{
  content:""; width:22px; height:1px; background:var(--ink-3);
}
.page-head h1{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:56px; letter-spacing:-0.025em; line-height:0.95;
  font-variation-settings:"opsz" 144, "SOFT" 80;
  color:var(--ink);
}
.page-head h1 .amp{ color:var(--terra); font-weight:300; }
.page-head-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

.page-search{ position:relative; min-width:280px; }
.page-search input{
  width:100%; height:42px; padding: 0 14px 0 42px;
  background: var(--paper); border:1px solid var(--edge);
  color: var(--ink);
  border-radius:999px; font-size:13.5px; outline:none;
  transition: all .2s ease;
  color-scheme: light;
}
.page-search input::placeholder{ color:var(--ink-3); }
.page-search input:focus{
  background:var(--paper); border-color:var(--terra);
  box-shadow: 0 0 0 4px rgba(198,75,31,0.1);
}
.page-search svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; stroke:var(--ink-3); stroke-width:1.8; fill:none;
}

/* Empty state */
.empty{
  padding: 56px 36px; text-align:center;
  background: var(--paper);
  border: 1px dashed var(--edge);
  border-radius: var(--radius);
  color: var(--ink-3);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.empty-mark{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--cream-2); color: var(--ink-3);
  margin-bottom:6px;
}
.empty-mark svg{ width:24px; height:24px; stroke:currentColor; stroke-width:1.6; fill:none; }
.empty h3{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:24px; letter-spacing:-0.01em; color:var(--ink);
  font-variation-settings:"opsz" 144, "SOFT" 80;
}
.empty p{ font-size:14px; max-width:420px; line-height:1.5; }
.empty .btn-primary{ margin-top:8px; }

/* ---- Search results sections ---- */
.search-section{ margin-top: 28px; }
.search-section + .search-section{ margin-top: 36px; }
.search-section-title{
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 14px;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}

/* ---- Cards grid (clients, animaux) ---- */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

/* === Client card === */
.client-card{
  display:flex; flex-direction:column; gap:16px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: all .22s cubic-bezier(.2,.7,.3,1);
  position:relative; overflow:hidden;
}
.client-card::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(260px 140px at 100% 0%, rgba(198,75,31,0.08), transparent 60%);
  pointer-events:none; opacity:0; transition: opacity .2s ease;
}
.client-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hard);
  border-color: var(--ink-3);
}
.client-card:hover::before{ opacity:1; }
.client-head{ display:flex; align-items:center; gap:14px; }
.avatar-lg{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  font-family:var(--serif); font-size:19px; font-weight:500;
  color: var(--paper);
  font-variation-settings:"opsz" 144;
  background: linear-gradient(135deg, var(--moss), var(--moss-2));
  box-shadow: 0 0 0 3px var(--cream), 0 4px 10px rgba(28,19,12,0.08);
}
.cards-grid > :nth-child(4n+2) .avatar-lg{ background: linear-gradient(135deg, var(--blush-2), var(--terra)); }
.cards-grid > :nth-child(4n+3) .avatar-lg{ background: linear-gradient(135deg, var(--ochre), #9A6A1F); color:var(--ink); }
.cards-grid > :nth-child(4n+4) .avatar-lg{ background: linear-gradient(135deg, #8A6A54, var(--ink-2)); }
.client-name{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:22px; letter-spacing:-0.01em; line-height:1.1;
  font-variation-settings:"opsz" 144, "SOFT" 80;
}
.client-city{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3); margin-top:6px;
}
.client-contact{
  display:flex; flex-direction:column; gap:8px;
  padding-top: 14px;
  border-top: 1px dashed var(--edge);
  font-size:13px; color:var(--ink-2);
}
.client-contact > div{ display:flex; align-items:center; gap:10px; min-width:0; }
.client-contact svg{
  width:14px; height:14px; stroke:var(--ink-3); stroke-width:1.8; fill:none; flex:none;
}
.client-contact span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.client-contact .muted{ color:var(--ink-3); font-style:italic; }

/* === Pet card === */
.pet-card{
  display:flex; flex-direction:column; gap:16px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: all .22s cubic-bezier(.2,.7,.3,1);
  position:relative; overflow:hidden;
}
.pet-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hard);
  border-color: var(--ink-3);
}
.pet-head{ display:flex; align-items:center; gap:16px; }
.pet-portrait-sm{
  width:72px; height:72px; border-radius:50%;
  position:relative; flex:none;
  display:grid; place-items:center;
  box-shadow:
    inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px var(--edge-soft),
    0 6px 14px rgba(28,19,12,0.12);
}
.pet-portrait-sm::after{
  content:""; position:absolute; inset:-6px;
  border-radius:50%; border:1px dashed var(--edge-soft);
}
.pet-portrait-sm svg{
  width:40px; height:40px; fill:var(--ink); opacity:.8;
}
.cards-grid > :nth-child(5n+1) .pet-portrait-sm{ background: conic-gradient(from 180deg at 50% 50%, #E6BFA3, #C28060, #7A4A30, #E6BFA3); }
.cards-grid > :nth-child(5n+2) .pet-portrait-sm{ background: radial-gradient(circle at 30% 30%, #FBF7EE, #EFE5D2 70%, #C6B38B); }
.cards-grid > :nth-child(5n+3) .pet-portrait-sm{ background: radial-gradient(circle at 35% 30%, #F5D58A, #C89754 70%, #8E6429); }
.cards-grid > :nth-child(5n+4) .pet-portrait-sm{ background: radial-gradient(circle at 40% 40%, #D98A4A, #8A3E15 70%, #3B1A06); }
.cards-grid > :nth-child(5n+5) .pet-portrait-sm{ background: radial-gradient(circle at 35% 30%, #FFFFFF, #E8DFC9 70%, #9A8763); }
.cards-grid > :nth-child(5n+3) .pet-portrait-sm svg,
.cards-grid > :nth-child(5n+4) .pet-portrait-sm svg{ fill: var(--paper); opacity:.88; }

.pet-name{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:26px; letter-spacing:-0.02em; line-height:1;
  font-variation-settings:"opsz" 144, "SOFT" 80;
}
.pet-name .amp{ color:var(--terra); font-weight:300; }
.pet-breed{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3); margin-top:6px;
}
.pet-facts{
  display:flex; gap:6px; flex-wrap:wrap;
  padding-top:14px;
  border-top: 1px dashed var(--edge);
}
.pet-owner-line{
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; color:var(--ink-3);
  margin-top: auto;
}
.mini-avatar{
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  background: linear-gradient(135deg, var(--cream-3), var(--blush-2));
  font-family:var(--serif); font-size:10.5px; font-weight:600;
  color: var(--ink);
}
.pet-owner-line strong{ color:var(--ink-2); font-weight:600; }

/* === Service menu (prestations) === */
.service-menu{
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.service-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 6px 28px;
  align-items:baseline;
  padding: 24px 28px;
  border-bottom: 1px solid var(--edge-soft);
  transition: background .16s ease;
  text-decoration:none; color:inherit;
}
.service-row:last-child{ border-bottom:0; }
.service-row:hover{ background: var(--cream); }
.service-row.inactive{ background: repeating-linear-gradient(45deg, transparent 0 9px, rgba(28,19,12,0.025) 9px 18px); }
.service-row.inactive .service-name, .service-row.inactive .service-price{ color:var(--ink-3); }

.service-head-line{
  display:flex; align-items:baseline; gap:12px; min-width:0;
}
.service-name{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:26px; letter-spacing:-0.015em; line-height:1.1;
  font-variation-settings:"opsz" 144, "SOFT" 80;
}
.service-leader{
  flex:1; min-width: 24px;
  border-bottom: 1px dotted var(--edge);
  transform: translateY(-6px);
}
.service-price{
  font-family:var(--serif); font-weight:500;
  font-size:26px; letter-spacing:-0.015em; white-space:nowrap;
  font-variation-settings:"opsz" 144;
  align-self: baseline;
}
.service-meta{
  grid-column: 1;
  display:flex; gap:12px; align-items:center;
  font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3);
  margin-top: 4px;
}
.service-description{
  grid-column: 1;
  font-size:13.5px; line-height:1.55; color:var(--ink-3);
  max-width: 640px;
  margin-top: 8px;
}
.inactive-badge{
  display:inline-block;
  font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--cream-2); color: var(--ink-3);
  border: 1px solid var(--edge-soft);
}

/* Stacked index = count displayed in eyebrow */
.count-pill{
  display:inline-flex; align-items:center;
  padding: 3px 10px; border-radius: 999px;
  background: var(--cream-2); color: var(--ink-3);
  font-size:11px; font-weight:600; letter-spacing:0.06em;
  border: 1px solid var(--edge-soft);
  margin-left: 2px;
}

@media (max-width: 900px){
  .page-head h1{ font-size:40px; }
  .service-row{ padding: 20px 20px; grid-template-columns: 1fr; }
  .service-row .service-price{ justify-self: flex-start; }
  .page-search{ min-width: 0; width:100%; }
  .page-head-actions{ width:100%; }
}

/* ============================================================
   PAGES DÉTAIL (fiche client, fiche animal)
   ============================================================ */
.detail-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}
.detail-main{ display:flex; flex-direction:column; gap:24px; min-width:0; }
.detail-rail{ display:flex; flex-direction:column; gap:20px; position:sticky; top:100px; }

@media (max-width: 1080px){
  .detail-layout{ grid-template-columns: 1fr; }
  .detail-rail{ position:static; flex-direction:row; }
  .detail-rail .card{ flex:1; }
}
@media (max-width: 720px){
  .detail-rail{ flex-direction:column; }
}

/* Client hero portrait (initials) */
.client-portrait{
  width:156px; height:156px; border-radius:50%;
  display:grid; place-items:center; position:relative;
  background: linear-gradient(135deg, var(--moss), var(--moss-2));
  color: var(--paper);
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: 56px; letter-spacing: -0.02em; line-height:1;
  font-variation-settings:"opsz" 144, "SOFT" 80;
  box-shadow:
    0 10px 30px rgba(28,19,12,0.2),
    inset 0 0 0 6px var(--paper),
    inset 0 0 0 7px var(--edge);
}
.client-portrait::after{
  content:""; position:absolute; inset:-8px;
  border-radius:50%; border:1px dashed var(--edge);
}
.client-portrait.variant-terra{ background: linear-gradient(135deg, var(--blush-2), var(--terra)); }
.client-portrait.variant-ochre{ background: linear-gradient(135deg, var(--ochre), #9A6A1F); color:var(--ink); }
.client-portrait.variant-ink{   background: linear-gradient(135deg, #8A6A54, var(--ink-2)); }

/* Smaller value when content is long (email, address) */
.attr .v.attr-sm{
  font-family: var(--sans);
  font-size: 14px; font-weight: 500;
  letter-spacing: 0;
  word-break: break-word;
  line-height: 1.3;
}

/* Inline action buttons in a detail hero */
.hero-actions{
  position:absolute; top:20px; right:24px;
  display:flex; gap:8px; z-index:2;
}
.hero-actions .outline-btn{ height:34px; padding: 0 14px; font-size:12px; }

/* Ruled metadata list (notes, info blocks) */
.info-block{
  background:var(--paper);
  border:1px solid var(--edge);
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: var(--shadow-soft);
}
.info-block h2{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:22px; letter-spacing:-0.01em;
  font-variation-settings:"opsz" 144, "SOFT" 80;
  margin-bottom: 14px;
}
.info-block p{
  font-size:14.5px; line-height:1.6; color:var(--ink-2);
}
.info-block .kv{
  display:grid; grid-template-columns: 120px 1fr;
  gap: 12px 18px;
  padding-top: 4px;
}
.info-block .kv dt{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3); padding-top: 3px;
}
.info-block .kv dd{
  font-size:14px; color:var(--ink-2);
}

/* Tiny stat block in the rail */
.stat-row{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:10px;
}
.stat-row .stat{
  padding: 12px; background:var(--cream);
  border:1px solid var(--edge-soft); border-radius:10px;
  text-align:center;
}
.stat-row .stat b{
  display:block;
  font-family:var(--serif); font-weight:500; font-size:22px;
  font-variation-settings:"opsz" 144; letter-spacing:-0.01em;
}
.stat-row .stat span{
  display:block; margin-top:2px;
  font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3);
}

.loyalty-line{
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 12.5px; line-height: 1.4; color: var(--ink-3);
  background: var(--cream);
  border-radius: 10px;
  border: 1px dashed var(--edge);
  text-align: center;
}
.loyalty-line.milestone{
  background: linear-gradient(180deg, #FEF7E8, #F8ECCB);
  border: 1px solid rgba(215,154,58,0.35);
  color: var(--terra-2);
  font-weight: 600;
}

/* Loyalty gauge (6-dot progress, per owner) */
.loyalty-gauge{
  display:flex; flex-direction:column; gap:10px;
}
.loyalty-head{
  display:flex; align-items:baseline; justify-content:space-between;
}
.loyalty-head .k{
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.loyalty-head .v{
  font-family: var(--serif); font-weight: 500; font-size: 30px;
  letter-spacing: -0.02em; line-height: 1;
  font-variation-settings: "opsz" 144;
}
.loyalty-dots{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.loyalty-dots .dot{
  height: 10px;
  border-radius: 999px;
  background: var(--cream-2);
  border: 1px solid var(--edge-soft);
  transition: all .18s ease;
}
.loyalty-dots .dot.filled{
  background: var(--terra);
  border-color: var(--terra);
  box-shadow: 0 0 0 2px rgba(198,75,31,0.12);
}
.loyalty-gauge.milestone .loyalty-dots .dot.filled{
  background: var(--ochre);
  border-color: var(--ochre);
  box-shadow: 0 0 0 2px rgba(215,154,58,0.2);
}
.loyalty-gauge.milestone .loyalty-head .v{ color: var(--terra-2); }

/* Crumb back link */
.crumb-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3); transition: color .16s ease;
}
.crumb-back:hover{ color:var(--ink); }
.crumb-back svg{ width:13px; height:13px; stroke:currentColor; stroke-width:1.8; fill:none; }

/* Inline actions beside page title */
.page-head .outline-btn{ height: 42px; padding: 0 18px; border-radius:999px; }

/* ============================================================
   FORMULAIRES (owner, pet, service, appointment)
   ============================================================ */
.form-card{
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  position: relative;
}
.form-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:140px;
  background:
    radial-gradient(500px 220px at 20% 0%, rgba(198,75,31,0.12), transparent 60%),
    radial-gradient(500px 220px at 100% 0%, rgba(85,107,47,0.08), transparent 60%);
  pointer-events:none;
}
.form-body{
  position:relative;
  padding: 32px 40px;
  display:flex; flex-direction:column; gap: 28px;
}
.form-section{
  display:flex; flex-direction:column; gap:18px;
  padding-top: 4px;
}
.form-section + .form-section{
  padding-top: 24px;
  border-top: 1px dashed var(--edge);
}
.form-section-head{
  display:flex; align-items:baseline; gap:12px;
}
.form-section-head h2{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:22px; letter-spacing:-0.01em;
  font-variation-settings:"opsz" 144, "SOFT" 80;
  color:var(--ink);
}
.form-section-head .step{
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-3);
  font-weight:500;
}
.form-section-head .step::before{
  content:""; display:inline-block; width:20px; height:1px;
  background:var(--ink-3); margin-right:8px; vertical-align:middle;
}

.form-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px 20px;
}
.form-grid > .field{ grid-column: span 12; }
.form-grid > .field.col-6{ grid-column: span 6; }
.form-grid > .field.col-4{ grid-column: span 4; }
.form-grid > .field.col-3{ grid-column: span 3; }

@media (max-width: 720px){
  .form-grid > .field.col-6,
  .form-grid > .field.col-4,
  .form-grid > .field.col-3{ grid-column: span 12; }
  .form-body{ padding: 24px 22px; }
}

.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > label{
  font-size:11px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3);
}
.field-label-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.field-quick-actions{ display:flex; gap:10px; }
.quick-create{
  font-size:11px; font-weight:600;
  letter-spacing:0.04em;
  color: var(--terra);
  border-bottom: 1px dashed var(--terra);
  padding: 0 1px 1px;
  transition: color .16s ease;
}
.quick-create:hover{ color: var(--terra-2); border-bottom-color: var(--terra-2); }
.field.required > label::after{
  content:" ·"; color:var(--terra); margin-left:2px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="time"],
.field input[type="search"],
.field select,
.field textarea{
  width:100%;
  padding: 0 14px;
  height: 42px;
  background: var(--cream);
  border: 1px solid var(--edge);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: all .18s ease;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: light;
}
/* Chrome autofill paints a light blue or white background — force cream + ink */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--cream) inset;
  caret-color: var(--ink);
}
.field textarea{
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}
.field select{
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B5545' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--terra);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(198,75,31,0.12);
}
/* Force readable dropdown options even in dark-mode systems */
.field select option{
  background: var(--paper);
  color: var(--ink);
}
.field select optgroup{
  background: var(--paper);
  color: var(--ink-2);
}
.field input::placeholder,
.field textarea::placeholder{ color: var(--ink-3); }
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color: var(--terra-2);
  background: #FDF4EE;
}
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus{
  box-shadow: 0 0 0 4px rgba(154,53,19,0.15);
}
.field .help{ font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.field .error{
  font-size: 12.5px;
  color: var(--terra-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.field .error::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--terra-2);
}

/* Checkbox / boolean field */
.field.boolean{
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--cream);
  border: 1px solid var(--edge-soft);
  border-radius: 10px;
}
.field.boolean > label{
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  order: 2;
  cursor: pointer;
}
.field.boolean input[type="checkbox"]{
  appearance: none;
  width: 20px; height: 20px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--paper);
  position: relative;
  cursor: pointer;
  transition: all .16s ease;
  flex: none;
}
.field.boolean input[type="checkbox"]:checked{
  background: var(--terra);
  border-color: var(--terra);
}
.field.boolean input[type="checkbox"]:checked::after{
  content:"";
  position:absolute; left:5px; top:1px;
  width:6px; height:11px;
  border: 2px solid var(--paper);
  border-top: 0; border-left: 0;
  transform: rotate(42deg);
}
.field.boolean input[type="checkbox"]:focus-visible{
  box-shadow: 0 0 0 4px rgba(198,75,31,0.12);
}

/* Non-field errors banner */
.form-errors{
  padding: 14px 18px;
  background: #FDF4EE;
  border: 1px solid rgba(154,53,19,0.3);
  border-radius: 10px;
  color: var(--terra-2);
  font-size: 13.5px;
}
.form-errors strong{ font-weight:600; }

/* Actions bar at the bottom of the form */
.form-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 40px;
  background: var(--cream);
  border-top: 1px solid var(--edge-soft);
}
.form-actions .spacer{ flex: 1; }
.form-actions .muted{
  font-size: 12px; color: var(--ink-3);
}
.form-actions a.cancel{
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-3);
  padding: 0 14px;
  height: 42px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  transition: color .16s ease;
}
.form-actions a.cancel:hover{ color: var(--ink); }

/* Visible uniquement sous 640px (voir media query plus bas). */
.form-actions-mobile { display: none; }

@media (max-width: 720px){
  .form-actions{ padding: 16px 22px; flex-direction: column-reverse; align-items: stretch; }
  .form-actions a.cancel{ justify-content: center; }
}

/* ============================================================
   AGENDA — extras (hint)
   ============================================================ */
a.weekday{ text-decoration:none; color:inherit; }
a.weekday.today{ color:var(--paper); }

.agenda-hint{
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--cream);
  border: 1px solid var(--edge-soft);
  border-radius: 10px;
  display:flex; flex-direction:column; gap:4px;
}
.hint-eyebrow{
  font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3);
}
.hint-link{
  font-family: var(--serif); font-style: italic; font-size:15px;
  font-variation-settings:"opsz" 144, "SOFT" 80;
  display:inline-flex; align-items:center; gap:6px;
  color: var(--ink);
}
.hint-link:hover{ color: var(--terra); }

/* ============================================================
   AGENDA — vue semaine complète
   ============================================================ */
.agenda.week-agenda{
  grid-column: 1 / -1;
  position: static;
  padding: 26px 28px 22px;
}

.week-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 22px;
}
.day-col{
  background: var(--cream);
  border: 1px solid var(--edge-soft);
  border-radius: 12px;
  min-height: 180px;
  display: flex; flex-direction: column;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.day-col.is-today{
  background: var(--paper);
  border-color: var(--edge);
  box-shadow: 0 2px 6px rgba(28,19,12,0.06);
}
.day-col.is-target{
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(198,75,31,0.12);
}
.day-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--edge-soft);
}
.day-label{
  display:flex; align-items:baseline; gap:8px;
  color: inherit; text-decoration:none;
}
.day-label .d{
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}
.day-label .n{
  font-family: var(--serif); font-size: 20px; font-weight: 500;
  font-variation-settings:"opsz" 144; line-height: 1;
}
.day-col.is-today .day-label .n{ color: var(--terra); }
.day-count{
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--cream-2); color: var(--ink-3);
}
.day-col.is-today .day-count{ background: var(--ink); color: var(--paper); }
.day-body{
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.day-empty{
  text-align: center; color: var(--ink-3);
  font-size: 11px; padding: 24px 0;
  font-style: italic;
}

.appt-mini{
  padding: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--edge-soft);
  border-radius: 8px;
  cursor: pointer;
  transition: all .16s ease;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: baseline;
}
.appt-mini:hover{ border-color: var(--edge); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.appt-mini .appt-time{
  font-family: var(--serif); font-size: 13px; font-weight: 500;
  font-variation-settings:"opsz" 144;
  position: static;  /* override the absolute from .appt */
}
.appt-mini .appt-body{ min-width: 0; }
.appt-mini .appt-name{
  font-size: 12.5px; font-weight: 600;
  display:flex; align-items:center; gap: 6px;
  letter-spacing: -0.005em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.appt-mini .dot-status{
  width: 6px; height: 6px; border-radius: 50%; background: var(--moss); flex: none;
}
.appt-mini.pending .dot-status{ background: var(--ochre); }
.appt-mini.done .dot-status{ background: var(--ink-3); }
.appt-mini.cancelled{ opacity: 0.55; text-decoration: line-through; text-decoration-color: var(--ink-3); }
.appt-mini .appt-meta{
  font-size: 11px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  grid-column: 2;
}

@media (max-width: 1080px){
  .week-grid{ grid-template-columns: repeat(7, minmax(110px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .day-col{ min-width: 130px; }
}
@media (max-width: 720px){
  .week-grid{
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .day-col{ min-height: auto; }
  .day-col .day-body{ min-height: 40px; }
}

/* ============================================================
   FICHE HERO — bandeau fidélité & action bar
   ============================================================ */
.loyalty-strip{
  display:flex; align-items:center; gap:12px;
  padding: 12px 28px;
  background: var(--cream);
  border-top: 1px solid var(--edge-soft);
  font-size: 13px; color: var(--ink-2);
  line-height: 1.35;
}
.loyalty-strip svg{
  width: 18px; height: 18px;
  stroke: var(--ink-3); flex: none;
}
.loyalty-strip strong{ color: var(--ink); font-weight: 600; }
.loyalty-strip.milestone{
  background: linear-gradient(180deg, #FEF7E8, #F8ECCB);
  color: var(--ink);
  border-top-color: rgba(215,154,58,0.3);
  position: relative;
}
.loyalty-strip.milestone::before{
  content:"";
  position:absolute; top:-1px; left:28px; right:28px; height:2px;
  background: repeating-linear-gradient(90deg, var(--ochre) 0 6px, transparent 6px 10px);
  opacity: 0.7;
}
.loyalty-strip.milestone svg{ stroke: var(--terra-2); }
.loyalty-strip.milestone strong{ color: var(--terra-2); }

@media (max-width: 720px){
  .loyalty-strip{ padding: 10px 20px; }
}


.fiche-actions{
  display:flex; align-items:center; gap:10px;
  padding: 14px 28px;
  background: var(--cream);
  border-top: 1px solid var(--edge-soft);
  flex-wrap: wrap;
}
.fiche-actions .spacer{ flex:1; }
.fiche-actions .inline-form{ display:inline-block; }
.fiche-actions .outline-btn{ height: 36px; padding: 0 14px; border-radius: 999px; }
.fiche-actions .outline-btn.danger{
  color: var(--terra-2);
  border-color: rgba(154,53,19,0.25);
}
.fiche-actions .outline-btn.danger:hover{
  background: var(--terra-2); color: var(--paper); border-color: var(--terra-2);
}

.status-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--cream-2); color: var(--ink-2);
  border: 1px solid var(--edge-soft);
}
.status-chip .dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3);
}
.status-chip.status-scheduled .dot{ background: var(--ochre); }
.status-chip.status-done{ background: rgba(85,107,47,0.15); color: var(--moss-2); border-color: rgba(85,107,47,0.25); }
.status-chip.status-done .dot{ background: var(--moss); }
.status-chip.status-cancelled{ background: rgba(28,19,12,0.06); color: var(--ink-3); }
.status-chip.status-cancelled .dot{ background: var(--ink-3); }
.status-chip.status-no_show{ background: rgba(198,75,31,0.1); color: var(--terra-2); border-color: rgba(198,75,31,0.25); }
.status-chip.status-no_show .dot{ background: var(--terra); }

.payment-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  background: var(--cream-2); color: var(--ink-3);
  border: 1px solid var(--edge-soft);
}
.payment-chip .dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
}
.payment-chip.payment-cash .dot{ background: var(--ochre); }
.payment-chip.payment-card .dot{ background: var(--moss); }
.payment-chip.payment-check .dot{ background: var(--terra); }
.payment-chip.payment-not_applicable{ opacity: 0.7; }

.payment-pills{
  border: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.payment-pills > legend{
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  padding: 0; margin-bottom: 4px;
}
.payment-pill-group{
  display: flex; flex-wrap: wrap; gap: 6px;
}
.payment-pill{
  position: relative;
  display: inline-flex; align-items: center;
  cursor: pointer;
}
.payment-pill input[type="radio"]{
  position: absolute; opacity: 0; pointer-events: none;
}
.payment-pill > span{
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: var(--paper); color: var(--ink-2);
  border: 1px solid var(--edge-soft);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.payment-pill:hover > span{
  background: var(--cream-2);
}
.payment-pill input[type="radio"]:checked + span{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.payment-pill input[type="radio"]:focus-visible + span{
  outline: 2px solid var(--ochre); outline-offset: 2px;
}

@media (max-width: 720px){
  .fiche-actions{ padding: 12px 20px; }
  .fiche-actions .outline-btn{ flex: 1; justify-content: center; }
}

/* ============ LOGIN ============ */
.login-page{
  background: var(--cream);
  min-height: 100vh;
  margin: 0;
}
.login-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.login-brand{
  position: relative;
  background: linear-gradient(160deg, #1C130C 0%, #2A1D14 55%, #3B2B20 100%);
  color: #F1E7D5;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.login-brand::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(480px 320px at 20% 20%, rgba(198,75,31,0.22), transparent 60%),
    radial-gradient(420px 420px at 85% 110%, rgba(215,154,58,0.12), transparent 60%);
  pointer-events: none;
}
.login-brand-inner{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 420px;
}
.login-brand .brand-mark{
  font-size: 54px;
  color: #FBF7EE;
}
.login-brand .brand-tag{
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(241,231,213,0.55);
}
.login-quote{
  margin-top: auto;
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: rgba(251,247,238,0.85);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  max-width: 420px;
  padding-top: 20px;
  border-top: 1px solid rgba(241,231,213,0.18);
}
.login-form{
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.login-form-inner{
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.login-title{
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  color: var(--ink);
}
.login-title .amp{ color: var(--terra); }
.login-subtitle{
  font-size: 14px;
  color: var(--ink-3);
  margin-top: -10px;
}
.login-fields{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.login-label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.login-label input{
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--paper);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
}
.login-label input:focus{
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(198,75,31,0.15);
}
.login-fields .btn-primary{
  margin-top: 8px;
  height: 46px;
  justify-content: center;
}
.login-fields .error{
  color: var(--terra-2);
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
}
@media (max-width: 900px){
  .login-split{ grid-template-columns: 1fr; }
  .login-brand{ padding: 32px 28px; min-height: 220px; }
  .login-brand .brand-mark{ font-size: 42px; }
  .login-quote{ font-size: 16px; padding-top: 14px; }
  .login-form{ padding: 32px 20px; }
}
@media (max-width: 520px){
  .login-brand{ min-height: 160px; padding: 24px 20px; }
  .login-brand .brand-mark{ font-size: 36px; }
  .login-quote{ display: none; }
  .login-title{ font-size: 36px; }
}

/* ============ PHOTO FIELD COMPACT ============ */
.photo-field-compact .photo-row{
  display: flex;
  align-items: center;
  gap: 14px;
}
.photo-field-compact .photo-thumb{
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
  background: var(--cream-2);
  border: 1px solid var(--edge);
}
.photo-field-compact .photo-thumb.empty{
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
.photo-field-compact .photo-thumb.empty svg{
  width: 20px;
  height: 20px;
}
.photo-field-compact .photo-row-controls{
  flex: 1;
  min-width: 0;
}
.photo-field-compact .photo-row-controls input[type="file"]{
  font-size: 13px;
  color: var(--ink-3);
  max-width: 100%;
}
.photo-field-compact .help{
  margin-top: 6px;
}

/* ============ APPOINTMENT FORM ============ */
.appt-layout{
  /* Outer wrapper: stacks the form/summary grid above the week timeline as
     siblings so the sticky summary's containing block is .appt-grid (the
     two-column row), not the whole layout (which would let the summary
     overlap the timeline on scroll). */
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}
.appt-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}
.appt-layout .appt-form{
  background: var(--paper);
}
/* Pet picker */
.pet-picker{ position: relative; }
.pet-picker-input{
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--paper);
  font-size: 14px;
}
.pet-picker-input:focus{
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(198,75,31,0.15);
}
.pet-picker-dropdown{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 10px;
  box-shadow: var(--shadow-hard);
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.pet-row{
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.pet-row:hover{ background: var(--cream-2); }
.pet-row.is-selected{ background: rgba(198,75,31,0.08); }
.pet-row-avatar{
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blush), var(--terra));
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: 13px;
  flex: none;
}
.pet-row-body{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pet-row-name{ font-weight: 600; font-size: 14px; color: var(--ink); }
.pet-row-sub{ font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Owner picker (single-select searchable, miroir du pet-picker) */
.owner-picker{ position: relative; }
.owner-picker-input{
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--paper);
  font-size: 14px;
}
.owner-picker-input:focus{
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(198,75,31,0.15);
}
.owner-picker-dropdown{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 10px;
  box-shadow: var(--shadow-hard);
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.owner-row{
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.owner-row:hover{ background: var(--cream-2); }
.owner-row.is-selected{ background: rgba(198,75,31,0.08); }
.owner-row-avatar{
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blush), var(--terra));
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: 13px;
  flex: none;
}
.owner-row-body{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
.owner-row-name{ font-weight: 600; font-size: 14px; color: var(--ink); }
.owner-row-sub{ font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Service picker (single-select searchable, miroir du pet-picker) */
.service-picker{ position: relative; }
.service-picker-input-wrap{ position: relative; }
.service-picker-input{
  width: 100%;
  height: 42px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--paper);
  font-size: 14px;
}
.service-picker-input:focus{
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(198,75,31,0.15);
}
.service-picker-clear{
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: 0; background: var(--cream-2);
  border-radius: 50%;
  color: var(--ink-3); font-size: 14px; line-height: 1;
  cursor: pointer; padding: 0;
}
.service-picker-clear:hover{ color: var(--ink); background: var(--cream); }
.service-picker-dropdown{
  position: absolute; top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 20;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 10px;
  box-shadow: var(--shadow-hard);
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.service-pick-row{
  width: 100%;
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.service-pick-row:hover{ background: var(--cream-2); }
.service-pick-row.is-selected{ background: rgba(198,75,31,0.08); }
.service-pick-row-body{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
.service-pick-row-name{ font-weight: 600; font-size: 14px; color: var(--ink); }
.service-pick-row-meta{ font-size: 12px; color: var(--ink-3); }

/* Summary card */
.appt-summary{
  position: sticky;
  top: 100px;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.summary-eyebrow{
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.summary-pet{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--edge-soft);
}
.summary-avatar{
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blush), var(--terra));
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  flex: none;
}
.summary-avatar.empty{ background: var(--cream-2); }
.summary-name{ font-family: var(--serif); font-size: 20px; line-height: 1.1; }
.summary-owner{ font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.summary-empty{ color: var(--ink-3); font-size: 13px; }

.summary-k{
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.summary-v{ font-family: var(--serif); font-size: 16px; }
.summary-services ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.summary-services li{ display: flex; justify-content: space-between; font-size: 13px; }

.summary-total{
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 12px; border-top: 1px solid var(--edge-soft);
}
.summary-total-k{ font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.summary-total-v{ font-family: var(--serif); font-size: 32px; color: var(--terra); font-variation-settings: "opsz" 144, "SOFT" 50; }

.slot-preview{ margin-top: 4px; }
.slot-scale{ display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em; margin-bottom: 4px; }
.slot-track{ position: relative; height: 10px; border-radius: 5px; background: var(--cream-2); }
.slot-fill{ position: absolute; top: 0; bottom: 0; background: var(--terra); border-radius: 5px; }

@media (max-width: 1000px){
  .appt-grid{ grid-template-columns: 1fr; }
  .appt-summary{ position: static; }
}

/* ============ AGENDA revisited ============ */
.week-nav--strong{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--edge-soft);
}
.week-nav-titles{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.week-eyebrow{
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.week-nav-titles h2{
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.week-nav-controls{
  display: flex;
  gap: 6px;
  flex: none;
}
.week-nav-btn{
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--edge);
  color: var(--ink);
  transition: all .15s ease;
}
.week-nav-btn svg{ width: 18px; height: 18px; }
.week-nav-btn:hover{ background: var(--cream-2); border-color: var(--ink-3); }
.week-nav-today{ background: var(--terra); color: var(--paper); border-color: var(--terra); }
.week-nav-today:hover{ background: var(--terra-2); border-color: var(--terra-2); color: var(--paper); }

/* Grid roomy: jours plus larges, cartes plus aérées. */
.week-grid--roomy{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, 0.9fr));
  gap: 10px;
}
.week-grid--roomy .day-col{
  min-height: 260px;
}
.week-grid--roomy .day-col.is-compact{
  opacity: 0.75;
}
.week-grid--roomy .appt-mini{
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  transition: all .15s ease;
}
.week-grid--roomy .appt-mini:hover{
  border-color: var(--edge);
  background: var(--cream);
  transform: translateY(-1px);
}
.week-grid--roomy .appt-time{
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  flex: none;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

@media (max-width: 1100px){
  .week-nav--strong{ flex-direction: column; align-items: flex-start; }
  .week-grid--roomy{ grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .week-grid--roomy{ grid-template-columns: 1fr; }
}

/* ============ FICHE — INLINE CLOSE FORM ============ */
.close-form{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px 16px;
  align-items:end;
  padding: 16px 24px;
  background: var(--cream-2);
  border-top: 1px solid var(--line);
}
.close-form .close-field{
  display:flex; flex-direction:column; gap:4px;
  font-size: 11px; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--ink-3);
}
.close-form .close-field input{
  height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); font-size: 14px; color: var(--ink);
  font-family: var(--sans);
}
.close-form .close-field input:focus{
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--accent-2);
}
.close-form .close-field .err{
  color: var(--danger, #b5351f); font-size: 11px; text-transform: none; letter-spacing: 0;
}
.close-form .close-actions{
  display:flex; gap: 8px; align-items:center;
}
.close-form .linky{
  background:none; border:none; color: var(--ink-3);
  font-size: 12px; cursor:pointer; text-decoration: underline;
}
.close-form-errors{
  grid-column: 1 / -1;
  color: var(--danger, #b5351f); font-size: 12px;
}
@media (max-width: 720px){
  .close-form{ grid-template-columns: 1fr; padding: 14px 20px; }
  .close-form .close-actions{ justify-content: flex-end; }
}

/* ============ Week timeline in appointment form ============ */
.week-pick{
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 20px 22px;
}
.wt-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
  gap: 16px;
}
.wt-eyebrow{
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 4px;
}
.wt-title h3{
  font-family: var(--serif);
  font-size: 20px;
  margin: 0;
  line-height: 1.1;
}
.wt-nav{ display: flex; gap: 6px; }
.wt-arrow{
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 8px;
  font-size: 18px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s ease;
}
.wt-arrow:hover{ border-color: var(--terra); color: var(--terra); }

.wt-grid{
  display: grid;
  grid-template-columns: 44px repeat(6, minmax(0, 1fr));
  border: 1px solid var(--edge);
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream-2);
}
.wt-hour-col{
  background: var(--cream-2);
  display: flex;
  flex-direction: column;
}
.wt-hour-col .wt-hour{
  flex: 1;
  min-height: 0;
  padding: 0 6px;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--edge-soft);
  display: flex;
  align-items: flex-start;
}
.wt-hour-col .wt-hour-spacer{
  /* keep column header row aligned with day heads */
  height: 32px;
  border-bottom: 1px solid var(--edge);
}

.wt-day-col{
  background: var(--paper);
  border-left: 1px solid var(--edge-soft);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wt-day-head{
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  border-bottom: 1px solid var(--edge);
  background: var(--cream);
  color: var(--ink-2);
}
.wt-day-head.is-today{ background: var(--terra-soft, rgba(198,75,31,0.12)); color: var(--terra); font-weight: 600; }
.wt-day-head .d{ text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; color: var(--ink-3); }
.wt-day-head.is-today .d{ color: var(--terra); }
.wt-day-head .n{ font-family: var(--serif); font-size: 16px; }

.wt-day-body{
  position: relative;
  /* 10 hours (8h-18h), ensure comfortable row height.
     min-height (not height) because the flex shorthand on this element used
     to override height via flex-basis:0 — keep min-height so any future flex
     reintroduction can't silently flatten the timeline again. */
  min-height: 600px;
  cursor: pointer;
  /* Horizontal 30-min lines (20 divisions over 10 hours → every 5%) */
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent calc(100% / 20 - 1px),
      var(--edge-soft) calc(100% / 20 - 1px),
      var(--edge-soft) calc(100% / 20));
}
.wt-appt{
  position: absolute;
  left: 0; right: 0;
  background: var(--terra);
  color: var(--paper);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.15;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  cursor: default;
  z-index: 1;
}
.wt-appt.done{ background: var(--moss, #7a9a7a); }
.wt-appt .wt-t{ font-size: 10px; opacity: 0.9; }
.wt-appt .wt-n{ font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wt-preview{
  position: absolute;
  left: 2px; right: 2px;
  background: repeating-linear-gradient(45deg, var(--blush) 0, var(--blush) 6px, var(--cream) 6px, var(--cream) 12px);
  border: 2px dashed var(--terra);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  color: var(--terra);
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
}
.wt-preview.has-conflict{ border-color: #c0382f; color: #c0382f; background: repeating-linear-gradient(45deg, #fcdedc 0, #fcdedc 6px, #fff 6px, #fff 12px); }
.wt-preview.all-day{
  background: repeating-linear-gradient(45deg, var(--blush) 0, var(--blush) 8px, var(--cream) 8px, var(--cream) 16px);
}
@media (max-width: 640px) {
  .wt-grid {
    /* Salon fermé le dimanche → 6 jours (lun-sam) en colonnes 100px.
       Scroll horizontal CONFINÉ à la grille — la page entière ne doit pas
       scroller (régression iOS Safari documentée dans 81228c2 / e6a619f :
       overflow-x sur html/body brise position:fixed de la bottom-nav). */
    grid-template-columns: 36px repeat(6, 100px);
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    /* Petite indication visuelle qu'il y a du scroll — fade sur le bord droit */
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }
  .wt-day-body {
    /* 10h × 24px (slot 30 min) — moitié de la densité desktop, plus tappable */
    min-height: 480px;
  }

  /* La colonne d'heures reste plaquée à gauche pendant le scroll horizontal —
     sans ça, impossible de relier une ligne de rendez-vous à son créneau
     horaire après le moindre déplacement. */
  .wt-hour-col {
    position: sticky;
    left: 0;
    z-index: 3;                          /* > .wt-appt (1) et .wt-preview (2) */
    border-right: 1px solid var(--edge);
    background: var(--cream-2);          /* déjà défini hors media query, réaffirmé pour garantir l'opacité du sticky */
  }

  /* ============ MOBILE FORMS — RDV / événement ============ */
  /* Récap latéral masqué sur téléphone : trop dense pour le tactile.
     La timeline semaine reste visible (en scroll horizontal) car elle
     permet de cliquer un créneau et de voir les conflits — c'est la
     valeur principale du formulaire RDV. */
  .appt-summary {
    display: none;
  }
  .appt-layout .week-pick {
    margin-top: 12px;
  }
  .appt-layout .wt-head {
    padding: 12px 14px;
  }
  .appt-layout .wt-title h3 { font-size: 14px; }
  .appt-layout .wt-eyebrow { font-size: 10.5px; }

  /* Anti-zoom iOS Safari : tout input ≥ 16px ne déclenche pas le zoom auto
     au focus. Sans ça, le viewport se recadre au tap dans un champ. */
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field input[type="url"],
  .field input[type="password"],
  .field input[type="number"],
  .field input[type="date"],
  .field input[type="datetime-local"],
  .field input[type="time"],
  .field input[type="search"],
  .field select,
  .field textarea {
    font-size: 16px;
  }

  /* Barre desktop cachée — remplacée par la barre mobile fixe ci-dessous. */
  .appt-layout .form-actions { display: none; }

  /* Barre d'actions mobile : sticky au-dessus de la mobile-nav (~50px +
     safe-area). z-index 40 → passe au-dessus du contenu mais sous la nav
     (50) et sous les sheets/dialogs (51+). */
  .form-actions-mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(50px + env(safe-area-inset-bottom));
    z-index: 40;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--edge-soft);
  }
  .form-actions-mobile .btn-primary {
    width: 100%;
    justify-content: center;
    height: 48px;
    font-size: 15px;
  }
  .form-actions-mobile .cancel {
    text-align: center;
    color: var(--ink-3);
    font-size: 13.5px;
    text-decoration: none;
    padding: 6px 0;
  }
  .form-actions-mobile .cancel:active { color: var(--ink); }

  /* Compense la barre fixe (~60px) + la mobile-nav (~50px) + safe-area pour
     que le dernier champ ne soit jamais caché derrière la barre. */
  .appt-layout {
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
  }
}

/* ============ AGENDA EVENTS ============ */
:root {
  --event-fill:   #64748b;
  --event-border: #94a3b8;
  --event-text:   #ffffff;
}

.event-mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--event-fill);
  color: var(--event-text);
  border: 1px solid var(--event-border);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 6px,
    rgba(255, 255, 255, 0.08) 6px 12px
  );
  text-decoration: none;
  font-size: 12px;
}
.event-mini .event-time { font-weight: 600; opacity: 0.9; }
.event-mini .event-label { font-weight: 500; }
.event-mini:hover { filter: brightness(1.08); }

.wt-event {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--event-fill);
  color: var(--event-text);
  border: 1px solid var(--event-border);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 6px,
    rgba(255, 255, 255, 0.08) 6px 12px
  );
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wt-event-label { text-overflow: ellipsis; overflow: hidden; }
.wt-event.all-day {
  top: 0 !important;
  height: 100% !important;
}
.wt-event:hover { filter: brightness(1.08); }

/* ============ FLASH MESSAGES ============ */
.flash-messages {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.flash-message {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
}
.flash-success {
  background: #d1fae5;
  color: #065f46;
  border-color: #10b981;
}
.flash-warning {
  background: #fef3c7;
  color: #92400e;
  border-color: #f59e0b;
}
.flash-error {
  background: #fee2e2;
  color: #991b1b;
  border-color: #ef4444;
}
.flash-info {
  background: #e0e7ff;
  color: #3730a3;
  border-color: #6366f1;
}

/* ============ BTN DANGER ============ */
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 42px;
  background: transparent;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
}
.btn-danger:hover {
  background: #fee2e2;
  border-color: #b91c1c;
  color: #7f1d1d;
}

/* ============ WEEKDAYS PICKER ============ */
.weekdays-picker ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.weekdays-picker li {
  display: inline-flex;
}
.weekdays-picker label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--ink-soft, #d1d5db);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  background: var(--paper, #fff);
  transition: all 0.15s ease;
}
.weekdays-picker label:hover {
  border-color: var(--ink);
}
.weekdays-picker input[type="checkbox"] {
  margin: 0;
}

/* ---- Flatpickr theme (palette Fluffly) ---- */
.flatpickr-calendar {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  font-family: var(--sans);
  color: var(--ink);
}
.flatpickr-calendar.arrowTop::before {
  border-bottom-color: var(--edge);
}
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--paper);
}
.flatpickr-calendar.arrowBottom::before {
  border-top-color: var(--edge);
}
.flatpickr-calendar.arrowBottom::after {
  border-top-color: var(--paper);
}
.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months {
  color: var(--ink);
  font-family: var(--serif);
  background: transparent;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: var(--ink-2);
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: var(--terra);
}
.flatpickr-weekday {
  color: var(--ink-3);
  font-family: var(--sans);
  font-weight: 600;
}
.flatpickr-day {
  color: var(--ink);
  border-radius: 8px;
}
.flatpickr-day:hover {
  background: var(--cream-2);
  border-color: var(--cream-3);
}
.flatpickr-day.today {
  border-color: var(--ochre);
}
.flatpickr-day.today:hover {
  background: var(--ochre);
  color: var(--paper);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--terra);
  border-color: var(--terra-2);
  color: var(--paper);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--ink-3);
  opacity: 0.55;
}
.flatpickr-time {
  border-top: 1px solid var(--edge);
  background: var(--paper);
}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: var(--ink);
  background: transparent;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: var(--cream-2);
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--ink-2);
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: var(--ink-2);
}

/* ============ PROFILE LINK IN SIDEBAR ============ */
.sidebar-footer .me-link{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:inherit;
  padding:6px 4px;border-radius:10px;
  transition:background-color 120ms ease;
  flex:1;
}
.sidebar-footer .me-link:hover{
  background:rgba(241,231,213,0.06);
}
.sidebar-footer .me-logout{margin-left:auto;}

/* ============ CONFIRM DIALOG ============ */
.confirm-dialog{
  border:none;border-radius:var(--radius);
  padding:28px 32px;max-width:480px;
  background:var(--paper);color:var(--ink);
  box-shadow:var(--shadow-soft);
}
.confirm-dialog::backdrop{
  background:rgba(28,19,12,0.45);
  backdrop-filter:blur(2px);
}
.confirm-dialog h3{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:22px;margin-bottom:10px;
}
.confirm-dialog p{margin-bottom:18px;color:var(--ink-2);}
.confirm-dialog .dialog-actions{
  display:flex;justify-content:flex-end;gap:12px;margin:0;
}
.confirm-dialog .btn-secondary{
  background:transparent;border:1px solid var(--edge);
  padding:10px 18px;border-radius:999px;
  color:var(--ink);cursor:pointer;font:inherit;
}
.confirm-dialog .btn-secondary:hover{
  background:rgba(28,19,12,0.04);
}

/* ============================================================
   MOBILE SHELL — bottom nav, mobile topbar
   ============================================================ */

.mobile-nav,
.mobile-topbar { display: none; } /* Visibles uniquement sous 640px (voir media query plus bas) */

@media (max-width: 640px) {
  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    background: var(--paper);
    border-top: 1px solid var(--edge);
    padding: 6px 6px max(8px, env(safe-area-inset-bottom));
    align-items: center;
    justify-content: space-around;
  }
  .mobile-nav-item {
    flex: 1;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--ink-3);
    font-size: 10px;
    padding: 6px 4px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .mobile-nav-item svg { width: 22px; height: 22px; }
  .mobile-nav-item.active { color: var(--terra); }
  .mobile-nav-item.active svg { stroke-width: 2.2; }
  .mobile-nav-fab {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--terra);
    color: var(--paper);
    display: grid; place-items: center;
    margin-top: -22px;
    box-shadow: 0 8px 22px rgba(198, 75, 31, 0.4);
    border: 3px solid var(--cream);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .mobile-nav-fab svg { width: 22px; height: 22px; }
  .mobile-nav-fab:active { transform: scale(0.96); }
  .mobile-nav-fab.is-open { transform: rotate(45deg); }
  .mobile-nav-fab {
    transition: transform 180ms ease;
    cursor: pointer;
  }

  .mobile-fab-sheet__scrim {
    position: fixed; inset: 0;
    background: rgba(20, 16, 10, 0.32);
    z-index: 49;
  }
  .mobile-fab-sheet {
    position: fixed;
    bottom: calc(50px + env(safe-area-inset-bottom));
    left: 0; right: 0;
    z-index: 51;
    background: var(--paper);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    padding: 14px 14px max(18px, env(safe-area-inset-bottom));
  }
  .mobile-fab-sheet__grab {
    display: block;
    width: 36px; height: 4px;
    background: var(--edge);
    border-radius: 2px;
    margin: 0 auto 12px;
  }
  .mobile-fab-sheet__row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 8px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .mobile-fab-sheet__row:active { background: var(--cream); }
  .mobile-fab-sheet__icon {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--cream);
    color: var(--terra);
    display: grid; place-items: center;
    overflow: hidden;
  }
  .mobile-fab-sheet__icon svg { width: 18px; height: 18px; display: block; }

  .mfs-enter       { transition: transform 220ms ease, opacity 220ms ease; }
  .mfs-enter-start { transform: translateY(100%); opacity: 0; }
  .mfs-enter-end   { transform: translateY(0);    opacity: 1; }
  .mfs-leave       { transition: transform 180ms ease, opacity 180ms ease; }
  .mfs-leave-start { transform: translateY(0);    opacity: 1; }
  .mfs-leave-end   { transform: translateY(100%); opacity: 0; }

  .mobile-topbar {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--edge-soft);
    padding: 8px 16px;
    padding-top: max(8px, env(safe-area-inset-top));
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
  }
  .mobile-topbar-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mobile-week-label {
    font-family: var(--sans);
    font-style: normal;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
  }
  .mobile-week-range {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    color: var(--ink);
  }
  .mobile-topbar-actions { display: flex; gap: 6px; align-items: center; }
  .mobile-icon-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: transparent;
    color: var(--ink-2);
    border: 1px solid var(--edge-soft);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .mobile-icon-btn svg { width: 16px; height: 16px; }

  /* Décaler <main> pour ne pas être masqué par les barres fixes */
  body main {
    padding-top: calc(60px + env(safe-area-inset-top));
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   PROFILE HUB
   ============================================================ */
.profile-hub {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--paper);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
  padding: 16px;
}
.profile-hub-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-hub-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding: 4px 8px;
}
.profile-hub-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  border: 0;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.profile-hub-item:hover { background: var(--cream-2); }
.profile-hub-item svg { width: 18px; height: 18px; color: var(--ink-2); flex-shrink: 0; }
.profile-hub-item .chevron { margin-left: auto; color: var(--ink-3); width: 14px; height: 14px; }
.profile-hub-item span { flex: 1; }
.profile-hub-logout { padding: 10px 12px; }
.profile-hub-logout-btn {
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  flex: 1;
  cursor: pointer;
  padding: 0;
}

/* ---- Billing page (refresh 2026-05) ---------------------------------- */

.billing-summary {
  padding: 18px 20px;
  background: var(--cream-2);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  text-align: center;
}
.billing-summary .s {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144;
  display: block;
}
.billing-summary .l {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  display: block;
}
.billing-summary-pending .s { color: var(--terra); }

.billing-revenue {
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) 2fr;
  gap: 18px;
  align-items: stretch;
}
.billing-revenue-total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.billing-revenue-label,
.billing-revenue-methods span {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.billing-revenue-total strong {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  color: var(--terra);
}
.billing-revenue-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.billing-revenue-methods div {
  min-width: 0;
  padding: 12px 14px;
  background: var(--cream-2);
  border-radius: calc(var(--radius) - 2px);
}
.billing-revenue-methods strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.billing-filters {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--edge);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.billing-toggle input { accent-color: var(--terra); }
.billing-toggle.is-active {
  background: var(--terra);
  color: var(--paper);
  border-color: var(--terra);
}

.billing-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
}
.billing-sort select {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--edge);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.billing-sort select:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 4px rgba(198, 75, 31, 0.10);
}

.billing-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.billing-list-head,
.billing-row {
  display: grid;
  grid-template-columns: 80px 1fr 1.2fr 1.2fr 80px 100px 240px;
  gap: 14px;
  align-items: center;
}
.billing-list-head {
  padding: 10px 18px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.billing-row {
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: border-color .15s ease;
}
.billing-row:hover { border-color: var(--ink-3); }
.billing-row.is-invoiced { background: var(--cream-2); }
.billing-row.has-error {
  border-color: var(--terra);
  background: rgba(198, 75, 31, 0.05);
}

.billing-row-when {
  display: flex;
  flex-direction: column;
}
.billing-row-date {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  font-variation-settings: "opsz" 144;
}
.billing-row-time {
  font-size: 11px;
  color: var(--ink-3);
}
.billing-row-pet strong { font-weight: 600; }
.billing-row-owner small {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 11.5px;
}
.billing-row-services { font-size: 13.5px; }
.billing-row-price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.billing-row-payment {
  color: var(--ink-3);
  font-size: 13px;
}

.billing-row-invoice form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.billing-row-invoice input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.billing-row-invoice input:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 4px rgba(198, 75, 31, 0.10);
}
.billing-row-flag {
  width: 20px;
  height: 20px;
  color: var(--moss);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.billing-row-flag svg { width: 100%; height: 100%; }
.billing-row-invoice .err {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  color: var(--terra-2);
  font-size: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1080px) {
  .billing-list-head { display: none; }
  .billing-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
  }
  .billing-row-services,
  .billing-row-invoice { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .billing-row {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .billing-row-when {
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
  }
  .billing-filters { width: 100%; }
  .billing-toggle,
  .billing-sort { flex: 1; justify-content: center; }
  .billing-summary { padding: 14px 12px; }
  .billing-summary .s { font-size: 22px; }
  .billing-revenue {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .billing-revenue-methods { grid-template-columns: 1fr; }
  .billing-revenue-total strong { font-size: 28px; }
}

@media (max-width: 640px) {
  .billing-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "pet      pet      .        when"
      "owner    owner    owner    owner"
      "services services services services"
      "price    payment  invoice  invoice";
    gap: 6px 10px;
    padding: 14px;
  }
  .billing-row-pet      { grid-area: pet; }
  .billing-row-when     {
    grid-area: when;
    flex-direction: row;
    gap: 6px;
    align-items: baseline;
    justify-self: end;
    font-size: 12px;
    color: var(--ink-3);
  }
  .billing-row-date     { font-family: var(--sans); font-size: 12px; font-weight: 500; }
  .billing-row-time     { font-size: 12px; color: var(--ink-3); }
  .billing-row-owner    { grid-area: owner; }
  .billing-row-services { grid-area: services; }
  .billing-row-price    {
    grid-area: price;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--edge-soft);
  }
  .billing-row-payment  {
    grid-area: payment;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--edge-soft);
  }
  .billing-row-invoice  {
    grid-area: invoice;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--edge-soft);
  }
  .billing-row-pet strong { font-size: 16px; }
  .billing-row-invoice input {
    height: 44px;
    font-size: 16px;
  }

  .page-head h1 { font-size: 32px; }
  .page-eyebrow { font-size: 11.5px; }
  .billing-month-nav { width: 100%; justify-content: flex-end; }
  .week-nav-btn { width: 44px; height: 44px; }

  .billing-toggle,
  .billing-sort select { min-height: 44px; }
}

@media (max-width: 360px) {
  .billing-summary .l { font-size: 9.5px; letter-spacing: 0.10em; }
}

.wt-invoice-mark {
  position: absolute;
  top: 3px;
  right: 4px;
  width: 12px;
  height: 12px;
  color: currentColor;
  opacity: 0.75;
  pointer-events: none;
}

.invoice-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 12px;
  border: 1px solid var(--edge-soft);
}
.invoice-chip svg { flex-shrink: 0; }
.invoice-chip strong { font-weight: 600; }

.consent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(85, 107, 47, 0.15);
  color: var(--moss-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid rgba(85, 107, 47, 0.25);
}

.consent-chip svg {
  flex-shrink: 0;
}