/* ============================================================
   BUREAU DE BEAUFORT — LANDING (css/landing.css)
   ------------------------------------------------------------
   Styles SPÉCIFIQUES à web/index.html, portés depuis
   web-maquette/index.html. Le reset / body / typo / boutons /
   cartes génériques vivent déjà dans css/theme.css (chargé
   avant celui-ci) — on ne les redéfinit pas ici. Toutes les
   couleurs passent par var(--...) (theme.json).
   ============================================================ */

/* La landing scrolle en douceur vers les ancres (#comment, #prix...). */
html{scroll-behavior:smooth}

/* theme.css met body en flex (mise en page app avec sidebar) : la landing
   n'a pas de sidebar, on repasse en flux normal + retire la contrainte de
   taille/hauteur de ligne de l'app pour retrouver les proportions maquette. */
body.page-landing{display:block;min-height:0;font-size:16px;line-height:1.6}

/* Colonne centrale commune à toutes les sections. */
.conteneur{max-width:1140px;margin:0 auto;padding:0 28px}

/* ===== En-tête sticky ===== */
.entete-landing{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--papier) 90%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne)}
.entete-landing nav{display:flex;align-items:center;justify-content:space-between;height:74px}
/* Le logo est désormais une image du kit (session 102) : plus de nom recomposé
   en Fraunces. Les règles .logo/.logo em de composition typographique sont donc
   retirées — les tracés sont vectorisés, on n'utilise QUE le fichier fourni.
   Aucun padding ajouté : la zone de protection (1/4 de la hauteur du
   monogramme) est déjà intégrée au SVG. */
.entete-landing .logo{display:flex;align-items:center}
.entete-landing .logo img{display:block;height:auto}
.entete-landing .logo .long{width:180px}          /* minimum EXACT du kit */
.entete-landing .logo .court{display:none;width:32px}   /* monogramme, min. 16 px */
.entete-landing .nav-liens{display:flex;gap:32px;align-items:center;font-size:.92rem;font-weight:500}
.entete-landing .nav-liens a:not(.btn){color:var(--encre-doux);transition:.2s}
.entete-landing .nav-liens a:not(.btn):hover{color:var(--encre)}

/* ===== Héros ===== */
.hero{padding:84px 0 96px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
/* Verrouillage vertical, version principale du kit (min. 90 px de large). */
.logo-hero{display:block;width:170px;height:auto;margin-bottom:26px}
.eyebrow{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-fonce);background:var(--accent-voile);display:inline-block;padding:5px 12px;border-radius:999px;font-weight:600;margin-bottom:22px}
.hero h1{font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:1.08;font-weight:600;margin-bottom:22px}
.hero h1 span{color:var(--accent)}
.hero .sous-texte-hero{color:var(--encre-doux);font-size:1.06rem;max-width:46ch;margin-bottom:34px}
.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.mention{font-size:.82rem;color:var(--encre-doux);margin-top:22px}

/* ===== Scène héros : carte inclinée + cachet de cire + enveloppe ===== */
.scene{position:relative}
.carte{background:var(--blanc-carte);border:1px solid var(--ligne);box-shadow:0 30px 60px -24px rgba(38,48,63,.4),0 2px 8px rgba(38,48,63,.08);padding:42px 40px 38px;aspect-ratio:148/105;border-radius:12px;transform:rotate(-1.1deg)}
.carte-texte{font-family:'Caveat',cursive;font-size:clamp(1.15rem,1.9vw,1.55rem);color:var(--accent);line-height:1.55;white-space:pre-wrap;min-height:100%}
.plume-curseur{display:inline-block;width:2px;height:1.1em;background:var(--accent);vertical-align:-.2em;margin-left:1px;animation:bdb-clignote 1s steps(1) infinite}
@keyframes bdb-clignote{50%{opacity:0}}
.enveloppe{position:absolute;right:-18px;bottom:-46px;width:56%;background:var(--papier-2);border:1px solid var(--ligne);aspect-ratio:220/110;border-radius:10px;transform:rotate(2.2deg);box-shadow:0 18px 40px -18px rgba(38,48,63,.32);display:flex;align-items:center;justify-content:center}
.enveloppe span{font-family:'Homemade Apple',cursive;font-size:.85rem;color:var(--encre);line-height:1.9;text-align:center}
.cachet{position:absolute;top:-14px;left:-14px;width:52px;height:52px;border-radius:50%;background:var(--cire);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;box-shadow:0 8px 16px -6px rgba(140,58,46,.6)}

/* ===== Sections génériques (titres, filet, sous-titre) ===== */
section{padding:84px 0}
.titre-section{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:600;margin-bottom:14px}
.sous-titre{color:var(--encre-doux);max-width:58ch;margin-bottom:48px}
.sous-titre.marge-basse{margin-bottom:22px}
.filet{width:44px;height:3px;background:var(--accent);border-radius:999px;margin-bottom:24px}
.accent-italique{font-style:italic;color:var(--accent)}

/* ===== Comment ça marche (3 étapes) ===== */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.etape .num{font-family:'Fraunces',serif;font-size:2.4rem;color:var(--accent);line-height:1;margin-bottom:12px;font-weight:600}
.etape h3{font-size:1.14rem;margin-bottom:10px;font-weight:600}
.etape p{color:var(--encre-doux);font-size:.94rem}

/* ===== Formats & prix (fond sombre --encre) ===== */
.prix{background:var(--encre);color:#fff}
.prix .titre-section{color:#fff}
.prix .sous-titre{color:rgba(255,255,255,.62)}
.grille-formats{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.bloc-format{border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:32px 30px}
.bloc-format h3{font-size:1.32rem;margin-bottom:6px;font-weight:600}
.bloc-format .dim{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dore);margin-bottom:8px}
.bloc-format .desc{font-size:.9rem;color:rgba(255,255,255,.58);margin-bottom:24px}
.ligne-presta{display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.ligne-presta .nom{font-weight:600;font-size:.95rem}
.ligne-presta .detail{font-size:.83rem;color:rgba(255,255,255,.55);margin-top:3px;max-width:38ch}
.ligne-presta .tarif{text-align:right;white-space:nowrap}
.ligne-presta .tarif b{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:600}
.ligne-presta .tarif small{display:block;font-size:.75rem;color:rgba(255,255,255,.5)}

/* ===== Votre écriture (échantillons de styles) ===== */
.signature-bloc{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.echantillons{display:flex;flex-direction:column;gap:16px}
.echantillon{background:var(--blanc-carte);border:1px solid var(--ligne);padding:20px 26px;border-radius:14px;box-shadow:var(--ombre)}
.echantillon .txt{color:var(--accent);font-size:1.5rem;line-height:1.3}
.echantillon .lib{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-doux);margin-top:6px}

/* ===== CTA final ===== */
.cta-final{text-align:center;padding:104px 0}
.cta-final h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-bottom:16px;font-weight:600}
.cta-final p{color:var(--encre-doux);margin-bottom:34px}

/* ===== Pied de page ===== */
footer{border-top:1px solid var(--ligne);padding:34px 0;font-size:.84rem;color:var(--encre-doux)}
/* Verrouillage -reserve : le bloc encre est DANS le fichier, donc pas de fond
   ni de padding ici — on lui donne seulement de l'air autour (rien ne doit
   entrer dans sa zone de protection). */
/* Pas de border-radius : arrondir les angles du bloc de réserve reviendrait à
   modifier le logo (le rectangle encre fait partie du fichier). */
.logo-pied{display:block;width:120px;height:auto;margin:0 0 26px}
.pied-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ===== Responsive ===== */
@media (max-width:880px){
  .hero,.grille-formats,.signature-bloc,.etapes{grid-template-columns:1fr}
  .hero{padding-top:48px;gap:80px}
  .entete-landing .nav-liens a:not(.btn){display:none}
  /* Le verrouillage horizontal ne descend PAS sous 180 px (minimum du kit) et
     180 px + le bouton ne tiennent plus dans une barre de 390 px : on bascule
     donc sur le MONOGRAMME plutôt que de rétrécir le verrouillage. */
  .entete-landing .logo .long{display:none}
  .entete-landing .logo .court{display:block}
  .logo-hero{width:150px;margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .plume-curseur{animation:none}
}