/*
 * The public site of TimeAcappella: a notebook. The petrol cover opens every page, paper pages
 * follow, the back cover closes it. Every colour is a token of shared/tokens.json (tokens.css):
 * the cover and the back cover are `.ta-scheme-dark` (the dark values in both modes, brand.md §3),
 * a page laid on the cover is `.ta-scheme-auto` (the visitor's mode again). Running text is 18 px
 * at least; the bright coral is for shapes only, coral text is --ta-coral-text.
 * The drawings started from the prototype, proto/css/cover.css.
 */

/* ------------------------------------------------------------------ base */

:root
{
    /* The bookmark hanging at the right of the cover: where it hangs, how wide */
    --ta-ribbon-right: clamp(16px, 6vw, 110px);
    --ta-ribbon-width: clamp(26px, 2.8vw, 42px);
    /* The width of the content, inside the 16 px side gutter */
    --ta-shell: min(100vw - 32px, 74rem);
}

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

html
{
    background: var(--ta-canvas);
}

/* A short page keeps its back cover at the bottom of the window: the page takes the window's
   height at least, and the main part takes what is left */
body
{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--ta-canvas);
    color: var(--ta-ink);
    font: 400 1.125rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
}

main
{
    flex: 1 0 auto;
}

a
{
    color: var(--ta-petrol);
}

img
{
    max-width: 100%;
}

:focus-visible
{
    outline: 3px solid var(--ta-coral);
    outline-offset: 3px;
}

main:focus
{
    outline: none;
}

.ta-skip
{
    position: absolute;
    z-index: 30;
    left: 16px;
    top: -100px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--ta-canvas);
    color: var(--ta-ink);
    font-weight: 700;
}

.ta-skip:focus
{
    top: 16px;
}

.ta-note
{
    margin: 0;
    color: var(--ta-coral-text);
    font: 700 1.65rem/1.1 var(--ta-font-hand);
}

.ta-arrow
{
    width: 46px;
    height: 32px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------------------------ the cover */

.ta-cover
{
    position: relative;
    overflow: hidden;
    padding-inline: 16px;
    padding-block: 0 clamp(44px, 6vw, 76px);
    color: var(--ta-ink);
    background:
        radial-gradient(120% 70% at 25% 0%, color-mix(in oklab, var(--ta-petrol) 24%, transparent), transparent 62%),
        linear-gradient(180deg, var(--ta-paper), var(--ta-canvas));
}

/* The stitching of the binding, at the foot of the cover */
.ta-cover::after
{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    border-top: 2px dashed color-mix(in oklab, var(--ta-ink) 20%, transparent);
}

/* The coral bookmark of the logo, at page scale */
.ta-ribbon,
.ta-end__ribbon
{
    position: absolute;
    top: 0;
    right: var(--ta-ribbon-right);
    width: var(--ta-ribbon-width);
    filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.35));
    pointer-events: none;
}

.ta-ribbon
{
    z-index: 2;
    height: clamp(110px, 14vw, 200px);
}

.ta-body--home .ta-ribbon
{
    height: clamp(150px, 26vw, 360px);
}

.ta-ribbon::before,
.ta-end__ribbon::before
{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, color-mix(in oklab, var(--ta-coral) 82%, var(--ta-canvas)), var(--ta-coral) 45%, var(--ta-coral-text));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
}

/* ------------------------------------------------------------------ the header and its menu */

.ta-hd
{
    position: relative;
    z-index: 3;
    max-width: 74rem;
    margin-inline: auto;
    /* Room for the bookmark and 12 px of air, no more: the menu folds by the room left. The
       header ends 16 px plus half the spare width away from the edge of the window. */
    padding-right: max(24px, calc(var(--ta-ribbon-right) + var(--ta-ribbon-width) + 12px - 16px - (100vw - 32px - var(--ta-shell)) / 2));
}

/* ONE row, never wrapped: the menu folds by the room it has (menu/wfm-deferred.js) */
.ta-hd__row
{
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-block: 18px;
}

.ta-brand
{
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    color: var(--ta-ink);
    font: 800 1.4rem/1 var(--ta-font-display);
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.ta-brand img
{
    width: 44px;
    height: 44px;
}

.ta-brand b
{
    color: var(--ta-coral-text);
}

/* The menu of Tempo, in the colours of the notebook: variables only, no rule of it rewritten */
.ta-hd .wf-menu
{
    margin-left: auto;
    --wfm-color: var(--ta-ink);
    --wfm-bg: var(--ta-canvas);
    --wfm-accent: var(--ta-coral-text);
    --wfm-hover: color-mix(in oklab, var(--ta-ink) 8%, transparent);
    --wfm-border: color-mix(in oklab, var(--ta-ink) 14%, transparent);
    --wfm-font-size: 1.05rem;
    --wfm-font-weight: 600;
    --wfm-root-color: var(--ta-ink);
    /* The hover draws a line, it lays no tint (the « trait » effect, wf-menu--fx-trait) */
    --wfm-root-hover-bg: transparent;
    --wfm-root-hover-color: var(--ta-ink);
    --wfm-fx-color: var(--ta-coral);
    --wfm-fx-ink: var(--ta-ink);
    --wfm-root-gap: 0.25rem;
    --wfm-root-item-padding-h: 0.7rem;
    --wfm-hamburger-color: var(--ta-ink);
    --wfm-hamburger-radius: 999px;
    --wfm-hamburger-hover-bg: color-mix(in oklab, var(--ta-ink) 12%, transparent);
    --wfm-offcanvas-bg: var(--ta-canvas);
    --wfm-offcanvas-color: var(--ta-ink);
    --wfm-offcanvas-accent: var(--ta-coral-text);
    --wfm-offcanvas-hover: color-mix(in oklab, var(--ta-ink) 8%, transparent);
    --wfm-offcanvas-border: color-mix(in oklab, var(--ta-ink) 14%, transparent);
    --wfm-offcanvas-font-size: 1.25rem;
}

/* INTEGRATION IN THE HEADER, as is from Tempo (official/menu.ts, OFFICIAL_MENU_HEADER_CSS, itself
   from studio/engine/site.css): wfm.css knows no folded state, they live under .wp-header. The
   two !important are the component's: a measure off screen must win whatever the state. */
.wp-header .wf-menu { width: auto; }
.wp-header .wf-menu > ul { flex: 0 1 auto; }
.wp-header .wf-menu.wf-menu--collapsed { margin-left: auto; }
.wp-header .wf-menu.wf-menu--collapsed > ul { display: none; }
.wp-header .wf-menu.wf-menu--overflow .wf-menu-item--off { display: none; }
.wp-header .wf-menu.wf-menu--overflow .wf-menu__hamburger,
.wp-header .wf-menu.wf-menu--collapsed .wf-menu__hamburger { display: flex; }
.wp-header .wf-menu.wf-menu--overflow { align-items: center; gap: 10px; }
.wp-header .wf-menu.wf-menu--overflow > ul { flex: 0 0 auto; }
.wp-header .wf-menu.wf-menu--overflow .wf-menu__hamburger { order: 1; flex: 0 0 auto; }
.wp-header .wf-menu.wf-menu--measuring > ul
{
    position: absolute; left: 0; top: 0; visibility: hidden;
    display: flex !important; flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap;
}
.wp-header .wf-menu.wf-menu--measuring .wf-menu__hamburger { display: flex !important; }

@media (max-width: 1023px)
{
    html:not(.wf-js-fit) .wp-header .wf-menu { margin-left: auto; }
    html:not(.wf-js-fit) .wp-header .wf-menu > ul { display: none; }
    html:not(.wf-js-fit) .wp-header .wf-menu__hamburger { display: flex; }
}

html:not(.wf-js-fit) .wp-header .wf-menu { min-width: 0; }
html:not(.wf-js-fit) .wp-header .wf-menu > ul { overflow: hidden; }

/* Next to the menu: the language switch, and « Mon compte » (copied into the phone panel) */
.ta-hd__tools
{
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

/* The language switch of Tempo (menu/lang-switch.css), in the colours of the cover: variables
   only, as for the menu. Its list floats above the page on the cover's dark surface. */
.ta-hd
{
    --wpl-radius: 999px;
    --wpl-color: var(--ta-ink);
    --wpl-hover: var(--ta-coral-text);
    --wpl-pop-bg: var(--ta-canvas);
    --wpl-pop-border: color-mix(in oklab, var(--ta-ink) 14%, transparent);
    --wpl-pop-radius: 14px;
    --wpl-pop-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.6);
    --wpl-item-color: var(--ta-ink);
    --wpl-item-radius: 0.5rem;
    --wpl-item-hover: color-mix(in oklab, var(--ta-ink) 8%, transparent);
    --wpl-accent: var(--ta-coral-text);
}

/* The globe is always in the bar: the menu's panel never repeats the languages (Tempo's choice,
   official/langs.ts: a row of languages at the foot of a scrolling panel is not found) */
body .wf-menu__offcanvas-langs
{
    display: none;
}

.ta-download,
.ta-account
{
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1.5px solid color-mix(in oklab, var(--ta-ink) 45%, transparent);
    border-radius: 999px;
    color: var(--ta-ink);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* « Télécharger », the way to the app from every page: the coral of the calls to action */
.ta-download
{
    border-color: var(--ta-coral);
    background: var(--ta-coral);
    color: var(--ta-on-coral);
}

.ta-download:hover
{
    border-color: color-mix(in oklab, var(--ta-coral) 82%, var(--ta-ink));
    background: color-mix(in oklab, var(--ta-coral) 82%, var(--ta-ink));
}

/* On the download page itself: a ring around it, as « Mon compte » is filled in « Mon compte » */
.ta-download[aria-current]
{
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ta-coral) 40%, transparent);
}

.ta-account:hover
{
    border-color: var(--ta-ink);
}

/* In « Mon compte », the button of the page the visitor is on */
.ta-account[aria-current]
{
    border-color: var(--ta-ink);
    background: color-mix(in oklab, var(--ta-ink) 14%, transparent);
}

/* In the bar, « Mon compte » is a quiet link and « Télécharger » the only button: one call to
   action, and the room for the menu's main entries, « Tarifs » among them (2026-10-25). The copy
   in the phone panel stays a button */
.ta-hd__tools .ta-account
{
    padding-inline: 10px;
    border-color: transparent;
}

.ta-hd__tools .ta-account:hover,
.ta-hd__tools .ta-account[aria-current]
{
    border-color: transparent;
    background: color-mix(in oklab, var(--ta-ink) 12%, transparent);
}

/* The globe and the code of the language say what the switch is: no chevron, as on a phone */
.ta-hd .wp-langs-chev
{
    display: none;
}

.ta-hd .wp-langs--menu > summary
{
    padding-inline: 6px;
}

/* The phone menu's panel is appended to the body, outside the dark cover: its copy of « Mon compte »
   takes the panel's colours (copied onto it by wfm-deferred.js), not those of the page, which are
   light in light mode: dark text on the dark panel, invisible */
.wf-menu__offcanvas-ctas .ta-account
{
    color: var(--wfm-offcanvas-color);
    border-color: color-mix(in oklab, var(--wfm-offcanvas-color) 45%, transparent);
}

.wf-menu__offcanvas-ctas .ta-account:hover
{
    border-color: var(--wfm-offcanvas-color);
}

/* A tablet: the bar holds the logo, the menu folded, the globe and ONE button (both need 713 px,
   measured on 2026-10-15 in Chrome on a Mac, there from 820 px; Roboto or Segoe are wider):
   « Télécharger » stays, « Mon compte » moves into the menu's panel (wfm-deferred.js copies there
   the buttons the bar hides) */
@media (max-width: 880px)
{
    .ta-hd__tools .ta-account
    {
        display: none;
    }
}

/* A phone: « Télécharger » moves into the menu's panel too, above « Mon compte »; the language
   switch stays in the bar, without its code below 400 px (its accessible name stays whole) */
@media (max-width: 640px)
{
    .ta-hd__row
    {
        gap: 10px;
    }

    .ta-brand
    {
        gap: 8px;
        font-size: 1.2rem;
    }

    .ta-brand img
    {
        width: 36px;
        height: 36px;
    }

    .ta-hd__tools .ta-download,
    .ta-hd__tools .ta-account
    {
        display: none;
    }
}

/* Measured on 2026-10-13 (Chrome, the bookmark at the right): the code of the language fits from
   401 px, the logo with its name, the menu and the globe from 360 px; below, the name alone */
@media (max-width: 400px)
{
    .ta-hd .wp-langs-code
    {
        display: none;
    }
}

@media (max-width: 359px)
{
    .ta-brand img
    {
        display: none;
    }
}

/* ------------------------------------------------------------------ the home cover */

/* Each part a cell of the grid (2026-10-23). A phone: one column, in reading order, the reminder
   under the title. A computer: the text in the first column, centred in the height of the second,
   where the reminder arrives over Octave */
.ta-head
{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "notif" "lede" "cta" "pic";
    max-width: 74rem;
    margin-inline: auto;
    padding-top: clamp(16px, 4vw, 44px);
    padding-right: clamp(0px, 7vw, 120px);
}

.ta-head__title { grid-area: title; }
.ta-head__notif { grid-area: notif; }
.ta-head__lede { grid-area: lede; }
.ta-head__cta { grid-area: cta; }

@media (min-width: 980px)
{
    .ta-head
    {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        grid-template-rows: 1fr auto auto auto 1fr;
        grid-template-areas: ". pic" "title pic" "lede pic" "cta pic" ". pic";
        column-gap: 32px;
    }
}

/* What it is, above the title: the phrase of the stores and of the link's preview */
.ta-kicker
{
    margin: 0 0 14px;
    color: var(--ta-coral-text);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
    /* Two even lines on a phone, the first kept clear of the bookmark */
    text-wrap: balance;
}

.ta-thesis
{
    max-width: 15ch;
    margin: 0;
    /* 4.25rem at most since 2026-11-02 (5.3rem before): the scene of the passport holds in three
       lines on a computer, and the button under the longer lede stays in a laptop's first screen */
    font: 800 clamp(2.5rem, 5vw, 4.25rem)/0.98 var(--ta-font-display);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

/* « la veille du départ » underlined with a felt-tip, as on Tempo's home page: the coral stroke under
   the words (marker.css), below their descenders. « clone » draws it again under each line when
   the words wrap (the English ones do). `.ta-mark`: the same stroke under the marked words of
   another page on the site's host (the page of a share link, server/src/share/): written here, its
   image is found beside this sheet */
.ta-thesis em,
.ta-mark
{
    font-style: normal;
    color: var(--ta-coral-text);
    padding-block-end: 0.22em;
    background: var(--ta-marker) no-repeat 0 100% / 100% 0.36em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* The stroke hangs lower than a line height of 0.98 leaves room for: this empty inline, lowered
   below the baseline, lengthens the first line of the words downwards only, so the stroke of a
   first line clears the next line and the lines above keep their spacing. An inline-block would
   not do: an atomic box offers a line break before it and, zero wide, stays at the end of the
   line above, which it then lengthens instead (measured 2026-10-14, Chrome). The same empty inline
   at the end lengthens the last line when the words wrap (the English ones), so that its stroke
   clears the lede under the title (2026-10-23) */
.ta-thesis em::before,
.ta-thesis em::after
{
    content: "";
    vertical-align: -0.4em;
}

.ta-lede
{
    max-width: 33em;
    margin: 26px 0 0;
    color: var(--ta-ink-muted);
    font-size: 1.25rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.ta-lede strong
{
    color: var(--ta-ink);
    font-weight: 600;
}

.ta-cta
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin-top: 30px;
}

.ta-btn
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border: 0;
    border-radius: 999px;
    font: 700 1.15rem/1.1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.ta-btn--coral
{
    background: var(--ta-coral);
    color: var(--ta-on-coral);
}

.ta-btn--petrol
{
    background: var(--ta-accent-fill);
    color: var(--ta-on-accent-fill);
}

/* The second choice beside a filled one: the same shape, outlined (the offers but the main one) */
.ta-btn--outline
{
    background: transparent;
    color: var(--ta-petrol-deep);
    box-shadow: inset 0 0 0 2px currentColor;
}

/* Under the pointer (2026-10-22): a filled button darkens a little, an outlined one takes a tint;
   each rises by a pixel where motion is welcome (below) */
.ta-btn--coral:hover
{
    background: color-mix(in oklab, var(--ta-coral) 88%, var(--ta-ink));
}

.ta-btn--petrol:hover
{
    background: color-mix(in oklab, var(--ta-accent-fill) 85%, var(--ta-ink));
}

.ta-btn--outline:hover
{
    background: color-mix(in oklab, currentColor 10%, transparent);
}

@media (prefers-reduced-motion: no-preference)
{
    .ta-btn
    {
        transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }

    .ta-btn--coral:hover,
    .ta-btn--petrol:hover
    {
        box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--ta-ink) 60%, transparent);
        transform: translateY(-1px);
    }

    .ta-btn--outline:hover
    {
        transform: translateY(-1px);
    }
}

/* Under the button: what it costs, then where it runs */
/* The logos of the available platforms, beside the button (logos.ts); the note under them names them */
.ta-cta__logos
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ta-cta__logo
{
    width: 24px;
    height: 24px;
    fill: var(--ta-ink);
}

.ta-cta__note
{
    flex-basis: 100%;
    margin: 0;
    color: var(--ta-ink-muted);
    font-size: 1.05rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.ta-octave
{
    justify-self: center;
    width: min(100%, 360px);
    margin: 0;
    text-align: center;
}

@media (min-width: 980px)
{
    .ta-octave
    {
        width: min(100%, 420px);
    }
}

.ta-octave img
{
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.35));
}

.ta-octave figcaption
{
    margin-top: 4px;
    transform: rotate(-3deg);
}

/* Octave under the button on a phone */
.ta-head .ta-octave
{
    grid-area: pic;
    margin-top: 24px;
}

/* The reminder of the app as the phone shows it (sketches.ts, reminderCard), in the visitor's mode:
   the app said in a glance, under the title on a phone */
.ta-head__notif
{
    margin-top: 24px;
}

.ta-head__notif .ta-notif
{
    gap: 4px;
    max-width: 24rem;
    padding: 12px 15px 13px;
    border-radius: 18px;
    font-size: 1.05rem;
    box-shadow: 0 22px 40px -20px rgb(0 0 0 / 0.75), 0 0 0 1px color-mix(in oklab, var(--ta-ink) 10%, transparent);
}

.ta-head__notif .ta-notif b
{
    gap: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ta-head__notif .ta-notif img
{
    width: 22px;
    height: 22px;
}

/* A computer: the reminder arrives over Octave, at the top of the orbit */
@media (min-width: 980px)
{
    .ta-head__notif
    {
        z-index: 1;
        grid-area: pic;
        align-self: start;
        justify-self: center;
        width: min(100%, 360px);
        margin-top: 56px;
    }

    .ta-head .ta-octave
    {
        align-self: start;
        margin-top: 120px;
    }
}

/* An illustration that only adorns: on a phone it would come under the text and push the rest a
   screen further, so it is left out */
@media (max-width: 640px)
{
    .ta-wide-only
    {
        display: none;
    }
}

/* ------------------------------------------------------------------ the year frieze */

.ta-year
{
    max-width: 74rem;
    margin: clamp(40px, 6vw, 68px) auto 0;
}

.ta-year__head
{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px 24px;
    margin-bottom: 12px;
}

.ta-year__head h2
{
    margin: 0;
    color: var(--ta-ink-muted);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ta-year__head .ta-note
{
    display: flex;
    align-items: center;
    gap: 6px;
}

/* A page of the notebook laid on the cover: the visitor's mode again (.ta-scheme-auto) */
.ta-frise
{
    position: relative;
    border-radius: 4px 12px 12px 4px;
    background:
        linear-gradient(90deg, transparent 22px, var(--ta-notebook-margin) 22px, var(--ta-notebook-margin) 24px, transparent 24px),
        var(--ta-cream);
    color: var(--ta-ink);
    box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7), 0 0 0 1px color-mix(in oklab, var(--ta-ink) 12%, transparent);
}

.ta-frise__scroll
{
    display: none;
    overflow-x: auto;
    padding-block: 14px 18px;
}

.ta-frise.is-drawn .ta-frise__scroll
{
    display: block;
}

/* Without the script, the same things are a list; drawn, the list stays for screen readers */
.ta-frise__list
{
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 22px 24px 22px 44px;
    list-style: none;
}

.ta-frise.is-drawn .ta-frise__list
{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ta-frise__canvas
{
    position: relative;
    min-width: 860px;
    margin: 0 24px 0 44px;
    padding-block: 48px 34px;
}

.ta-frise__months
{
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ta-frise__month
{
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    padding: 2px 8px;
    border-left: 1px dashed color-mix(in oklab, var(--ta-ink) 18%, transparent);
    color: var(--ta-ink-muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ta-frise__month:nth-child(even)
{
    background: color-mix(in oklab, var(--ta-ink) 3%, transparent);
}

.ta-frise__lanes
{
    position: relative;
}

.ta-frise__today
{
    position: absolute;
    top: 0;
    bottom: 26px;
    width: 2px;
    margin-left: -1px;
    background: var(--ta-coral);
    pointer-events: none;
}

.ta-frise__today span
{
    position: absolute;
    top: -6px;
    left: 8px;
    color: var(--ta-coral-text);
    font: 700 1.35rem/1 var(--ta-font-hand);
    white-space: nowrap;
}

.ta-strip
{
    position: absolute;
    height: 46px;
}

.ta-strip__bar
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    height: 8px;
    border-radius: 99px;
    background:
        repeating-linear-gradient(135deg, color-mix(in oklab, var(--cat) 80%, transparent) 0 2px, transparent 2px 5px) 0 0 / var(--call, 0px) 100% no-repeat,
        linear-gradient(var(--cat), var(--cat)) var(--call, 0px) 0 / calc(100% - var(--call, 0px)) 100% no-repeat;
}

.ta-strip__label
{
    position: absolute;
    left: 0;
    bottom: 15px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 8px;
    border-radius: 7px;
    background: var(--ta-paper);
    color: var(--ta-ink);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 1px 0 color-mix(in oklab, var(--ta-ink) 14%, transparent), 0 4px 10px -5px color-mix(in oklab, var(--ta-ink) 50%, transparent);
}

.ta-strip__dot
{
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--cat);
}

.ta-strip__check
{
    display: none;
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: var(--cat);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-strip.is-done .ta-strip__check
{
    display: block;
}

.ta-strip.is-done .ta-strip__dot
{
    display: none;
}

/* The coral bookmark: « je m'en occupe » */
.ta-strip.has-ribbon .ta-strip__label
{
    padding-right: 28px;
}

.ta-strip.has-ribbon .ta-strip__label::after
{
    content: "";
    position: absolute;
    top: -5px;
    right: 8px;
    width: 11px;
    height: 19px;
    background: var(--ta-coral);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

.ta-strip__rdv
{
    position: absolute;
    bottom: 0;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border: 2px solid var(--ta-paper);
    border-radius: 50%;
    background: var(--ta-ink);
}

.ta-frise__swipe
{
    display: none;
    margin-top: 10px;
    text-align: right;
}

@media (max-width: 900px)
{
    .ta-frise.is-drawn ~ .ta-frise__swipe
    {
        display: block;
    }
}

.ta-done
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 20px;
}

/* The bubble of the app after « C'est fait » */
.ta-done__pill
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 18px;
    border: 1px solid color-mix(in oklab, var(--ta-ink) 22%, transparent);
    border-radius: 14px;
    background: var(--ta-toast);
    color: var(--ta-on-toast);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.35;
}

.ta-done__pill svg
{
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: var(--ta-toast-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-replay
{
    padding: 6px;
    border: 0;
    background: none;
    color: var(--ta-ink-muted);
    font: 600 1rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ta-legend
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 16px 0 0;
    padding: 0;
    color: var(--ta-ink-muted);
    font-size: 1rem;
    list-style: none;
}

.ta-legend li
{
    display: flex;
    align-items: center;
    gap: 9px;
}

.ta-legend span
{
    display: inline-block;
    flex: none;
}

.ta-legend__call
{
    width: 26px;
    height: 8px;
    border-radius: 99px;
    background: repeating-linear-gradient(135deg, var(--ta-ink) 0 2px, transparent 2px 5px);
}

.ta-legend__win
{
    width: 26px;
    height: 8px;
    border-radius: 99px;
    background: var(--ta-ink);
}

.ta-legend__rib
{
    width: 11px;
    height: 18px;
    background: var(--ta-coral);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

.ta-legend__rdv
{
    width: 13px;
    height: 13px;
    border: 2px solid var(--ta-ink);
    border-radius: 50%;
    background: var(--ta-canvas);
}

@media (prefers-reduced-motion: no-preference)
{
    .ta-strip
    {
        transition: left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .ta-done.is-live .ta-done__pill
    {
        animation: ta-pop 0.6s ease;
    }
}

@keyframes ta-pop
{
    0% { transform: scale(0.94); }
    60% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ the top of a page */

/* Its height is its text's (2026-10-22, the user: « cette hauteur sur toutes les pages, un texte
   volumineux agrandit naturellement la hauteur »): a moderate title, Octave small beside it */
.ta-band
{
    max-width: 74rem;
    margin-inline: auto;
    padding-block: clamp(8px, 2vw, 20px) 0;
    padding-right: clamp(0px, 8vw, 130px);
}

.ta-cover:has(.ta-band)
{
    padding-bottom: clamp(24px, 4vw, 44px);
}

.ta-band h1
{
    max-width: 18ch;
    margin: 0;
    font: 800 clamp(2rem, 4vw, 3.2rem)/1 var(--ta-font-display);
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.ta-band p
{
    max-width: 30em;
    margin: 12px 0 0;
    color: var(--ta-ink-muted);
    font-size: 1.15rem;
    line-height: 1.55;
}

.ta-band .ta-octave
{
    width: min(100%, 220px);
}

/* A top with an illustration (« Notre histoire »): beside the title on a computer, under it on a phone */
.ta-band--art
{
    display: grid;
    gap: 24px;
}

@media (min-width: 980px)
{
    .ta-band--art
    {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: center;
        column-gap: 32px;
    }
}

/* The top of a page consulted, not discovered (blocks.ts, briefBand: the guide, the download;
   2026-10-22, « ça doit rester efficace »): its title, one sentence, and the content under it at
   once. The bookmark shortened with it, so as not to hang over the text */
.ta-cover:has(.ta-band--brief)
{
    padding-bottom: 34px;
}

.ta-cover:has(.ta-band--brief) .ta-ribbon
{
    height: 64px;
}

.ta-band--brief
{
    padding-block: 6px 0;
}

/* A cover that holds the menu only (the guide: its title opens the page itself, on paper): the band
   of the header and its stitching, the bookmark shortened with it */
.ta-cover--bare
{
    padding-bottom: 30px;
}

.ta-cover--bare .ta-ribbon
{
    height: 56px;
}

.ta-band--brief h1
{
    max-width: 30ch;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.ta-band--brief p
{
    max-width: 46em;
    margin-top: 8px;
    font-size: 1.125rem;
    line-height: 1.5;
}

/* ------------------------------------------------------------------ paper sections */

.ta-sec
{
    padding-inline: 16px;
    padding-block: clamp(60px, 8vw, 110px);
}

.ta-sec--cream
{
    background: var(--ta-cream);
}

.ta-shell
{
    max-width: 74rem;
    margin-inline: auto;
}

.ta-h2
{
    max-width: 19ch;
    margin: 0;
    color: var(--ta-petrol-deep);
    font: 800 clamp(2.1rem, 4.6vw, 3.5rem)/1.03 var(--ta-font-display);
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.ta-h2--later
{
    margin-top: clamp(64px, 8vw, 96px);
    scroll-margin-top: 24px;
}

.ta-big
{
    max-width: 30em;
    margin: 20px 0 0;
    font-size: clamp(1.25rem, 2vw, 1.45rem);
    line-height: 1.5;
}

.ta-split
{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

@media (min-width: 900px)
{
    .ta-split
    {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: 64px;
    }
}

.ta-split > *
{
    min-width: 0;
}

.ta-more + .ta-more
{
    margin-left: 28px;
}

.ta-more
{
    display: inline-flex;
    gap: 8px;
    margin-top: 30px;
    color: var(--ta-petrol);
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.ta-checks
{
    display: grid;
    gap: 16px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.ta-checks li
{
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    max-width: 34em;
}

.ta-checks svg
{
    width: 26px;
    height: 26px;
    margin-top: 1px;
    fill: none;
    stroke: var(--ta-petrol);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-checks b
{
    color: var(--ta-petrol-deep);
}


/* The notebook of the logo, under lock */
.ta-lockbook
{
    position: relative;
    justify-self: center;
    width: min(100%, 300px);
    margin: 0 0 40px;
}

.ta-lockbook img
{
    width: 100%;
    height: auto;
    transform: rotate(-5deg);
    filter: drop-shadow(0 24px 30px rgb(0 0 0 / 0.3));
}

.ta-lockbook__lock
{
    position: absolute;
    right: 4%;
    bottom: 10%;
    width: 30%;
    height: auto;
    transform: rotate(-5deg);
}

.ta-lock-body
{
    fill: var(--ta-paper);
    stroke: var(--ta-petrol-deep);
    stroke-width: 5;
}

.ta-lock-shackle
{
    fill: none;
    stroke: var(--ta-petrol-deep);
    stroke-width: 7;
    stroke-linecap: round;
}

.ta-lock-hole
{
    fill: var(--ta-petrol-deep);
}

.ta-lockbook figcaption
{
    position: absolute;
    left: -6%;
    bottom: -14%;
    transform: rotate(-4deg);
}

/* Three moments: a real sequence, hence the numbers. Each step spans four rows of the list, so
   that number, title, text and drawing line up from one step to the next */
.ta-steps
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 12px 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ta-step
{
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: 12px;
    min-width: 0;
    margin-bottom: 32px;
}

.ta-step__n
{
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--ta-coral);
    border-radius: 50%;
    color: var(--ta-coral-text);
    font: 700 1.75rem/1 var(--ta-font-hand);
}

.ta-step h2
{
    margin: 0;
    color: var(--ta-petrol-deep);
    font: 800 1.55rem/1.15 var(--ta-font-display);
    letter-spacing: -0.015em;
}

.ta-step p
{
    margin: 0;
}

.ta-step p + p
{
    margin-top: 10px;
}

/* The drawings of the app */
.ta-vig
{
    display: grid;
    align-content: center;
    margin-top: 8px;
    padding: 20px;
    border-radius: 16px;
    background: var(--ta-cream);
}

.ta-sheet,
.ta-pile
{
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 12px;
    background: var(--ta-paper);
    box-shadow: 0 1px 0 color-mix(in oklab, var(--ta-ink) 10%, transparent), 0 10px 24px -16px color-mix(in oklab, var(--ta-ink) 60%, transparent);
}

.ta-sheet__kicker
{
    margin: 0;
    color: var(--ta-ink-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.ta-sheet__title,
.ta-pile__title
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--ta-petrol-deep);
    font: 800 1.45rem/1.1 var(--ta-font-display);
}

.ta-sheet__title i
{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cat);
}

.ta-sheet dl
{
    display: grid;
    gap: 6px;
    margin: 4px 0 0;
}

.ta-sheet dl div
{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-block: 6px;
    border-top: 1px solid color-mix(in oklab, var(--ta-ink) 12%, transparent);
    font-size: 1rem;
}

.ta-sheet dt
{
    color: var(--ta-ink-muted);
}

.ta-sheet dd
{
    margin: 0;
    font-weight: 700;
}

.ta-pile__phrase
{
    margin: -4px 0 4px;
    color: var(--ta-ink-muted);
    font-size: 0.98rem;
}

.ta-pile ul,
.ta-family__card ul
{
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A thing to plan: dotted, it floats (brand.md §5) */
.ta-card
{
    display: grid;
    gap: 2px;
    padding: 9px 12px;
    border: 2px dashed var(--cat);
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.3;
}

.ta-card b
{
    font-size: 1.02rem;
}

.ta-card span
{
    color: var(--ta-ink-muted);
}

.ta-toast
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--ta-toast);
    color: var(--ta-on-toast);
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 16px 30px -18px rgb(0 0 0 / 0.6);
}

.ta-toast svg
{
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: var(--ta-toast-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-toast span
{
    flex: 1 1 12rem;
}

.ta-toast b
{
    color: var(--ta-toast-accent);
    font-weight: 700;
}


/* The frame of a drawn device, in the ink of the scope it sits in */
.ta-devices
{
    --ta-bezel: color-mix(in oklab, var(--ta-ink) 88%, var(--ta-canvas));
}

/* A computer and a phone */
.ta-devices
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(118px, 26%, 160px);
    align-items: end;
    justify-self: center;
    width: 100%;
    max-width: 560px;
    margin-top: 40px;
}

/* The computer alone, its base kept inside the column */
.ta-devices--week
{
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
    padding-inline: 6%;
}

.ta-laptop__screen
{
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    padding: 5% 8% 8%;
    border: 10px solid var(--ta-bezel);
    border-radius: 14px 14px 4px 4px;
    background: var(--ta-paper);
}

.ta-laptop__base
{
    height: 14px;
    margin-inline: -6%;
    border-radius: 0 0 14px 14px;
    background: color-mix(in oklab, var(--ta-ink) 70%, var(--ta-canvas));
}

.ta-week
{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    height: 100%;
}

.ta-week__day
{
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 4px;
    min-width: 0;
}

.ta-week__day > b
{
    overflow: hidden;
    color: var(--ta-ink-muted);
    font-size: 0.7rem;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.ta-week__col
{
    position: relative;
    border-radius: 4px;
    background: color-mix(in oklab, var(--ta-cream) 70%, var(--ta-paper));
}

/* The agenda: grey, fixed */
.ta-week__ev
{
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 4px;
    background: var(--ta-agenda-grey);
}

.ta-week__ev--a { top: 8%; height: 18%; }
.ta-week__ev--b { top: 46%; height: 22%; }
.ta-week__ev--c { top: 20%; height: 30%; }
.ta-week__ev--d { top: 60%; height: 16%; }

/* A thing to plan, cased in the week: dotted */
.ta-week__gevent
{
    position: absolute;
    left: 3px;
    right: 3px;
    top: 34%;
    height: 22%;
    border: 2px dashed var(--cat);
    border-radius: 5px;
    background: color-mix(in oklab, var(--cat) 14%, var(--ta-paper));
}

.ta-phone
{
    position: relative;
    z-index: 1;
    aspect-ratio: 9 / 18.5;
    padding: 30% 7% 0;
    border: 8px solid var(--ta-bezel);
    border-radius: 26px;
    background: var(--ta-cream);
    box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.55);
}

.ta-devices .ta-phone
{
    margin: 0 0 -6% -18%;
}

.ta-notif
{
    display: grid;
    gap: 3px;
    padding: 8px 9px;
    border-radius: 10px;
    background: var(--ta-paper);
    color: var(--ta-ink);
    font-size: 0.72rem;
    line-height: 1.3;
    box-shadow: 0 6px 14px -8px color-mix(in oklab, var(--ta-ink) 60%, transparent);
}

.ta-notif b
{
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--ta-ink-muted);
    font-size: 0.66rem;
}

.ta-notif b span
{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-notif b img
{
    width: 14px;
    height: 14px;
    flex: none;
}

/* A thing shared: the message the brother gets, then the page of its link (docs/sharing.md §2, §4) */
.ta-sms
{
    justify-items: start;
    gap: 10px;
}

.ta-sms__who
{
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    transform: rotate(-3deg);
}

.ta-sms__bubble
{
    max-width: 88%;
    margin: 0;
    padding: 11px 15px;
    border-radius: 18px 18px 18px 5px;
    background: var(--ta-paper);
    font-size: 1.02rem;
    line-height: 1.35;
    box-shadow: 0 6px 14px -10px color-mix(in oklab, var(--ta-ink) 60%, transparent);
}

.ta-sms__card
{
    display: grid;
    gap: 3px;
    width: min(100%, 22rem);
    padding: 12px 14px;
    border: 2px dashed var(--cat);
    border-radius: 12px;
    background: var(--ta-paper);
}

.ta-sms__card b
{
    font-size: 1.05rem;
}

.ta-sms__when
{
    color: var(--ta-ink-muted);
    font-size: 0.95rem;
}

.ta-sms__actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ta-sms__btn
{
    padding: 7px 14px;
    border: 1.5px solid var(--ta-accent-fill);
    border-radius: 999px;
    background: var(--ta-accent-fill);
    color: var(--ta-on-accent-fill);
    font-weight: 700;
    font-size: 0.92rem;
}

.ta-sms__bubble u
{
    color: var(--ta-petrol);
    text-underline-offset: 2px;
}

/* What the page of the link says under its button: no reminder without the app */
.ta-sms__hint
{
    margin-top: 6px;
    color: var(--ta-ink-muted);
    font-size: 0.88rem;
    line-height: 1.35;
}

/* Mum's things, seen by two people */
.ta-family
{
    position: relative;
    justify-self: center;
    width: min(100%, 380px);
    padding-block: 54px 10px;
}

.ta-family__card
{
    display: grid;
    gap: 12px;
    padding: 20px;
    border-radius: 14px;
    background: var(--ta-paper);
    box-shadow: 0 1px 0 color-mix(in oklab, var(--ta-ink) 10%, transparent), 0 18px 34px -22px color-mix(in oklab, var(--ta-ink) 70%, transparent);
}

.ta-family__name
{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--ta-petrol-deep);
    font: 800 1.5rem/1 var(--ta-font-display);
}

.ta-family__name i
{
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cat);
    color: var(--ta-on-color);
    font: 700 1.1rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-style: normal;
}

.ta-family__who
{
    position: absolute;
    top: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.ta-family__who--you
{
    left: 2%;
    transform: rotate(-5deg);
}

.ta-family__who--sis
{
    right: 0;
    flex-direction: row-reverse;
    transform: rotate(4deg);
}

.ta-family__who--sis .ta-arrow
{
    transform: scaleX(-1);
}

/* ------------------------------------------------------------------ the inner pages */

.ta-page
{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
}

@media (min-width: 960px)
{
    .ta-page
    {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 72px;
        align-items: start;
    }

    .ta-page__aside
    {
        position: sticky;
        top: 32px;
    }
}

.ta-page > *
{
    min-width: 0;
}

.ta-points
{
    display: grid;
    gap: clamp(36px, 5vw, 52px);
}

.ta-point h2
{
    margin: 0 0 10px;
    color: var(--ta-petrol-deep);
    font: 800 clamp(1.5rem, 2.6vw, 2rem)/1.15 var(--ta-font-display);
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.ta-point p
{
    max-width: 34em;
    margin: 0;
}

.ta-point p + p
{
    margin-top: 12px;
}

/* A point with its own picture: beside the texts, in the room their 34em leave on a wide screen;
   under them on a phone */
.ta-point--figure
{
    display: grid;
    gap: 32px;
    align-items: center;
}

@media (min-width: 760px)
{
    .ta-point--figure
    {
        grid-template-columns: minmax(0, 34em) minmax(200px, 280px);
        column-gap: clamp(40px, 6vw, 88px);
    }
}

/* A photo like a print slipped into the notebook: tilted a little, the note written under it */
.ta-portrait
{
    justify-self: center;
    width: min(100%, 220px);
    margin: 0;
    text-align: center;
}

@media (min-width: 760px)
{
    .ta-portrait
    {
        width: min(100%, 260px);
    }
}

.ta-portrait img
{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    transform: rotate(2deg);
    box-shadow: 0 22px 34px -20px rgb(0 0 0 / 0.55);
}

.ta-portrait figcaption
{
    margin-top: 16px;
    transform: rotate(-3deg);
}

.ta-next
{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin-top: clamp(56px, 7vw, 88px);
    padding-top: 28px;
    border-top: 1px solid color-mix(in oklab, var(--ta-ink) 14%, transparent);
}

.ta-next span
{
    color: var(--ta-ink-muted);
    font-weight: 600;
}

.ta-next a
{
    color: var(--ta-petrol);
    font: 800 clamp(1.3rem, 2.4vw, 1.7rem)/1.2 var(--ta-font-display);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.ta-next a span
{
    color: inherit;
}

/*
 * The download (pages/devices.ts): a card per platform, side by side, in a few words: its name, the
 * devices it needs, its badge (the user, 2026-10-22: « plus synthétique », the devices drawn on the
 * night and their animations dropped). One not out yet, in a dotted place kept for it.
 */
.ta-sec--download
{
    padding-top: clamp(40px, 5vw, 64px);
}

/* Under the short title of the page (briefBand), never bigger than it */
.ta-sec--download .ta-h2
{
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    letter-spacing: -0.02em;
}

.ta-sec--download .ta-big
{
    max-width: 46em;
    margin-top: 10px;
    font-size: 1.15rem;
}

/* auto-fill: the card of this device alone (public/download.js) keeps the width of one */
.ta-gets
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 16px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.ta-get
{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 22px;
    border: 1px solid color-mix(in oklab, var(--ta-ink) 14%, transparent);
    border-radius: 16px;
    background: var(--ta-paper);
}

.ta-get[hidden]
{
    display: none;
}

/* « Autres appareils », under the card of this device (public/device.js), then the others named
   with their logos (public/download.js hides this device's) */
.ta-gets__more
{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: 16px;
    padding: 4px 0;
    color: var(--ta-ink-muted);
    text-decoration: none;
}

.ta-gets__more[hidden],
.ta-gets__other[hidden]
{
    display: none;
}

.ta-gets__more-label
{
    color: var(--ta-petrol);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.ta-gets__other
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.ta-gets__logo
{
    width: 1.05em;
    height: 1.05em;
    flex: none;
    fill: currentColor;
}

/* A card that downloads says so under the pointer, without moving */
.ta-get:has(a):hover
{
    border-color: var(--ta-petrol);
}

.ta-get--soon
{
    border: 2px dashed color-mix(in oklab, var(--ta-ink) 22%, transparent);
    background: transparent;
}

.ta-get__head
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.ta-get__name
{
    margin: 0;
    color: var(--ta-petrol-deep);
    font: 800 1.5rem/1.1 var(--ta-font-display);
    letter-spacing: -0.02em;
}

/* The logo of a platform not out yet, beside its name (logos.ts) */
.ta-get__logo
{
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.35em;
    vertical-align: -0.06em;
    fill: currentColor;
}

/* « Bientôt », on a platform not out yet */
.ta-state
{
    padding: 3px 10px;
    border: 1.5px solid var(--ta-ink-muted);
    border-radius: 999px;
    color: var(--ta-ink);
    font-size: 0.92rem;
    font-weight: 700;
}

/* The devices a platform needs (shared/app/domains.json, `minimum`) */
.ta-get__needs
{
    margin: 0 0 8px;
    color: var(--ta-ink-muted);
    font-size: 1.05rem;
    line-height: 1.45;
    text-wrap: pretty;
}

/* The download, at the foot of the card whatever the length of its text */
.ta-get .ta-dl-badge,
.ta-get__store
{
    align-self: flex-start;
    margin-top: auto;
}

/*
 * The whole card downloads: the badge stays its only link, spread over the card by its ::after, so
 * that a screen reader still hears one link, « Télécharger pour Mac ». Within the card only: the
 * badge of « Mon compte », outside any card, spread over half the page (2026-10-17)
 */
.ta-get .ta-dl-badge::after,
.ta-get .ta-get__store::after
{
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
}

/*
 * The official badge of a store, never redrawn nor recoloured: 40 px high at least (Apple), and
 * Google's, whose PNG holds its own margin, a little higher so that both look the same size
 */
.ta-get__store img
{
    display: block;
    width: auto;
    height: 50px;
}

.ta-get__store--google-play img
{
    height: 66px;
    margin: -8px 0;
}

/* The version a computer's download gives and its day (shared/changes.json), above the badge: the
   badges of the four cards stay level at their foot */
.ta-get__version
{
    margin: 0 0 16px;
    color: var(--ta-ink-muted);
    font-size: 0.98rem;
    line-height: 1.45;
}

/* « Nouveautés » (pages/changes.ts): the device chosen, then each version, the newest first */
.ta-notes__devices
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ta-notes__device
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1.5px solid color-mix(in oklab, var(--ta-ink) 22%, transparent);
    border-radius: 999px;
    color: var(--ta-ink);
    font-weight: 700;
    text-decoration: none;
}

.ta-notes__device:hover
{
    border-color: var(--ta-petrol);
}

.ta-notes__device[aria-current="page"]
{
    border-color: var(--ta-accent-fill);
    background: var(--ta-accent-fill);
    color: var(--ta-on-accent-fill);
}

.ta-notes__logo
{
    width: 1.05em;
    height: 1.05em;
    flex: none;
    fill: currentColor;
}

.ta-notes
{
    max-width: 46em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ta-notes__release
{
    padding: 36px 0 8px;
    border-bottom: 1px solid color-mix(in oklab, var(--ta-ink) 14%, transparent);
}

.ta-notes__version
{
    margin: 0;
    color: var(--ta-petrol-deep);
    font: 800 clamp(1.6rem, 3vw, 2.1rem)/1.1 var(--ta-font-display);
    letter-spacing: -0.02em;
}

.ta-notes__day
{
    display: block;
    margin-top: 6px;
    color: var(--ta-ink-muted);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

.ta-notes__kind
{
    margin: 24px 0 8px;
    color: var(--ta-ink);
    font-size: 1.15rem;
}

.ta-notes__changes
{
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 1.2em;
    list-style: disc;
    line-height: 1.5;
}

.ta-notes__changes b
{
    display: block;
}

.ta-notes__nothing
{
    margin: 16px 0;
    color: var(--ta-ink-muted);
}

/*
 * Our own badge, for an app outside the stores (the Mac): the shape and the colours of the store
 * badges beside it, whatever the theme (`storeBadge`), the logo of its platform (logos.ts).
 * Also on the page of a share link (server/src/share/)
 */
.ta-dl-badge
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 18px 0 12px;
    border: 1px solid color-mix(in srgb, var(--ta-on-store-badge) 65%, var(--ta-store-badge));
    border-radius: 9px;
    background: var(--ta-store-badge);
    color: var(--ta-on-store-badge);
    text-decoration: none;
}

.ta-dl-badge__logo
{
    width: 26px;
    height: 26px;
    flex: none;
    fill: currentColor;
}

.ta-dl-badge__text
{
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.ta-dl-badge__small
{
    font-size: 0.75rem;
    font-weight: 500;
}

.ta-dl-badge__big
{
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* The prices: one card per offer of shared/app/plans.json, the main one drawn in petrol */
.ta-plans
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Each card shares the rows of the list (subgrid, 2026-10-22): name, people, price, lines, note,
 * button, so that the prices and the buttons line up from one card to the next whatever wraps above
 * them. Without subgrid, each card keeps its own rows, the lines taking the room left.
 */
.ta-plan
{
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto auto;
    grid-row: span 6;
    row-gap: 10px;
    padding: 24px;
    border: 1px solid color-mix(in oklab, var(--ta-ink) 16%, transparent);
    border-radius: 16px;
    background: var(--ta-paper);
}

@supports (grid-template-rows: subgrid)
{
    .ta-plan
    {
        grid-template-rows: subgrid;
    }
}

.ta-plan--main
{
    border: 2px solid var(--ta-petrol);
    box-shadow: 0 18px 40px -24px color-mix(in oklab, var(--ta-ink) 55%, transparent);
}

/* « Recommandé », astride the top edge of the main offer */
.ta-plan__badge
{
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--ta-coral);
    color: var(--ta-on-coral);
    font: 700 0.9rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.ta-plan__name
{
    grid-row: 1;
    margin: 0;
    color: var(--ta-petrol-deep);
    font: 800 1.6rem/1.1 var(--ta-font-display);
}

.ta-plan__people
{
    grid-row: 2;
    margin: 0;
    color: var(--ta-ink-muted);
    font-weight: 600;
}

.ta-plan__price
{
    grid-row: 3;
    margin: 6px 0 4px;
    color: var(--ta-ink);
}

.ta-plan__price b
{
    font: 800 2.4rem/1 var(--ta-font-display);
    letter-spacing: -0.02em;
}

.ta-plan__price span
{
    color: var(--ta-ink-muted);
    font-weight: 600;
}

.ta-plan__lines
{
    grid-row: 4;
    display: grid;
    align-content: start;
    gap: 10px;
    margin: 6px 0 8px;
    padding: 0;
    list-style: none;
}

.ta-plan__lines li
{
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    line-height: 1.4;
}

.ta-plan__lines svg
{
    width: 20px;
    height: 20px;
    margin-top: 2px;
    fill: none;
    stroke: var(--ta-petrol);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-plan__note
{
    grid-row: 5;
    margin: 0 0 4px;
    color: var(--ta-ink-muted);
    font-weight: 600;
    line-height: 1.4;
}

.ta-plan .ta-btn
{
    grid-row: 6;
    justify-content: center;
    padding: 13px 20px;
    font-size: 1.05rem;
}

/* An example, moment by moment, along a line with a coral dot per moment */
.ta-timeline
{
    display: grid;
    gap: 22px;
    max-width: 44em;
    margin: 34px 0 0;
    padding: 0 0 0 28px;
    border-left: 2px solid color-mix(in oklab, var(--ta-petrol) 35%, transparent);
    list-style: none;
}

.ta-timeline li
{
    position: relative;
}

.ta-timeline li::before
{
    content: "";
    position: absolute;
    top: 6px;
    left: -36px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ta-coral);
}

.ta-timeline b
{
    color: var(--ta-petrol-deep);
    font: 800 1.15rem/1.2 var(--ta-font-display);
}

.ta-timeline p
{
    margin: 4px 0 0;
    line-height: 1.55;
}

/* Short cards side by side: who sees what */
.ta-cards
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 14px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.ta-cards li
{
    padding: 20px;
    border: 1px solid color-mix(in oklab, var(--ta-ink) 16%, transparent);
    border-radius: 14px;
    background: var(--ta-paper);
}

.ta-cards h3
{
    margin: 0 0 8px;
    color: var(--ta-petrol-deep);
    font: 800 1.2rem/1.2 var(--ta-font-display);
}

.ta-cards p
{
    margin: 0;
    line-height: 1.5;
}

/* Press: the images to download, each on a card of paper */
.ta-press-images
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 14px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.ta-press-images li
{
    display: grid;
    /* The image, the caption, then « Télécharger » at the foot of every card, whatever the caption's length */
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    align-content: start;
    padding: 16px;
    border: 1px solid color-mix(in oklab, var(--ta-ink) 16%, transparent);
    border-radius: 14px;
    background: var(--ta-paper);
}

.ta-press-images img
{
    display: block;
    width: 100%;
    height: 11rem;
    object-fit: contain;
}

.ta-press-images li > span
{
    color: var(--ta-ink-muted);
    font-size: 0.98rem;
    line-height: 1.4;
}

/* « Télécharger », under the caption */
.ta-press-images .ta-more
{
    justify-self: start;
}

/* Help */
.ta-faq
{
    display: grid;
    gap: clamp(48px, 6vw, 72px);
    max-width: 46rem;
}

.ta-faq h2
{
    margin: 0 0 6px;
    color: var(--ta-ink-muted);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ta-faq dl
{
    display: grid;
    gap: 28px;
    margin: 0;
}

.ta-faq dt
{
    margin: 0 0 6px;
    color: var(--ta-petrol-deep);
    font: 800 1.45rem/1.25 var(--ta-font-display);
    letter-spacing: -0.01em;
}

.ta-faq dd
{
    max-width: 36em;
    margin: 0;
}

/* ------------------------------------------------------------------ the back cover */

.ta-end
{
    position: relative;
    overflow: hidden;
    padding-inline: 16px;
    padding-block: clamp(64px, 8vw, 112px) 40px;
    color: var(--ta-ink);
    background:
        radial-gradient(1.2px 1.2px at 12% 22%, color-mix(in oklab, var(--ta-ink) 55%, transparent), transparent),
        radial-gradient(1px 1px at 31% 64%, color-mix(in oklab, var(--ta-ink) 40%, transparent), transparent),
        radial-gradient(1.4px 1.4px at 58% 18%, color-mix(in oklab, var(--ta-ink) 50%, transparent), transparent),
        radial-gradient(1px 1px at 77% 48%, color-mix(in oklab, var(--ta-ink) 35%, transparent), transparent),
        radial-gradient(1.2px 1.2px at 90% 80%, color-mix(in oklab, var(--ta-ink) 45%, transparent), transparent),
        radial-gradient(1px 1px at 44% 88%, color-mix(in oklab, var(--ta-ink) 30%, transparent), transparent),
        radial-gradient(90% 70% at 80% 0%, color-mix(in oklab, var(--ta-coral) 12%, transparent), transparent 60%),
        var(--ta-canvas);
}

/* The other pages: the promises and the legal pages, without the story */
.ta-end--short
{
    padding-block: 56px 32px;
}

/* The stitching of the binding */
.ta-end::before
{
    content: "";
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    border-top: 2px dashed color-mix(in oklab, var(--ta-ink) 22%, transparent);
}

.ta-end__ribbon
{
    height: clamp(90px, 12vw, 150px);
}

.ta-end__inner
{
    position: relative;
    display: grid;
    gap: clamp(30px, 4vw, 46px);
    max-width: 74rem;
    margin-inline: auto;
}

.ta-end__head
{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 16px 40px;
}

@media (min-width: 900px)
{
    .ta-end__head
    {
        grid-template-columns: minmax(0, 1fr) 400px;
    }
}

.ta-end__big
{
    max-width: 17ch;
    margin: 0;
    font: 800 clamp(2.2rem, 5.2vw, 4.4rem)/1 var(--ta-font-display);
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.ta-end__big em
{
    font-style: normal;
    color: var(--ta-coral-text);
}

.ta-end__hand
{
    margin-top: 14px;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    transform: rotate(-2deg);
    transform-origin: left;
}

.ta-end__octave
{
    justify-self: center;
    width: min(100%, 400px);
    height: auto;
    filter: drop-shadow(0 22px 30px rgb(0 0 0 / 0.45));
}

/* The horizon: ten years sliding slowly, the small things first, then the big moments */
.ta-horizon
{
    position: relative;
    overflow: hidden;
    padding-block: 56px 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ta-horizon::before
{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    border-top: 2px solid color-mix(in oklab, var(--ta-ink) 25%, transparent);
}

.ta-horizon__track
{
    display: flex;
    width: max-content;
}

.ta-horizon__year
{
    position: relative;
    display: grid;
    flex: none;
    justify-items: start;
    width: 210px;
}

.ta-horizon__dot
{
    width: 10px;
    height: 10px;
    margin-top: 3px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--ta-ink) 45%, transparent);
}

.ta-horizon__dot.is-moment
{
    width: 14px;
    height: 14px;
    margin-top: 1px;
    background: var(--ta-coral);
    box-shadow: 0 0 0 5px color-mix(in oklab, var(--ta-coral) 18%, transparent), 0 0 18px color-mix(in oklab, var(--ta-coral) 60%, transparent);
}

.ta-horizon__label
{
    margin-top: 10px;
    color: var(--ta-ink-muted);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.ta-horizon__moment
{
    position: absolute;
    top: -46px;
    left: -4px;
    color: var(--ta-ink);
    font: 700 1.6rem/1 var(--ta-font-hand);
    white-space: nowrap;
    transform: rotate(-4deg);
    transform-origin: left bottom;
}

@keyframes ta-horizon-slide
{
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: no-preference)
{
    .ta-horizon__track
    {
        animation: ta-horizon-slide 70s linear infinite;
    }
}

.ta-end__caption
{
    margin: -16px 0 0;
    color: var(--ta-ink-muted);
    font-size: 1.15rem;
    text-align: center;
}

.ta-end__promises
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 32px;
    margin: 0;
    padding: 0;
    font: 700 1.2rem/1.2 var(--ta-font-display);
    list-style: none;
}

/* The check on the first line of its promise, even when the promise wraps */
.ta-end__promises li
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ta-end__promises svg
{
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: calc((1.2em - 20px) / 2);
    fill: none;
    stroke: var(--ta-coral-text);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* On a phone, one promise per line: centred line by line, the checks would zigzag. The list is
   centred as a block, its promises aligned on their checks */
@media (max-width: 640px)
{
    .ta-end__promises
    {
        flex-direction: column;
        width: fit-content;
        margin-inline: auto;
    }
}

/* Only what the header does not have: the legal pages */
.ta-end__foot
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 28px;
    padding-top: 26px;
    border-top: 1px solid color-mix(in oklab, var(--ta-ink) 14%, transparent);
    color: var(--ta-ink-muted);
}

.ta-end__foot p
{
    margin: 0;
}

.ta-end__foot nav
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
}

.ta-end__foot a
{
    color: var(--ta-ink);
    font-weight: 600;
    text-decoration: none;
}

.ta-end__foot a:hover
{
    text-decoration: underline;
}