/* =========================================================
   V5 - Palette unifiee
   Un seul fond sombre : #0C1A2E
   Une seule couleur d'accent : #37B7C9
   Charge APRES demo-design-v4.css
   ========================================================= */

:root{
    --navy:#0C1A2E;
    --deep:#0C1A2E;
    --cyan:#37B7C9;
    --accent-ink:#1C7C8C;   /* accent assombri, lisible sur fond clair */
}

/* ---------------------------------------------------------
   1. TOUS LES FONDS SOMBRES
   --------------------------------------------------------- */
.hero{background:#0C1A2E}
.hero:before{
    background:linear-gradient(90deg,#0C1A2Ef7 8%,#0C1A2Edb 42%,#0C1A2E75 75%,#0C1A2Eb0),
               url('/images/radio-ecole.webp') 78% 35%/cover;
}
.hero:after{
    border:1px solid #37B7C922;
    box-shadow:0 0 0 75px #37B7C906,0 0 0 150px #37B7C905;
}

.hero .demo-card{
    background:#0C1A2E;
    border-color:#37B7C93d;
}
/* le player garde la meme teinte, juste un voile plus clair */
.hero .result{
    background:linear-gradient(#ffffff0a,#ffffff0a),#0C1A2E;
    border-color:#37B7C92e;
}
.hero .source{border-color:#ffffff1a}

.hero .hero-choices button{background:#0C1A2Ecc;border-color:#37B7C926}
.hero .hero-choices button:hover{background:#0C1A2E;border-color:#37B7C959}
.hero .hero-choices button[aria-pressed="true"]{
    background:#0C1A2E;
    border-color:#37B7C959;
    box-shadow:inset 0 2px 0 #37B7C9;
}

.benefits{background:#0C1A2E}
.benefit-image:after{background:linear-gradient(transparent 35%,#0C1A2Edb)}

.podcast-art{background:#0C1A2E}
.podcast-art .listen span:last-child{background:#37B7C9;color:#0C1A2E}

.format-item:last-child{background:#0C1A2E}

.cta{background:radial-gradient(ellipse at 85% 100%,#37B7C91f 0,transparent 60%),#0C1A2E}
.cta:after{color:#37B7C90d}

footer{background:#0C1A2E}

.signal-strip{background:#37B7C9;color:#0C1A2E}
.signal-strip b{opacity:.45}

/* ---------------------------------------------------------
   2. TOUTES LES POINTES DE COULEUR
   --------------------------------------------------------- */

/* sur fond sombre : l'accent tel quel */
.hero .eyebrow,
.benefits .eyebrow,
.result-label,
.image-caption small,
.footer-col h3{color:#37B7C9}
.hero h1 em{color:#37B7C9;text-shadow:0 0 55px #37B7C930}
.wave i{background:#37B7C959}
.wave i:nth-child(3n){background:#37B7C9}
.play{background:#37B7C9;color:#0C1A2E}
.listen span:last-child{background:#0C1A2E;color:#37B7C9}
.footer-social a:hover{border-color:#37B7C9;color:#37B7C9;background:#37B7C914}
.footer-contact .footer-cta{background:#37B7C9;color:#0C1A2E}
.footer-contact .footer-cta:hover{background:#4ecede;color:#0C1A2E}
.hero .text-link:hover{border-color:#37B7C9}

/* boutons pleins */
.button{background:#37B7C9;color:#0C1A2E}
.button:hover{background:#4ecede}
.hero .button:hover{box-shadow:0 6px 18px #37B7C933}

/* sur fond clair : version assombrie, pour rester lisible */
.step-num,
.example-body small,
.examples .example-body small,
.format-item small,
.faq-list summary:after,
.source-label,
.more-uses a,
.podcast-focus .text-link,
.eyebrow{color:#1C7C8C}
.format-icon{background:#37B7C91f;color:#1C7C8C}
.examples .listen span:last-child{background:#37B7C91f;color:#1C7C8C}
.examples .listen:hover span:last-child,
.examples .listen[aria-pressed="true"] span:last-child{background:#37B7C9;color:#0C1A2E}
.more-uses a:hover{background:#37B7C91f}
.reassurance span:before{color:#37B7C9}
.whatsapp-copy>span{color:#1C7C8C}
.preview{background:#37B7C91f;color:#14505c}
.preview a{color:#14505c}
.logo span{color:#1C7C8C}
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:#1C7C8C}
.seek{accent-color:#37B7C9}

/* ---------------------------------------------------------
   3. BOUTON WHATSAPP : flottant en bas a droite
   La regle z-index de la V3 lui avait remis position:relative,
   ce qui le remettait dans le flux, en pleine largeur.
   --------------------------------------------------------- */
.whatsapp-contact{
    position:fixed;
    right:24px;
    bottom:24px;
    left:auto;
    top:auto;
    width:auto;
    max-width:calc(100vw - 32px);
    z-index:60;
}
@media(max-width:720px){
    .whatsapp-contact{
        right:14px;
        bottom:max(14px,env(safe-area-inset-bottom));
    }
}

/* ---------------------------------------------------------
   4. BLOC "UN PREMIER PODCAST / OU TOUTE UNE RADIO"
   Refait dans l'esprit du bloc "Deux formats complementaires"
   de l'accueil actuel : titre centre, deux cartes cote a cote
   dont une mise en avant, listes a puces cochees.
   --------------------------------------------------------- */
.formats-section{
    background:#0C1A2E;
    color:#fff;
    padding:95px 0;
    position:relative;
}
.formats-head{max-width:740px;margin:0 auto 52px;text-align:center}
.formats-head h2{color:#fff}
.formats-head p{
    margin-top:20px;
    color:#a5bbc4;
    font-size:17px;
    line-height:1.8;
}

.formats-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
    max-width:1000px;
    margin:0 auto;
    align-items:stretch;
}
.format-card{
    background:#ffffff0a;
    border:1px solid #ffffff1a;
    border-radius:20px;
    padding:34px 32px;
    display:flex;
    flex-direction:column;
    transition:border-color .25s,transform .25s;
}
.format-card:hover{border-color:#37B7C959;transform:translateY(-3px)}
.format-card.featured{
    background:#37B7C90f;
    border:2px solid #37B7C940;
    padding:33px 31px;
}
.format-card.featured:hover{border-color:#37B7C980}

.format-badge{
    width:52px;
    height:52px;
    border-radius:15px;
    display:grid;
    place-items:center;
    background:#37B7C91f;
    border:1px solid #37B7C94d;
    color:#37B7C9;
    font-size:22px;
    line-height:1;
    margin-bottom:22px;
}
.format-kicker{
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#37B7C9;
    margin-bottom:10px;
}
.format-card h3{
    font-size:24px;
    letter-spacing:-.6px;
    color:#fff;
    margin-bottom:12px;
}
.format-card>p{
    color:#a5bbc4;
    font-size:15.5px;
    line-height:1.75;
    margin-bottom:24px;
}
.format-points{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:11px;
}
.format-points li{
    position:relative;
    padding-left:27px;
    font-size:14.5px;
    line-height:1.6;
    color:#9db3bd;
}
.format-points li:before{
    content:'✓';
    position:absolute;
    left:0;
    top:0;
    color:#37B7C9;
    font-weight:700;
}
.format-note{
    margin-top:auto;
    padding-top:26px;
    font-size:11px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:#708c96;
}

.formats-cta{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:center;
    margin-top:48px;
}
.button.ghost{background:transparent;border:1px solid #ffffff33;color:#fff}
.button.ghost:hover{background:#ffffff0f;border-color:#37B7C9;color:#fff}

@media(max-width:860px){
    .formats-section{padding:60px 0}
    .formats-head{margin-bottom:34px}
    .formats-cards{grid-template-columns:1fr;gap:20px}
    .format-card,.format-card.featured{padding:26px 22px}
    .format-card h3{font-size:22px}
    .formats-cta{margin-top:34px;gap:12px}
    .formats-cta .button{width:100%;justify-content:center}
}