/* ==========================================================================
   Pool Party — Présentation (refactor)
   - Variables & thèmes
   - Bases / helpers
   - Boutons
   - HERO
   - Sections / titres
   - Grilles / cartes
   - Sections spécifiques (Problem / How / Split / Trust / FAQ / CTA)
   - Placeholders
   - Responsive
   - Accessibilité
   ========================================================================== */


/* =========================
   Variables & thème
   ========================= */

:root{
  /* Couleurs (thème sombre) */
  --pp-bg:#0b1220;
  --pp-grad-a:#0b1220;
  --pp-grad-b:#101a2f;
  --pp-card:#101727;
  --pp-soft:#111b2e;
  --pp-border:#1f2a44;
  --pp-text:#e6ecff;
  --pp-muted:#a8b3cf;
  --pp-primary:#4f8cff;
  --pp-primary-2:#82a9ff;
  --pp-ghost:rgba(255,255,255,.06);
  --pp-ring:rgba(79,140,255,.35);

  /* Rythme / rayons / ombres */
  --pp-space-1:6px;  --pp-space-2:10px; --pp-space-3:12px; --pp-space-4:16px;
  --pp-space-5:20px; --pp-space-6:24px; --pp-space-7:28px; --pp-space-8:32px;
  --pp-r:12px; --pp-r-lg:16px;
  --pp-shadow-sm:0 2px 12px rgba(0,0,0,.08);
  --pp-shadow-md:0 10px 24px rgba(0,0,0,.18);

  /* Layout */
  --pp-container:1100px;

  /* Typo fluides */
  --pp-h1:clamp(26px, 3.5vw, 44px);
  --pp-h2:clamp(22px, 2.5vw, 30px);
  --pp-h3:18px;
  --pp-p:16px;
}

/* Conseille au navigateur un rendu sombre (scrollbars, formulaires natifs) */
:root { color-scheme: dark; }


/* =========================
   Bases / helpers
   ========================= */

.wrap.container{ max-width:var(--pp-container); margin-inline:auto; padding-inline:20px; }
h1,h2,h3{ color:var(--pp-text); line-height:1.2; }
h1{ font-size:var(--pp-h1); margin:0 0 var(--pp-space-3); }
h2{ font-size:var(--pp-h2); margin:0 0 var(--pp-space-2); }
h3{ font-size:var(--pp-h3); margin:var(--pp-space-3) 0 var(--pp-space-2); }
p,li,summary{ color:var(--pp-text); font-size:var(--pp-p); }
.muted{ color:var(--pp-muted); }
.center{ text-align:center; }
.mt-20{ margin-top:20px; }

/* Liens génériques */
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Contours focus visibles et cohérents */
:where(a,button,[role="button"],summary).focus-ring,
:where(.pp-btn, .pp-btn--line, .pp-btn--ghost, .pp-btn--primary):focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--pp-ring);
  border-radius:inherit;
}


/* =========================
   Boutons
   ========================= */

.pp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 18px; border-radius:var(--pp-r);
  font-weight:600; text-decoration:none; line-height:1;
  border:1px solid transparent; cursor:pointer; transition:filter .2s, box-shadow .2s, transform .05s;
}
.pp-btn:active{ transform:translateY(1px); }

.pp-btn--primary{ background:var(--pp-primary); color:#fff; }
.pp-btn--primary:hover{ filter:brightness(1.05); box-shadow:0 0 0 6px var(--pp-ring); }

.pp-btn--ghost{ background:var(--pp-ghost); color:var(--pp-text); border-color:var(--pp-border); }
.pp-btn--ghost:hover{ background:rgba(255,255,255,.1); }

.pp-btn--line{ background:transparent; border-color:var(--pp-border); color:var(--pp-text); }
.pp-btn--line:hover{ border-color:var(--pp-primary); }


/* =========================
   HERO
   ========================= */

.pp-hero{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(79,140,255,.25), transparent 60%),
    linear-gradient(180deg, var(--pp-grad-a), var(--pp-grad-b));
  padding-block:70px 50px;
}
.pp-hero__inner{
  display:grid; grid-template-columns:1.2fr 1fr; gap:var(--pp-space-7); align-items:center;
}
.pp-hero__logo{
  width:160px; height:auto; margin-bottom:var(--pp-space-3);
  filter:drop-shadow(0 2px 20px rgba(79,140,255,.25));
}
.pp-hero__title{ font-size:var(--pp-h1); margin:0 0 var(--pp-space-2); }
.pp-hero__subtitle{ color:var(--pp-muted); font-size:clamp(15px,1.6vw,18px); margin:0 0 var(--pp-space-3); }
.pp-hero__cta{ display:flex; gap:12px; margin:10px 0 6px; flex-wrap:wrap; }
.pp-hero__meta{ display:flex; gap:16px; flex-wrap:wrap; color:var(--pp-muted); font-size:14px; margin-top:8px; }
.pp-hero__media{ border-radius:var(--pp-r-lg); min-height:280px; overflow:hidden; }


/* =========================
   Sections / titres
   ========================= */

.sec-head{ text-align:center; margin:50px 0 22px; }
.sec-head h2{ font-size:var(--pp-h2); margin:0 0 6px; }


/* =========================
   Grilles / cartes
   ========================= */

.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }

.card{
  background:var(--pp-card);
  border:1px solid var(--pp-border);
  border-radius:var(--pp-r-lg);
  padding:18px;
  box-shadow:var(--pp-shadow-sm);
}
.card.soft{ background:var(--pp-soft); }
.card h3{ margin:10px 0 6px; font-size:var(--pp-h3); }
.card p{ color:var(--pp-muted); }

.ico svg{ width:28px; height:28px; fill:none; stroke:var(--pp-primary-2); stroke-width:1.6; display:block; }


/* =========================
   Sections spécifiques
   ========================= */

/* Problem */
.pp-problem{ background:#0d1527; padding-block:30px 40px; }

/* How (steps) */
.pp-how{ background:linear-gradient(180deg, #0d1527, #0b1220); padding-block:20px 40px; }
.steps .step{
  background:var(--pp-card); border:1px solid var(--pp-border);
  border-radius:var(--pp-r-lg); padding:18px;
}
.steps .badge{
  display:inline-flex; width:28px; height:28px; border-radius:50%;
  background:var(--pp-primary); color:#fff; align-items:center; justify-content:center; font-weight:700; margin-bottom:8px;
}

/* Split blocks */
.pp-split{ background:var(--pp-bg); padding-block:20px 40px; }
.pp-split.alt{ background:#0d1527; }
.split{ display:grid; grid-template-columns:1fr 1.1fr; gap:24px; align-items:center; }
.split__media{ border-radius:var(--pp-r-lg); overflow:hidden; }
.tick{ color:var(--pp-text); }
.tick li{
  margin:6px 0; position:relative; padding-left:22px; color:var(--pp-muted);
}
.tick li::before{
  content:"✓"; position:absolute; inset-inline-start:0; inset-block-start:0; color:var(--pp-primary); font-weight:700;
}
.cta-line{ margin-top:12px; }

/* Trust */
.pp-trust{ background:var(--pp-bg); padding-block:20px 40px; }

/* FAQ */
.pp-faq{ background:#0d1527; padding-block:20px 50px; }
.faq details{
  background:var(--pp-card); border:1px solid var(--pp-border); border-radius:12px;
  padding:12px 14px; margin:10px 0;
}
.faq summary{ cursor:pointer; font-weight:600; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq p{ margin:8px 0 0; color:var(--pp-muted); }

/* CTA final */
.pp-cta{ background:linear-gradient(180deg, #0b1220, #0d1527); padding-block:40px 70px; text-align:center; }
.pp-cta h2{ font-size:var(--pp-h2); margin-bottom:14px; }
.pp-cta__btns{ display:inline-flex; gap:12px; flex-wrap:wrap; }


/* =========================
   Placeholders visuels
   ========================= */

.ph{
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px dashed var(--pp-border);
}
.ph.ratio-4x3{ aspect-ratio:4 / 3; border-radius:12px; }
.ph.ratio-3x4{ aspect-ratio:3 / 4; border-radius:16px; }
.pp-hero__media.ph{
  aspect-ratio:16 / 12;
  background:
    radial-gradient(60% 40% at 60% 20%, rgba(79,140,255,.15), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}


/* =========================
   Responsive
   ========================= */

/* ≤ 900px : colonnes -> pile */
@media (max-width:900px){
  .pp-hero__inner{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .pp-hero__title{ font-size:clamp(24px, 6vw, 32px); }
}

/* ≤ 480px : resserrage mobile */
@media (max-width:480px){
  .wrap.container{ padding-inline:14px; }
  .pp-hero{ padding-block:50px 40px; }
  .pp-hero__logo{ width:120px; }
  .pp-hero__cta{ flex-direction:column; gap:10px; align-items:stretch; }
  .pp-hero__meta{ flex-direction:column; gap:8px; font-size:13px; }
  .pp-cta__btns{ flex-direction:column; }
}

/* ≥ 768px : équilibre tablette */
@media (min-width:768px){
  .pp-hero__inner{ grid-template-columns:1fr 1fr; }
}

/* ≥ 1024px : desktop doux */
@media (min-width:1024px){
  .wrap.container{ padding-inline:20px; }
}

/* ≥ 1280px : grandes tailles */
@media (min-width:1280px){
  .pp-hero__title{ font-size:clamp(38px, 3.3vw, 44px); }
}

/* Safe areas (iOS notch) */
@supports(padding:max(0px)){
  .wrap.container{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
}


/* =========================
   Accessibilité
   ========================= */

/* Préférence utilisateur : moins d’animations */
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto; transition:none !important; }
}

/* Focus plus visibles si navigation clavier */
:focus-visible{
  outline:2px solid var(--pp-primary);
  outline-offset:2px;
}

/* Renforce les contrastes sur les petits écrans (optionnel) */
@media (max-width:480px){
  .card p, .faq p{ color: #d6dcf2; }
}

/* ========================================================================
   FIX responsive < 400px : pas de débordement + CTA centrés
   ======================================================================== */
@media (max-width: 400px) {

  /* Bloquer le débordement horizontal */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Forcer les sections à rentrer */
  .wrap.container,
  .pp-hero,
  .pp-split,
  .pp-how,
  .pp-faq,
  .pp-cta {
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* Grilles en une seule colonne */
  .pp-hero__inner,
  .grid-3,
  .split {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Images & médias fluides */
  img,
  video,
  iframe,
  .pp-hero__media,
  .split__media,
  .ph {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }

  /* Boutons en pleine largeur et centrés */
  .pp-btn,
  .pp-cta__btns a {
    width: 100%;
    justify-content: center;
  }

  /* Boutons de la première section centrés */
  .pp-hero__cta {
    flex-direction: column;
    align-items: center;
  }

  /* Textes longs qui se cassent */
  h1, h2, h3, p, li, summary {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
}