/* =========================================================
   Veltharis — landings /lp/ (prestations à prix fixe)
   Feuille source, inlinée dans <head><style> par tools/build-lp.mjs
   pour rester sous le budget critique (14 Ko) et éviter une requête
   bloquante supplémentaire. Autonome : aucune dépendance au CSS du
   site principal (assets/css/style.css), palette et typographie
   propres à ces pages — voir le prompt de direction artistique.
   ========================================================= */

@font-face {
  font-family: "Playfair Display LP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfair-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display LP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfair-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter LP";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-300-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter LP";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-300-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter LP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter LP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --basalte: #0C0B0A;
  --ivoire: #EDE7DC;
  --laiton: #B8A276;
  --laiton-sombre: #726446; /* laiton assombri : seule variante autorisée sous 0.9rem sur fond clair — 4.7:1 sur ivoire (AA), mesuré via Lighthouse */
  --basalte-70: rgba(12, 11, 10, .70);
  --basalte-60: rgba(12, 11, 10, .60); /* atténué mais lisible sous 0.9rem sur fond clair — 4.86:1 sur ivoire (AA), mesuré via Lighthouse */
  --basalte-45: rgba(12, 11, 10, .45);
  --filet: rgba(12, 11, 10, .14);
  --filet-clair: rgba(237, 231, 220, .22);
  --ivoire-assombri: #E4DCCC;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivoire);
  color: var(--basalte);
  font-family: "Inter LP", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }

h1, h2, .prix {
  font-family: "Playfair Display LP", "Playfair Display", Georgia, serif;
  font-weight: 400;
  margin: 0;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.12; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; margin-bottom: 1.5rem; }
p { max-width: 68ch; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: 3px;
}

.wrap { max-width: 660px; margin: 0 auto; padding: 0 24px; }
.wrap--large { max-width: 960px; }
.section { padding: 56px 0; }
.section--tight { padding: 40px 0; }

/* Filet — seul séparateur, seul élément de marque */
.filet { border: none; border-top: 1px solid var(--laiton); width: 150px; height: 0; margin: 24px 0; }
.filet--clair { border-top-color: var(--filet-clair); }

/* 1. Bandeau haut */
.bandeau {
  background: var(--basalte);
  color: var(--ivoire);
  padding: 18px 0;
}
.bandeau .wrap { display: flex; }
.wordmark {
  font-family: "Inter LP", sans-serif;
  font-weight: 400;
  font-size: .8125rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ivoire);
}

/* 2. Hero */
.hero { background: var(--basalte); color: var(--ivoire); padding: 64px 0 56px; }
.hero .filet {
  width: 0;
  animation: deploie 900ms ease-out 150ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero .filet { width: 150px; animation: none; }
}
@keyframes deploie { from { width: 0; } to { width: 150px; } }
.hero__chapo { color: var(--basalte-70); filter: brightness(1); color: rgba(237, 231, 220, .78); margin-top: 20px; }
.hero__prix-ligne {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 28px;
}
.hero__prix { font-size: 2rem; color: var(--ivoire); }
.hero__delai { font-family: "Inter LP", sans-serif; font-weight: 300; color: rgba(237, 231, 220, .70); }
.btn {
  display: inline-block;
  margin-top: 28px;
  padding: 15px 28px;
  min-height: 44px;
  background: var(--laiton);
  color: var(--basalte);
  font-family: "Inter LP", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn:hover { background: #C7B589; }
.hero__apart { margin-top: 12px; font-size: .9rem; color: var(--laiton); max-width: 52ch; }

/* 3. Livrables */
.liste-filets { list-style: none; margin: 0; padding: 0; }
.liste-filets li { padding: 16px 0; border-top: 1px solid var(--filet); }
.liste-filets li:last-child { border-bottom: 1px solid var(--filet); }

/* 4. Étapes */
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.etape { padding: 20px 0; border-top: 1px solid var(--filet); display: flex; gap: 20px; }
.etape:last-child { border-bottom: 1px solid var(--filet); }
.etape__num {
  font-family: "Playfair Display LP", serif;
  font-size: 1.4rem;
  color: var(--laiton-sombre);
  flex: none;
  width: 1.6em;
}
.etape__titre { font-weight: 400; margin: 0 0 4px; }
.etape__texte { margin: 0; color: var(--basalte-70); }

/* 5. Ce qui n'est pas compris */
.non-compris { background: var(--ivoire-assombri); }
.non-compris ul { list-style: none; margin: 0; padding: 0; }
.non-compris li { padding: 14px 0; border-top: 1px solid var(--filet); }
.non-compris li:last-child { border-bottom: 1px solid var(--filet); }
.maillage-interne { margin: 20px 0 0; font-size: .9375rem; color: var(--basalte-70); }
/* #5B5038 et non --laiton-sombre : ce bloc vit sur le fond assombri de
   .non-compris (--ivoire-assombri), plus sombre que l'ivoire de base sur
   lequel --laiton-sombre a été calibré à l'AA (4.7:1) — sur ce fond-ci il
   ne fait plus que 4.25:1. Recalibré ici : 5.82:1, mesuré via Lighthouse. */
.maillage-interne a { color: #5B5038; text-decoration: underline; }

/* 6. Encadré département */
.encadre-dept {
  border-left: 1px solid var(--laiton);
  padding-left: 20px;
  font-size: .9rem;
  color: var(--laiton-sombre);
}

/* 7. Garanties */
.garanties { list-style: none; margin: 0; padding: 0; }
.garanties li { padding: 14px 0; border-top: 1px solid var(--filet); }
.garanties li:last-child { border-bottom: 1px solid var(--filet); }

/* 8. FAQ */
.faq-item { border-top: 1px solid var(--filet); }
.faq-item:last-child { border-bottom: 1px solid var(--filet); }
.faq-item summary {
  padding: 18px 0;
  cursor: pointer;
  font-weight: 400;
  list-style: none;
  position: relative;
  padding-right: 28px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font: inherit; margin: 0; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 18px;
  color: var(--laiton-sombre);
  font-family: "Playfair Display LP", serif;
  font-size: 1.2rem;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding-bottom: 18px; margin: 0; color: var(--basalte-70); }

/* 8bis. Paliers (comparaison d'abonnement — un seul champ distingue la
   colonne recommandée : un filet laiton, pas de badge) */
.paliers h2 { margin-bottom: 32px; }
.paliers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--filet);
}
.palier {
  padding: 28px 24px;
  border-right: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.palier:last-child { border-right: none; }
.palier--milieu { border-bottom: 2px solid var(--laiton); }
.palier__nom {
  font-family: "Inter LP", sans-serif;
  font-weight: 400;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--laiton-sombre);
  margin: 0 0 8px;
}
.palier__prix { font-size: 1.5rem; margin-bottom: 20px; }
.palier__details { list-style: none; margin: 0 0 24px; padding: 0; }
.palier__details li {
  padding: 10px 0;
  border-top: 1px solid var(--filet);
  font-size: .9rem;
  color: var(--basalte-70);
}
.palier__details li:first-child { border-top: none; }
.palier__details li span {
  display: block;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--laiton-sombre);
  margin-bottom: 4px;
}
.btn--palier { display: block; width: 100%; margin-top: 0; padding: 13px 20px; font-size: .9375rem; text-align: center; }

@media (max-width: 720px) {
  .paliers__grid { grid-template-columns: 1fr; border-top: none; }
  .palier { border-right: none; border-top: 1px solid var(--filet); border-bottom: none; }
  .palier--milieu { border-top: 1px solid var(--filet); border-bottom: 2px solid var(--laiton); }
  .palier:last-child { border-bottom: 1px solid var(--filet); }
}

/* 9. Formulaire */
.form-section { background: var(--basalte); color: var(--ivoire); }
.form-section h2 { color: var(--ivoire); }
.form-section .rappel { color: rgba(237, 231, 220, .75); margin-bottom: 28px; }
.champ { margin-bottom: 20px; }
.champ label {
  display: block;
  margin-bottom: 6px;
  font-size: .9375rem;
  color: rgba(237, 231, 220, .85);
}
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  background: rgba(237, 231, 220, .06);
  border: 1px solid rgba(237, 231, 220, .3);
  color: var(--ivoire);
  font-family: "Inter LP", sans-serif;
  font-size: 1rem;
  border-radius: 0;
}
.champ textarea { min-height: 96px; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: rgba(237, 231, 220, .4); }
.champ-erreur {
  display: none;
  margin-top: 6px;
  font-size: .875rem;
  color: #E8C9A0;
}
.champ.a-erreur input, .champ.a-erreur textarea { border-color: #E8C9A0; }
.champ.a-erreur .champ-erreur { display: block; }
.consentement { display: flex; gap: 10px; align-items: flex-start; margin: 24px 0; }
.consentement input { margin-top: 4px; min-width: 20px; min-height: 20px; }
.consentement label { font-size: .9375rem; color: rgba(237, 231, 220, .85); }
.form-section .btn { margin-top: 4px; }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-erreur-globale {
  display: none;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-left: 1px solid #E8C9A0;
  font-size: .9375rem;
  color: #E8C9A0;
}
.form-erreur-globale.visible { display: block; }

/* 10. Pied de page */
.pied { padding: 32px 0; }
.pied p { font-size: .875rem; color: var(--basalte-70); margin: 0; }
.pied a { color: var(--laiton-sombre); text-decoration: underline; }
/* Navigation discrete vers le reste du site : sous les mentions legales,
   volontairement en retrait pour ne jamais concurrencer le CTA ni le
   formulaire — gris attenue, pas de laiton, pas de soulignement au repos. */
.pied-nav { margin-top: 10px; font-size: .85rem; }
.pied-nav a { color: var(--basalte-60); text-decoration: none; }
.pied-nav a:hover, .pied-nav a:focus-visible { text-decoration: underline; }

/* ----------  CTA sticky mobile  ----------
   Meme mecanisme que le site principal (assets/js/landing.js observe
   .landing-hero) : ecrit ici en autonome, /lp/ n'important pas
   style.css. z-index sous le bandeau de consentement (200) pour ne
   jamais le recouvrir si les deux sont visibles en meme temps. */
.lp-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--basalte);
  border-top: 1px solid rgba(184, 162, 118, .3);
  transform: translateY(100%);
  transition: transform 220ms ease;
}
.lp-sticky-cta.is-visible { transform: translateY(0); }
.lp-sticky-cta .btn { width: 100%; text-align: center; display: block; margin: 0; }
@media (min-width: 860px) { .lp-sticky-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .lp-sticky-cta { transition: none; } }

/* ----------  Bandeau de consentement mesure (Consent Mode v2)  ----------
   Refuser et Accepter partagent une seule classe (.consent-btn) et ne
   sont différenciés par aucune règle : même taille, même fond, même
   bordure, même contraste. C'est une exigence RGPD, pas un détail. */
.consent-bandeau {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--basalte);
  border-top: 1px solid var(--laiton);
  padding: 20px 24px;
  z-index: 200;
  opacity: 0;
}
.consent-bandeau[hidden] { display: none; }
.consent-bandeau.is-visible { opacity: 1; transition: opacity 200ms ease; }
@media (prefers-reduced-motion: reduce) {
  .consent-bandeau { transition: none; }
}
.consent-bandeau:focus { outline: none; } /* reçoit le focus au clavier pour l'annonce du rôle dialog, pas pour un anneau visible sur le conteneur */

.consent-bandeau__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.consent-bandeau__texte {
  flex: 1 1 420px;
  min-width: 0;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: rgba(237, 231, 220, .88);
}
.consent-bandeau__texte a { color: var(--laiton); text-decoration: underline; white-space: nowrap; }

.consent-bandeau__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
}
.consent-btn {
  min-width: 130px;
  min-height: 44px;
  padding: 0 24px;
  font-family: "Inter LP", sans-serif;
  font-weight: 400;
  font-size: .9375rem;
  line-height: 1;
  border: 1px solid var(--laiton);
  border-radius: 0;
  background: transparent;
  color: var(--ivoire);
  cursor: pointer;
  text-align: center;
}
.consent-btn:hover { background: rgba(184, 162, 118, .14); }
.consent-btn:focus-visible { outline: 2px solid var(--laiton); outline-offset: 2px; }

@media (max-width: 640px) {
  .consent-bandeau { padding: 18px 20px; }
  .consent-bandeau__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .consent-bandeau__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .consent-btn { min-width: 0; width: 100%; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 20px; }
  .section { padding: 40px 0; }
  .hero { padding: 48px 0 40px; }
  .etape { gap: 14px; }
}