/* ZEROZORO — intro v4 : atelier ouvert depuis le rond central */

:root {
    --zz4-ink: #1F1F1F;
    --zz4-studio: #2e2e2e;
}

/* ---------- intro d'arrivée ---------- */
.zz4-intro {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(31, 31, 31, 0.95);   /* comme #intro sur le site actuel */
    color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2.6vw;
    box-sizing: border-box;
    padding: 4vw 3vw;
    clip-path: circle(150% at 50% 50%);
    transition: clip-path 0.7s cubic-bezier(.7, 0, .2, 1);
}
.zz4-intro[hidden] { display: none; }
.zz4-intro.is-closed { clip-path: circle(0.4vw at 50% 50%); }
.zz4-intro > *, .zz4-studio > * { transition: opacity 0.5s ease; }
.zz4-intro.is-leaving > *, .zz4-studio.is-leaving > * { opacity: 0; pointer-events: none; }
/* phrase d'invitation + titre, serrés comme sur la maquette */
.zz4-intro__block { display: flex; flex-direction: column; align-items: center; width: 100%; }
.zz4-intro__invite {
    align-self: stretch;
    margin: 0 0 0.5vw;
    text-align: center;
    font-family: labeur, sans-serif;
    font-size: calc(9px + 0.25vw);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.zz4-intro__title {
    margin: 0;
    font-family: ZZ02, sans-serif;
    font-weight: normal;
    font-size: min(9.2vw, 15vh);
    line-height: 0.88;
    text-align: center;
    text-transform: uppercase;
}
.zz4-intro__line { display: table; margin: 0 auto; white-space: nowrap; } /* centrée et ajustée à son texte */
/* le E et les O : la lettre, puis en fondu la zone de dessin grise à sa place.
   Position et taille calculées par le script (ligne de base + hauteur de capitale mesurées). */
.zz4-islot { position: relative; display: inline-block; }
.zz4-islot__base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.zz4-islot__letter { transition: opacity 0.9s cubic-bezier(.45, 0, .25, 1); }
.zz4-islot__pad {
    position: absolute;
    left: 50%; top: 0;
    width: 0.96em; height: 0.70em;
    transform: translateX(-50%);
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s cubic-bezier(.45, 0, .25, 1) 0.45s;   /* les zones arrivent quand les lettres sont presque parties */
}
/* contour blanc, comme les zones de dessin du site actuel */
.zz4-islot__pad::after {
    content: "";
    position: absolute; inset: 0;
    border: 1px solid #fff;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(.45, 0, .25, 1), border-width 0.3s ease;
}
.zz4-islot__pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: none; }
.zz4-intro.is-drawing .zz4-islot__letter { opacity: 0; }
.zz4-intro.is-drawing .zz4-islot__pad { opacity: 1; pointer-events: auto; }
/* une fois dessinée, la lettre n'a plus de contour… sauf quand la souris est dedans */
.zz4-islot.is-inked .zz4-islot__pad::after { opacity: 0; }
.zz4-islot.is-hot .zz4-islot__pad::after { opacity: 1; border-width: 1.5px; }
/* outils (épaisseur, effacer) : apparaissent en même temps que les zones, calés sous le Z */
.zz4-intro__tools {
    align-self: stretch;
    display: flex; gap: 0.9vw;
    margin-top: 1.6vw;
    opacity: 0; visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.9s cubic-bezier(.45, 0, .25, 1), transform 0.9s cubic-bezier(.45, 0, .25, 1), visibility 0s linear 0.9s;
}
/* les capsules arrivent après les zones de dessin */
.zz4-intro.is-drawing .zz4-intro__tools { opacity: 1; visibility: visible; transform: none; transition: opacity 0.9s cubic-bezier(.45, 0, .25, 1) 0.7s, transform 0.9s cubic-bezier(.45, 0, .25, 1) 0.7s, visibility 0s 0.7s; }
.zz4-pill.zz4-pill--sm { min-height: 24px; padding: 2px 11px 1px; font-size: calc(8px + 0.2vw); gap: 7px; }
.zz4-pill.zz4-pill--sm.zz4-stroke input[type=range] { width: 8vw; min-width: 80px; }
.zz4-pill.zz4-intro__enter { min-height: 40px; padding: 5px 34px 4px; font-size: calc(12px + 0.35vw); }

/* ---------- atelier ---------- */
.zz4-studio {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(31, 31, 31, 0.95);
    color: #fff;
    box-sizing: border-box;
    padding: 2.5vw;
    /* mot, panneaux et barre forment un bloc serré, centré dans la page */
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    overflow: auto;
    clip-path: circle(150% at 50% 50%);
    transition: clip-path 0.7s cubic-bezier(.7, 0, .2, 1);
}
.zz4-studio[hidden] { display: none; }
.zz4-studio.is-closed { clip-path: circle(0.4vw at 50% 50%); }
body.zz4-studio-open { overflow: hidden; }

/* la phrase du studio ; ses E et O deviennent les lettres dessinées */
.zz4-sentence {
    margin: 0;
    font-family: ZZ02, sans-serif;
    font-size: 4vw;
    line-height: 0.86;
    text-transform: uppercase;
    color: #fff;
}
.zz4-sentence .zz-glyph svg path { stroke: #fff; }
.zz4-sentence .zz-glyph { display: inline-block; width: 1.08em; text-align: center; white-space: nowrap; }
/* ZEROZORO en très grand, sur toute la largeur ; la largeur des E / O suit celle de la fonte (posée par le script) */
.zz4-sentence--word { font-size: 10.8vw; line-height: 0.9; height: 0.9em; text-align: center; white-space: nowrap; }
/* hauteur fixe : passer de la lettre de la fonte au dessin ne change ni la ligne ni la place du bloc */
.zz4-sentence--word .zz-word { display: inline-block; height: 0.9em; vertical-align: top; }
.zz4-sentence--word .zz-glyph { height: 0.9em; line-height: 0.9; vertical-align: top; position: relative; }
.zz4-sentence.zz4-sentence--word .zz-glyph svg { position: absolute; left: 50%; bottom: var(--zz4-base, 0.105em); transform: translateX(-50%); }
.zz4-sentence.zz4-sentence--word .zz-glyph svg[data-zz-own] { width: calc(var(--zz4-cap, 0.7em) * 1.37) !important; height: var(--zz4-cap, 0.7em) !important; }
.zz4-sentence .zz-glyph svg { margin: 0 !important; }
.zz4-sentence .zz-glyph svg[data-zz-own] { width: 0.96em !important; height: 0.7em !important; }

.zz4-sentence--word { margin-bottom: 2.2vw; }
.zz4-panels {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 2vw;
    row-gap: 2vw;
}
/* taille posée par le script : proportion fixe = la boîte de la lettre dans le texte */
.zz4-panel { position: relative; flex: none; background: transparent; color: #fff; border-radius: 1.5vw; overflow: hidden; }
/* contour blanc permanent, un peu plus marqué au survol */
.zz4-panel::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    border: 1px solid #fff;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(.45, 0, .25, 1), border-width 0.3s ease;
}
.zz4-panel:hover::after { border-width: 1.5px; }
.zz4-panel__label { transition: opacity 0.6s cubic-bezier(.45, 0, .25, 1); }
.zz4-panel.is-inked .zz4-panel__label { opacity: 0; }
.zz4-panel.is-inked:hover .zz4-panel__label { opacity: 1; }
.zz4-panel__label {
    position: absolute; top: 1.2vw; left: 0; right: 0; z-index: 2;
    margin: 0;
    text-align: center;
    font-family: labeur, sans-serif;
    font-size: calc(10px + 0.25vw);
    text-transform: uppercase;
    pointer-events: none;
}
.zz4-panel canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    touch-action: none;
    cursor: none;
}

/* ---------- curseur pinceau : un rond à la taille du trait ---------- */
.zz4-brush {
    position: fixed; left: 0; top: 0; z-index: 100001;
    background: #fff;                /* rond blanc plein */
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.15s, transform 0.1s, width 0.15s, height 0.15s;
}
.zz4-brush.is-on { opacity: 1; }
.zz4-brush.is-down { transform: translate(-50%, -50%) scale(0.85); }
.zz4-brush.on-light { background: var(--zz4-ink); } /* sur le blanc des panneaux de l'atelier */

/* ---------- barre du bas : pilules blanches, comme les pages typefaces ---------- */
.zz4-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 1.1vw; } /* largeur = celle des panneaux (script) */
.zz4-bar__left { display: flex; gap: 8px; flex-wrap: wrap; }
.zz4-pill {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 28px; box-sizing: border-box;
    padding: 3px 13px 2px;
    background: #fff; color: var(--zz4-ink);
    border: 1px solid #fff; border-radius: 999px;
    font-family: labeur, sans-serif;
    font-size: calc(10px + 0.2vw);
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background 0.4s, color 0.4s;
}
button.zz4-pill:hover { background: transparent; color: #fff; }
.zz4-stroke { cursor: default; }
/* curseur : piste de 1 px, pastille centrée sur la piste (Safari, Chrome, Firefox) */
.zz4-stroke input[type=range] {
    -webkit-appearance: none; appearance: none;
    width: 130px; height: 14px; margin: 0;
    background: transparent;
    cursor: pointer;
    align-self: center;
}
.zz4-stroke input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--zz4-ink); border: 0; }
.zz4-stroke input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 9px; height: 9px; margin-top: -4px;
    border-radius: 50%; background: var(--zz4-ink); border: 0;
}
.zz4-stroke input[type=range]::-moz-range-track { height: 1px; background: var(--zz4-ink); border: 0; }
.zz4-stroke input[type=range]::-moz-range-progress { height: 1px; background: var(--zz4-ink); }
.zz4-stroke input[type=range]::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: var(--zz4-ink); border: 0; }
.zz4-stroke input[type=range]:focus-visible { outline: 2px solid var(--zz4-ink); outline-offset: 6px; }

/* ---------- le rond central (#switch) du site : accessible au clavier ---------- */
body.zz-v4 #switch { cursor: pointer; }
body.zz-v4 #switch:focus-visible { outline: 2px solid var(--zz4-ink); outline-offset: 4px; }

/* ---------- lettres dessinées dans le logo, le footer et la phrase ---------- */
.zz-word { white-space: nowrap; }
.zz-glyph { display: inline; }
.zz-glyph svg { display: inline; height: 0.7em; width: auto; aspect-ratio: 1; overflow: visible; vertical-align: baseline; margin: 0 0.06em; }
.zz-glyph svg path { stroke: currentColor; stroke-width: 0.15em; vector-effect: non-scaling-stroke; }
/* ses propres lettres : la boîte du panneau (proportion 1.46) à hauteur de capitale, épaisseur dessinée à l'échelle */
.zz-glyph svg[data-zz-own] { aspect-ratio: 1.37 !important; height: 0.72em !important; width: auto !important; overflow: hidden; }
.zz-glyph svg[data-zz-own] path { vector-effect: none; }
.footer-text .zzsc-letter-replace span.zz-glyph,
.footer-text .zzsc-letter-replace span.zz-glyph svg { width: auto !important; height: auto !important; margin: 0; }
.footer-text .zzsc-letter-replace span.zz-glyph svg { height: 0.7em !important; margin: 0 0.06em; }
.footer-text .zzsc-letter-replace span.zz-glyph svg path { stroke: var(--zz4-ink); stroke-width: 0.15em; }
.footer-text .zzsc-letter-replace span.zz-glyph svg[data-zz-own] path { vector-effect: none; }

@media (max-width: 768px) {
    .zz4-studio { padding: 16px; gap: 14px; }
    .zz4-sentence { font-size: 6.4vw; }
    .zz4-sentence--word { font-size: 10.8vw; }
    .zz4-panel { border-radius: 12px; }
    .zz4-intro { padding: 24px 16px; gap: 6vw; }
    .zz4-intro__title { font-size: 9.6vw; }
    .zz4-panels { flex-direction: column; justify-content: center; gap: 12px; min-height: 420px; }
    .zz4-stroke input[type=range] { width: 110px; }
}
@media (prefers-reduced-motion: reduce) { .zz4-studio { transition: none; } }