/* ==========================================================================
   MON ESPACE ENSEIGNANT TENNIS — assets/css/vitrine-app.css
   La section « L'APP » de l'accueil (index.php).

   Tout est préfixé .mv- : le site charge Bootstrap 3, main.css et
   modern-content.css, qui stylent h2, ul, a… de façon globale. Chaque
   règle ici vise une classe de la section et rien d'autre.
   ========================================================================== */

.mv{
  --mv-brand:#e15e01;--mv-brand-2:#f2771f;--mv-brand-soft:#fdeee2;
  --mv-ink:#1c1814;--mv-soft:#5f5650;--mv-faint:#9b918a;
  --mv-bg:#ffffff;--mv-bg-2:#faf6f2;--mv-line:#eee6de;
  --mv-dark:#1f1b18;
  display:block;background:var(--mv-bg);color:var(--mv-ink);
  font-family:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow:hidden;overflow:clip;
}
.mv *,.mv *::before,.mv *::after{box-sizing:border-box}

/* ---- Typographie ------------------------------------------------------ */
.mv .mv-surtitre{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;
  font:700 13px/1.3 'Montserrat',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mv-brand)}
.mv .mv-h2{margin:0 auto 18px;max-width:820px;font:700 clamp(28px,3.6vw,44px)/1.15 'Montserrat',sans-serif;
  letter-spacing:-.02em;color:var(--mv-ink);text-transform:none}
.mv .mv-h3{margin:0 0 16px;font:700 clamp(24px,2.6vw,34px)/1.2 'Montserrat',sans-serif;letter-spacing:-.015em;color:var(--mv-ink);text-transform:none}
.mv .mv-lead{margin:0 auto 28px;max-width:680px;font-size:clamp(16px,1.5vw,19px);color:var(--mv-soft)}
.mv .mv-accroche{margin:0 0 22px;font-size:17px;color:var(--mv-soft)}

/* ---- Boutons ----------------------------------------------------------- */
.mv .mv-btn,.mv .mv-btn:visited{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;
  background:linear-gradient(135deg,var(--mv-brand),var(--mv-brand-2));color:#fff;
  font:700 15px/1.2 'Montserrat',sans-serif;text-decoration:none;border:2px solid transparent;
  box-shadow:0 10px 24px rgba(225,94,1,.28);transition:transform .15s ease,box-shadow .15s ease}
.mv .mv-btn:hover,.mv .mv-btn:focus{color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 30px rgba(225,94,1,.34)}
.mv .mv-btn:focus-visible{outline:3px solid rgba(225,94,1,.45);outline-offset:3px}
.mv .mv-btn span{transition:transform .15s ease}
.mv .mv-btn:hover span{transform:translateX(3px)}
.mv .mv-btn-ghost,.mv .mv-btn-ghost:visited{background:#fff;color:var(--mv-ink);border-color:var(--mv-line);box-shadow:none}
.mv .mv-btn-ghost:hover,.mv .mv-btn-ghost:focus{color:var(--mv-brand);border-color:var(--mv-brand);box-shadow:none}
.mv .mv-btn-blanc,.mv .mv-btn-blanc:visited{background:#fff;color:var(--mv-brand);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.mv .mv-btn-blanc:hover,.mv .mv-btn-blanc:focus{color:var(--mv-brand)}

/* ---- Pictogrammes ------------------------------------------------------ */
.mv .mv-ico{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--mv-brand-soft);color:var(--mv-brand)}
.mv .mv-ico-sm{width:32px;height:32px;border-radius:10px}

/* ==========================================================================
   1. L'en-tête de la section
   ========================================================================== */
.mv-intro{padding:72px 0 64px;text-align:center;
  background:radial-gradient(1000px 420px at 50% 0,#fff1e5 0,rgba(255,241,229,0) 70%),var(--mv-bg)}
.mv .mv-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.mv .mv-chiffres{list-style:none;margin:40px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px}
.mv .mv-chiffres li{display:flex;flex-direction:column;align-items:center;min-width:120px}
.mv .mv-chiffres b{font:800 clamp(24px,2.4vw,30px)/1.1 'Montserrat',sans-serif;color:var(--mv-ink)}
.mv .mv-chiffres span{font-size:14px;color:var(--mv-faint)}

/* Les pastilles : la table des matières de la section. */
.mv .mv-pastilles{margin:48px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:left;max-width:980px}
.mv .mv-pastille,.mv .mv-pastille:visited{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;
  background:#fff;border:1px solid var(--mv-line);color:var(--mv-ink);text-decoration:none;
  box-shadow:0 6px 18px rgba(30,20,12,.05);transition:border-color .15s,transform .15s,box-shadow .15s}
.mv .mv-pastille:hover,.mv .mv-pastille:focus{color:var(--mv-ink);text-decoration:none;border-color:var(--mv-brand);transform:translateY(-2px);box-shadow:0 12px 26px rgba(225,94,1,.14)}
.mv .mv-pastille-txt{display:flex;flex-direction:column;min-width:0}
.mv .mv-pastille b{font:700 14.5px/1.25 'Montserrat',sans-serif}
.mv .mv-pastille small{font-size:12.5px;line-height:1.35;color:var(--mv-faint);margin-top:2px}

/* ==========================================================================
   2. Un bloc de fonctionnalité
   ========================================================================== */
.mv-bloc{padding:88px 0;background:var(--mv-bg);scroll-margin-top:20px}
.mv-bloc:nth-of-type(odd){background:var(--mv-bg-2)}
.mv .mv-bloc-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
/* Bootstrap pose un clearfix (::before/::after en display:table) sur
   .container : dans une grille, ce seraient deux cellules fantômes. */
.mv .mv-bloc-in::before,.mv .mv-bloc-in::after{content:none;display:none}
.mv-inverse .mv-texte{order:2}
.mv-inverse .mv-visuel{order:1}

.mv .mv-puces{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px}
.mv .mv-puces li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--mv-soft)}
.mv .mv-puces svg{flex:0 0 auto;margin-top:1px;fill:var(--mv-brand-soft);stroke:var(--mv-brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mv .mv-puces svg circle{stroke:none}
.mv .mv-puces b{color:var(--mv-ink);font-weight:900}

/* ---- Les maquettes ----------------------------------------------------- */
.mv .mv-visuel{position:relative;padding:4% 0 8%}
/* Un halot de couleur derrière les écrans. */
.mv .mv-visuel::before{content:'';position:absolute;z-index:0;inset:6% 4% 2% 8%;border-radius:40%;
  background:radial-gradient(closest-side,rgba(242,119,31,.22),rgba(242,119,31,0));filter:blur(10px)}
.mv .mv-ecran{position:relative;overflow:hidden;background:#f5f3f1}
.mv .mv-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;border:0;display:block;max-width:none}

/* L'ordinateur */
/* Le socle déborde de 7 % de chaque côté, comme un vrai portable : la
   marge de 6 % l'empêche de sortir de la page sur téléphone. */
.mv .mv-ordi{position:relative;z-index:1;width:84%;margin-left:6%}
.mv .mv-ordi-ecran{background:#1c1814;border-radius:16px 16px 4px 4px;padding:10px 10px 14px;
  box-shadow:0 30px 60px rgba(30,20,12,.22),0 8px 18px rgba(30,20,12,.12)}
.mv .mv-ordi-barre{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;background:#f1ece7;border-radius:6px 6px 0 0}
.mv .mv-ordi-barre i{width:9px;height:9px;border-radius:50%;background:#e0d7cf}
.mv .mv-ordi-barre i:first-child{background:#f26b5b}
.mv .mv-ordi-barre i:nth-child(2){background:#f5bf4f}
.mv .mv-ordi-barre i:nth-child(3){background:#5fc454}
.mv .mv-ordi-barre span{flex:1;margin:0 6% 0 10px;height:16px;border-radius:5px;background:#fff;color:var(--mv-faint);
  font:600 10px/16px 'Lato',sans-serif;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mv .mv-ordi .mv-ecran{aspect-ratio:16/10;border-radius:0 0 3px 3px}
.mv .mv-ordi-socle{position:relative;height:16px;margin:0 -7%;border-radius:2px 2px 16px 16px;
  background:linear-gradient(180deg,#e7e2dd 0,#c9c1b9 70%,#aaa19a 100%);box-shadow:0 14px 24px rgba(30,20,12,.18)}
.mv .mv-ordi-socle::before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:16%;height:6px;border-radius:0 0 8px 8px;background:#b9b0a8}

/* Le téléphone */
.mv .mv-tel{position:absolute;z-index:2;right:0;bottom:2%;width:26%;aspect-ratio:9/19.5;
  background:#1c1814;border-radius:clamp(20px,3vw,38px);padding:clamp(5px,.7vw,9px);
  box-shadow:0 30px 50px rgba(30,20,12,.30),0 0 0 1.5px #3a332e inset}
.mv .mv-tel::before{content:'';position:absolute;z-index:3;top:calc(clamp(5px,.7vw,9px) + 2.2%);left:50%;transform:translateX(-50%);
  width:30%;height:3.4%;border-radius:99px;background:#1c1814}
.mv .mv-tel-ecran{width:100%;height:100%;border-radius:clamp(15px,2.4vw,30px)}

/* Miroir : dans les blocs inversés, le téléphone passe à gauche. */
.mv-inverse .mv-visuel .mv-ordi{margin-left:auto;margin-right:6%}
.mv-inverse .mv-visuel .mv-tel{right:auto;left:0}

/* Un seul écran */
.mv .mv-cadre-ordi .mv-ordi,.mv-inverse .mv-cadre-ordi .mv-ordi{width:86%;margin:0 auto}
.mv .mv-cadre-tel{display:flex;justify-content:center;padding:0}
.mv .mv-cadre-tel .mv-tel{position:relative;right:auto;left:auto;bottom:auto;width:min(46%,300px)}

/* ---- L'écran dessiné (aucun média encore posé) ------------------------- */
.mv .mv-vide{background:#f5f3f1;display:flex;flex-direction:column;padding:6% 6% 0;gap:5%}
.mv .mv-vide-tel{padding-top:16%}
.mv .mv-vide-top{display:flex;align-items:center;gap:8px;font:700 clamp(9px,1vw,14px)/1 'Montserrat',sans-serif;color:var(--mv-ink)}
.mv .mv-vide-ico{width:2.4em;height:2.4em;border-radius:.7em;background:linear-gradient(135deg,var(--mv-brand),var(--mv-brand-2));color:#fff;
  display:inline-flex;align-items:center;justify-content:center}
.mv .mv-vide-ico svg{width:60%;height:60%}
.mv .mv-vide-grille{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:4%}
.mv .mv-vide-tel .mv-vide-grille{grid-template-columns:1fr 1fr;gap:6%}
.mv .mv-vide-grille i{background:#fff;border-radius:8px;box-shadow:0 3px 8px rgba(30,20,12,.06)}
.mv .mv-vide-grille i:first-child{grid-column:1/-1;background:linear-gradient(135deg,var(--mv-brand),var(--mv-brand-2))}
.mv .mv-vide-nav{display:flex;justify-content:space-around;padding:4% 0 5%;background:#fff;margin:0 -7%}
.mv .mv-vide-nav i{width:8%;aspect-ratio:1;max-width:14px;border-radius:4px;background:#e0d7cf}
.mv .mv-vide-nav i:first-child{background:var(--mv-brand)}

/* ==========================================================================
   3. Le bandeau final
   ========================================================================== */
.mv-final{padding:72px 0 88px;background:var(--mv-bg)}
.mv .mv-final-in{display:flex;align-items:center;gap:28px;padding:40px 44px;border-radius:28px;color:#fff;
  background:radial-gradient(600px 300px at 90% 0,rgba(255,255,255,.14),rgba(255,255,255,0)),linear-gradient(135deg,var(--mv-brand) 0,#c94f00 100%);
  box-shadow:0 24px 50px rgba(225,94,1,.28)}
.mv .mv-final-ico{flex:0 0 auto;width:68px;height:68px;border-radius:20px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.mv .mv-final-txt{flex:1;min-width:0}
.mv .mv-final .mv-h2{margin:0 0 8px;max-width:none;color:#fff;font-size:clamp(22px,2.4vw,30px)}
.mv .mv-final p{margin:0;color:rgba(255,255,255,.88);font-size:16px}

/* ==========================================================================
   Apparition au défilement (seulement si le script a posé html.mv-js)
   ========================================================================== */
.mv-js .mv .mv-anim{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.mv-js .mv .mv-visuel.mv-anim{transition-delay:.12s}
.mv-js .mv .mv-anim.mv-vu{opacity:1;transform:none}
.mv-js .mv .mv-pastille.mv-anim.mv-vu:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  .mv-js .mv .mv-anim{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   Tablettes et téléphones
   ========================================================================== */
@media (max-width:991px){
  .mv-bloc{padding:64px 0}
  .mv .mv-bloc-in{grid-template-columns:1fr;gap:36px}
  .mv-inverse .mv-texte,.mv-inverse .mv-visuel{order:0}
  .mv .mv-visuel{max-width:640px;width:100%;margin:0 auto}
  .mv .mv-pastilles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .mv{font-size:15px}
  .mv-intro{padding:52px 0 44px}
  .mv-bloc{padding:52px 0}
  .mv .mv-pastilles{grid-template-columns:1fr 1fr;gap:10px;margin-top:36px}
  .mv .mv-pastille{padding:12px;gap:10px;border-radius:14px}
  .mv .mv-pastille .mv-ico{width:38px;height:38px;border-radius:11px}
  .mv .mv-pastille small{display:none}
  .mv .mv-chiffres{gap:18px 24px;margin-top:32px}
  .mv .mv-chiffres li{min-width:0;flex:0 0 calc(50% - 12px)}
  .mv .mv-ctas .mv-btn{width:100%;justify-content:center}
  .mv .mv-texte .mv-btn{width:100%;justify-content:center}
  .mv .mv-ordi-ecran{padding:6px 6px 8px;border-radius:10px 10px 3px 3px}
  .mv .mv-ordi-barre{height:16px;padding:0 6px;gap:4px}
  .mv .mv-ordi-barre i{width:6px;height:6px}
  .mv .mv-ordi-barre span{height:10px;font-size:0}
  .mv .mv-ordi-socle{height:10px}
  .mv .mv-tel{width:30%}
  .mv .mv-final-in{flex-direction:column;text-align:center;padding:32px 22px;border-radius:22px}
  .mv .mv-final .mv-btn{width:100%;justify-content:center}
}