/* =========================================================
   0) RESET + TOKENS
========================================================= */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Palette */
  --bg-main:#0f1419;
  --bg-panel:#161d24;
  --bg-soft:#1d2630;

  --accent-yellow:#f5c84b;
  --accent-blue:#3fa9f5;

  --text:#e8edf2;
  --muted:#9aa6b2;
  --dim:#6b7785;

  --line: rgba(255,255,255,0.08);
  --line2: rgba(255,255,255,0.12);

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  /* Hero vars */
  --radius: 18px;
  --thumbRadius: 12px;

  /* WWA tokens (fusionnés ici) */
  --wwa-bg:#0b1217;
  --wwa-line: rgba(255,255,255,.10);
  --wwa-text:#e9eef3;
  --wwa-muted: rgba(233,238,243,.62);
  --wwa-green:#f5c84b;
}

/* =========================================================
   1) BASE / LAYOUT
========================================================= */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 650px at 20% 0%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(180deg, #0d1217, var(--bg-main));
  min-height:100vh;
  padding:18px;
}

.wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 0 30px;
}

/* =========================================================
   2) HEADER (PB) — aligné au site (1240px)
========================================================= */
/* garder le sticky */
.pb-header{
  position: sticky;
  top: 14px;
  z-index: 999;
}

/* l’ancre du drawer = pb-bar (pas pb-header) */
.pb-bar{ position: relative; }

/* bar = le vrai conteneur du header */
.pb-bar{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);

  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.28));
  backdrop-filter: blur(10px);
}

.pb-logo img{
  height: 34px;
  width: auto;
  display:block;
}

/* NAV */
.pb-nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.pb-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(233,238,245,.90);
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}
.pb-pill:hover{ border-color: rgba(255,255,255,.20); }

.pb-cta{
  color: #0b1217;
  background: var(--accent-yellow);
  border-color: transparent;
}

/* MOBILE */
.pb-mobile{
  display:none;
  align-items:center;
  gap:10px;
}

.pb-burger{
  height: 40px;
  min-width: 46px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(233,238,245,.92);
  font-weight: 900;
  font-size: 16px;
  cursor:pointer;
}

/* Drawer */
.pb-drawer{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.28));
  backdrop-filter: blur(10px);
  overflow:hidden;
  display:none;
}

.pb-ditem{
  display:block;
  padding: 14px 14px;
  text-decoration:none;
  color: rgba(233,238,245,.92);
  font-weight: 800;
  border-top: 1px solid rgba(255,255,255,.08);
}
.pb-ditem:first-child{ border-top:0; }

.pb-ditem-cta{
  background: rgba(245,200,75,.10);
  color: var(--accent-yellow);
}

/* Responsive: desktop = nav, mobile = burger only (pas de bouton Acheter visible) */
@media (max-width: 860px){
  .pb-nav{ display:none; }
  .pb-mobile{ display:flex; }

  /* retire le bouton "Acheter" en mobile */
  .pb-mobile .pb-pill{ display:none; }

  .pb-logo img{ height: 30px; }
}

/* =========================================================
   3) HERO 5 PHOTOS (Piman Bouk)
========================================================= */
.hero-stage{
  position: relative;
  margin-top: 14px;
  border-radius: var(--radius);
  padding: 18px;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
  border: 1px solid var(--line);
  overflow: hidden;
}

/* ... (le reste inchangé) ... */

.side{
  position:absolute;
  top: 18px;
  bottom: 92px;
  width: 110px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:.9;
}
.side.left{ left: 18px; }
.side.right{ right: 18px; }

.side .side-img{
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  filter: saturate(.9) contrast(1.02);
}
.side .side-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.06);
}

.main{
  position: relative;
  margin: 0 132px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: #0a0a0a;
  aspect-ratio: 16/9;
  min-height: 320px;
}

.main img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
  opacity: 1;
  transition: opacity .28s ease;
}
.main img.is-fading{ opacity: 0; }

.main::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 55%);
  pointer-events:none;
}

.caption{
  position:absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  z-index:2;
}

.caption h1{
  font-size: clamp(18px, 2.3vw, 30px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
}
.caption p{
  margin-top: 8px;
  color: rgba(233,238,245,.82);
  font-size: clamp(12px, 1.4vw, 15px);
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-weight: 900;
  user-select:none;
}

.btn-amazon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.0);
  background: var(--accent-yellow);
  color:#111;
  text-decoration:none;
  font-size: 13px;
  font-weight: 900;
  white-space:nowrap;
}

.thumbs{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap:nowrap;
  overflow:auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
}
.thumbs::-webkit-scrollbar{ display:none; }

.thumb{
  flex: 0 0 auto;
  width: 170px;
  aspect-ratio: 16/9;
  border-radius: var(--thumbRadius);
  overflow:hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  cursor:pointer;
  opacity:.78;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.thumb[aria-current="true"]{
  opacity: 1;
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

@media (max-width: 860px){
  .side{ display:none; }
  .main{ margin: 0; }
  .hero-stage{ padding: 14px; }
  .thumb{ width: 150px; }
}
@media (max-width: 520px){
  .thumb{ width: 132px; }
  .caption{ left: 14px; right: 14px; bottom: 14px; }
  .badge{ display:none; }
}

/* =========================================================
    Book
========================================================= */
/* === Testimonial card (exact style) === */
.tcard{
  max-width: 1240px;

  /* ✅ centre + espace au-dessus */
  margin: 14px auto 0;

  display:grid;
  grid-template-columns: 1fr 1.3fr;
  border-radius: 26px;
  border: 1px solid var(--line);
  overflow:hidden;
  background:#1d2428;
}

.tcard__media{
  background:#e9ecef;
}

.tcard__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
}

.tcard__content{
  padding: 64px 64px 56px;
  background:#0b1217;
  color: rgba(255,255,255,.92);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 36px;
}

/* si certains titres/liens sont forcés ailleurs */
.tcard__content :where(h1,h2,h3,h4,p,li,span,a,strong,em){
  color: rgba(255,255,255,.92);
}
/* right panel */
.tcard__content{
  padding: 64px 64px 56px;
  background:#0b1217;

  /* ✅ gris lisible (comme ton screenshot) */
  color: rgba(233,238,245,.62);

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 36px;
}

/* force le même gris sur le contenu texte */
.tcard__content p,
.tcard__content li,
.tcard__content span{
  color: rgba(233,238,245,.62);
}

/* titres un peu plus visibles (optionnel) */
.tcard__content h1,
.tcard__content h2,
.tcard__content h3{
  color: rgba(233,238,245,.82);
}

.tcard__quote{
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: .01em;
  margin:0;
  max-width: 640px;
}

.tcard__meta{
  margin-top: 6px;
}

.tcard__name{
  font-weight: 800;
  font-size: 20px;
  margin:0 0 10px;
}

.tcard__role{
  font-size: 14px;
  color: rgba(255,255,255,.62);
}

.tcard__role strong{
  color: rgba(255,255,255,.88);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 980px){
  .tcard{
    grid-template-columns: 1fr;
  }
  .tcard__media{
    height: 320px;
  }
  .tcard__content{
    padding: 34px 26px 30px;
  }
  .tcard__quote{
    font-size: 20px;
  }
}


/* =========================================================
   4) SECTION TITLE (Écouter les morceaux)
========================================================= */
.hero{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.20));
}
.heroTitle{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.heroTitle h2{
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing:.12em;
  text-transform: uppercase;
  font-weight: 900;
}
.heroTitle .sub{
  color: var(--muted);
  font-size: 13px;
  letter-spacing:.02em;
}

/* =========================================================
   5) TRACKS GRID + CARDS
========================================================= */
.grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
@media (min-width: 760px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 980px){
  .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.card{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.18));
  padding: 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease, border-color .35s ease;
}
.card.is-visible{ opacity:1; transform: translateY(0); }
@media (hover:hover){
  .card:hover{ border-color: var(--line2); }
}

.cardHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.cardHead .name{
  font-weight: 900;
  letter-spacing:.06em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--text);
}
.tag{
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  white-space:nowrap;
  background: rgba(255,255,255,0.02);
}

.embed{
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: #000;
}
.embed iframe{
  width:100%;
  height:152px;
  border:0;
  display:block;
  border-radius: var(--radius-md);
}

.links{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top: 10px;
  flex-wrap:wrap;
}

.buy{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--accent-yellow);
  font-weight: 800;
  font-size: 13px;
  letter-spacing:.01em;
}
.buy small{
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing:0;
}

.mini{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--muted);
  font-size: 12px;
  text-decoration:none;
  font-weight: 700;
}

/* =========================================================
   WWA (À propos du livre) — FIX avec .wwa__inner
========================================================= */
:root{
  --wwa-bg:#0b1217;
  --wwa-line: rgba(255,255,255,.10);
  --wwa-text:#e9eef3;
  --wwa-muted: rgba(233,238,243,.62);
  --wwa-green:#f5c84b;
}

/* Section (pas de padding qui “casse” le look card) */
.wwa{
  margin-top: 14px;
  padding: 0;
  background: none;
  color: var(--wwa-text);
}

/* La CARD (border + gradient + radius) */
.wwa__wrap{
  max-width: 1240px;
  margin: 0 auto;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.22));
}

/* Border “propre” au-dessus du gradient */
.wwa__wrap::before{
  content:"";
  position:absolute;
  inset:0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  pointer-events:none;
  z-index: 1;
}

/* ✅ La GRILLE doit être sur .wwa__inner (tes colonnes sont dedans) */
.wwa__inner{
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 40px;
  align-items: start;
  position: relative;
  z-index: 2; /* au-dessus du ::before */
}

/* Padding sur les colonnes (garde la forme, pas de “bloc intérieur”) */
.wwa__left{ padding: 26px 0 26px 26px; }
.wwa__right{ padding: 26px 26px 26px 0; }

.wwa__photo{
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--wwa-line);
  background: #000;
}
.wwa__photo img{
  width: 100%;
  height: auto;
  display:block;
  filter: grayscale(1) contrast(1.05) brightness(.95);
}

.wwa__kicker{
  color: var(--wwa-green);
  font-weight: 900;
  letter-spacing: .06em;
  margin-top: 6px;
  margin-bottom: 14px;
}

.wwa__title{
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}
.wwa__title span{
  color: rgba(233,238,243,.72);
  font-weight: 800;
}

.wwa__lead{
  color: var(--wwa-muted);
  max-width: 720px;
  line-height: 1.6;
  margin: 0 0 18px;
}

.wwa__hr{
  height:1px;
  background: var(--wwa-line);
  margin: 18px 0;
}

.wwa__mid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: start;
}

.wwa__video{
  position: relative;
  display:block;
  border-radius: 6px;
  overflow:hidden;
  border: 1px solid var(--wwa-line);
  background:#000;
  text-decoration:none;
}
.wwa__video img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: contrast(1.05) brightness(.92);
}

.wwa__play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.wwa__play::before{
  content:"";
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.22);
}
.wwa__play::after{
  content:"";
  width: 0; height: 0;
  border-left: 14px solid rgba(255,255,255,.92);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
  position:absolute;
}

.wwa__copy p{
  color: var(--wwa-muted);
  line-height: 1.65;
  margin: 0;
}

.wwa__stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 24px;
  padding-top: 6px;
}

.wwa__num{
  color: var(--wwa-green);
  font-weight: 1000;
  font-size: clamp(30px, 3.4vw, 54px);
  letter-spacing: -.02em;
  line-height: 1;
}

.wwa__lbl{
  color: rgba(233,238,243,.85);
  margin-top: 8px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* Responsive */
@media (max-width: 1060px){
  .wwa__inner{ grid-template-columns: 1fr; }
  .wwa__left{ padding: 26px 26px 0; }
  .wwa__right{ padding: 0 26px 26px; }
  .wwa__mid{ grid-template-columns: 1fr; }
  .wwa__stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .wwa__stats{ grid-template-columns: 1fr; }
}

/* =========================================================
   7) MARQUEE (MAJ uniquement ici)
========================================================= */
.mq{
  width:100%;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  padding: 20px 0;
}

/* Marquee fade in/out (gauche + droite) */
.mq{
  position: relative;
  overflow: hidden;
  border-radius: 999px; /* si ton mq est en pill */
  --mq-fade: 60px;      /* largeur du fade (padding visuel) */
}

/* Deux voiles (fade) par-dessus le texte */
.mq::before,
.mq::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: var(--mq-fade);
  pointer-events:none;
  z-index: 2;
}

/* Fade gauche */
.mq::before{
  left:0;
  background: linear-gradient(90deg,
    rgba(11,18,23,1) 0%,
    rgba(11,18,23,0) 100%
  );
}

/* Fade droite */
.mq::after{
  right:0;
  background: linear-gradient(270deg,
    rgba(11,18,23,1) 0%,
    rgba(11,18,23,0) 100%
  );
}

.mq__track{
  display:flex;
  width: max-content;
  animation: mq var(--mq-speed, 22s) linear infinite;
  will-change: transform;
}

.mq__row{
  display:flex;
  align-items:center;
  gap: var(--mq-gap, 3.5rem);
  padding: 0 var(--mq-gap, 3.5rem);
  white-space: nowrap;

  font-size: var(--mq-size, 14px);
  color: var(--mq-color, rgba(255,255,255,.85));
  font-weight: 800;

  text-transform: uppercase;   /* ✅ CAPS seulement marquee */
  letter-spacing: 0.08em;
}

.mq__row span{ opacity: .95; }

/* pause au hover (simple, fiable) */
.mq:hover .mq__track{
  animation-play-state: var(--mq-hover-state, paused);
}

@keyframes mq{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .mq__track{ animation: none; }
}

/* =========================================================
   8) CONTACT (Minimalistic template)
========================================================= */
.cf-wrap{
  max-width: 1240px;
  margin: 14px auto 0;
  padding: 0;
}

.cf-card{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background: #0b0f14;
}

/* LEFT */
.cf-left{
  padding: 34px 34px 30px;
  background:
    radial-gradient(900px 520px at 30% 0%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.22));
}

.cf-form{
  margin-top: 22px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.cf-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cf-field{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.cf-field span{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.cf-field input,
.cf-field textarea{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.92);
  padding: 12px 12px;
  outline:none;
  font-size: 14px;
}

.cf-field textarea{ resize: vertical; min-height: 140px; }

.cf-field input:focus,
.cf-field textarea:focus{
  border-color: rgba(255,255,255,.20);
}

.cf-actions{
  margin-top: 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.cf-btn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor:pointer;
}
.cf-btn:hover{ border-color: rgba(255,255,255,.22); }

.cf-note{
  font-size: 12px;
  color: rgba(255,255,255,.45);
}

.cf-hp{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}

.cf-alert{
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(245,200,75,.35);
  background: rgba(245,200,75,.08);
  color: #f5c84b;            /* ✅ TEXTE */
  font-weight: 800;
  letter-spacing: .02em;
}

/* Fade-out avant redirection */
.is-sending{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}

/* RIGHT: photo + overlays (Jenny vibe) */
.cf-right{
  position:relative;
  min-height: 420px;
  padding: 22px 22px 18px;
  overflow:hidden;
  background: #0b0f14;
}

.cf-right::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("/images/sam.png") center 20% / cover no-repeat;
  filter: grayscale(1) brightness(.62) contrast(1.05) saturate(.9);
  transform: scale(1.02);
  z-index:0;
}

.cf-right::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.70) 100%),
    radial-gradient(700px 460px at 50% 22%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 55%, rgba(0,0,0,.55), rgba(0,0,0,.85));
  z-index:1;
  pointer-events:none;
}

.cf-profileTop,
.cf-rightMid,
.cf-rightBottom{
  position:relative;
  z-index:2;
}

.cf-profileTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.cf-name{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  letter-spacing: .01em;
}
.cf-role{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.cf-rightMid{
  margin-top: 200px;
  display:flex;
  justify-content:flex-end;
  text-align:left;
}

.cf-tagline{
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  color: rgba(255,255,255,.26);
}

.cf-rightBottom{
  position:absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.cf-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,12,15,.35);
  color: rgba(255,255,255,.88);
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
}

.cf-social{
  display:flex;
  align-items:center;
  gap: 12px;
}
.cf-social a{
  color: rgba(255,255,255,.65);
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  letter-spacing:.02em;
}
.cf-social a:hover{ color: rgba(255,255,255,.88); }

@media (max-width: 980px){
  .cf-card{ grid-template-columns: 1fr; }
  .cf-right{ min-height: 360px; }
  .cf-row{ grid-template-columns: 1fr; }
}

/* =========================================================
   FOOTER (style clean, lignes + séparateurs)
========================================================= */
.pb-footer{
  margin-top: 26px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.pb-footer__inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  color: rgba(233,238,245,.55);
  font-size: 13px;
}

.pb-footer__right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pb-footer__link{
  color: rgba(233,238,245,.55);
  text-decoration:none;
  transition: color .18s ease;
}

.pb-footer__link:hover{
  color: rgba(245,200,75,.92);
}

.pb-footer__sep{
  color: rgba(233,238,245,.25);
}

/* Mobile */
@media (max-width: 860px){
  .pb-footer__inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .pb-footer__right{
    justify-content:flex-start;
  }
}

/* =========================================================
   NEWSLETTER (aligned like the rest of the site)
========================================================= */

.nl{
  max-width: 1240px;
  margin: 14px auto;
  padding: 0;                 /* ✅ no side padding */
}

.nl__wrap{
  width: 100%;
  border-radius: 26px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.22));
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 120px;
}

/* LEFT */
.nl__left{
  padding: 34px;
  background: rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.nl__kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(233,238,245,.65);
  font-weight: 800;
}

.nl__title{
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.92);
}

/* RIGHT (form) */
.nl__form{
  padding: 34px;
  display: flex;
  flex-wrap: wrap;            /* ✅ allows alert to go below */
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background:
    radial-gradient(900px 320px at 70% 30%, rgba(255,255,255,.06), transparent 60%),
    rgba(0,0,0,.08);
}

.nl__input{
  flex: 1 1 260px;            /* ✅ grows, but keeps a sane min */
  min-width: 220px;
  height: 54px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.92);
  color: #0b1217;
  padding: 0 16px;
  font-size: 14px;
  outline: none;
}

.nl__input:focus{
  border-color: rgba(245,200,75,.55);
  box-shadow: 0 0 0 4px rgba(245,200,75,.10);
}

.nl__btn{
  flex: 0 0 auto;
  height: 54px;
  padding: 0 18px;
  border-radius: 10px;
  border: 0;
  background: #14181d;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.nl__btn:hover{ filter: brightness(1.05); }

/* Honeypot caché */
.nl-hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Alert newsletter (rendu propre) */
.nl-alert{
  flex: 1 0 100%;             /* ✅ full width under inputs */
  margin-top: 8px;
  font-weight: 900;
  letter-spacing: .01em;
  color: #f5c84b;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
}

.nl-alert.is-show{
  opacity: 1;
  transform: translateY(0);
}

/* État loading du bouton */
.nl__btn.is-loading{
  opacity: .75;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 860px){
  .nl__wrap{ grid-template-columns: 1fr; }
  .nl__form{ justify-content: flex-start; }
}

@media (max-width: 520px){
  .nl__form{ flex-direction: column; align-items: stretch; }
  .nl__input, .nl__btn{ width: 100%; }
}

/* =========================================================
   10) ACCESSIBILITY / REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
  .card{opacity:1;transform:none}
  .main img{opacity:1 !important}
}

/* =========================
   Cookies (Banner + Modal)
========================= */

:root{
  --ck-bg: rgba(10,14,18,.78);
  --ck-panel: rgba(18,24,30,.92);
  --ck-line: rgba(255,255,255,.12);
  --ck-text: rgba(233,238,245,.92);
  --ck-muted: rgba(233,238,245,.68);
  --ck-accent: #f5c84b;
  --ck-radius: 18px;
}

.ck{
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: grid;
  place-items: center;
}

.ck__inner{
  width: min(980px, 100%);
  background: var(--ck-bg);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  padding: 16px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
}

.ck.is-show .ck__inner{
  opacity: 1;
  transform: translateY(0);
}

.ck__title{
  font-weight: 1000;
  letter-spacing: .02em;
  color: var(--ck-text);
  margin-bottom: 4px;
}

.ck__desc{
  color: var(--ck-muted);
  font-size: 13px;
  line-height: 1.45;
}

.ck__link{
  color: var(--ck-accent);
  font-weight: 800;
  text-decoration: none;
}
.ck__link:hover{ text-decoration: underline; }

.ck__actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ck__btn{
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: .01em;
}

.ck__btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.16);
  color: rgba(233,238,245,.88);
}

.ck__btn--soft{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(233,238,245,.92);
}

.ck__btn--ok{
  background: var(--ck-accent);
  border-color: rgba(0,0,0,.08);
  color: #0b1217;
}

.ck__btn:hover{ filter: brightness(1.06); }
.ck__btn:active{ transform: translateY(1px); }

/* Modal */
.ckm{ position: fixed; inset: 0; z-index: 10000; }
.ckm__backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.62);
  opacity: 0;
  transition: opacity .25s ease;
}
.ckm__panel{
  position: relative;
  width: min(720px, calc(100% - 36px));
  margin: 9vh auto 0;
  background: var(--ck-panel);
  border: 1px solid var(--ck-line);
  border-radius: 20px;
  box-shadow: 0 18px 70px rgba(0,0,0,.62);
  overflow: hidden;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.ckm.is-show .ckm__backdrop{ opacity: 1; }
.ckm.is-show .ckm__panel{ opacity: 1; transform: translateY(0); }

.ckm__head{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.ckm__title{ color: var(--ck-text); font-weight: 1000; }
.ckm__sub{ color: var(--ck-muted); font-size: 13px; margin-top: 4px; }
.ckm__close{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,245,.92);
  width: 40px; height: 40px;
  border-radius: 12px;
  cursor: pointer;
}

.ckm__body{ padding: 14px 18px; display: grid; gap: 10px; }
.ckm__row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.10);
  color: rgba(233,238,245,.92);
}
.ckm__row small{ color: rgba(233,238,245,.64); }
.ckm__row input{ width: 18px; height: 18px; accent-color: var(--ck-accent); }

.ckm__foot{
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 720px){
  .ck__inner{ grid-template-columns: 1fr; }
  .ck__actions{ justify-content: flex-start; }
}

/* =========================
   Cookie Policy Modal (ckp)
========================= */
:root{
  --ckp-bg: rgba(18,24,30,.92);
  --ckp-line: rgba(255,255,255,.12);
  --ckp-text: rgba(233,238,245,.92);
  --ckp-muted: rgba(233,238,245,.68);
  --ckp-accent: #f5c84b;
}

.ckp{ position: fixed; inset: 0; z-index: 10010; }
.ckp__backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.62);
  opacity: 0;
  transition: opacity .25s ease;
}
.ckp__panel{
  position: relative;
  width: min(920px, calc(100% - 36px));
  margin: 7vh auto 0;
  background: var(--ckp-bg);
  border: 1px solid var(--ckp-line);
  border-radius: 22px;
  box-shadow: 0 18px 70px rgba(0,0,0,.62);
  overflow: hidden;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ckp.is-show .ckp__backdrop{ opacity: 1; }
.ckp.is-show .ckp__panel{ opacity: 1; transform: translateY(0); }

.ckp__head{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.ckp__title{ color: var(--ckp-text); font-weight: 1000; letter-spacing:.01em; }
.ckp__sub{ color: var(--ckp-muted); font-size: 13px; margin-top: 4px; }
.ckp__close{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,245,.92);
  width: 40px; height: 40px;
  border-radius: 12px;
  cursor: pointer;
}

.ckp__body{
  padding: 16px 18px 18px;
  color: var(--ckp-text);
  max-height: 72vh;
  overflow: auto;
}
.ckp__body p{
  color: var(--ckp-muted);
  line-height: 1.65;
  margin: 0 0 12px;
}
.ckp__body h3{
  margin: 16px 0 8px;
  color: rgba(233,238,245,.92);
  font-weight: 1000;
  letter-spacing: -.01em;
}

.ckp__card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  padding: 12px 12px;
  margin: 10px 0;
}
.ckp__cardTitle{
  font-weight: 1000;
  color: rgba(233,238,245,.92);
  margin-bottom: 6px;
}

.ckp__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 14px 0 6px;
}

.ckp__btn{
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 900;
  cursor: pointer;
}

.ckp__btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.16);
  color: rgba(233,238,245,.88);
}
.ckp__btn--ok{
  background: var(--ckp-accent);
  border-color: rgba(0,0,0,.08);
  color: #0b1217;
}
.ckp__btn:hover{ filter: brightness(1.06); }
/* ============ COOKIES (minimal fix) ============ */
.ck, .ckm, .ckp{
  position: fixed;
  z-index: 999999;
}

.ck{ left:16px; right:16px; bottom:16px; }
.ckm, .ckp{ inset:0; }

.ck[hidden], .ckm[hidden], .ckp[hidden]{ display:none !important; }

.ckm__backdrop, .ckp__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}

.ckm__panel, .ckp__panel{
  position: relative;
  width: calc(100% - 28px);
  max-width: 860px;
  margin: 7vh auto;
}

/* animation show */
.ck, .ckm, .ckp{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.ck.is-show, .ckm.is-show, .ckp.is-show{
  opacity: 1;
  transform: translateY(0);
}
/* Empêche les couches cookies invisibles de capturer les clics */
.ck:not(.is-show),
.ckm:not(.is-show),
.ckp:not(.is-show){
  pointer-events: none !important;
}

/* Quand elles sont visibles, elles capturent bien les clics */
.ck.is-show,
.ckm.is-show,
.ckp.is-show{
  pointer-events: auto !important;
}

/* Privacy modal = même style que cookie policy */
.pp{ position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; }
.pp[hidden]{ display:none; }

.pp__backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.pp__panel{
  position: relative;
  width: min(920px, calc(100vw - 28px));
  max-height: min(86vh, 860px);
  overflow: hidden;
  border-radius: 18px;
  background: rgba(18, 20, 24, .92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

.pp__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.pp__title{ font-size: 18px; font-weight: 700; }
.pp__sub{ opacity:.75; font-size: 13px; margin-top: 2px; }

.pp__close{
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
}

.pp__body{
  padding: 18px;
  overflow: auto;
  max-height: calc(86vh - 72px);
}

.pp__body h3{ margin: 18px 0 8px; font-size: 16px; }
.pp__body p{ line-height: 1.6; opacity: .9; }

.pp__actions{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(10,10,12,.75) 40%, rgba(10,10,12,.9));
  backdrop-filter: blur(6px);
}

.pp__btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #fff;
}

.pp.is-show .pp__panel{ transform: translateY(0); opacity: 1; }
.pp__panel{ transform: translateY(6px); opacity: 0; transition: .22s ease; }

/* =========================
   TERMS MODAL (Conditions d’utilisation)
   ========================= */

.tu[hidden]{ display:none !important; }

.tu{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:18px;
}

.tu__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.tu__panel{
  position:relative;
  width:min(920px, 96vw);
  max-height:min(82vh, 820px);
  overflow:hidden;
  border-radius:18px;
  background:rgba(18,22,28,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  transform: translateY(10px) scale(.98);
  opacity:0;
  transition: transform .22s ease, opacity .22s ease;
}

/* show animation (same pattern) */
.tu.is-show .tu__panel{
  transform: translateY(0) scale(1);
  opacity:1;
}

.tu__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}

.tu__title{
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
  color:rgba(255,255,255,.95);
}

.tu__sub{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,.68);
}

.tu__close{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.9);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.tu__close:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.tu__body{
  padding:18px;
  overflow:auto;
  max-height:calc(min(82vh, 820px) - 70px);
  color:rgba(255,255,255,.82);
  line-height:1.6;
  font-size:14px;
}

/* Typography: simple, no inner cards */
.tu__body h3{
  margin:18px 0 8px;
  font-size:15px;
  font-weight:800;
  color:rgba(255,255,255,.92);
}

.tu__body p{
  margin:0 0 12px;
}

.tu__body a{
  color:rgba(255,215,90,.95);
  text-decoration:none;
  border-bottom:1px dashed rgba(255,215,90,.35);
}
.tu__body a:hover{
  border-bottom-color:rgba(255,215,90,.65);
}

/* Buttons at the end */
.tu__actions{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.tu__btn{
  height:40px;
  padding:0 14px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.9);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.tu__btn:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.tu__btn--ghost{
  background:rgba(255,255,255,.03);
}

/* Nice scrollbar (optional) */
.tu__body::-webkit-scrollbar{ width:10px; }
.tu__body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:10px;
}
.tu__body::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.18);
}

/* Mobile tweaks */
@media (max-width: 520px){
  .tu{ padding:12px; }
  .tu__panel{ border-radius:16px; }
  .tu__head{ padding:14px 14px 12px; }
  .tu__body{ padding:14px; font-size:13.5px; }
}

/* Icône lien externe */
.pb-nav a[target="_blank"]::after {
  content: "↗";
  font-size: 0.75em;
  margin-left: 0.35em;
  opacity: 0.6;
  display: inline-block;
  transform: translateY(-1px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hover subtil */
.pb-nav a[target="_blank"]:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}

/* Fix mobile: champ newsletter trop grand */
@media (max-width: 640px){
  .nl__form .nl__input{
    height: 52px !important;
    min-height: 0 !important;
    padding: 0 16px !important;
    font-size: 16px !important; /* évite le zoom iOS + rend propre */
    line-height: 52px !important;
  }

  .nl__form{
    gap: 12px;
  }
}
@media (max-width: 640px){
  .nl__form input[type="email"]{
    max-height: 56px !important;
  }
}


.pb-drawer{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 1000;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.28));
  backdrop-filter: blur(10px);
  overflow: hidden;

  /* fermé par défaut */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  visibility: hidden;

  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.pb-drawer.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}