/* ==========================================================================
   Landing publique — feuille dédiée, chargée APRÈS citoyen.css.

   Deux règles tenues de bout en bout :

   1. Aucune redéclaration de :root. Toutes les couleurs, ombres, rayons et
      polices viennent du design system « Solaire » (citoyen.css). Une valeur
      en dur ici serait une divergence de charte qui se paierait plus tard.
   2. Tout est préfixé .lp- — sauf l'usage des composants partagés (.wrap,
      .hero, .appbar, .cbtn, .tile, .hl) qu'on réutilise volontairement.

   Mobile-first : les règles de base valent pour le téléphone, les @media
   (min-width) ajoutent les colonnes. Ruptures alignées sur l'existant :
   520 / 720 / 900 / 1024 px.
   ========================================================================== */

/* ---------- Enveloppe ---------- */
.lp-page { padding-bottom: 10px; }

/* ---------- Barre haute ---------- */
/* .appbar (sticky, flou, ombre au scroll) vient de citoyen.css. */
.lp-nav { display: none; }

.lp-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: color var(--duree), border-color var(--duree);
}
.lp-nav a:hover,
.lp-nav a:focus-visible { color: var(--primary-700); border-bottom-color: var(--primary); }

/* Sous 520 px le libellé du bouton mangerait la barre : on ne garde que
   l'icône, avec un intitulé accessible conservé par le title/aria. */
.lp-nav-cta { padding: 12px 18px; font-size: 14.5px; white-space: nowrap; }
.lp-nav-cta i { font-size: 13px; }
/* Le commentaire ci-dessus annonçait cette règle depuis le premier commit de la
   landing sans qu'elle ait jamais été écrite : mesuré au lot 4, le libellé était
   COUPÉ NET par l'`overflow: hidden` de `.cbtn` — 186px affichés pour 203px de
   contenu à 390px, 116px pour 168px à 320px, sans ellipse. Le CTA principal de
   la vitrine était donc tronqué sur tout téléphone. L'intitulé accessible est
   porté par l'`aria-label` du lien, volontairement identique au libellé visible
   au-dessus de 520px : un lecteur d'écran ne doit pas annoncer autre chose que
   ce qui est écrit. */
.lp-nav-cta-txt { display: none; }

/* ---------- Hero ---------- */
.lp-hero { padding-top: 34px; }
.lp-hero-pill { margin-bottom: 20px; font-size: 12.5px; }
.lp-hero h1 { letter-spacing: -0.035em; line-height: 1.04; }
.lp-hero .lead { max-width: 620px; }

/* ---------- Boutons de téléchargement ---------- */
.lp-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* aria-disabled et non l'attribut `disabled` : le bouton reste atteignable
   au clavier et annoncé comme indisponible, au lieu de sortir de l'ordre de
   tabulation. Il ne porte aucun gestionnaire : le clic ne fait rien. */
.lp-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  text-align: left;
  box-shadow: var(--shadow-sm);
}
/* Ces boutons sont devenus des <a> le 2026-08-27, l'app étant publiée sur les
   deux stores. La règle `[aria-disabled="true"]` qui les grisait a donc été
   retirée : elle ne s'appliquait plus à rien, et laissée en place elle aurait
   fait douter du prochain qui lit ce fichier. */
.lp-store { text-decoration: none; }
/* Le survol peut désormais promettre une action, puisqu'il y en a une. */
.lp-store:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.lp-store:focus-visible { outline: none; box-shadow: var(--ring); }

.lp-store-ico { flex: 0 0 auto; color: var(--ink); }
.lp-store-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.lp-store-txt small { font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.lp-store-txt strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.lp-stores-compact { margin-top: 0; flex-direction: column; }
.lp-stores-compact .lp-store { padding: 10px 18px 10px 14px; }
.lp-stores-compact .lp-store-txt strong { font-size: 14.5px; }

/* Texte normal : doit passer 4.5:1. --ink-soft sur --bg est conforme. */
.lp-store-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 560px;
}
.lp-store-note a { color: var(--primary-700); font-weight: 700; }

/* ---------- Titres de section ---------- */
.lp-section-titre {
  font-size: clamp(26px, 4.6vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 12px;
}
.lp-section-chapo {
  font-size: 16px;
  color: var(--muted);
  max-width: 620px;
  line-height: 1.65;
}

/* ---------- Services ---------- */
.lp-services { padding: 56px 0 20px; }
.lp-services > .wrap { margin-bottom: 20px; }

.lp-feature { padding: 34px 0; }
.lp-feature-inner { display: flex; flex-direction: column; gap: 34px; }

/* Teintes de service. Aucune nouvelle couleur : ce sont les accents déjà
   validés AA du design system, repris par service. */
.lp-teinte-signal        { --lp-teinte: var(--primary-700); --lp-teinte-50: var(--primary-50); }
.lp-teinte-rdv           { --lp-teinte: var(--green);       --lp-teinte-50: var(--green-50); }
.lp-teinte-actus         { --lp-teinte: var(--accent);      --lp-teinte-50: var(--accent-50); }
.lp-teinte-participation { --lp-teinte: var(--violet);      --lp-teinte-50: var(--violet-50); }
.lp-teinte-annonces      { --lp-teinte: var(--yellow);      --lp-teinte-50: var(--yellow-50); }
.lp-teinte-messages      { --lp-teinte: var(--primary-700); --lp-teinte-50: var(--primary-50); }

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lp-teinte);
  margin-bottom: 14px;
}
.lp-eyebrow-ico {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--lp-teinte-50);
  color: var(--lp-teinte);
  font-size: 14px;
}

.lp-feature-texte h3 {
  font-size: clamp(23px, 3.6vw, 32px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.lp-feature-corps {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 500px;
}

.lp-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.lp-points li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: var(--ink-soft); }
.lp-points i {
  flex: 0 0 auto;
  width: 21px; height: 21px;
  margin-top: 1px;
  border-radius: var(--radius-pilule);
  display: grid; place-items: center;
  background: var(--lp-teinte-50);
  color: var(--lp-teinte);
  font-size: 10px;
}

.lp-feature-visuel { display: flex; justify-content: center; }

/* ---------- Coque de téléphone ----------
   SEULES VALEURS EN DUR DE CETTE FEUILLE, et volontairement : `#141414` et les
   rayons 42px / 14px ne décrivent pas un composant Municipio, ils dessinent un
   OBJET PHYSIQUE — le châssis noir d'un smartphone dans lequel on montre
   l'application. Les passer aux tokens ferait suivre la coque à chaque
   changement de charte, alors qu'un téléphone n'a aucune raison de changer de
   rayon quand la marque change de couleur. Même tri par sens que pour `--ring`,
   qui ne signale que le focus. Exception nommée dans
   `tests_design_system.LandingSansValeurEnDurTest` : la retirer là-bas si on la
   retire ici. */
.lp-phone {
  position: relative;
  width: 100%;
  max-width: 268px;
  aspect-ratio: 9 / 19.5;
  border: 10px solid #141414;
  border-radius: 42px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lp-phone-encoche {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 22px;
  background: #141414;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.lp-phone-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ---------- Garanties ---------- */
.lp-atouts { padding: 56px 0 20px; }
.lp-atouts-grille { margin-top: 30px; }

/* ---------- Bande « vous êtes une commune ? » ---------- */
.lp-mairie { padding: 46px 0 10px; }
.lp-mairie-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}
.lp-mairie h2 { font-size: clamp(21px, 3.2vw, 28px); letter-spacing: -0.025em; margin-bottom: 8px; }
.lp-mairie p { font-size: 15.5px; color: var(--muted); line-height: 1.65; max-width: 520px; }
.lp-mairie .cbtn { align-self: flex-start; }

/* ---------- Pied de page ---------- */
.lp-footer {
  margin-top: 56px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  padding: 46px 0 26px;
}
.lp-footer-cols { display: flex; flex-direction: column; gap: 34px; }
.lp-footer-col { display: flex; flex-direction: column; gap: 14px; }

.lp-footer-baseline { font-size: 13.5px; color: var(--muted); line-height: 1.7; }

.lp-footer-titre {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.lp-footer-adresse { font-style: normal; font-size: 13.5px; color: var(--ink-soft); line-height: 1.75; }
.lp-footer-adresse a { color: var(--primary-700); }

.lp-footer-liens { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.lp-footer-liens a { font-size: 13px; color: var(--muted); text-decoration: none; }
.lp-footer-liens a:hover { color: var(--primary-700); text-decoration: underline; }

.lp-footer-commune {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--primary-700); text-decoration: none;
}
.lp-footer-commune:hover { text-decoration: underline; }

.lp-footer-bas {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}
.lp-footer-bas strong { color: var(--primary); }
.lp-footer-admin { color: inherit; opacity: .7; }

/* ==========================================================================
   Élargissements
   ========================================================================== */

@media (min-width: 520px) {
  .lp-stores-compact { flex-direction: row; }
  /* La barre a la place : le libellé du CTA réapparaît. */
  .lp-nav-cta-txt { display: inline; }
}

@media (min-width: 720px) {
  .lp-services, .lp-atouts { padding-top: 72px; }
  .lp-mairie-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 38px 42px;
  }
  .lp-mairie .cbtn { align-self: center; flex: 0 0 auto; }
  .lp-footer-cols { flex-direction: row; gap: 48px; }
  .lp-footer-col { flex: 1; }
}

@media (min-width: 900px) {
  /* Hero centré en grand écran. Aligné à gauche, il laissait la moitié droite
     vide : un axe central tient mieux la page et sonne plus institutionnel.
     Les blocs de service, eux, restent en alternance gauche/droite. */
  .lp-hero { padding-top: 62px; text-align: center; }
  .lp-hero .lead,
  .lp-hero .lp-store-note { margin-left: auto; margin-right: auto; }
  .lp-hero .lead { max-width: 680px; }
  .lp-hero .lp-store-note { max-width: 620px; }
  .lp-stores { justify-content: center; }
  /* Le libellé du bouton reste ferré à gauche : « Bientôt sur » au-dessus de
     « App Store », centrer les deux lignes les décalerait l'une par rapport
     à l'autre. */
  .lp-store { text-align: left; }

  .lp-feature { padding: 52px 0; }
  .lp-feature-inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
  .lp-feature-texte { flex: 1 1 0; }
  .lp-feature-visuel { flex: 0 0 300px; }

  /* L'alternance vit ici, pas dans le gabarit : un partiel n'a pas à
     connaître sa position dans la page. En dessous de 900 px la règle ne
     s'applique pas, et le texte passe toujours avant le visuel.

     `nth-of-type` et non `nth-child` : le premier enfant de .lp-services est
     le <div class="wrap"> du titre de section, qui décalerait la parité et
     ferait démarrer l'alternance du mauvais côté. En ne comptant que les
     <article>, le premier service a bien son texte à gauche. */
  .lp-feature:nth-of-type(even) .lp-feature-visuel { order: -1; }
}

@media (min-width: 1024px) {
  .lp-nav { display: flex; gap: 28px; }
}

/* Le JS de base_citoyen.html pose .reveal-scroll sur les h2/h3 et gère déjà
   prefers-reduced-motion. Rien à ajouter ici — sinon la double animation. */