/* Célinergie – composants du plugin (derniers articles, pause respiration).
   Chargé uniquement sur les pages qui utilisent un composant. Variables avec valeurs de secours. */

/* ---------- Derniers articles ---------- */
.celinergie-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.1rem, 2.4vw, 1.75rem); align-items: stretch; width: 100%; }
.celinergie-post {
  --r: 0deg; position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; color: var(--celinergie-chocolate, #231B19);
  border-radius: .5rem; padding: .7rem .7rem 1.1rem; box-shadow: 0 14px 28px -14px rgba(35, 27, 25, .5); transform: rotate(var(--r)); transform-origin: 50% 15%;
}
.celinergie-post--1 { --r: -1.3deg; } .celinergie-post--2 { --r: 1deg; } .celinergie-post--3 { --r: -.8deg; }
.celinergie-post__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: .35rem; background: var(--celinergie-lavender, #D8C8F0); }
.celinergie-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.celinergie-post__media.is-empty { background: repeating-linear-gradient(45deg, var(--celinergie-yellow, #FFCE32) 0 .7rem, var(--celinergie-cream, #FFF8F0) .7rem 1.4rem); }
.celinergie-post--2 .celinergie-post__media.is-empty { background: repeating-linear-gradient(45deg, var(--celinergie-pink, #F48BC4) 0 .7rem, var(--celinergie-cream, #FFF8F0) .7rem 1.4rem); }
.celinergie-post--3 .celinergie-post__media.is-empty { background: repeating-linear-gradient(45deg, var(--celinergie-green, #93B366) 0 .7rem, var(--celinergie-cream, #FFF8F0) .7rem 1.4rem); }
.celinergie-post__body { display: flex; flex-direction: column; gap: .55rem; flex: 1 1 auto; padding: .9rem .3rem 0; }
.celinergie-post__cat { margin: 0; align-self: flex-start; padding: .1rem .7rem; font: 700 1.2rem/1.2 "Caveat", cursive; background: var(--celinergie-yellow, #FFCE32); border-radius: 3px; transform: rotate(-2deg); }
.celinergie-post__title { margin: 0; font: 600 clamp(1.15rem, 1rem + .5vw, 1.4rem)/1.2 "Fredoka", sans-serif; text-wrap: balance; }
.celinergie-post__title a { color: inherit; text-decoration: none; }
.celinergie-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: .5rem; }
.celinergie-post__excerpt { margin: 0; font: 400 .98rem/1.55 "DM Sans", sans-serif; flex: 1 1 auto; }
.celinergie-post__more { display: flex; justify-content: space-between; align-items: center; margin: .4rem 0 0; padding-top: .7rem; border-top: 2px dashed rgba(35, 27, 25, .2); font: 700 .98rem/1.2 "DM Sans", sans-serif; }
.celinergie-post__more::after { content: "\2192"; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 2px solid var(--celinergie-chocolate, #231B19); border-radius: 50%; background: var(--celinergie-cream, #FFF8F0); }
.celinergie-post:has(a:focus-visible) { outline: 3px solid var(--celinergie-chocolate, #231B19); outline-offset: 4px; transform: rotate(0deg) translateY(-.4rem); }
@media (hover: hover) { .celinergie-post:hover { transform: rotate(0deg) translateY(-.5rem); box-shadow: 0 24px 30px -16px rgba(35, 27, 25, .55); } .celinergie-post:hover .celinergie-post__more::after { background: var(--celinergie-orange, #FF6A29); } }
@media (prefers-reduced-motion: no-preference) { .celinergie-post { transition: transform .35s cubic-bezier(.34, 1.4, .5, 1), box-shadow .3s ease; } }
@media (prefers-reduced-motion: reduce) { .celinergie-post, .celinergie-post:hover, .celinergie-post:has(a:focus-visible) { transform: rotate(var(--r)); transition: none; } }

/* ---------- Pause respiration ---------- */
.celinergie-pause {
  --pause-d: 4s; width: 100%; max-width: 26rem; margin-inline: auto; padding: clamp(1.25rem, 3vw, 2rem); text-align: center;
  background: var(--celinergie-cream, #FFF8F0); color: var(--celinergie-chocolate, #231B19); border: 2px solid var(--celinergie-chocolate, #231B19);
  border-radius: 1.9rem; box-shadow: 6px 8px 0 rgba(35, 27, 25, .3); display: grid; gap: .6rem; justify-items: center;
}
.celinergie-pause__stage { position: relative; display: grid; place-items: center; width: min(12rem, 60vw); aspect-ratio: 1; }
.celinergie-pause__ring { position: absolute; inset: 0; border: 3px dashed rgba(35, 27, 25, .45); border-radius: 50%; }
.celinergie-pause__orb { width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--celinergie-orange, #FF6A29); border: 2px solid var(--celinergie-chocolate, #231B19); transform: scale(.62); }
.celinergie-pause[data-phase="in"] .celinergie-pause__orb { transform: scale(1.05); background: var(--celinergie-pink, #F48BC4); }
.celinergie-pause[data-phase="out"] .celinergie-pause__orb { transform: scale(.62); background: var(--celinergie-orange, #FF6A29); }
@media (prefers-reduced-motion: no-preference) { .celinergie-pause__orb { transition: transform var(--pause-d) ease-in-out, background-color var(--pause-d) ease-in-out; } }
@media (prefers-reduced-motion: reduce) { .celinergie-pause .celinergie-pause__orb { transform: scale(.85); } } /* pas de pulsation : seuls le texte et la couleur indiquent la phase */
.celinergie-pause__status { margin: 0; min-height: 1.6em; font: 600 1.35rem/1.2 "Fredoka", sans-serif; }
.celinergie-pause__timer { margin: 0; font: 700 1rem/1 "DM Sans", sans-serif; }
.celinergie-pause__actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: .25rem; }
.celinergie-pause__btn {
  appearance: none; cursor: pointer; font: 700 1rem/1.2 "DM Sans", sans-serif; padding: .8rem 1.5rem; min-height: 2.75rem; border-radius: 999px;
  border: 2px solid var(--celinergie-chocolate, #231B19); background: var(--celinergie-orange, #FF6A29); color: var(--celinergie-chocolate, #231B19); box-shadow: 0 4px 0 var(--celinergie-chocolate, #231B19);
}
.celinergie-pause__btn--stop { background: var(--celinergie-cream, #FFF8F0); }
.celinergie-pause__btn:hover { background: var(--celinergie-yellow, #FFCE32); }
.celinergie-pause__btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--celinergie-chocolate, #231B19); }
.celinergie-pause__btn:focus-visible { outline: 3px solid var(--celinergie-chocolate, #231B19); outline-offset: 4px; }
.celinergie-pause__btn[hidden] { display: none; }

@media (max-width: 600px) { .celinergie-pause { padding: 1rem; gap: .4rem; border-radius: 1.4rem; } .celinergie-pause__stage { width: min(8rem, 44vw); } .celinergie-pause__status { font-size: 1.2rem; } }