/* Selfia · guides de respiration animes, en CSS seul (le site n'execute aucun script). Rubrique Respiration, SEO.md § 8.1.
   Fonctionnement : les cases (Demarrer/Arreter, Recommencer, durees) precedent .breath__ui ; quand Demarrer est coche,
   .breath__ui recoit les noms d'animation (--o, --w1…, --bar…) et tout demarre ; sans nom, aucune animation. Rien ne
   demarre au chargement (autocomplete="off" : pas de case restauree). Recommencer bascule entre deux jeux d'images-cles
   identiques (-a / -b) : changer de nom relance tout.
   Minutage : chaque variante (.breath--coherence, --478, --box, --sleep, --sigh) fixe --T (un cycle), --d2… (debut de
   chaque consigne) et, pour chaque case de duree, --n (nombre de cycles) et --t (= n x T). Pourcentages des images-cles
   = instant / cycle (b-o-<variante> : la lumiere ; b-w<duree>-<cycle> : une consigne, qui a pour retard le debut de sa
   phase et pour periode le cycle entier : tout reste synchrone). Le compte des secondes est la liste du content de
   .breath__count::before, decalee par steps(). Minutage verifie en temps reel (Chrome) le 2026-10-15.
   Reduire les animations (site.css raccourcit toutes les animations : on retablit ici les durees du guide) : la lumiere
   ne change plus de taille, seule sa luminosite varie lentement ; les consignes restent. Aucun clignotement.
   Contrastes AA verifies en clair et en sombre (texte >= 4,6:1). */
.breath{--b-bg:var(--surface,#fffdf9);--b-bg2:var(--bg-2,#efe8dc);--b-line:var(--line,#dcd3c4);--b-line2:var(--line-strong,#bcb09e);--b-text:var(--text,#1d1a16);--b-text2:var(--text-2,#463f36);--b-text3:var(--text-3,#665e52);--b-accent:var(--accent,#e9b872);--b-accent2:var(--accent-pressed,#d9a55e);--b-on:var(--on-accent,#211709);--b-acc:var(--accent-text,#875412);--b-soft:var(--accent-soft,rgba(196,132,44,.14));--b-glow:rgba(226,160,74,.34);--b-orb:radial-gradient(circle at 50% 36%,#fff4de 0%,#f8dcae 26%,#eebf7c 58%,#dc9c4f 100%);--b-edge:rgba(135,84,18,.18);--b-shadow:0 22px 48px -18px rgba(150,96,28,.55);--b-dim:saturate(.7) brightness(1.03);--b-mid:saturate(.85);
position:relative;isolation:isolate;overflow:hidden;margin:1.75rem 0 2.25rem;padding:1.4rem 1rem 1.3rem;border:1px solid var(--b-line);border-radius:1.75rem;background:radial-gradient(90% 60% at 50% 38%,var(--b-soft),transparent 70%),linear-gradient(var(--b-bg),var(--b-bg2));color:var(--b-text);text-align:center;font-family:var(--sans,"Atkinson Hyperlegible Next",system-ui,sans-serif)}
@media (prefers-color-scheme:dark){.breath{--b-glow:rgba(233,184,114,.4);--b-orb:radial-gradient(circle at 50% 36%,#ffeccb 0%,#f8d9a6 22%,#edbd76 55%,#cf914a 100%);--b-edge:rgba(255,236,204,.22);--b-shadow:0 0 70px 6px rgba(233,184,114,.28);--b-dim:brightness(.76) saturate(1.3);--b-mid:brightness(.9) saturate(1.1)}}
.breath,.breath *,.breath ::before,.breath ::after{box-sizing:border-box}
.breath>input{position:absolute;top:62%;left:50%;width:1px;height:1px;margin:0;opacity:0;pointer-events:none;clip-path:inset(50%)}
.breath__ui{display:grid;justify-items:center}
.breath p{margin:0}
.breath__title{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--b-acc)}
.breath__rhythm,.breath__note{text-wrap:balance}
.breath__rhythm{margin-top:.3rem!important;font-size:.95rem;color:var(--b-text2)}
.breath__stage{position:relative;display:grid;place-items:center;width:min(100%,15.5rem);aspect-ratio:1;margin:1.5rem 0 1.1rem}
.breath__ring,.breath__orb,.breath__dot{grid-area:1/1;width:100%;height:100%}
.breath__ring{border-radius:50%;border:1px solid var(--b-line2);opacity:.75}
.breath__orb{position:relative;transform:scale(0.5);filter:var(--b-dim);will-change:transform,filter;animation:var(--o) var(--T) cubic-bezier(.45,0,.55,1) var(--n)}
.breath__orb::before{content:"";position:absolute;inset:-34%;border-radius:50%;background:radial-gradient(closest-side,var(--b-glow),transparent)}
.breath__orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--b-orb);box-shadow:inset 0 0 0 1px var(--b-edge),var(--b-shadow)}
.breath--box .breath__ring{border-radius:14%}
.breath__dot{display:none;position:absolute;inset:0;transform:translateY(100%);animation:var(--dot) var(--T) linear var(--n)}
.breath--box .breath__dot{display:block}
.breath__dot::after{content:"";position:absolute;top:-.45rem;left:-.45rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--b-acc);box-shadow:0 0 0 4px var(--b-soft)}
.breath__now,.breath__sub,.breath__ctl{display:grid;place-items:center}
.breath__now>*,.breath__sub>*,.breath__ctl>*{grid-area:1/1}
.breath__now{min-height:3.4rem;font-family:var(--serif,"Newsreader",Georgia,serif);font-size:clamp(2.05rem,1.7rem + 1.6vw,2.6rem);font-weight:400;line-height:1.1}
.breath__w,.breath__end,.breath__done{opacity:0}
.breath__w{animation:var(--w) var(--T) linear var(--wd,0s) var(--n)}
.breath__w.w1{--w:var(--w1)}.breath__w.w2{--w:var(--w2);--wd:var(--d2)}.breath__w.w3{--w:var(--w3);--wd:var(--d3)}.breath__w.w4{--w:var(--w4);--wd:var(--d4)}
.breath__idle,.breath__hint{transition:opacity .35s}
.breath__end,.breath__done{visibility:hidden;animation:var(--in) .9s ease var(--t) forwards}
.breath__end{font-size:.86em}
.breath__sub{min-height:1.6rem;margin-top:.35rem!important;font-size:.95rem;color:var(--b-text3)}
.breath__count{height:1.4em;overflow:hidden;line-height:1.4em;font-variant-numeric:tabular-nums;opacity:0;animation:var(--out) .3s var(--t) forwards}
.breath__count::before{display:block;white-space:pre;content:"1";animation:var(--cnt) var(--T) steps(var(--Tn)) var(--n) forwards}
.breath__ctl{width:min(100%,19rem);min-height:3rem;margin-top:.5rem}
.breath__bar{width:100%;height:.3rem;border-radius:1rem;background:var(--b-line);overflow:hidden;visibility:hidden}
.breath__bar>span{display:block;height:100%;background:var(--b-accent2);transform:scaleX(0);transform-origin:0 50%;animation:var(--bar) var(--t) linear forwards}
.breath__durs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;column-gap:.45rem;font-size:.95rem;color:var(--b-text2)}
.breath__durs label{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .95rem;border:1px solid var(--b-line);border-radius:2rem;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.breath__durs label:hover{border-color:var(--b-line2);color:var(--b-text)}
.breath__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1rem}
.breath__btn{display:inline-grid;place-items:center;min-height:3rem;min-width:8.75rem;padding:0 1.4rem;border:1px solid var(--b-line2);border-radius:2rem;font-weight:700;font-size:1.02rem;color:var(--b-text);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s,border-color .2s,transform .12s}
.breath__btn>span:not(.visually-hidden){grid-area:1/1}
.breath__btn:hover{border-color:var(--b-acc)}
.breath__btn:active{transform:scale(.98)}
.breath__btn--run{background:var(--b-accent);color:var(--b-on);border-color:var(--b-accent)}
.breath__btn--run:hover{background:var(--b-accent2);border-color:var(--b-accent2)}
.breath__btn--again{display:none}
.breath__stop{visibility:hidden;animation:var(--hide) 1ms var(--t) forwards}
.breath__close{visibility:hidden;animation:var(--show) 1ms var(--t) forwards}
.breath__note{margin-top:.9rem!important;max-width:22rem;font-size:.86rem;line-height:1.45;color:var(--b-text3)}
.b-run:focus-visible~.breath__ui .breath__btn--run,.b-again:focus-visible~.breath__ui .breath__btn--again,.b-d1:focus-visible~.breath__ui .lb-d1,.b-d2:focus-visible~.breath__ui .lb-d2,.b-d3:focus-visible~.breath__ui .lb-d3{outline:3px solid var(--focus,var(--b-acc));outline-offset:3px}
.b-d1:checked~.breath__ui .lb-d1,.b-d2:checked~.breath__ui .lb-d2,.b-d3:checked~.breath__ui .lb-d3{background:var(--b-soft);border-color:var(--b-acc);color:var(--b-text);font-weight:700}
/* en cours */
.b-run:checked~.breath__ui{--o:var(--oa);--w1:var(--w1a);--w2:var(--w2a);--w3:var(--w3a);--w4:var(--w4a);--bar:b-bar-a;--in:b-in-a;--out:b-out-a;--cnt:b-cnt-a;--dot:b-dot-a;--show:b-show-a;--hide:b-hide-a}
.b-run:checked~.b-again:checked~.breath__ui{--o:var(--ob);--w1:var(--w1b);--w2:var(--w2b);--w3:var(--w3b);--w4:var(--w4b);--bar:b-bar-b;--in:b-in-b;--out:b-out-b;--cnt:b-cnt-b;--dot:b-dot-b;--show:b-show-b;--hide:b-hide-b}
.b-run:checked~.b-d,.b-run:checked~.breath__ui .breath__durs,.b-run:checked~.breath__ui .breath__go{visibility:hidden}
.b-run:checked~.breath__ui .breath__bar,.b-run:checked~.breath__ui .breath__stop{visibility:visible}
.b-run:checked~.breath__ui .breath__idle,.b-run:checked~.breath__ui .breath__hint{opacity:0}
.b-run:checked~.breath__ui .breath__count{opacity:1}
.b-run:checked~.breath__ui .breath__btn--run{background:transparent;color:var(--b-text);border-color:var(--b-line2)}
.b-run:checked~.breath__ui .breath__btn--run:hover{border-color:var(--b-acc)}
.b-run:checked~.breath__ui .breath__btn--again{display:inline-grid}
.breath--478{--T:19s;--Tn:19;--oa:b-o-478-a;--ob:b-o-478-b;--w1a:b-w4-19-a;--w1b:b-w4-19-b;--w2a:b-w7-19-a;--w2b:b-w7-19-b;--d2:4s;--w3a:b-w8-19-a;--w3b:b-w8-19-b;--d3:11s}
.breath--478 .breath__count::before{content:"1\A 2\A 3\A 4\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8"}
.breath--478>.b-d1:checked~.breath__ui{--n:4;--t:76s}
.breath--478>.b-d2:checked~.breath__ui{--n:8;--t:152s}
.breath--coherence{--T:10s;--Tn:10;--oa:b-o-coherence-a;--ob:b-o-coherence-b;--w1a:b-w5-10-a;--w1b:b-w5-10-b;--w2a:b-w5-10-a;--w2b:b-w5-10-b;--d2:5s}
.breath--coherence .breath__count::before{content:"1\A 2\A 3\A 4\A 5\A 1\A 2\A 3\A 4\A 5"}
.breath--coherence>.b-d1:checked~.breath__ui{--n:6;--t:60s}
.breath--coherence>.b-d2:checked~.breath__ui{--n:18;--t:180s}
.breath--coherence>.b-d3:checked~.breath__ui{--n:30;--t:300s}
.breath--box{--T:16s;--Tn:16;--oa:b-o-box-a;--ob:b-o-box-b;--w1a:b-w4-16-a;--w1b:b-w4-16-b;--w2a:b-w4-16-a;--w2b:b-w4-16-b;--d2:4s;--w3a:b-w4-16-a;--w3b:b-w4-16-b;--d3:8s;--w4a:b-w4-16-a;--w4b:b-w4-16-b;--d4:12s}
.breath--box .breath__count::before{content:"1\A 2\A 3\A 4\A 1\A 2\A 3\A 4\A 1\A 2\A 3\A 4\A 1\A 2\A 3\A 4"}
.breath--box>.b-d1:checked~.breath__ui{--n:4;--t:64s}
.breath--box>.b-d2:checked~.breath__ui{--n:11;--t:176s}
.breath--box>.b-d3:checked~.breath__ui{--n:19;--t:304s}
.breath--sleep{--T:10s;--Tn:10;--oa:b-o-sleep-a;--ob:b-o-sleep-b;--w1a:b-w4-10-a;--w1b:b-w4-10-b;--w2a:b-w6-10-a;--w2b:b-w6-10-b;--d2:4s}
.breath--sleep .breath__count::before{content:"1\A 2\A 3\A 4\A 1\A 2\A 3\A 4\A 5\A 6"}
.breath--sleep>.b-d1:checked~.breath__ui{--n:18;--t:180s}
.breath--sleep>.b-d2:checked~.breath__ui{--n:30;--t:300s}
.breath--sleep>.b-d3:checked~.breath__ui{--n:60;--t:600s}
.breath--sigh{--T:10s;--Tn:10;--oa:b-o-sigh-a;--ob:b-o-sigh-b;--w1a:b-w3-10-a;--w1b:b-w3-10-b;--w2a:b-w1-10-a;--w2b:b-w1-10-b;--d2:3s;--w3a:b-w6-10-a;--w3b:b-w6-10-b;--d3:4s}
.breath--sigh .breath__count::before{content:"1\A 2\A 3\A 1\A 1\A 2\A 3\A 4\A 5\A 6"}
.breath--sigh>.b-d1:checked~.breath__ui{--n:6;--t:60s}
.breath--sigh>.b-d2:checked~.breath__ui{--n:18;--t:180s}
.breath--sigh>.b-d3:checked~.breath__ui{--n:30;--t:300s}
/* tableau comparatif du sommaire de la rubrique : lignes empilees sur mobile */
@media (max-width:39.99rem){.breath-compare table,.breath-compare caption,.breath-compare tbody,.breath-compare tr,.breath-compare th,.breath-compare td{display:block}.breath-compare caption{padding-bottom:.6rem;border-bottom:1px solid var(--line,#dcd3c4)}.breath-compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.breath-compare tbody tr{padding:.9rem 1.1rem;border-bottom:1px solid var(--line,#dcd3c4)}.breath-compare tbody tr:last-child{border-bottom:0}.breath-compare tbody th,.breath-compare td{padding:0;border:0}.breath-compare tbody th{margin-bottom:.4rem;font-size:1.02rem}.breath-compare td{display:grid;grid-template-columns:5.2rem 1fr;gap:.6rem;padding:.12rem 0}.breath-compare td::before{content:attr(data-label);padding-top:.2rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3,#665e52)}}
@media (min-width:40rem){.breath{padding:2rem 2rem 1.6rem}.breath__stage{width:17.5rem;margin:2rem 0 1.5rem}}
@media (prefers-reduced-motion:reduce){.breath .breath__orb{transform:scale(.78)!important}.breath .breath__orb,.breath .breath__w,.breath .breath__count::before{animation-duration:var(--T)!important;animation-iteration-count:var(--n)!important}.breath .breath__bar>span{animation-duration:var(--t)!important}.breath .breath__end,.breath .breath__done{animation-duration:.9s!important}.breath .breath__count{animation-duration:.3s!important}.breath .breath__w,.breath .breath__end,.breath .breath__done{transform:none!important}.breath--box .breath__dot{display:none}}
@media (forced-colors:active){.breath__orb::after{border:2px solid CanvasText}.breath__bar>span{background:Highlight}}
@keyframes b-hide-a{to{visibility:hidden}}
@keyframes b-show-a{to{visibility:visible}}
@keyframes b-bar-a{to{transform:none}}
@keyframes b-in-a{from{opacity:0;visibility:visible;transform:translateY(.15em)}to{opacity:1;visibility:visible;transform:none}}
@keyframes b-out-a{to{opacity:0}}
@keyframes b-cnt-a{to{transform:translateY(-100%)}}
@keyframes b-dot-a{0%,to{transform:translateY(100%)}25%{transform:none}50%{transform:translateX(100%)}75%{transform:translate(100%,100%)}}
@keyframes b-hide-b{to{visibility:hidden}}
@keyframes b-show-b{to{visibility:visible}}
@keyframes b-bar-b{to{transform:none}}
@keyframes b-in-b{from{opacity:0;visibility:visible;transform:translateY(.15em)}to{opacity:1;visibility:visible;transform:none}}
@keyframes b-out-b{to{opacity:0}}
@keyframes b-cnt-b{to{transform:translateY(-100%)}}
@keyframes b-dot-b{0%,to{transform:translateY(100%)}25%{transform:none}50%{transform:translateX(100%)}75%{transform:translate(100%,100%)}}
@keyframes b-o-478-a{0%{transform:scale(.5);filter:var(--b-dim)}21.05%{transform:scale(1);filter:none;animation-timing-function:linear}57.89%{transform:scale(1);filter:none}100%{transform:scale(.5);filter:var(--b-dim)}}
@keyframes b-o-478-b{0%{transform:scale(.5);filter:var(--b-dim)}21.05%{transform:scale(1);filter:none;animation-timing-function:linear}57.89%{transform:scale(1);filter:none}100%{transform:scale(.5);filter:var(--b-dim)}}
@keyframes b-w4-19-a{0%{opacity:0;transform:translateY(.18em)}2.11%,19.47%{opacity:1;transform:none}21.05%,to{opacity:0}}
@keyframes b-w4-19-b{0%{opacity:0;transform:translateY(.18em)}2.11%,19.47%{opacity:1;transform:none}21.05%,to{opacity:0}}
@keyframes b-w7-19-a{0%{opacity:0;transform:translateY(.18em)}2.11%,35.26%{opacity:1;transform:none}36.84%,to{opacity:0}}
@keyframes b-w7-19-b{0%{opacity:0;transform:translateY(.18em)}2.11%,35.26%{opacity:1;transform:none}36.84%,to{opacity:0}}
@keyframes b-w8-19-a{0%{opacity:0;transform:translateY(.18em)}2.11%,40.53%{opacity:1;transform:none}42.11%,to{opacity:0}}
@keyframes b-w8-19-b{0%{opacity:0;transform:translateY(.18em)}2.11%,40.53%{opacity:1;transform:none}42.11%,to{opacity:0}}
@keyframes b-o-coherence-a{0%{transform:scale(.5);filter:var(--b-dim)}50%{transform:scale(1);filter:none}100%{transform:scale(.5);filter:var(--b-dim)}}
@keyframes b-o-coherence-b{0%{transform:scale(.5);filter:var(--b-dim)}50%{transform:scale(1);filter:none}100%{transform:scale(.5);filter:var(--b-dim)}}
@keyframes b-w5-10-a{0%{opacity:0;transform:translateY(.18em)}4%,47%{opacity:1;transform:none}50%,to{opacity:0}}
@keyframes b-w5-10-b{0%{opacity:0;transform:translateY(.18em)}4%,47%{opacity:1;transform:none}50%,to{opacity:0}}
@keyframes b-o-box-a{0%{transform:scale(.5);filter:var(--b-dim)}25%{transform:scale(.84);filter:none;animation-timing-function:linear}50%{transform:scale(.84);filter:none}75%{transform:scale(.5);filter:var(--b-dim);animation-timing-function:linear}100%{transform:scale(.5);filter:var(--b-dim)}}
@keyframes b-o-box-b{0%{transform:scale(.5);filter:var(--b-dim)}25%{transform:scale(.84);filter:none;animation-timing-function:linear}50%{transform:scale(.84);filter:none}75%{transform:scale(.5);filter:var(--b-dim);animation-timing-function:linear}100%{transform:scale(.5);filter:var(--b-dim)}}
@keyframes b-w4-16-a{0%{opacity:0;transform:translateY(.18em)}2.5%,23.13%{opacity:1;transform:none}25%,to{opacity:0}}
@keyframes b-w4-16-b{0%{opacity:0;transform:translateY(.18em)}2.5%,23.13%{opacity:1;transform:none}25%,to{opacity:0}}
@keyframes b-o-sleep-a{0%{transform:scale(.5);filter:var(--b-dim)}40%{transform:scale(1);filter:none}100%{transform:scale(.5);filter:var(--b-dim)}}
@keyframes b-o-sleep-b{0%{transform:scale(.5);filter:var(--b-dim)}40%{transform:scale(1);filter:none}100%{transform:scale(.5);filter:var(--b-dim)}}
@keyframes b-w4-10-a{0%{opacity:0;transform:translateY(.18em)}4%,37%{opacity:1;transform:none}40%,to{opacity:0}}
@keyframes b-w4-10-b{0%{opacity:0;transform:translateY(.18em)}4%,37%{opacity:1;transform:none}40%,to{opacity:0}}
@keyframes b-w6-10-a{0%{opacity:0;transform:translateY(.18em)}4%,57%{opacity:1;transform:none}60%,to{opacity:0}}
@keyframes b-w6-10-b{0%{opacity:0;transform:translateY(.18em)}4%,57%{opacity:1;transform:none}60%,to{opacity:0}}
@keyframes b-o-sigh-a{0%{transform:scale(.5);filter:var(--b-dim)}30%{transform:scale(.86);filter:var(--b-mid);animation-timing-function:cubic-bezier(.2,.8,.2,1)}40%{transform:scale(1);filter:none}100%{transform:scale(.5);filter:var(--b-dim)}}
@keyframes b-o-sigh-b{0%{transform:scale(.5);filter:var(--b-dim)}30%{transform:scale(.86);filter:var(--b-mid);animation-timing-function:cubic-bezier(.2,.8,.2,1)}40%{transform:scale(1);filter:none}100%{transform:scale(.5);filter:var(--b-dim)}}
@keyframes b-w3-10-a{0%{opacity:0;transform:translateY(.18em)}4%,27%{opacity:1;transform:none}30%,to{opacity:0}}
@keyframes b-w3-10-b{0%{opacity:0;transform:translateY(.18em)}4%,27%{opacity:1;transform:none}30%,to{opacity:0}}
@keyframes b-w1-10-a{0%{opacity:0;transform:translateY(.18em)}3%,8%{opacity:1;transform:none}10%,to{opacity:0}}
@keyframes b-w1-10-b{0%{opacity:0;transform:translateY(.18em)}3%,8%{opacity:1;transform:none}10%,to{opacity:0}}