/* ==========================================================================
   responsive.css : filet de securite responsive COMMUN a tout prof-prive.com
   (smartphone / iPad / ordinateur). Lie en DERNIER dans le <head> de chaque page.
   Principe : Mobile First, regles defensives et mutualisees ; aucune couleur,
   aucune police, aucun contenu ne sont modifies. Bureau (>1024 px) : inchange,
   sauf les regles sans effet visuel (anti-debordement, zoom iOS).
   ========================================================================== */

/* ---- Base commune ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:rgba(45,171,207,.18)}
body{overflow-wrap:break-word}
img,video,iframe,embed,object{max-width:100%}
svg{max-width:100%}
a,button,summary,label,select,input[type=button],input[type=submit],input[type=range],input[type=checkbox],input[type=radio],[role=button]{touch-action:manipulation}
pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
textarea{max-width:100%}

/* ---- Formules MathJax : jamais plus larges que l'ecran (defilement horizontal local) ---- */
mjx-container{max-width:100%}
@media (max-width:1024px){
  mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .katex-display{max-width:100%;overflow-x:auto;overflow-y:hidden}
}

mjx-assistive-mml{max-width:100%}
.pp-mjx-wide{display:inline-block;max-width:100%;overflow-x:auto;overflow-y:hidden;vertical-align:middle;-webkit-overflow-scrolling:touch}
.pp-shrink{min-width:0}
.pp-wrap{overflow-wrap:anywhere;max-width:100%}

/* ---- Tableaux enveloppes par responsive.js : defilement horizontal tactile ---- */
.pp-tw{display:block;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin:0;position:relative}
.pp-tw>table{margin-bottom:0}
.pp-tw:focus-visible{outline:3px solid #2DABCF;outline-offset:2px}

/* ---- Ecrans tactiles (smartphone + iPad) ---- */
@media (pointer:coarse){
  select,summary{min-height:44px}
  .pp-tap{min-height:44px;min-width:44px;box-sizing:border-box}
  input[type=checkbox],input[type=radio]{min-width:28px;min-height:28px}
  /* pied de page et barre de navigation communs : cibles tactiles >= 44 px */
  .__pfooter .__pf-nav a{display:inline-flex;align-items:center;min-height:44px}
  .__pfooter .__pf-lv a,.__pfooter .__pf-ct a,.__pfooter .__pf-legal a{display:inline-block;padding:.6rem .4rem}
  .__pfooter .__pf-brand a{display:inline-flex;align-items:center;min-height:44px}
  .__pnav .__plogo,.__pnav .__pelev-m,.__pnav .__phomebtn{min-height:44px}
  .ch-main>a{display:block;padding:.45rem 0;min-height:44px}
  .course-nav a,.pp-cnav a{min-height:40px;display:inline-flex;align-items:center}
  input[type=range]{min-height:36px}
  /* iOS zoome la page au focus d'un champ < 16 px : on l'evite */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]),select,textarea{font-size:max(16px,1em)}
  input[type=text],input[type=number],input[type=email],input[type=search],input[type=tel],input:not([type]),select{min-height:44px}
}

/* ---- Tablette et smartphone (<= 1024 px) ---- */
@media (max-width:1024px){
  body{overflow-x:clip}
  canvas[width][height]{max-width:100%;height:auto!important}
  /* canvas pilotes au doigt : le defilement de la page ne doit pas les interrompre
     (les pages qui gerent deja leur touch-action restent prioritaires via leurs propres regles) */
  [draggable="true"]{touch-action:none;-webkit-user-select:none;user-select:none}
}

/* ---- Smartphone (<= 768 px) ---- */
@media (max-width:700px){
  .ch-row{flex-wrap:wrap}
  .ch-actions{flex:1 1 100%;justify-content:flex-start}
}
@media (max-width:768px){
  h1,h2,h3{overflow-wrap:anywhere;hyphens:auto}
  table{max-width:100%}
  .pp-tw>table{min-width:100%}
  /* micro-textes (11 px) remontes a 12 px */
  .niv-btn,.life-badge,.hero-eyebrow,.badge,.price-badge,.f-name,.f-note,.exo-sub{font-size:13.5px}
  /* le bandeau cookies ne doit pas masquer tout l'ecran */
  #__pcookie{max-height:60vh;overflow-y:auto}
}

/* ---- Paysage smartphone : peu de hauteur ---- */
@media (max-height:480px) and (orientation:landscape){
  .__plinks{padding-top:3.5rem!important}
}

/* ---- Mouvement reduit ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}