/* =========================================================
   V3 - Typographie agrandie + onde de fond en parallaxe
   Charge APRES demo-design-v2.css
   ========================================================= */

/* ---------------------------------------------------------
   1. TYPOGRAPHIE - toute l'echelle remontee d'un cran
   --------------------------------------------------------- */
body{font-size:18px;line-height:1.7}
.preview{font-size:13px}
.logo img{width:205px}
.navlinks{font-size:15px;gap:32px}
.navright{font-size:15px}
.button{font-size:16px;padding:17px 27px}
.navright .button{font-size:15px}
.text-link{font-size:15px}
.arrow{font-size:23px}

.eyebrow,.hero .eyebrow,.benefits .eyebrow{font-size:12px}
h1,.hero h1{font-size:clamp(52px,6.3vw,84px)}
.intro,.hero .intro{font-size:19px;line-height:1.8;max-width:505px}
.reassurance{font-size:13px}

.card-top,.demo-card .card-top{font-size:11px}
.pill{font-size:11px;padding:5px 11px}
.hero-choices button{font-size:12px;padding:9px 13px}
.source-label{font-size:11px}
.source h3,.hero .source h3{font-size:25px}
.source p,.hero .source p{font-size:15px}
.cover strong{font-size:28px}
.cover small{font-size:8px}
.flow{font-size:12px}
.result-label{font-size:11px}
.result h3,.hero .result h3{font-size:22px}
.time{font-size:12px}
.demo-note{font-size:12px}
.audio-status{font-size:13px}
.hero-bottom{font-size:12px}

.signal-strip .wrap{font-size:20px}
.signal-strip b{font-size:27px}

h2{font-size:clamp(38px,3.9vw,54px)}
.heading-row p{font-size:17px;max-width:400px}
.step-num{font-size:13px}
.step h3{font-size:24px}
.step p{font-size:16px;max-width:345px}
.step-tags span{font-size:12px}

.benefits h2{font-size:46px}
.benefit-items h3{font-size:17px}
.benefit-items p{font-size:14.5px;line-height:1.75}
.image-caption small{font-size:12px}
.image-caption h3{font-size:35px}

.examples .example-body small{font-size:12px;min-height:19px}
.examples .example h3{font-size:26px}
.examples .example p{font-size:16px;line-height:1.7}
.listen,.examples .listen{font-size:14px}
.more-uses{font-size:14px}

.podcast-focus p{font-size:17px}
.channels span{font-size:12px}
.podcast-art small{font-size:12px}
.art-image strong{font-size:41px}
.formats p{font-size:17px}
.format-icon{font-size:24px}
.format-item h3{font-size:21px}
.format-item p{font-size:15px}
.format-item small{font-size:12px}

.faq-layout p{font-size:16px}
.faq-list summary{font-size:17px}
.faq-list summary:after{font-size:26px}
.faq-list details p{font-size:15px}

.cta h2{font-size:50px}
.cta p{font-size:17px}
.footer-links{font-size:13px}
.footer-small{font-size:12px}
.whatsapp-copy small{font-size:9px}
.whatsapp-copy strong{font-size:14px}
.whatsapp-copy>span{font-size:12px}

@media(max-width:1000px) and (min-width:721px){
.hero h1,h1{font-size:62px}
.benefits h2{font-size:39px}
.examples .example h3{font-size:22px}
.examples .listen{font-size:13px}
.signal-strip .wrap{font-size:16px}
.step h3{font-size:21px}
}

@media(max-width:720px){
body{font-size:17px}
.preview{font-size:11px}
.logo img{width:162px}
h1,.hero h1{font-size:clamp(40px,12vw,53px)}
.intro,.hero .intro{font-size:17px}
.eyebrow,.hero .eyebrow{font-size:11px}
.button{font-size:14px;padding:14px 19px}
.navright .button{font-size:13px;padding:13px 17px}
.reassurance{font-size:12px}
.card-top,.demo-card .card-top{font-size:10px}
.pill{font-size:10px}
.hero-choices button{font-size:11px}
.source h3,.hero .source h3{font-size:23px}
.cover strong{font-size:25px}
.result h3,.hero .result h3{font-size:20px}
.hero-bottom{font-size:11px}
.signal-strip .wrap{font-size:13px}
.signal-strip b{font-size:19px}
h2{font-size:37px}
.heading-row p{font-size:16px}
.step h3{font-size:22px}
.step p{font-size:16px}
.benefits h2{font-size:37px}
.benefit-items h3{font-size:16px}
.benefit-items p{font-size:14.5px}
.image-caption h3{font-size:30px}
.examples .example h3{font-size:25px}
.examples .example p{font-size:16px}
.podcast-focus p{font-size:16px}
.art-image strong{font-size:33px}
.formats p{font-size:16px}
.faq-list summary{font-size:16px}
.faq-list details p{font-size:15px}
.cta h2{font-size:36px}
.cta p{font-size:16px}
.whatsapp-copy>span{font-size:13px}
}

/* ---------------------------------------------------------
   2. ONDE DE FOND EN PARALLAXE
   Le canvas est fixe derriere la page ; les bandes claires
   sont rendues transparentes pour le laisser voir. Les
   sections sombres (hero, benefits, CTA, footer) gardent
   leur fond plein et rythment la descente.
   --------------------------------------------------------- */
html{background:var(--paper)}
body{background:transparent}

#wave-bg{
    position:fixed;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
    background:transparent;
}

.skip,.preview,header,main,footer,.whatsapp-contact{position:relative;z-index:1}
.whatsapp-contact{z-index:40}

/* bandes claires : on laisse passer l'onde */
.examples{background:transparent}
.podcast-focus{background:rgba(225,237,242,.72)}
.step{background:rgba(255,255,255,.72)}
.step:nth-child(2){background:rgba(227,239,243,.82)}
.examples .example:nth-child(n){background:rgba(255,255,255,.86)}
.format-item{background:rgba(255,255,255,.82)}
.format-item:last-child{background:#183746}

@media(max-width:720px){
    #wave-bg{opacity:.85}
}

@media(prefers-reduced-motion:reduce){
    #wave-bg{transition:none}
}

/* ---------------------------------------------------------
   3. LISIBILITE SUR L'ONDE
   La FAQ repose sur une surface pleine : l'onde passe
   DERRIERE le bloc, plus au travers des questions.
   --------------------------------------------------------- */
.faq-list{
    background:#fff;
    border:1px solid #e2e9ee;
    border-top:1px solid #e2e9ee;
    border-radius:18px;
    padding:4px 28px;
    box-shadow:0 12px 34px rgba(16,43,59,.05);
}
.faq-list details{border-bottom:1px solid #e7edf1;padding:23px 0}
.faq-list details:last-child{border-bottom:0}
.faq-list details p{margin:14px 34px 0 0;color:#54646f}

/* textes courants : un cran plus contrastes sur le fond teinte */
.heading-row p{color:#54636d}
.step p{color:#55646e}
.examples .example p{color:#55656f}
.podcast-focus p{color:#4a6664}
.formats p{color:#55646e}
.faq-layout p{color:#54646f}
.more-uses>span{color:#556a6b}

@media(max-width:720px){
    .faq-list{padding:2px 20px;border-radius:14px}
    .faq-list details{padding:20px 0}
    .faq-list details p{margin-right:0}
}