/* ==========================================================================
   SpeakPro Academy — Cartes de modules (Classic, Practice, Premium)
   Chaque module est une carte en relief, nettement séparée des autres :
   tuile numérotée à gauche, titre, statut, bouton d'accès à droite.
   Couleurs du site : terracotta (--gold), bleu marine (--navy).
   ========================================================================== */

.cx-section .cx-mod-list{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:6px;
  min-width:0;
}
.cx-section .cx-mod-list > *{ min-width:0; }

/* ---------- Carte ---------- */
.cx-section .cx-module-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  margin:0;
  padding:16px 16px 16px 14px;
  min-height:92px;
  border-radius:18px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF8F5 100%);
  border:1px solid #ECE4DA;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 0 #E7DED3,
    0 12px 24px rgba(16,35,63,.06);
  color:inherit;
  text-decoration:none;
  opacity:1;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.cx-section a.cx-module-row:hover{
  transform:translateY(-2px);
  border-color:#E3CDBB;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 6px 0 #E3D3C4,
    0 18px 32px rgba(16,35,63,.09);
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF8F5 100%);
}
.cx-section a.cx-module-row:active{
  transform:translateY(3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 1px 0 #E7DED3,
    0 6px 12px rgba(16,35,63,.06);
}
.cx-section a.cx-module-row:focus-visible{
  outline:3px solid rgba(200,104,63,.45);
  outline-offset:3px;
}

/* Module en cours / à faire : liseré terracotta pour le repérer d'un coup d'œil */
.cx-section .cx-module-row.st-in_progress{
  border-color:#EBC9B3;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 0 #E8C6AF,
    0 12px 26px rgba(200,104,63,.12);
}
.cx-section .cx-module-row.st-in_progress::before{
  content:"";
  position:absolute;
  left:-1px; top:18px; bottom:18px;
  width:4px;
  border-radius:0 4px 4px 0;
  background:var(--gold,#C8683F);
}

/* Module verrouillé : carte plus discrète, sans relief au survol */
.cx-section .cx-module-row.is-locked{
  background:#F6F4F1;
  border-color:#ECE7E1;
  box-shadow:0 3px 0 #E9E3DC, 0 8px 18px rgba(16,35,63,.035);
  cursor:default;
}

/* ---------- Tuile numérotée (façon fiche/document) ---------- */
.cx-tile{
  position:relative;
  flex:none;
  width:58px; height:64px;
  border-radius:12px;
  background:#FFFFFF;
  border:1px solid #E6DED4;
  box-shadow:0 3px 0 #E7DED3, 0 6px 14px rgba(16,35,63,.06);
  display:flex; align-items:center; justify-content:center;
}
.cx-tile::after{                      /* coin replié */
  content:"";
  position:absolute; top:-1px; right:-1px;
  width:16px; height:16px;
  border-radius:0 12px 0 6px;
  background:linear-gradient(225deg,#F3ECE4 50%,#E2D7CB 50%);
}
.cx-tile-num{
  font:800 20px/1 var(--display,'Plus Jakarta Sans',sans-serif);
  letter-spacing:-.02em;
  color:var(--navy,#10233F);
}
.cx-tile-state{
  position:absolute; right:-7px; bottom:-7px;
  width:24px; height:24px;
  border-radius:50%;
  border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font:800 11px/1 var(--sans,'Inter',sans-serif);
  color:#fff;
  box-shadow:0 2px 6px rgba(16,35,63,.18);
}
.st-in_progress .cx-tile-state{ background:var(--gold,#C8683F); }
.st-completed   .cx-tile-state{ background:#2F9E6A; }
.st-locked      .cx-tile-state{ background:#AEB5C2; }
.st-completed .cx-tile{ border-color:#CFE8DA; }
.st-locked .cx-tile{ background:#FAF9F7; box-shadow:0 2px 0 #E6E1DA; }
.st-locked .cx-tile-num{ color:#A3AAB8; }

/* ---------- Texte ---------- */
.cx-mod-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cx-section .cx-mod-kicker{
  font:800 11px/1.2 var(--sans,'Inter',sans-serif);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold,#C8683F);
}
.cx-section .cx-mod-title{
  font:700 16px/1.32 var(--display,'Plus Jakarta Sans',sans-serif);
  letter-spacing:-.005em;
  color:var(--navy,#10233F);
  overflow-wrap:anywhere;
}
.cx-section .cx-mod-sub{ margin-top:4px; font-size:12px; color:var(--ink-mute,#5C6B84); }
.cx-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font:700 12px/1.25 var(--sans,'Inter',sans-serif);
  max-width:100%;
}
.st-in_progress .cx-pill{ background:#FBEADD; color:var(--gold-dark,#A34F2B); }
.st-completed   .cx-pill{ background:#E3F4EA; color:#1D7A4B; }
.st-locked      .cx-pill{ background:#ECEAE6; color:#8A93A6; }
.st-locked .cx-mod-kicker{ color:#A3AAB8; }
.st-locked .cx-mod-title{ color:#8A93A6; }

/* ---------- Bouton d'accès (droite) ---------- */
.cx-go{
  flex:none;
  width:46px; height:46px;
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#2B4470 0%,var(--navy,#10233F) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 3px 0 #0A1729, 0 6px 14px rgba(16,35,63,.22);
  color:#fff;
  transition:transform .18s ease, background .18s ease;
}
.cx-go svg{ width:20px; height:20px; display:block; }
.cx-section a.cx-module-row:hover .cx-go{
  background:linear-gradient(180deg,#D97A50 0%,var(--gold,#C8683F) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 3px 0 var(--gold-dark,#A34F2B), 0 6px 14px rgba(200,104,63,.28);
}
.st-completed .cx-go{ background:linear-gradient(180deg,#3DB27C 0%,#2F9E6A 100%); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 3px 0 #1F7A4F, 0 6px 14px rgba(47,158,106,.22); }
.st-locked .cx-go{ background:#ECEAE6; box-shadow:0 2px 0 #DDD8D1; color:#A3AAB8; }

/* ---------- En-tête de section (niveau + progression) ---------- */
.cx-section .cx-bar-fill{ background:linear-gradient(90deg,var(--gold,#C8683F),#E39A6F); }

/* ---------- Responsive ---------- */
@media (max-width:520px){
  .cx-section{ padding:16px 14px !important; }
  .cx-section .cx-mod-list{ gap:12px; }
  .cx-section .cx-module-row{ gap:13px; padding:14px 12px 14px 12px; min-height:84px; border-radius:16px; }
  .cx-tile{ width:50px; height:56px; border-radius:11px; }
  .cx-tile-num{ font-size:18px; }
  .cx-tile-state{ width:22px; height:22px; right:-6px; bottom:-6px; }
  .cx-section .cx-mod-title{ font-size:15px; }
  .cx-go{ width:40px; height:40px; border-radius:12px; }
  .cx-go svg{ width:18px; height:18px; }
}
@media (max-width:360px){
  .cx-section .cx-module-row{ gap:11px; padding:12px 10px; }
  .cx-tile{ width:44px; height:50px; }
  .cx-tile-num{ font-size:16px; }
  .cx-section .cx-mod-title{ font-size:14.5px; }
  .cx-go{ width:36px; height:36px; }
}
/* Grand écran : deux colonnes de cartes pour mieux occuper l'espace */
@media (min-width:1100px){
  .cx-wrap{ max-width:1040px !important; }
  .cx-section .cx-mod-list{ grid-template-columns:1fr 1fr; gap:16px 18px; }
}
@media (prefers-reduced-motion:reduce){
  .cx-section .cx-module-row, .cx-go{ transition:none; }
  .cx-section a.cx-module-row:hover, .cx-section a.cx-module-row:active{ transform:none; }
}

/* ==========================================================================
   Même style pour les listes de modules des pages programmes
   (.module-card : Business English, Intensive English, TOEIC, TOEFL, ENA,
   Modules…). Uniquement du style : textes, liens et règles d'accès inchangés.
   ========================================================================== */
body .module-card{
  position:relative;
  display:flex; align-items:center; gap:18px;
  margin:0 0 16px;
  padding:18px 18px 18px 16px;
  min-height:96px;
  border-radius:18px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF8F5 100%);
  border:1px solid #ECE4DA;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 0 #E7DED3,
    0 12px 24px rgba(16,35,63,.06);
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
body .module-card.free:hover{
  transform:translateY(-2px);
  border-color:#E3CDBB;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 0 #E3D3C4, 0 18px 32px rgba(16,35,63,.09);
}
body .module-card.free:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 0 #E7DED3, 0 6px 12px rgba(16,35,63,.06);
}
body .module-card.locked{
  background:#F6F4F1;
  border-color:#ECE7E1;
  box-shadow:0 3px 0 #E9E3DC, 0 8px 18px rgba(16,35,63,.035);
}

/* Tuile numérotée */
body .module-card .mnum{
  position:relative;
  order:0;
  width:58px; height:64px;
  border-radius:12px;
  flex:none;
  background:#FFFFFF !important;
  border:1px solid #E6DED4;
  box-shadow:0 3px 0 #E7DED3, 0 6px 14px rgba(16,35,63,.06);
  font:800 20px/1 var(--display,'Plus Jakarta Sans',sans-serif);
  letter-spacing:-.02em;
  color:var(--navy,#10233F);
}
body .module-card .mnum::after{
  content:"";
  position:absolute; top:-1px; right:-1px;
  width:16px; height:16px;
  border-radius:0 12px 0 6px;
  background:linear-gradient(225deg,#F3ECE4 50%,#E2D7CB 50%);
}
body .module-card.locked .mnum{ background:#FAF9F7 !important; color:#A3AAB8; box-shadow:0 2px 0 #E6E1DA; }

/* Texte */
body .module-card .minfo{ order:0; flex:1; min-width:0; }
body .module-card h3{
  font:700 16px/1.32 var(--display,'Plus Jakarta Sans',sans-serif);
  color:var(--navy,#10233F);
  margin:2px 0 4px;
  overflow-wrap:anywhere;
}
body .module-card p{ font-size:13px; line-height:1.5; color:var(--ink-mute,#5C6B84); margin:0; }
body .module-card .mtag{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px;
  border-radius:999px;
  font:700 11.5px/1.2 var(--sans,'Inter',sans-serif);
  letter-spacing:.03em;
  margin-bottom:6px;
}
body .module-card.free .mtag{ background:#E3F4EA; color:#1D7A4B; }
body .module-card.locked .mtag{ background:#ECEAE6; color:#8A93A6; }
body .module-card.locked h3{ color:#8A93A6; }

/* Bouton d'accès à droite (cartes sans bouton propre) */
body .module-card:not(:has(.maction))::after{
  content:"";
  flex:none;
  width:46px; height:46px;
  border-radius:13px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 17L17 7M9 7h8v8' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat,
    linear-gradient(180deg,#2B4470 0%,#10233F 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 3px 0 #0A1729, 0 6px 14px rgba(16,35,63,.22);
}
body .module-card.free:not(:has(.maction)):hover::after{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 17L17 7M9 7h8v8' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat,
    linear-gradient(180deg,#D97A50 0%,#C8683F 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 3px 0 #A34F2B, 0 6px 14px rgba(200,104,63,.28);
}
body .module-card.locked:not(:has(.maction))::after{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2.5' fill='%23A3AAB8'/%3E%3Cpath d='M8 11V8a4 4 0 1 1 8 0v3' stroke='%23A3AAB8' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/20px no-repeat,
    #ECEAE6;
  box-shadow:0 2px 0 #DDD8D1;
}
body .module-card .maction{ order:0; flex:none; }

@media (max-width:600px){
  body .module-card{ flex-wrap:nowrap; align-items:center; gap:13px; padding:14px 12px; min-height:86px; border-radius:16px; }
  body .module-card .mnum{ width:50px; height:56px; font-size:18px; }
  body .module-card h3{ font-size:15px; }
  body .module-card p{ font-size:12.5px; }
  body .module-card:not(:has(.maction))::after{ width:40px; height:40px; border-radius:12px; background-size:18px, auto; }
  /* Cartes avec bouton propre (page Modules) : le bouton passe dessous */
  body .module-card:has(.maction){ flex-wrap:wrap; }
  body .module-card:has(.maction) .maction{ flex-basis:100%; }
}
@media (max-width:360px){
  body .module-card{ gap:11px; padding:12px 10px; }
  body .module-card .mnum{ width:44px; height:50px; font-size:16px; }
  body .module-card:not(:has(.maction))::after{ width:36px; height:36px; }
}
@media (prefers-reduced-motion:reduce){
  body .module-card{ transition:none; }
  body .module-card.free:hover, body .module-card.free:active{ transform:none; }
}

/* ==========================================================================
   Ressources (documents à télécharger) : même carte, tuile numérotée,
   bouton « Télécharger » conservé.
   ========================================================================== */
body .card.resource-step{
  display:flex; align-items:center; gap:18px;
  margin:0 0 16px;
  padding:18px 18px 18px 16px;
  border-radius:18px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF8F5 100%);
  border:1px solid #ECE4DA;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 4px 0 #E7DED3, 0 12px 24px rgba(16,35,63,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
body .card.resource-step:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 0 #E3D3C4, 0 18px 32px rgba(16,35,63,.09);
}
body .resource-step .resource-step-num{
  position:relative;
  width:58px; height:64px; border-radius:12px; flex:none;
  background:#FFFFFF !important;
  border:1px solid #E6DED4;
  box-shadow:0 3px 0 #E7DED3, 0 6px 14px rgba(16,35,63,.06);
  font:800 20px/1 var(--display,'Plus Jakarta Sans',sans-serif);
  color:var(--navy,#10233F);
}
body .resource-step .resource-step-num::after{
  content:""; position:absolute; top:-1px; right:-1px; width:16px; height:16px;
  border-radius:0 12px 0 6px; background:linear-gradient(225deg,#F3ECE4 50%,#E2D7CB 50%);
}
body .resource-step .resource-step-text h3{ font:700 16px/1.32 var(--display,'Plus Jakarta Sans',sans-serif) !important; color:var(--navy,#10233F); }
body .resource-step .resource-step-text p{ color:var(--ink-mute,#5C6B84); line-height:1.5; }
body .resource-step .resource-step-btn{
  border-radius:13px; min-height:46px;
  background:linear-gradient(180deg,#2B4470 0%,#10233F 100%); color:#fff; border:0;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 3px 0 #0A1729, 0 6px 14px rgba(16,35,63,.22);
}
body .resource-step:hover .resource-step-btn{
  background:linear-gradient(180deg,#D97A50 0%,#C8683F 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 3px 0 #A34F2B, 0 6px 14px rgba(200,104,63,.28);
}
@media (max-width:640px){
  body .card.resource-step{ flex-wrap:wrap; gap:12px 13px; padding:14px 12px; border-radius:16px; }
  body .resource-step .resource-step-num{ order:1; width:50px; height:56px; font-size:18px; }
  body .resource-step .resource-step-text{ order:2; flex:1 1 0; flex-basis:0; margin:0; min-width:0; }
  body .resource-step .resource-step-btn{ order:3; flex-basis:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  body .card.resource-step{ transition:none; }
  body .card.resource-step:hover{ transform:none; }
}