:root{
  --terracotta:#C65A3A;
  --terracotta-dark:#A8492E;
  --green:#1F4D3A;
  --green-light:#2E6B52;
  --sable:#F7F3EC;
  --ink:#2B211C;
  --gold:#C99A44;
  --danger:#B4432F;
  --warn:#C99A44;
  --line: rgba(43,33,28,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--sable); color:var(--ink); font-family:'Manrope', sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em;}
a{text-decoration:none; color:inherit;}
img{display:block; max-width:100%;}
button{font-family:'Manrope', sans-serif; cursor:pointer;}
input, select, textarea{font-family:'Manrope', sans-serif;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

/* ===== NAV ===== */
nav{
  position:sticky; top:0; z-index:100; background:rgba(247,243,236,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:1180px; margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.logo{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.logo-text{font-family:'Fraunces', serif; font-size:20px; font-weight:600;}
.logo-text span{color:var(--green);}
.nav-cta{display:flex; align-items:center; gap:12px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:100px; font-weight:700; font-size:14.5px;
  cursor:pointer; border:none; transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary{background:var(--terracotta); color:#fff; box-shadow:0 6px 16px rgba(198,90,58,0.28);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(198,90,58,0.36);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-dark{background:var(--green); color:#fff;}
.btn:disabled{opacity:0.5; cursor:not-allowed; transform:none !important;}

/* ===== FORMS ===== */
.field-group{margin-bottom:20px;}
.field-label{display:block; font-size:13.5px; font-weight:700; margin-bottom:8px;}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=date], select, textarea{
  width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:14px;
  font-size:14.5px; background:#fff; color:var(--ink); outline:none;
}
input:focus, select:focus, textarea:focus{border-color:var(--terracotta);}
textarea{resize:vertical; min-height:100px; line-height:1.6;}
.field-hint{font-size:12px; color:rgba(43,33,28,0.5); margin-top:6px;}
.field-error{font-size:12px; color:var(--danger); margin-top:6px;}

/* ===== MODAL (auth) ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(43,33,28,0.5); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:#fff; border-radius:24px; padding:32px; max-width:420px; width:100%;
  box-shadow:0 30px 60px rgba(0,0,0,0.3); max-height:90vh; overflow-y:auto;
}
.modal-box h2{font-size:22px; margin-bottom:6px;}
.modal-box p.sub{font-size:13.5px; color:rgba(43,33,28,0.6); margin-bottom:22px;}
.modal-close{position:absolute; top:20px; right:24px; font-size:20px; cursor:pointer; color:rgba(43,33,28,0.5);}
.modal-tabs{display:flex; gap:8px; margin-bottom:22px; background:var(--sable); border-radius:100px; padding:4px;}
.modal-tab{flex:1; text-align:center; padding:9px; border-radius:100px; font-size:13.5px; font-weight:700; color:rgba(43,33,28,0.5);}
.modal-tab.active{background:#fff; color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,0.08);}

/* ===== TOAST ===== */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px);
  background:var(--ink); color:#fff; padding:14px 24px; border-radius:100px; font-size:13.5px; font-weight:600;
  z-index:2000; transition:transform .3s ease; box-shadow:0 12px 28px rgba(0,0,0,0.25);
}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.error{background:var(--danger);}
.toast.success{background:var(--green);}

/* ===== LOADING ===== */
.spinner{
  width:22px; height:22px; border-radius:50%; border:3px solid rgba(255,255,255,0.3); border-top-color:#fff;
  animation:spin 0.7s linear infinite; display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}
.skeleton{background:linear-gradient(90deg, var(--line) 25%, rgba(43,33,28,0.06) 50%, var(--line) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite;}
@keyframes shimmer{0%{background-position:200% 0;} 100%{background-position:-200% 0;}}

footer{background:var(--ink); color:rgba(255,255,255,0.72); padding:56px 0 32px; margin-top:100px;}
footer .wrap{text-align:center; font-size:13px; color:rgba(255,255,255,0.45);}
.footer-links{display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-bottom:20px;}
.footer-links a{font-size:13.5px; font-weight:600; color:rgba(255,255,255,0.75); transition:color .15s;}
.footer-links a:hover{color:#fff;}
.footer-copy{font-size:12.5px; color:rgba(255,255,255,0.4); padding-top:20px; border-top:1px solid rgba(255,255,255,0.1);}
@media (max-width:600px){ .footer-links{gap:14px 18px; font-size:12.5px;} }

/* ===== RESPONSIVE PARTAGÉ (nav, modal, boutons) ===== */
@media (max-width: 900px){
  .nav-inner{padding:14px 20px; flex-wrap:wrap; gap:8px;}
  .logo-text{font-size:18px;}
  .nav-cta{gap:8px; flex-wrap:wrap;}
  .nav-cta .btn{padding:9px 15px; font-size:12.5px; white-space:nowrap;}
  .wrap{padding:0 20px;}
  .modal-box{padding:26px 20px; max-width:100%;}
}

/* ===== BARRE D'ONGLETS ESPACE HÔTE (scrollable, jamais cassée sur mobile) ===== */
.host-subnav{
  display:flex; gap:2px; overflow-x:auto; background:#fff; border-bottom:1px solid var(--line);
  padding:0 32px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.host-subnav::-webkit-scrollbar{display:none;}
.host-subnav-item{
  padding:15px 18px; font-size:13.5px; font-weight:700; color:rgba(43,33,28,0.5);
  white-space:nowrap; border-bottom:2.5px solid transparent; flex-shrink:0; cursor:pointer;
}
.host-subnav-item:hover{color:var(--ink);}
.host-subnav-item.active{color:var(--ink); border-bottom-color:var(--terracotta);}
@media (max-width: 900px){
  .host-subnav{padding:0 20px;}
  .host-subnav-item{padding:13px 14px; font-size:13px;}
}

/* ===== TIROIR MENU (hamburger, espace hôte) ===== */
.drawer-overlay{position:fixed; inset:0; background:rgba(43,33,28,0.45); z-index:900; display:none;}
.drawer-overlay.open{display:block;}
.drawer-panel{
  position:fixed; top:0; right:0; bottom:0; width:360px; max-width:90vw; background:var(--sable);
  z-index:901; transform:translateX(100%); transition:transform .25s ease; overflow-y:auto; padding:28px 24px;
}
.drawer-overlay.open .drawer-panel{transform:translateX(0);}
.drawer-panel h2{font-size:24px; margin-bottom:20px;}
.drawer-stat-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px;}
.drawer-stat-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px;}
.drawer-stat-card b{display:block; font-size:12px; color:rgba(43,33,28,0.5); margin-bottom:4px;}
.drawer-stat-card span{display:block; font-family:'Fraunces',serif; font-size:16px; font-weight:600;}
.drawer-cta{background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:16px; display:flex; gap:12px; align-items:center; margin-bottom:16px;}
.drawer-cta .icn{font-size:22px;}
.drawer-cta b{display:block; font-size:14px;}
.drawer-cta span{font-size:12px; color:rgba(43,33,28,0.55);}
.drawer-links{background:#fff; border:1.5px solid var(--line); border-radius:16px; overflow:hidden;}
.drawer-link{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); font-size:13.5px; font-weight:600;}
.drawer-link:last-child{border-bottom:none;}
.drawer-close{position:absolute; top:24px; right:20px; font-size:20px; cursor:pointer; color:rgba(43,33,28,0.5); display:flex;}
.hamburger-btn{width:38px; height:38px; border-radius:50%; background:#fff; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; color:var(--ink);}
.icn-inline{vertical-align:middle; margin-right:6px; flex-shrink:0;}
.drawer-cta .icn, .drawer-link .icn{display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}