/* ============================================================
   AppMoi — portail : styles (E-0002 tokens + E-0004 mise en page)
   ------------------------------------------------------------
   JALON H6 RÉSOLU (2026-07-10) : direction D3 « Contrepoids »
   + palette D3a « Encre » ACTÉES et DÉFINITIVES. Gris bleutés
   quasi achromatiques, accent encre désaturée (#3d5875 clair /
   #94b6da sombre). D3b, D1 et D2 écartées (mémoire : git +
   docs/features/site/ui.md, section « Design tokens »).
   ------------------------------------------------------------
   Règles : tokens sémantiques uniquement, aucune couleur brute
   hors des deux blocs de définition ; zéro JS ; fonts système ;
   la couleur appartient aux apps (--app-accent par carte).
   Motion (révision 2026-07-11, demande de relief) : transitions
   et animations CSS pures — entrée du hero, mise en scène de la
   promesse au scroll (scroll-driven animations sous @supports,
   état final lisible sans support) ; prefers-reduced-motion
   neutralise tout.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* --- Tokens light (défaut) — D3a « Encre » (H6 acté) --- */
  --color-bg:            #eef0f1;
  --color-surface:       #f8f9fa;
  --color-surface-2:     #e3e6e9;
  --color-text-strong:   #22262b;
  --color-text:          #363c44;
  --color-text-muted:    #5f6771;
  --color-accent:        #3d5875;
  --color-border:        #d8dce0;
  --color-border-strong: #9aa2ab;
  --color-focus:         #3d5875;
  /* Relief : ombres composées (ambiante + portée) et encre fantôme */
  --shadow: 0 1px 2px rgba(34, 38, 43, 0.05), 0 6px 18px rgba(34, 38, 43, 0.07);
  --shadow-lift: 0 2px 4px rgba(34, 38, 43, 0.06), 0 16px 40px rgba(34, 38, 43, 0.14);
  --ghost: rgba(34, 38, 43, 0.06);

  /* Registre des couleurs d'apps (identité + encre AA par mode).
     Usage : uniquement via --app-accent / --app-accent-ink posés
     carte par carte. Jamais sur le wordmark ni la signature. */
  --app-recettemoi:      #7c3aed;
  --app-recettemoi-ink:  #6d28d9;
  --app-padelmoi:        #b6ff3c;
  --app-padelmoi-ink:    #3f6212;

  /* --- Typographie (fonts système, aucune webfont) --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* --- Forme --- */
  --radius:    14px;
  --radius-lg: 20px;
  --max-w:     880px;
  --pad-inline: clamp(20px, 5vw, 36px);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* --- Tokens dark — D3a « Encre » (H6 acté) --- */
    --color-bg:            #16181b;
    --color-surface:       #1f2226;
    --color-surface-2:     #282c31;
    --color-text-strong:   #e8eaed;
    --color-text:          #cdd2d8;
    --color-text-muted:    #99a1ab;
    --color-accent:        #94b6da;
    --color-border:        #33383e;
    --color-border-strong: #575e66;
    --color-focus:         #94b6da;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.5);
    --ghost: rgba(232, 234, 237, 0.055);

    --app-recettemoi-ink:  #b79df7;
    --app-padelmoi-ink:    #b6ff3c;
  }
}

/* ============================================================
   Base
   ============================================================ */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body > header,
body > main,
body > footer {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness 0.15s ease-out, text-underline-offset 0.15s ease-out;
}

a:hover { text-decoration-thickness: 2px; text-underline-offset: 0.24em; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

[id] { scroll-margin-top: 24px; }

p { text-wrap: pretty; }

/* ============================================================
   Wordmark « AppMoi » — D3 : App léger, Moi très gras.
   Balisage : <span class="wordmark">App<b>Moi</b></span>
   Texte réel, jamais une image. Taille min 14px, sinon
   monogramme « aM » (voir docs/features/site/ui.md).
   ============================================================ */

.wordmark {
  font-family: var(--font-sans);
  font-weight: 330;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
}

.wordmark b { font-weight: 800; }

.monogram {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
}

.monogram b { font-weight: 800; }

/* Signature « Une app AppMoi » (optionnelle pour les apps, G-07) */
.signature {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.signature .wordmark {
  font-size: inherit;
  color: var(--color-text);
}

/* ============================================================
   Topbar (identique sur les 4 pages)
   ============================================================ */

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: clamp(20px, 4vh, 34px) 0;
}

.brand {
  text-decoration: none;
  font-size: 1.3125rem;
  line-height: 1;
}

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

.topbar nav a {
  font-size: 0.9375rem;
  color: var(--color-text);
}

.topbar nav a[aria-current="page"] {
  color: var(--color-text-muted);
  text-decoration: none;
}

/* ============================================================
   Hero (accueil) — le contrepoids, théâtral : la graisse est au
   « Moi », et dans la phrase, à « t'appartiennent ». Monogramme
   fantôme en toile de fond, entrée en scène au chargement.
   ============================================================ */

.hero { position: relative; }

/* Toile de fond : « aM » géant à l'encre fantôme, décoratif */
.hero-mark {
  position: absolute;
  right: 0;
  top: clamp(8px, 4vh, 48px);
  font-size: clamp(11rem, 34vw, 26rem);
  line-height: 0.8;
  font-weight: 330;
  letter-spacing: -0.04em;
  color: var(--ghost);
  user-select: none;
  pointer-events: none;
  z-index: -1;
}

.hero-mark b { font-weight: 800; }

.hero h1 {
  margin: clamp(72px, 18vh, 168px) 0 0;
  font-size: clamp(2.5rem, 1.1rem + 7.2vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 330;
  color: var(--color-text-strong);
  text-wrap: balance;
  max-width: 14ch;
}

.hero h1 strong {
  font-weight: 800;
  /* Le trait d'encre sous le mot qui engage */
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.1em;
}

.hero-lede {
  margin: clamp(20px, 4vh, 32px) 0 0;
  font-size: 1.1875rem;
  color: var(--color-text-muted);
  max-width: 42ch;
  text-wrap: pretty;
}

.cta-row {
  margin: clamp(28px, 6vh, 48px) 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 26px;
}

.cta {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  text-decoration: none;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1;
  padding: 15px 26px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease-out;
}

.cta:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.cta:active { transform: translateY(0); box-shadow: var(--shadow); }

.cta-quiet { font-size: 1rem; }

/* Entrée en scène du hero (chargement) — neutralisée par le
   garde-fou prefers-reduced-motion (durées à 0.01ms = état final) */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero h1        { animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero .hero-lede { animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; }
.hero .cta-row  { animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both; }

/* ============================================================
   Sections de l'accueil
   ============================================================ */

.section { padding-block: clamp(56px, 12vh, 104px) 0; }

.section:last-child { padding-bottom: clamp(40px, 8vh, 72px); }

.section h2 {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.section-intro {
  margin: 0 0 26px;
  font-size: 1.1875rem;
  color: var(--color-text-strong);
  max-width: 46ch;
  text-wrap: balance;
}

/* ============================================================
   Entrée de la promesse — le moment fort de la narration :
   la promesse EST le produit d'AppMoi, elle parle à l'échelle
   d'un titre. Même geste que le hero : contrepoids 350/800 et
   trait d'encre sous le mot qui engage (« se vérifie »).
   ============================================================ */

.promise-head { padding-block: clamp(72px, 16vh, 148px) clamp(8px, 2vh, 16px); }

.promise-lede {
  margin: 0;
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 350;
  color: var(--color-text-strong);
  text-wrap: balance;
  max-width: 22ch;
}

.promise-lede strong {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.1em;
}

.promise-sub {
  margin: 16px 0 0;
  font-size: 1.0625rem;
  color: var(--color-text-muted);
}

/* ============================================================
   Cartes d'apps — des galets, structurés par la surface,
   jamais par des bordures. La couleur appartient à l'app :
   --app-accent     : pastille, touche identitaire (non textuel)
   --app-accent-ink : seule variante autorisée pour du texte,
                      AA garanti par mode.
   ============================================================ */

.apps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.app-card--recettemoi {
  --app-accent: var(--app-recettemoi);
  --app-accent-ink: var(--app-recettemoi-ink);
}

.app-card--padelmoi {
  --app-accent: var(--app-padelmoi);
  --app-accent-ink: var(--app-padelmoi-ink);
}

.app-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px 26px 26px;
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease-out;
}

/* Le galet se soulève et son halo prend la couleur de l'app */
.app-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift), 0 0 0 1px color-mix(in srgb, var(--app-accent) 35%, transparent);
}

.app-card:hover .dot {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-accent) 18%, transparent);
}

.app-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-head .dot {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--app-accent);
  transition: box-shadow 0.25s ease-out;
}

.app-head h3 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--color-text-strong);
}

.badge {
  margin-left: auto;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-text);
  background: var(--color-surface-2);
  padding: 5px 11px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.pitch {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  max-width: 44ch;
}

/* Double action par carte (décision Vincent 2026-07-11) :
   « Son espace » + « Ouvrir l'app » / « App Store », toujours
   visibles. Action indisponible = élément NON interactif (span,
   pas de lien mort), mention « bientôt » lisible sans couleur. */
.app-actions {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.9375rem;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  line-height: 1.2;
  min-height: 44px; /* cible tactile WCAG, tous viewports */
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 600;
}

/* Mobile : les deux actions s'empilent pleine largeur, dans
   l'ordre spec (Son espace, puis l'accès) — zéro retour à la
   ligne interne, zones tactiles pleines. */
@media (max-width: 480px) {
  .app-actions { flex-direction: column; align-items: stretch; }
  .app-btn { white-space: nowrap; }
}

a.app-btn {
  color: var(--app-accent-ink);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--app-accent-ink) 45%, transparent);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease-out, background 0.2s ease-out;
}

a.app-btn:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  background: color-mix(in srgb, var(--app-accent) 9%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.app-btn--off {
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong);
}

.app-btn--off small {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ============================================================
   La promesse — six zones pleine largeur intégrées à l'accueil
   (décision Vincent 2026-07-11 : plus de page « manifeste »).
   Bandes alternées, numéros géants à l'encre fantôme en
   parallax, textes révélés au scroll. Tout dégrade proprement :
   sans scroll-driven animations, l'état final est celui écrit ;
   prefers-reduced-motion neutralise le reste.
   ============================================================ */

/* Chaque zone est un panneau pleine hauteur, opaque et pleine
   largeur (fond étendu par box-shadow étalé + clip-path : aucun
   recours à 100vw, donc aucun débordement lié à la scrollbar).
   Mise en scène UNIVERSELLE (Gecko/WebKit/Blink, zéro JS) : les
   panneaux 01-05 s'épinglent (position: sticky) et chaque suivant
   glisse par-dessus — effet « deck ». Les scroll-driven
   animations ne sont plus qu'un bonus Chromium non structurant. */
.pz {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(56px, 11vh, 96px);
  background: var(--color-bg);
  box-shadow: 0 0 0 100vmax var(--color-bg);
  clip-path: inset(0 -100vmax);
}

.pz--tint {
  background: var(--color-surface);
  box-shadow: 0 0 0 100vmax var(--color-surface);
}

/* Épinglage du deck : uniquement si le mouvement est bienvenu.
   Chaque .pz-scene fait 200svh : la 2e moitié = scroll pendant que le
   panneau est épinglé et que le suivant monte (runway sticky universel).
   z-index croissant sur les scènes : chaque panneau recouvre le précédent. */
@media (prefers-reduced-motion: no-preference) {
  .pz-scene {
    height: 200svh;
    position: relative;
  }

  .pz-scene .pz--pin {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100svh;
  }

  .pz-scene:has(#tes-donnees)  { z-index: 1; }
  .pz-scene:has(#zero-pub)     { z-index: 2; }
  .pz-scene:has(#zero-perte)    { z-index: 3; }
  .pz-scene:has(#prix-honnete)  { z-index: 4; }
  .pz-scene:has(#en-france)     { z-index: 5; }
}

/* Numéro géant à l'encre fantôme, derrière le texte : contenu
   généré (data-num) avec texte alternatif vide — pure décoration,
   hors arbre textuel (ni lecteurs d'écran, ni règle de contraste,
   qui ne s'applique qu'au texte porteur de sens). */
.pz[data-num]::before {
  content: attr(data-num) / "";
  position: absolute;
  top: clamp(20px, 9vh, 84px); /* dans le panneau : jamais rogné par le clip-path */
  right: 0;
  font-size: clamp(7rem, 22vw, 15rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ghost);
  user-select: none;
  pointer-events: none;
}

.pz h3 {
  position: relative;
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 780;
  color: var(--color-text-strong);
  text-wrap: balance;
  max-width: 24ch;
}

.pz p { position: relative; max-width: 58ch; margin: 0 0 14px; }

.pz p:last-child { margin-bottom: 0; }

/* Zone de clôture (entreprise) : plus calme, sans numéro, jamais
   épinglée (elle recouvre 05 puis rend la main au footer). */
.pz--close {
  min-height: 0;
  padding-block: clamp(64px, 13vh, 120px) clamp(72px, 14vh, 128px);
}

/* --- Mise en scène au scroll (progressive enhancement pur) --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes pz-reveal {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }
    /* Parallax : le numéro fantôme remonte plus vite que le flux */
    @keyframes pz-drift {
      from { transform: translateY(clamp(28px, 6vh, 64px)); }
      to   { transform: translateY(clamp(-28px, -6vh, -64px)); }
    }

    .pz h3, .pz p,
    .promise-head h2, .promise-head .promise-lede, .promise-head .promise-sub {
      animation: pz-reveal 1ms linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }

    .pz[data-num]::before {
      animation: pz-drift 1ms linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* Deck blur : timeline sur le WRAPPER .pz-scene (pas le sticky lui-même —
       view() sur sticky n'avance pas pendant le recouvrement). 50→100 % de la
       scène = 2e viewport de scroll, panneau épinglé recouvert par le suivant. */
    @keyframes pz-deck-blur {
      0% {
        filter: blur(0);
        opacity: 1;
      }
      100% {
        filter: blur(10px);
        opacity: 0.55;
      }
    }

    .pz-scene {
      view-timeline: --pz-deck block;
    }

    .pz-scene > .pz--pin {
      animation: pz-deck-blur 1ms linear both;
      animation-timeline: --pz-deck;
      animation-range: 50% 100%;
    }
  }
}

/* ============================================================
   Pages intérieures (manifeste, légal) : lecture
   ============================================================ */

.page-head .page-label {
  margin: clamp(48px, 10vh, 96px) 0 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.page-head h1 {
  margin: clamp(48px, 10vh, 96px) 0 0;
  font-size: clamp(1.9375rem, 1.1rem + 3.6vw, 3.125rem);
  line-height: 1.08;
  letter-spacing: -0.024em;
  font-weight: 350;
  color: var(--color-text-strong);
  text-wrap: balance;
}

.page-head h1 strong { font-weight: 800; }

/* Avec label (manifeste), le label porte la marge du bloc */
.page-head .page-label + h1 { margin-top: 0; }

/* main.prose reste sur la grille 880 px centrée (body > main) :
   un seul axe pour titre, texte et footer. La mesure de lecture
   est bornée à 66ch sur les ENFANTS, pas sur le conteneur
   (correction du bloquant review 2026-07-11 : margin-inline: 0
   écrasait le centrage et décollait la prose de son h1). */
.prose { padding-bottom: clamp(40px, 8vh, 72px); }

.prose > * { max-width: 66ch; }

.prose .lede {
  margin: clamp(24px, 5vh, 40px) 0 0;
  font-size: 1.1875rem;
  color: var(--color-text-strong);
}

.prose section { margin-top: clamp(44px, 9vh, 72px); }

.prose h2 {
  margin: 0 0 14px;
  font-size: 1.375rem;
  font-weight: 780;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-text-strong);
}

.prose h2:target { color: var(--color-accent); }

.prose p { margin: 0 0 14px; }

.prose em { font-style: italic; }

/* « Vérifie-le » : la preuve en galet — le motif signature
   promesse → vérification, zone par zone. */
.verify {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 0.9375rem;
  margin-top: 18px;
}

/* Sur bande teintée, le galet de preuve passe au niveau suivant */
.pz--tint .verify { background: var(--color-surface-2); }

/* ============================================================
   Footer (identique sur les 4 pages) : exactement 4 éléments
   ============================================================ */

.site-foot { margin-top: clamp(32px, 7vh, 64px); }

.site-foot ul {
  margin: 0;
  padding: 28px 0 44px;
  border-top: 1px solid var(--color-border);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.site-foot a { color: var(--color-text); }

.site-foot a[aria-current="page"] {
  color: var(--color-text-muted);
  text-decoration: none;
}

/* ============================================================
   Accessibilité et dégradations
   ============================================================ */

@media (prefers-contrast: more) {
  :root {
    --color-text: var(--color-text-strong);
    --color-text-muted: var(--color-text);
    --color-border: var(--color-border-strong);
  }
}

@media (forced-colors: active) {
  .app-card, .verify, .badge { border: 1px solid CanvasText; }
  .app-head .dot { background: CanvasText; }
  .cta, a.app-btn { border: 1px solid LinkText; }
  .app-btn--off { border: 1px dashed GrayText; color: GrayText; }
  .pz--tint { border-block: 1px solid CanvasText; }
  .hero-mark, .pz[data-num]::before { color: GrayText; opacity: 0.25; }
}

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

  .pz-scene { height: auto; }
}

@media print {
  body { background: Canvas; color: CanvasText; }
  .app-card, .verify { border: 1px solid CanvasText; background: Canvas; box-shadow: none; }
  .cta, a.app-btn { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .hero-mark, .pz[data-num]::before { display: none; }
  .pz, .pz--tint { background: Canvas; box-shadow: none; min-height: 0; position: static; filter: none; }
}