/* responsive.css — adaptation écrans / thème / clavier. Chargé en dernier, ne retire rien au design existant. */
:root{color-scheme:light dark;--kb:0px;--vvh:100dvh}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* Stabilité : pas de zoom de texte auto, pas de défilement horizontal, pas de zoom au double-tap (le pincement reste possible) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
body{overflow-x:clip;min-height:100vh;min-height:100dvh;overflow-wrap:break-word;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
img,svg,video,canvas,iframe{max-width:100%}
table{max-width:100%}

/* iPhone/iPad/Android : un champ < 16px déclenche un zoom automatique à la saisie */
@media (hover:none) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select{font-size:16px!important}
}
textarea{max-width:100%;resize:vertical}

/* Champs lisibles en mode sombre (remplissage automatique inclus) */
::placeholder{color:var(--mu);opacity:.85}
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--tx);caret-color:var(--tx);box-shadow:0 0 0 1000px var(--bg) inset;transition:background-color 9999s}

/* Fenêtres : suivent la zone réellement visible (clavier ouvert) */
.ov,.mo,.rb{bottom:var(--kb)}
.ov{padding-top:env(safe-area-inset-top,0px)}
.sheet{height:82vh;height:82dvh;max-height:calc(var(--vvh) - 12px);padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
.mo>.card{max-height:88vh;max-height:min(88dvh,calc(var(--vvh) - 28px));-webkit-overflow-scrolling:touch}
.rb{overflow:auto}
@media(max-height:500px){.sheet{height:94vh;height:94dvh}}

/* Pages (hors fenêtres) : espace pour pouvoir défiler au-dessus du clavier */
body.kb .wrap{padding-bottom:calc(90px + var(--kb))}

/* Écrans larges : ordinateur, grand écran */
@media(min-width:1100px){.wrap{max-width:1140px}.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
@media(min-width:1600px){.wrap{max-width:1320px}}
/* Très petits écrans */
@media(max-width:340px){.wrap{padding-left:10px;padding-right:10px}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}