:root{--bg:#101010;--bg-soft:#181818;--text:#f5f2eb;--muted:#aaa69d;--light:#f2efe7;--dark:#111;--accent:#e5482f;--line:rgba(255,255,255,.12);--max:1180px;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit}.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}.narrow{max-width:900px}.site-header{position:sticky;top:0;z-index:50;background:rgba(16,16,16,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.nav{min-height:72px;display:flex;align-items:center;gap:32px}.brand{text-decoration:none;font-weight:900;letter-spacing:-.04em;font-size:1.05rem}.brand span{color:var(--accent)}.desktop-nav{margin-left:auto;display:flex;gap:26px}.desktop-nav a,.footer-links a{color:var(--muted);text-decoration:none;font-size:.92rem}.desktop-nav a:hover,.footer-links a:hover{color:var(--text)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;font-weight:800;transition:.2s}.button:hover{transform:translateY(-2px)}.button-small{min-height:40px;padding:0 18px;font-size:.9rem}.button-large{min-height:60px;padding-inline:30px}.button-dark{background:#111}.hero{overflow:hidden;padding:92px 0 100px;background:radial-gradient(circle at 80% 20%,rgba(229,72,47,.16),transparent 28%),linear-gradient(180deg,#111,#0d0d0d)}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}.eyebrow{margin:0 0 18px;color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:900}.eyebrow.dark{color:#9b2e1e}h1,h2,h3,p{margin-top:0}h1{margin-bottom:26px;max-width:760px;font-size:clamp(3.1rem,7vw,6.6rem);line-height:.94;letter-spacing:-.065em}h2{margin-bottom:24px;font-size:clamp(2.2rem,5vw,4.4rem);line-height:1;letter-spacing:-.055em}h3{margin-bottom:12px;font-size:1.28rem;line-height:1.2}.hero-lead{max-width:700px;margin-bottom:14px;color:#fff;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.45}.hero-text{max-width:670px;color:var(--muted);font-size:1.02rem}.hero-actions{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:22px}.text-link{color:var(--muted);text-decoration:none;font-weight:700}.hero-points{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.hero-points span{border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:#cfcac0;font-size:.82rem}.hero-visual{position:relative}.photo-placeholder{aspect-ratio:4/5;border-radius:28px;background:linear-gradient(135deg,rgba(229,72,47,.24),rgba(255,255,255,.03)),#202020;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;text-align:center;overflow:hidden}.photo-placeholder strong{display:block;margin-bottom:7px}.photo-placeholder span{color:var(--muted);font-size:.9rem}.photo-placeholder-wide{aspect-ratio:5/4}.floating-card{position:absolute;left:-40px;bottom:36px;max-width:280px;padding:20px;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:rgba(15,15,15,.94);box-shadow:0 20px 70px rgba(0,0,0,.35)}.floating-card strong,.floating-card span{display:block}.floating-card span{margin-top:5px;color:var(--muted);font-size:.88rem}.section{padding:110px 0}.section-light{background:var(--light);color:var(--dark)}.section-accent{background:var(--accent);color:#fff}.section-intro{max-width:760px;color:#5c5953;font-size:1.15rem}.problem-grid,.steps,.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}.problem-card{min-height:250px;padding:30px;border-radius:var(--radius);background:#fff;border:1px solid #ded9cf}.number{display:block;margin-bottom:58px;color:var(--accent);font-weight:900}.problem-card p,.price-card p{color:#6c6860}.callout{margin-top:18px;padding:22px 26px;border-radius:16px;background:var(--dark);color:#fff}.section-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end}.section-heading>p{color:var(--muted)}.steps{grid-template-columns:repeat(4,1fr)}.step{padding:26px 22px 10px 0;border-top:1px solid var(--line)}.step span{display:block;margin-bottom:44px;color:var(--accent);font-weight:900}.step p{color:var(--muted)}.split,.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.section-accent .eyebrow{color:#421108}.check-list{display:grid;gap:12px}.check-list div{padding:17px 19px 17px 50px;position:relative;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);border-radius:14px}.check-list div:before{content:'✓';position:absolute;left:18px;font-weight:900}.about-copy p{color:#58544d}.about-highlight{margin-top:30px;padding-left:20px;border-left:4px solid var(--accent);font-weight:800;color:var(--dark)!important}.testimonial{margin:46px 0 0;padding:42px;border-radius:var(--radius);background:var(--bg-soft);border:1px solid var(--line)}.testimonial p{margin-bottom:25px;font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.35;letter-spacing:-.02em}.testimonial footer{color:var(--muted)}.pricing-heading>p{color:#5d5952}.price-card{position:relative;padding:34px;border-radius:var(--radius);background:#fff;border:1px solid #dbd6cb}.price-card.featured{background:#171717;color:#fff;border-color:#171717}.price-card.featured p{color:#bfb9ae}.price{margin:12px 0 4px;font-size:3.2rem;line-height:1;letter-spacing:-.06em;font-weight:900}.price-label{margin-bottom:0;font-weight:800}.price-card .button{width:100%;margin-top:30px}.badge{display:inline-block;margin-bottom:22px;padding:6px 10px;border-radius:999px;background:var(--accent);font-size:.72rem;font-weight:900}.faq-list{margin-top:44px}details{border-top:1px solid var(--line)}details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;padding:24px 0;font-size:1.08rem;font-weight:800}details p{max-width:720px;padding-bottom:24px;color:var(--muted)}.cta-section{padding:120px 0;background:var(--accent);color:#fff;text-align:center}.cta-inner{max-width:900px}.cta-section .eyebrow{color:#4d1008}.cta-section p{max-width:650px;margin-inline:auto;font-size:1.08rem}.cta-section .button{margin-top:20px;background:#111}.cta-section small{display:block;margin-top:18px;opacity:.75}.site-footer{padding:40px 0;background:#090909;border-top:1px solid var(--line)}.site-footer p{margin:5px 0 0;color:var(--muted);font-size:.9rem}.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:30px}.footer-links{display:flex;gap:24px}@media(max-width:900px){.desktop-nav{display:none}.nav{gap:16px}.nav .button-small{margin-left:auto}.hero{padding-top:70px}.hero-grid,.section-heading,.split,.about-grid{grid-template-columns:1fr}.hero-grid{gap:52px}.hero-visual{max-width:580px}.floating-card{left:18px}.problem-grid,.pricing-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}}@media(max-width:600px){.container{width:min(calc(100% - 28px),var(--max))}.site-header .brand{font-size:.92rem}.site-header .button-small{min-height:36px;padding-inline:14px;font-size:.8rem}.hero,.section,.cta-section{padding-top:76px;padding-bottom:76px}h1{font-size:clamp(3rem,16vw,4.7rem)}.hero-actions{align-items:stretch}.hero-actions .button,.hero-actions .text-link{width:100%;text-align:center}.steps{grid-template-columns:1fr}.step span{margin-bottom:22px}.floating-card{position:static;margin-top:12px;max-width:none}.testimonial{padding:28px 22px}.footer-grid,.footer-links{flex-direction:column;align-items:flex-start}}


/* --- Petites personnalisations V2 --- */

.music-link {
  color: inherit;
  font-weight: 800;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ==========================================
   IMAGE DE FOND - SECTION MA MÉTHODE
========================================== */

.method-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #101010;
}

.method-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("images/JulienDguitare1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.20;

  z-index: -1;
}

.method-section .container {
  position: relative;
  z-index: 2;
}

.music-link:hover {
  color: var(--accent);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 46px;
}

.testimonials-grid .testimonial {
  margin: 0;
  height: 100%;
}

.payment-note {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #5d5952;
}

.payment-note strong {
  margin-right: 4px;
  color: var(--dark);
}

.payment-note span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dbd6cb;
  color: var(--dark);
  font-size: .88rem;
  font-weight: 800;
}

.faq-list details p strong {
  color: var(--text);
}

@media (max-width: 760px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}


.brief-box {
  margin-top: 30px;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  border-radius: var(--radius);
  background: #ebe6dc;
  border: 1px solid #d8d1c4;
}

.brief-box h3 {
  margin-bottom: 10px;
  color: var(--dark);
}

.brief-box p {
  margin-bottom: 0;
  color: #5e5950;
}

.brief-kicker {
  margin-bottom: 8px !important;
  color: var(--accent) !important;
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

@media (max-width: 760px) {
  .brief-box {
    grid-template-columns: 1fr;
  }

  .brief-box .button {
    width: 100%;
  }
}


/* =========================================================
   V4 — PHOTOS
   ========================================================= */

.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .12);
}

.about-photo {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 28px;
}


/* =========================================================
   V4 — IMAGE DE FOND "MA MÉTHODE"
   JulienDguitare1.webp à 20 % d'opacité
   ========================================================= */

.method-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.method-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("images/JulienDguitare1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .20;
}

.method-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(16, 16, 16, .74);
}

.method-section > .container {
  position: relative;
  z-index: 1;
}


/* =========================================================
   V4 — YOUTUBE
   ========================================================= */

.youtube-section {
  background: #0b0b0b;
}

.youtube-heading {
  margin-bottom: 44px;
}

.youtube-intro p {
  color: var(--muted);
}

.youtube-channel-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.youtube-channel-link:hover {
  color: var(--accent);
}

.youtube-play {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: .8rem;
  padding-left: 2px;
}

.youtube-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.youtube-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* =========================================================
   V4 — TÉMOIGNAGES
   ========================================================= */

.testimonials-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
  margin-top: 46px;
  align-items: start;
}

.testimonials-grid .testimonial {
  margin: 0;
}

.testimonial p + p {
  margin-top: 17px;
}

.testimonial-short {
  position: sticky;
  top: 96px;
}


/* =========================================================
   V4 — LOGOS DE PAIEMENT
   ========================================================= */

.payment-note {
  gap: 14px;
}

.payment-brand {
  width: auto !important;
  min-width: 0 !important;
  height: 36px;
  padding: 7px 13px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #dbd6cb;
  border-radius: 999px;
}

.payment-brand img {
  display: block;
  width: auto;
  max-width: 74px;
  height: 18px;
  object-fit: contain;
  filter: grayscale(1) brightness(.18);
  opacity: .85;
}

.payment-brand:first-of-type img {
  max-width: 58px;
}


/* =========================================================
   V4 — RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-short {
    position: static;
  }

  .youtube-heading {
    margin-bottom: 30px;
  }
}

/* ==========================================
   TAILLE TEXTE TÉMOIGNAGES
========================================== */

.testimonial p {
  margin-bottom: 16px;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
}

.testimonial footer {
  margin-top: 22px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--muted);
}