/* ============================================================================
   landing.css — la page d'accueil qui EXPLIQUE Decarmy
   Écrite le 27/08/2026. Elia : « juste avant d'arriver à la page pratique il
   faut de l'explication plus le lien à l'app », référence visuelle Revolut
   (objets 3D qui flottent autour du titre, puis des cartes de fonctionnalités).

   ── RÈGLE DU PRÉFIXE ───────────────────────────────────────────────────────
   TOUT est préfixé `lp-`. Vérifié le 27/08 : ZÉRO classe `.lp-*` n'existe
   ailleurs dans le site. C'est la leçon écrite en tête d'airbnb.css — le
   préfixe `ab-` y était déjà pris par detail-airbnb.css, et les collisions ont
   coûté cher. Ne jamais écrire ici un sélecteur de balise nu.

   ── COULEURS ───────────────────────────────────────────────────────────────
   AUCUNE couleur en dur : tout vient de `db/theme-deca.css`, généré depuis
   `decarmy-rn/constants/DecaTheme.ts`. La page suit donc le thème clair/sombre
   du visiteur sans une seule valeur recopiée.
   ⚠️ Pas de doré #D4A847 ni de rouge Airbnb #FF385C : bannis par Elia.
   ============================================================================ */

/* ── 0. Le reset ──────────────────────────────────────────────────────────────
   ⚠️ INDISPENSABLE, ET C'EST UN PIÈGE MESURÉ. `box-sizing: border-box` est
   déclaré dans `styles.css` — que cette page NE CHARGE PAS, volontairement :
   l'ancien accueil portait déjà le commentaire « on ne lie toujours pas
   styles.css : il ramènerait le fond beige ». Il portait donc son propre reset
   en ligne, et il fallait le reprendre ici.
   Sans lui, le 27/08, `.ab-wrap` (le conteneur du chrome, padding 32) faisait
   620 px dans une fenêtre de 588 : l'en-tête débordait et « Communs » était
   coupé. Ne pas retirer cette règle en croyant qu'elle fait doublon. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── 1. Socle ─────────────────────────────────────────────────────────────── */
.lp-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--deca-text);
  background: var(--deca-bg);
  overflow-x: hidden;             /* les objets flottants débordent volontairement */
}
.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── 2. Le hero ───────────────────────────────────────────────────────────── */
.lp-hero {
  position: relative;
  /* ⛔ LE HÉROS REMPLIT L'ÉCRAN, QUELLE QUE SOIT SA TAILLE (Elia, 01/09,
     capture iPad : « on ne doit pas voir ce que je t'entoure en rouge —
     on doit le voir qu'en swipant »). Sur une tablette, la section
     suivante dépassait sous le pli. `min-height` = la hauteur de la
     fenêtre moins l'en-tête (80 px, il est sticky donc DANS le flux), et
     le contenu se centre dedans : sur un écran court rien ne déborde
     (min-, pas height), sur un écran haut la suite attend le défilement.
     `svh` ignore les barres mobiles qui se rétractent ; le repli `vh`
     sert aux navigateurs qui ne le parlent pas. */
  box-sizing: border-box;
  min-height: calc(100vh - var(--ab-h, 80px));
  min-height: calc(100svh - var(--ab-h, 80px));
  display: flex; flex-direction: column; justify-content: center;
  /* ⛔ LES DEUX BOUTONS PASSAIENT SOUS LE PLI (Elia, 28/08, capture à
     l'appui : « sur la grande page on ne voit pas bien les 2 boutons
     importants »). Sur un portable 1440×950, l'en-tête, un titre de 92 px
     sur trois lignes et un paragraphe de cinq lignes suffisaient à les
     pousser dehors — or ce sont les deux seules actions de la page.
     Rythme vertical resserré, titre plafonné, paragraphe élargi pour
     tenir en quatre lignes : ~120 px regagnés, les boutons remontent. */
  padding: clamp(40px, 6.5vw, 76px) 0 clamp(48px, 8vw, 92px);
  text-align: center;
  isolation: isolate;             /* les objets flottants restent derrière le texte */
}

/* ⚠️ Le titre est la phrase EXACTE demandée par Elia : « One App, All Things
   Ecology ». Il n'est pas traduit — c'est une signature, comme « One app, all
   things money » chez Revolut. */
.lp-title {
  margin: 0 auto;
  max-width: 12ch;                /* force la coupure en 2-3 lignes, comme Revolut */
  font-size: clamp(38px, 7vw, 76px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--deca-text);
}
.lp-sub {
  margin: clamp(16px, 2.2vw, 22px) auto 0;
  max-width: 54ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--deca-text-secondary);
}
.lp-actions {
  margin-top: clamp(20px, 2.8vw, 28px);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

/* ── 3. Boutons ───────────────────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  border-radius: 100px;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s cubic-bezier(.4,0,.2,1), opacity .18s;
  white-space: nowrap;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn:active { transform: translateY(0); }
/* Le CTA prend la couleur d'accent : noir sur blanc, blanc sur noir. Le texte
   prend le FOND — les deux s'inversent ensemble, jamais l'un sans l'autre. */
.lp-btn-plein { background: var(--deca-primary); color: var(--deca-bg); }
.lp-btn-plein:hover { opacity: .88; }
.lp-btn-ligne { background: transparent; color: var(--deca-text); border-color: var(--deca-border); }
.lp-btn-ligne:hover { background: var(--deca-surface); }

/* ── 4. Les objets 3D qui flottent ────────────────────────────────────────────
   Positionnés en pourcentage pour suivre la largeur. `pointer-events:none` :
   ils ne doivent jamais voler un clic au bouton. `aria-hidden` côté HTML — ce
   sont des décors, ils n'ont rien à dire à un lecteur d'écran. */
.lp-float { position: absolute; z-index: -1; pointer-events: none; user-select: none; }
.lp-float img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.16));
  animation: lp-derive 9s ease-in-out infinite;
}
@keyframes lp-derive {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-14px) rotate(var(--r, 0deg)); }
}
/* ⚠️ Une animation qui ne s'arrête jamais est un problème d'accessibilité
   (vertiges, troubles de l'attention) : on la coupe pour qui l'a demandé au
   système. Les objets restent visibles, ils cessent seulement de bouger. */
@media (prefers-reduced-motion: reduce) {
  .lp-float img { animation: none; }
  .lp-btn { transition: none; }
}

/* Six positions, deux tailles. Les `--r` inclinent chaque objet différemment :
   un décor parfaitement aligné a l'air d'une grille, pas d'un mouvement. */
.lp-f1 { top: 4%;  left: 3%;   width: clamp(72px, 11vw, 150px); --r: -14deg; }
.lp-f2 { top: 0%;  right: 5%;  width: clamp(64px, 9.5vw, 130px); --r: 12deg; }
.lp-f3 { top: 38%; left: -2%;  width: clamp(80px, 12vw, 165px); --r: 8deg; }
.lp-f4 { top: 34%; right: -1%; width: clamp(76px, 11vw, 155px); --r: -10deg; }
.lp-f5 { bottom: 6%; left: 12%; width: clamp(58px, 8vw, 110px); --r: 16deg; }
.lp-f6 { bottom: 3%; right: 14%; width: clamp(62px, 8.5vw, 118px); --r: -7deg; }
.lp-f2 img { animation-delay: -1.4s; }
.lp-f3 img { animation-delay: -2.8s; }
.lp-f4 img { animation-delay: -4.2s; }
.lp-f5 img { animation-delay: -5.6s; }
.lp-f6 img { animation-delay: -7.0s; }

/* Sous 900 px les objets latéraux mangeraient le titre : on n'en garde que
   quatre, plus petits, dans les coins. */
@media (max-width: 900px) {
  .lp-f3, .lp-f4 { display: none; }
  .lp-f1, .lp-f2 { width: clamp(56px, 14vw, 92px); }
  .lp-f5, .lp-f6 { width: clamp(48px, 12vw, 78px); }
}

/* ── 5. Sections ──────────────────────────────────────────────────────────── */
.lp-section { padding: clamp(56px, 9vw, 108px) 0; }
.lp-section-tete { text-align: center; max-width: 40ch; margin: 0 auto clamp(32px, 5vw, 56px); }
.lp-eyebrow {
  display: block; margin-bottom: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: var(--deca-text-secondary);
}
.lp-h2 {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.025em;
  color: var(--deca-text);
}
.lp-lead {
  margin: 16px auto 0; max-width: 52ch;
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65;
  color: var(--deca-text-secondary);
}

/* ── 6. Cartes de fonctionnalité ──────────────────────────────────────────── */
.lp-cards { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .lp-cards { grid-template-columns: 1fr; } }

.lp-card {
  display: flex; flex-direction: column;
  padding: 28px 26px 30px;
  background: var(--deca-surface);
  border: 1px solid var(--deca-border-soft);
  border-radius: var(--deca-radius-lg, 24px);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.lp-card:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .lp-card { transition: none; } .lp-card:hover { transform: none; } }

.lp-card-img { width: 96px; height: 96px; margin-bottom: 22px; object-fit: contain; }
.lp-card-eyebrow { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--deca-text-secondary); }
.lp-card-t { margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--deca-text); }
.lp-card-p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--deca-text-secondary); }

/* ── 7. Grande carte (une fonctionnalité qui mérite toute la largeur) ─────── */
.lp-big {
  display: grid; align-items: center; gap: clamp(24px, 4vw, 56px);
  grid-template-columns: 1.1fr .9fr;
  padding: clamp(28px, 4vw, 52px);
  background: var(--deca-surface);
  border: 1px solid var(--deca-border-soft);
  border-radius: var(--deca-radius-xl, 32px);
}
.lp-big + .lp-big { margin-top: 20px; }
.lp-big-inverse { grid-template-columns: .9fr 1.1fr; }
.lp-big-inverse .lp-big-texte { order: 2; }
.lp-big-inverse .lp-big-visuel { order: 1; }
@media (max-width: 860px) {
  .lp-big, .lp-big-inverse { grid-template-columns: 1fr; }
  .lp-big-inverse .lp-big-texte, .lp-big-inverse .lp-big-visuel { order: initial; }
}
.lp-big-t { margin: 0 0 14px; font-size: clamp(22px, 2.8vw, 32px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--deca-text); }
.lp-big-p { margin: 0; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; color: var(--deca-text-secondary); }
.lp-big-visuel { display: flex; justify-content: center; }
.lp-big-visuel img { width: min(220px, 60%); height: auto; filter: drop-shadow(0 16px 30px rgba(0,0,0,.14)); }

/* ── 8. Chiffres ──────────────────────────────────────────────────────────── */
.lp-chiffres { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); text-align: center; }
@media (max-width: 700px) { .lp-chiffres { grid-template-columns: 1fr; } }
.lp-chiffre {
  padding: 30px 22px;
  background: var(--deca-surface);
  border: 1px solid var(--deca-border-soft);
  border-radius: var(--deca-radius-lg, 24px);
}
.lp-chiffre-v { display: block; font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -0.03em; color: var(--deca-text); }
.lp-chiffre-l { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--deca-text-secondary); }

/* ── 9. Le bloc « prends l'app » ──────────────────────────────────────────── */
.lp-app {
  display: grid; align-items: center; gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1fr auto;
  padding: clamp(30px, 4.5vw, 56px);
  background: var(--deca-surface);
  border: 1px solid var(--deca-border-soft);
  border-radius: var(--deca-radius-xl, 32px);
}
@media (max-width: 800px) { .lp-app { grid-template-columns: 1fr; text-align: center; } .lp-app .lp-actions { justify-content: center; } }

/* ── 10. L'appel final ────────────────────────────────────────────────────── */
.lp-final { text-align: center; padding: clamp(60px, 9vw, 120px) 0 clamp(72px, 10vw, 130px); }
.lp-final .lp-h2 { max-width: 20ch; margin: 0 auto; }

/* ── 11. Lien de saut (accessibilité) ─────────────────────────────────────────
   La page est longue et décorative : quelqu'un au clavier doit pouvoir
   atteindre la partie utile sans traverser six sections. Invisible tant qu'il
   n'a pas le focus. */
.lp-saut {
  position: absolute; left: -9999px; top: 0;
  padding: 12px 20px; border-radius: 0 0 12px 0;
  background: var(--deca-primary); color: var(--deca-bg);
  font-size: 14px; font-weight: 600; text-decoration: none; z-index: 100;
}
.lp-saut:focus { left: 0; }

/* ── 12. La note de bas de bloc ───────────────────────────────────────────────
   Le « sous le capot » : les limites et les garde-fous, écrits en petit mais
   écrits. C'est un parti pris de la page — les juges de la revue l'ont retenu
   comme sa meilleure idée : un chiffre flatteur, tout le monde en publie ; une
   liste de ce qu'on refuse de compter, personne. */
.lp-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--deca-border);
  font-size: 13.5px; line-height: 1.55;
  color: var(--deca-text-tertiary);
}

/* ── 13. L'EN-TÊTE NU DE L'ACCUEIL ────────────────────────────────────────────
   Elia, 27/08 : « il faut que tout soit noir, il ne faut pas qu'il y ait dans
   le header une teinte de gris différente ».

   ⚠️ ON PREND `--deca-bg`, PAS `#000` EN DUR. L'intention est « pas de teinte
   différente du reste de la page » : en sombre cela donne le noir qu'elle
   demande, en clair le blanc de la page. Écrire du noir en dur ferait une
   bande noire au-dessus d'une page blanche — l'inverse exact de la demande.

   ⚠️ Deux classes (`.ab-header.ab-nue`) contre une seule côté chrome : la
   spécificité l'emporte quel que soit l'ordre d'injection — le chrome ajoute
   sa feuille à l'exécution, donc APRÈS celle-ci. */
.ab-header.ab-nue {
  background: var(--deca-bg);
  border-bottom: 0;
  box-shadow: none;
}
/* Le filet du bas apparaît au défilement (classe `.scrolled` posée par le JS) :
   on le neutralise aussi, sinon la « teinte différente » revient dès qu'on
   descend de 40 pixels. */
.ab-header.ab-nue.scrolled { border-bottom: 0; box-shadow: none; }

/* Sans onglets ni barre de recherche, la piste centrale de la grille du chrome
   reste vide : la marque part à gauche, les trois ronds à droite. C'est le
   dessin demandé. */
.ab-header.ab-nue .ab-wrap { grid-template-columns: 1fr auto; }
.ab-header.ab-nue .ab-brand { grid-area: brand; }
.ab-header.ab-nue .ab-right { grid-area: right; }

/* Les trois ronds (langue, profil, menu) : PAS de pastille grise.
   Le chrome leur donne un fond `--ab-grey` (#1C1C1E en sombre) et une icône
   `--deca-text-secondary` : sur du noir, c'est précisément la « teinte de gris
   différente » qu'Elia ne veut pas, et l'icône grise s'y perd. Ici : fond
   transparent, icône à la couleur du texte. La pastille ne réapparaît qu'au
   survol, pour que le bouton reste un bouton. */
.ab-header.ab-nue .ab-round,
.ab-header.ab-nue .ab-round.ab-burger {
  background: transparent;
  border-color: transparent;
}
.ab-header.ab-nue .ab-round svg,
.ab-header.ab-nue .ab-round path { stroke: var(--deca-text); }
.ab-header.ab-nue .ab-round:hover { background: var(--deca-primary-soft); }

/* ⛔ Le « + » flottant n'a rien à faire sur l'accueil (Elia, 27/08).
   `.deca-add-fab` est posé par bottom-nav.js : c'est le bouton « ajouter » de
   l'interface d'app, qui n'a de sens que là où l'on contribue. Sur une page
   qui explique, il propose d'agir avant même d'avoir été compris. */
body.lp-page .deca-add-fab,
body.lp-page .deca-fab-actions,
body.lp-page .deca-fab-overlay { display: none !important; }