/* =============================================================================
   Kura — feuille de style du site
   =============================================================================
   La source est `BRAND.md` (29 octobre 2026) : **sobre, net, éditorial**. Un aplat
   neutre, un accent assourdi (prune), l'ivoire du logo, et les affiches et pochettes
   pour toute la couleur. Plus de halo, de dégradé, de verre flou ni de reflet. Le
   thème suit le système (`prefers-color-scheme`), comme les variables de BRAND.md § 7.
   ========================================================================== */

/* --------------------------------------------------------------- jetons -- */

:root {
    /* Fonds */
    --bg: #0b0b0d;
    --surface: #131316;
    --elevated: #1d1d21;

    /* Marque : l'aplat Kura (texte blanc dessus), l'accent assourdi (texte et icônes), un ton profond */
    --brand: #6e2f6b;
    --brand-lift: #6e2f6b;
    --accent: #c08fbc;
    --accent-soft: rgba(192, 143, 188, 0.16);
    --indigo: #c08fbc;
    --tone: #3e1a3c;
    --gold: #e8c77e;
    --quick: #5fd3c6;
    --danger: #f25a63;
    --mark-stem: #f2eee9;
    --mark-chevron: #c08fbc;

    /* Encre : `--ink` est la couleur des filets et des remplissages discrets (blanc en sombre, encre en clair) */
    --ink: 255 255 255;
    --text: #ffffff;
    --text-2: rgb(var(--ink) / 0.66);
    --text-3: rgb(var(--ink) / 0.40);
    --hairline: rgb(var(--ink) / 0.10);
    --hairline-strong: rgb(var(--ink) / 0.18);

    /* Surfaces : un aplat et un filet, pas du verre */
    --glass: var(--surface);
    --glass-strong: var(--elevated);

    /* Rayons de la charte : 14 / 18 / 22 / 28, et la pilule */
    --r-pill: 980px;
    --r-panel: 28px;
    --r-card: 22px;
    --r-tight: 14px;

    --hair: 1px;

    --track-display: -0.028em;
    --track-heading: -0.024em;
    --track-title:   -0.018em;
    --track-body:    -0.016em;
    --track-small:   -0.010em;
    --track-fine:    -0.004em;
    --track-control: -0.014em;

    /* Rythme */
    --page: 1440px;
    --measure: 1000px;
    --gutter: clamp(20px, 5vw, 40px);
    --section: clamp(72px, 9vw, 128px);

    --ease: cubic-bezier(0.32, 0.72, 0, 1);

    color-scheme: dark light;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f5f5f6;
        --surface: #ffffff;
        --elevated: #ebebed;
        --accent: #6e2f6b;
        --accent-soft: rgba(110, 47, 107, 0.10);
        --indigo: #6e2f6b;
        --gold: #9a6f12;
        --quick: #16786e;
        --danger: #c9303a;
        --mark-stem: #1d1b20;
        --mark-chevron: #6e2f6b;
        --ink: 17 17 19;
        --text: #111113;
        --text-2: rgba(17, 17, 19, 0.72);
        --text-3: rgba(17, 17, 19, 0.58);
        --hairline: rgba(17, 17, 19, 0.14);
        --hairline-strong: rgba(17, 17, 19, 0.24);
    }
}

@media (min-resolution: 2dppx) {
    :root { --hair: 0.5px; }
}

/* ------------------------------------------------------------- socle ---- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    /* SF Pro d'abord : sur iPhone et sur Mac, le site est composé dans la même
       fonte que l'app. Inter et system-ui ne servent qu'ailleurs. */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: var(--track-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

::selection { background: var(--brand); color: #fff; }

/* Fond : un aplat neutre (BRAND.md § 5). Le calque reste pour les pages qui le posent, il est vide. */
.ambience { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); }

/* ----------------------------------------------------------- gabarit ---- */

.wrap {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Colonne de texte : les pages Apple respirent en pleine largeur, seuls les
   blocs de texte se recentrent. */
.measure { max-width: var(--measure); margin-inline: auto; }
.measure--narrow { max-width: 760px; margin-inline: auto; }

section { padding-block: var(--section); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }

.rule {
    height: var(--hair);
    border: 0;
    margin: 0;
    background: var(--hairline);
}

/* ------------------------------------------------------ typographie ----- */

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: var(--track-heading);
    line-height: 1.08;
    text-wrap: balance;
}

.display {
    font-size: clamp(40px, 6.6vw, 60px);
    line-height: 1.05;
    letter-spacing: var(--track-display);
    font-weight: 600;
}

.heading {
    font-size: clamp(30px, 4.2vw, 44px);
    line-height: 1.12;
    letter-spacing: var(--track-heading);
}

.heading-sm {
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.18;
    letter-spacing: var(--track-title);
}

.subhead {
    font-size: clamp(18px, 2.2vw, 21px);
    line-height: 1.42;
    letter-spacing: -0.008em;
    font-weight: 300;
    color: var(--text-2);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lede {
    font-size: clamp(17px, 1.7vw, 19px);
    line-height: 1.5;
    color: var(--text-2);
    font-weight: 300;
}

.small { font-size: 14px; line-height: 1.35; letter-spacing: var(--track-small); }
.fine  { font-size: 12px; line-height: 1.35; letter-spacing: var(--track-fine); color: var(--text-3); }

code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.88em;
    letter-spacing: 0;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgb(var(--ink) / 0.07);
    border: var(--hair) solid var(--hairline);
    color: var(--text);
}

.muted { color: var(--text-2); }
.dim   { color: var(--text-3); }
.accent { color: var(--accent); }

/* Surtitre — `kuraOverline()` : capitales espacées, discrètes. */
.overline {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 12px;
}

.center { text-align: center; }

/* Mot-marque : `Text("Kura").tracking(10)` de l'écran d'auth. */
.wordmark {
    font-weight: 600;
    letter-spacing: 0.34em;
    text-indent: 0.34em; /* compense le tracking sur le dernier caractère */
}

/* ------------------------------------------------------------ verre ----- */
/* `kuraGlass` : surface translucide + filet d'un pixel. Jamais d'ombre portée
   sur une carte — la hiérarchie vient du filet et du fond, comme dans l'app. */

.glass {
    background: var(--glass);
    border: var(--hair) solid var(--hairline);
    border-radius: var(--r-card);
}

.glass-capsule {
    background: var(--glass);
    border: var(--hair) solid var(--hairline);
    border-radius: var(--r-pill);
}

.card {
    padding: clamp(22px, 2.6vw, 30px);
    border-radius: var(--r-card);
}

/* ----------------------------------------------------------- boutons ---- */

.btn {
    --btn-py: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--btn-py) 24px;
    border: 0;
    border-radius: var(--r-pill);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: var(--track-control);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.28s var(--ease), opacity 0.2s var(--ease),
                background-color 0.2s var(--ease), box-shadow 0.28s var(--ease);
}
.btn:hover { text-decoration: none; }
/* `KuraPressableButtonStyle` : retrait court à l'appui, jamais au survol seul. */
.btn:active { transform: scale(0.965); opacity: 0.94; }

.btn--primary {
    color: #fff;
    background: var(--brand);
}
.btn--primary:hover { background: color-mix(in srgb, var(--brand) 88%, white); }

.btn--secondary {
    color: var(--text);
    background: var(--glass);
    border: var(--hair) solid var(--hairline);
}
.btn--secondary:hover { background: var(--glass-strong); }

.btn--ghost {
    color: var(--text-2);
    background: transparent;
    padding-inline: 14px;
}
.btn--ghost:hover { color: var(--text); }

.btn--block { display: flex; width: 100%; }
.btn--lg { --btn-py: 15px; padding-inline: 30px; font-size: 17px; }

.btn[disabled], .btn[aria-disabled="true"] {
    background: var(--elevated);
    color: var(--text-3);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.actions--center { justify-content: center; }

/* ------------------------------------------------------------- tags ----- */

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    border: var(--hair) solid var(--hairline);
    background: var(--glass);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--track-fine);
    color: var(--text-2);
}
.tag--brand { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------- barre nav -- */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Une coquille de positionnement, sans matière : c'est la pilule qui porte
       le verre. Le rembourrage haut donne à la barre sa place flottante dès le
       défilement zéro — sans lui, elle colle au bord puis saute de 12 px au
       premier cran de molette. */
    padding: 12px var(--gutter) 0;
    pointer-events: none;
}

/* La barre **flotte**, elle ne borde pas la page.
   C'est ce que fait l'app : sous iOS 26 la `TabView` native est une pilule en
   Liquid Glass posée sur le contenu, pas un bandeau qui lui prend une bande. Un
   site qui coiffe la même app d'un bandeau plein cadre lui donne un air de
   document là où l'app a un air d'objet. Le contenu passe dessous et sur les
   côtés — c'est le vide autour de la pilule qui la fait flotter, donc il ne faut
   surtout pas remettre un fond sur `.nav`. */
.nav__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 54px;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 16px;
    pointer-events: auto;
    border-radius: var(--r-pill);
    background: var(--surface); border: var(--hair) solid var(--hairline);
    border: var(--hair) solid var(--hairline);
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 15px;
    flex: 0 0 auto;
}
.nav__brand:hover { text-decoration: none; }
/* La marque **détourée**, pas la tuile de l'icône : dans une barre posée sur le
   noir de la page, un carré arrondi n'aurait dessiné qu'un fond dans le fond. Le
   SVG pèse un kilo-octet là où la tuile de 1024 px qui servait avant en pesait 685,
   pour être réduite à 26 px par le navigateur. */
.nav__mark {
    width: auto;
    height: 26px;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline: auto;
}
.nav__links a {
    padding: 8px 12px;
    white-space: nowrap;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: var(--track-small);
    color: var(--text-2);
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav__links a:hover {
    color: var(--text);
    background: var(--glass);
    text-decoration: none;
}

.nav__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* Un lien tout à droite dans une pilule doit rentrer son épaule : sur un bord
   courbe, un rectangle collé au rayon paraît déborder. */
.nav__actions .btn:last-child { margin-right: 2px; }
.nav__actions .btn { font-size: 13px; --btn-py: 9px; padding-inline: 18px; }

/* Le seuil de repli est **mesuré**, pas choisi, et la mesure se fait en
   bornant la pilule cran par cran jusqu'à ce que la rangée déborde — pas en
   additionnant les largeurs, ce qui donne un nombre faux d'une quinzaine de
   pixels (essayé : le calcul annonçait 1111, la fenêtre dit **1095**).

   La rangée casse donc à 1095 px : marque, sept libellés, deux actions. La
   pilule a déplacé ce point d'environ quatorze pixels vers le haut — elle
   ajoute son propre rembourrage à la gouttière, là où le bandeau pleine largeur
   n'avait que la gouttière —, si bien que l'ancien seuil de 1100 ne gardait
   plus que cinq pixels de marge au lieu de dix-neuf.

   Le seuil est à **1140**, et l'écart avec 1095 n'est pas de la prudence en
   l'air : ces largeurs sont celles de SF Pro. Ailleurs que sur un Apple, les
   sept libellés tombent en Inter ou en system-ui, plus larges — de l'ordre de
   vingt à trente pixels sur six cents —, et un seuil posé sur le point de
   rupture d'ici déborderait sur la première machine venue. Entre 1095 et 1140
   les liens disparaissent alors qu'ils tiendraient : c'est le prix, et il est
   nul, le pied de page les portant tous.

   Le `nowrap` ferme la même faute par l'autre bout : c'est au conteneur de
   décider du retour à la ligne, jamais au libellé. Avant tout cela le seuil
   valait 900, et entre 900 et 1080 les libellés se cassaient en deux — « Le /
   principe » — pendant qu'« Obtenir Kura » sortait par la droite.

   Ajouter un lien **ou changer la boîte qui les tient** oblige à remesurer.

   **Remesuré le 2 octobre 2026, huitième lien « Kura Web » ajouté.** Dans le navigateur
   de test (polices plus larges que SF Pro : `-apple-system` n'y existe pas) la rupture
   valait 1146 avant, **1234** après — +88 px, soit la largeur du lien et son espace. Le
   seuil de 1140 était d'ailleurs déjà à 6 px *sous* la rupture mesurée avec ces
   polices : l'écart de quarante-cinq pixels n'y suffisait pas. Il passe à **1270**, soit
   trente-six pixels au-dessus de la rupture la plus large mesurée. En dessous, le lien
   du menu disparaît et le bouton « Ouvrir Kura Web » du héros prend le relais. */
@media (max-width: 1270px) {
    .nav__links { display: none; }
    .nav__inner { justify-content: space-between; }
}
.nav__links a.nav__web { color: var(--accent); }
.nav__links a.nav__web:hover { color: var(--text); }
/* Sur un iPhone, les deux actions restent visibles : « Se connecter » n'a aucune
   autre entrée au-dessus de la ligne de flottaison, contrairement au bouton
   principal que le héros répète deux cents pixels plus bas. On resserre plutôt
   que de masquer. */
@media (max-width: 480px) {
    .nav__inner { gap: 8px; }
    .nav__brand .wordmark { display: none; }
    .nav__actions { gap: 2px; }
    .nav__actions .btn { font-size: 12.5px; padding-inline: 13px; }
}

/* -------------------------------------------------------------- héros -- */

.hero {
    padding-top: clamp(64px, 10vw, 128px);
    padding-bottom: 0;
    text-align: center;
}

.hero__badge { margin-bottom: 26px; }

.hero .display { margin-bottom: 20px; }

.hero__tagline {
    font-size: clamp(19px, 2.4vw, 24px);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.012em;
    color: var(--text-2);
    max-width: 640px;
    margin: 0 auto 34px;
    text-wrap: balance;
}

.hero__note { margin-top: 18px; }

/* Un dégradé qui « éteint » le bas du téléphone, comme un produit posé sur la
   page plutôt que collé dessus. */
.hero__stage {
    position: relative;
    margin-top: clamp(48px, 6vw, 76px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(14px, 3vw, 44px);
}
/* Le voile qui éteint le bas des téléphones. Il faisait 140 % de large, centré
   par `translateX(-50%)` : il dépassait donc de 128 px de chaque côté et rendait
   **toute la page défilable latéralement** — `overflow-x: hidden` sur `body` ne
   suffit pas, un pseudo-élément échappe à la règle et gonfle quand même le
   `scrollWidth` du document. Le symptôme est le même que dans l'app : l'écran
   glisse sous le doigt sans que rien n'apparaisse sur les côtés. */
.hero__stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 42%;
    background: linear-gradient(180deg, transparent, var(--bg) 88%);
    pointer-events: none;
}

/* ------------------------------------------------------ iPhone maquette -- */
/* Le cadre est en CSS, l'écran est une **vraie capture** du simulateur.
   Recomposer les interfaces en HTML avait été tenté : ça se voit, et ça ne
   ressemble à l'app que pour qui ne la connaît pas. Le cadre reste en CSS parce
   qu'un châssis dessiné est net à toutes les tailles, là où une photo de
   téléphone impose son éclairage et son angle.

   Les captures portent leur propre barre d'état et leur propre encoche : il n'y
   a donc **pas** de `.phone__notch` par-dessus, sinon on en verrait deux.      */

/* Le châssis est le vrai bezel iPhone 17 Pro, exporté de Figma en PNG avec son
   canal alpha. Il remplace le cadre que je dessinais en CSS : un dégradé et un
   filet d'un pixel ne font pas un boîtier — il manquait le titane, les boutons
   et la découpe de l'écran, et ça se voyait.

   Toute la géométrie découle d'un seul rapport, celui du composant Figma : le
   boîtier fait **450 × 920 pt** pour un écran de **402 × 874**, soit 24 pt de
   marge à gauche et à droite, 23 pt en haut et en bas. Les pourcentages
   ci-dessous ne sont que ces nombres divisés — les recalculer à la main, c'est
   la seule façon de se tromper. */
.phone {
    position: relative;
    width: 336px;
    flex: 0 0 auto;
    aspect-ratio: 450 / 920;
    background: url("screens/bezel.png") center / 100% 100% no-repeat;
    /* `drop-shadow` et non `box-shadow` : l'ombre épouse la silhouette du PNG,
       coins arrondis compris, là où une ombre de boîte dessinerait un rectangle
       qui déborde du téléphone. */
    
}
.phone--side {
    width: 260px;
    margin-bottom: clamp(20px, 4vw, 54px);
    opacity: 0.72;
}

/* Variante posée dans le fil du texte, plus petite que celles du héros. */
.phone--inline {
    width: 300px;
    margin-inline: auto;
}

/* La capture se pose **par-dessus** le bezel, pile dans la découpe. Elle n'est
   pas glissée dessous : l'écran du PNG est un aplat opaque, rien ne
   transparaîtrait. Ça tombe bien — les captures portent déjà leur vraie barre
   d'état et leur vraie encoche, qui recouvrent celles du châssis. */
.phone__screen {
    position: absolute;
    left: 5.3333%;              /*  24 / 450 */
    top: 2.5%;                  /*  23 / 920 */
    width: 89.3333%;            /* 402 / 450 */
    height: 95%;                /* 874 / 920 */
    overflow: hidden;
    background: #050406;
    /* Les coins de la dalle font 55 pt. Exprimés en pourcentages séparés
       (13.68 % de la largeur / 6.29 % de la hauteur), l'arrondi reste circulaire
       quelle que soit la taille du téléphone. */
    border-radius: 13.68% / 6.29%;
}
.phone__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1000px) {
    .phone--side { display: none; }
}
@media (max-width: 380px) {
    .phone { width: 100%; max-width: 300px; }
}

/* Deux briques survivent aux maquettes : elles servent au schéma de comparaison
   de la section « affinité », qui est un diagramme et non une capture d'app. */
.avatar-dot {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--brand);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: #fff;
    flex: 0 0 auto;
}
.bar {
    height: 5px;
    border-radius: 3px;
    background: rgb(var(--ink) / 0.10);
    overflow: hidden;
}
.bar > i { display: block; height: 100%; background: var(--brand); }

/* ------------------------------------------------------------ grilles --- */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Deux colonnes texte / visuel */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.split--reverse .split__visual { order: -1; }
@media (max-width: 860px) {
    .split { grid-template-columns: minmax(0, 1fr); }
    .split--reverse .split__visual { order: 0; }
}

/* Numérotation éditoriale des étapes */
.step__num {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 14px;
}

.feature h3 { font-size: 19px; letter-spacing: var(--track-title); margin-bottom: 8px; }
.feature p { color: var(--text-2); font-size: 15px; line-height: 1.45; }

.feature__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    background: var(--accent-soft);
    border: var(--hair) solid color-mix(in srgb, var(--accent) 24%, transparent);
    color: var(--accent);
}
.feature__icon svg { width: 19px; height: 19px; }

/* Chiffres */
.stat__value {
    font-size: clamp(34px, 4.4vw, 46px);
    font-weight: 600;
    letter-spacing: var(--track-display);
    line-height: 1;
    background: var(--text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stat__label { margin-top: 10px; color: var(--text-2); font-size: 14px; }

/* Tutoriel numéroté — trois étapes concrètes, jamais une carte dans une carte. */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
    display: flex;
    gap: 16px;
    align-items: baseline;
    padding: 14px 0;
    border-top: var(--hair) solid var(--hairline);
}
.steps li:first-child { border-top: none; padding-top: 0; }
.steps .step__num { flex: 0 0 auto; margin-bottom: 0; }
.steps b { display: block; font-weight: 600; margin-bottom: 4px; }
.steps p { margin: 0; }
.steps code {
    font-size: 0.92em;
    background: rgb(var(--ink) / 0.08);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Liste à filets — jamais de carte dans une carte. */
.list-hairline { list-style: none; margin: 0; padding: 0; }
.list-hairline li {
    padding: 16px 0;
    border-top: var(--hair) solid var(--hairline);
    display: flex;
    gap: 14px;
    align-items: baseline;
}
.list-hairline li:last-child { border-bottom: var(--hair) solid var(--hairline); }
.list-hairline b { font-weight: 600; flex: 0 0 auto; min-width: 128px; }
.list-hairline span { color: var(--text-2); font-size: 15px; }
@media (max-width: 620px) {
    .list-hairline li { flex-direction: column; gap: 4px; }
}

/* ------------------------------------------------- graphe en toile ------ */

.radar { width: 100%; max-width: 420px; margin-inline: auto; }
.radar text { font-size: 11px; fill: var(--text-3); letter-spacing: 0.02em; }

/* ----------------------------------------------------------- accordéon -- */

.faq { border-top: var(--hair) solid var(--hairline); }
.faq details {
    border-bottom: var(--hair) solid var(--hairline);
}
.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 40px 20px 0;
    position: relative;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: var(--track-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 10px; height: 10px;
    margin-top: -6px;
    border-right: 1.5px solid var(--text-3);
    border-bottom: 1.5px solid var(--text-3);
    transform: rotate(45deg);
    transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding-bottom: 22px; color: var(--text-2); font-size: 16px; max-width: 76ch; }

/* ------------------------------------------------------------ bandeau --- */

.banner {
    border-radius: var(--r-panel);
    padding: clamp(38px, 6vw, 74px) clamp(24px, 5vw, 64px);
    text-align: center;
    background: var(--brand); color: #fff;
    border: var(--hair) solid rgb(var(--ink) / 0.14);
}

/* --------------------------------------------------------- pied de page -- */

.footer {
    border-top: var(--hair) solid var(--hairline);
    padding-block: 56px 40px;
    background: rgba(0, 0, 0, 0.35);
}
.footer__cols {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 780px) {
    .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
    .footer__cols { grid-template-columns: minmax(0, 1fr); }
}
.footer h4 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text);
    margin-bottom: 14px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a, .footer li {
    font-size: 12px;
    color: var(--text-3);
    letter-spacing: var(--track-small);
}
.footer a:hover { color: var(--text); }
.footer__legal {
    margin-top: 44px;
    padding-top: 22px;
    border-top: var(--hair) solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    align-items: center;
}

/* =========================================================== auth ======== */

.auth {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px var(--gutter) 56px;
}

.auth__panel {
    width: 100%;
    max-width: 420px;
    padding: clamp(26px, 4vw, 36px);
    border-radius: 26px;
}

.auth__header { text-align: center; margin-bottom: 26px; }
/* La marque **au-dessus** du logotype, comme l'entête d'`AuthView` : c'est la même
   page à deux endroits — on se connecte ici ou dans l'app —, et le lien entre les
   deux se fait par le logo bien avant qu'on lise le mot. */
.auth__header .auth__mark {
    display: block;
    width: auto;
    height: 38px;
    margin: 0 auto 14px;
}
.auth__header .wordmark {
    font-size: 34px;
    display: block;
    margin-bottom: 12px;
}
.auth__header p {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.45;
    font-weight: 300;
}

/* Sélecteur connexion / inscription — la pilule segmentée de `AuthView`. */
.segmented {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--glass);
    border: var(--hair) solid var(--hairline);
    margin-bottom: 22px;
}
.segmented a {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    border-radius: var(--r-pill);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: var(--track-control);
    color: var(--text-2);
    transition: color 0.2s var(--ease);
}
.segmented a:hover { text-decoration: none; color: var(--text); }
.segmented a[aria-current="page"] {
    color: #fff;
    background: var(--brand);
}

.field { margin-bottom: 14px; }
.field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-2);
    margin-bottom: 7px;
}

.input {
    width: 100%;
    padding: 14px 16px;
    font: inherit;
    font-size: 16px; /* < 16px déclenche le zoom automatique de Safari iOS */
    letter-spacing: var(--track-control);
    color: var(--text);
    background: rgb(var(--ink) / 0.05);
    border: var(--hair) solid var(--hairline);
    border-radius: var(--r-tight);
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
    -webkit-appearance: none;
    appearance: none;
}
.input::placeholder { color: var(--text-3); }
.input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: rgb(var(--ink) / 0.07);
    box-shadow: none;
}
.input[aria-invalid="true"] { border-color: rgba(242, 90, 99, 0.6); }

/* `.fine` l'emporterait sur la règle `a` : sans ça, « Oublié ? » se rend au gris
   le plus faible de la palette, alors que c'est un lien qu'on vient chercher. */
.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field__row a.fine { color: var(--accent); }
.field__hint { font-size: 12px; color: var(--text-3); margin-top: 7px; }

/* Robustesse du mot de passe — `PasswordPolicy` côté app. */
.meter { display: flex; gap: 4px; margin-top: 9px; }
.meter i {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgb(var(--ink) / 0.12);
    transition: background-color 0.25s var(--ease);
}
.meter[data-score="1"] i:nth-child(-n+1) { background: var(--danger); }
.meter[data-score="2"] i:nth-child(-n+2) { background: #e8a35a; }
.meter[data-score="3"] i:nth-child(-n+3) { background: var(--gold); }
.meter[data-score="4"] i { background: #5ed08a; }

/* Messages */
.notice {
    display: none;
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: var(--r-tight);
    font-size: 14px;
    line-height: 1.4;
    border: var(--hair) solid var(--hairline);
    background: rgb(var(--ink) / 0.05);
    color: var(--text-2);
}
.notice.is-visible { display: block; }
.notice--error {
    border-color: rgba(242, 90, 99, 0.4);
    background: rgba(242, 90, 99, 0.12);
    color: #ffc9cd;
}
.notice--success {
    border-color: rgba(94, 208, 138, 0.35);
    background: rgba(94, 208, 138, 0.12);
    color: #b7f0cd;
}

.auth__footer {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
}
.auth__footer a { color: var(--accent); }

.auth__legal {
    margin-top: 26px;
    text-align: center;
    max-width: 420px;
}

/* Indicateur de chargement du bouton */
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgb(var(--ink) / 0.35);
    border-top-color: #fff;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Le profil public d'un pseudo (`/u/<pseudo>`) — voir la note en tête de `u.html`.
   La carte d'en-tête reconnaît le compte sans compte ; tout le reste n'existe
   qu'une fois connecté. */
.profile-hero { display: flex; align-items: center; gap: 18px; }
.profile-hero__avatar {
    width: 64px; height: 64px; border-radius: 50%;
    object-fit: cover; flex: 0 0 auto;
    background: var(--elevated);
}
/* `:not([hidden])` : un `display` posé sans garde l'emporterait sur l'attribut
   `hidden` (même spécificité, la règle d'auteur passe après celle du navigateur)
   — la pastille et la photo s'afficheraient l'une sur l'autre au lieu de se
   remplacer. */
.profile-hero__avatar--fallback:not([hidden]) {
    display: grid; place-items: center;
    font-weight: 600; font-size: 24px; color: var(--text-2);
    background: var(--brand);
}

.profile-section { margin-top: clamp(28px, 4vw, 40px); }
.profile-section:first-child { margin-top: 0; }
.profile-section h3 {
    font-size: 13px; font-weight: 600; letter-spacing: var(--track-title);
    color: var(--text-2); margin-bottom: 14px;
}

/* Le Top 5 films et le Top 5 albums : une bande qui défile plutôt qu'une
   grille, pour tenir sur 402 px sans jamais couper une pochette en deux. */
.cover-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.cover-strip__item { flex: 0 0 auto; width: 96px; }
.cover-strip img {
    display: block;
    width: 96px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--elevated);
}
.cover-strip--film img { aspect-ratio: 2 / 3; }
.cover-strip--album img { aspect-ratio: 1 / 1; }
.cover-strip__title {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-2);
}

/* Réalisateurs et artistes qui reviennent, en chips — même esprit que les
   comptes du rayon de membres, en plus compact. */
.figure-row { display: flex; flex-wrap: wrap; gap: 9px; }
.figure-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 14px 4px 4px;
    border-radius: var(--r-pill);
    border: var(--hair) solid var(--hairline);
    background: var(--glass);
    font-size: 13.5px; font-weight: 500; color: var(--text-2);
}
.figure-chip img,
.figure-chip__fallback {
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; flex: 0 0 auto;
    background: var(--elevated);
}
/* `:not([hidden])` : voir la même garde sur `.profile-hero__avatar--fallback` —
   sans elle, la pastille reste visible même quand `hidden` la masque. */
.figure-chip__fallback:not([hidden]) {
    display: grid; place-items: center;
    font-size: 11px; font-weight: 600; color: var(--text-2);
    background: var(--brand);
}

.song-list { list-style: none; margin: 0; padding: 0; }
.song-list li {
    padding: 9px 0;
    border-top: var(--hair) solid var(--hairline);
    font-size: 14.5px;
    color: var(--text-2);
}
.song-list li:first-child { border-top: none; padding-top: 0; }
.song-list b { color: var(--text); font-weight: 500; }

/* Panneau « mon compte » affiché après une connexion réussie. */
.account { display: none; }
.account.is-visible { display: block; }
.account__id { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.account__avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--brand);
    display: grid; place-items: center;
    font-size: 20px; font-weight: 700; color: #fff;
    flex: 0 0 auto;
}
.account__name { font-size: 19px; font-weight: 600; letter-spacing: var(--track-title); }

/* ------------------------------------------------------------- légal ---- */

.doc { padding-block: clamp(52px, 7vw, 88px); }
.doc h2 { margin: 44px 0 12px; font-size: clamp(20px, 2.4vw, 24px); letter-spacing: var(--track-title); }
.doc h2:first-of-type { margin-top: 32px; }
.doc p, .doc li { color: var(--text-2); font-size: 17px; line-height: 1.55; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--accent); }

/* --------------------------------------------------- apparition douce --- */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- utilitaires -- */

.stack-8  > * + * { margin-top: 8px; }
.stack-14 > * + * { margin-top: 14px; }
.stack-20 > * + * { margin-top: 20px; }
.stack-32 > * + * { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: clamp(36px, 5vw, 56px); }
.mb-12 { margin-bottom: 12px; }
.mb-24 { margin-bottom: 24px; }
.mb-40 { margin-bottom: clamp(28px, 4vw, 44px); }

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

/* ============================================================ fonctions ==
   « Ce que fait Kura » — une barre d'onglets qui reprend celle de l'app.
   Ce n'est pas une citation décorative : c'est la structure de l'app, donc
   la page apprend où les choses vivent en même temps qu'elle les liste
   (familiarité + orientation, deux des huit principes d'Apple). Le contenu
   des cinq panneaux est **dans le DOM** ; le script ne fait que masquer les
   inactifs, donc sans JavaScript la page reste complète et lisible.
   ====================================================================== */

.tabs {
    display: flex;
    gap: 2px;
    padding: 5px;
    margin-inline: auto;
    width: max-content;
    max-width: 100%;
    border-radius: var(--r-pill);
    background: var(--glass);
    border: var(--hair) solid var(--hairline);
    /* Une grande surface se lit comme plus épaisse qu'une pastille. */
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.012em;
    white-space: nowrap;
    cursor: pointer;
    /* Le retour arrive à l'appui, pas au relâchement. */
    transition: color 0.2s var(--ease), background-color 0.25s var(--ease),
                transform 0.1s ease-out;
}
.tabs__btn:hover { color: var(--text); }
.tabs__btn:active { transform: scale(0.96); }
.tabs__btn[aria-selected="true"] {
    color: #fff;
    background: var(--brand);
}
.tabs__btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

.tabpanel[hidden] { display: none; }

/* L'entrée du panneau part du bas et remonte : le mouvement pointe vers ce
   qui arrive, il n'interpole pas à l'aveugle. */
@keyframes tabpanel-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.tabpanel { animation: tabpanel-in 0.42s var(--ease) both; }

/* Une capacité = une ligne. Le titre porte le geste, la ligne du dessous ce
   qu'on obtient — jamais l'inverse, et jamais la raison du choix. */
.caps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.caps li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 0 14px;
    padding: 15px 0;
    border-top: var(--hair) solid var(--hairline);
}
.caps li:last-child { border-bottom: var(--hair) solid var(--hairline); }
.caps__icon {
    grid-row: span 2;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--glass);
    border: var(--hair) solid var(--hairline);
    color: var(--accent);
}
.caps__icon svg { width: 14px; height: 14px; }
.caps b { font-weight: 600; font-size: 15.5px; letter-spacing: var(--track-control); }
.caps span { color: var(--text-2); font-size: 14.5px; line-height: 1.45; }

@media (min-width: 760px) {
    .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}

/* --------------------------------------- accessibilité : trois signaux --
   Le skill Apple en demande trois, indépendants. Le mouvement était déjà
   traité ; la transparence et le contraste ne l'étaient pas. Réduire la
   transparence ne veut pas dire retirer la surface : elle devient franche. */

@media (prefers-reduced-motion: reduce) {
    .tabpanel { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .glass, .glass-capsule, .tabs, .nav__inner {
        background: var(--elevated) !important;
    }
    /* La coquille reste transparente — c'est la pilule qui porte la matière.
       Poser le fond ici rendrait le bandeau plein cadre qu'on vient de retirer. */
    .nav { background: transparent; }
}

@media (prefers-contrast: more) {
    :root {
        --text-2: rgb(var(--ink) / 0.86);
        --text-3: rgb(var(--ink) / 0.68);
        --hairline: rgb(var(--ink) / 0.34);
        --hairline-strong: rgb(var(--ink) / 0.5);
    }
    .glass, .glass-capsule, .tabs, .nav__inner { background: var(--elevated); }
}

/* ------------------------------------------- le retour arrive à l'appui -
   `:active` ne se déclenche pas au relâchement mais au contact : c'est la
   règle de latence du skill. Sans lui, une carte tapée ne répond pas et l'on
   tape deux fois. */
.btn:active { transform: scale(0.975); }
.btn { transition: transform 0.1s ease-out, background-color 0.2s var(--ease),
                   border-color 0.2s var(--ease), opacity 0.2s var(--ease); }

@media (prefers-reduced-motion: reduce) {
    .btn:active, .tabs__btn:active { transform: none; }
}


/* ---------------------------------------------------------- membres ----- */
/* Le rayon des comptes réels. Il doit tenir avec **deux** cartes comme avec
   cinquante : d'où `justify-content: center` et une largeur de carte fixe, et
   non une grille à colonnes — trois colonnes vides à droite de deux membres
   diraient plus fort que le texte que la communauté est vide. */

.members {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.members li {
    width: 268px;
    border-radius: var(--r-pill);
    background: var(--glass);
    border: var(--hair) solid var(--hairline);
}

/* Toute la carte est cliquable : le lien porte la mise en page que portait `li`. */
.members__link {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 18px 13px 13px;
    border-radius: var(--r-pill);
    color: inherit;
    transition: background-color 0.2s var(--ease);
}
.members__link:hover { background: var(--glass-strong); text-decoration: none; }

.members img,
.members .members__fallback {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
    background: var(--elevated);
}

/* L'initiale, quand la photo ne charge pas : un rond vide se lit comme une
   image cassée, une initiale se lit comme quelqu'un. */
.members .members__fallback {
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 18px;
    color: var(--text-2);
    background: var(--brand);
}

.members__body { min-width: 0; }

.members__handle {
    display: block;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: var(--track-control);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.members__meta {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    letter-spacing: var(--track-fine);
    color: var(--text-3);
}

@media (max-width: 600px) {
    .members li { width: 100%; }
}