/* =========================
   Prompt & Play - Home (clean)
   ========================= */

@font-face{
  font-family:"PP-Roboto";
  src:url("/fonts/roboto-light-webfont.eot");
  src:url("/fonts/roboto-light-webfont.eot?#iefix") format("embedded-opentype"),
      url("/fonts/roboto-light-webfont.woff") format("woff");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"PP-Roboto";
  src:url("/fonts/roboto-lightitalic-webfont.eot");
  src:url("/fonts/roboto-lightitalic-webfont.eot?#iefix") format("embedded-opentype"),
      url("/fonts/roboto-lightitalic-webfont.woff") format("woff");
  font-weight:300;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"PP-Roboto";
  src:url("/fonts/roboto-bold-webfont.eot");
  src:url("/fonts/roboto-bold-webfont.eot?#iefix") format("embedded-opentype"),
      url("/fonts/roboto-bold-webfont.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"PP-Roboto";
  src:url("/fonts/roboto-black-webfont.eot");
  src:url("/fonts/roboto-black-webfont.eot?#iefix") format("embedded-opentype"),
      url("/fonts/roboto-black-webfont.woff") format("woff");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"PP-OpenSans";
  src:url("/fonts/opensans-regular-webfont.eot");
  src:url("/fonts/opensans-regular-webfont.eot?#iefix") format("embedded-opentype"),
      url("/fonts/opensans-regular-webfont.woff") format("woff"),
      url("/fonts/opensans-regular-webfont.svg") format("svg");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"PP-OpenSans";
  src:url("/fonts/opensans-bold-webfont.eot");
  src:url("/fonts/opensans-bold-webfont.eot?#iefix") format("embedded-opentype"),
      url("/fonts/opensans-bold-webfont.woff") format("woff"),
      url("/fonts/opensans-bold-webfont.svg") format("svg");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#000;
  --text:#fff;
  --muted: rgba(255,255,255,.78);
  --line: rgba(255,255,255,.18);
  --accent:#F69F09;

  --content: 980px;
  --copyw: 760px;
  --wide: 1400px;

  /* Hauteur “cible” commune des logos */
  --logo-h: 40px;

  /* Contrôle fin du rythme typographique */
  --copy-line: 16px;
  --copy-gap: 8px;     /* espace entre 2 lignes */
  --copy-gap-lg: 16px; /* espace entre 2 blocs */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: PP-Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* IMPORTANT : neutralise les marges par défaut des <p> qui foutent le bordel */
p{ margin:0; }

a{ color:#fff; text-decoration: underline; }
a:hover{ color: var(--accent); }

img{ max-width:100%; height:auto; display:block; }

.pp-wrap{ width:100%; }

.pp-content{
  width:100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 18px;
  text-align:center;
}

.pp-wide{
  width:100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 18px;
}

/* =========================
   HERO
   ========================= */
.pp-hero{
  background:
    radial-gradient(1100px 600px at 70% 40%, rgba(0,0,0,.08), rgba(0,0,0,.70)),
    url("/images/3a241e04-6653-4eeb-a5d8-dd92b2b13bad.jpg") center top / cover no-repeat;
  min-height: 70vh;
  padding: 28px 0 18px;
}

.pp-logo{
  width: min(600px, 84vw);
  margin: 6px auto 10px;
}

/* Titre */
.pp-headline h2{
  margin:0;
  font-family: PP-OpenSans, PP-Roboto, sans-serif;
  font-weight:700;
  font-size: 29px;
  line-height: 35px;
  letter-spacing: .2px;
}

/* Sous-titre */
.pp-headline p{
  margin: 6px 0 0;
  font-family: PP-OpenSans, PP-Roboto, sans-serif;
  font-weight:700;
  color: var(--muted);
  font-size: 16px;
  line-height: 22px;
}

/* =========================
   COPY (rythme FIXE, plus de trous)
   ========================= */
.pp-copy{
  width: 100%;
  max-width: var(--copyw);
  margin: 22px auto 0;
  padding: 18px 0 16px;
  border-bottom: none; /* pas de double filet */
}

/* Ligne forte */
.pp-copy-strong{
  font-family: PP-OpenSans, PP-Roboto, sans-serif;
  font-weight:700;
  color:#fff;
  font-size: 16px;
  line-height: var(--copy-line);
  margin: 0 0 var(--copy-gap);
}

/* Corps du texte */
.pp-copy-lines{
  font-family: PP-Roboto, sans-serif;
  font-weight:300;
  font-size: 16px;
  line-height: var(--copy-line);
  color: rgba(255,255,255,.88);

  /* IMPORTANT : au lieu de margin-bottom global, on contrôle “ligne par ligne” */
  margin: 0;
}

/* Si ton HTML a des <p> successifs à l’intérieur de .pp-copy-lines, on met un petit gap propre */
.pp-copy-lines p{ margin: 0 0 var(--copy-gap); }
.pp-copy-lines p:last-child{ margin-bottom: 0; }

/* Pour créer de “vrais” breaks entre blocs, tu ajoutes la class pp-gap à certains <p> dans ton HTML */
.pp-copy-lines p.pp-gap{ margin-bottom: var(--copy-gap-lg); }

.pp-strong{
  font-family: PP-Roboto, sans-serif;
  font-weight:700;
  color:#fff;
}

.pp-italic{
  font-style: italic;
  opacity: .98;
}

.pp-divider{
  margin: 10px 0 14px;
  letter-spacing: 2px;
  opacity: .75;
  font-size: 16px;
  line-height: var(--copy-line);
}

/* =========================
   BARRE LOGOS (cohérence + 2 lignes)
   ========================= */
.pp-logosbar{
  width:100%;
  padding: 18px 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pp-logos{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap;
  gap: 18px 34px;
  opacity: .55;
}

.pp-logos img{
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
  display:block;
}

/* Ajustements optiques (minimes) */
.pp-logos img.pp-logo-claude{ transform: scale(.96); transform-origin:center; }
.pp-logos img.pp-logo-gemini{ transform: scale(1.02); transform-origin:center; }
.pp-logos img.pp-logo-hostinger{ transform: scale(.98); transform-origin:center; }
.pp-logos img.pp-logo-make{ transform: scale(.98); transform-origin:center; }
.pp-logos img.pp-logo-n8n{ transform: scale(1.06); transform-origin:center; }
.pp-logos img.pp-logo-notion{ transform: scale(1.02); transform-origin:center; }
.pp-logos img.pp-logo-openai{ transform: scale(1.00); transform-origin:center; }
.pp-logos img.pp-logo-zapier{ transform: scale(1.02); transform-origin:center; }

/* =========================
   FEED LINKEDIN
   ========================= */
.pp-feed{
  width:100%;
  padding: 18px 0 26px;
}
.pp-feed .elfsight-app-e0d7d22e-8da8-4b20-b28f-79d53b046691{
  width:100%;
}

/* =========================
   FOOTER / CONTACT
   ========================= */
.pp-footer{
  width:100%;
  padding: 18px 0 42px;
  background: #000;
}

.pp-contact{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.pp-portraitWrap{
  position: relative;
  width: min(640px, 94vw);
  display:flex;
  align-items:center;
  justify-content:center;
}

.pp-portrait{
  width: 100%;
  max-width: 640px;
}

.pp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:300;
  letter-spacing:1px;
  font-size:14px;
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .12s ease, background .12s ease;
  white-space:nowrap;
}

.pp-btn:hover{
  background:#141414;
  color:#fff;
  transform: translateY(-1px);
}

.pp-btnOverlay{
  position:absolute;
  top: 40%;
  left: 80%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* pas de jump */
.pp-btn.pp-btnOverlay:hover{
  transform: translate(-50%, -50%) translateY(-1px);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 820px){
  :root{
    --copyw: 680px;
    --logo-h: 36px;
    --copy-line: 23px;
    --copy-gap: 7px;
    --copy-gap-lg: 14px;
  }

  .pp-headline h2{ font-size: 24px; line-height: 30px; }
  .pp-headline p{ font-size: 15px; line-height: 22px; }

  .pp-copy-strong,
  .pp-copy-lines,
  .pp-divider{ font-size: 15px; line-height: var(--copy-line); }

  .pp-btnOverlay{ top: 42%; left: 78%; }
  .pp-btn.pp-btnOverlay:hover{ transform: translate(-50%, -50%) translateY(-1px); }
}

@media (max-width: 520px){
  :root{
    --copyw: 92vw;
    --logo-h: 32px;
    --copy-line: 18px;
    --copy-gap: 7px;
    --copy-gap-lg: 12px;
  }

  .pp-headline h2{ font-size: 20px; line-height: 26px; }
  .pp-headline p{ font-size: 14px; line-height: 21px; }

  .pp-copy-strong,
  .pp-copy-lines,
  .pp-divider{ font-size: 14px; line-height: var(--copy-line); }

  .pp-portraitWrap{ width: min(480px, 96vw); }

  .pp-btnOverlay{
    top: 44%;
    left: 76%;
    font-size: 13px;
    padding: 10px 16px;
  }
  .pp-btn.pp-btnOverlay:hover{
    transform: translate(-50%, -50%) translateY(-1px);
  }
}