/* ============================================================
   Landing publique — HydroBassin Tunisie
   ------------------------------------------------------------
   HÉRITE des variables de `style.css` (navy, cyan, rayons,
   thème clair/sombre). Aucune couleur n'est redéfinie ici : une
   palette dupliquée diverge au premier ajustement, et la page
   doit rester visiblement le même produit que l'application.
   ============================================================ */

/* `style.css` verrouille le défilement — `html, body { height:100%; overflow:hidden }` —
   pour la mise en page plein écran de l'application, qui ne défile jamais. La
   landing est au contraire un document long : on lui rend le défilement ICI.
   La règle porte sur les marqueurs de la landing, jamais sur `style.css`, que
   l'application partage : sans cela, tout ce qui suit le Hero serait
   inatteignable. */
.lp-html, .lp-body {
  height: auto;
  overflow: visible;
}
.lp-html { scroll-behavior: smooth; }
/* L'en-tête est `sticky` : sans marge, une ancre atterrirait DERRIÈRE lui. */
.lp-section, .lp-hero { scroll-margin-top: 78px; }

.lp-body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 680px at 78% -12%, rgba(51, 199, 230, 0.10), transparent 62%),
    radial-gradient(900px 560px at 8% 4%, rgba(47, 122, 240, 0.10), transparent 60%),
    linear-gradient(168deg, var(--bg-deep) 0%, var(--bg-deep-2) 55%, var(--bg-deep-3) 100%);
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ En-tête */
.lp-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--panel-border);
  background: var(--sidebar-bg);
  /* Flou volontairement franc : `--sidebar-bg` est translucide, et à 10 px le
     contenu qui défile dessous restait lisible à travers l'en-tête. On garde la
     couleur du produit et on épaissit le voile plutôt que d'inventer un ton. */
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  position: sticky;
  top: 0;
  z-index: 20;
}
.lp-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.lp-logo {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  color: #fff;
  background: linear-gradient(150deg, var(--cyan), var(--blue2));
}
.lp-brand-text { font-size: 16px; font-weight: 800; color: var(--text-2); letter-spacing: -0.2px; }
.lp-brand-accent { color: var(--cyan); }
.lp-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(51, 199, 230, 0.38);
  background: rgba(51, 199, 230, 0.10);
  color: var(--cyan);
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.7px;
  vertical-align: 2px;
}

.lp-nav { display: flex; gap: 24px; margin-left: auto; }
.lp-nav a {
  font-size: 13.5px; font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.lp-nav a:hover { color: var(--text-2); }

.lp-header-actions { display: flex; align-items: center; gap: 14px; }
.lp-link-login {
  font-size: 13.5px; font-weight: 600;
  color: var(--text-2); text-decoration: none;
}
.lp-link-login:hover { color: var(--cyan); }

.lp-cta {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, var(--blue), var(--blue2));
  color: #fff;
  font-size: 13.5px; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 5px 18px rgba(47, 122, 240, 0.24);
}
.lp-cta:hover { filter: brightness(1.08); }
.lp-cta-lg { padding: 13px 26px; font-size: 15px; }

/* Variante CYAN de l'appel à l'action principal (en-tête et hero).
   ---------------------------------------------------------------
   MODIFICATEUR, et non redéfinition de `.lp-cta` : la même classe habille
   aussi l'appel à l'action de la section bêta, plus bas dans la page, qui
   n'est pas encore repris. Toucher la base ferait basculer une section hors
   périmètre. Les deux teintes existent déjà dans `style.css` — aucune couleur
   n'est inventée ici.
   Texte sombre plutôt que blanc : sur un aplat cyan clair, du blanc tombe
   sous le seuil de contraste, alors que le navy du fond le porte largement
   au-dessus. */
.lp-cta-cyan {
  background: linear-gradient(150deg, var(--cyan), var(--teal));
  color: var(--bg-deep-3);
  /* Ombre nettement plus discrète que la variante bleue : la maquette demande
     des bordures fines et peu de halo. */
  box-shadow: 0 2px 10px rgba(51, 199, 230, 0.18);
}
.lp-cta-cyan:hover { filter: brightness(1.06); }

/* Appel à l'action SECONDAIRE : aucun aplat, un filet et rien d'autre. Il doit
   se lire comme une porte de sortie, jamais concurrencer le principal — tout
   en gardant la même hauteur et la même zone cliquable, pour que la paire
   s'aligne et reste confortable au doigt. */
.lp-cta-ghost {
  display: inline-block;
  padding: 12px 19px;
  border: 1px solid var(--panel-border-m);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lp-cta-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* Menu compact — masqué au-dessus de 900 px. */
.lp-burger {
  display: none;
  padding: 7px;
  border: 1px solid var(--panel-border-m);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-2);
  cursor: pointer;
}
.lp-nav-mobile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 20px 18px;
  border-bottom: 1px solid var(--panel-border);
  background: var(--sidebar-bg);
}
.lp-nav-mobile[hidden] { display: none; }
.lp-nav-mobile a {
  padding: 9px 2px;
  font-size: 14px; font-weight: 600;
  color: var(--text-muted); text-decoration: none;
}
.lp-nav-mobile .lp-cta { margin-top: 8px; text-align: center; color: #fff; }
/* Le sélecteur ci-dessus est plus spécifique que `.lp-cta-cyan` et lui
   imposerait du blanc sur un aplat cyan clair — contraste insuffisant. On
   restitue donc le texte sombre au même niveau de spécificité. */
.lp-nav-mobile .lp-cta-cyan { color: var(--bg-deep-3); }

/* --------------------------------------------------------------------- Hero */
/* La visualisation du bassin DOMINE : c'est elle qui montre le produit, le
   texte ne fait que la nommer.
   Le cadre s'élargit et l'écart se resserre pour donner ~5 % de présence
   supplémentaire à la capture (719 → 758 px mesurés en 1440) SANS étrangler le
   titre : la colonne de texte y gagne au contraire, ce qui est exactement ce
   qu'il faut pour poser les deux appels à l'action sur une seule ligne. */
.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.79fr) minmax(0, 1.21fr);
  align-items: center;
  gap: 44px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 76px 32px 64px;
}
.lp-h1 {
  margin: 0 0 20px;
  font-size: clamp(30px, 3.5vw, 45px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -1px;
  color: var(--text-2);
  /* Sans cela, « Analysez un bassin / versant » laisse un mot orphelin sur sa
     ligne. `balance` répartit les lignes du titre ; les navigateurs qui ne le
     connaissent pas retombent simplement sur le retour à la ligne habituel. */
  text-wrap: balance;
}
.lp-h1-accent { color: var(--cyan); display: block; }
.lp-lead {
  margin: 0 0 30px;
  max-width: 54ch;
  font-size: 15.5px;
  color: var(--text-muted);
}
.lp-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* Portée au HERO seulement : la section bêta, plus bas, réutilise
   `.lp-hero-actions` et `.lp-cta-lg`, et n'est pas dans ce lot. */
.lp-hero .lp-hero-actions { align-items: center; gap: 12px; }
/* Les deux appels à l'action tiennent sur UNE ligne en desktop. On y arrive par
   la largeur de colonne gagnée ci-dessus plus quelques pixels de rembourrage
   en moins — jamais par `nowrap`, qui les ferait déborder au lieu de les
   replier dès que la fenêtre se resserre. Le repli reste donc la règle sous
   1360 px, et il est voulu. */
.lp-hero .lp-cta-lg { padding: 13px 22px; }

/* Condition d'accès, annoncée sous les boutons plutôt que dans le bouton :
   elle qualifie la demande sans alourdir l'appel à l'action. */
.lp-hero-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* Les quatre capacités : des filets, pas des pastilles pleines. Une liste,
   parce que c'en est une — la puce est retirée visuellement, l'énumération
   reste pour les lecteurs d'écran. */
.lp-capacites {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.lp-capacites li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 11px;
  /* Filet un cran plus lisible que `--panel-border`, sans passer à un cadre
     appuyé : les pastilles doivent se détacher du navy, pas s'imposer devant
     les appels à l'action juste au-dessus. */
  border: 1px solid var(--panel-border-m);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}
/* L'icône seule prend le cyan : la pastille reste sobre, l'accent ne porte que
   sur un glyphe de 14 px. Aucun halo — la couleur suffit à marquer le rythme. */
.lp-capacites svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--cyan);
}

/* ------------------------------------------------- Capture et voiles */
/* La capture reste NETTE : aucun `filter: blur()` global. Deux voiles
   diagonaux, posés en pseudo-éléments, estompent les bords — donc les
   panneaux latéraux et leurs valeurs — en laissant la zone centrale, où se
   trouve le bassin, nettement plus lisible. Le dégradé travaille sur du navy
   translucide, jamais sur du noir : la teinte de l'interface est préservée. */
.lp-shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid var(--panel-border-m);
  overflow: hidden;
  /* Halo nettement réduit : la maquette pose le cadre sur un filet fin, pas
     sur une ombre portée qui le décolle du fond. Assez d'ombre pour détacher
     la capture du navy, pas assez pour qu'elle flotte. */
  box-shadow: 0 10px 30px rgba(3, 10, 20, 0.34);
  isolation: isolate;
}
.lp-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Voile venu de la GAUCHE : masque le panneau de délimitation. */
.lp-shot::before,
.lp-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* Voiles ALLÉGÉS : à 0,94 d'opacité au bord, les panneaux latéraux étaient
   noyés et la capture entière se lisait comme une interface désactivée. On
   garde le principe — estomper les bords pour que l'œil aille au bassin — mais
   à une intensité qui laisse les panneaux lisibles. La fonte est aussi plus
   courte (36 % au lieu de 42 %), donc la zone pleinement nette s'élargit. */
.lp-shot::before {
  background: linear-gradient(
    108deg,
    rgba(7, 17, 30, 0.62) 0%,
    rgba(7, 17, 30, 0.38) 12%,
    rgba(9, 20, 34, 0.12) 24%,
    rgba(9, 20, 34, 0.00) 36%
  );
}
/* Voile venu de la DROITE : masque le panneau de résultats. Angle
   volontairement différent (les deux ne sont pas symétriques), pour que
   l'ensemble lise comme un éclairage et non comme deux bandes posées. */
.lp-shot::after {
  background: linear-gradient(
    256deg,
    rgba(7, 17, 30, 0.60) 0%,
    rgba(7, 17, 30, 0.36) 14%,
    rgba(10, 22, 37, 0.11) 27%,
    rgba(10, 22, 37, 0.00) 39%
  );
}

.lp-shot-caption {
  position: relative;
  z-index: 2;
  padding: 9px 14px;
  border-top: 1px solid var(--panel-border);
  background: var(--card-bg);
  font-size: 11.5px;
  color: var(--text-dim);
}

/* Filet si la capture venait à manquer (asset renommé, déploiement partiel) :
   le cadre reste dessiné et teinté, on ne montre jamais une image cassée. */
.lp-shot img[src$="hydrobassin-siliana.webp"] { background: var(--card-bg); min-height: 220px; }

/* ----------------------------------------------------------------- Sections */
.lp-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 62px 32px;
  border-top: 1px solid var(--panel-border);
}
.lp-h2 {
  margin: 0 0 8px;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-2);
}
.lp-section-lead {
  margin: 0 0 30px;
  max-width: 66ch;
  font-size: 14.5px;
  color: var(--text-muted);
}
.lp-section-lead strong { color: var(--text-2); font-weight: 700; }

.lp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.lp-card {
  padding: 20px 21px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.lp-card-title { margin: 0 0 7px; font-size: 15px; font-weight: 700; color: var(--text-2); }
.lp-card-text { margin: 0; font-size: 13.5px; color: var(--text-muted); }

/* --------------------------------------------- Fonctionnalités : grille 3 × 2 */
/* Colonnes EXPLICITES, pas d'`auto-fit` : avec `minmax(272px, 1fr)` sur 1116 px
   utiles, la grille tiendrait quatre colonnes et casserait le 3 × 2 demandé —
   les six cartes se répartiraient 4 + 2. On déclare donc les paliers à la main,
   sur les points de rupture déjà utilisés par la page. */
.lp-cards-features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.lp-cards-features .lp-card {
  /* Filet CYAN, très fin. Deux déclarations : la première sert de repli aux
     navigateurs sans `color-mix`, la seconde dérive la teinte du jeton produit
     plutôt que de recopier `#33c7e6` — une couleur dupliquée diverge au premier
     ajustement. */
  border-color: var(--panel-border-m);
  border-color: color-mix(in srgb, var(--cyan) 20%, transparent);
  /* Hauteur MAÎTRISÉE : la grille étire déjà les six cartes à la hauteur de la
     plus haute de leur ligne, ce qui suffit à les faire toutes identiques.
     La description reste COLLÉE à son titre : la pousser en bas alignerait les
     dernières lignes entre elles, mais ouvrirait un trou sous les titres des
     cartes à description courte — au prix, précisément, de l'alignement qu'on
     cherchait. Icône, titre et texte forment un bloc ; le vide se met en bas.
     Rembourrage BAS seul réduit (21 → 14) : l'icône passée à 26 px et l'écart
     élargi avaient ajouté 7 px de hauteur, repris ici sans toucher au haut ni
     aux côtés. On retire du vide sous le texte, on ne densifie rien. */
  padding: 20px 20px 14px;
}

/* Icône VISIBLE mais secondaire : elle précède le titre, dans une taille qui
   la laisse lisible sans lui disputer la hiérarchie. Aucun aplat, aucun halo —
   le trait cyan suffit, comme dans les capacités du hero. */
.lp-card-icon {
  display: block;
  margin: 0 0 16px;
  color: var(--cyan);
}
.lp-card-icon svg { display: block; width: 26px; height: 26px; }

/* Descriptions un cran plus claires, sans se rapprocher du blanc des titres :
   le contraste entre les deux niveaux doit rester lisible d'un coup d'œil.
   Le mélange se fait ENTRE deux jetons existants plutôt qu'avec une valeur
   inventée, et `--text-muted` sert de repli là où `color-mix` manque. Portée
   aux seules cartes de cette section : `.lp-card-text` habille aussi d'autres
   sections de la page, qui ne sont pas dans ce lot. */
.lp-cards-features .lp-card-text {
  color: var(--text-muted);
  color: color-mix(in srgb, var(--text-muted) 74%, var(--text));
}

/* ------------------------------------------- HydroBassin en action (démo) */
/* La capture est l'ÉLÉMENT PRINCIPAL de la section : elle occupe toute la
   largeur utile, et rien ne lui dispute l'attention. Filet fin comme celui du
   hero, halo à peine marqué — aucun voile, contrairement au hero : ici on veut
   lire les résultats, pas suggérer une ambiance. */
.lp-demo {
  margin: 26px 0 0;
  border: 1px solid var(--panel-border-m);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 8px 26px rgba(3, 10, 20, 0.30);
}
.lp-demo img { display: block; width: 100%; height: auto; }

/* Les trois étapes SUIVENT la capture et ne la concurrencent pas : pas de
   cadre, pas de fond, un simple filet supérieur qui marque la colonne. Classes
   propres à cette section : chaque section de la page a les siennes, pour
   qu'aucune règle partagée n'en déplace une autre. */
.lp-flux {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.lp-flux-etape { padding-top: 15px; border-top: 1px solid var(--panel-border-m); }
.lp-flux-num {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--cyan);
}
.lp-flux-titre { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--text-2); }
.lp-flux-texte {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  color: color-mix(in srgb, var(--text-muted) 74%, var(--text));
}

.lp-demo-note { margin: 26px 0 0; font-size: 12.5px; color: var(--text-dim); }

/* ------------------------------------------- Données & méthodologie */
/* Composition DOCUMENTAIRE, délibérément distincte des Fonctionnalités : pas de
   cadre, pas d'aplat, un simple filet supérieur. Deux grilles de cartes encadrées
   à quelques écrans d'intervalle se seraient répondues et auraient dilué les
   deux. L'icône passe ici EN LIGNE avec le titre — plus compact qu'au-dessus,
   et c'est ce décalage de composition qui signale « autre nature de contenu ». */
.lp-donnees {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 44px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.lp-donnee { padding-top: 15px; border-top: 1px solid var(--panel-border-m); }
.lp-donnee-titre {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 7px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-2);
}
.lp-donnee-titre svg { width: 18px; height: 18px; flex: none; color: var(--cyan); }
.lp-donnee-texte {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  color: color-mix(in srgb, var(--text-muted) 74%, var(--text));
}
/* -------------------------------------------------------------- Cas d'usage */
/* Trois colonnes séparées par un filet VERTICAL — la seule section de la page à
   le faire. Fonctionnalités a des cartes encadrées, Données des filets
   supérieurs, En action un numéro reporté à gauche : chacune sa composition,
   sinon la page se lit comme une même grille répétée quatre fois.
   Beaucoup d'air : l'écart de colonne est le plus large de la page, et le filet
   ne rejoint jamais les bords — il sépare, il n'encadre pas. */
.lp-usages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.lp-usage { padding: 4px 40px; }
.lp-usage:first-child { padding-left: 0; }
.lp-usage:last-child { padding-right: 0; }

/* Numéros, titres et textes alignés d'une colonne à l'autre. Sans cela, un
   titre qui passe à deux lignes — « Aménagement & diagnostic territorial » dès
   820 px — décale le paragraphe qui le suit, et les trois colonnes cessent de
   se répondre. `subgrid` fait porter les rangées de la grille parente à chaque
   colonne ; là où il manque, la mise en page retombe simplement sur le flux
   normal, sans rien casser. */
@supports (grid-template-rows: subgrid) {
  .lp-usages { grid-template-rows: auto auto auto; }
  .lp-usage {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}
/* Le filet porte sur les colonnes 2 et 3 : trois colonnes n'ont que deux
   séparations, et en poser une à gauche de la première l'aurait encadrée. */
.lp-usage + .lp-usage { border-left: 1px solid var(--panel-border); }

/* Numéro DISCRET : présent pour le rythme, jamais pour le poids. Il reste plus
   petit que le titre qu'il annonce. */
.lp-usage-num {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--cyan);
}
.lp-usage-titre {
  margin: 0 0 9px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text-2);
}
.lp-usage-texte {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  color: color-mix(in srgb, var(--text-muted) 74%, var(--text));
}

/* -------------------------------------------------------------- À propos */
/* De la PROSE, et rien d'autre : ni grille, ni numéro, ni pictogramme. Après le
   bloc fermé de l'accès, cette section respire — c'est sa fonction autant que
   son contenu. D'où l'absence de tout ornement : le seul réglage qui compte
   ici est la longueur de ligne.
   Alignée à gauche et non centrée : au-delà de deux lignes, un texte centré
   oblige l'œil à retrouver un début de ligne mobile à chaque retour. */
.lp-propos {
  /* 60ch et non 68 : `ch` vaut la largeur du « 0 », plus étroit que la moyenne
     réelle des caractères. À 68ch, la mesure donnait ~78 caractères par ligne —
     au-delà de la plage où l'œil retrouve sans effort le début de la suivante. */
  max-width: 60ch;
  margin: 0;
}
.lp-propos-texte {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.68;
  color: var(--text);
}
/* Un cran en retrait : ce paragraphe situe l'état du projet, il ne le définit
   pas. La hiérarchie passe par la taille et la couleur, jamais par un cadre. */
.lp-propos-secondaire {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  color: color-mix(in srgb, var(--text-muted) 74%, var(--text));
}

/* ------------------------------------------------------------ Accès bêta */
/* CONCLUSION du parcours. Seule composition FERMÉE de la page : les quatre
   sections précédentes sont ouvertes — cartes posées sur le fond, filets,
   colonnes. Un bloc encadré et centré marque l'arrivée sans qu'un mot ait à le
   dire, et son fond légèrement distinct suffit à l'isoler. Halo volontairement
   faible : c'est l'appel à l'action, et lui seul, qui doit accrocher. */
.lp-section-beta { border-top: 1px solid var(--panel-border); }
.lp-acces {
  /* 940 et non 780 : à 780, les trois étapes tombaient à 214 px — plus étroites
     en desktop qu'en tablette, ce qui n'a aucun sens. Le bloc reste nettement
     plus resserré que la section (1 180 px), donc toujours lu comme un bloc. */
  max-width: 940px;
  margin: 8px auto 0;
  padding: 44px 40px 40px;
  border: 1px solid var(--panel-border-m);
  border-radius: var(--radius);
  background: var(--card-bg);
  text-align: center;
}
.lp-acces-h2 { margin-bottom: 12px; }
.lp-acces-intro {
  max-width: 56ch;
  margin: 0 auto;
  font-size: 14.5px;
  color: var(--text-muted);
  color: color-mix(in srgb, var(--text-muted) 74%, var(--text));
}

/* Trois étapes sur une ligne, séparées par rien : l'espace suffit. Ajouter un
   filet ici rappellerait les Cas d'usage, dont c'est la signature. */
.lp-acces-etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.lp-acces-num {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--cyan);
}
.lp-acces-titre { margin: 0 0 5px; font-size: 14.5px; font-weight: 700; color: var(--text-2); }
.lp-acces-texte {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  color: color-mix(in srgb, var(--text-muted) 74%, var(--text));
}

/* Taille de l'appel à l'action portée à CETTE section : `.lp-cta-lg` habille le
   hero, figé, et n'a rien à faire ici. `.lp-cta-cyan` reste un modificateur —
   on ne touche jamais `.lp-cta`, que le hero et l'en-tête partagent. */
#acces .lp-cta {
  margin-top: 34px;
  padding: 14px 30px;
  font-size: 15px;
}
.lp-acces-mention { margin: 14px 0 0; font-size: 12.5px; color: var(--text-dim); }

/* -------------------------------------------------------------- Contact */
.lp-section-contact { padding-bottom: 54px; }
/* Section COURTE : du texte, un bouton, l'adresse. Ni carte, ni grille, ni
   halo — après « À propos » la page finit, elle ne relance pas.
   Largeur de lecture bornée comme « À propos », pour que les deux dernières
   sections se répondent au lieu de changer de rythme au dernier moment. */
.lp-contact { max-width: 60ch; }
.lp-contact-texte {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
  color: color-mix(in srgb, var(--text-muted) 74%, var(--text));
}
/* `.lp-cta-ghost` — le style secondaire du hero, réutilisé TEL QUEL. Il est par
   construction moins fort que l'aplat cyan de l'accès à la bêta, ce qui est
   exactement la hiérarchie voulue. On l'emprunte sans toucher à sa règle : le
   hero est figé. */
#contact .lp-cta-ghost { margin-top: 22px; }
.lp-contact-mail { margin: 16px 0 0; font-size: 13px; font-weight: 600; }
.lp-contact-mail a { color: var(--cyan); text-decoration: none; }
.lp-contact-mail a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Pied */
/* Trois zones sur une ligne : la marque, les liens, la mention. `space-between`
   les répartit sans qu'aucune largeur soit figée — le pied s'adapte donc au
   nombre de liens, qui grandira le jour où les pages légales existeront. */
.lp-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 32px 38px;
  border-top: 1px solid var(--panel-border);
  font-size: 12px;
  color: var(--text-dim);
}
.lp-footer-marque { display: flex; align-items: center; gap: 8px; }
.lp-footer-nom { font-size: 13.5px; font-weight: 800; color: var(--text-2); }
.lp-footer-liens { display: flex; flex-wrap: wrap; gap: 22px; }
.lp-footer-liens a {
  /* Rembourrage vertical pour la cible tactile : le lien fait 12 px de haut,
     la zone atteignable en fait 36. */
  padding: 9px 0;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.lp-footer-liens a:hover { color: var(--cyan); }
.lp-footer-mentions { margin: 0; }

/* ------------------------------------------------------ Écrans réduits */
@media (max-width: 1080px) {
  .lp-hero { grid-template-columns: 1fr; gap: 38px; padding-top: 54px; }
  .lp-lead { max-width: none; }
}

@media (max-width: 900px) {
  .lp-nav, .lp-header-actions { display: none; }
  .lp-burger { display: block; margin-left: auto; }
  .lp-header { padding: 14px 18px; }
  /* Tablette : 3 × 2 devient 2 × 3. Trois colonnes tiendraient encore en
     largeur, mais les descriptions y passeraient à deux mots par ligne. */
  .lp-cards-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sous 900 px, trois colonnes ramèneraient chaque étape à ~30 caractères par
     ligne. On ne comprime donc pas : on CHANGE de disposition. Une étape par
     ligne, le numéro reporté dans une colonne à gauche — le texte retrouve une
     longueur de ligne confortable, et l'ensemble reste compact en hauteur, ce
     qu'un simple empilement centré aurait perdu. */
  .lp-flux { grid-template-columns: 1fr; gap: 0; }
  .lp-flux-etape {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 4px;
    padding: 15px 0 16px;
    border-top: 1px solid var(--panel-border);
  }
  .lp-flux-etape:first-child { border-top-color: var(--panel-border-m); }
  .lp-flux-num { grid-row: 1 / span 2; margin-bottom: 0; }
  .lp-flux-texte { grid-column: 2; }
  /* Le 2 × 2 tient encore à 820 px : chaque bloc y garde ~350 px, soit une
     longueur de ligne confortable pour trois lignes de texte. On ne le casse
     donc pas ici — seulement plus bas, quand il se comprime vraiment. */
  .lp-donnees { gap: 22px 30px; }
  /* Une seule colonne dès 900 px. À trois colonnes, chaque cas tombait sous
     260 px : les titres passaient à deux lignes et la lecture se hachait. Le
     filet bascule donc de vertical à HORIZONTAL — à l'horizontale il sépare
     encore, à la verticale il longerait un bloc seul sans rien séparer.
     L'espacement reste plus généreux qu'en 390 px : la largeur disponible le
     permet, et c'est elle qui donne à la composition son air éditorial. */
  .lp-usages { grid-template-columns: 1fr; margin-top: 30px; }
  .lp-usage { padding: 26px 0 0; }
  .lp-usage:first-child { padding-top: 0; }
  .lp-usage + .lp-usage { border-left: 0; border-top: 1px solid var(--panel-border); }
  /* Longueur de ligne bornée : sur 756 px utiles, un paragraphe de 13,5 px
     courrait à plus de 110 caractères — au-delà de ce que l'œil suit
     confortablement d'une ligne à l'autre. */
  .lp-usage-texte { max-width: 62ch; }
  /* Le bloc perd son rembourrage large : sur 756 px utiles, 40 px de chaque
     côté ramenaient chaque étape sous 215 px. */
  .lp-acces { padding: 36px 28px 32px; }
  .lp-acces-etapes { gap: 20px; }
}

@media (max-width: 620px) {
  .lp-hero { padding: 38px 18px 44px; }
  .lp-section { padding: 44px 18px; }
  /* Mobile : une colonne. La description remonte contre son titre — la
     répartition par `margin-top: auto` n'a plus d'objet quand chaque carte est
     seule sur sa ligne, et laisserait un vide au milieu des cartes courtes. */
  .lp-cards-features { grid-template-columns: 1fr; gap: 14px; }
  /* Mobile : même disposition qu'en tablette — elle tient déjà en une colonne.
     La capture reste pleine largeur. */
  .lp-flux { margin-top: 24px; }
  .lp-demo { margin-top: 22px; }
  /* Mobile : une colonne. */
  .lp-donnees { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
  /* Une colonne et filet horizontal : declares des 900 px, ils valent encore
     ici. Seuls les espacements se resserrent. */
  .lp-usages { margin-top: 26px; }
  .lp-usage { padding: 18px 0 0; }
  /* Le plafond de longueur de ligne posé pour la tablette n'a plus d'objet ici :
     la colonne est déjà plus étroite que lui, et le laisser agir modifierait un
     palier que cet ajustement ne devait pas toucher. */
  .lp-usage-texte { max-width: none; }
  /* Une colonne, et l'appel à l'action prend la largeur : au pouce, une
     cible pleine largeur vaut mieux qu'un bouton centré à viser. */
  .lp-acces { padding: 30px 20px 28px; }
  .lp-acces-etapes { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
  #acces .lp-cta { display: block; margin-top: 28px; white-space: normal; }
  /* Même reprise qu'en desktop, à la mesure de l'écran : l'icône à 22 px avait
     coûté 4 px de hauteur, rendus par le bas. */
  .lp-cards-features .lp-card { padding: 17px 17px 14px; }
  /* Icône NON surdimensionnée sur petit écran : elle reste un repère, pas un
     élément de mise en page. Elle suit la hausse du desktop, mais d'un cran
     moindre — 22 px là où l'écran en offre 26. */
  .lp-card-icon { margin-bottom: 12px; }
  .lp-card-icon svg { width: 22px; height: 22px; }
  /* Pied empilé et aligné à GAUCHE : centré, trois blocs de longueurs très
     différentes donnent une colonne en accordéon. */
  .lp-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 18px 30px;
  }
  .lp-footer-liens { gap: 18px; }

  /* La capture n'est PAS simplement réduite jusqu'à l'illisible : on la
     recadre sur sa zone centrale — celle du bassin — et on adoucit les voiles,
     qui masqueraient sinon l'essentiel d'un cadre déjà étroit. */
  .lp-shot img {
    height: 300px;
    object-fit: cover;
    object-position: 50% 42%;
  }
  .lp-shot::before {
    background: linear-gradient(104deg,
      rgba(7, 17, 30, 0.80) 0%, rgba(9, 20, 34, 0.22) 18%, rgba(9, 20, 34, 0) 34%);
  }
  .lp-shot::after {
    background: linear-gradient(260deg,
      rgba(7, 17, 30, 0.78) 0%, rgba(10, 22, 37, 0.20) 20%, rgba(10, 22, 37, 0) 36%);
  }
}

/* Mouvement réduit : rien n'anime la page, mais la règle documente
   l'intention pour les ajouts futurs. */
@media (prefers-reduced-motion: reduce) {
  .lp-cta { transition: none; }
  .lp-html { scroll-behavior: auto; }
}