/* ==========================================================================
   AXOLOTL — base : reset, typo, boutons, révélations
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--f-body);background:var(--pg-bg);color:var(--pg-ink);font-size:17px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--ac-t);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:780;letter-spacing:-.025em;line-height:1.02;font-variation-settings:"wdth" 80}
em{font-style:normal}                 /* Bricolage n'a pas de vraie italique : l'emphase = couleur ou graisse */
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(18px,4vw,44px);position:relative}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:14px;top:-70px;z-index:6000;background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-weight:700;transition:top .25s}
.skip:focus{top:14px}
.ph{background:linear-gradient(135deg,color-mix(in srgb,var(--phc,#FF6FA8) 30%,#fff),color-mix(in srgb,var(--phc,#FF6FA8) 55%,#fff))}
.ph img{width:100%;height:100%;object-fit:cover}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:.98rem;border:0;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .5s,color .5s,gap .3s}
.btn-ac{background:var(--ac);color:var(--ac-ink);box-shadow:0 14px 30px color-mix(in srgb,var(--ac) 32%,transparent)}
.btn-ac:hover{transform:translateY(-3px);gap:18px}
.btn-line{border:1.5px solid currentColor;background:transparent}
.btn-line:hover{background:var(--ac);color:var(--ac-ink);border-color:var(--ac)}
.btn .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 auto}
.kicker{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem;margin-bottom:14px}
.kicker i{width:12px;height:12px;border-radius:50%;background:currentColor}
.variant{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem;padding:6px 14px 6px 6px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);width:max-content;max-width:100%}
.variant i{width:22px;height:22px;border-radius:50%;background:var(--sw,currentColor);border:2px solid color-mix(in srgb,currentColor 30%,transparent);flex:0 0 auto}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:.84rem;font-weight:700;padding:6px 14px;border-radius:999px;border:1.5px solid color-mix(in srgb,currentColor 34%,transparent)}
.example{display:inline-block;font:700 .72rem var(--f-body);letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px;border:1.5px dashed currentColor;vertical-align:middle}

/* liens dans le texte, pastilles de choix (formulaires, cadrage) */
.inl{text-decoration:underline;text-underline-offset:3px;font-weight:700}
.inl:hover{text-decoration-thickness:2px}
.pick{display:flex;flex-wrap:wrap;gap:10px}
.pick label{cursor:pointer;position:relative}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:999px;border:1.5px solid currentColor;font-size:.95rem;font-weight:700;transition:background .25s,color .25s,border-color .25s}
.pick span i{width:12px;height:12px;border-radius:50%;background:var(--pc,currentColor)}
.pick input:checked+span{background:var(--pc-bg,var(--pg-acc));border-color:var(--pc-bg,var(--pg-acc));color:var(--pc-fg,var(--pg-acc-ink))}
.pick input:focus-visible+span{outline:3px solid var(--ac-t);outline-offset:3px}

/* ---------- révélations (actives seulement si le JS tourne : sans JS, tout est visible) ---------- */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
.js .wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease)}
.js .wipe.in{clip-path:inset(0 0 0 0)}
/* mots-en-cascade : boîtes overflow:hidden avec marge latérale .16em (sinon les lettres sont rognées) */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .16em .14em;margin:0 -.16em -.14em}
.split .w>span{display:inline-block;transform:translateY(115%);transition:transform .9s var(--ease)}
.split.is-in .w>span{transform:none}
.split.done .w{overflow:visible}

@media (max-width:760px){body{font-size:16px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}.js .wipe{clip-path:none}
  .split .w>span{transform:none}
}