/* ============================================================
   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. */
.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; }
}