:root{--radius:20px;--maxw:540px} /* ===== Palettes (basculées via [data-palette] sur ) ===== */ [data-palette="A"]{--bg1:#ffe9dc;--bg2:#fff7f1;--bg3:#f3f7f0;--ink:#4a3b32;--muted:#8a7668;--accent:#e8755a;--accentSoft:#ffd9c7;--accentShadow:rgba(232,117,90,.5);--accent2:#3aa06a;--cta1:#ff9472;--cta2:#ff7a5c;--ctaShadow:rgba(255,122,92,.7);--card:#fff;--avaA:#ffd9c7;--avaB:#ffc4a8;--avaIcon:#d98a6e;--blob1:#ffd9c7;--blob2:#d8f0e2} [data-palette="B"]{--bg1:#ece6fb;--bg2:#f7f4ff;--bg3:#e9f7f2;--ink:#443a5b;--muted:#7d769a;--accent:#7d63cf;--accentSoft:#e3d8fb;--accentShadow:rgba(125,99,207,.45);--accent2:#3bb89a;--cta1:#a78be8;--cta2:#8b6fd6;--ctaShadow:rgba(139,111,214,.6);--card:#fff;--avaA:#e3d8fb;--avaB:#cdbef3;--avaIcon:#9784c9;--blob1:#e3d8fb;--blob2:#d8f0e2} *{box-sizing:border-box} html,body{margin:0} body{font-family:"Nunito",system-ui,-apple-system,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg1),var(--bg2) 40%,var(--bg3));min-height:100vh;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden} body::before{content:"";position:fixed;width:340px;height:340px;background:var(--blob1);border-radius:42% 58% 60% 40%/45% 45% 55% 55%;top:-120px;right:-130px;opacity:.55;z-index:0;pointer-events:none} body::after{content:"";position:fixed;width:280px;height:280px;background:var(--blob2);border-radius:50%;bottom:-120px;left:-120px;opacity:.5;z-index:0;pointer-events:none} .wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:26px 20px 70px} .ico{width:1em;height:1em;display:inline-block;vertical-align:-.16em;flex:none} h1{font-family:"Fredoka",sans-serif;font-weight:700;font-size:2rem;line-height:1.06;margin:.1em 0;color:var(--ink)} h2{font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.2rem;margin:0 0 .5em} p{line-height:1.55;margin:.5em 0} a{color:var(--accent)} .muted{color:var(--muted)} .center{text-align:center} .warn{color:var(--accent);font-weight:700} .ok{color:var(--accent2)} .badge{display:inline-flex;align-items:center;gap:.45em;background:var(--card);border-radius:999px;padding:.5em .95em;font-weight:800;font-size:.82rem;color:var(--accent);box-shadow:0 8px 18px -10px var(--accentShadow)} .badge .ico{width:1.05em;height:1.05em} .hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0 2px} .hero h1{margin:.1em 0} .ava{width:116px;height:116px;border-radius:46% 54% 52% 48%/55% 48% 52% 45%;background:linear-gradient(150deg,var(--avaA),var(--avaB));display:grid;place-items:center;box-shadow:inset 0 0 0 5px #fff,0 16px 32px -16px var(--accentShadow);overflow:hidden} .ava img{width:100%;height:100%;object-fit:cover} .ava .avico{width:54px;height:54px;color:var(--avaIcon)} .card{background:var(--card);border-radius:var(--radius);padding:18px;margin:14px 0;box-shadow:0 16px 34px -22px rgba(0,0,0,.4)} .cta{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:linear-gradient(135deg,var(--cta1),var(--cta2));color:#fff;font-family:"Fredoka",sans-serif;font-weight:600;border:0;border-radius:999px;padding:.85em 1.5em;font-size:1.02rem;text-decoration:none;cursor:pointer;box-shadow:0 14px 26px -10px var(--ctaShadow)} .cta.block{width:100%} .price{font-family:"Fredoka",sans-serif;font-weight:700;font-size:1.9rem;color:var(--accent)} .price small{font-size:.5em;font-weight:600;opacity:.7} .trust{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:11px} .trust li{display:flex;align-items:center;gap:.7em;font-weight:700;color:var(--ink);font-size:.95rem} .trust li .ico{width:1.3em;height:1.3em;color:var(--accent)} /* ===== Réservation : agenda + formulaire ===== */ summary{list-style:none;cursor:pointer} summary::-webkit-details-marker{display:none} .slot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700} .slot .ico{color:var(--accent2);width:1.25em;height:1.25em} details.card{padding:0;overflow:hidden} details.card>summary{padding:15px 17px} details.card>form{padding:0 17px 16px} .tag{display:inline-block;font-size:.78rem;font-weight:800;border-radius:999px;padding:.3em .8em;background:var(--accentSoft);color:var(--accent)} label{display:block;font-weight:700;color:var(--ink);margin:.9em 0 .3em;font-size:.9rem} input,textarea{width:100%;padding:.75em .85em;border:1.5px solid var(--accentSoft);border-radius:12px;font:inherit;background:#fff;color:var(--ink)} input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent} textarea{min-height:72px;resize:vertical} .hp{position:absolute;left:-9999px} button{font:inherit;cursor:pointer} button.ghost{background:#fff;border:1.5px solid var(--accentSoft);border-radius:999px;padding:.7em 1.2em;font-weight:700;color:var(--ink)} .wa{display:inline-flex;align-items:center;gap:.5em;color:var(--accent);font-weight:700;text-decoration:none} footer{margin:32px 0 0;color:var(--muted);font-size:.85rem;text-align:center} /* ===== Admin ===== */ .adminbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px} .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} /* ===== Sélecteur de palette (discret) ===== */ .ptoggle{position:fixed;z-index:30;right:14px;bottom:14px;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:7px 11px;box-shadow:0 12px 28px -12px rgba(0,0,0,.4)} .ptoggle span{font-size:.68rem;font-weight:800;color:#9a8f86;text-transform:uppercase;letter-spacing:.06em} .ptoggle button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer} .ptoggle button.on{border-color:var(--ink)} .ptoggle button[data-set-palette="A"]{background:linear-gradient(135deg,#ff9472,#3aa06a)} .ptoggle button[data-set-palette="B"]{background:linear-gradient(135deg,#a78be8,#3bb89a)} @media(prefers-reduced-motion:no-preference){ .hero,.card{animation:rise .5s cubic-bezier(.2,.7,.2,1) both} .card:nth-of-type(2){animation-delay:.06s}.card:nth-of-type(3){animation-delay:.12s}.card:nth-of-type(4){animation-delay:.18s} } @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ===== calendrier mensuel ===== */ .calnav{display:flex;align-items:center;justify-content:space-between;font-family:"Fredoka",sans-serif;font-weight:700;font-size:1.15rem;margin:.2em 0 .6em} .calnav a{width:36px;height:36px;border-radius:50%;background:var(--card);display:grid;place-items:center;color:var(--accent);text-decoration:none;font-weight:800;box-shadow:0 8px 18px -12px var(--accentShadow)} .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px} .dow span{text-align:center;font-size:.72rem;font-weight:800;color:var(--muted)} .month{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .day{aspect-ratio:1;display:grid;place-items:center;border-radius:12px;font-weight:700;color:#c3b4a7;text-decoration:none;position:relative} .day.avail{color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--accentSoft)} .day.avail::after{content:"";position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--accent2)} .day.empty{visibility:hidden} /* ===== grille horaire ===== */ .hours{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0} .hcell{border:1.5px solid var(--accentSoft);border-radius:12px;padding:.75em;text-align:center;font-weight:700;background:var(--card);cursor:pointer;user-select:none} .hcell.busy{opacity:.4;text-decoration:line-through;background:#f3efe9;cursor:not-allowed} .hcell.sel{background:linear-gradient(135deg,var(--cta1),var(--cta2));color:#fff;border-color:transparent} .legend{display:flex;align-items:center;gap:.5em;color:var(--muted);font-size:.8rem;margin-top:6px} .legend .dot{width:7px;height:7px;border-radius:50%;background:var(--accent2)} .tip{font-size:.78rem;color:var(--muted);display:flex;gap:.5em;align-items:flex-start;margin-top:8px} .tip .ico{color:var(--accent2);flex:none}