/* ==========================================================================
   MON ESPACE ENSEIGNANT TENNIS — assets/css/vitrine-app-plus.css
   v2 de la présentation de l'app : les deux sections sans écrans.
     · .mv-atouts  la grille « Et aussi dans l'app »
     · .mv-pro     le comparatif Gratuit / Pro
   Les classes communes (mv-surtitre, mv-h2, mv-lead, mv-btn, mv-anim…)
   viennent de vitrine-app.css, chargée juste avant. Ce fichier n'y touche
   pas : il n'ajoute que ce qui est nouveau.
   ========================================================================== */

.mv-atouts,.mv-pro{--mv-orange:#e15e01;--mv-orange2:#f2771f;--mv-encre:#1f1b18;--mv-doux:#6b625b;--mv-ligne:#ece4dd;
  padding:80px 0;font-family:'Lato',system-ui,sans-serif;color:var(--mv-encre)}
.mv-atouts *,.mv-pro *{box-sizing:border-box}

/* Lecteurs d'écran seulement */
.mv-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* L'en-tête de section, centré */
.mv-sec-tete{max-width:760px;margin:0 auto 40px;text-align:center}
.mv-sec-tete .mv-lead{margin-left:auto;margin-right:auto}

/* ---- Et aussi dans l'app ---------------------------------------------- */
.mv-atouts{background:#faf6f2}
.mv-atouts-grille{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.mv-atout{display:flex;flex-direction:column;gap:6px;padding:22px 20px;background:#fff;border:1px solid var(--mv-ligne);
  border-radius:18px;box-shadow:0 4px 16px rgba(30,20,12,.04);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.mv-atout:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(30,20,12,.08);border-color:#f3cfb3}
.mv-atout-ico{width:44px;height:44px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--mv-orange),var(--mv-orange2));color:#fff;margin-bottom:8px}
.mv-atout b{font:700 16px/1.3 'Montserrat',sans-serif;color:var(--mv-encre)}
.mv-atout span:not(.mv-atout-ico){font-size:14.5px;line-height:1.55;color:var(--mv-doux)}

/* ---- Gratuit ou Pro ---------------------------------------------------- */
.mv-pro{background:#fff}
.mv-pro-carte{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--mv-ligne);border-radius:22px;
  box-shadow:0 12px 36px rgba(30,20,12,.07);overflow:hidden}
.mv-pro-table{width:100%;border-collapse:collapse;table-layout:fixed}
.mv-pro-table th,.mv-pro-table td{padding:14px 18px;border-bottom:1px solid var(--mv-ligne);vertical-align:middle}
.mv-pro-table tbody tr:last-child th,.mv-pro-table tbody tr:last-child td{border-bottom:0}
.mv-pro-table thead th{padding:22px 18px 18px;text-align:center;vertical-align:bottom;background:#faf6f2}
.mv-pro-table thead th:first-child{width:46%}
.mv-pro-table thead b{display:block;font:700 17px/1.25 'Montserrat',sans-serif;color:var(--mv-encre)}
.mv-pro-table thead small{display:block;margin-top:4px;font-size:13px;line-height:1.35;color:var(--mv-doux);font-weight:400}
.mv-pro-table thead .mv-pro-col{background:linear-gradient(135deg,var(--mv-orange),var(--mv-orange2))}
.mv-pro-table thead .mv-pro-col b,.mv-pro-table thead .mv-pro-col small{color:#fff}
.mv-pro-table tbody th{text-align:left;font:600 15px/1.4 'Lato',sans-serif;color:var(--mv-encre)}
.mv-pro-table tbody td{text-align:center;font-size:14.5px}
.mv-pro-table tbody td.mv-pro-col{background:#fff8f2}
.mv-pro-table tbody tr:hover th,.mv-pro-table tbody tr:hover td{background:#fdf3ea}

.mv-oui svg{fill:var(--mv-orange);stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.mv-non svg{fill:none;stroke:#c9bdb3;stroke-width:2.4;stroke-linecap:round;vertical-align:middle}
.mv-val{font-weight:700;color:var(--mv-encre)}
.mv-pro-col .mv-val{color:var(--mv-orange)}

.mv-pro-note{max-width:880px;margin:16px auto 0;text-align:center;font-size:14.5px;color:var(--mv-doux)}
.mv-pro-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}

/* ---- Téléphone -------------------------------------------------------- */
@media (max-width:767px){
  .mv-atouts,.mv-pro{padding:56px 0}
  .mv-sec-tete{margin-bottom:28px}
  .mv-atouts-grille{grid-template-columns:1fr 1fr;gap:10px}
  .mv-atout{padding:16px 14px;border-radius:14px}
  .mv-atout-ico{width:38px;height:38px;border-radius:11px;margin-bottom:4px}
  .mv-atout b{font-size:14.5px}
  .mv-atout span:not(.mv-atout-ico){font-size:13px}

  .mv-pro-carte{border-radius:16px}
  .mv-pro-table th,.mv-pro-table td{padding:11px 8px}
  .mv-pro-table thead th{padding:16px 8px 14px}
  .mv-pro-table thead th:first-child{width:40%}
  .mv-pro-table thead b{font-size:14px}
  .mv-pro-table thead small{font-size:11.5px}
  .mv-pro-table tbody th{font-size:13.5px}
  .mv-pro-table tbody td{font-size:12.5px}
}
@media (max-width:460px){
  .mv-atouts-grille{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .mv-atout{transition:none}
  .mv-atout:hover{transform:none}
}
