/* ============================================================
   POSITIVONS LA VIE - V6
   CSS GLOBAL (pages abonnés, hors back-office admin)
   Objectif: clair, lumineux, moderne, signature violet subtile
   ============================================================ */

/* ---------- Reset simple & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* ---------- Variables (palette V6) ---------- */
:root{
  /* Fond & surfaces */
  --bg: #f7f5f8;              /* fond clair légèrement mauve/gris */
  --surface: #ffffff;         /* cartes / blocs */
  --surface-2: #fbfafc;       /* alternance */

  /* Texte */
  --text: #2b2b2f;
  --text-2: #5b5b66;
  --muted: #7b7b89;

  /* Signature */
  --primary: #5b2c83;         /* violet profond */
  --primary-2: #7a3fb3;       /* violet plus lumineux */
  --accent: #caa25a;          /* doré doux (matin) */
  --line: rgba(20, 10, 30, .12);

  /* Etats */
  --ok: #1f7a4a;
  --warn: #a46b12;
  --danger: #b3262a;

  /* Layout */
  --maxw: 1120px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.06);

  /* Typo */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
}

/* ---------- Body ---------- */
/* body{
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(122,63,179,.10), transparent 55%),
              radial-gradient(900px 500px at 85% 10%, rgba(202,162,90,.10), transparent 55%),
              var(--bg);
  line-height: 1.45;
}
 */

body{
  font-family: var(--font);
  color: var(--text);
  background:#2a2038;
  line-height:1.45;
  margin:0;
  padding:24px 0;
}

.v6-page-shell{
  width:min(1240px, calc(100% - 36px));
  margin:0 auto;
  background:linear-gradient(180deg, #f7f4fb 0%, #ffffff 24%, #ffffff 100%);
  border:1px solid rgba(125,82,170,.22);
  border-radius:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  overflow:hidden;
}
/* ---------- Helpers ---------- */
.container{
  width:min(var(--maxw), calc(100% - 32px));
  margin:0 auto;
}

.spacer-8{ height: 8px; }
.spacer-16{ height: 16px; }
.spacer-24{ height: 24px; }
.spacer-32{ height: 32px; }

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

/* ---------- Header / Bandeau logo ---------- */
/* Le visuel que vous avez fourni est un bandeau large -> parfait en image responsive */
.site-header{
  background:transparent;
  border-bottom:none;
  backdrop-filter:none;
}

.header-inner{
  padding: 14px 0 10px;
}

.brand-banner{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: #fff;
}

/* Si vous mettez l'image en <img> dans un lien */
.brand-banner img{
  width: 100%;
  height: auto;
}

/* ---------- Menu principal ---------- */
.navbar{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-top:15px;
}

.nav-left,
.nav-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Mode landing : menu uniquement à droite */
.only-right{
  margin-left:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}


.nav-item {
    background-color: #f4f0fa;
    border: 1px solid #8c6bc9;
    color: #4b2d82;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.nav-item:hover {
    background-color: #8c6bc9;
    color: #ffffff;
}

.nav-item.active {
    background-color: #6d49b8;
    color: #ffffff;
}


.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- Main ---------- */
main{
  padding:18px 0 44px;
  background:transparent;
}

.page-title{
  margin: 18px 0 10px;
  font-size: 26px;
  letter-spacing: -0.2px;
  color: var(--text);
}

.page-subtitle{
  margin: 0 0 16px;
  color: var(--text-2);
}


.hero-link {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-link img {
    display: block;
    width: 100%;
    height: auto;
}

.hero-link:hover {
    transform: scale(1.01);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    cursor: pointer;
}


/* ---------- Cards / blocs ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.card.soft{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
}

/* ---------- Coque centrale (évite les bandes blanches plein écran) ---------- */
.v6-content-shell{
  background: linear-gradient(180deg, rgba(232,224,242,.95), rgba(255,255,255,.85));
  border: 1px solid rgba(125, 82, 170, .18);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  padding: 18px;
}

/* ---------- V6 Card (alias de .card pour les pages déjà codées en v6-card) ---------- */
.v6-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* Champs de formulaire mieux visibles */
.v6-card label{
  display:block;
  font-weight: 700;
  margin: 0 0 6px 0;
}

.v6-card input[type="text"],
.v6-card input[type="email"],
.v6-card input[type="password"],
.v6-card select,
.v6-card textarea{
  width: 100%;
  background: rgba(198,188,213,.35); /* inspiré de votre capture */
  border: 1px solid rgba(198,188,213,.85);
  border-radius: 12px;
  padding: 12px 12px;
  outline: none;
}

.v6-card input:focus,
.v6-card select:focus,
.v6-card textarea:focus{
  border-color: rgba(125,82,170,.55);
  box-shadow: 0 0 0 3px rgba(125,82,170,.18);
}


.card-title{
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text);
}

.card-text{
  margin: 0;
  color: var(--text-2);
}

.grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid-3{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* ---------- Boutons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 700;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
  user-select: none;
}

.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 10px 24px rgba(91,44,131,.24);
}

.btn-primary:hover{ filter: brightness(1.03); }

.btn-ghost{
  background: rgba(255,255,255,.75);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.btn-ghost:hover{
  background: #fff;
  border-color: rgba(91,44,131,.25);
}

.btn-accent{
  background: linear-gradient(135deg, rgba(202,162,90,.92), rgba(202,162,90,.72));
  color: #2a1e10;
  box-shadow: 0 10px 24px rgba(202,162,90,.20);
}

.btn-small{
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
}

/* ---------- Alerts ---------- */
.alert{
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  padding: 12px 14px;
  background: rgba(255,255,255,.72);
}

.alert.ok{ border-color: rgba(31,122,74,.35); background: rgba(31,122,74,.07); }
.alert.warn{ border-color: rgba(164,107,18,.35); background: rgba(164,107,18,.07); }
.alert.danger{ border-color: rgba(179,38,42,.35); background: rgba(179,38,42,.07); }

/* ---------- Formulaires ---------- */
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group{ display: flex; flex-direction: column; gap: 6px; }

label{
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
select,
textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  outline: none;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

textarea{ min-height: 110px; resize: vertical; }

input:focus,
select:focus,
textarea:focus{
  border-color: rgba(91,44,131,.45);
  box-shadow: 0 0 0 4px rgba(91,44,131,.10);
  background: #fff;
}

.help{
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Tables ---------- */
.table-wrap{
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

th, td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th{
  background: linear-gradient(180deg, rgba(91,44,131,.10), rgba(91,44,131,.04));
  color: var(--text);
  font-size: 14px;
}

tr:nth-child(even) td{ background: var(--surface-2); }

/* ---------- Player / radio bloc ---------- */
.player-box{
  border-radius: var(--radius);
  border: 1px solid rgba(91,44,131,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.76));
  box-shadow: var(--shadow);
  padding: 16px;
}

.player-title{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.player-title h2{
  margin: 0;
  font-size: 18px;
  color: var(--text);
}

.player-title .small{
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid rgba(125,82,170,.12);
  background:transparent;
}

.footer-inner{
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}


/* ---------------------------------------------------
   PLAYER BUTTONS - cohérence avec menu
--------------------------------------------------- */

.player-buttons {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.player-btn {
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.2s ease;
}

/* Etat désactivé */
.player-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Effet hover similaire au menu */
.player-btn:not(:disabled):hover {
    transform: translateY(-1px);
}

/* =========================================
   BOUTONS PILULE (comme menu)
========================================= */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 18px;
  border-radius: 999px;

  border: 2px solid #7a3cff;   /* violet bordure */
  background: #fff;
  color: #7a3cff;

  font-weight: 600;
  text-decoration: none;

  cursor: pointer;
  user-select: none;

  transition: background .15s ease, color .15s ease, transform .10s ease;
}

/* Hover léger */
.btn-pill:hover {
  transform: translateY(-1px);
}

/* Actif = violet plein + texte blanc */
.btn-pill.is-active {
  background: #7a3cff;
  color: #fff;
}

/* Désactivé */
.btn-pill:disabled {
  opacity: .45;
  cursor: default;
  transform: none;
}

/* Conteneur des boutons lecteur */
.player-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* =========================================================
   V6 - Live PRÉSENCE : Player + Chat (style sombre)
   ========================================================= */

.v6-live-wrap{
  display:grid;
  grid-template-columns: minmax(380px, 1fr) 520px;  /* chat plus large */
  gap:10px;                                        /* rapproche les blocs */
  align-items:start;
  margin-top:14px;
}
@media (max-width: 980px){
  .v6-live-wrap{ grid-template-columns: 1fr; }
}

/* Programme */
.v6-programme{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:#fff;
  padding:14px;
  margin-top:12px;
}

/* Player box : on évite un grand bloc vide */
.v6-player-box{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}


/* L'iframe Infomaniak est pensée pour ~372px : on centre et on évite le fond noir inutile */
/* Iframe centré et responsive */
.v6-player-iframe{
  width:372px;
  height:731px;
  border:0;
  border-radius:12px;
  overflow:hidden;
  display:block;
  margin:0 auto;
  max-width:100%;
}

/* Chat */
.v6-chat-box{
  border:1px solid rgba(0,0,0,.14);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#121212;
  color:#eaeaea;
  min-height:520px;
}

.v6-chat-head{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:#151515;
}
.v6-chat-head h3{
  margin:0;
  font-size:16px;
  color:#fff;
}
.v6-chat-sub{
  font-size:12px;
  color:rgba(255,255,255,.70);
}

.v6-chat-scroll{
  padding:10px;
  overflow:auto;
  max-height:680px;
  background:#0f0f0f;
  scroll-behavior:smooth;
}

/* Message */
.v6-msg{
  display:flex;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,.06);
}
.v6-msg + .v6-msg{ margin-top:8px; }

.v6-ava{
  width:36px;
  height:36px;
  border-radius:999px;
  flex:0 0 36px;
  background:#2a2a2a;
  overflow:hidden;
}
.v6-ava img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.v6-msg-main{ min-width:0; flex:1; }

.v6-line1{
  display:flex;
  gap:8px;
  align-items:baseline;
  flex-wrap:wrap;
}
.v6-time{
  font-size:12px;
  color:rgba(255,255,255,.55);
}
.v6-name{
  font-weight:700;
  font-size:13px;
  color:#fff;
}
.v6-text{
  margin-top:3px;
  font-size:13px;
  line-height:1.35;
  color:rgba(255,255,255,.90);
  white-space:pre-wrap;
  word-wrap:break-word;
}

/* Admin : plus visible */
.v6-msg.admin{
  background: rgba(107,63,214,.18);
  border:1px solid rgba(107,63,214,.45);
}
.v6-msg.admin .v6-name{
  color:#cdbbff;
}

/* Réponse coach */
.v6-msg .v6-rep{
  margin-top:6px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.90);
}

.v6-chat-foot{
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:12px;
  color:rgba(255,255,255,.65);
  background:#151515;
}


/* Barre outils (horloge + boutons) */
.v6-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}


/* Horloge : plus grosse, comme PROD */
.v6-clock{
  text-align:center;
  font-weight: 900;
  font-size: 46px;      /* plus gros */
  letter-spacing: 2px;
  margin: 6px 0 16px 0;
  color:#2b2b2b;
}

/* Boutons : visibles (fond coloré) */
.v6-toolbtn{
  display:inline-block;
  padding: 13px 18px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  cursor:pointer;
  font-weight:800;
  font-size:14px;
}

/* Recharger : fond clair teinté */
.v6-toolbtn.reload{
  width: 100%;
  max-width: 260px;
  background: rgba(107,63,214,.14);
  border-color: rgba(107,63,214,.35);
  color:#2a1a55;
}

/* Quitter : violet plein */
.v6-toolbtn.quit{
  width: 100%;
  max-width: 360px;
  background: #6b3fd6;
  border-color: #6b3fd6;
  color:#fff;
}

.v6-toolbtn:hover{ filter:brightness(.98); }

.v6-btnline{
  display:flex;
  justify-content:center;   /* centre horizontalement */
  margin: 0 0 14px 0;
}



/* =========================================================
   Programme du jour
   ========================================================= */
.v6-programme{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:#fff;
  padding:14px;
  margin-top:12px;
}
.v6-programme-title{
  font-weight:800;
  font-size:16px;
  margin-bottom:10px;
  text-align:center;
}
.v6-programme-empty{
  text-align:center;
  opacity:.75;
  padding:8px 0;
}

.v6-programme-tablewrap{
  display:flex;
  justify-content:center;
}
.v6-programme-table{
  width:min(780px, 100%);
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
}
.v6-programme-table thead th{
  background:rgba(0,0,0,.04);
  font-weight:800;
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.v6-programme-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.v6-programme-table tr:last-child td{ border-bottom:0; }

.v6-prog-hour{
  width:110px;
  font-weight:800;
}

.v6-programme-table tr.hl td{
  background:#fff3a6; /* stabilo jaune */
}
.v6-programme-table tr.bold td{
  font-weight:900;
}

/* =========================================================
   Alerte dynamique (rouge)
   ========================================================= */
.v6-alert-zone{
  margin-top:10px;
}
.v6-alert{
  border-radius:14px;
  padding:14px 16px;
  background:#b60000;
  color:#fff;
  border:1px solid rgba(0,0,0,.15);
}
.v6-alert-head{
  font-weight:900;
  font-size:16px;
  margin-bottom:6px;
}
.v6-alert-title{
  font-weight:900;
  font-size:14px;
  margin-bottom:6px;
  opacity:.95;
}
.v6-alert-msg{
  font-size:14px;
  line-height:1.35;
}

/* =========================================================
   PATCH VISUEL V6 : pas de débordements (fond global blanc)
   + coque centrale pastel uniquement
   ========================================================= */

/* html, body{
  background:#fff !important;
}

.site-header,
main,
.site-footer{
  background:#fff !important;
} */

/* Coque centrale (le bloc aligné avec le bandeau) */
.v6-content-shell{
  background: linear-gradient(180deg, rgba(232,224,242,.95), rgba(255,255,255,.92));
  border: 1px solid rgba(125, 82, 170, .18);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  padding: 18px;
}

/* Support des pages codées en <section class="v6-card"> */
.v6-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* Champs plus visibles (teinte lavande type capture) */
.v6-card input[type="text"],
.v6-card input[type="email"],
.v6-card input[type="password"],
.v6-card select,
.v6-card textarea{
  width: 100%;
  background: rgba(198,188,213,.35);
  border: 1px solid rgba(198,188,213,.85);
  border-radius: 12px;
  padding: 12px 12px;
  outline: none;
}

.v6-card input:focus,
.v6-card select:focus,
.v6-card textarea:focus{
  border-color: rgba(125,82,170,.55);
  box-shadow: 0 0 0 3px rgba(125,82,170,.18);
}

.page-tagline{
    font-size:18px;
    font-style:italic;
    margin-top:6px;
    margin-bottom:18px;
    color:#6a4fb3;
}

@media (max-width: 980px){
  .vod-grid-videos{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .vod-grid-videos{
    grid-template-columns:1fr;
  }

  .vod-thumb-img,
  .vod-thumb-placeholder{
    height:200px;
  }
}

@media (max-width: 980px){
  .vod-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

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

  .vod-card-inner{
    min-height:unset;
  }

  .vod-card-title{
    font-size:20px;
  }
}

.video-modal {
    display:none;
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    justify-content:center;
    align-items:center;
}

.video-content {
    width:80%;
    max-width:900px;
    position:relative;
}

.video-content iframe {
    width:100%;
    height:500px;
}

.close-video {
    position:absolute;
    top:-40px;
    right:0;
    font-size:30px;
    color:#fff;
    cursor:pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .page-title{ font-size: 22px; }
  .nav-item{ padding: 10px 10px; }
  .btn{ width: 100%; }
  .navbar{ gap: 10px; }
  .nav-left, .nav-right{ width: 100%; }
}


.v6-decouverte-card{
  max-width: 900px;
  margin: 0 auto;
}

.page-intro{
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 14px 0;
}

.decouverte-subtitle{
  margin: 0 0 16px 0;
  color: var(--text-2);
  font-size: 15px;
}

.player-status-box{
  margin-top: 10px;
  font-size: 14px;
  opacity: .85;
  display: none;
}

.player-status-time{
  margin-left: 10px;
}

.decouverte-instruction{
  margin-top: 14px;
  font-size: 15px;
  color: var(--text-2);
}

.decouverte-separator{
  height: 1px;
  background: var(--line);
  margin: 28px 0 24px;
}

.section-title{
  margin: 0 0 8px 0;
  font-size: 22px;
  color: var(--text);
}

.section-subtitle{
  margin: 0 0 18px 0;
  color: var(--text-2);
  font-size: 15px;
}

.programme-extrait{
  margin: 0 0 18px 0;
  padding-left: 22px;
}

.programme-extrait li{
  margin-bottom: 10px;
  line-height: 1.5;
  color: var(--text);
}

.programme-note{
  margin: 0 0 14px 0;
  color: var(--text-2);
  line-height: 1.6;
}

.v6-cta-zone{
  margin-top: 10px;
  text-align: center;
}

.v6-btn-primary{
  display: inline-block;
  padding: 14px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(91,44,131,.24);
}

.v6-btn-primary:hover{
  filter: brightness(1.03);
}

.cta-note{
  margin: 18px 0 0 0;
  text-align: center;
  color: var(--text);
  line-height: 1.6;
}

.cta-secondaire{
  margin-top: 18px;
  text-align: center;
}

.btn-inscription-verte{
  background-color: #1f7a4a !important;
  color: #ffffff !important;
  border-color: #1f7a4a !important;
}

.btn-inscription-verte:hover{
  filter: brightness(1.05);
}

.deja-active{
  margin-top: 22px;
}


.v6-decouverte-card{
  max-width: 980px;
  margin: 0 auto;
}

.page-intro{
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 14px 0;
}

.decouverte-separator{
  height: 1px;
  background: var(--line);
  margin: 28px 0 24px;
}

.section-title{
  margin: 0 0 14px 0;
  font-size: 28px;
  color: var(--text);
  text-align: center;
}

.musicament-hook{
  text-align: center;
  padding: 10px 0 2px;
}

.cta-immersif{
  margin: 0 0 16px 0;
  font-size: 20px;
  line-height: 1.65;
  color: var(--text);
}

.cta-note{
  margin: 24px 0 0 0;
  text-align: center;
  color: var(--text-2);
  line-height: 1.65;
  font-size: 16px;
}

@media (max-width: 640px){
  .section-title{
    font-size: 24px;
  }

  .cta-immersif{
    font-size: 18px;
  }

  .page-intro,
  .cta-note{
    font-size: 16px;
  }
}

.v6-decouverte-card{
  max-width: 980px;
  margin: 0 auto;
}

.page-intro{
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 14px 0;
}

.decouverte-separator{
  height: 1px;
  background: var(--line);
  margin: 28px 0 24px;
}

.section-title{
  margin: 0 0 14px 0;
  font-size: 28px;
  color: var(--text);
  text-align: center;
}

.musicament-hook{
  text-align: center;
  padding: 10px 0 2px;
}

.cta-immersif{
  margin: 0 0 16px 0;
  font-size: 20px;
  line-height: 1.65;
  color: var(--text);
}

.cta-note{
  margin: 24px 0 0 0;
  text-align: center;
  color: var(--text-2);
  line-height: 1.65;
  font-size: 16px;
}

@media (max-width: 640px){
  .section-title{
    font-size: 24px;
  }

  .cta-immersif{
    font-size: 18px;
  }

  .page-intro,
  .cta-note{
    font-size: 16px;
  }
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-sep {
    opacity: 0.7;
}