/* Styles propres à la page / */
a:focus-visible,summary:focus-visible{outline:2px solid #2F6FC9;outline-offset:3px;border-radius:8px}
.card{background:#FFFFFF;border:1px solid #ECEBE8;border-radius:16px;box-shadow:0 1px 2px rgba(47,46,43,.04),0 10px 30px rgba(47,46,43,.06)}
.kicker{font-size:15px;font-weight:500;color:#6F6E69;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;box-sizing:border-box;transition:transform .15s ease,background .15s ease}
.btn-dark{background:#2F2E2B;color:#FFFFFF}
.btn-dark:hover{background:#1E1D1B;color:#FFFFFF;transform:translateY(-1px)}
.btn-ghost{background:#FFFFFF;color:#2F2E2B;border:1px solid #E3E2DF}
.btn-ghost:hover{color:#2F2E2B;border-color:#9B9A95}
.btn-light{background:#FFFFFF;color:#2F2E2B}
.btn-light:hover{color:#2F2E2B;transform:translateY(-1px)}
.navlink{color:#2F2E2B;text-decoration:none;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:4px;min-height:44px}
.navlink:hover{color:#3B7A4E}
.more{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:inherit;text-decoration:none}
.more:hover{text-decoration:underline;text-underline-offset:4px;color:inherit}
.tile{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;text-decoration:none;color:#2F2E2B;transition:transform .2s ease}
a.tile:hover{transform:translateY(-3px);color:#2F2E2B}
.sable{background:#ECE8DF}
.ciel{background:#DCE6F2}
.vert{background:#3B7A4E;color:#FFFFFF}
.encre{background:#2F2E2B;color:#FFFFFF}
a.vert:hover,a.encre:hover{color:#FFFFFF}
.demo{font-size:12.5px;color:#6F6E69;margin:0}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.07);opacity:1}}
@keyframes flow{to{stroke-dashoffset:-24}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.breathe{animation:breathe 5.5s ease-in-out infinite}
.breathe2{animation:breathe 5.5s ease-in-out 1.4s infinite}
.flow{stroke-dasharray:3 9;animation:flow 1.8s linear infinite}
.live{animation:blink 2.4s ease-in-out infinite}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details[open] .plus{transform:rotate(45deg)}
/* ===== ANIMATIONS ===== */
/* Héro : joue au chargement, en CSS seulement (aucun JS requis) */
@keyframes wordIn{from{opacity:0;translate:0 .38em;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.rise{animation:riseIn .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
.tin{animation:tileIn 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
.num{font-variant-numeric:tabular-nums}
/* Défilement : actif seulement si le JS a ajouté .anim-on (sinon tout reste visible) */
.anim-on [data-r]{transition:opacity .8s ease var(--d,0ms),translate .95s cubic-bezier(.2,.7,.2,1) var(--d,0ms),scale .95s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .2s ease}
.anim-on [data-r="left"]:not(.in){translate:-30px 0}
.anim-on [data-r="right"]:not(.in){translate:30px 0}
.anim-on [data-r="pop"]:not(.in){translate:0 12px;scale:.9}
.anim-on [data-r="bar"]{transform-origin:left center;transition:scale .7s cubic-bezier(.6,0,.2,1) var(--d,0ms)}
.anim-on [data-r="bar"]:not(.in){opacity:1;translate:none;scale:0 1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:960px){.diagram-lines{display:none}}
/* Téléphone : bulles de questions en nuage simple, chiffre du héro plus petit */
@media (max-width:700px){
  .page .bulles{height:auto!important;display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px!important}
  .page .bulles > span{position:static!important}
  .page .chiffre-hero{font-size:46px!important}
}