/* ============================================================
   Wingtip — landing getwingtip.com (6 août 2026, renommée le 30 août)
   Structure inspirée d'une maquette ChatGPT fournie par l'auteur,
   contenu réaligné sur le produit réel (voir SKYDEX.md / CLAUDE.md) :
   pas de « Pokédex » (marque Nintendo + le vocabulaire du projet est
   « Hangar »), pas de badges stores avant la publication, pas de
   promesse de synchronisation (le produit est local d'abord — c'est
   un argument, pas un manque), cartes = vrais rendus du moteur de
   l'app avec photos Wikimedia Commons créditées.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #070c14; color: #fff; font-family: 'Barlow', sans-serif; }
img { max-width: 100%; }

/* ---- entête ---- */
.lp-head { position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
  gap: 26px; padding: 14px clamp(16px, 4vw, 44px);
  background: rgba(7,12,20,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.07); }
.lp-logo { flex: 0 0 auto; display: flex; }
.lp-head nav { flex: 1; display: flex; gap: 22px; }
.lp-head nav a { color: #9db0c6; text-decoration: none; font-size: .88rem; }
.lp-head nav a:hover { color: #fff; }
.lp-cta { display: inline-block; background: #2f7bf0; color: #fff; text-decoration: none;
  font-family: 'Barlow Condensed'; font-weight: 700; font-size: 1.05rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 13px 28px; border-radius: 999px; }
.lp-cta:hover { background: #3d8bfd; }
.lp-cta.small { font-size: .9rem; padding: 9px 20px; }

/* ---- héros ---- */
.lp-hero { position: relative; min-height: min(88vh, 860px); display: flex; align-items: center;
  overflow: hidden; }
.lp-hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.lp-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 140px;
  background: linear-gradient(180deg, transparent, #070c14); }
.lp-hero-inner { max-width: 1160px; width: 100%; margin: 0 auto;
  padding: clamp(40px, 7vh, 90px) clamp(16px, 4vw, 44px);
  display: flex; align-items: center; gap: clamp(20px, 4vw, 56px); }
.lp-hero-copy { flex: 1 1 46%; min-width: 0; }
/* mockup fourni par l'auteur (fond transparent, ombres cuites) : il flotte
   sur le ciel du héros, légèrement plus grand que sa colonne pour respirer */
.lp-hero-phones { flex: 0 1 auto; min-width: 0; width: auto; height: auto;
  max-width: min(48%, 560px); max-height: min(74vh, 700px);
  align-self: center;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
/* height:auto est indispensable : sans lui, l'attribut height="1518" du HTML
   fixe la boîte et les téléphones flottent dans un vide letterboxé */
.lp-hero .badge { display: block; margin-bottom: 18px; }
.lp-hero h1 { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800;
  font-size: clamp(3rem, 8vw, 5.2rem); line-height: .95; text-transform: uppercase;
  letter-spacing: .01em; text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.lp-hero .lead { max-width: 430px; margin-top: 20px; font-size: 1.02rem; line-height: 1.6;
  color: #c6d3e4; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.lp-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.lp-ctas.center { justify-content: center; }
.lp-soon { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #8fa1b8;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 11px 18px; }
/* Variante secondaire du CTA, nee le 14 septembre 2026 quand la 1.0 est passee
   sur l'App Store : le bouton bleu revient au telechargement, et l'essai
   navigateur descend d'un cran sans disparaitre. Reprend volontairement le
   dessin de .lp-soon (la pastille bordee) pour ne rien inventer de neuf. */
.lp-cta.ghost { background: transparent; color: #cdd9e8;
  border: 1px solid rgba(255,255,255,.22); }
.lp-cta.ghost:hover { background: rgba(255,255,255,.07); color: #fff; }

/* Badge officiel App Store, telecharge le 14 septembre 2026 depuis le Marketing
   Toolbox d'Apple (variante BLANCHE : le heros est bleu nuit, le badge noir y
   passait mal). C'est une oeuvre sous marque deposee : Apple impose de ne pas
   la redessiner, de ne pas la recolorer, de garder ses proportions, une hauteur
   d'au moins 40 px et une zone de respiration d'un quart de sa hauteur autour.
   ⛔ NE PAS toucher au SVG ni forcer une couleur dessus. Pour changer d'aspect,
   retelecharger l'autre variante, ne pas bricoler celle-ci. */
/* Badge officiel Google Play, ajoute le 25 octobre 2026, le jour ou l'app est
   devenue publique sur le Play Store. Meme regime que celui d'Apple : oeuvre
   sous marque deposee, ni redessin, ni recoloration, ni deformation.
   Il partage volontairement la regle .lp-badge ci-dessous : les deux badges
   doivent faire la MEME hauteur rendue, sinon le magasin le plus petit passe
   pour le secondaire.

   /!\ LES DEUX PNG PUBLIES SONT RECADRES, et ce n'est pas une coquetterie.
   Google sert ses badges dans un cadre de 646x250 qu'il ne remplit PAS pareil
   selon la langue : le dessin francais occupe 73,6 % de la hauteur du cadre,
   l'anglais 64,0 %. A hauteur CSS egale, le francais sortait donc ~15 % plus
   gros que l'anglais -- l'asymetrie FR/EN exacte que GRD-01 traque ailleurs.
   Et face au badge Apple, dont le dessin remplit son SVG, les deux paraissaient
   plus petits, alors que Google demande l'inverse.
   Seule la marge TRANSPARENTE a ete retiree : aucun pixel du dessin n'est
   touche et les proportions sont inchangees (data/recadrer-badges-google.py,
   idempotent, qui refuse d'ecrire si le ratio derive).
   /!\ LA ZONE DE RESPIRATION DE GOOGLE EST DONC PORTEE PAR LE CSS, plus par le
   fichier : c'est le `gap: 16px` de .lp-ctas, soit 33 % de la hauteur rendue,
   au-dessus du quart exige. Ne pas supprimer ce gap en croyant resserrer.
   /!\ NE PAS republier les originaux de assets/landing-page/badges-google/ tels
   quels : ils reintroduiraient l'ecart FR/EN que le recadrage vient de fermer. */
.lp-badge { display: inline-flex; align-items: center; line-height: 0;
  border-radius: 8px; }
.lp-badge img { height: 48px; width: auto; display: block; }
.lp-badge:focus-visible { outline: 2px solid #2f7bf0; outline-offset: 4px; }

/* ---- sections ---- */
.lp-section { padding: clamp(56px, 9vw, 100px) clamp(16px, 4vw, 44px); max-width: 1160px; margin: 0 auto; }
.lp-section.alt { max-width: none; background: #0a111d; }
.lp-section.alt > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.lp-section h2 { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.4rem); text-transform: uppercase; text-align: center;
  letter-spacing: .02em; }
.lp-sub { text-align: center; color: #9db0c6; max-width: 560px; margin: 12px auto 0;
  line-height: 1.55; font-size: .95rem; }

/* ---- étapes ---- */
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px; margin-top: 44px; }
.step { text-align: center; padding: 26px 18px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; background: rgba(255,255,255,.02); }
.step .ic { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: #14273f; display: flex; align-items: center; justify-content: center; }
.step .ic svg { width: 24px; height: 24px; stroke: #7fa8dd; fill: none; stroke-width: 1.7; }
.step h3 { font-family: 'Barlow Condensed'; font-weight: 700; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: .05em; color: #3d8bfd; }
.step p { margin-top: 8px; font-size: .88rem; line-height: 1.55; color: #b7c5d8; }

/* ---- cartes : IMAGES rendues par le moteur de l'app ----
   Générées par cartes/generer-cartes-landing.sh (Chrome headless, fond
   transparent, 2x). On préfère l'image au rendu HTML ici : la landing n'a
   plus à embarquer une copie du design-system de l'app, qui divergeait à
   chaque évolution de la carte. Contrepartie : régénérer les 4 images dès
   qu'une donnée ou le design change — c'est le rôle du script. */
.lp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 30px 22px; margin-top: 46px; align-items: start; }
.lp-cardshot { text-align: center; }
.lp-cardshot img { width: 100%; max-width: 270px; height: auto;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.5)); transition: transform .3s ease; }
.lp-cardshot:hover img { transform: translateY(-6px); }
.lp-cardshot figcaption { margin-top: 12px; font-family: 'Barlow Condensed'; font-weight: 700;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #8fa1b8; }
/* les 4 raretés en éventail léger, comme la maquette : inclinaisons opposées
   de part et d'autre du centre. Neutralisé sous 700 px (empilement). */
@media (min-width: 940px) {
  .lp-cardshot:nth-child(1) img { transform: rotate(-3deg); }
  .lp-cardshot:nth-child(2) img { transform: rotate(-1deg); }
  .lp-cardshot:nth-child(3) img { transform: rotate(1deg); }
  .lp-cardshot:nth-child(4) img { transform: rotate(3deg); }
  .lp-cardshot:hover img { transform: translateY(-8px) rotate(0deg); }
}

/* ---- rangs ----
   ⚠️ 11 août 2026, demande de l'auteur : SIX PAR LIGNE, donc 6 / 6 / 3 pour les
   quinze rangs, et 3 par ligne en mobile (5 lignes pleines).
   L'ancienne règle `grid-template-columns: repeat(auto-fit, minmax(88px, 1fr))`
   laissait le NAVIGATEUR choisir le nombre de colonnes selon la largeur
   disponible : les quinze rangs tombaient sur deux lignes inégales, et le
   découpage changeait tout seul d'un palier de largeur à l'autre. La
   disposition est désormais décidée ici, pas déduite de la place restante.
   ⚠️ FLEXBOX ET NON GRID, et c'est le point à ne pas « simplifier » : sur une
   grille de 6 colonnes, la dernière ligne de 3 se collerait à GAUCHE en
   laissant un vide à droite, alors que toute la section est centrée (le h2 et
   le sous-titre le sont). Centrer une ligne incomplète en grid obligerait à
   passer en 12 colonnes de demi-largeur et à décaler les trois derniers
   éléments à la main — donc à réécrire le décalage à chaque changement du
   nombre de rangs. `flex-wrap` + `justify-content: center` le fait tout seul,
   et une 16e ligne future se centrerait sans rien toucher. */
.lp-ranks { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px 8px; margin-top: 44px; }
/* Largeur explicite plutôt que `flex: 1` : un flex-grow répartirait la place
   restante sur les 3 badges de la dernière ligne, qui deviendraient deux fois
   plus larges que ceux du dessus. Le gap est retiré du calcul (5 gouttières
   pour 6 colonnes) ; `box-sizing: border-box` est déjà global. */
.lp-ranks figure { flex: 0 0 auto; width: calc((100% - 5 * 8px) / 6);
  text-align: center; }
.lp-ranks img { width: 76px; height: 76px; object-fit: contain; }
.lp-ranks figcaption { margin-top: 6px; font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: #8fa1b8; }

/* ---- réassurance ---- */
.lp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.tile { border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 22px 20px;
  background: rgba(255,255,255,.02); }
.tile h3 { font-family: 'Barlow Condensed'; font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .05em; color: #37d67a; }
.tile p { margin-top: 7px; font-size: .86rem; line-height: 1.5; color: #b7c5d8; }

/* ---- CTA final ---- */
.lp-final { position: relative; overflow: hidden; padding: clamp(70px, 12vw, 130px) 20px;
  text-align: center; }
.lp-final .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -1; opacity: .9; }
.lp-final h2 { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.8rem); text-transform: uppercase; margin-bottom: 24px;
  text-shadow: 0 2px 18px rgba(0,0,0,.7); }

/* ---- pied de page ---- */
.lp-foot { border-top: 1px solid rgba(255,255,255,.07); padding: 40px clamp(16px, 4vw, 44px) 30px;
  max-width: 1160px; margin: 0 auto; }
.lp-foot .cols { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lp-foot .cols p { margin-top: 8px; font-size: .78rem; color: #6b7a90; letter-spacing: .08em;
  text-transform: uppercase; }
.lp-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.lp-foot nav a { color: #9db0c6; text-decoration: none; font-size: .85rem; }
.lp-foot nav a:hover { color: #fff; }
.lp-foot .fine { margin-top: 22px; font-size: .72rem; color: #56637a; line-height: 1.6; }

/* ---- pages annexes (confidentialité, mentions, support) ---- */
.lp-doc { max-width: 760px; margin: 0 auto; padding: 48px clamp(16px, 4vw, 44px) 80px; }
.lp-doc h1 { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800;
  font-size: 2rem; text-transform: uppercase; margin-bottom: 6px; }
.lp-doc .maj { color: #6b7a90; font-size: .8rem; margin-bottom: 30px; }
.lp-doc h2 { font-family: 'Barlow Condensed'; font-weight: 700; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: .04em; color: #3d8bfd; margin: 30px 0 10px; }
.lp-doc p, .lp-doc li { font-size: .94rem; line-height: 1.7; color: #c6d3e4; }
.lp-doc ul { padding-left: 22px; margin: 8px 0; }
.lp-doc a { color: #7fa8dd; }
.lp-doc .todo { background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.35);
  border-radius: 10px; padding: 10px 14px; color: #fbbf24; font-size: .86rem; }

@media (max-width: 700px) {
  .lp-head nav { display: none; }
  .lp-hero h1 { font-size: 3.2rem; }
  /* héros empilé : le texte d'abord, les téléphones dessous.
     max-height: none — sinon object-fit:contain letterbox l'image
     et crée un vide au-dessus/en dessous des téléphones */
  .lp-hero-inner { flex-direction: column; align-items: flex-start; }
  /* en colonne, les flex-basis en % s'appliquent à la HAUTEUR : les
     neutraliser, sinon le bloc texte s'étire à vide sous les CTA */
  .lp-hero-copy { flex: 0 0 auto; }
  .lp-hero-phones { flex: 0 0 auto; align-self: center;
    max-width: min(86vw, 420px); max-height: none; margin-top: 8px; }
  /* ⚠️ Rangs : 3 par ligne en mobile (demande de l'auteur, 11 août 2026), donc
     CINQ lignes pleines pour quinze rangs — aucune ligne incomplète, le
     centrage hérité ne se voit pas mais reste juste si un rang s'ajoute.
     2 gouttières pour 3 colonnes. */
  .lp-ranks figure { width: calc((100% - 2 * 8px) / 3); }
}

/* ---- sélecteur de langue ----
   Pages DISTINCTES par langue (/ et /en/), pas d'échange de textes en JS :
   la landing sert à faire du trafic, or les moteurs indexent mieux deux URL
   réelles liées par hreflang qu'un contenu réécrit après chargement — et ça
   évite le clignotement français→anglais à l'affichage.
   ⚠️ Aucune redirection automatique sur la langue du navigateur : elle piège
   l'utilisateur dans la mauvaise langue et brouille l'indexation. Le choix
   reste visible et explicite. */
.lp-lang { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 2px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .82rem;
  letter-spacing: .08em; }
.lp-lang a, .lp-lang span { padding: 5px 9px; border-radius: 8px; text-decoration: none;
  color: #6b7a90; line-height: 1; }
.lp-lang a:hover { color: #fff; background: rgba(255,255,255,.07); }
.lp-lang [aria-current="true"] { color: #fff; background: rgba(255,255,255,.10); }
/* ⚠️ Le sélecteur resserre l'en-tête : sans nowrap, « Try it » se coupait en
   deux lignes à 375 px alors que le « Essayer » français, en un seul mot,
   passait. Un libellé plus long dans une autre langue ne doit pas casser la
   barre — c'est le genre de défaut qu'on ne voit que sur la version traduite. */
.lp-cta { white-space: nowrap; }
@media (max-width: 700px) {
  .lp-head { gap: 12px; }
  .lp-lang a, .lp-lang span { padding: 5px 7px; }
}

/* ---- bandeau de consentement (25 octobre 2026) ----
   Pose en meme temps que le pixel Meta. Le pixel ne part qu'apres un clic
   sur « Accepter » — voir consent.js, qui porte le raisonnement.
   /!\ Le bandeau est en position: fixed EN BAS et non en plein ecran : il ne
   doit pas masquer le contenu ni bloquer la lecture, c'est une landing, pas
   un mur. Sur mobile il passe en colonne pour que les deux boutons gardent
   une cible confortable.
   /!\ Ne pas lui donner un z-index inferieur a celui de l'en-tete : il doit
   rester atteignable quand la page defile. */
.lp-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  background: #070b12; border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 -8px 30px rgba(0,0,0,.45); }
.lp-consent p { margin: 0; flex: 1 1 320px; min-width: 0;
  font-size: .88rem; line-height: 1.5; color: #c6d3e4; }
.lp-consent a { color: #8fb6ff; }
.lp-consent-bts { display: flex; gap: 10px; flex: 0 0 auto; }
.lp-consent button { font: inherit; font-size: .85rem; font-weight: 600;
  padding: 9px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.lp-consent-non { background: transparent; color: #cdd9e8;
  border: 1px solid rgba(255,255,255,.22); }
.lp-consent-non:hover { background: rgba(255,255,255,.07); color: #fff; }
.lp-consent-oui { background: #2f7bf0; color: #fff; border: 1px solid #2f7bf0; }
.lp-consent-oui:hover { background: #3d8bfd; }
@media (max-width: 560px) {
  .lp-consent { flex-direction: column; align-items: stretch; gap: 12px; }
  .lp-consent-bts { justify-content: flex-end; }
}