/* huiledecode — thème clair (site-src/theme.css → site/assets/theme.css, chargée en dernier sur toutes les pages).
   html[data-theme=light] : posé avant l'affichage par le script en tête de page (choix mémorisé, sinon celui du système).
   La goutte passe en « encre sur papier » dans sa passe studio (assets/goutte.js : luminance OKLab inversée, teintes
   gardées) ; les couleurs ci-dessous sont celles que donne la même transformation, pour que page et goutte s'accordent.
   Le papier #f4efe7 est exactement le noir #050403 de la goutte une fois transformé : pas de bord autour du canvas. */

/* les couleurs des services, en variables (les styles en ligne et assets/tornade.js les utilisent) */
:root{--c0:#ffc477;--c1:#86a6ff;--c2:#56d4a6;--c3:#b993ff;--c4:#ff8279;color-scheme:dark}

html[data-theme=light]{
  color-scheme:light;
  --bg:#f4efe7; --ink:#1f1913; --muted:rgba(31,25,19,.7); --faint:rgba(31,25,19,.48);
  --amber:#9f4600; --amber-hi:#7e4000; --amber-deep:#cf5e00; --bronze:#9c753d;
  --line:rgba(159,70,0,.2);
  --c0:#7e4000; --c1:#425fc4; --c2:#00794a; --c3:#7945c2; --c4:#ba2529;
}
html[data-theme=light] body{--cur:#9f4600}
html[data-theme=light] ::selection{background:var(--amber);color:var(--bg)}

/* en-tête : le dégradé qui cache le texte sous le logo devient papier */
html[data-theme=light] .top::before{background:linear-gradient(#f4efe7 0,#f4efe7 50%,rgba(244,239,231,.8) 75%,rgba(244,239,231,0))}
@media (min-width:861px){html[data-theme=light] .top::before{background:linear-gradient(#f4efe7 0,#f4efe7 58%,rgba(244,239,231,0))}}
html[data-theme=light] .btn{color:#f4efe7}
html[data-theme=light] .btn.line{color:var(--ink);background:rgba(159,70,0,.06)}
html[data-theme=light] .btn.line:hover{background:rgba(159,70,0,.13)}
html[data-theme=light] .m-btn{background:rgba(159,70,0,.06)}
html[data-theme=light] .m-menu{background:linear-gradient(rgba(244,239,231,.86),rgba(244,239,231,.98) 40%)}

/* lueurs : sur papier, une ombre légère de la couleur au lieu d'un halo */
html[data-theme=light] h1 em,html[data-theme=light] h2 em,html[data-theme=light] h3 em{text-shadow:none}
html[data-theme=light] .chap h1 em,html[data-theme=light] .chap h2 em,html[data-theme=light] .rea h1 em,html[data-theme=light] .rea h2 em,html[data-theme=light] .rea h3 em{text-shadow:0 0 22px color-mix(in srgb,var(--svc,var(--amber)) 18%,transparent)}
html[data-theme=light] .dial i.on{box-shadow:none}
html[data-theme=light] .cta::before,html[data-theme=light] .rea::before{background:radial-gradient(closest-side,rgba(207,94,0,.09),transparent)}

/* les services (fil.css) */
html[data-theme=light] .chap .in{--svc:var(--c0)}
html[data-theme=light] .chap[data-k="1"] .in{--svc:var(--c1)}
html[data-theme=light] .chap[data-k="2"] .in{--svc:var(--c2)}
html[data-theme=light] .chap[data-k="3"] .in{--svc:var(--c3)}
html[data-theme=light] .chap[data-k="4"] .in{--svc:var(--c4)}
html[data-theme=light] .chap .kick::before{box-shadow:none}
html[data-theme=light] .fl-pin.on b,html[data-theme=light] .fl-pin:hover b{text-shadow:none}

/* l'hologramme des textes (holo.css) : encre de la couleur du service, franges plus discrètes */
html[data-theme=light].fl-js .hg-w .hg-c.hg-h{color:color-mix(in srgb,var(--svc) 82%,#000)!important;
  text-shadow:-1.4px 0 rgba(220,30,90,.38),1.4px 0 rgba(0,150,210,.38),0 0 14px color-mix(in srgb,var(--svc) 30%,transparent)!important}
html[data-theme=light].fl-js .fl-w .fl-c.fl-g::after{text-shadow:none}

/* les réalisations : écrans et téléphone clairs, repères lisibles */
html[data-theme=light] .rea-index a{background:rgba(159,70,0,.035)}
html[data-theme=light] .pl-ecran{background:#fff;box-shadow:0 0 0 1px rgba(31,25,19,.1),0 40px 80px -36px rgba(60,35,10,.45),0 0 90px -20px color-mix(in srgb,var(--svc) 18%,transparent)}
html[data-theme=light] .pl-bar{background:#ebe4d9;border-bottom-color:rgba(31,25,19,.08)}
html[data-theme=light] .pl-bar i{background:rgba(31,25,19,.16)}
html[data-theme=light] .pl-tel{background:#1f1913;box-shadow:0 0 0 1px rgba(31,25,19,.12),0 30px 60px -18px rgba(60,35,10,.55)}
html[data-theme=light] .pl-z span{color:#f4efe7;box-shadow:0 0 0 3px rgba(244,239,231,.6),0 0 12px color-mix(in srgb,var(--svc) 40%,transparent)}
html[data-theme=light] .pl-z.on{box-shadow:0 0 0 1.5px var(--svc),0 0 22px color-mix(in srgb,var(--svc) 40%,transparent),0 0 0 200vmax rgba(31,25,19,.45)}
html[data-theme=light] .pl-serie button{background:rgba(159,70,0,.04)}
html[data-theme=light] .pl-serie button[aria-pressed=true]{color:#f4efe7;background:var(--svc)}
html[data-theme=light] .pl-points li.on i{text-shadow:none}
html[data-theme=light] .pl-img>img{filter:grayscale(calc(var(--e) * .85)) sepia(calc(var(--e) * .2)) contrast(calc(1 - var(--e) * .35)) brightness(calc(1 + var(--e) * .05))} /* vue 3D : la capture couchée en camaïeu clair */
html[data-theme=light] .pl-tr{background:rgba(244,239,231,.55)}
html[data-theme=light] .pl-crop{box-shadow:0 calc(var(--e) * 16px) 30px -10px rgba(60,35,10,calc(var(--e) * .35))}

/* le passage d'un thème à l'autre (la goutte suit dans son propre rendu) */
html.th-anim body,html.th-anim .after,html.th-anim .top::before,html.th-anim .btn,html.th-anim .chap .in *,html.th-anim .pl-ecran{transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease!important}

/* ---------- les boutons de l'en-tête : langue et thème ---------- */
.hd-r .lg-btn,.hd-r .th-btn{display:inline-grid;place-items:center;height:38px;min-width:38px;padding:0 10px;border:0;cursor:pointer;text-decoration:none;color:var(--muted);
  background:transparent;box-shadow:inset 0 0 0 1px var(--line);clip-path:var(--chamfer);font:500 11px/1 var(--mono);letter-spacing:.14em;transition:color .3s,background .3s}
.hd-r .lg-btn:hover,.hd-r .th-btn:hover,.hd-r .lg-btn:focus-visible,.hd-r .th-btn:focus-visible{color:var(--amber-hi);background:rgba(240,160,75,.1);outline:none}
.th-btn svg{width:16px;height:19px;display:block;overflow:visible}
.th-btn .th-f{transform-origin:10px 15px;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
html[data-theme=light] .th-btn .th-f{transform:scaleX(-1)}  /* la moitié pleine de la goutte change de côté */
.hd-r .lg-btn{padding:0 11px 0 12px}
@media (max-width:380px){.hd-r{gap:6px}.hd-r .lg-btn,.hd-r .th-btn{min-width:34px;padding:0 8px}}
@media (prefers-reduced-motion:reduce){.th-btn .th-f{transition:none}}
/* téléphone étroit : le mot « Menu » cède la place aux boutons de langue et de thème (il reste lu par les lecteurs d'écran) */
@media (max-width:440px){.m-btn{font-size:0;gap:0;padding:0 12px}.hd-r{gap:6px}}
/* menu du téléphone ouvert : l'en-tête reste au-dessus, son bouton referme le menu */
body.m-open .top{z-index:61}