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

/* Focus clavier : UN seul anneau pour toute la page, cyan sur le bleu nuit et
   décollé de l'élément. L'anneau par défaut du navigateur, fin et sombre,
   se perdait sur ce fond pour les liens de l'en-tête et les boutons. */
.lp-body :focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Lien d'évitement : hors écran tant qu'il n'a pas le focus, puis posé sur
   l'en-tête (qui est `sticky`), d'où le z-index. */
.lp-skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--cyan);
  color: #06121f;
  font-weight: 700;
  text-decoration: none;
}
.lp-skip:focus-visible { top: 12px; outline-color: #fff; }
/* 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: 10.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);
  /* Trois blocs dans l'ordre du DOM — texte, capture, suite — pour que
     l'ordre de lecture sur téléphone soit celui de la page sans artifice.
     Sur grand écran : texte et suite empilés en colonne 1 (rangées 2 et 3),
     la capture en colonne 2 sur toute la hauteur ; les deux rangées `1fr`
     se partagent le vide à parts égales, ce qui CENTRE le bloc texte + suite
     face à la capture — exactement l'ancien `align-items: center`. */
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 44px;
  row-gap: 0;
  max-width: 1360px;
  margin: 0 auto;
  padding: 76px 32px 64px;
}
.lp-hero-text { grid-column: 1; grid-row: 2; }
.lp-hero-suite { grid-column: 1; grid-row: 3; }
.lp-shot { grid-column: 2; grid-row: 1 / -1; align-self: center; }
.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;
  /* `--text-muted`, pas `--text-dim` : à 12,5 px sur le bleu nuit, le second
     restait sous 4,5:1 de contraste. */
  color: var(--text-muted);
}

/* Le bandeau du parcours — Délimiter → Analyser → Visualiser → Exporter :
   des filets, pas des pastilles pleines. Une liste ORDONNÉE, parce que c'en
   est une — la puce est retirée visuellement, l'ordre reste pour les
   lecteurs d'écran. Entre deux étapes, un chevron dit le sens de lecture ;
   il disparaît sous 620 px, où le bandeau passe en 2 × 2 et où l'ordre est
   porté par la numérotation implicite du `<ol>`. */
.lp-parcours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 4px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.lp-parcours li { display: inline-flex; align-items: center; }
.lp-parcours a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  /* 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. Pastilles serrées : à 1280 px la
     colonne de texte du hero fait ~460 px, et les quatre étapes doivent y
     tenir sur UNE ligne — un parcours coupé en deux ne se lit plus. */
  border: 1px solid var(--panel-border-m);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.lp-parcours a:hover { color: var(--text-2); border-color: var(--cyan); }
/* Chevron de liaison, décoratif : un glyphe texte, pas une icône, pour ne
   rien ajouter au DOM. */
.lp-parcours li:not(:last-child)::after {
  content: "\203A";
  margin: 0 3px 0 6px;
  font-size: 14px;
  line-height: 1;
  color: var(--text-dim);
}
/* 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-parcours svg {
  width: 13px;
  height: 13px;
  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;
}
/* Le MÉDIA : l'image (poster) donne la taille du cadre — ses attributs
   width/height réservent la place avant tout chargement — et la vidéo, quand
   il y en a une, se superpose en absolu dans ce même cadre : elle ne peut
   rien déplacer. Invisible tant qu'elle ne joue pas ; sa première image est
   le poster, le passage de l'une à l'autre ne se voit pas. */
.lp-shot-media { position: relative; }
.lp-shot-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lp-shot--video .lp-shot-video { opacity: 1; }
/* Pause / lecture : le seul contrôle de la vidéo, discret, dans le cadre,
   au-dessus des voiles (z 1) et de la caption (z 2). Présent seulement quand
   la vidéo joue réellement — le module le retire avec elle. */
.lp-shot-pause {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(214, 232, 245, 0.28);
  border-radius: 50%;
  background: rgba(7, 17, 30, 0.66);
  color: #e6f2fb;
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.lp-shot-pause:hover, .lp-shot-pause:focus-visible { opacity: 1; background: rgba(7, 17, 30, 0.86); }
/* Zone tactile de 46 px autour d'un bouton de 30 px : le dessin reste discret,
   le doigt ne rate pas. */
.lp-shot-pause::before { content: ""; position: absolute; inset: -8px; }
.lp-shot-pause:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.lp-shot-pause[hidden] { display: none; }

/* 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));
  /* Rangees de MEME hauteur : deux descriptions (carte fusionnee, 3D) font
     deux lignes, les autres une seule ; sans cette regle la seconde rangee
     serait plus haute que la premiere. */
  grid-auto-rows: 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. */
/* Les quatre étapes, chacune avec SON visuel : une grille 2 × 2, rythme
   sobre — pas de carrousel, pas de mouvement. Le visuel vient d'abord (c'est
   lui qui explique), puis le numéro et le titre sur une ligne, puis une
   phrase. 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(2, minmax(0, 1fr));
  gap: 34px 28px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
/* Chaque étape est la cible d'un lien du bandeau du hero : l'en-tête collant
   ne doit pas la recouvrir à l'arrivée. */
.lp-flux-etape { scroll-margin-top: 92px; }
/* Le visuel : même cadre que la capture du hero (filet, rayon, ombre douce),
   sans voile — on vient lire l'interface. `width`/`height` sur l'image
   réservent la place : aucun décalage au chargement. */
.lp-flux-visuel {
  margin: 0 0 14px;
  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-flux-visuel img { display: block; width: 100%; height: auto; }
.lp-flux-entete { display: flex; align-items: baseline; gap: 10px; }
.lp-flux-num {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--cyan);
}
.lp-flux-titre { margin: 0 0 6px; font-size: 15px; 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-muted); }

/* ------------------------------------------- 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-muted);
}
.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 */
/* Entre 1081 et 1230 px, le hero garde ses deux colonnes mais la colonne de
   texte descend sous ~430 px : les quatre pastilles ne tiennent plus sur une
   ligne. Plutot qu'un retour a la ligne qui laisserait un chevron orphelin en
   bout de rangee, le bandeau passe en 2 x 2 sans chevrons, comme sur mobile.
   Il revient sur UNE ligne des que le hero passe en une colonne (1080 px). */
@media (max-width: 1230px) {
  .lp-parcours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
  .lp-parcours li:not(:last-child)::after { content: none; }
  .lp-parcours a { width: 100%; justify-content: center; }
}

@media (max-width: 1080px) {
  .lp-hero { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 30px; padding-top: 54px; }
  /* Placement explicite retiré : texte, capture, suite se suivent. */
  .lp-hero-text, .lp-hero-suite, .lp-shot { grid-column: auto; grid-row: auto; }
  .lp-hero-suite .lp-hero-note { margin-top: 0; }
  .lp-lead { max-width: none; }
  /* Hero en une colonne : la place ne manque plus, le bandeau se relit en
     ligne, chevrons compris. */
  .lp-parcours { display: flex; max-width: none; }
  .lp-parcours li:not(:last-child)::after { content: "\203A"; }
  .lp-parcours a { width: auto; justify-content: flex-start; }
}

@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, deux colonnes ramèneraient chaque visuel sous 400 px, où
     l'interface capturée cesse d'être lisible. Une étape par ligne, le visuel
     en pleine largeur, puis numéro + titre et la phrase. */
  .lp-flux { grid-template-columns: 1fr; gap: 30px; }
  .lp-flux-etape + .lp-flux-etape { padding-top: 30px; border-top: 1px solid var(--panel-border); }
  /* 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) {
  /* HERO compact : le produit doit apparaître sans long défilement. Titre un
     cran plus petit, accroche resserrée, appel à l'action principal seul en
     bouton — le secondaire devient un lien —, capture juste après. Aucun
     texte ne change. */
  .lp-hero { padding: 26px 18px 30px; row-gap: 16px; }
  .lp-h1 { margin-bottom: 12px; font-size: clamp(27px, 7.2vw, 30px); letter-spacing: -0.8px; }
  .lp-lead { margin-bottom: 14px; font-size: 15px; line-height: 1.5; }
  .lp-hero .lp-hero-actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .lp-hero .lp-cta-lg { text-align: center; }
  /* Secondaire en LIEN : même cible, même texte, plus de cadre — un second
     bouton pleine largeur coûtait 56 px avant la capture. */
  .lp-hero .lp-cta-ghost {
    padding: 10px 0;
    border: 0;
    background: none;
    text-align: center;
    font-weight: 600;
    color: var(--cyan);
  }
  .lp-hero .lp-cta-ghost:hover { text-decoration: underline; }
  .lp-hero-suite .lp-hero-note { margin-top: 0; }
  .lp-hero-suite .lp-parcours { margin-top: 12px; }
  /* Sections : 36 px au lieu de 44 — le rythme reste, la page raccourcit. */
  .lp-section { padding: 36px 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. */
  /* Cartes compactes : icône et titre sur une ligne, description dessous,
     rembourrage réduit. Ni accordéon ni masquage : tout reste lisible. */
  .lp-cards-features { grid-template-columns: 1fr; gap: 10px; grid-auto-rows: auto; }
  .lp-cards-features .lp-card {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
  }
  .lp-cards-features .lp-card-title { grid-column: 2; margin: 0 0 4px; font-size: 14.5px; line-height: 1.35; }
  .lp-cards-features .lp-card-text { grid-column: 2; font-size: 13px; line-height: 1.5; }
  /* Mobile : même disposition qu'en tablette — elle tient déjà en une colonne.
     Sous 620 px, `<picture>` sert la capture TÉLÉPHONE 4:5 de chaque étape :
     une vraie vue mobile de l'application, pleine largeur. */
  .lp-flux { margin-top: 22px; gap: 16px; }
  .lp-flux-etape + .lp-flux-etape { padding-top: 16px; }
  /* Le visuel 4:5 reste une VRAIE capture téléphone, mais n'a pas besoin de
     toute la largeur : ~300 px vers 360 px, ~330 px vers 390 px, 360 px au
     plus. Centré. L'image source fait 800 px : nette sur un écran 3×. */
  .lp-flux-visuel { width: min(100%, 360px, 84vw); margin: 0 auto 10px; }
  /* Le bandeau du parcours passe en 2 × 2 : quatre pastilles sur une ligne ne
     tiennent pas en 354 px utiles, et une seule colonne les empilerait sur
     quatre rangs — trop de hauteur pour un rappel. Les chevrons disparaissent,
     l'ordre reste celui de la liste. */
  .lp-parcours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lp-parcours li:not(:last-child)::after { content: none; }
  .lp-parcours a { width: 100%; justify-content: center; padding: 8px 10px; }
  /* Mobile : une colonne. */
  .lp-donnees { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
  .lp-donnee { padding-top: 12px; }
  .lp-donnee-titre { margin-bottom: 5px; }
  /* Une colonne et filet horizontal : declares des 900 px, ils valent encore
     ici. Seuls les espacements se resserrent. */
  /* Cas d'usage : numéro et titre sur une ligne, texte dessous. */
  .lp-usages { margin-top: 22px; }
  .lp-usage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    align-items: baseline;
    grid-row: auto;
    grid-template-rows: none;
    padding: 14px 0 0;
  }
  .lp-usage:first-child { padding-top: 0; }
  .lp-usage-num { margin: 0; }
  .lp-usage-titre { margin: 0 0 4px; font-size: 15px; }
  /* 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 { grid-column: 2; 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. */
  /* Accès : bloc et étapes resserrés, même principe numéro + titre en ligne. */
  .lp-acces { padding: 22px 16px 22px; }
  .lp-acces-etapes { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .lp-acces-etape {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    align-items: baseline;
  }
  .lp-acces-num { margin: 0; }
  .lp-acces-titre { margin: 0 0 2px; }
  .lp-acces-texte { grid-column: 2; }
  #acces .lp-cta { display: block; margin-top: 22px; 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: 12px 14px 12px; }
  /* 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: 1px 0 0; }
  .lp-card-icon svg { width: 20px; height: 20px; }
  /* 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. */
  /* Média CENTRÉ, pas pleine largeur : ~300 px à 360 px de large, ~320 px à
     390 px, 328 px au plus — la même retenue que les visuels du parcours. Sous
     620 px, `<picture>` sert la capture téléphone 4:5 : le cadre suit ce
     ratio, et la vidéo mobile (800 × 1000) s'y superpose exactement. */
  .lp-shot { width: clamp(300px, 82vw, 328px); margin: 0 auto; }
  .lp-shot img {
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
  }
  /* Le bouton pause se pose dans la barre de navigation de l'application
     filmée (les 12 % du bas du cadre 4:5), dans le vide entre « Paramètres »
     et « Résultats » : à droite, il recouvrait « Résultats » ; au-dessus de
     la barre, il masquerait l'attribution de la carte. Positions en % du
     cadre, donc valables de 300 à 328 px de large. */
  .lp-shot-pause { right: 28.5%; bottom: 8px; }
  .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; }
  /* La vidéo du hero n'est pas créée dans ce cas (cf. landing-hero-video.js) ;
     si elle l'était par un autre chemin, elle apparaîtrait sans fondu. */
  .lp-shot-video, .lp-shot-pause { transition: none; }
}

/* ------------------------------------------ Verrou d'accès (anti-flash) */
/* Le HTML porte les libellés du mode le plus FERMÉ — bon repli, faux en mode
   public. Tant que le mode n'est pas connu, les éléments concernés sont
   invisibles mais TOUJOURS EN PLACE : `visibility`, jamais `display`, pour
   que rien ne bouge autour d'eux et qu'aucun saut de mise en page ne vienne
   remplacer le clignotement qu'on cherche à supprimer.

   Le reste de la page — titre, accroche, sections, navigation — s'affiche
   immédiatement : seuls les libellés qui DÉPENDENT du mode attendent.
   Cf. le script bloquant en tête de `landing.html`, qui pose la classe et
   garantit sa levée même si le module ne se charge pas. */
.lp-acces-indetermine [data-acces-dyn] {
  visibility: hidden;
}

/* ============================================================
   Page « Mentions légales & Confidentialité » (/mentions-legales)
   ------------------------------------------------------------
   Un DOCUMENT, pas une vitrine : une colonne de lecture bornée,
   des titres nets, des listes, et rien qui ressemble à une carte
   ou à un bloc marketing. Mêmes variables, même police, même
   pied que la page d'accueil — la page appartient au produit.
   ============================================================ */
.lp-header-legal { justify-content: space-between; }
.lp-legal-nav { display: flex; align-items: center; }
/* Visible à TOUTES les largeurs : contrairement à `.lp-nav`, ce lien ne se
   replie pas derrière un burger — la page n'a pas de script, et un lecteur
   sur mobile doit pouvoir revenir sans le bouton « précédent ». */
.lp-legal-retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 2px;
  font-size: 13.5px; font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.lp-legal-retour:hover { color: var(--cyan); }

.lp-legal {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 32px 64px;
}
/* 68ch : au-delà, une ligne de texte courant dépasse les ~75 caractères où
   l'œil retrouve sans effort le début de la suivante. */
.lp-legal-doc {
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.68;
  color: var(--text);
}
.lp-legal-h1 {
  margin: 0 0 10px;
  font-size: clamp(27px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.7px;
  color: var(--text-2);
  text-wrap: balance;
}
.lp-legal-date {
  margin: 0;
  font-size: 13px; font-weight: 600;
  color: var(--text-dim);
}
.lp-legal-entete { padding-bottom: 22px; border-bottom: 1px solid var(--panel-border); }

/* Sommaire : une simple liste numérotée, sur deux colonnes quand la largeur
   le permet. Pas de cadre — c'est une table des matières, pas un encart. */
.lp-legal-sommaire { margin: 26px 0 8px; }
.lp-legal-sommaire-titre {
  margin: 0 0 8px;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--text-dim);
}
.lp-legal-sommaire ol {
  margin: 0; padding-left: 22px;
  columns: 2; column-gap: 32px;
  font-size: 13.5px; line-height: 1.55;
}
.lp-legal-sommaire li { break-inside: avoid; padding: 2px 0; }
.lp-legal-sommaire a { color: var(--text-muted); text-decoration: none; }
.lp-legal-sommaire a:hover { color: var(--cyan); }

/* Intercalaires : les deux grandes parties (données personnelles, contenu).
   Un libellé discret au-dessus d'un filet — un repère de lecture, pas un
   second niveau de titre à part entière. */
.lp-legal-partie {
  margin: 54px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--panel-border-m);
  font-size: 12px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--cyan);
}

.lp-legal-section { margin-top: 40px; scroll-margin-top: 84px; }
.lp-legal-partie + .lp-legal-section { margin-top: 22px; }
.lp-legal-section h2 {
  margin: 0 0 12px;
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.3;
  color: var(--text-2);
}
.lp-legal-section h3 {
  margin: 24px 0 8px;
  font-size: 15px; font-weight: 700;
  color: var(--text-2);
}
.lp-legal-section p { margin: 0 0 12px; }
.lp-legal-section p:last-child { margin-bottom: 0; }
.lp-legal-section ul {
  margin: 0 0 14px; padding-left: 22px;
}
.lp-legal-section li { padding: 2px 0; }
.lp-legal-section li::marker { color: var(--text-dim); }

.lp-legal-contact { font-weight: 700; }
.lp-legal-contact a,
.lp-legal-section a { color: var(--cyan); text-decoration: none; }
.lp-legal-contact a:hover,
.lp-legal-section a:hover { text-decoration: underline; }
.lp-legal-adresse { line-height: 1.55; }

/* Noms de cookies : une liste de définitions, le nom en chasse fixe et sa
   description en retrait — lisible sans tableau. */
.lp-legal-dl { margin: 0 0 14px; }
.lp-legal-dl dt { margin-top: 10px; }
.lp-legal-dl dt code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 700;
  color: var(--text-2);
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--panel-border-m);
  background: var(--card-bg-2);
}
.lp-legal-dl dd { margin: 4px 0 0 0; }
.lp-legal-dl dt:first-child { margin-top: 0; }

/* Le lien légal du pied : même ton que les autres liens du pied, et une zone
   tactile suffisante malgré une ligne de 12 px. */
.lp-footer-mentions a {
  display: inline-block;
  padding: 9px 0;
  color: var(--text-muted);
  text-decoration: none;
}
.lp-footer-mentions a:hover { color: var(--cyan); text-decoration: underline; }
.lp-footer-mentions a[aria-current="page"] { color: var(--text-2); }

@media (max-width: 900px) {
  .lp-header-legal { padding: 14px 18px; }
}
@media (max-width: 620px) {
  .lp-legal { padding: 30px 18px 48px; }
  .lp-legal-sommaire ol { columns: 1; }
  .lp-legal-section { margin-top: 34px; }
  .lp-legal-partie { margin-top: 44px; }
}