/* NoonieApp — feuille de style unique.
   Tokens repris tels quels de Danio (apps/aquarium/ux.md §3, 14/08/2026).
   Les valeurs marquées « dérivé » n'existent pas dans §3 : ce sont les
   neutres nécessaires au rendu web (bordures, encre sur fond sombre),
   posés dans la famille de l'ancre #3B3B4F, jamais empruntés ailleurs. */

:root {
  --ink-primary:   #3B3B4F;
  --ink-secondary: #656587;
  --ink-tertiary:  #727296;
  --bg-page:       linear-gradient(180deg, #EAF6FA 0%, #CFE2E9 100%);
  /* Couleur du bas du dégradé, posée en `background-color` sous l'image :
     toute surface que l'image ne couvrirait pas prend cette teinte, jamais
     le gris par défaut du navigateur. */
  --bg-page-end:   #CFE2E9;
  --surface:       #FFFFFF;
  --border:        rgba(59, 59, 79, 0.12);   /* dérivé */
  --accent-link:   #62629F;
  --accent-action: linear-gradient(135deg, #25C6DB 0%, #39A6EA 100%);
  --accent-label:  #08333C;
  --ink-muted:     #8282A1;
  --shadow-card:   0 6px 16px rgba(59, 59, 79, 0.10);
  --shadow-card-raised: 0 10px 30px rgba(59, 59, 79, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.70);
  /* §3.8, halo radial de matière — transcrit tel quel */
  --halo-action:   radial-gradient(circle, rgba(37, 198, 219, 0.32), rgba(37, 198, 219, 0) 70%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink-primary:   #EDEDF4;                /* dérivé */
    --ink-secondary: #B4B4CC;                /* dérivé */
    --ink-tertiary:  #9494B0;                /* dérivé */
    --bg-page:       linear-gradient(180deg, #29293A 0%, #0E0E15 100%);
    --bg-page-end:   #0E0E15;
    --surface:       #3E3E4E;
    --border:        rgba(255, 255, 255, 0.12);  /* dérivé */
    --accent-link:   #9E9ED4;
    --ink-muted:     #7E7E9C;                /* dérivé */
    --shadow-card:   0 6px 16px rgba(0, 0, 0, 0.28);
    --shadow-card-raised: 0 10px 30px rgba(0, 0, 0, 0.34), inset 0 1px 1px rgba(255, 255, 255, 0.06);
    --halo-action:   radial-gradient(circle, rgba(37, 198, 219, 0.16), rgba(37, 198, 219, 0) 70%);
  }
}

* { box-sizing: border-box; }

/* ---- LE FOND ------------------------------------------------------------
   Le dégradé vit sur `html`, PAS sur `body`, et c'est la correction du
   08/09/2026 : porté par `body`, il était borné à `min-height: 100vh`, donc
   sur une page courte il se terminait au bas de la première fenêtre et
   laissait, sous le filet du pied, un aplat sombre qui se lisait comme une
   bande grise.

   Porté par `html`, il s'étire sur toute la hauteur du DOCUMENT. Il n'est pas
   `fixed` : descendre la page, c'est descendre dans l'eau, de la surface
   claire au fond. C'est la matière du domaine portée par la mise en page.

   Aucun bloc de fond n'est posé par section, nulle part : une seule source,
   ici. Sur une app 2 (terre, paille), seul `--bg-page` change.

   `no-repeat` + `background-color` sont la ceinture et les bretelles : sans
   `no-repeat`, un dégradé plus court que le canevas se RÉPÈTE et produit une
   couture ; la couleur de fond couvre ce que l'image ne couvre pas. */
html {
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  background-color: var(--bg-page-end);
  background-image: var(--bg-page);
  background-repeat: no-repeat;
}

/* `body` en colonne flex + `main` extensible : sur une page courte, le pied
   descend au bas de la fenêtre au lieu de laisser un vide sous son filet —
   c'est l'autre moitié de la bande grise. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink-primary);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- en-tête ---- */

.site-header {
  padding: 34px 0 0;
}

.wordmark {
  display: inline-block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink-primary);
  text-decoration: none;
}

.wordmark:hover { color: var(--accent-link); }

/* ---- contenu ---- */

main { padding: 44px 0 20px; flex: 1 0 auto; }

h1 {
  margin: 0 0 12px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
}

.lede {
  margin: 0 0 34px;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-secondary);
  line-height: 1.55;
}

h2 {
  margin: 38px 0 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

h3 {
  margin: 30px 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

p { margin: 0 0 16px; }

ul { margin: 0 0 16px; padding-left: 22px; }

li { margin-bottom: 6px; }

a { color: var(--accent-link); text-decoration: underline; text-underline-offset: 2px; }

a:hover { text-decoration: none; }

strong { font-weight: 700; }

.meta {
  margin: -6px 0 30px;
  font-size: 13px;
  color: var(--ink-tertiary);
}

/* ---- badge App Store ---------------------------------------------------
   Image fournie par Apple (`design/landing/03.png`), reproduite telle quelle,
   jamais redessinée. Elle porte sa bordure grise d'origine, ce qui la garde
   visible sur le fond sombre.

   ⚠️ ELLE NE MÈNE À AUCUNE FICHE : l'app n'est pas publiée. Le point exact où
   brancher le vrai lien est marqué en commentaire dans CHAQUE page qui
   l'affiche — chercher « LIEN APP STORE À BRANCHER ». */

.store-badge {
  display: block;
  width: 170px;
  height: auto;
}

@media (max-width: 560px) { .store-badge { width: 150px; } }

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

.site-footer {
  flex: none;
  margin-top: 56px;
  padding: 22px 0 40px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--ink-tertiary);
}

.site-footer a { color: var(--ink-tertiary); }

.site-footer a:hover { color: var(--accent-link); }

.sep { padding: 0 8px; }

@media (max-width: 520px) {
  h1 { font-size: 28px; }
  .lede { font-size: 17px; }
  main { padding: 32px 0 16px; }
}


/* ---- accueil du portefeuille -------------------------------------------- */
/* Comme une page app, l'accueil est plus large que les pages de texte : le
   720 px de `.wrap` convient à de la prose, pas à un bloc app à deux colonnes. */
.home-page .wrap { max-width: 1000px; }


.home-hero {
  text-align: center;
  padding: 30px 0 20px;
}

.home-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(40px, 7vw, 58px);
  letter-spacing: -1.4px;
  line-height: 1.05;
}

.home-hero .lede {
  margin: 0 0 6px;
  font-size: clamp(19px, 2.4vw, 22px);
  font-weight: 700;
  color: var(--ink-primary);
}

.home-hero p:last-child { margin: 0; color: var(--ink-secondary); font-size: 17px; }

/* ---- ENTRÉE D'APP — le patron du portefeuille ---------------------------
   UNE seule carte blanche contient TOUT le contenu de l'app, visuel compris.
   Traitement de carte du reste du site, repris tel quel : `--surface`, filet
   `--border`, rayon 22 px (le rayon de référence d'`ux.md` §3.7) et
   `--shadow-card`.

   Pour ajouter une app (terrarium, ruche) : dupliquer ce bloc et changer
   l'icône, le nom, le sous-titre et le visuel. Aucune règle ne bouge.

   ⚠️ La carte n'est PAS un lien. Le seul lien vers la page de l'app est le
   cercle-flèche posé à côté du nom : cliquer ailleurs dans la carte ne
   déclenche rien. */

.app-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
  margin-top: 44px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  text-align: left;
}

@media (min-width: 800px) {
  .app-entry {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 36px;
    padding: 38px 40px;
  }

  /* ---- le visuel déborde par le HAUT, desktop uniquement --------------
     Le visuel n'est pas centré dans la carte : son haut — l'encoche caméra
     et le nom du bac — passe AU-DESSUS de la bordure supérieure, et son bas
     reste au ras du rembourrage inférieur. Asymétrique, voulu.

     Pourquoi `margin-top` négatif et pas `translateY` : la marge agit sur la
     mise en page, donc la carte se raccourcit d'autant et le bas du visuel
     reste collé au rembourrage bas. Un `translateY` ne déplacerait que le
     rendu : le bas remonterait et rouvrirait un vide en bas de carte, ce que
     la demande refuse.

     Pourquoi un POURCENTAGE et pas des pixels : un `margin-top` en % se
     résout sur la LARGEUR du bloc conteneur — ici la colonne de grille, qui
     est aussi ce qui dimensionne l'image. L'écart reste donc proportionnel à
     l'image à toutes les largeurs d'écran, ce qu'une valeur en px ne ferait
     pas (trop de débordement sur un écran étroit).

     Le chiffre, et pourquoi c'est un `calc` et pas un pourcentage seul :
     le bas de « Nano » est à 240 px sur les 1840 de `01.png`, soit 13,04 %
     de la hauteur de l'image, soit **8,82 % de la largeur** de colonne
     (l'image a un rapport 1240 × 839). Il faut donc franchir ce 8,82 %
     PLUS les 39 px de rembourrage et de filet, qui, eux, ne varient pas
     avec la largeur.

     Un pourcentage seul échouait en dessous de ~1000 px : mesuré, « Nano »
     restait dans la carte à 900 px (débordement 33 px) et à 760 px (20 px),
     parce que le 39 px fixe pèse de plus en plus lourd à mesure que l'image
     rétrécit. Le `calc` le compense terme à terme, et la propriété tient à
     toutes les largeurs où la carte est à deux colonnes. Les 3 px sont la marge qui dégage le nom du filet. */
  /* `align-self: start` : sans lui, dès que la colonne de gauche devient
     plus haute que le visuel, `align-items: center` le
     recentre dans sa rangée et mange le débordement — 26 px au lieu de 35,
     et « Nano » repassait dans la carte. Ancré en haut, le débordement vaut
     toujours exactement la marge. */
  /* ---- desktop ÉTROIT (800-999 px) -------------------------------------
     En dessous de 1000 px, le gabarit n'est plus plafonné : les colonnes
     rétrécissent, le visuel avec elles, et sa boîte de marge finit par
     passer SOUS la hauteur de la colonne de texte. C'est alors le texte qui
     dimensionne la carte, et le bas du visuel ne l'atteint plus — mesuré :
     6 px d'écart à 900, 13 px à 880, 51 px à 760. Le seuil des deux
     colonnes est d'ailleurs remonté de 760 à 800 px pour la même raison :
     en dessous, la colonne de texte gouverne quoi qu'on fasse, et le bas ne
     colle plus. L'iPad en portrait (768 px) prend donc la carte compacte,
     sans visuel — ce qui vaut mieux qu'une carte à deux colonnes à l'écart
     bas de 15 px.

     On rend un peu de largeur au visuel sur cette plage seule, ce qui le
     rend assez haut pour redevenir le dimensionnant. La composition large,
     elle, ne bouge pas. */
  @media (max-width: 999px) {
    .app-entry { grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); }
  }

  .app-entry-art {
    align-self: start;
    margin-top: calc(-42px - 8.82%);
    /* Le bas doit toucher le bord bas, comme le haut traverse le bord haut :
       sans cette marge, l'image s'arrête à la boîte de contenu et laisse
       flotter les 38 px de rembourrage bas. La marge négative la fait
       traverser ce rembourrage jusqu'au filet. Elle raccourcit la carte
       d'autant, ce qui est exactement « réduire la hauteur du conteneur ». */
    margin-bottom: -38px;
  }
}

/* icône, nom et cercle-flèche sur UNE ligne, centrés l'un sur l'autre */
.app-entry-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.app-entry-icon { width: 56px; height: 56px; display: block; flex: none; }

.app-entry-name {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

/* Cercle-flèche : contour gris NEUTRE, jamais une couleur d'accent — le
   dégradé cyan porte l'action ailleurs, et cette pastille doit rester
   discrète à côté du nom. */
.app-entry-go {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-secondary);
  text-decoration: none;
}

.app-entry-go:hover { border-color: var(--ink-secondary); color: var(--ink-primary); }

.app-entry-go:focus-visible {
  outline: 2px solid var(--accent-link);
  outline-offset: 3px;
}

.app-entry-go svg { width: 13px; height: 13px; display: block; }

/* Même teinte que la dernière ligne du header (`--ink-secondary`), comme
   demandé — jamais une couleur d'accent. */
.app-entry-sub {
  margin: 0 0 20px;
  color: var(--ink-secondary);
  font-size: 16px;
}

.app-entry-art { width: 100%; height: auto; display: block; }

/* ⚠️ En dessous de 800 px, le visuel du téléphone DISPARAÎT entièrement :
   la carte n'a plus qu'une colonne. `loading="lazy"` sur l'image fait que
   les navigateurs ne la téléchargent pas quand elle n'a pas de rendu. */
@media (max-width: 799px) {
  .app-entry-art { display: none; }
}
}