/* =========================================================
   STEPH COACH — PREMIUM UI
   Couche visuelle uniquement — socle styles.css inchangé
   ========================================================= */

/* ---------- Atmosphère générale ---------- */

html,
body{
  background:
    radial-gradient(circle at 50% -180px, rgba(217,6,55,.10), transparent 390px),
    #171d29;
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Header premium ---------- */

.app-header{
  position:relative;
  display:block;
  padding:22px 18px 20px;
  border-bottom:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(217,6,55,.11), transparent 65%),
    linear-gradient(180deg, rgba(27,36,51,.98) 0%, rgba(23,29,41,.98) 100%);
}

.app-header::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(217,6,55,.45),
    transparent
  );
}

.branding--center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  text-align:center;
}

.branding--center > a{
  display:block;
  line-height:0;
}

.logo-wide{
  display:block;
  width:min(330px,78vw);
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.28));
}

.titles{
  max-width:720px;
  margin:0 auto;
}

.titles h1{
  margin:0;
  color:#fff;
  font-size:clamp(20px,5vw,27px);
  line-height:1.15;
  font-weight:750;
  letter-spacing:-.025em;
}

.subtitle{
  max-width:620px;
  margin:8px auto 0;
  color:#aeb5c3;
  font-size:12.5px;
  line-height:1.5;
}

.top-actions{
  position:absolute;
  top:14px;
  right:14px;
}

/* ---------- Accroche ---------- */

.intro-cards-highlight{
  max-width:920px;
  margin:20px auto 0;
  padding:0 16px;
}

.highlight-text{
  position:relative;
  margin:0;
  padding:16px 18px 16px 21px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.055);
  border-radius:16px;
  background:linear-gradient(
    135deg,
    rgba(35,48,69,.92),
    rgba(27,36,51,.92)
  );
  box-shadow:0 12px 30px rgba(0,0,0,.16);
  color:#f5f6f8;
  font-size:14px;
  line-height:1.55;
  font-weight:600;
}

.highlight-text::before{
  content:"";
  position:absolute;
  top:13px;
  bottom:13px;
  left:0;
  width:3px;
  border-radius:0 4px 4px 0;
  background:var(--accent);
  box-shadow:0 0 16px rgba(217,6,55,.35);
}

/* ---------- Présentation ---------- */

.intro-cards{
  max-width:1100px;
  margin:14px auto 0;
  padding:0 16px;
}

.intro-cards__inner{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.intro-card{
  position:relative;
  padding:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.055);
  border-radius:18px;
  background:
    linear-gradient(145deg, rgba(31,42,59,.98), rgba(26,35,50,.98));
  box-shadow:
    0 14px 35px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.intro-card::before{
  content:"";
  position:absolute;
  top:0;
  left:18px;
  width:34px;
  height:2px;
  border-radius:999px;
  background:rgba(217,6,55,.78);
}

.intro-card--premium{
  border-color:rgba(217,191,122,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(217,191,122,.07), transparent 48%),
    linear-gradient(145deg, rgba(31,42,59,.98), rgba(26,35,50,.98));
}

.intro-card--premium::before{
  width:46px;
  background:var(--gold);
  box-shadow:0 0 15px rgba(217,191,122,.22);
}

.intro-card__title,
.intro-card__subtitle{
  margin:0 0 11px;
  color:#fff;
  font-size:15px;
  line-height:1.35;
  font-weight:750;
  letter-spacing:-.01em;
}

.intro-card--premium .intro-card__subtitle{
  color:#ead79f;
}

.intro-card__text,
.intro-card__list{
  color:#aeb5c3;
  font-size:12.5px;
  line-height:1.6;
}

.intro-card__text{
  margin:0 0 10px;
}

.intro-card__text:last-child{
  margin-bottom:0;
}

.intro-card__list{
  margin:0 0 11px;
  padding-left:18px;
}

.intro-card__list li{
  margin:0 0 5px;
}

.intro-note{
  max-width:1080px;
  margin:10px auto 0;
  padding:0 16px;
  color:#7f8999;
  font-size:10.5px;
  line-height:1.45;
  text-align:center;
}

/* ---------- Recherche ---------- */

.searchbar{
  position:relative;
  max-width:1100px;
  margin:18px auto 0;
  padding:0 16px 13px;
  border-bottom:0;
}

.searchbar::before{
  content:"⌕";
  position:absolute;
  z-index:2;
  left:31px;
  top:50%;
  transform:translateY(-64%);
  color:#7f8999;
  font-size:25px;
  line-height:1;
  pointer-events:none;
}

.searchbar input{
  width:100%;
  height:50px;
  padding:0 16px 0 47px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  outline:none;
  background:rgba(27,36,51,.94);
  box-shadow:
    0 10px 26px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.025);
  color:#fff;
  font-size:14px;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.searchbar input::placeholder{
  color:#7f8999;
}

.searchbar input:focus{
  border-color:rgba(217,6,55,.72);
  background:#1c2636;
  box-shadow:
    0 0 0 3px rgba(217,6,55,.09),
    0 12px 28px rgba(0,0,0,.15);
}

/* ---------- Navigation musculaire ---------- */

.tabs{
  position:relative;
  display:flex;
  max-width:1100px;
  margin:0 auto;
  gap:7px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:5px 16px 15px;
  border-bottom:0;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.tabs::-webkit-scrollbar{
  display:none;
}

.tab{
  position:relative;
  flex:0 0 76px;
  width:76px;
  min-height:100px;
  gap:3px;
  padding:5px 3px 8px;
  border:0;
  border-radius:16px;
  background:transparent;
  color:#8f98a8;
  scroll-snap-align:start;
  transition:
    color .2s ease,
    background .2s ease,
    transform .16s ease;
}

.tab::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:0;
  height:3px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 10px rgba(217,6,55,.45);
  transform:translateX(-50%);
  transition:width .2s ease;
}

.tab-icon{
  width:65px;
  height:65px;
  filter:saturate(.88) brightness(.92);
  opacity:.82;
  transition:
    transform .2s ease,
    filter .2s ease,
    opacity .2s ease;
}

.tab-label{
  min-height:25px;
  color:inherit;
  font-size:10.5px;
  line-height:1.15;
  font-weight:650;
}

.tab.active{
  border:0;
  background:
    radial-gradient(circle at 50% 40%, rgba(217,6,55,.15), transparent 62%);
  color:#fff;
}

.tab.active::after{
  width:24px;
}

.tab.active .tab-icon{
  opacity:1;
  filter:saturate(1.06) brightness(1.04);
  transform:scale(1.06);
}

.tab:active{
  transform:scale(.96);
}

/* ---------- Mobile ---------- */

@media (max-width:760px){

  .app-header{
    padding:18px 15px 18px;
  }

  .app-header::after{
    left:15px;
    right:15px;
  }

  .logo-wide{
    width:min(285px,74vw);
  }

  .titles h1{
    max-width:340px;
    margin:auto;
    font-size:21px;
  }

  .subtitle{
    max-width:345px;
    font-size:11.5px;
  }

  .intro-cards-highlight{
    margin-top:14px;
    padding:0 12px;
  }

  .highlight-text{
    padding:14px 15px 14px 18px;
    border-radius:15px;
    font-size:13px;
  }

  .intro-cards{
    margin-top:10px;
    padding:0 12px;
  }

  .intro-cards__inner{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:2px 1px 8px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .intro-cards__inner::-webkit-scrollbar{
    display:none;
  }

  .intro-card{
    flex:0 0 88%;
    min-width:0;
    padding:16px;
    border-radius:17px;
    scroll-snap-align:center;
  }

  .intro-card__title,
  .intro-card__subtitle{
    font-size:14px;
  }

  .intro-card__text,
  .intro-card__list{
    font-size:11.5px;
    line-height:1.55;
  }

  .intro-note{
    margin-top:5px;
    padding:0 18px;
    font-size:9.5px;
  }

  .searchbar{
    margin-top:14px;
    padding:0 12px 10px;
  }

  .searchbar::before{
    left:27px;
  }

  .searchbar input{
    height:48px;
    border-radius:14px;
    font-size:13px;
  }

  .tabs{
    gap:5px;
    padding:4px 10px 13px;
  }

  .tab{
    flex-basis:72px;
    width:72px;
    min-height:96px;
  }

  .tab-icon{
    width:62px;
    height:62px;
  }

  .tab-label{
    font-size:10px;
  }
}

/* =========================================================
   PREMIUM V2 — Cartes exercices + compaction mobile
   ========================================================= */

/* ---------- Cartes exercices ---------- */

.grid{
  gap:18px;
  padding-top:20px;
}

.card{
  border:1px solid rgba(255,255,255,.065);
  border-radius:22px;
  background:
    linear-gradient(145deg,#1d2839 0%,#192231 100%);
  box-shadow:
    0 16px 38px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.card:active{
  transform:scale(.985);
}

/* GIF plus immersif */

.card img.thumb{
  width:100%;
  border:0;
  display:block;
}

/* Favori flottant */

.card .fav{
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(255,255,255,.20);
  border-radius:50%;
  background:rgba(23,29,41,.62);
  color:#fff;
  font-size:20px;
  line-height:1;
  box-shadow:0 5px 16px rgba(0,0,0,.20);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  transition:
    transform .16s ease,
    background .18s ease,
    border-color .18s ease;
}

.card .fav:active{
  transform:scale(.88);
}

.card .fav.active{
  border-color:rgba(217,6,55,.9);
  background:rgba(217,6,55,.94);
  box-shadow:0 5px 18px rgba(217,6,55,.24);
}

/* Infos */

.card .meta{
  padding:15px 20px 10px;
}

.card .title{
  margin:0 0 5px;
  color:#fff;
  font-size:19px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:-.018em;
}

.card .tags{
  margin:0;
  color:#aeb5c3;
  font-size:13px;
  line-height:1.45;
}

/* Bouton Lire plus premium */

.card .btn.play{
  position:relative;
  height:48px;
  margin:8px 20px 18px;
  padding:0 44px 0 18px;
  border-radius:14px;
  background:
    linear-gradient(135deg,#e2073c 0%,#cf052f 100%);
  box-shadow:
    0 8px 20px rgba(217,6,55,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
  font-size:14px;
  font-weight:750;
  letter-spacing:.01em;
}

.card .btn.play::after{
  content:"›";
  position:absolute;
  top:50%;
  right:18px;
  transform:translateY(-54%);
  font-size:25px;
  line-height:1;
  font-weight:400;
  opacity:.9;
}

.card .btn.play:active{
  transform:scale(.985);
}

/* ---------- Mobile ---------- */

@media (max-width:760px){

  /* Présentation moins envahissante */

  .intro-card{
    flex-basis:82%;
  }

  .intro-card__text{
    font-size:11px;
  }

  .intro-card__list{
    font-size:11px;
  }

  /* Grille */

  .grid{
    padding:18px 12px 30px;
    gap:16px;
  }

  .card{
    border-radius:20px;
  }

  .card .meta{
    padding:14px 17px 8px;
  }

  .card .title{
    font-size:18px;
  }

  .card .tags{
    font-size:12.5px;
  }

  .card .btn.play{
    height:46px;
    margin:8px 17px 16px;
    border-radius:13px;
  }

  .card .fav{
    top:10px;
    right:10px;
    width:42px;
    height:42px;
  }
}

/* =========================================================
   PREMIUM V3 — Palette scientifique + carrousel compact
   ========================================================= */

:root{
  --science-blue:#5f7fa6;
  --science-blue-soft:#7895b8;
  --science-glow:rgba(95,127,166,.16);
}

/* Atmosphère : bleu scientifique dominant */
html,
body{
  background:
    radial-gradient(circle at 50% -180px, rgba(95,127,166,.11), transparent 390px),
    #171d29;
}

/* Header : suppression de la dominante rouge */
.app-header{
  background:
    radial-gradient(circle at 50% 0%, rgba(95,127,166,.10), transparent 65%),
    linear-gradient(180deg, rgba(27,36,51,.98) 0%, rgba(23,29,41,.98) 100%);
}

.app-header::after{
  background:linear-gradient(
    90deg,
    transparent,
    rgba(95,127,166,.32),
    transparent
  );
}

/* Accroche : accent scientifique au lieu du rouge */
.highlight-text::before{
  background:var(--science-blue-soft);
  box-shadow:0 0 14px rgba(95,127,166,.26);
}

/* Cartes éditoriales */
.intro-card::before{
  background:var(--science-blue);
}

/* La carte clients conserve son or premium */
.intro-card--premium::before{
  background:var(--gold);
}

/* Le carrousel ne force plus toutes les cartes
   à prendre la hauteur de la plus grande */
@media (max-width:760px){

  .intro-cards__inner{
    align-items:flex-start;
  }

  .intro-card{
    align-self:flex-start;
    height:auto;
    min-height:0;
  }
}

/* =========================================================
   PREMIUM V4 — Lisibilité carte accompagnement
   ========================================================= */

.intro-card--premium,
.intro-card--premium p,
.intro-card--premium .intro-card__text{
  color:#b8c0cd !important;
}

.intro-card--premium .intro-card__title,
.intro-card--premium .intro-card__subtitle{
  color:#ead79f !important;
}

.intro-card--premium{
  border-color:rgba(217,191,122,.32);
  box-shadow:
    0 14px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(217,191,122,.035);
}

/* =========================================================
   PREMIUM V5 — Fiche exercice
   ========================================================= */

/* Fond derrière la fiche */
.overlay{
  background:rgba(5,9,15,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* Carte principale */
.overlay-content{
  position:relative;
  width:min(92vw,520px);
  max-width:520px;
  padding:26px 20px 24px;
  border:1px solid rgba(120,149,184,.14);
  border-radius:26px;
  background:
    linear-gradient(155deg,#1e2a3c 0%,#192332 100%);
  box-shadow:
    0 24px 70px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* Titre : réserve la place aux boutons et évite les coupures */
.overlay-title{
  width:100%;
  margin:0;
  padding:8px 112px 2px 8px;
  color:#fff;
  font-size:23px;
  line-height:1.18;
  font-weight:750;
  letter-spacing:-.025em;
  text-align:left;
  overflow-wrap:anywhere;
}

/* Métadonnées */
.overlay-tags{
  width:100%;
  margin:4px 0 12px;
  padding:0 8px;
  color:#aeb8c8;
  font-size:13px;
  line-height:1.4;
  text-align:left;
}

/* GIF */
.overlay img.big-gif{
  width:100%;
  max-width:none;
  margin-top:4px;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

/* Actions plus discrètes */
.overlay-share,
.overlay-close{
  position:absolute;
  top:20px;
  width:42px;
  height:42px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  background:#26354a;
  box-shadow:0 7px 18px rgba(0,0,0,.22);
}

.overlay-close{
  right:18px;
}

.overlay-share{
  right:68px;
}

.overlay-share svg{
  width:20px;
  height:20px;
}

/* Le fermer conserve un discret rappel SR */
.overlay-close{
  color:#fff;
  border-color:rgba(217,6,55,.28);
}

/* Bloc instructions */
.overlay-desc-wrapper{
  width:100%;
  margin-top:10px;
  padding:18px 8px 4px;
  border-top:1px solid rgba(120,149,184,.15);
}

.overlay-desc-title{
  margin:0 0 18px;
  color:#fff;
  font-size:19px;
  line-height:1.25;
  font-weight:750;
  letter-spacing:-.015em;
}

/* Étapes */
.overlay-desc{
  margin:0;
  padding-left:30px;
  color:#e7eaf0;
  font-size:15px;
  line-height:1.52;
}

.overlay-desc li{
  padding:0 0 11px 5px;
}

.overlay-desc li::marker{
  color:#7895b8;
  font-weight:700;
}

/* Mobile */
@media (max-width:600px){

  .overlay{
    padding:12px;
    align-items:flex-start;
  }

  .overlay-content{
    width:100%;
    max-width:none;
    margin:8px 0 18px;
    padding:20px 16px 20px;
    border-radius:24px;
  }

  .overlay-title{
    padding:7px 102px 2px 4px;
    font-size:21px;
  }

  .overlay-tags{
    padding:0 4px;
    margin-top:5px;
    font-size:12.5px;
  }

  .overlay-share,
  .overlay-close{
    top:16px;
    width:40px;
    height:40px;
    border-radius:12px;
  }

  .overlay-close{
    right:14px;
  }

  .overlay-share{
    right:62px;
  }

  .overlay img.big-gif{
    border-radius:16px;
  }

  .overlay-desc-wrapper{
    padding:17px 4px 0;
  }

  .overlay-desc-title{
    font-size:18px;
    margin-bottom:15px;
  }

  .overlay-desc{
    padding-left:27px;
    font-size:14.5px;
    line-height:1.5;
  }
}

/* =========================================================
   PREMIUM V6 — Actions exercices + navigation flottante
   ========================================================= */

/* Bouton Lire : action intégrée, moins agressive */
.card .btn.play{
  height:48px;
  margin:8px 17px 17px;
  padding:0 46px 0 18px;

  border:1px solid rgba(120,149,184,.30);
  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      rgba(46,65,90,.96) 0%,
      rgba(36,52,73,.96) 100%
    );

  color:#fff;

  box-shadow:
    0 8px 20px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.045);

  font-size:14px;
  font-weight:750;

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

.card .btn.play::after{
  color:#8ea9c8;
  opacity:1;
}

.card .btn.play:active{
  transform:scale(.985);
  border-color:rgba(217,6,55,.55);

  background:
    linear-gradient(
      135deg,
      rgba(50,67,91,.98) 0%,
      rgba(39,54,75,.98) 100%
    );
}

/* Navigation musculaire flottante */
.muscle-quick-nav{
  border:1px solid rgba(120,149,184,.30);

  background:
    linear-gradient(
      135deg,
      rgba(30,42,60,.97) 0%,
      rgba(25,35,50,.97) 100%
    );

  box-shadow:
    0 12px 30px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.muscle-quick-nav__action{
  color:#8ea9c8;
}

/* Un micro-rappel SR au toucher */
.muscle-quick-nav:active{
  border-color:rgba(217,6,55,.40);
}

/* Favori inactif légèrement plus bleu */
.card .fav{
  background:rgba(35,49,69,.80);
  border-color:rgba(120,149,184,.26);
}

/* Favori actif = rouge SR, il reste une vraie action forte */
.card .fav.active{
  background:var(--accent);
  border-color:var(--accent);
}

/* =========================================================
   PREMIUM V7 — CTA Lire identifiable et premium
   ========================================================= */

.card .btn.play{
  border:1px solid rgba(125,164,207,.52);

  background:
    linear-gradient(
      135deg,
      #38577a 0%,
      #304b6b 48%,
      #273f5d 100%
    );

  color:#fff;

  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    0 0 18px rgba(95,127,166,.08),
    inset 0 1px 0 rgba(255,255,255,.10);

  font-weight:750;
}

.card .btn.play::after{
  color:#b7cee7;
  opacity:1;
  transition:transform .16s ease;
}

.card .btn.play:active{
  transform:scale(.98);

  background:
    linear-gradient(
      135deg,
      #426487 0%,
      #365575 50%,
      #2c4868 100%
    );

  border-color:rgba(142,177,215,.72);
}

.card .btn.play:active::after{
  transform:translate(3px,-54%);
}

@media (hover:hover){
  .card .btn.play:hover{
    background:
      linear-gradient(
        135deg,
        #406185 0%,
        #355473 48%,
        #2b4665 100%
      );

    border-color:rgba(142,177,215,.68);
  }
}

/* =========================================================
   PREMIUM V8 — Product finish
   ========================================================= */

/* =========================
   CARTES EXERCICES
   ========================= */

.card{
  border:1px solid rgba(132,157,188,.12);
  border-radius:24px;
  background:#1b2637;
  box-shadow:
    0 16px 40px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.card img.thumb{
  border-radius:23px 23px 0 0;
}

.card .meta{
  padding:17px 20px 5px;
}

.card .title{
  font-size:19px;
  font-weight:760;
  letter-spacing:-.025em;
}

.card .tags{
  margin-top:6px;
  color:#aab5c5;
  font-size:12.5px;
}

/* Action beaucoup plus raffinée */
.card .btn.play{
  height:44px;
  margin:10px 20px 18px;
  padding:0 18px;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  border:0;
  border-top:1px solid rgba(120,149,184,.15);
  border-radius:0;

  background:transparent;

  box-shadow:none;

  color:#91add0;
  font-size:13px;
  font-weight:700;
  text-align:left;
}

.card .btn.play::before{
  content:"Voir l'exercice";
}

.card .btn.play{
  font-size:0;
}

.card .btn.play::before{
  font-size:13px;
}

.card .btn.play::after{
  content:"→";
  right:18px;
  color:#91add0;
  font-size:20px;
}

.card .btn.play:active{
  background:rgba(120,149,184,.06);
  transform:none;
}

/* Favori plus fin */
.card .fav{
  width:42px;
  height:42px;
  background:rgba(28,40,57,.78);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* =========================
   FICHE EXERCICE
   ========================= */

.overlay-content{
  background:
    linear-gradient(
      165deg,
      #1d2a3d 0%,
      #192434 100%
    );

  border:1px solid rgba(132,157,188,.13);

  box-shadow:
    0 30px 90px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* Image */
.overlay img.big-gif{
  margin-top:10px;
  border-radius:20px;
  box-shadow:
    0 12px 30px rgba(0,0,0,.18);
}

/* Titre */
.overlay-title{
  font-size:22px;
  font-weight:780;
  letter-spacing:-.03em;
}

/* Tags */
.overlay-tags{
  color:#aab5c5;
  letter-spacing:.005em;
}

/* Séparateur instructions */
.overlay-desc-wrapper{
  margin-top:18px;
  padding-top:22px;
  border-top:1px solid rgba(132,157,188,.13);
}

.overlay-desc-title{
  margin-bottom:20px;
  font-size:19px;
  letter-spacing:-.02em;
}

/* Étapes façon application */
.overlay-desc{
  list-style:none;
  counter-reset:steps;
  padding:0;
}

.overlay-desc li{
  counter-increment:steps;
  position:relative;

  min-height:38px;
  margin:0 0 13px;
  padding:2px 0 0 44px;

  color:#e8ebf0;
  font-size:14.5px;
  line-height:1.48;
}

.overlay-desc li::before{
  content:counter(steps);

  position:absolute;
  top:0;
  left:0;

  width:29px;
  height:29px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(120,149,184,.28);
  border-radius:9px;

  background:rgba(72,101,137,.20);
  color:#91add0;

  font-size:12px;
  font-weight:800;
}

/* Actions fiche */
.overlay-share,
.overlay-close{
  background:rgba(40,56,78,.92);
  border-color:rgba(132,157,188,.20);
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.045);
}

.overlay-close{
  border-color:rgba(217,6,55,.25);
}

/* =========================
   PETITES FINITIONS MOBILE
   ========================= */

@media(max-width:600px){

  .grid{
    gap:20px;
  }

  .card .meta{
    padding:16px 18px 4px;
  }

  .card .btn.play{
    margin:9px 18px 15px;
  }

  .overlay-desc li{
    padding-left:42px;
  }
}

/* =========================================================
   PREMIUM V8 — Product finish
   ========================================================= */

/* =========================
   CARTES EXERCICES
   ========================= */

.card{
  border:1px solid rgba(132,157,188,.12);
  border-radius:24px;
  background:#1b2637;
  box-shadow:
    0 16px 40px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.card img.thumb{
  border-radius:23px 23px 0 0;
}

.card .meta{
  padding:17px 20px 5px;
}

.card .title{
  font-size:19px;
  font-weight:760;
  letter-spacing:-.025em;
}

.card .tags{
  margin-top:6px;
  color:#aab5c5;
  font-size:12.5px;
}

/* Action beaucoup plus raffinée */
.card .btn.play{
  height:44px;
  margin:10px 20px 18px;
  padding:0 18px;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  border:0;
  border-top:1px solid rgba(120,149,184,.15);
  border-radius:0;

  background:transparent;

  box-shadow:none;

  color:#91add0;
  font-size:13px;
  font-weight:700;
  text-align:left;
}

.card .btn.play::before{
  content:"Voir l'exercice";
}

.card .btn.play{
  font-size:0;
}

.card .btn.play::before{
  font-size:13px;
}

.card .btn.play::after{
  content:"→";
  right:18px;
  color:#91add0;
  font-size:20px;
}

.card .btn.play:active{
  background:rgba(120,149,184,.06);
  transform:none;
}

/* Favori plus fin */
.card .fav{
  width:42px;
  height:42px;
  background:rgba(28,40,57,.78);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* =========================
   FICHE EXERCICE
   ========================= */

.overlay-content{
  background:
    linear-gradient(
      165deg,
      #1d2a3d 0%,
      #192434 100%
    );

  border:1px solid rgba(132,157,188,.13);

  box-shadow:
    0 30px 90px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* Image */
.overlay img.big-gif{
  margin-top:10px;
  border-radius:20px;
  box-shadow:
    0 12px 30px rgba(0,0,0,.18);
}

/* Titre */
.overlay-title{
  font-size:22px;
  font-weight:780;
  letter-spacing:-.03em;
}

/* Tags */
.overlay-tags{
  color:#aab5c5;
  letter-spacing:.005em;
}

/* Séparateur instructions */
.overlay-desc-wrapper{
  margin-top:18px;
  padding-top:22px;
  border-top:1px solid rgba(132,157,188,.13);
}

.overlay-desc-title{
  margin-bottom:20px;
  font-size:19px;
  letter-spacing:-.02em;
}

/* Étapes façon application */
.overlay-desc{
  list-style:none;
  counter-reset:steps;
  padding:0;
}

.overlay-desc li{
  counter-increment:steps;
  position:relative;

  min-height:38px;
  margin:0 0 13px;
  padding:2px 0 0 44px;

  color:#e8ebf0;
  font-size:14.5px;
  line-height:1.48;
}

.overlay-desc li::before{
  content:counter(steps);

  position:absolute;
  top:0;
  left:0;

  width:29px;
  height:29px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(120,149,184,.28);
  border-radius:9px;

  background:rgba(72,101,137,.20);
  color:#91add0;

  font-size:12px;
  font-weight:800;
}

/* Actions fiche */
.overlay-share,
.overlay-close{
  background:rgba(40,56,78,.92);
  border-color:rgba(132,157,188,.20);
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.045);
}

.overlay-close{
  border-color:rgba(217,6,55,.25);
}

/* =========================
   PETITES FINITIONS MOBILE
   ========================= */

@media(max-width:600px){

  .grid{
    gap:20px;
  }

  .card .meta{
    padding:16px 18px 4px;
  }

  .card .btn.play{
    margin:9px 18px 15px;
  }

  .overlay-desc li{
    padding-left:42px;
  }
}


/* ============================================================
   SR PREMIUM — ACCORDEONS BIBLIOTHEQUE
   ============================================================ */

.library-info{
  max-width:760px;
  margin:18px auto 22px;
  padding:0 16px;
}

.library-info__heading{
  margin:0 0 12px;
}

.library-info__heading > span{
  display:block;
  margin-bottom:4px;
  color:#7899bf;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
}

.library-info__heading h2{
  margin:0;
  color:#f5f7fa;
  font-size:19px;
  line-height:1.25;
  font-weight:750;
  letter-spacing:-.025em;
}

.library-info__accordion{
  overflow:hidden;
  border:1px solid rgba(125,157,194,.15);
  border-radius:18px;
  background:#1a2535;
  box-shadow:
    0 12px 32px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.library-info__item{
  margin:0;
  border:0;
  border-bottom:1px solid rgba(125,157,194,.11);
  background:transparent;
}

.library-info__item:last-child{
  border-bottom:0;
}

.library-info__item summary{
  min-height:78px;
  padding:14px 15px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}

.library-info__item summary::-webkit-details-marker{
  display:none;
}

.library-info__number{
  flex:0 0 35px;
  width:35px;
  height:35px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(126,166,211,.24);
  border-radius:10px;
  background:rgba(87,123,163,.12);
  color:#87a9cf;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
}

.library-info__label{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.library-info__label strong{
  color:#f1f4f8;
  font-size:14px;
  line-height:1.25;
  font-weight:720;
}

.library-info__label small{
  color:#8996a8;
  font-size:11px;
  line-height:1.35;
  font-weight:500;
}

.library-info__plus{
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(126,166,211,.18);
  border-radius:50%;
  color:#8aa9cd;
  font-size:20px;
  font-weight:300;
  line-height:1;
  transition:
    transform .22s ease,
    background .22s ease,
    color .22s ease;
}

.library-info__item[open]{
  background:rgba(101,137,178,.035);
}

.library-info__item[open] .library-info__plus{
  transform:rotate(45deg);
  background:rgba(126,166,211,.10);
  color:#fff;
}

.library-info__content{
  padding:0 18px 18px 62px;
  color:#b7c0cd;
  font-size:12.5px;
  line-height:1.6;
}

.library-info__content p{
  margin:0 0 11px;
}

.library-info__content p:last-child{
  margin-bottom:0;
}

.library-info__content ul{
  margin:2px 0 12px;
  padding:0;
  list-style:none;
}

.library-info__content li{
  position:relative;
  margin:0 0 7px;
  padding-left:15px;
}

.library-info__content li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#789dc8;
}

.library-info__item--premium .library-info__number{
  border-color:rgba(217,191,122,.34);
  background:rgba(217,191,122,.07);
  color:#d9bf7a;
}

.library-info__item--premium .library-info__label strong{
  color:#ead79f;
}

.library-info__item--premium .library-info__plus{
  border-color:rgba(217,191,122,.22);
  color:#d9bf7a;
}

.library-info__note{
  padding-top:8px;
  border-top:1px solid rgba(217,191,122,.12);
  color:#8d929b;
  font-size:10.5px;
  font-style:italic;
}


/* ============================================================
   SR PREMIUM — CTA VOIR L'EXERCICE
   ============================================================ */

.card .btn.play::before{
  content:none !important;
  display:none !important;
}

.card .btn.play{
  position:relative;
  min-height:54px;
  margin:10px 18px 17px;
  padding:0 58px 0 17px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background:linear-gradient(135deg,#3c5f87 0%,#304e70 100%);
  border:1px solid rgba(151,190,232,.46);
  border-radius:14px;
  box-shadow:
    0 8px 20px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.09);
  color:#fff;
  font-size:14px !important;
  font-weight:750;
  letter-spacing:.005em;
  text-align:left;
  cursor:pointer;
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}

.card .btn.play::after{
  content:"→";
  position:absolute;
  right:12px;
  top:50%;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:19px;
  font-weight:400;
}

.card .btn.play:active{
  transform:scale(.985);
  background:linear-gradient(135deg,#466d98 0%,#36587e 100%);
}

@media(max-width:600px){

  .library-info{
    margin:14px auto 18px;
    padding:0 12px;
  }

  .library-info__item summary{
    min-height:72px;
    padding:12px 13px;
    gap:10px;
  }

  .library-info__content{
    padding:0 14px 16px 58px;
  }

  .card .btn.play{
    min-height:54px;
    margin:9px 18px 16px;
  }
}