/* Demander une visite de terrain (page publique) — identité Agreen « Bande de tonte », comme l'espace client.
   Sapin pour le texte et la marque, Gazon pour les actions, Pré en fond, Balise pour le focus. */
:root{
  --sapin:#12382b;--gazon:#1e6e45;--gazon-fonce:#155535;--tonte:#d7e4cf;--tonte-pale:#e7eee2;--pre:#eef2ea;--balise:#f2c230;
  --doux:#566a5f;--ligne:#d4ddd1;--ligne-forte:#b9c8b5;--rouge:#b23a2f;
  --bandes:repeating-linear-gradient(118deg,#1e6e45 0 22px,#2a7d50 22px 44px);
  --display:'Bricolage Grotesque','Atkinson Hyperlegible Next',system-ui,sans-serif;
  --body:'Atkinson Hyperlegible Next','Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-family:var(--body);color:var(--sapin);background:var(--pre)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--pre);line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
button,input,select,textarea{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--display);font-optical-sizing:auto;letter-spacing:-.015em;text-wrap:balance}
:focus-visible{outline:3px solid var(--balise);outline-offset:2px}
.hidden{display:none!important}
::selection{background:var(--tonte);color:var(--sapin)}

/* Barre du haut : la bande de tonte et la marque */
.site-top{border-top:5px solid transparent;border-image:var(--bandes) 1;background:var(--pre)}
.site-top-inner{max-width:680px;margin:0 auto;padding:.8rem 1.1rem;display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.03em}
.site-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--sapin);color:#fff;font-size:1.05rem}

.wrap{max-width:680px;margin:0 auto;padding:clamp(.6rem,3vw,1.6rem) 1.1rem 3rem}

.page-header{margin-bottom:clamp(1.1rem,4vw,1.6rem)}
.page-header h1{font-size:clamp(1.9rem,7vw,2.7rem);font-weight:750;line-height:1.05;letter-spacing:-.03em;margin:0;max-width:16ch}
.page-header p{color:var(--doux);margin:.7rem 0 0;max-width:48ch;font-size:clamp(1rem,2.6vw,1.08rem)}

.card{background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:clamp(1.15rem,4.5vw,2rem)}

.honeypot{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}

/* Deux étapes : vos coordonnées, puis votre jardin. */
#visit-form{counter-reset:etape}
.field-group{margin-bottom:1.5rem}
.field-group h2{counter-increment:etape;font-size:1.15rem;font-weight:700;margin:0 0 .9rem;display:flex;align-items:center;gap:.6rem}
.field-group h2::before{content:counter(etape);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sapin);color:#fff;font-size:.9rem;font-weight:800;flex:0 0 auto}
.field-group label{display:block;font-size:.9rem;font-weight:700;margin-bottom:.8rem}
.field-group input,.field-group select,.field-group textarea{width:100%;margin-top:.35rem;border:1.5px solid var(--ligne-forte);border-radius:10px;padding:.8rem .85rem;outline:0;background:#fff;font-size:1rem;transition:border-color .15s,box-shadow .15s}
.field-group select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231e6e45' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9rem center;padding-right:2.4rem}
.field-group input:hover,.field-group select:hover,.field-group textarea:hover{border-color:var(--doux)}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus{border-color:var(--gazon);box-shadow:0 0 0 3px rgba(242,194,48,.45)}
.field-group input::placeholder,.field-group textarea::placeholder{color:#8a9a90}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}

.btn-primary,.btn-secondary{border:0;border-radius:10px;padding:.9rem 1.1rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.55rem;cursor:pointer;width:100%;min-height:52px;font-size:1rem;transition:background .15s,opacity .15s}
.btn-primary{color:#fff;background:var(--gazon)}
.btn-primary:hover:not(:disabled){background:var(--gazon-fonce)}
.btn-primary:disabled{opacity:.6;cursor:wait}
.btn-secondary{background:#fff;color:var(--gazon-fonce);border:1.5px solid var(--gazon);margin-top:.6rem}
.btn-secondary:hover:not(:disabled){background:var(--pre)}
.btn-primary svg,.btn-secondary svg{width:18px;flex:0 0 auto}

.success-panel{text-align:center;padding:clamp(2rem,7vw,2.75rem) 1.5rem}
.success-panel svg{width:60px;height:60px;padding:12px;border-radius:50%;background:var(--tonte-pale);color:var(--gazon);margin-bottom:1rem;animation:pop .35s ease both}
.success-panel h2{margin:.2rem 0 .4rem;font-size:1.6rem}
.success-panel p{color:var(--doux);max-width:38ch;margin:0 auto 1.4rem}
.success-panel .btn-secondary{max-width:320px;margin:0 auto}

.toast{position:fixed;z-index:100;top:1rem;left:50%;transform:translate(-50%,-140%);padding:.8rem 1.1rem;border-radius:10px;background:var(--sapin);color:#fff;font-weight:700;transition:transform .25s;max-width:min(90vw,520px);text-align:center}
.toast.active{transform:translate(-50%,0)}
.toast.error{background:var(--rouge)}
.toast.success{background:var(--gazon)}

.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}

@media(max-width:480px){
  .field-row{grid-template-columns:1fr;gap:0}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.legal { margin: 1.4rem 0 0; color: var(--doux); font-size: .78rem; line-height: 1.5; text-align: center; }

/* Réservation : magasins et semaines */
#booking-form { counter-reset: etape; }
.hint { color: var(--doux); font-size: .92rem; margin: 0 0 .7rem; }
.hint.center { text-align: center; margin-top: .8rem; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.choice, .week { display: grid; gap: .15rem; text-align: left; padding: .8rem .9rem; border: 1.5px solid var(--ligne-forte); border-radius: 10px; background: #fff; color: var(--sapin); font: inherit; font-weight: 700; cursor: pointer; min-height: 50px; }
.choice:hover, .week:hover:not(:disabled) { border-color: var(--gazon); background: var(--pre); }
.choice.is-active, .week.is-active { background: var(--sapin); border-color: var(--sapin); color: #fff; }
.week-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.week small { font-weight: 400; color: var(--doux); }
.week.is-active small { color: var(--balise); }
.week:disabled { opacity: .5; cursor: not-allowed; }
.success-mark { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--tonte-pale); color: var(--gazon); font-size: 1.8rem; font-weight: 800; margin-bottom: .8rem; }
#cancel-panel .btn-primary, #cancel-panel .btn-secondary { max-width: 320px; margin: .5rem auto 0; text-decoration: none; }
.legal { margin: 1.4rem 0 0; color: var(--doux); font-size: .78rem; line-height: 1.5; text-align: center; }