/*
 * 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,
.ta-get__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: 18px;
}

/* 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);
}

/* 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,
   compacted as on Tempo's site: no chevron below 640 px, no code below 360 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,
    .ta-hd .wp-langs-chev
    {
        display: none;
    }

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

/* 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 */

.ta-head
{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    max-width: 74rem;
    margin-inline: auto;
    padding-top: clamp(16px, 4vw, 44px);
    padding-right: clamp(0px, 7vw, 120px);
}

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

.ta-thesis
{
    max-width: 15ch;
    margin: 0;
    font: 800 clamp(2.5rem, 6.4vw, 5.3rem)/0.98 var(--ta-font-display);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

/* « pense à tout » 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) */
.ta-thesis em::before
{
    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);
}

/* Under the button: what it costs, then where it runs */
.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);
}

/* ------------------------------------------------------------------ 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 */

.ta-band
{
    max-width: 74rem;
    margin-inline: auto;
    padding-block: clamp(20px, 5vw, 56px) clamp(16px, 3vw, 28px);
    padding-right: clamp(0px, 8vw, 130px);
}

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

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

/* 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;
    }
}

/* ------------------------------------------------------------------ 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;
}

/* What it costs, on the home page: two short lines, just before sharing */
.ta-closing
{
    margin: 0;
    color: var(--ta-petrol-deep);
    font: 800 clamp(1.6rem, 3vw, 2.2rem)/1.25 var(--ta-font-display);
    letter-spacing: -0.015em;
}

/* 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: dark on paper, silver on the night */
.ta-devices,
.ta-get__art
{
    --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%;
}

/* The camera, on the download cards: the island of an iPhone, the hole of an Android phone */
.ta-phone--island::before,
.ta-phone--hole::before
{
    content: "";
    position: absolute;
    top: 4%;
    left: 50%;
    height: 4%;
    translate: -50% 0;
    border-radius: 999px;
    background: var(--ta-bezel);
}

.ta-phone--island::before
{
    width: 32%;
}

.ta-phone--hole::before
{
    width: auto;
    aspect-ratio: 1;
}

.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;
}

.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, its device drawn showing the app
 * (sketches.ts). An available one is a window on the night of the cover (.ta-scheme-dark): the
 * device lit and floating, a few stars, the bookmark of the logo hanging. One not out yet, smaller,
 * is a pencil sketch of its device in a dotted place kept for it.
 */
.ta-gets
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 22px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.ta-gets--soon
{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 14px;
    margin-top: 18px;
}

.ta-get
{
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--ta-ink) 14%, transparent);
    border-radius: 22px;
    background: var(--ta-paper);
}

.ta-get--ready
{
    box-shadow: 0 36px 60px -40px rgb(0 0 0 / 0.55);
}

.ta-get__stage
{
    position: relative;
    display: grid;
    place-items: center;
}

/* The night: the glow of the screens rising from below, the coral of the bookmark above */
.ta-get--ready .ta-get__stage
{
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 7% 8% 6%;
    background:
        radial-gradient(70% 65% at 50% 108%, color-mix(in oklab, var(--ta-petrol) 50%, transparent), transparent 72%),
        radial-gradient(40% 60% at 94% -6%, color-mix(in oklab, var(--ta-coral) 24%, transparent), transparent 70%),
        linear-gradient(180deg, var(--ta-canvas) 35%, var(--ta-paper));
}

/* The stars: two layers that shine in turn */
.ta-get--ready .ta-get__stage::before,
.ta-get--ready .ta-get__stage::after
{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ta-get--ready .ta-get__stage::before
{
    background:
        radial-gradient(2px 2px at 8% 16%, var(--ta-ink), transparent),
        radial-gradient(1.5px 1.5px at 22% 48%, var(--ta-ink), transparent),
        radial-gradient(2.4px 2.4px at 36% 9%, var(--ta-ink), transparent),
        radial-gradient(1.5px 1.5px at 6% 82%, var(--ta-ink), transparent),
        radial-gradient(1.5px 1.5px at 70% 7%, var(--ta-ink), transparent),
        radial-gradient(2px 2px at 92% 60%, var(--ta-ink), transparent);
    opacity: 0.8;
}

.ta-get--ready .ta-get__stage::after
{
    background:
        radial-gradient(1.5px 1.5px at 14% 64%, var(--ta-ink), transparent),
        radial-gradient(2px 2px at 54% 5%, var(--ta-ink), transparent),
        radial-gradient(1.5px 1.5px at 4% 40%, var(--ta-ink), transparent),
        radial-gradient(2.4px 2.4px at 82% 14%, var(--ta-ink), transparent),
        radial-gradient(1.5px 1.5px at 96% 86%, var(--ta-ink), transparent);
    opacity: 0.4;
}

.ta-get__ribbon
{
    position: absolute;
    z-index: 2;
    top: 0;
    right: 32px;
    width: 24px;
    height: 68px;
    filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.35));
    pointer-events: none;
}

/* The device, lit: its screen glows in the night, its shadow on the ground */
.ta-get__art
{
    position: relative;
    z-index: 1;
    width: 100%;
}

.ta-get--ready .ta-get__art
{
    filter: drop-shadow(0 0 34px color-mix(in oklab, var(--ta-petrol) 55%, transparent));
}

/* The glass of the screens catches a light from the top left: plain white, as the shadows are plain black */
.ta-get--ready :is(.ta-laptop__screen, .ta-tablet, .ta-monitor__screen, .ta-phone)::after
{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(118deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.03) 38%, transparent 38.2%);
    pointer-events: none;
}

.ta-tablet,
.ta-monitor__screen
{
    position: relative;
}

.ta-get--ready .ta-get__art::after
{
    content: "";
    position: absolute;
    z-index: -1;
    left: 10%;
    right: 10%;
    bottom: -9%;
    height: 9%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(0 0 0 / 0.55), transparent);
}

.ta-get--ready .ta-get__art--mac
{
    width: 70%;
}

/* The iPad shows the week, the iPhone in front of it the reminder */
.ta-get__art--iphone
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24%;
    align-items: end;
}

.ta-get--ready .ta-get__art--iphone
{
    width: 82%;
}

.ta-get__art--iphone .ta-phone
{
    margin: 0 0 -10% -16%;
    border-width: 6px;
    border-radius: 18px;
}

/* The reminder springs out of the phone, at a size that can be read */
.ta-get--ready .ta-phone
{
    padding: 0;
}

.ta-get--ready .ta-notif
{
    position: absolute;
    top: 22%;
    right: -8%;
    z-index: 1;
    width: 250%;
    padding: 10px 12px;
    border: 1px solid color-mix(in oklab, var(--ta-ink) 12%, transparent);
    font-size: 0.82rem;
    box-shadow: 0 18px 32px -14px rgb(0 0 0 / 0.6);
}

.ta-get--ready .ta-notif b
{
    font-size: 0.74rem;
}

.ta-get--ready .ta-get__art--android
{
    width: 22%;
}

.ta-get--ready .ta-get__art--android .ta-notif
{
    right: auto;
    left: 50%;
    width: 300%;
    translate: -50% 0;
}

.ta-get--ready .ta-get__art--pc
{
    width: 62%;
}

.ta-tablet
{
    aspect-ratio: 4 / 3;
    padding: 6% 6% 7%;
    border: 9px solid var(--ta-bezel);
    border-radius: 18px;
    background: var(--ta-paper);
}

.ta-monitor__screen
{
    aspect-ratio: 16 / 10;
    padding: 5% 7% 7%;
    border: 9px solid var(--ta-bezel);
    border-radius: 10px;
    background: var(--ta-paper);
}

.ta-monitor__neck
{
    width: 12%;
    height: 22px;
    margin-inline: auto;
    background: var(--ta-bezel);
}

.ta-monitor__foot
{
    width: 36%;
    height: 7px;
    margin-inline: auto;
    border-radius: 4px 4px 2px 2px;
    background: var(--ta-bezel);
}

/* Not out yet: the device in pencil, nothing on its screen yet */
.ta-get--soon
{
    grid-template-rows: none;
    grid-template-columns: clamp(76px, 22%, 104px) minmax(0, 1fr);
    align-items: center;
    border: 2px dashed color-mix(in oklab, var(--ta-ink) 22%, transparent);
    background: transparent;
}

.ta-get--soon .ta-get__stage
{
    align-self: stretch;
    padding: 18px 0 18px 22px;
}

.ta-get--soon .ta-get__art
{
    --ta-bezel: color-mix(in oklab, var(--ta-ink) 40%, transparent);
}

.ta-get--soon .ta-get__art--android
{
    width: 52%;
}

.ta-get--soon :is(.ta-laptop__screen, .ta-tablet, .ta-phone, .ta-monitor__screen)
{
    border-width: 2px;
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}

.ta-get--soon :is(.ta-laptop__base, .ta-monitor__neck, .ta-monitor__foot)
{
    border: 2px dashed var(--ta-bezel);
    background: transparent;
}

.ta-get--soon .ta-monitor__neck
{
    width: 0;
    height: 12px;
    border-width: 0 0 0 2px;
}

.ta-get--soon :is(.ta-week, .ta-notif)
{
    display: none;
}

.ta-get__body
{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 26px 28px;
}

.ta-get--soon .ta-get__body
{
    gap: 6px;
    padding: 18px 20px 18px 18px;
}

.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 clamp(1.7rem, 2.6vw, 2.1rem)/1.05 var(--ta-font-display);
    letter-spacing: -0.02em;
}

.ta-get--soon .ta-get__name
{
    font-size: 1.35rem;
}

/* « 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;
}

.ta-get__body p
{
    margin: 0;
    line-height: 1.5;
    text-wrap: pretty;
}

.ta-get--soon .ta-get__body p
{
    color: var(--ta-ink-muted);
    font-size: 1.05rem;
    line-height: 1.45;
}

/* The devices a platform needs (shared/app/domains.json, `minimum`) */
.ta-get__body .ta-get__needs
{
    padding-bottom: 8px;
    color: var(--ta-ink-muted);
    font-size: 1.05rem;
}

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

/*
 * The whole card downloads: the button (or 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__body .ta-btn::after,
.ta-get__body .ta-get__store::after
{
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
}

.ta-get__down
{
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * 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;
}

@keyframes ta-float
{
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes ta-twinkle
{
    from { opacity: 0.2; }
    to { opacity: 0.85; }
}

/* The device floats, the iPhone a little out of step with the iPad; a card that downloads rises on hover, its bookmark comes down */
@media (prefers-reduced-motion: no-preference)
{
    .ta-get--ready .ta-get__art > *
    {
        animation: ta-float 7s ease-in-out infinite;
    }

    .ta-get--ready .ta-get__art > * + *
    {
        animation-delay: -2.5s;
    }

    .ta-get--ready .ta-get__stage::before
    {
        animation: ta-twinkle 4s ease-in-out infinite alternate;
    }

    .ta-get--ready .ta-get__stage::after
    {
        animation: ta-twinkle 5.5s ease-in-out -2s infinite alternate;
    }

    .ta-get--ready,
    .ta-get__ribbon
    {
        transition: translate 0.4s ease, box-shadow 0.4s ease, height 0.4s ease;
    }

    .ta-get--ready:has(a):hover
    {
        translate: 0 -4px;
        box-shadow: 0 44px 70px -40px rgb(0 0 0 / 0.65);
    }

    .ta-get--ready:has(a):hover .ta-get__ribbon
    {
        height: 84px;
    }
}

/* 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;
}

/* The lines take the room left: the note of the main offer and the buttons stay at the bottom */
.ta-plan
{
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: 10px;
    padding: 24px;
    border: 1px solid color-mix(in oklab, var(--ta-ink) 16%, transparent);
    border-radius: 16px;
    background: var(--ta-paper);
}

.ta-plan--main
{
    border: 2px solid var(--ta-petrol);
}

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

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

.ta-plan__price
{
    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
{
    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
{
    margin: 0 0 4px;
    color: var(--ta-ink-muted);
    font-weight: 600;
    line-height: 1.4;
}

.ta-plan .ta-btn
{
    justify-self: start;
    padding: 12px 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;
}

.ta-end__promises li
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.ta-end__promises svg
{
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--ta-coral-text);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 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;
    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;
}