/* Panneau de test : aucun changement de composition du site. */
#atelier{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;font-family:var(--body);font-size:14px}
#atelier button{font:600 13px var(--body);cursor:pointer;border:1px solid #d9cedb;background:#fffbf8;color:#3a2142;border-radius:12px;padding:10px 12px}
#atelier #at-toggle{border-radius:999px;background:#3a2142;color:#fffaf6;box-shadow:0 4px 20px #2b17352a;padding:12px 18px}
#atelier #at-panel{position:absolute;right:0;bottom:56px;width:min(370px,calc(100vw - 32px));max-height:calc(100dvh - 100px);overflow:auto;background:#fffaf6;color:#3a2142;border:1px solid #d9cedb;border-radius:16px;padding:20px;box-shadow:0 14px 50px #2b173533;display:flex;flex-direction:column;gap:16px}
#atelier h2{font-size:27px;color:#3a2142;margin:0}
#atelier .at-hint,#atelier #at-msg{font-size:13px;line-height:1.5;margin:0;color:#634c69}
#atelier #at-msg:empty{display:none}
#atelier .at-swatches{display:flex;justify-content:center;gap:5px;margin:0 0 8px}
#atelier .at-swatches i{width:20px;height:20px;border-radius:50%;border:1px solid #3a214233}
#atelier #at-rows{display:grid;gap:10px}
#atelier .at-row{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;font-size:13px}
#atelier input[type=color]{width:36px;height:36px;padding:2px;border:1px solid #d9cedb;border-radius:8px;background:#fff;cursor:pointer}
#atelier output{font:11px ui-monospace,monospace;color:#634c69}
#atelier button:focus-visible,#atelier input:focus-visible{outline:2px solid #c2437a;outline-offset:3px}
/* Seules les couleurs des surfaces existantes changent pendant l'essai. */
:root[data-guide-colors] .hero{background:radial-gradient(ellipse at 90% 80%,color-mix(in srgb,var(--gold) 25%,transparent),transparent 65%),var(--night)!important}
:root[data-guide-colors] .hero .btn.alt{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 50%,transparent)!important}
:root[data-guide-colors] .hero .btn.alt:hover{background:color-mix(in srgb,var(--gold) 10%,transparent)!important}
:root[data-guide-colors] .energy-sculpture{background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 30%,var(--night)),var(--night) 65%,color-mix(in srgb,var(--gold) 38%,var(--night)));border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
:root[data-guide-colors] .energy-sculpture:before{background:linear-gradient(110deg,transparent 43%,color-mix(in srgb,var(--gold) 20%,transparent) 49%,color-mix(in srgb,var(--bg) 13%,transparent) 50%,transparent 57%)}
:root[data-guide-colors] .energy-sculpture:after{border-color:color-mix(in srgb,var(--gold) 27%,transparent)}

/* Le texte doux de l’accueil conserve la teinte de la palette 2. */
:root[data-guide-colors] .hero{--vanilla:#F6E3E6}

/* Palette 3 : repères prune et pêche sur fond ivoire. */
:root[data-palette3] #reperes{--repere-accent:var(--ink);--repere-pale:color-mix(in srgb,var(--ink) 22%,var(--bg))}
:root[data-palette3] #reperes .wn .base{fill:var(--surface)!important;stroke:var(--repere-accent)!important}
:root[data-palette3] #reperes .wn.on .base{fill:#E8B69D!important;stroke:#E8B69D!important}
:root[data-palette3] #reperes .wn .icn{stroke:var(--repere-accent)!important}
:root[data-palette3] #reperes .wn.on .icn{stroke:var(--night)!important}
:root[data-palette3] #reperes .wn .ring{stroke:var(--repere-accent)!important}
:root[data-palette3] #reperes .wn .odot{fill:var(--repere-accent)!important}
:root[data-palette3] #reperes .wv-line{stroke:var(--repere-pale)!important}
:root[data-palette3] #reperes .wv-prog{stroke:var(--repere-accent)!important}
:root[data-palette3] #haut #reperes .wb.on .nm,:root[data-palette3] #reperes .wb .no{color:var(--repere-accent)!important}
:root[data-palette3] #contactpage #cform,:root[data-palette3] #bodygraphpage .bgp-card{background:var(--bg)!important;border-color:var(--vanilla)!important}

/* Palette 3 : bouton du haut et étoiles pêche, texte du hero conservé. */
:root[data-palette3] header .nav a.btn[href="#bodygraph"]{background:#E8B69D!important;color:var(--night)!important;border-color:#E8B69D!important}
:root[data-palette3] #haut .hero .peach-stars i{background:#E8B69D!important;filter:drop-shadow(0 0 5px #E8B69D80)!important}

/* Essai validé : fonds doux et boutons cohérents selon leur fond. */
:root[data-palette3] #haut #reperes{background:var(--bg)!important}
:root[data-palette3] .fsep i{background:linear-gradient(90deg,transparent,#C98BC2)!important}
:root[data-palette3] .fsep i:last-child{background:linear-gradient(270deg,transparent,#C98BC2)!important}
:root[data-palette3] .fsep svg{fill:#C98BC2!important}
:root[data-palette3] body .btn,
:root[data-palette3] #haut #guides .gcard:first-child .btn,
:root[data-palette3] #haut #magali .btn.alt,
:root[data-palette3] #bodygraphpage .bgp-f form#bgform>.btn,
:root[data-palette3] #contactpage #cform .btn{background:var(--night)!important;color:var(--surface)!important;border-color:var(--night)!important}
:root[data-palette3] header .nav a.btn,
:root[data-palette3] #haut .hero .actions .btn,
:root[data-palette3] #haut #guides .gcard:nth-child(2) .btn,
:root[data-palette3] #haut .finalsec .btn{background:#E8B69D!important;color:var(--night)!important;border-color:#E8B69D!important}

/* Le BodyGraph reste un accès secondaire dans la navigation. */
:root[data-palette3] header .nav a.btn[href="#bodygraph"]{background:transparent!important;color:var(--bg)!important;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)!important;box-shadow:none!important;font-size:12px;font-weight:600;padding:10px 16px}
:root[data-palette3] header .nav a.btn[href="#bodygraph"]:hover,:root[data-palette3] header .nav a.btn[href="#bodygraph"]:focus-visible{background:color-mix(in srgb,var(--bg) 7%,transparent)!important;box-shadow:none!important;transform:none}

/* Le dernier accès BodyGraph reprend le bouton secondaire du menu. */
:root[data-palette3] #haut .finalsec .btn{background:transparent!important;color:var(--bg)!important;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)!important;box-shadow:none!important;font-weight:600}
:root[data-palette3] #haut .finalsec .btn:hover,:root[data-palette3] #haut .finalsec .btn:focus-visible{background:color-mix(in srgb,var(--bg) 7%,transparent)!important;box-shadow:none!important;transform:none}

:root[data-palette3] header #moonph{color:#E8B69D!important}

/* Essai des séparateurs, réservé à la palette 3. */
:root[data-palette3] #haut #hd-s,:root[data-palette3] #haut #magali{background:var(--bg)!important}
:root[data-palette3] #reperes .wv-prog{stroke:var(--ink)!important}
:root[data-palette3] #haut #magali{border-top:0!important}

:root[data-palette3] #haut #magali{background:var(--vanilla)!important}

:root[data-palette3] #reperes .wb .nm::after{background:#E8B69D;height:2px}