/* =========================================================
   V4 - Hero allege + footer restructure
   Charge APRES demo-design-v3.css
   ========================================================= */

/* ---------------------------------------------------------
   1. HERO - moins de badges, moins de poids
   --------------------------------------------------------- */

/* le macaron rotatif "VOTRE NOUVELLE FREQUENCE" disparait :
   il repetait la promesse deja portee par le titre */
.hero .demo-card:before{content:none;display:none}

/* la pastille secteur du bandeau haut faisait doublon avec
   les onglets de choix juste en dessous */
.hero .card-top .pill{display:none}
.hero .card-top{
    justify-content:flex-start;
    margin-bottom:18px;
    color:#9dbfc4;
    font-weight:600;
    letter-spacing:.14em;
}

/* onglets de choix : intercalaires de calepin poses SUR la
   carte, en dehors d'elle, l'onglet actif se raccorde au bloc */
.hero-panel{margin-left:20px}
.hero .hero-choices{
    display:flex;
    flex-wrap:nowrap;
    gap:5px;
    margin:0 0 -1px;
    padding:0 0 0 24px;
    position:relative;
    z-index:2;
    transform:none;
}
.hero .hero-choices button{
    flex:0 0 auto;
    background:#0a2129b3;
    border:1px solid #94d7d826;
    border-bottom:0;
    border-radius:12px 12px 0 0;
    padding:11px 17px 13px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.01em;
    color:#8fb1b8;
    white-space:nowrap;
    transition:background .2s,color .2s,border-color .2s;
}
.hero .hero-choices button:hover{background:#12333fcc;color:#d5eaee;border-color:#94d7d840}
.hero .hero-choices button[aria-pressed="true"]{
    background:#24434ddd;
    backdrop-filter:blur(18px);
    border-color:#94d7d84d;
    color:#ecfdff;
    box-shadow:inset 0 2px 0 var(--cyan);
}

/* la fleche "Une nouvelle vie en audio" est retiree :
   on redonne de l'air entre la source et le player */
.hero .source{padding-bottom:26px}
.hero .result{margin-top:24px}

/* carte demo : moins d'effets empiles */
.hero .demo-card{
    transform:none;
    margin-left:0;
    position:relative;
    z-index:1;
    border-radius:16px;
    border-color:#94d7d833;
    box-shadow:0 22px 55px #00000059;
}
.hero .result{
    background:linear-gradient(140deg,#24434ddd,#102a36ee);
    border-color:#94d7d833;
    box-shadow:inset 0 1px 0 #ffffff0d;
}
.hero .result.playing{background:linear-gradient(140deg,#2a4f5add,#0e2c39ee)}

/* bouton principal : meme presence, moins de masse */
.hero .button{
    padding:15px 24px;
    border-radius:10px;
    gap:12px;
    box-shadow:none;
}
.hero .button:hover{box-shadow:0 6px 18px #00c5df26}
.hero .actions{gap:26px}
.hero .text-link{border-color:#6f8b90;color:#cfe1e4}
.hero .text-link:hover{color:#fff;border-color:var(--cyan)}

/* bandeau bas du hero : la liste des secteurs faisait un
   troisieme rappel des memes trois mots */
.hero-bottom span{display:none}
.hero-bottom{
    padding:20px 0;
    border-top-color:#ffffff14;
    justify-content:flex-start;
}
.hero-bottom strong{font-weight:500;letter-spacing:.01em}

.hero .reassurance{margin-top:26px;gap:24px;color:#b6c9ce}

@media(max-width:720px){
    .hero-panel{margin-left:0}
    .hero .demo-card{margin-left:0}
    .hero .hero-choices{
        padding-left:12px;
        overflow-x:auto;
        scrollbar-width:none;
    }
    .hero .hero-choices::-webkit-scrollbar{display:none}
    .hero .hero-choices button{padding:10px 13px 12px;font-size:11px;border-radius:10px 10px 0 0}
    .hero .actions{gap:18px}
}

/* ---------------------------------------------------------
   2. FOOTER - vraie structure en colonnes
   --------------------------------------------------------- */
footer{
    background:#061720;
    color:#a8bfc5;
    padding:70px 0 140px;
    border-top:1px solid #ffffff0f;
}

.footer-top{
    display:grid;
    grid-template-columns:1.55fr 1fr 1fr 1fr 1.4fr;
    gap:36px;
    padding-bottom:44px;
    border-bottom:1px solid #ffffff14;
}

.footer-brand p{
    font-size:14px;
    line-height:1.7;
    color:#93aeb5;
    margin:18px 0 22px;
    max-width:300px;
}
footer .logo{
    background:none;
    padding:0;
    border-radius:0;
    display:inline-flex;
}
footer .logo img{width:186px}

.footer-social{display:flex;gap:10px}
.footer-social a{
    width:38px;
    height:38px;
    border:1px solid #ffffff1f;
    border-radius:9px;
    display:grid;
    place-items:center;
    color:#9fbcc2;
    transition:border-color .2s,color .2s,background .2s;
}
.footer-social a:hover{border-color:var(--cyan);color:var(--cyan);background:#00c5df12}
.footer-social svg{width:17px;height:17px;fill:currentColor;display:block}

.footer-col{display:flex;flex-direction:column;align-items:flex-start}
/* les colonnes sont des <nav> : neutraliser le nav{height:86px;gap:24px} du header */
footer nav.footer-col{height:auto;gap:0;align-items:flex-start;justify-content:flex-start}
.footer-col h3{
    font-family:Manrope,sans-serif;
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:700;
    color:#5fd4e4;
    margin-bottom:12px;
}
.footer-col a{
    font-size:14px;
    line-height:1.45;
    color:#b0c6cb;
    padding:4px 0;
    transition:color .2s;
}
.footer-col a:hover{color:#fff}

.footer-contact .footer-cta{
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:var(--cyan);
    color:#0a2730;
    font-weight:700;
    font-size:14px;
    border-radius:9px;
    padding:13px 18px;
    margin-bottom:16px;
    transition:background .2s,transform .2s;
}
.footer-contact .footer-cta:hover{background:#7aeeee;transform:translateY(-2px);color:#0a2730}
.footer-contact .footer-phone{font-size:15px;font-weight:700;color:#e2eff1}
.footer-contact small{
    display:block;
    font-size:12px;
    color:#7e9aa1;
    margin-top:10px;
    line-height:1.6;
}

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    padding-top:26px;
}
.footer-bottom p{font-size:12px;color:#7a959c;margin:0}
.footer-legal{display:flex;flex-wrap:wrap;gap:22px}
.footer-legal a{font-size:12px;color:#7a959c;transition:color .2s}
.footer-legal a:hover{color:#cfe2e5}

@media(max-width:1080px){
    .footer-top{grid-template-columns:1fr 1fr 1fr;gap:36px 30px}
    .footer-brand{grid-column:1/-1}
    .footer-brand p{max-width:520px}
}

@media(max-width:720px){
    footer{padding:48px 0 95px}
    .footer-top{grid-template-columns:1fr 1fr;gap:32px 24px;padding-bottom:34px}
    .footer-brand p{font-size:13.5px;margin:16px 0 20px}
    footer .logo img{width:152px}
    .footer-contact{grid-column:1/-1}
    .footer-col h3{font-size:10px;margin-bottom:12px}
    .footer-col a{font-size:13.5px;padding:3px 0}
    .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
    .footer-legal{gap:14px}
}