:root{
  --ink:#0f1720;
  --ink-2:#17222e;
  --surface:#ffffff;
  --surface-2:#eef1ee;
  --text:#14202b;
  --text-dim:#4a5a67;
  --chamois:#d99a2b;
  --chamois-2:#f2b53d;
  --teal:#2c7a78;
  --line:#d7dbd6;
  --shadow: 0 10px 30px -12px rgba(15,23,32,.25);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface:#0f1720;
    --surface-2:#17222e;
    --text:#eef2f4;
    --text-dim:#a9b7c1;
    --line:#28353f;
    --shadow: 0 10px 30px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --surface:#0f1720;
  --surface-2:#17222e;
  --text:#eef2f4;
  --text-dim:#a9b7c1;
  --line:#28353f;
  --shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--surface);
  color:var(--text);
  font-family:'Work Sans', 'Segoe UI', system-ui, sans-serif;
}
h1,h2,h3{
  font-family:'Big Shoulders Display','Arial Narrow',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
  text-wrap:balance;
  margin:0;
  line-height:.95;
}
p{line-height:1.55; color:var(--text-dim); margin:0;}
a{color:inherit;}
img{max-width:100%;}
[hidden]{display:none !important;}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:20px;}
.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--chamois);
}

/* header */
header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.headbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:14px;
}
.logo{display:flex; align-items:center; gap:10px; font-family:'Big Shoulders Display'; font-weight:800; font-size:1.35rem; text-transform:uppercase;}
.logo-mark{
  width:34px; height:34px; border-radius:8px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
  flex-shrink:0;
}
.logo-mark img{width:100%; height:100%; object-fit:cover; display:block;}
nav{display:flex; align-items:center; gap:22px;}
nav a{font-size:.92rem; color:var(--text-dim); text-decoration:none;}
nav a:hover{color:var(--text);}
.tel-pill{
  display:flex; align-items:center; gap:8px;
  font-family:'Space Mono',monospace; font-size:.85rem;
  color:var(--text);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; font-weight:700; font-size:.9rem;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  font-family:'Work Sans',sans-serif;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.btn-primary{background:var(--chamois); color:#1a1206; box-shadow:var(--shadow);}
.btn-primary:hover{transform:translateY(-1px);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--chamois);}
.nav-cta{display:flex; align-items:center; gap:14px;}

.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px; border:1px solid var(--line);
  background:transparent; color:var(--text); cursor:pointer; padding:0;
}
.nav-toggle svg{width:20px; height:20px;}
.nav-toggle:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

@media (max-width: 760px){
  nav{
    display:none; flex-direction:column; gap:2px;
    position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:10px 20px 16px;
  }
  nav.nav-open{display:flex;}
  nav a{padding:10px 0; border-bottom:1px solid var(--line);}
  nav a:last-child{border-bottom:none;}
  .tel-pill{display:none;}
  .nav-toggle{display:inline-flex;}
  .headbar{position:relative;}
}

/* hero */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 100% at 20% 0%, var(--ink-2) 0%, var(--ink) 55%);
  color:#eef2f4;
  padding-block:64px 0;
}
.hero .wrap{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
  padding-bottom:36px;
}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr;} }
.hero h1{font-size:clamp(2.4rem, 6vw, 4.1rem); color:#fff;}
.hero h1 em{font-style:normal; color:var(--chamois-2);}
.hero p.lead{color:#c4cdd3; font-size:1.05rem; max-width:46ch; margin-top:16px;}
.hero-ctas{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}
.hero-badges{display:flex; gap:22px; margin-top:34px; flex-wrap:wrap;}
.hero-badges div{display:flex; align-items:center; gap:8px; font-size:.82rem; color:#9fb0ba;}
.hero-badges svg{width:16px; height:16px; color:var(--chamois-2); flex-shrink:0;}

.car-stage{
  position:relative; aspect-ratio:4/3; border-radius:20px;
  background:linear-gradient(180deg, #1b2733, #0c141c);
  border:1px solid #263442;
  overflow:hidden;
}
.car-stage svg{position:absolute; inset:0; width:100%; height:100%;}
.sheen{
  position:absolute; top:0; bottom:0; width:35%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform:translateX(-140%) skewX(-12deg);
  animation:sweep 4.5s ease-in-out infinite;
}
@keyframes sweep{
  0%,15%{transform:translateX(-140%) skewX(-12deg);}
  55%,100%{transform:translateX(340%) skewX(-12deg);}
}
@media (prefers-reduced-motion: reduce){
  .sheen{animation:none; display:none;}
}

/* sections */
section{padding-block:64px;}
.section-head{max-width:60ch; margin-bottom:36px;}
.section-head h2{font-size:clamp(1.8rem,4vw,2.6rem); margin-top:6px;}
.section-head p{margin-top:12px;}

/* services */
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:960px){ .plans{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .plans{grid-template-columns:1fr;} }
.plan{
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px;
  padding:24px; display:flex; flex-direction:column; gap:14px;
  position:relative;
}
.plan.featured{border-color:var(--chamois); box-shadow:var(--shadow);}
.plan.featured::before{
  content:"Le plus choisi"; position:absolute; top:-12px; right:20px;
  background:var(--chamois); color:#1a1206; font-size:.68rem; font-weight:800;
  padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em;
}
.plan h3{font-size:1.25rem; text-transform:none; letter-spacing:0;}
.price{font-family:'Space Mono',monospace; font-size:2rem; font-variant-numeric:tabular-nums; color:var(--text);}
.price span{font-size:.9rem; color:var(--text-dim); font-family:'Work Sans';}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.plan li{display:flex; gap:8px; font-size:.88rem; color:var(--text-dim);}
.plan li svg{width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--teal);}
.price-note{font-size:.78rem; color:var(--text-dim); margin-top:8px; font-style:italic;}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:760px){ .steps{grid-template-columns:1fr;} }
.step{display:flex; flex-direction:column; gap:10px;}
.step-num{
  font-family:'Big Shoulders Display'; font-weight:800; font-size:2.4rem;
  color:transparent; -webkit-text-stroke:1.5px var(--chamois);
}
.step h3{font-size:1.1rem; text-transform:none; letter-spacing:0;}

/* zone */
.zone-band{
  background:var(--ink); color:#eef2f4; border-radius:20px;
  padding:40px; display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.zone-band .section-head p{color:#b7c2c9;}
.zone-band .section-head h2{color:#fff;}
.chips{display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start; max-width:340px;}
.chip{
  border:1px solid #2c3a45; padding:8px 14px; border-radius:999px; font-size:.85rem;
  color:#dfe6e9;
}
.chip.main{border-color:var(--chamois-2); color:var(--chamois-2); font-weight:700;}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info{display:flex; flex-direction:column; gap:18px;}
.info-row{display:flex; gap:14px; align-items:flex-start;}
.info-row svg{width:20px; height:20px; color:var(--chamois); flex-shrink:0; margin-top:2px;}
.info-row strong{display:block; font-size:.95rem;}
.info-row span{font-size:.88rem; color:var(--text-dim);}

form{
  background:var(--surface-2); border:1px solid var(--line); border-radius:18px;
  padding:26px; display:flex; flex-direction:column; gap:14px;
}
.field{display:flex; flex-direction:column; gap:6px;}
label{font-size:.8rem; font-weight:600; color:var(--text-dim);}
input, select, textarea{
  font:inherit; padding:11px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); width:100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){ .field-row{grid-template-columns:1fr;} }
textarea{resize:vertical; min-height:80px;}
.form-note{font-size:.78rem; color:var(--text-dim);}
.role-choice{display:flex; flex-direction:column; gap:8px;}
.role-option{
  display:flex; align-items:center; gap:10px; font-size:.88rem; font-weight:500;
  color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  cursor:pointer;
}
.role-option input{width:auto;}
.formule-row{display:flex; gap:10px; align-items:flex-end; margin-bottom:8px;}
.formule-row .field{flex:1;}
.formule-row .remove-row{padding:11px 14px;}
.field-prix{flex:0 0 130px !important; flex-direction:row !important; align-items:center; gap:6px !important;}
.field-prix span{font-weight:700; color:var(--text-dim);}
.vendors-grid{grid-template-columns:repeat(3,1fr);}
.vendors-grid a.plan{cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;}
.vendors-grid a.plan:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
@media (max-width:960px){ .vendors-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .vendors-grid{grid-template-columns:1fr;} }

/* chat */
.chat-box{
  display:flex; flex-direction:column; gap:10px;
  height:420px; overflow-y:auto; padding:16px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px;
  margin-bottom:14px;
}
.chat-bubble{
  max-width:75%; padding:10px 14px; border-radius:14px; font-size:.9rem;
  background:var(--surface); border:1px solid var(--line); align-self:flex-start;
}
.chat-bubble.mine{
  background:var(--chamois); color:#1a1206; border-color:var(--chamois); align-self:flex-end;
}
.chat-form{display:flex; gap:10px;}
.chat-form input{flex:1;}
.chat-meta{font-size:.7rem; opacity:.7; display:block; margin-top:4px;}

/* badges de statut */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:5px 11px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge[data-statut="en_attente"]{color:#b9770e; background:rgba(242,181,61,.16); border-color:rgba(242,181,61,.45);}
.badge[data-statut="confirme"]{color:#1e7a53; background:rgba(45,160,110,.16); border-color:rgba(45,160,110,.45);}
.badge[data-statut="termine"]{color:#2c6b7a; background:rgba(44,122,120,.16); border-color:rgba(44,122,120,.45);}
.badge[data-statut="annule"]{color:#a5352a; background:rgba(192,57,43,.14); border-color:rgba(192,57,43,.4);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badge[data-statut="en_attente"]{color:#f2b53d;}
  :root:not([data-theme="light"]) .badge[data-statut="confirme"]{color:#5fd39e;}
  :root:not([data-theme="light"]) .badge[data-statut="termine"]{color:#6fc4c2;}
  :root:not([data-theme="light"]) .badge[data-statut="annule"]{color:#ef8478;}
}

/* notifications */
.toast-stack{
  position:fixed; right:20px; bottom:20px; z-index:200;
  display:flex; flex-direction:column; gap:10px; max-width:min(360px, calc(100vw - 40px));
}
.toast{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--teal);
  border-radius:12px; padding:13px 16px; box-shadow:var(--shadow); font-size:.88rem;
  animation:toast-in .25s ease;
}
.toast.success{border-left-color:#2da06e;}
.toast.error{border-left-color:#c0392b;}
.toast.out{opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease;}
@keyframes toast-in{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}

/* chargement */
.skeleton{
  height:96px; border-radius:16px; margin-bottom:12px;
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
  background-size:200% 100%; animation:shimmer 1.3s infinite linear;
}
@keyframes shimmer{from{background-position:200% 0;} to{background-position:-200% 0;}}

/* états vides */
.empty-state{
  text-align:center; padding:44px 24px; border:1px dashed var(--line);
  border-radius:18px; background:var(--surface-2);
}
.empty-icon{font-size:2.2rem; display:block; margin-bottom:10px;}
.empty-state h3{font-size:1.15rem; text-transform:none; letter-spacing:0; margin-bottom:8px;}
.empty-state p{max-width:42ch; margin-inline:auto; margin-bottom:16px;}

/* calendrier */
.calendar{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:18px; padding:18px;
}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.cal-head strong{font-family:'Big Shoulders Display',sans-serif; font-size:1.35rem; text-transform:uppercase;}
.cal-nav{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); font-size:1.2rem; line-height:1; cursor:pointer;
}
.cal-nav:disabled{opacity:.35; cursor:not-allowed;}
.cal-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px;
  font-family:'Space Mono',monospace; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-dim); text-align:center;
}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cal-cell{
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  border:1px solid var(--line); border-radius:11px; background:var(--surface);
  color:var(--text); font:inherit; font-size:.9rem; cursor:pointer; padding:0;
  transition:border-color .12s ease, transform .12s ease;
}
.cal-cell.empty{border:none; background:none; cursor:default;}
.cal-cell:not(:disabled):hover{border-color:var(--chamois); transform:translateY(-1px);}
.cal-cell:disabled{opacity:.4; cursor:not-allowed;}
.cal-cell.selected{background:var(--chamois); border-color:var(--chamois); color:#1a1206; font-weight:700;}
.cal-dot{width:5px; height:5px; border-radius:50%; background:transparent;}
.cal-cell[data-state="free"] .cal-dot{background:#2da06e;}
.cal-cell[data-state="partial"] .cal-dot{background:#f2b53d;}
.cal-cell[data-state="full"] .cal-dot{background:#c0392b;}
.cal-legend{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:14px;
  font-size:.74rem; color:var(--text-dim);
}
.cal-legend span{display:flex; align-items:center; gap:6px;}
.cal-legend i{width:7px; height:7px; border-radius:50%; display:inline-block;}
.cal-legend i[data-state="free"]{background:#2da06e;}
.cal-legend i[data-state="partial"]{background:#f2b53d;}
.cal-legend i[data-state="full"]{background:#c0392b;}
.cal-slots{margin-top:18px;}
.cal-hint{font-size:.85rem;}
.cal-selected-date{font-weight:600; color:var(--text); margin-bottom:10px;}
.slot-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:480px){ .slot-row{grid-template-columns:1fr;} }
.slot-btn{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); cursor:pointer; font:inherit; text-align:left;
}
.slot-btn strong{font-size:.95rem;}
.slot-btn span{font-size:.78rem; color:var(--text-dim);}
.slot-btn:not(:disabled):hover{border-color:var(--chamois);}
.slot-btn.selected{border-color:var(--chamois); background:rgba(217,154,43,.12);}
.slot-btn:disabled{opacity:.45; cursor:not-allowed;}

/* pastilles de notification dans le menu */
.nav-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 6px; margin-left:7px;
  border-radius:999px; background:#c0392b; color:#fff;
  font-size:.68rem; font-weight:700; line-height:1;
}

/* avatars et profils */
.avatar{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:30px; height:30px; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg, var(--chamois-2), var(--chamois));
  color:#1a1206; font-weight:800; font-size:.72rem; letter-spacing:.02em;
}
.avatar img{width:100%; height:100%; object-fit:cover;}
.avatar-lg{width:76px; height:76px; font-size:1.5rem;}
.avatar-xl{width:110px; height:110px; font-size:2.1rem;}

.nav-user{
  display:flex; align-items:center; gap:8px;
  font-size:.88rem; color:var(--text); text-decoration:none; font-weight:500;
}
.nav-user:hover{color:var(--chamois);}

.card-author{
  display:flex; align-items:center; gap:8px;
  font-size:.83rem; color:var(--text-dim);
}
.card-author strong{color:var(--text);}
.zone-band .card-author{color:#b7c2c9;}
.zone-band .card-author strong{color:#fff;}

.profile-header{display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap;}
.profile-infos{flex:1; min-width:240px;}
.profile-infos h1{
  font-size:clamp(1.8rem, 4vw, 2.6rem); text-transform:none;
  letter-spacing:0; margin-bottom:8px;
}
.profile-bio{margin-top:12px; max-width:60ch;}
.profile-meta{
  display:flex; flex-wrap:wrap; gap:16px; margin-top:14px;
  font-size:.84rem; color:var(--text-dim);
}
.profile-meta a{color:var(--teal);}

/* notes et avis */
.stars{font-size:.85rem; color:var(--chamois); letter-spacing:.06em; white-space:nowrap;}
.stars b{color:var(--text); font-weight:700;}
.stars i{color:var(--text-dim); font-style:normal; font-size:.78rem;}
.stars.vide{color:var(--text-dim); letter-spacing:0;}

.star-picker{display:flex; gap:4px;}
.star-btn{
  background:none; border:none; cursor:pointer; padding:2px;
  font-size:1.7rem; line-height:1; color:var(--line);
}
.star-btn.on{color:var(--chamois);}
.star-btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

.review{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; margin-bottom:10px;
}
.review-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px;}
.review-head strong{font-size:.9rem;}
.review p{font-size:.88rem;}

.review-form{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:16px; margin-top:10px;
  display:flex; flex-direction:column; gap:12px;
}

/* photos des annonces */
.card-cover{
  width:calc(100% + 48px); margin:-24px -24px 4px; height:150px;
  object-fit:cover; border-radius:16px 16px 0 0; display:block;
}
.gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px;}
.gallery img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:14px; border:1px solid var(--line);
}
.photo-grid{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px;}
.photo-thumb{position:relative; width:100px; height:75px;}
.photo-thumb img{width:100%; height:100%; object-fit:cover; border-radius:10px; border:1px solid var(--line);}
.photo-thumb button{
  position:absolute; top:-7px; right:-7px; width:22px; height:22px; padding:0;
  border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:#c0392b; font-size:.8rem; line-height:1; cursor:pointer;
}

/* encart d'avertissement / sécurité */
.notice{
  background:rgba(242,181,61,.12); border:1px solid rgba(242,181,61,.5);
  border-radius:14px; padding:14px 18px; margin-bottom:16px;
}
.notice strong{display:block; font-size:.88rem; margin-bottom:5px; color:var(--text);}
.notice p{font-size:.83rem; line-height:1.5; margin:0;}

/* récapitulatif de réservation */
.recap{
  display:flex; flex-direction:column; gap:6px;
  background:rgba(44,122,120,.1); border:1px solid var(--teal);
  border-radius:14px; padding:16px 18px; margin-bottom:16px; font-size:.89rem;
}
.recap strong{
  font-family:'Space Mono',monospace; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--teal); margin-bottom:4px;
}

/* créneaux fixes proposés par le vendeur */
.fixed-slots{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px;}

/* choix du mode de réservation */
.mode-toggle{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:640px){ .mode-toggle{grid-template-columns:1fr;} }
.mode-option{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; padding:14px 16px;
}
.mode-option input{width:auto; margin-top:3px;}
.mode-option span{display:flex; flex-direction:column; gap:4px;}
.mode-option strong{font-size:.92rem;}
.mode-option small{font-size:.78rem; color:var(--text-dim); line-height:1.4;}
.mode-option:has(input:checked){border-color:var(--chamois); background:rgba(217,154,43,.1);}

/* jours de disponibilité (formulaire vendeur) */
.days-picker{display:flex; flex-wrap:wrap; gap:8px;}
.day-chip{
  display:flex; align-items:center; gap:7px; padding:8px 13px;
  border:1px solid var(--line); border-radius:999px; font-size:.82rem; cursor:pointer;
}
.day-chip input{width:auto;}
.day-chip:has(input:checked){border-color:var(--chamois); background:rgba(217,154,43,.12); font-weight:600;}

/* FAQ */
.faq-list{display:flex; flex-direction:column; gap:10px; max-width:760px;}
details.faq{
  border:1px solid var(--line); border-radius:14px; padding:16px 20px;
  background:var(--surface-2);
}
details.faq summary{
  cursor:pointer; font-weight:600; font-size:.95rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+"; color:var(--chamois); font-size:1.3rem; line-height:1;}
details.faq[open] summary::after{content:"–";}
details.faq p{margin-top:10px; font-size:.9rem;}

/* bandeau de chiffres */
.stat-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px;
  border-top:1px solid #2a3742; padding-top:26px;
}
@media (max-width:640px){ .stat-row{grid-template-columns:1fr; gap:20px;} }
.stat-row div strong{
  display:block; font-family:'Big Shoulders Display',sans-serif; font-size:2rem;
  color:var(--chamois-2); line-height:1;
}
.stat-row div span{font-size:.82rem; color:#9fb0ba;}

/* cartes "pourquoi" */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:860px){ .feature-grid{grid-template-columns:1fr;} }
.feature{
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:24px;
}
.feature-icon{
  width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(217,154,43,.15); color:var(--chamois); margin-bottom:14px; font-size:1.3rem;
}
.feature h3{font-size:1.05rem; text-transform:none; letter-spacing:0; margin-bottom:8px;}
.feature p{font-size:.88rem;}

/* apparition au scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}
.form-status{
  font-size:.85rem; color:var(--teal); background:color-mix(in srgb, var(--teal) 12%, transparent);
  border:1px solid var(--teal); border-radius:10px; padding:10px 14px; margin:0;
}

footer{
  border-top:1px solid var(--line); padding-block:28px;
  font-size:.82rem; color:var(--text-dim);
}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
footer strong{color:var(--text);}

/* stats admin */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:760px){ .stats-grid{grid-template-columns:repeat(2,1fr);} }
.stat-card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px;
  padding:20px; display:flex; flex-direction:column; gap:6px;
}
.stat-value{font-family:'Space Mono',monospace; font-size:1.7rem; font-weight:700; color:var(--text);}
.stat-label{font-size:.8rem; color:var(--text-dim);}

/* table admin */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px;}
table{width:100%; border-collapse:collapse; background:var(--surface);}
th, td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-size:.86rem; vertical-align:middle;}
tr:last-child td{border-bottom:none;}
th{font-family:'Space Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); background:var(--surface-2);}
td a{color:var(--teal);}

/* =====================================================================
   COMPLÉMENTS : boutons, cartes, formulaires, pages dédiées
   ===================================================================== */

/* boutons */
.btn-sm{padding:8px 15px; font-size:.83rem;}
.btn-lg{padding:14px 26px; font-size:.98rem;}
.btn-block{width:100%;}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none !important;}
.btn-link{
  background:none; border:none; padding:8px 4px; box-shadow:none;
  color:var(--text-dim); font-weight:600; text-decoration:underline; text-underline-offset:3px;
}
.btn-link:hover{color:var(--text);}
.btn-danger{color:#c0392b;}
.btn-danger:hover{color:#992d22;}
.btn-on-dark{color:#fff; border-color:#3a4750;}
.btn-on-dark:hover{border-color:var(--chamois-2);}
.btn-primary:hover{box-shadow:0 14px 30px -12px rgba(217,154,43,.65);}

/* navigation : page active */
nav a[aria-current="page"]{color:var(--text); font-weight:600; position:relative;}
@media (min-width:761px){
  nav a[aria-current="page"]::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background:var(--chamois); border-radius:2px;
  }
}
nav a{display:inline-flex; align-items:center; white-space:nowrap;}
.logo{white-space:nowrap;}
.nav-user{white-space:nowrap;}
@media (max-width:1180px){
  nav{gap:16px;}
  nav a{font-size:.86rem;}
}
/* Menu burger dès que les liens ne tiennent plus sur une ligne */
@media (max-width:1040px){
  nav{
    display:none; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:10px 20px 16px; box-shadow:var(--shadow);
  }
  nav.nav-open{display:flex;}
  nav a{padding:12px 0; border-bottom:1px solid var(--line); font-size:.95rem;}
  nav a:last-child{border-bottom:none;}
  .nav-toggle{display:inline-flex;}
  .headbar{position:relative;}
}
.nav-mobile-only{display:none !important;}
@media (max-width:560px){
  .nav-cta-large{display:none !important;}
  nav.nav-open .nav-mobile-only{display:inline-flex !important; color:var(--chamois); font-weight:700;}
  .headbar{gap:10px;}
}
@media (max-width:760px){
  .nav-user-name{display:none;}
  .nav-cta{gap:8px;}
  .nav-cta .btn{padding:8px 12px; font-size:.8rem;}
}

/* hero compact (pages intérieures) + barre de recherche */
.hero-compact{padding-block:48px 8px;}
.hero-compact h1{font-size:clamp(2rem, 5vw, 3.1rem);}
.search-bar{
  display:grid; grid-template-columns:1fr 170px auto; gap:12px; align-items:end;
  margin-top:28px; max-width:760px; padding:14px;
  background:rgba(255,255,255,.06); border:1px solid #2a3742; border-radius:18px;
}
.search-bar label{color:#b7c2c9;}
.search-bar input, .search-bar select{background:#fff; color:#14202b; border-color:transparent;}
.search-bar .btn{height:46px;}
.search-bar-simple{grid-template-columns:1fr; max-width:420px;}
@media (max-width:640px){ .search-bar{grid-template-columns:1fr;} }
.result-count{font-size:.85rem; font-weight:600; color:var(--text-dim);}

/* cartes d'annonce */
.listing-card{gap:10px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.listing-card:hover{box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--chamois) 45%, var(--line));}
.card-cover-vide{
  display:flex; align-items:center; justify-content:center; font-size:2.4rem;
  background:linear-gradient(135deg, var(--ink-2), var(--ink)); height:110px;
}
.card-lieu{font-size:.82rem;}
.card-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; padding-top:6px;}
.card-foot .price{font-size:1.5rem;}
.card-author-link{text-decoration:none; width:fit-content; border-radius:999px;}
.card-author-link:hover strong{color:var(--chamois);}
.formules-mini{font-size:.85rem;}
.formules-mini li{justify-content:space-between;}
.formules-mini b{color:var(--text);}

/* cartes de réservation */
.booking-card{margin-bottom:14px; gap:10px;}
.booking-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.booking-head h3{text-transform:none; letter-spacing:0;}
.booking-quand{color:var(--text); font-weight:600;}
.booking-aide{font-size:.84rem; font-style:italic;}
.booking-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:4px;}
.booking-passee{opacity:.72;}
.booking-a-traiter{border-color:var(--chamois); box-shadow:0 0 0 3px rgba(217,154,43,.12);}
.booking-message{
  margin:0; padding:10px 14px; border-left:3px solid var(--chamois);
  background:var(--surface); border-radius:0 10px 10px 0; font-size:.88rem; color:var(--text);
  white-space:pre-line;
}
.prix-inline{font-family:'Space Mono',monospace; color:var(--chamois);}

/* barre de progression d'une réservation */
.progress{
  list-style:none; margin:2px 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.progress li{
  font-size:.72rem; font-weight:600; color:var(--text-dim);
  padding-top:10px; border-top:4px solid var(--line); border-radius:2px;
}
.progress li.on{color:var(--teal); border-top-color:var(--teal);}

/* page d'annonce */
.annonce-hero{
  background:radial-gradient(120% 100% at 20% 0%, var(--ink-2) 0%, var(--ink) 60%);
  color:#eef2f4; padding-block:56px;
}
.annonce-hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;}
@media (max-width:860px){ .annonce-hero-grid{grid-template-columns:1fr;} }
.annonce-hero h1{font-size:clamp(2.1rem, 5vw, 3.4rem); color:#fff; margin:8px 0 16px; text-transform:none; letter-spacing:0;}
.annonce-hero .card-author{color:#b7c2c9; margin-bottom:14px;}
.annonce-hero .card-author strong{color:#fff;}
.annonce-hero .stars b{color:#fff;}
.annonce-hero .stars i, .annonce-hero .stars.vide{color:#9fb0ba;}
.annonce-meta{display:flex; flex-wrap:wrap; gap:10px 18px; font-size:.86rem; color:#c4cdd3; align-items:center;}
.annonce-description{color:#c4cdd3; margin-top:18px; max-width:62ch; white-space:pre-line;}
.annonce-cover{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:20px; border:1px solid #263442;}

.notice-info{background:rgba(44,122,120,.1); border-color:rgba(44,122,120,.45);}
.success-panel{
  text-align:center; padding:36px 24px; border-radius:18px;
  background:var(--surface); border:1px solid var(--teal);
}
.success-icon{font-size:2.6rem; display:block; margin-bottom:8px;}
.success-panel h3{font-size:1.6rem; margin-bottom:10px;}
.success-panel p{max-width:52ch; margin-inline:auto;}
.review-date{font-size:.76rem; margin-top:6px;}
.report-form{margin-top:16px;}

/* formulaires structurés (annonce, profil) */
.annonce-form{margin-top:8px; max-width:720px; gap:20px;}
.annonce-form > h3{font-size:1.5rem; text-transform:none; letter-spacing:0;}
.annonce-form fieldset{
  border:1px solid var(--line); border-radius:14px; padding:18px; margin:0;
  display:flex; flex-direction:column; gap:14px; background:var(--surface);
}
.annonce-form legend{
  font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--chamois); padding:0 6px;
}
.requis{color:#c0392b;}
.upload-zone{
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  padding:18px; border:1.5px dashed var(--line); border-radius:12px; cursor:pointer;
  color:var(--text); font-size:.9rem;
}
.upload-zone:hover{border-color:var(--chamois);}
.upload-zone input, .upload-btn input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.upload-zone small{font-weight:400; color:var(--text-dim); font-size:.76rem;}
.upload-btn{position:relative; cursor:pointer;}
.form-error{color:#a5352a; background:rgba(192,57,43,.08); border-color:rgba(192,57,43,.45);}

/* profils */
.avatar-md{width:52px; height:52px; font-size:1.05rem;}
.avatar-edit{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.vendeur-card{margin-bottom:14px; gap:12px;}
.vendeur-card-head{display:flex; align-items:center; gap:14px;}
.vendeur-card-head h3{text-transform:none; letter-spacing:0; margin-bottom:4px;}

/* chat */
.lien-retour{display:inline-block; font-size:.85rem; color:var(--text-dim); text-decoration:none; margin-bottom:18px;}
.lien-retour:hover{color:var(--text);}
.chat-header{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap;}
.chat-header h2{font-size:clamp(1.6rem, 4vw, 2.2rem); margin-top:6px; text-transform:none; letter-spacing:0;}
.chat-context{font-size:.85rem; margin:10px 0 18px;}
.chat-vide{text-align:center; margin:auto; font-size:.88rem; max-width:34ch;}
.chat-bubble{white-space:pre-wrap; overflow-wrap:anywhere;}

/* pages de connexion */
.page-auth{min-height:100vh; background:radial-gradient(90% 70% at 50% 0%, var(--surface-2) 0%, var(--surface) 70%);}
.auth-section{padding-block:48px 72px;}
.auth-card{
  max-width:460px; margin-inline:auto; padding:30px;
  background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
}
.auth-card form{background:none; border:none; padding:0;}
.auth-tabs{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; background:var(--surface-2); border-radius:999px; margin-bottom:24px;}
.auth-tab{
  border:none; background:none; padding:10px; border-radius:999px; cursor:pointer;
  font:inherit; font-weight:600; font-size:.88rem; color:var(--text-dim);
}
.auth-tab[aria-selected="true"]{background:var(--surface); color:var(--text); box-shadow:0 2px 10px -4px rgba(15,23,32,.25);}
.auth-title{font-size:2rem; text-transform:none; letter-spacing:0;}
.auth-sub{margin:8px 0 22px;}
.auth-foot{text-align:center; font-size:.86rem;}
.auth-foot a{color:var(--teal);}
.password-wrap{position:relative;}
.password-wrap input{padding-right:46px;}
.password-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:1rem; padding:6px;
}
label small{font-weight:400;}

/* pseudo facultatif */
.label-ligne{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.btn-link-mini{
  background:none; border:none; padding:0; cursor:pointer; font:inherit;
  font-size:.8rem; font-weight:600; color:var(--teal); text-decoration:underline; text-underline-offset:3px;
}
.btn-link-mini:hover{color:var(--text);}
.pseudo-bloc{display:flex; flex-direction:column; gap:12px;}
.pseudo-etat{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2);
}
.pseudo-etat strong{display:block; font-size:1.05rem; margin:2px 0 4px;}
.label-mini{font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim);}
.pseudo-saisie{display:flex; gap:10px; align-items:center;}
.pseudo-saisie input{flex:1;}
@media (max-width:520px){ .pseudo-saisie{flex-direction:column; align-items:stretch;} }

/* messagerie d'aide */
.conversation-ligne{
  flex-direction:row; align-items:center; gap:14px; margin-bottom:12px;
  text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.conversation-ligne:hover{border-color:var(--chamois); box-shadow:var(--shadow);}
.conversation-texte{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.conversation-texte h3{text-transform:none; letter-spacing:0; font-size:1.1rem;}
.conversation-texte p{font-size:.86rem; overflow:hidden; text-overflow:ellipsis;}
.chat-auteur{display:block; font-size:.72rem; color:var(--teal); margin-bottom:3px;}

/* comptes (admin) */
.sous-titre-admin{font-size:1.3rem; text-transform:none; letter-spacing:0; margin:28px 0 12px;}
.ligne-bannie td{opacity:.6;}
.ligne-bannie td:last-child, .ligne-bannie td:nth-last-child(2){opacity:1;}

/* Listes repliables (admin) */
.repli-btn{
  display:inline-flex; align-items:center; gap:12px;
  background:none; border:0; padding:0; margin:0;
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  text-align:left; cursor:pointer;
}
.repli-btn:focus-visible{outline:2px solid var(--teal); outline-offset:4px; border-radius:6px;}
.repli-fleche{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface);
  color:var(--text);
  transition:transform .2s ease, border-color .2s ease;
}
.repli-fleche svg{width:18px; height:18px;}
.repli-btn:hover .repli-fleche{border-color:var(--chamois);}
.repli-btn[aria-expanded="false"] .repli-fleche{transform:rotate(-90deg);}

/* Aide côté équipe : qui a répondu */
.aide-etat{display:inline-block; align-self:flex-start; font-size:.74rem; font-weight:600; border-radius:999px; padding:2px 10px; margin:2px 0 4px;}
.aide-etat-attente{background:rgba(217,154,43,.16); color:#8a5a08;}
.aide-etat-ok{background:rgba(44,122,120,.13); color:var(--teal);}
.chat-bubble.mine .chat-auteur{color:#1a1206; opacity:.75;}
/* Réponse d'un coéquipier : même côté que les vôtres, mais d'une autre couleur */
.chat-bubble.coequipier{background:var(--teal); border-color:var(--teal); color:#fff;}
.chat-bubble.mine.coequipier .chat-auteur{color:#fff; opacity:.9;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .aide-etat-attente{color:var(--chamois-2);} }

/* Liens légaux en pied de page */
footer .footer-legal{flex-basis:100%; font-size:.8rem;}
footer .footer-legal a{color:inherit;}

/* Pages légales */
.page-legale{max-width:760px;}
.page-legale h1{font-size:clamp(2rem, 5vw, 3rem); margin:4px 0 6px;}
.page-legale h2{font-size:1.35rem; margin:34px 0 10px;}
.page-legale p, .page-legale li{line-height:1.65; color:var(--text);}
.page-legale ul{padding-left:20px; display:grid; gap:6px;}
.page-legale .maj{color:var(--text-dim); font-size:.85rem;}
.page-legale table{font-size:.86rem;}
.a-completer{background:#fff3c4; color:#6b4b00; border-radius:4px; padding:0 4px; font-weight:600;}

/* Avis vérifiés */
.avis-verifies{font-size:.85rem; color:var(--text-dim); margin-top:8px; max-width:640px;}
.btn-link-mini.btn-danger{color:#c0392b;}

/* Case d'acceptation des conditions à l'inscription */
.case-cgu{display:flex; gap:10px; align-items:flex-start; font-size:.85rem; line-height:1.5; margin:4px 0 14px; cursor:pointer;}
.case-cgu input{margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--chamois);}

/* Suppression du compte */
.zone-danger{margin-top:40px; padding:20px 22px; border:1px solid rgba(192,57,43,.4); border-radius:14px; background:rgba(192,57,43,.04);}
.zone-danger h3{font-size:1.2rem; text-transform:none; letter-spacing:0; color:#c0392b; margin-bottom:6px;}
.zone-danger p{font-size:.88rem; line-height:1.55; margin-bottom:10px;}
.btn-danger-plein{background:#c0392b; color:#fff; border-color:#c0392b;}
.btn-danger-plein:hover:not(:disabled){background:#992d22;}
.btn-danger-plein:disabled{opacity:.45; cursor:not-allowed;}

/* Page 404 */
.page-404{text-align:center; padding:80px 0 100px;}
.page-404 .wrap{max-width:620px;}
.code-404{font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:clamp(6rem, 22vw, 11rem); line-height:1; color:var(--chamois); margin:0;}
.page-404 h1{font-size:clamp(1.8rem, 5vw, 2.6rem); margin:6px 0 12px;}
.page-404 p{color:var(--text-dim); margin-bottom:26px;}
.actions-404{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

.auth-legal{text-align:center; font-size:.78rem; color:var(--text-dim); margin-top:18px;}
.auth-legal a{color:inherit;}