/* FB Logic Ventures, site de présentation.

   Thème clair, monochrome, traits fins : le logo est un dessin au trait noir
   sur fond transparent, conçu sur blanc. Un fond sombre aurait obligé à
   l'inverser, donc à le déformer. On adapte le site au logo, jamais l'inverse.

   Aucune ressource externe : ni police distante, ni script tiers. Le site se
   charge sans dépendre de personne, et aucune donnée du visiteur ne part vers
   un tiers, ce qui évite au passage la question du consentement. */

:root {
  --fond: #ffffff;
  --fond-doux: #fafafa;
  --trait: #e6e6e6;
  --texte: #101010;
  --texte-doux: #6b6b6b;
  --largeur: 960px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--largeur); margin: 0 auto; padding: 0 26px; }

a { color: var(--texte); text-decoration: none; border-bottom: 1px solid var(--trait); }
a:hover { border-bottom-color: var(--texte); }

/* ── En-tête ───────────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px;
}
.marque {
  display: flex; align-items: center; gap: 10px;
  border: none; letter-spacing: 0.5px;
}
.marque:hover { border: none; }
.marque img { height: 34px; width: auto; display: block; }
.marque .nom { font-size: 14.5px; font-weight: 500; }
nav a {
  color: var(--texte-doux); font-size: 14px; font-weight: 400;
  margin-left: 28px; border: none;
}
nav a:hover { color: var(--texte); border: none; }

/* ── Bandeau d'accueil ─────────────────────────────────────────────── */
/* Le retrait latéral est répété ici : « hero » et « wrap » ont la même force,
   et la règle la plus tardive l'emportait, ce qui collait le texte aux bords
   sur mobile. */
.hero { padding: 104px 26px 96px; text-align: center; }
.hero .embleme { width: 140px; height: auto; margin: 0 auto 40px; display: block; }
.hero h1 {
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: 1.06; font-weight: 300; letter-spacing: -2px;
  margin: 0 auto;
}
.hero .baseline {
  margin: 28px auto 0; font-size: clamp(16px, 1.9vw, 18.5px);
  color: var(--texte-doux); max-width: 52ch; line-height: 1.6;
}
.actions {
  margin-top: 36px; display: flex; gap: 12px;
  flex-wrap: wrap; justify-content: center;
}
.bouton {
  display: inline-block; padding: 12px 26px; border-radius: 2px;
  font-weight: 500; font-size: 14.5px; letter-spacing: 0.3px;
  background: var(--texte); color: #fff; border: 1px solid var(--texte);
}
.bouton:hover { background: #000; border-color: #000; }
.bouton.secondaire {
  background: transparent; color: var(--texte); border: 1px solid var(--trait);
}
.bouton.secondaire:hover { background: transparent; border-color: var(--texte); }

/* ── Sections ──────────────────────────────────────────────────────── */
section { padding: 74px 0; border-top: 1px solid var(--trait); }
h2 {
  font-size: clamp(21px, 2.6vw, 26px); font-weight: 400;
  letter-spacing: -0.3px; margin-bottom: 10px;
}
.intro { color: var(--texte-doux); max-width: 62ch; margin-bottom: 40px; }

.grille {
  display: grid; gap: 1px; background: var(--trait);
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  border: 1px solid var(--trait);
}
.carte { background: var(--fond); padding: 28px 24px; }
.carte h3 {
  font-size: 15px; font-weight: 600; margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.carte p { color: var(--texte-doux); font-size: 14.5px; }

/* ── Produit mis en avant ──────────────────────────────────────────── */
.produit {
  border: 1px solid var(--trait); background: var(--fond-doux);
  padding: 38px 34px;
}
.produit .accroche {
  color: var(--texte-doux); font-size: 12.5px; font-weight: 500;
  letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 14px;
}
.produit h3 { font-size: 24px; font-weight: 500; margin-bottom: 10px; }
.produit p { color: var(--texte-doux); font-size: 15.5px; max-width: 60ch; }
.produit .lien {
  margin-top: 22px; display: inline-block;
  font-weight: 500; font-size: 15px;
}

/* ── Formulaire ────────────────────────────────────────────────────── */
.formulaire { display: grid; gap: 16px; max-width: 620px; margin-bottom: 46px; }
.formulaire label {
  display: grid; gap: 6px; font-size: 13.5px; color: var(--texte-doux);
}
.formulaire .opt { color: #a3a3a3; }
.formulaire .deux { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.formulaire input, .formulaire select, .formulaire textarea {
  font: inherit; font-size: 15px; color: var(--texte);
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: 2px; padding: 11px 13px; width: 100%;
}
.formulaire textarea { resize: vertical; min-height: 130px; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
  outline: none; border-color: var(--texte);
}
.formulaire button {
  font: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: 0.3px;
  background: var(--texte); color: #fff; border: 1px solid var(--texte);
  border-radius: 2px; padding: 13px 30px; cursor: pointer; justify-self: start;
}
.formulaire button:hover { background: #000; }
.formulaire button:disabled { opacity: 0.5; cursor: default; }
.formulaire .rgpd { font-size: 12.5px; color: var(--texte-doux); }
.formulaire .etat { font-size: 13.5px; min-height: 20px; }
.formulaire .etat.ok { color: #1a7f37; }
.formulaire .etat.erreur { color: #b42318; }
/* Champ piège : hors écran, jamais atteint au clavier. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; }

@media (max-width: 560px) {
  .formulaire .deux { grid-template-columns: 1fr; }
}

/* ── Contact ───────────────────────────────────────────────────────── */
.apres-formulaire { color: var(--texte-doux); font-size: 13.5px; }

/* ── Étapes numérotées ─────────────────────────────────────────────── */
.etapes { list-style: none; display: grid; gap: 44px; }
.etapes li { display: grid; gap: 8px; max-width: 62ch; }
.etapes .num {
  font-size: 12.5px; font-weight: 500; letter-spacing: 1.6px;
  color: var(--texte-doux);
}
.etapes h3 {
  font-size: clamp(19px, 2.4vw, 24px); font-weight: 400;
  letter-spacing: -0.4px;
}
.etapes p { color: var(--texte-doux); font-size: 15.5px; }

.produit .slogan {
  font-size: 16px; font-style: italic; color: var(--texte);
  margin-bottom: 12px;
}

/* ── Pied de page ──────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--trait); padding: 52px 0 56px;
  color: var(--texte-doux); font-size: 13.5px;
}
footer .colonnes {
  display: grid; gap: 32px; margin-bottom: 40px;
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
footer .colonne { display: grid; gap: 9px; align-content: start; }
footer .colonne h4 {
  font-size: 12px; font-weight: 600; color: var(--texte);
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 3px;
}
footer .colonne a { color: var(--texte-doux); border: none; }
footer .colonne a:hover { color: var(--texte); }
footer .signature { width: 74px; height: auto; opacity: 0.75; }
footer .bas { border-top: 1px solid var(--trait); padding-top: 22px; }

@media (max-width: 760px) {
  footer .colonnes { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ── Page des mentions ─────────────────────────────────────────────── */
/* Même écueil que pour « hero » : le retrait latéral doit être redonné. */
.page { padding: 56px 26px 40px; max-width: 720px; }
.page h1 { font-size: 30px; font-weight: 300; margin-bottom: 28px; }
.page h2 { font-size: 16px; font-weight: 600; margin: 30px 0 8px; }
.page p { color: var(--texte-doux); font-size: 15px; margin-bottom: 10px; }

@media (max-width: 620px) {
  .hero { padding: 62px 22px 56px; }
  .hero .embleme { width: 104px; margin-bottom: 26px; }
  section { padding: 56px 0; }
  nav a { margin-left: 18px; font-size: 13px; }
  .marque .nom { display: none; }
}