:root{
  --bg:#f6f7f5;
  --panel:#ffffff;
  --border:#dfe3df;
  --ink:#1e2621;
  --muted:#66716a;
  --accent:#2f6b4f;
  --accent-ink:#ffffff;
  --danger:#b3452f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:20px 14px 100px;
}
.wrap{max-width:760px;margin:0 auto;}
h1{font-size:20px;margin:0 0 2px;letter-spacing:-0.01em;}
.sub{color:var(--muted);font-size:13px;margin:0 0 18px;}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 16px 4px;
  margin-bottom:14px;
}
@media (min-width:600px){
  body{padding:28px 16px 60px;}
  h1{font-size:22px;}
  .sub{font-size:13.5px;margin-bottom:22px;}
  .card{padding:22px 22px 8px;}
}
.card h2{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin:0 0 16px;
  font-weight:700;
}
.row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.field{flex:1 1 220px;display:flex;flex-direction:column;gap:6px;}
.field.full{flex-basis:100%;}
label{font-size:13px;font-weight:600;color:#38423c;}
label .opt{font-weight:400;color:var(--muted);}
input[type=text], input[type=tel], input[type=number], select, textarea{
  border:1px solid var(--border);
  border-radius:9px;
  padding:11px 12px;
  font-size:16px;
  font-family:inherit;
  background:#fcfdfc;
  color:var(--ink);
  width:100%;
  min-height:46px;
}
input[readonly]{background:#eef2ef;color:var(--ink);font-weight:700;}
select{appearance:none;-webkit-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2366716a" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;
}
textarea{font-family:inherit;font-size:14px;resize:vertical;min-height:auto;}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}
.toggle-group{display:flex;gap:8px;}
.toggle-btn{
  flex:1;
  padding:12px;
  min-height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;
  border:1px solid var(--border);
  background:#fcfdfc;
  cursor:pointer;
  font-size:14.5px;
  font-weight:600;
  color:#38423c;
  text-align:center;
  user-select:none;
}
.toggle-btn.active{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
}
.book-list{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}
.book{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  min-height:46px;
}
.book input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;margin:0;}
.book-photos{display:flex;gap:6px;flex:0 0 auto;}
.book-photo{
  flex:0 0 auto;width:56px;height:56px;border-radius:9px;overflow:hidden;
  background:#eef2ef;border:1px solid var(--border);
}
.book-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.book-info{flex:1 1 auto;min-width:0;}
.book-name{display:block;font-size:14.5px;font-weight:600;line-height:1.3;}
.book-price{color:var(--accent);font-weight:700;font-size:13.5px;}
.book.checked{border-color:var(--accent);background:#f1f7f3;}
.book.out-of-stock{
  opacity:.55;cursor:not-allowed;background:#f6f7f5;
}
.book.out-of-stock .book-photo img{filter:grayscale(1);}
.out-of-stock-label{
  color:var(--danger)!important;font-weight:700;font-size:12.5px;
}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5;}
.hint2{font-size:14px;font-weight:600;color:var(--muted);margin-top:6px;line-height:1.5;}
button.submit{
  width:100%;
  background:var(--accent);
  color:var(--accent-ink);
  border:none;
  border-radius:12px;
  padding:15px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  margin-top:6px;
  min-height:50px;
}
button.submit:disabled{opacity:.6;cursor:not-allowed;}
.submit-bar{
  padding:14px 0 6px;
}
.status{
  margin-top:14px;padding:12px 14px;border-radius:9px;font-size:13.5px;display:none;
}
.status.ok{background:#e8f4ec;color:#1e5c39;display:block;}
.status.err{background:#fbeae5;color:var(--danger);font-weight:500; display:block;}

.sommaire-link{
  display:inline-block;float:right;margin-top:4px;font-size:14.5px;color:var(--accent);
  text-decoration:none;font-weight:700;
}
.sommaire-link:hover{text-decoration:underline;}

.sommaire-overlay{
  position:fixed;inset:0;background:rgba(20,26,22,.55);
  display:none;align-items:center;justify-content:center;
  padding:16px;z-index:1000;
}
.sommaire-overlay.open{display:flex;}
.sommaire-modal{
  background:var(--panel);border-radius:16px;
  width:100%;max-width:520px;max-height:88vh;
  display:flex;flex-direction:column;position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:sommaireIn .18s ease-out;
}
@keyframes sommaireIn{
  from{opacity:0;transform:translateY(10px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.sommaire-close{
  position:absolute;top:10px;right:10px;
  width:34px;height:34px;border-radius:50%;
  border:none;background:#fff;color:var(--ink);
  font-size:16px;cursor:pointer;z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.sommaire-body{
  padding:26px 22px 22px;overflow-y:auto;
}
.sommaire-title{
  font-size:17px;font-weight:800;margin:0 0 14px;padding-right:30px;color:var(--ink);
}
.sommaire-cover{
  width:100%;max-height:200px;object-fit:cover;border-radius:12px;
  margin-bottom:16px;display:block;background:#eef2ef;
}
.sommaire-list{margin:0 0 16px;padding-left:20px;}
.sommaire-list li{
  font-size:14px;line-height:1.55;margin-bottom:9px;color:#38423c;
}
.sommaire-quote{
  margin:0 0 16px;padding:10px 14px;border-left:3px solid var(--accent);
  font-style:italic;color:var(--accent);font-size:13.5px;background:#f1f7f3;border-radius:0 8px 8px 0;
}
.sommaire-bonus{
  font-size:13.5px;line-height:1.6;color:#38423c;background:#f6f7f5;
  border-radius:10px;padding:12px 14px;margin:0 0 10px;
}
.sommaire-plus{
  font-size:13.5px;font-weight:700;color:var(--accent);margin:0;
}
.bureau-popup-row{
  display:flex;gap:8px;align-items:flex-start;font-size:14px;
  margin:0 0 10px;color:#38423c;line-height:1.5;
}
.bureau-popup-row a{color:inherit;text-decoration:none;}
.bureau-popup-row a:hover{text-decoration:underline;}
@media (max-width:600px){
  .sommaire-overlay{padding:0;align-items:flex-end;}
  .sommaire-modal{
    max-width:100%;max-height:90vh;border-radius:18px 18px 0 0;
    animation:sommaireInMobile .2s ease-out;
  }
  @keyframes sommaireInMobile{
    from{opacity:0;transform:translateY(30px);}
    to{opacity:1;transform:translateY(0);}
  }
}
#montantField{
  flex: 0 1 50%;
  min-width: 150px;
}
.montant-wrap{
  position: relative;
}
#montant{
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 18px 42px 18px 16px;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  width: 100%;
  background: #f1f7f3;
  -moz-appearance: textfield;
}
#montant::-webkit-outer-spin-button,
#montant::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.montant-suffix{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  pointer-events: none;
}
hr{
  border: none;
  text-align: center;
  overflow: visible;
  margin: 40px 0 16px 0; /* 40px en haut, 16px en bas */
}
hr::after{
  content: "•";
  display: inline-block;
  background: var(--panel);
  padding: 0 10px;
  color: var(--accent);
  font-size: 20px;
  position: relative;
  top: -16px;
}
hr::before{
  content: "";
  display: block;
  border-top: 1px solid var(--border);
}

.toggle-caption-row{display:flex;gap:8px;margin-top:4px;}
.toggle-caption-row > span{flex:1;text-align:center;font-size:12px;font-weight: 700;color:var(--muted);}