/* Roucky&Friends — style natif, sans Tailwind, React, Node ni dépendance JS. */
:root {
 --bg:oklch(0.965 0.018 80); --ink:oklch(0.3 0.04 50); --card:oklch(0.99 0.01 80);
 --primary:oklch(0.45 0.07 50); --on-primary:oklch(0.97 0.015 80);
 --secondary:oklch(0.9 0.035 75); --muted-ink:oklch(0.5 0.04 55);
 --accent:oklch(0.7 0.09 60); --border:oklch(0.86 0.03 75); --whatsapp:oklch(0.6 0.15 150);
 --shadow:0 12px 30px -14px oklch(0.4 0.06 50 / 0.35);
 --display:'Fraunces',Georgia,serif; --body:'Nunito',system-ui,sans-serif;
}
* {box-sizing:border-box}
html {min-height:100%; scroll-behavior:smooth}
body {min-width:280px; margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.55 var(--body); min-height:100vh; display:flex; flex-direction:column}
a {color:inherit}a:hover {text-decoration-color:currentColor}
button,input,textarea {font:inherit}
h1,h2,h3 {font-family:var(--display);font-weight:500;line-height:1.2;margin:0}
p {margin:0}
.container {width:min(100% - 2rem, 1024px);margin-inline:auto}.narrower {max-width:768px}
.site-header {position:sticky;top:0;z-index:30; background:color-mix(in oklch,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.header-inner {padding:12px 0;display:flex;flex-direction:column;gap:8px;justify-content:space-between}
.brand {display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;width:max-content}
.brand-logo {display:block;height:56px;width:auto;max-width:min(100%, 360px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.nav {display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;padding:2px 0;white-space:nowrap}
.nav-item {border-radius:999px;display:inline-flex;align-items:center;padding:6px 12px;color:var(--muted-ink);font-size:14px;text-decoration:none;line-height:1.4;flex:none}
.nav-item:hover {background:var(--secondary)}.nav-item.active,.nav-item.active:hover {color:var(--on-primary);background:var(--primary)}
main {flex:1 0 auto}
.btn {display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;color:var(--on-primary);text-decoration:none;font-size:16px;font-weight:700;line-height:1.5;transition:filter .15s ease;cursor:pointer;box-shadow:none}
.btn:hover{filter:brightness(1.1)}.btn:focus-visible,.nav-item:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn-primary {background:var(--primary)}.btn-whatsapp {background:var(--whatsapp);box-shadow:0 4px 8px -3px rgba(0,0,0,.25)}.icon-sm {width:20px;height:20px}
.hero {padding-top:40px;padding-bottom:48px;display:grid;gap:32px;align-items:center}
.eyebrow {font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.hero h1 {margin-top:12px;color:var(--primary);font-size:clamp(36px, 4vw, 48px);line-height:1.15}
.hero-description {margin-top:16px;color:var(--muted-ink)}
.hero-area {margin-top:16px}
.service-area {font-size:14px;color:var(--muted-ink)}
.hero-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-image {width:100%;height:auto;object-fit:contain;border-radius:16px;box-shadow:0 20px 25px -5px rgba(0,0,0,.14),0 8px 10px -6px rgba(0,0,0,.12)}
.services {padding-bottom:64px}.cards-grid {display:grid;grid-template-columns:1fr;gap:16px}
.card {background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}
.service-card {padding:24px}.service-icon {width:32px;height:32px;color:var(--accent)}
.service-card h2 {margin-top:12px;color:var(--primary);font-size:20px}.service-card p {margin-top:8px;font-size:14px;color:var(--muted-ink)}
.services-more {display:block;text-align:center;margin-top:16px;color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.page-heading {text-align:center;padding-top:48px;padding-bottom:24px}.page-heading h1 {font-size:clamp(36px,5vw,48px);color:var(--primary)}.page-heading p {color:var(--muted-ink);margin-top:12px}
.rates {padding-bottom:64px}.rates-area {text-align:center;padding-bottom:16px}.rate-card {padding:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.rate-card h2 {font-size:18px;color:var(--primary)}.rate-card>div>p {font-size:14px;color:var(--muted-ink);margin-top:2px}
.rate-price {font:500 30px/1.15 var(--display);color:var(--primary);white-space:nowrap}.rate-price span {font:400 14px var(--body);color:var(--muted-ink)}
.rates-action{text-align:center;padding-top:24px}
.biography {padding-bottom:64px}.prose-card {padding:24px;display:flex;flex-direction:column;gap:16px;line-height:1.65}.signature {font:500 20px var(--display);color:var(--primary)}
.reviews {padding-bottom:64px}.review-card {margin:0;padding:24px}.stars {display:flex;gap:2px;color:var(--accent)}.star-icon {height:16px;width:16px;fill:currentColor}
.review-card blockquote {margin:12px 0 0;font-size:14px;line-height:1.65}.review-card figcaption {margin-top:16px;font-size:16px;color:var(--primary)}.review-card figcaption span {font-weight:400;color:var(--muted-ink)}
.reviews-action {padding-top:16px;text-align:center}
.booking {max-width:672px;padding-bottom:64px}.booking-card {padding:32px;text-align:center}.booking-icon {width:40px;height:40px;color:var(--accent);display:block;margin:0 auto}
.booking-card h2 {margin-top:12px;color:var(--primary);font-size:24px}.booking-card p {margin-top:12px;color:var(--muted-ink)}.booking-action {margin-top:24px}
.legal-body {max-width:768px;padding-bottom:64px;display:flex;flex-direction:column;gap:32px;line-height:1.7}
.legal-note {border-left:4px solid var(--accent);padding-left:16px;color:var(--muted-ink);font-size:14px}
.legal-section {display:flex;flex-direction:column;gap:12px}.legal-section h2 {color:var(--primary);font-size:24px}.legal-section h3 {color:var(--primary);font-size:18px}
.legal-section ul {padding-left:24px;margin:0;display:flex;flex-direction:column;gap:8px}.legal-section a {color:var(--primary);text-underline-offset:4px}
.site-footer {padding:32px 16px;text-align:center;border-top:1px solid var(--border);background:color-mix(in oklch, var(--secondary) 60%, transparent);font-size:14px;color:var(--muted-ink)}
.footer-contact {margin-top:16px}.legal-links {display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:center;margin-top:24px}.legal-links a {text-decoration:underline;text-underline-offset:4px}
.footer-info {margin-top:12px}.footer-info:last-child {margin-top:8px}
.not-found {padding:100px 16px;text-align:center}.not-found h1 {font-size:80px;color:var(--primary)}.not-found p {margin:12px 0 30px}
@media(min-width:640px){.header-inner{flex-direction:row;align-items:center}.cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.prose-card{padding:32px}}
@media(min-width:768px){.hero{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.brand-logo{height:46px;max-width:260px}.rate-card{align-items:flex-start}.rate-price{font-size:25px}.rate-price span{font-size:12px}.hero{padding-top:28px}.page-heading{padding-top:36px}.nav-item{padding:6px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

.review-actions-stack{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
.review-form-wrap{max-width:760px}
.review-form-card{text-align:left}
.review-form{display:grid;gap:14px;margin-top:20px}
.review-form label{display:grid;gap:6px;font-weight:700;color:var(--primary)}
.review-form label span{font-size:14px}
.review-form input,.review-form textarea,.review-form select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:#fff;color:var(--ink)}
.review-form textarea{resize:vertical;min-height:140px}
.form-errors{margin-top:18px;padding:14px 16px;border-radius:14px;border:1px solid #e6b8b8;background:#fff5f5;color:#7a2a2a}
.form-errors p + p{margin-top:8px}
.generated-link-box{margin-top:24px;padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--border)}
.generated-link-box h3{margin-bottom:8px;color:var(--primary)}
.generated-link-box input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px}
code{background:rgba(0,0,0,.05);padding:.15rem .35rem;border-radius:.45rem}

/* Choix d'étoiles, utilisable au clavier et au toucher, sans JavaScript */
.rating-selector{border:0;padding:0;margin:0;min-width:0}
.rating-selector legend{font-size:14px;font-weight:700;color:var(--primary);padding:0 0 6px}
.rating-stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:5px;position:relative}
.rating-stars input{position:absolute;opacity:0;width:1px;height:1px}
.rating-stars label{font-family:Arial,sans-serif;color:#d8d1c7;font-size:clamp(36px,6vw,48px);line-height:1.2;cursor:pointer;transition:color .15s,transform .15s;user-select:none}
.rating-stars input:checked~label,.rating-stars label:hover,.rating-stars label:hover~label{color:#c58b3b}
.rating-stars input:focus-visible+label{outline:3px solid #8b5e3c;outline-offset:2px;border-radius:5px}
.rating-stars label:active{transform:scale(.9)}
.rating-help{font-size:13px;color:var(--muted-ink);margin-top:2px}
.admin-logout-form{margin-top:22px}
.admin-logout{border:0;background:transparent;cursor:pointer;color:var(--muted-ink);text-decoration:underline}
.empty-reviews{margin:16px auto;text-align:center;max-width:520px;color:var(--muted-ink)}
@media(prefers-reduced-motion:reduce){.rating-stars label{transition:none}}

.review-form .review-consent{display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-weight:400}
.review-form .review-consent input{width:18px;height:18px;flex:0 0 18px;margin-top:4px;accent-color:#8b5a36}
.review-form .review-consent span{font-weight:400;line-height:1.5;color:var(--muted-ink)}

.review-date{display:inline-block;font-size:12px;color:var(--muted-ink)}

/* Roucky&Friends – modules PHP natifs (réservation, planning, espace privé) */
.feature-page{padding-bottom:64px}
.feature-panel{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:16px}
.feature-panel h2,.feature-panel h3,.section-heading h2{color:var(--primary)}
.feature-panel h2,.section-heading h2{font-size:clamp(23px,3vw,29px)}
.feature-kicker{display:block;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.feature-heading,.record-heading,.section-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}
.feature-step{font-size:13px;color:var(--muted-ink);white-space:nowrap}
.feature-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.feature-form{display:grid;gap:16px;margin-top:4px}
.feature-form label{display:flex;flex-direction:column;gap:6px;color:var(--primary);font-size:14px;font-weight:700}
.feature-form input:not([type=checkbox]):not([type=file]),.feature-form textarea,.feature-form select,.share-created input,.inline-form select{min-width:0;width:100%;padding:12px 14px;background:#fff;color:var(--ink);border:1px solid var(--border);border-radius:12px;font-family:var(--body);font-size:15px}
.feature-form input[type=file]{font-size:13px;padding:10px 0;max-width:100%}
.feature-form textarea{resize:vertical}
.feature-form input:focus-visible,.feature-form select:focus-visible,.feature-form textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.form-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.feature-form .checkbox-line{display:flex;flex-direction:row;align-items:flex-start;gap:10px;color:var(--muted-ink);font-weight:400}
.checkbox-line input{margin-top:4px;flex-shrink:0}
.checkbox-line span{font-weight:400}
.checkbox-line a,.field-tip a,.section-heading a{color:var(--primary);text-underline-offset:3px}
.field-tip{font-size:13px;color:var(--muted-ink);line-height:1.6}
.honey{position:absolute;left:-10000px;height:1px;overflow:hidden}
.feature-success{border-color:var(--accent)}
.btn-light{background:var(--secondary);color:var(--primary)}
button:disabled{opacity:.45;cursor:not-allowed}
.calendar-top{display:flex;align-items:center;justify-content:space-between;gap:18px}.calendar-paging{display:flex;gap:6px}
.pill-link{display:flex;align-items:center;justify-content:center;border:1px solid var(--border);width:38px;height:38px;border-radius:50%;text-decoration:none;font-size:24px;color:var(--primary)}
.pill-link:hover{background:var(--secondary)}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;text-align:center}
.calendar-weekday{font-size:12px;font-weight:800;color:var(--muted-ink);padding:8px 0}
.calendar-day{height:clamp(36px,7vw,56px);border-radius:13px;display:flex;justify-content:center;align-items:center;font-weight:750}
.calendar-open{background:#edf3e4;color:#365a38}.calendar-closed{background:#f5d9d2;color:#903a31}
.calendar-past{background:var(--secondary);opacity:.45;color:var(--muted-ink)}
.calendar-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:14px;color:var(--muted-ink)}
.calendar-legend span{display:flex;align-items:center;gap:7px}.calendar-legend i{width:13px;height:13px;border-radius:4px}.legend-open{background:#cadfc0}.legend-closed{background:#ebb6a9}
.feature-admin{max-width:1140px}
.admin-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 20px;scrollbar-width:thin}
.admin-tabs a{padding:9px 16px;white-space:nowrap;border-radius:999px;background:var(--secondary);text-decoration:none;font-size:13px;color:var(--primary);font-weight:700}
.admin-tabs a:hover{filter:brightness(.96)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat-card{padding:20px;display:flex;flex-direction:column}.stat-card strong{font-family:var(--display);font-size:33px;font-weight:700;color:var(--primary)}.stat-card span{font-size:14px;color:var(--muted-ink)}
.admin-section{scroll-margin-top:130px;margin-top:38px;display:grid;gap:16px}
.admin-section .section-heading h2{margin-top:5px}.section-heading a{font-weight:700;font-size:14px}
.admin-list,.pet-list{display:grid;gap:12px;align-content:start}
.admin-record,.pet-card{padding:22px;display:grid;gap:12px}
.record-heading strong{font-family:var(--display);font-size:20px;color:var(--primary)}
.record-heading>div{display:grid;gap:2px}.record-heading span{font-size:13px;color:var(--muted-ink)}
.status-pill{display:inline-block;border-radius:999px;padding:7px 10px;background:var(--secondary);color:var(--primary);font-size:12px;font-weight:800;white-space:nowrap}
.admin-record p,.pet-card p{overflow-wrap:anywhere;font-size:14px;color:var(--muted-ink)}
.record-note{border-left:3px solid var(--accent);padding-left:12px;font-size:14px;overflow-wrap:anywhere}
.record-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inline-form{display:inline-flex;gap:7px;align-items:center;flex-wrap:wrap}.inline-form select{width:auto;min-width:140px;padding:7px 10px}
.small-action{display:inline-flex;text-decoration:none;background:var(--secondary);color:var(--primary);border:1px solid var(--border);padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:700;font-size:13px}
.danger-action{background:#fff4f2;color:#943f37}
.feature-notice{padding:15px 20px;background:#e8f2e2;border:1px solid #bbd4b5;border-radius:14px;color:#315b35}
.feature-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.feature-columns .feature-panel{min-width:0}.feature-columns .pet-list{min-width:0}
.feature-panel p,.pet-card{overflow-wrap:anywhere}
.compact-form{margin-top:8px}.wrap-actions{gap:6px}
.add-photo-details{padding-top:12px;border-top:1px solid var(--border)}
.add-photo-details summary{font-size:13px;font-weight:700;color:var(--primary);cursor:pointer}
.add-photo-details .feature-form{margin-top:12px}
.share-created{margin-bottom:15px}.share-created input{font-size:13px}
.visit-summary{padding:18px;background:var(--secondary);border-radius:16px;line-height:1.7}
.visit-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.visit-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block}
.admin-bottom{text-align:center;margin-top:28px}
@media(max-width:800px){.feature-columns{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.form-two{grid-template-columns:1fr}.feature-heading,.section-heading,.record-heading{align-items:flex-start;flex-direction:column;gap:7px}.feature-panel{padding:18px}.visit-photos{gap:7px}}

/* Réservation structurée (desktop et mobile) */
.booking-redesign{max-width:790px}
.booking-intro{margin-bottom:18px;text-align:center;color:var(--muted-ink)}
.booking-intro p{margin-top:7px}
.booking-form{padding:0;gap:0;overflow:hidden}
.booking-form .booking-section{padding:24px clamp(18px,4vw,32px);border-bottom:1px solid var(--border);display:grid;gap:16px}
.booking-section-title{display:flex;gap:13px;align-items:flex-start;margin-bottom:3px}
.booking-step{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:12px;background:var(--secondary);color:var(--primary);font-size:14px;font-weight:900}
.booking-section-title h2{font-size:21px;color:var(--primary)}
.booking-section-title p{color:var(--muted-ink);font-size:13px;margin-top:4px}
.booking-form label{font-size:14px}
.booking-form .field-optional{display:inline;color:var(--muted-ink);font-weight:400;font-size:12px}
.booking-submit{padding:24px clamp(18px,4vw,32px);display:grid;gap:16px}
.booking-submit .checkbox-line{display:flex;flex-direction:row;align-items:flex-start;gap:12px;font-size:13px;font-weight:400;color:var(--muted-ink)}
.booking-submit .checkbox-line input{width:18px;height:18px;flex:none;margin-top:2px}
.booking-submit .checkbox-line span{font-weight:400}
.booking-submit .checkbox-line a{text-decoration:underline}
.booking-submit .btn{width:100%}
.booking-form .honey{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.booking-form .field-tip{margin:0}
.admin-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:16px;padding:15px 20px}
.admin-toolbar strong{display:block;font:500 19px var(--display);color:var(--primary)}
.admin-toolbar .feature-actions{gap:8px}
.admin-toolbar .btn{font-size:13px;padding:9px 13px}
.admin-toolbar-logout{margin:0}
.admin-toolbar-logout .btn-light{border:1px solid var(--border);background:var(--secondary);color:var(--primary)}
@media(max-width:640px){.booking-form .booking-section{padding:20px 18px}.booking-submit{padding:20px 18px}.booking-section-title h2{font-size:19px}.admin-toolbar{align-items:stretch}.admin-toolbar .feature-actions{width:100%}}