/* ==========================================================================
   ZzzApp : feuille de style autonome.

   Aucune dépendance externe : pas de CDN, pas de police distante, pas de JS
   tiers, aucun cookie. Tout est servi depuis ce domaine, ce qui est cohérent
   avec le discours de l'application (« rien ne sort du téléphone ») et évite
   toute obligation de bandeau de consentement sur ces pages.

   Deux surfaces :
     - la nuit   (--night) : la landing, identité de la marque ;
     - le papier (--paper) : le corps des pages légales, lisible et imprimable.

   Les couleurs de la nuit sont relevées directement dans les captures de
   l'application : le site et l'application partagent la même nuit, le même
   violet de bouton, le même corail d'enregistrement.
   ========================================================================== */

/* --------------------------------------------------------------- Tokens -- */
:root {
    /* Surfaces nocturnes, échantillonnées dans les captures 1080x2340 */
    --night:        #090619;   /* fond de l'application */
    --night-2:      #100d2c;   /* fond d'écran secondaire */
    --card:         #1a1444;   /* couleur exacte des cartes de l'application */
    --border:       rgba(167, 139, 250, 0.20);
    --border-soft:  rgba(255, 255, 255, 0.09);
    --hair:         rgba(255, 255, 255, 0.11);

    /* Texte sur la nuit */
    --text:         #ece9f7;
    --muted:        #a79ec9;
    --faint:        #7d75a3;

    /* Accents : ceux de l'application, et rien d'autre. */
    --violet:       #8b5cf6;   /* boutons primaires */
    --violet-deep:  #7c3aed;
    --violet-lit:   #c4b5fd;   /* liens et texte : contraste >= 4.5:1 sur --night */
    --coral:        #ff6b8b;   /* le bouton d'enregistrement */
    --amber:        #fbbf24;   /* la lune, la flamme des séries */

    /* Surface papier : corps des pages légales */
    --paper:        #fdfcff;
    --paper-text:   #1a1526;
    --paper-muted:  #4a4160;
    --paper-line:   #e4dff0;
    --paper-link:   #5b21b6;

    --radius:       18px;
    --radius-sm:    12px;
    --measure:      68ch;      /* 65-75 caractères par ligne */

    /* Trois rôles typographiques, trois piles système à elles seules. Aucune police
       distante n'étant chargeable ici, le contraste entre les familles fait
       tout le travail :
         --sans  : l'interface et les titres ;
         --serif : la voix du rêve (hero, fragment, clôture) ;
         --mono  : les horaires, les nombres, les chemins de fichier. */
    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
             Georgia, ui-serif, serif;
    --mono:  ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo,
             Consolas, monospace;
}

/* ---------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--text);
    background: var(--night);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;   /* le téléphone du hero déborde volontairement */
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.022em;
    font-weight: 700;
    color: #fff;
}

p { margin: 0 0 1em; }

a { color: var(--violet-lit); }

/* Anneau de focus visible partout : navigation clavier. Le violet clair
   contraste sur la nuit ; les pages légales le repassent en violet foncé
   pour rester lisible sur le papier. */
:focus-visible {
    outline: 3px solid var(--violet-lit);
    outline-offset: 3px;
    border-radius: 4px;
}
.zz-paper :focus-visible { outline-color: var(--paper-link); }

/* Lien d'évitement : premier élément tabulable de chaque page. */
.zz-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--violet);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--radius-sm) 0;
    text-decoration: none;
}
.zz-skip:focus { left: 0; }

.zz-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------------------- Gabarit -- */
.zz-wrap {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* ------------------------------------------------- Ciel étoilé (décor) -- */
.zz-sky {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120% 80% at 50% -10%, #241056 0%, transparent 58%),
        radial-gradient(ellipse 80% 55% at 88% 8%, #2a1050 0%, transparent 55%),
        var(--night);
}

/* Champ d'étoiles : deux couches de points, tailles et opacités différentes,
   comme le fond de l'application. */
.zz-sky::before,
.zz-sky::after {
    content: "";
    position: absolute;
    inset: -25%;
    background-repeat: repeat;
}

.zz-sky::before {
    background-image:
        radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 78% 9%,  #e9d5ff, transparent),
        radial-gradient(1.8px 1.8px at 33% 62%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 61% 41%, #ffd9e2, transparent),
        radial-gradient(1.5px 1.5px at 90% 73%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 47% 88%, #ddd6fe, transparent),
        radial-gradient(1.7px 1.7px at 8% 79%,  #fff, transparent);
    background-size: 420px 420px;
    opacity: 0.55;
    animation: zz-twinkle 6s ease-in-out infinite;
}

.zz-sky::after {
    background-image:
        radial-gradient(1px 1px at 24% 32%, #fff, transparent),
        radial-gradient(1px 1px at 66% 76%, #fff, transparent),
        radial-gradient(1px 1px at 88% 24%, #c4b5fd, transparent),
        radial-gradient(1px 1px at 41% 14%, #fff, transparent),
        radial-gradient(1px 1px at 15% 58%, #fde68a, transparent);
    background-size: 260px 260px;
    opacity: 0.35;
    animation: zz-twinkle 9s ease-in-out infinite reverse;
}

@keyframes zz-twinkle {
    0%, 100% { opacity: 0.30; }
    50%      { opacity: 0.62; }
}

/* ------------------------------------------------------------- En-tête -- */
.zz-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(9, 6, 25, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-soft);
}

.zz-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 62px;
}

.zz-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.zz-brand__mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--violet), #6d28d9);
    flex: none;
}

.zz-brand__mark svg { width: 19px; height: 19px; }

.zz-header__link {
    font-size: 0.86rem;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}
.zz-header__link:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   HERO

   Composition volontairement dissymétrique : la colonne de texte est large,
   le téléphone est plus large que sa colonne, penché, et déborde à droite.
   La lueur derrière lui reprend le corail du bouton d'enregistrement visible
   dans la capture, pour que l'image soit incrustée dans la page et non posée
   dessus.
   ========================================================================== */
.zz-hero {
    position: relative;
    padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3rem, 8vw, 5rem);
}

.zz-hero__grid {
    display: grid;
    gap: clamp(2.75rem, 7vw, 3.5rem);
    align-items: center;
}

@media (min-width: 940px) {
    .zz-hero__grid {
        grid-template-columns: minmax(0, 1fr) 17.5rem;
        gap: clamp(2rem, 4vw, 3.5rem);
    }
}

/* Horodatage : la page s'ouvre sur une heure précise, celle du réveil. */
.zz-stamp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font: 500 0.78rem/1 var(--mono);
    letter-spacing: 0.06em;
    color: var(--muted);
}

.zz-stamp::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--coral);
    flex: none;
}

.zz-stamp span { color: var(--faint); }

.zz-hero__title {
    margin-top: 1.15rem;
    font-size: clamp(2.05rem, 6.4vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.032em;
}

/* La ligne qui s'efface : serif italique, la voix du rêve. Chaque mot part
   à son tour puis revient : la phrase se réécrit indéfiniment. */
.zz-erase {
    display: block;
    margin-bottom: 0.14em;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.78em;
    letter-spacing: -0.012em;
    color: var(--violet-lit);
}

.zz-erase > span {
    display: inline-block;
    animation: zz-erase 9s ease-in-out infinite;
    animation-delay: calc(2.4s + var(--w) * 0.19s);
}

@keyframes zz-erase {
    0%,  14%  { opacity: 1;    filter: blur(0);   }
    32%, 58%  { opacity: 0.07; filter: blur(4px); }
    76%, 100% { opacity: 1;    filter: blur(0);   }
}

.zz-hero__title strong {
    display: block;
    font-weight: 800;
    color: #fff;
}

.zz-hero__lead {
    margin-top: 1.35rem;
    max-width: 44ch;
    font-size: clamp(1rem, 2.6vw, 1.12rem);
    color: var(--muted);
}

.zz-hero__meta {
    margin: 1.75rem 0 0;
    font: 400 0.78rem/1.6 var(--mono);
    color: var(--faint);
}

.zz-hero__meta span { opacity: 0.55; }

/* -------------------------------------------------------------- Boutons -- */
.zz-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.6rem;
    margin-top: 2rem;
}

.zz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.92rem 1.6rem;
    border-radius: 14px;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, var(--violet), var(--violet-deep));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 34px -14px rgba(139, 92, 246, 0.95);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.zz-btn:hover { box-shadow: 0 18px 42px -14px rgba(139, 92, 246, 1); }
.zz-btn:active { transform: scale(0.98); }

/* État « bientôt disponible » : l'URL du Play Store n'est pas encore
   renseignée. On rend un <span> non cliquable plutôt qu'un lien mort. */
.zz-btn--soon {
    background: none;
    border: 1px dashed var(--border);
    color: var(--muted);
    box-shadow: none;
    cursor: default;
}
.zz-btn--soon:hover { box-shadow: none; }
.zz-btn--soon:active { transform: none; }

.zz-link {
    font-size: 0.95rem;
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 0.35em;
}
.zz-link:hover { text-decoration-color: var(--coral); }

.zz-cta__note {
    margin: 1rem 0 0;
    max-width: 42ch;
    font-size: 0.82rem;
    color: var(--faint);
}

/* -------------------------------------------------- Maquette téléphone -- */
.zz-hero__stage { position: relative; }

/* La lueur : corail du bouton d'enregistrement en haut, violet de l'app en
   bas. Elle déborde du cadre, l'image paraît éclairer la page. */
.zz-hero__stage::before {
    content: "";
    position: absolute;
    inset: -14% -20% -10% -14%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(55% 40% at 52% 28%, rgba(255, 107, 139, 0.30), transparent 70%),
        radial-gradient(70% 55% at 55% 74%, rgba(139, 92, 246, 0.34), transparent 72%);
    filter: blur(6px);
}

/* Annotation de la capture : ce que l'on regarde, dit en une ligne. */
.zz-callout {
    position: relative;
    z-index: 2;
    margin: 0 0 1.4rem;
    text-align: center;
    font: 500 0.74rem/1.4 var(--mono);
    letter-spacing: 0.02em;
    color: var(--coral);
}

.zz-callout::after {
    content: "";
    display: block;
    width: 1px;
    height: 0.9rem;
    margin: 0.5rem auto 0;
    background: linear-gradient(180deg, var(--coral), transparent);
}

.zz-phone {
    margin: 0;
    padding: 7px;
    border-radius: 34px;
    background:
        linear-gradient(165deg,
            rgba(196, 181, 253, 0.34),
            rgba(139, 92, 246, 0.10) 45%,
            rgba(255, 107, 139, 0.16));
    box-shadow:
        0 40px 70px -30px rgba(0, 0, 0, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Les captures font 1080 x 2340, barre d'etat Android comprise. Cette barre
   affiche l'heure a laquelle la capture a ete prise, qui ne correspond a rien
   sur cette page : on retire ses 100 premiers pixels, et le cadre s'ajuste au
   format restant. Les fichiers ne sont pas modifies ; deposer une nouvelle
   capture au format d'origine suffit. */
.zz-phone__screen {
    --shot-crop: 100;    /* pixels rognes en haut, sur une image de 2340 */
    aspect-ratio: 1080 / 2240;   /* 2340 moins la barre d'etat */
    border-radius: 27px;
    overflow: hidden;
    background: var(--card);
    display: grid;
    place-items: center;
}

.zz-phone__screen img {
    width: 100%;
    height: auto;
    /* Le decalage est un pourcentage de la largeur du cadre : il suit donc la
       mise a l'echelle de l'image, quelle que soit la taille du telephone. */
    margin-top: calc(var(--shot-crop) / -1080 * 100%);
    align-self: start;
}

/* Emplacement en attente de capture : le nom du fichier à déposer. */
.zz-phone__todo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    padding: 1.2rem;
    text-align: center;
    background:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.03) 0 10px, transparent 10px 20px),
        var(--night-2);
}

.zz-phone__todo b { font-size: 0.8rem; color: var(--text); }

.zz-phone__todo code {
    font: 0.64rem/1.45 var(--mono);
    color: var(--muted);
    word-break: break-all;
}

.zz-phone--hero {
    position: relative;
    z-index: 1;
    width: min(19rem, 74vw);
    margin-inline: auto;
    transform: rotate(-3deg);
}

@media (min-width: 940px) {
    .zz-phone--hero {
        width: 20.5rem;
        margin-inline: 0;
        transform: rotate(-3.5deg) translateX(1.75rem);
        transform-origin: 50% 60%;
    }
}

/* ==========================================================================
   LA NUIT. Le corps de la page suit l'usage réel, heure par heure.

   Le rail de gauche n'est pas un ornement : il porte les horaires, et sa
   couleur passe du violet de la nuit au corail du réveil, puis à l'ambre du
   matin. Le fond de la section suit le même arc.
   ========================================================================== */
.zz-night {
    position: relative;
    padding-block: clamp(3.5rem, 9vw, 5.5rem);
}

.zz-night::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(31, 17, 74, 0.55) 12%,
        rgba(58, 24, 86, 0.55) 40%,
        rgba(122, 44, 88, 0.30) 54%,
        rgba(104, 60, 66, 0.18) 63%,
        rgba(24, 16, 58, 0.50) 82%,
        transparent 100%);
}

.zz-night__title {
    font-size: clamp(1.7rem, 4.6vw, 2.5rem);
    letter-spacing: -0.03em;
}

.zz-rail {
    position: relative;
    list-style: none;
    margin: clamp(2rem, 5vw, 3rem) 0 0;
    padding: 0;
}

.zz-stop {
    --pt: clamp(1.8rem, 5vw, 3.2rem);
    position: relative;
    padding-block: var(--pt);
}

.zz-stop + .zz-stop { border-top: 1px solid var(--hair); }

/* La couleur de chaque étape suit l'heure : nuit, réveil, matin, suite. */
.zz-stop:nth-child(1),
.zz-stop:nth-child(2) { --tint: var(--violet-lit); }
.zz-stop:nth-child(3) { --tint: var(--coral); }
.zz-stop:nth-child(4) { --tint: var(--amber); }
.zz-stop:nth-child(5),
.zz-stop:nth-child(6) { --tint: var(--violet-lit); }

.zz-stop__time {
    margin: 0 0 0.9rem;
    font: 600 0.8rem/1 var(--mono);
    letter-spacing: 0.06em;
    color: var(--tint, var(--violet-lit));
}

.zz-stop__body h3 {
    font-size: clamp(1.25rem, 3vw, 1.55rem);
    letter-spacing: -0.026em;
}

.zz-stop__body p {
    margin: 0.65rem 0 0;
    max-width: 46ch;
    color: var(--muted);
}

/* Le fragment de rêve : même famille que le hero. Cette règle doit rester
   APRÈS « .zz-stop__body p » : même spécificité, c'est l'ordre qui tranche. */
.zz-fragment {
    margin: 1.7rem 0 0;
    padding: 1.35rem 1.6rem;
    max-width: 40rem;
    border-left: 2px solid var(--coral);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(100deg, rgba(255, 107, 139, 0.11), transparent 72%);
}

.zz-fragment > p {
    margin: 0;
    max-width: none;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.15rem, 2.6vw, 1.4rem);
    line-height: 1.45;
    color: #fff;
}

.zz-fragment footer {
    margin-top: 0.9rem;
    font: 400 0.76rem/1.55 var(--mono);
    color: var(--faint);
}

.zz-stop__shot { margin: 0; }

@media (max-width: 899px) {
    .zz-stop__shot {
        width: min(15rem, 62%);
        margin-top: 1.6rem;
    }
}

@media (min-width: 900px) {
    .zz-rail { padding-left: 8rem; }

    /* Le fil de la nuit. */
    .zz-rail::before {
        content: "";
        position: absolute;
        left: 6.4rem;
        top: 1rem;
        bottom: 2rem;
        width: 1px;
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(196, 181, 253, 0.45) 8%,
            rgba(255, 107, 139, 0.60) 44%,
            rgba(251, 191, 36, 0.50) 58%,
            rgba(196, 181, 253, 0.30) 82%,
            transparent 100%);
    }

    .zz-stop {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--shot, 14rem);
        gap: clamp(1.5rem, 4vw, 3.5rem);
        align-items: center;
    }

    /* L'heure sort dans la gouttière, le point se pose sur le fil. */
    .zz-stop__time {
        position: absolute;
        left: -8rem;
        top: calc(var(--pt) + 0.15rem);
        width: 5rem;
        margin: 0;
        text-align: right;
    }

    .zz-stop::before {
        content: "";
        position: absolute;
        left: -1.6rem;
        top: calc(var(--pt) + 0.3rem);
        width: 7px;
        height: 7px;
        margin-left: -3.5px;
        border-radius: 999px;
        background: var(--tint);
        box-shadow: 0 0 0 5px var(--night);
    }

    /* Les tailles varient selon l'écran montré : le carnet est le plus grand,
       la fiche technique la plus discrète. */
    .zz-stop:nth-child(1) { --shot: 13rem; }
    .zz-stop:nth-child(2) { --shot: 11.5rem; }
    .zz-stop:nth-child(4) { --shot: 15rem; }
    .zz-stop:nth-child(5) { --shot: 13rem; }
    .zz-stop:nth-child(6) { --shot: 14rem; }

    /* L'étape sans capture occupe toute la largeur : c'est la respiration. */
    .zz-stop--fragment { grid-template-columns: minmax(0, 1fr); }

    .zz-stop__shot { justify-self: end; width: 100%; }
}

/* ==========================================================================
   VIE PRIVÉE. L'argument est la disproportion entre les deux colonnes.
   ========================================================================== */
.zz-priv { padding-block: clamp(3.5rem, 9vw, 5.5rem); }

.zz-priv__title {
    max-width: 22ch;
    font-size: clamp(1.7rem, 4.6vw, 2.5rem);
    letter-spacing: -0.03em;
}

.zz-priv__lead {
    margin: 1.1rem 0 0;
    max-width: 58ch;
    color: var(--muted);
}

.zz-ledger {
    display: grid;
    margin-top: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid var(--hair);
}

@media (min-width: 820px) {
    .zz-ledger { grid-template-columns: 1.1fr 1fr; }
}

.zz-ledger__col {
    padding: 1.8rem 0 1.5rem;
    border-bottom: 1px solid var(--hair);
}

@media (min-width: 820px) {
    .zz-ledger__col--out {
        padding-left: clamp(1.5rem, 4vw, 3rem);
        border-left: 1px solid var(--hair);
    }
}

.zz-ledger__col--stay { --tone: var(--violet-lit); }
.zz-ledger__col--out  { --tone: var(--amber); }

.zz-ledger__count {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin: 0 0 1.2rem;
    font: 500 0.78rem/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.zz-ledger__count b {
    font: 700 clamp(2.6rem, 7vw, 3.6rem)/0.8 var(--mono);
    letter-spacing: -0.05em;
    color: var(--tone);
}

.zz-ledger__col ul { margin: 0; padding: 0; list-style: none; }

.zz-ledger__col li {
    position: relative;
    padding: 0.62rem 0 0.62rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.95rem;
    color: var(--muted);
}

.zz-ledger__col li:first-child { border-top: 0; }

.zz-ledger__col li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.15em;
    width: 0.6rem;
    height: 1px;
    background: var(--tone);
}

.zz-ledger strong { color: var(--text); font-weight: 650; }

.zz-priv__more { margin: 1.6rem 0 0; }

/* ======================================================= Le reste, en vrac */
.zz-more { padding-block: clamp(3rem, 8vw, 4.5rem); }

.zz-more__grid { display: grid; gap: clamp(1.4rem, 4vw, 3rem); }

@media (min-width: 900px) {
    .zz-more__grid {
        grid-template-columns: 15rem minmax(0, 1fr);
        align-items: start;
    }
}

.zz-more__title {
    font-size: clamp(1.5rem, 3.6vw, 1.95rem);
    letter-spacing: -0.03em;
}

.zz-specs {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    font-size: 0.95rem;
}

@media (max-width: 620px) { .zz-specs { columns: 1; } }

.zz-specs li {
    padding: 0.55rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--muted);
    break-inside: avoid;
}

/* Code en ligne sur la nuit (les pages légales ont leur propre variante). */
.zz-ledger code,
.zz-specs code {
    padding: 0.12em 0.38em;
    border-radius: 5px;
    font: 0.86em/1 var(--mono);
    color: var(--violet-lit);
    background: rgba(139, 92, 246, 0.16);
}

/* ================================================================ Tarifs -- */
.zz-price { padding-block: clamp(3rem, 8vw, 4.5rem); }

.zz-price__title {
    font-size: clamp(1.6rem, 4.2vw, 2.2rem);
    letter-spacing: -0.03em;
}

.zz-price__lead {
    margin: 0.9rem 0 clamp(1.8rem, 4vw, 2.5rem);
    max-width: 56ch;
    color: var(--muted);
}

.zz-price__grid {
    display: grid;
    border-top: 1px solid var(--hair);
}

@media (min-width: 780px) {
    .zz-price__grid { grid-template-columns: 1fr 1fr; }
}

.zz-plan {
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--hair);
}

@media (min-width: 780px) {
    .zz-plan--premium {
        padding-left: clamp(1.5rem, 4vw, 3rem);
        border-left: 1px solid var(--hair);
    }
}

.zz-plan__name {
    margin: 0;
    font: 600 0.74rem/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

.zz-plan__price {
    margin: 0.7rem 0 1.3rem;
    font: 700 clamp(2.1rem, 5.5vw, 2.9rem)/1 var(--mono);
    letter-spacing: -0.045em;
    color: #fff;
}

.zz-plan__price span {
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
}

.zz-plan--premium .zz-plan__price { color: var(--violet-lit); }

.zz-plan ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.94rem;
    color: var(--muted);
}

.zz-plan li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.zz-plan li:first-child { border-top: 0; }

.zz-plan li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05em;
    width: 0.6rem;
    height: 1px;
    background: var(--violet-lit);
}

/* Ce que la version gratuite ne fait pas : trait plus discret, texte éteint. */
.zz-plan li.zz-plan__no { color: var(--faint); }
.zz-plan li.zz-plan__no::before { background: var(--faint); }

/* =============================================================== Clôture -- */
.zz-end {
    padding-block: clamp(3rem, 8vw, 4.5rem) clamp(3.5rem, 9vw, 5.5rem);
    text-align: center;
}

.zz-end__line {
    margin: 0 0 1.8rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.35rem, 4vw, 2rem);
    letter-spacing: -0.02em;
    color: #fff;
}

/* ------------------------------------------------------------- Footer -- */
.zz-footer {
    border-top: 1px solid var(--border-soft);
    margin-top: clamp(2rem, 6vw, 3.5rem);
    padding-block: 2.5rem 3rem;
    background: rgba(0, 0, 0, 0.25);
}

.zz-footer__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    justify-content: space-between;
    align-items: flex-start;
}

.zz-footer h2 {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 600;
    margin-bottom: 0.7rem;
}

.zz-footer ul { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
.zz-footer li { margin-bottom: 0.4rem; }
.zz-footer a { color: var(--text); text-decoration: none; }
.zz-footer a:hover { text-decoration: underline; color: var(--violet-lit); }

.zz-footer__legal {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-soft);
    font-size: 0.8rem;
    color: var(--faint);
}
.zz-footer__legal p { margin: 0 0 0.35rem; }

/* Mouvement réduit : le titre cesse de s'effacer et reste intégralement
   lisible, le ciel cesse de scintiller. */
@media (prefers-reduced-motion: reduce) {
    .zz-erase > span { animation: none; opacity: 1; filter: none; }
}

/* ====================================================== Pages légales == */

.zz-legal { padding-block: clamp(2rem, 6vw, 3.5rem) 0; }

.zz-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 1.5rem;
}
.zz-back:hover { color: #fff; }
.zz-back svg { width: 16px; height: 16px; }

/* La feuille : surface claire, colonne de 68ch, pensée pour l'impression. */
/* Variante etroite du conteneur, utilisee par les pages legales : la feuille
   ne doit pas etre beaucoup plus large que sa colonne de lecture. */
.zz-wrap--narrow { max-width: 820px; }

.zz-paper {
    background: var(--paper);
    color: var(--paper-text);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 5vw, 3.25rem);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85);
    margin-bottom: 2rem;
}

.zz-paper > * { max-width: var(--measure); }

.zz-paper h1 {
    color: var(--paper-text);
    font-size: clamp(1.7rem, 5.5vw, 2.5rem);
    margin-bottom: 0.6rem;
}

.zz-paper h2 {
    color: var(--paper-text);
    font-size: clamp(1.15rem, 3.4vw, 1.4rem);
    margin-top: 2.6rem;
    margin-bottom: 0.8rem;
    padding-top: 0.4rem;
    scroll-margin-top: 5rem;
}

.zz-paper h3 {
    color: var(--paper-text);
    font-size: 1.02rem;
    margin-top: 1.7rem;
    margin-bottom: 0.5rem;
}

.zz-paper p,
.zz-paper li { color: var(--paper-text); }

.zz-paper ul, .zz-paper ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
.zz-paper li { margin-bottom: 0.35em; }

.zz-paper a { color: var(--paper-link); }

.zz-paper strong { font-weight: 650; }

.zz-paper code {
    background: #f1ecfb;
    padding: 0.1em 0.35em;
    border-radius: 5px;
    font-size: 0.88em;
}

.zz-paper__updated {
    font-size: 0.87rem;
    color: var(--paper-muted);
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--paper-line);
}

.zz-paper__intro {
    font-size: 1.05rem;
    color: var(--paper-muted);
}

/* Sommaire ancré */
.zz-toc {
    border: 1px solid var(--paper-line);
    background: #faf8fe;
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.4rem;
    margin-bottom: 2.5rem;
}

.zz-toc h2 {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-muted);
    margin: 0 0 0.75rem;
    padding: 0;
}

.zz-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;   /* les libelles portent deja leur numero */
    font-size: 0.94rem;
}

.zz-toc li { margin-bottom: 0.3rem; }
.zz-toc a { color: var(--paper-link); text-decoration: none; }
.zz-toc a:hover { text-decoration: underline; }

/* Tableau des données (page confidentialité) */
.zz-table-scroll { overflow-x: auto; max-width: var(--measure); margin-bottom: 1.5rem; }

.zz-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
    min-width: 30rem;
}

.zz-table th, .zz-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--paper-line);
    vertical-align: top;
}

.zz-table th {
    font-weight: 650;
    color: var(--paper-text);
    background: #f7f4fd;
}

/* ------------------------------------------------------------ Divers -- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .zz-sky::before, .zz-sky::after { animation: none; }
    * { transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------- Impression -- */
@media print {
    .zz-sky, .zz-header, .zz-back, .zz-skip, .zz-footer__grid {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .zz-paper {
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        max-width: none;
    }

    .zz-paper > * { max-width: none; }

    .zz-toc { border: 1px solid #ccc; background: none; }

    .zz-paper h2 { page-break-after: avoid; }
    .zz-paper p, .zz-paper li { page-break-inside: avoid; }

    /* Les URL sont imprimées à la suite du libellé. */
    .zz-paper a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }

    .zz-footer {
        border-top: 1px solid #ccc;
        background: none;
        color: #000;
    }
    .zz-footer__legal { color: #000; }
}