/* my-french.app — couche responsive et webview (P0-B6)
   Chargée après theme.css, v11.css et v12.css. Ne modifie aucun fichier du thème v12.
   Cibles : 320 → 1440 px, portrait et paysage, navigateur, appli installable, webview iOS/Android. */

/* ---------- Base mobile ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden;min-height:100dvh}
img,video,svg,canvas{max-width:100%}
/* aucun élément ne doit dépasser la largeur de l'écran */
.page,.page.app,main,.card,section{min-width:0}
pre,code,.table-wrap{overflow-x:auto}
/* le texte long (e-mails, pseudos) se coupe au lieu d'élargir la page */
.title,p,li,td{overflow-wrap:anywhere}
h1,h2,h3{overflow-wrap:break-word}
.stats b{white-space:nowrap}
@media (max-width:430px){.stats{flex-wrap:wrap;row-gap:14px}}
.level-hero .actions{flex-wrap:wrap}

/* ---------- Barre d'onglets : 4 entrées ---------- */
.tabbar{grid-template-columns:repeat(4,1fr)!important;
  left:max(10px,env(safe-area-inset-left))!important;right:max(10px,env(safe-area-inset-right))!important}
.tabbar a{min-height:48px;justify-content:center;-webkit-tap-highlight-color:transparent}
.tabbar a span{font-size:11px}

/* ---------- Zones de toucher : 44 px minimum sur écran tactile ---------- */
@media (pointer:coarse){
  .icon-btn{min-width:44px;min-height:44px}
  .btn{min-height:44px}
  .ex-opt{min-height:52px}
  a.goal-ring{min-width:44px;min-height:44px}
  .topbar .avatar{width:44px;height:44px;min-width:44px}
  header.nav .logo{min-height:44px;display:inline-flex;align-items:center}
  .settings-nav a,.nav-links a,.foot-grid a,.app-footer a,.app-footer button,.foot-bottom a,.foot-bottom button{
    display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- Formulaires : pas de zoom automatique sur iPhone ---------- */
@media (max-width:760px){
  input,select,textarea{font-size:16px!important}
}

/* ---------- Encoche et barre d'accueil ---------- */
@media (max-width:760px){
  .page,.page.app{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .topbar{padding-top:env(safe-area-inset-top)}
  header.nav{padding-top:env(safe-area-inset-top)}
  /* la barre d'onglets ne cache jamais le bas du contenu */
  .page.app{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  .cookie-bar{bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ---------- Très petits écrans (320 à 359 px) ---------- */
@media (max-width:359px){
  .page,.page.app{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .topbar{gap:8px}
  .topbar .title{font-size:17px}
  h1{font-size:clamp(30px,10vw,40px)}
  .tabbar a span{font-size:10px}
  .stats{gap:14px}
  .ex-foot{gap:8px;padding:12px}
  .ex-foot .btn-lg{padding-left:16px;padding-right:16px}
}

/* ---------- Exercice : bouton « Vérifier » toujours visible au-dessus du clavier ---------- */
.ex-foot{bottom:calc(12px + env(safe-area-inset-bottom) + var(--mf-kb,0px))}
@media (max-width:760px){
  /* pendant une leçon, la barre d'onglets laisse la place aux boutons de réponse */
  body.mf-lesson .tabbar{display:none}
  body.mf-lesson .page.app{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
input,textarea,.ex-foot{scroll-margin-bottom:120px}

/* ---------- Paysage sur téléphone ---------- */
@media (max-height:480px) and (orientation:landscape){
  .tabbar{padding:4px 6px}
  .tabbar a{min-height:40px}
  .tabbar a span{display:none}
  .page.app{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}

/* ---------- Mode webview (appli iOS/Android) ---------- */
html.webview{overscroll-behavior-y:none}
html.webview body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.webview input,html.webview textarea,html.webview [contenteditable]{-webkit-user-select:text;user-select:text}
/* l'appli affiche ses propres liens légaux et gère les cookies : pied de page et bandeau masqués */
html.webview .app-footer,html.webview .site-footer,html.webview #cookie-bar{display:none!important}
/* pas d'invitation à « installer l'appli » dans l'appli */
html.webview [data-install],html.webview .install-banner{display:none!important}

/* ---------- Mouvements réduits ---------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}

/* ---------- Réglages de sécurité (P1-B4 à P1-B6) ---------- */
.mf-h3{font-size:15px;margin:22px 0 10px}
.mf-note{font-size:13px;margin:4px 0 0}
.mf-list{list-style:none;margin:4px 0 14px;padding:0;display:grid;gap:8px}
.mf-list:empty{display:none}
.mf-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:16px;font-size:14px;min-width:0}
.mf-list li>div{min-width:0}
.mf-list small{color:var(--muted);display:block;font-size:12.5px}
.mf-list .mf-acts{display:flex;gap:6px;flex-shrink:0}
.mf-qr{display:flex;justify-content:center;margin:14px 0}
.mf-qr svg{border-radius:12px;max-width:100%;height:auto}
.mf-secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px;text-align:center;word-break:break-all;font-size:14px;padding:10px;border-radius:12px;background:var(--surface-2,rgba(0,0,0,.04))}
.mf-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;margin:12px 0;padding:0;list-style:none}
.mf-codes li{padding:8px;border-radius:10px;background:var(--surface-2,rgba(0,0,0,.04));text-align:center}
#modal-sec .modal-box{width:min(480px,calc(100vw - 24px))}
#modal-sec [data-sec-body] .form-group{margin-top:10px}
/* une fenêtre ouverte passe toujours devant le bandeau cookies */
.modal.open{z-index:100}
@media (max-width:520px){
  .mf-list li{flex-wrap:wrap}
  .mf-list .mf-acts{width:100%}
  .mf-list .mf-acts .btn{flex:1}
}

/* ---------- Mascotte : portrait rond (remplace Lumi en toque de chef) ---------- */
img.mf-mascot{box-sizing:border-box;max-width:100%;border-radius:50%!important;aspect-ratio:1/1;object-fit:cover;height:auto!important;opacity:1!important;
  -webkit-mask-image:none!important;mask-image:none!important;border:6px solid #fff;background:#fff;
  box-shadow:0 0 0 3px #c58af3,0 22px 50px -18px rgba(110,50,170,.55)}
.hero-left .hero-char.mf-mascot{width:300px;right:10px;bottom:10px}
.level-hero .hero-char.mf-mascot{width:170px;right:40px;bottom:auto;top:50%;transform:translateY(-50%)}
.ex-hero .ex-hero-lumi.mf-mascot{width:180px;margin:0 10px 0 0;align-self:center}
.su-char.mf-mascot{width:240px;right:10px;bottom:10px}
.welcome-char.mf-mascot{width:150px}
.about-char.mf-mascot{width:min(300px,100%);max-width:300px}
img.ai-ava,.ptr img{border-radius:50%;object-fit:cover}
@media (max-width:760px){
  .level-hero .hero-char.mf-mascot,.ex-hero .ex-hero-lumi.mf-mascot{display:none}
  .hero-left .hero-char.mf-mascot{position:relative;right:auto;bottom:auto;width:200px;margin:28px auto 0;display:block}
  .su-char.mf-mascot{width:160px}
}

/* ---------- Espace éditeur (/admin/contenu) ---------- */
.admin-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
.admin-tree{padding:16px;position:sticky;top:84px;max-height:calc(100vh - 110px);overflow:auto}
.admin-tree-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.admin-unit{margin-top:14px}
.admin-unit>b{display:flex;gap:6px;align-items:center;font-size:14px}
.admin-unit>b small{color:var(--muted);font-weight:500}
.admin-unit ul{list-style:none;margin:6px 0 0;padding:0}
.admin-unit li a{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;font-size:14px;color:inherit;text-decoration:none}
.admin-unit li a:hover,.admin-unit li a.active{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.admin-unit li a.active{font-weight:600}
.admin-unit .add-lesson{margin-top:4px;font-size:13px}
.st{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap;align-self:center}
.st-published{background:#e5f4e4;color:#2c6b2a}.st-draft{background:#f9eeda;color:#7a5410}.st-edit{background:#efedff;color:#5a3fb0}
.admin-editor{padding:22px;min-width:0}
.admin-editor h2{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.admin-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 6px}
.admin-bar .grow{flex:1}
.admin-errs{margin:10px 0;padding:10px 14px;border-radius:12px;background:#fbebeb;color:#8a1f1f;font-size:14px}
.admin-errs ul{margin:4px 0 0 18px;padding:0}
.ex-card{border:1px solid var(--border,#e5e5e5);border-radius:14px;padding:14px;margin-top:12px}
.ex-card.bad{border-color:#e58a8a}
.ex-card-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ex-card-head b{min-width:28px}
.ex-card-head select{flex:1;min-width:180px}
.ex-card-head .btn{padding:6px 10px}
.ex-card .form-group{margin-top:10px}
.ex-card textarea{min-height:76px}
.admin-hist{margin-top:18px;font-size:13px;color:var(--muted)}
.admin-hist li{margin-top:2px}
@media (max-width:900px){
  .admin-grid{grid-template-columns:1fr}
  .admin-tree{position:static;max-height:none}
}
.admin-editor>.form-group{margin-top:14px}