/* =============================================================================
   Kura — feuille de style du site
   =============================================================================
   Deux sources, et l'arbitrage entre elles est le sujet de ce fichier :

   — la **matière** vient de l'app (`Kura/DesignSystem/KuraTheme.swift`) : noir
     #050406, violet de marque #891488 en aplat, #CB68C9 dès qu'il s'agit de
     texte sur fond noir, halos d'ambiance par domaine, surfaces Liquid Glass ;
   — la **structure** vient du guide Apple : pleine largeur, colonnes de texte
     centrées à ~1000 px, rythme vertical généreux, tracking négatif qui se
     resserre quand la taille monte, pilules à rayon 980 px, filets d'un pixel
     plutôt que des ombres.

   Ce qui a été volontairement gardé de Kura contre la lettre du guide Apple :
   le halo violet sous le bouton principal. C'est la signature de
   `KuraPrimaryButton` — la retirer aurait rendu le site étranger à l'app, qui
   est la seule chose que ce site doit servir.
   ========================================================================== */

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

:root {
    /* Fonds — identiques à KuraColor */
    --bg: #050406;
    --surface: #0f0b10;
    --elevated: #1a141c;

    /* Marque */
    --brand: #891488;
    --brand-lift: #a61ba4;
    --accent: #cb68c9;          /* seul violet lisible en texte sur noir */
    --indigo: #6d6ae8;          /* halos et dégradés uniquement */
    --gold: #e8c77e;
    --danger: #f25a63;

    /* Encre */
    --text: #ffffff;
    --text-2: rgba(255, 255, 255, 0.66);
    --text-3: rgba(255, 255, 255, 0.40);
    --hairline: rgba(255, 255, 255, 0.10);
    --hairline-strong: rgba(255, 255, 255, 0.18);

    /* Verre */
    --glass: rgba(255, 255, 255, 0.055);
    --glass-strong: rgba(255, 255, 255, 0.085);

    /* Rayons. La pilule, la carte, et le **panneau** : un rayon suit la taille
       de ce qu'il enferme, sinon une grande surface a l'air d'un rectangle à
       coins limés. */
    --r-pill: 980px;
    --r-panel: 34px;
    --r-card: 26px;
    --r-tight: 14px;

    /* Filet — une seule épaisseur, celle que l'écran sait rendre.
       1 px CSS vaut deux pixels physiques en Retina, soit le double du filet de
       l'app (`lineWidth: 0.8`) : le site paraissait cerné là où l'app est
       effleurée. À 0,5 px on retombe sur un pixel physique — le trait le plus
       fin qui existe. On ne descend pas sous 1 px en densité 1, où il
       disparaîtrait pour de bon. */
    --hair: 1px;

    /* Tracking — indexé sur la taille, jamais constant.
       Une lettre se resserre en grandissant et se desserre en rapetissant ; la
       même valeur partout est fausse aux deux bouts. C'est la courbe de
       `KuraScaledFont`, transposée en em. */
    --track-display: -0.028em;
    --track-heading: -0.024em;
    --track-title:   -0.018em;
    --track-body:    -0.016em;
    --track-small:   -0.010em;
    --track-fine:    -0.004em;
    /* Le texte des contrôles — bouton, champ, onglet, définition — vit entre le
       corps et la petite taille, et les quatre portaient la même valeur chacun
       de son côté. C'est un cran de l'échelle, pas quatre coïncidences. */
    --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;
}

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

/* ---------------------------------------------------------- ambiance ---- */
/* `KuraAmbience` : un ou deux halos diffus en haut de page. Sur un fond noir
   commun, deux pages au même dégradé se ressemblent au point qu'on ne sait plus
   où l'on est. Ici le halo est fixe et couvre le viewport, le contenu défile
   dessus — c'est ce qui donne la profondeur de l'app.                        */

.ambience {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(720px 620px at 18% -6%, rgba(137, 20, 136, 0.30), transparent 70%),
        radial-gradient(620px 560px at 88% 4%, rgba(109, 106, 232, 0.22), transparent 72%),
        linear-gradient(135deg, #1a0a1c 0%, #0a060c 46%, #050406 100%);
}

/* Ambiances secondaires — mêmes teintes que les onglets de l'app. */
.ambience--cinema {
    background:
        radial-gradient(680px 600px at 82% -4%, rgba(40, 70, 160, 0.30), transparent 70%),
        radial-gradient(560px 520px at 10% 10%, rgba(137, 20, 136, 0.18), transparent 72%),
        linear-gradient(135deg, #0a0c1c 0%, #07060c 46%, #050406 100%);
}
.ambience--auth {
    background:
        radial-gradient(900px 720px at 50% -18%, rgba(137, 20, 136, 0.34), transparent 68%),
        radial-gradient(620px 520px at 92% 88%, rgba(109, 106, 232, 0.18), transparent 74%),
        linear-gradient(160deg, #170a19 0%, #09060b 52%, #050406 100%);
}

/* Grain très léger : un dégradé sombre pur bande sur les grands écrans. */
.ambience::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------- 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: rgba(255, 255, 255, 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);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
}

.glass-capsule {
    background: var(--glass);
    border: var(--hair) solid var(--hairline);
    border-radius: var(--r-pill);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
}

.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:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 52%),
        linear-gradient(135deg, var(--brand-lift), var(--brand));
    box-shadow: 0 8px 24px rgba(137, 20, 136, 0.42);
}
.btn--primary:hover { box-shadow: 0 10px 30px rgba(137, 20, 136, 0.55); }

.btn--secondary {
    color: var(--text);
    background: var(--glass);
    border: var(--hair) solid var(--hairline);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.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: rgba(203, 104, 201, 0.32); }

.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: rgba(12, 9, 14, 0.60);
    border: var(--hair) solid var(--hairline);
    -webkit-backdrop-filter: blur(30px) saturate(170%);
    backdrop-filter: blur(30px) saturate(170%);
}

.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. */
@media (max-width: 1140px) {
    .nav__links { display: none; }
    .nav__inner { justify-content: space-between; }
}
/* 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. */
    filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.6));
}
.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: linear-gradient(135deg, var(--brand-lift), 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: rgba(255, 255, 255, 0.10);
    overflow: hidden;
}
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); }

/* ------------------------------------------------------------ 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: rgba(137, 20, 136, 0.22);
    border: var(--hair) solid rgba(203, 104, 201, 0.24);
    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: linear-gradient(135deg, #fff, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stat__label { margin-top: 10px; color: var(--text-2); font-size: 14px; }

/* 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:
        radial-gradient(600px 300px at 50% 0%, rgba(203, 104, 201, 0.30), transparent 72%),
        linear-gradient(135deg, rgba(137, 20, 136, 0.42), rgba(109, 106, 232, 0.24));
    border: var(--hair) solid rgba(255, 255, 255, 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: linear-gradient(135deg, var(--brand-lift), 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: rgba(255, 255, 255, 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: rgba(203, 104, 201, 0.55);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(137, 20, 136, 0.25);
}
.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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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 rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 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: linear-gradient(135deg, var(--brand-lift), 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. */
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    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: linear-gradient(135deg, var(--brand), var(--brand-lift));
}
.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;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !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: rgba(255, 255, 255, 0.86);
        --text-3: rgba(255, 255, 255, 0.68);
        --hairline: rgba(255, 255, 255, 0.34);
        --hairline-strong: rgba(255, 255, 255, 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 {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 268px;
    padding: 13px 18px 13px 13px;
    border-radius: var(--r-pill);
    background: var(--glass);
    border: var(--hair) solid var(--hairline);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
}

.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: linear-gradient(135deg, rgba(137, 20, 136, 0.55), rgba(109, 106, 232, 0.42));
}

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