/* Les catégories gardent une mosaïque compacte sur téléphone et tablette. */
@media (max-width:820px){
  :root{--n:6;--g:6px}
  .haut{padding:16px;mix-blend-mode:normal;background:#000;font-size:10px;letter-spacing:.16em}
  .haut a{min-height:24px;display:flex;align-items:center}
  .grille{--gw:calc(100vw - 16px);width:calc(100% - 16px);max-width:none;margin:54px 8px 0;gap:6px;grid-auto-flow:row;grid-auto-rows:calc((var(--gw) - 30px) / 12)}
  .grille>.t{grid-column:span var(--phone-c,3)!important;grid-row:span var(--phone-r,6)!important;min-width:0;border-radius:8px;opacity:1;transform:none;transition:background .4s,color .4s}
  .grille>.k-titre,.grille>.t1{--phone-c:6;--phone-r:8;padding:25px 20px 20px}
  .k-titre h1,.t1 h1{font-size:clamp(32px,9.4vw,64px);line-height:.97;max-width:16ch}
  .k-titre .mini,.t1 .mini{top:15px;right:15px;grid-template-columns:repeat(3,9px);gap:2px}
  .k-titre .mini i,.t1 .mini i{width:9px;height:9px}
  .grille>.k-liste{--phone-c:6;--phone-r:10;padding:42px 20px 18px;align-content:center}
  .k-liste h3{display:block;font-size:clamp(21px,5.3vw,30px);line-height:1.05;max-width:25ch;margin-bottom:14px}
  .k-liste li{font-size:13px;line-height:1.35;padding:7px 0;gap:10px;opacity:1}
  .k-liste li.on{padding-left:0}
  .k-liste li small{font-size:10px}
  .grille>.k-score{--phone-c:6;--phone-r:10}
  .grille>.k-rapport{--phone-c:6;--phone-r:9}
  .rapport{width:80%;padding:16px}
  .rapport li{font-size:12px}
  .grille>.k-cycle{--phone-r:8;padding:42px 15px 28px}
  .k-cycle .cy-t{font-size:clamp(22px,6.3vw,38px);line-height:1.03;overflow-wrap:break-word}
  .k-cycle .cy-x{font-size:12px;line-height:1.45;margin-top:12px}
  .grille>.k-photo{--phone-r:8}
  .k-photo .cap{font-size:19px;left:13px;right:13px;bottom:16px;line-height:1.08}
  .grille>.k-video,.grille>.k-image{--phone-r:8}
  .grille>.k-formes{--phone-r:6}
  .grille>.k-formes[style*="--phone-c:6"]{--phone-r:3!important}
  .grille>.k-cycle + .k-formes{--phone-r:8}
  .grille>.k-phrase{--phone-r:6;padding:36px 15px 18px}
  .k-phrase>p:not(.tag){font-size:clamp(22px,6.2vw,34px);line-height:1.04}
  .grille>.k-coche{--phone-r:7;padding:34px 13px 14px}
  .k-coche li{font-size:12px;line-height:1.25;gap:8px;padding:7px 0}
  .k-coche li i{width:16px;height:16px;border-width:1px}
  .k-coche li i::after{left:4px;top:1px;width:5px;height:9px;border-width:0 2px 2px 0}
  .grille>.k-grand{--phone-r:7}
  .k-grand .g{font-size:clamp(58px,20vw,110px)}
  .k-grand .g.serif{font-size:clamp(42px,13vw,75px)}
  .grille>.k-etapes{--phone-c:6;--phone-r:5}
  .etapes div{font-size:15px;padding-top:47px;opacity:1}
  .etapes div::before{width:30px;height:30px;left:calc(50% - 15px)}
  .etapes::before{top:15px}.etapes .pt{top:9px}
  .grille>.k-rail{--phone-r:6}
  .k-rail .rail{top:27px}
  .k-rail .rail span{font-size:24px;padding:8px 13px}
  .grille>.k-cta,.grille>.t14{--phone-c:4;--phone-r:6;padding:42px 16px 18px}
  .k-cta>span:not(.fl),.t14>span:not(.fl){font-size:clamp(27px,7.5vw,46px)}
  .k-cta .fl,.t14 .fl{top:15px;right:15px;font-size:10px;letter-spacing:.1em}
  .grille>.k-retour,.grille>.t15{--phone-c:2;--phone-r:6;padding:16px 10px}
  .k-retour span,.t15 span{font-size:clamp(17px,5vw,29px)}
  .grille .t .tag,.grille .t .lbl{font-size:10px;line-height:1.4;letter-spacing:.05em;left:13px;right:13px}
  .grille .t .tag{top:13px}.grille .t .lbl{bottom:13px}
  .grille>.k-boucle .cy-t{font-size:clamp(14px,4vw,24px);max-width:90%;text-align:center}
  .grille>.k-fiche{--phone-r:8}
  .k-fiche .fiche{width:80%;padding:12px}.k-fiche .fiche b{font-size:19px}
  .k-fiche .fiche div{font-size:11px}
  .grille>.k-agenda{--phone-r:7}
  .grille>.k-paliers{--phone-r:6;padding:52px 13px 56px;gap:5px}
  .k-paliers div span{top:-20px;font-size:11px}
  .k-loupe .page{inset:20% 14% 31%;gap:7px}
  .k-loupe .page i{height:5px}
  .grille>.t2,.grille>.t3{--phone-r:6}
  .grille>.t4{--phone-r:8}
  .grille>.t5{--phone-r:8}
  .grille>.t6{--phone-c:6;--phone-r:7}
  .grille>.t6b{--phone-c:6;--phone-r:9}
  .grille>.t7{--phone-c:6;--phone-r:7;padding:42px 20px 20px}
  .t7 .ti{font-size:clamp(28px,8vw,45px)}.t7 .tx{font-size:13px;margin-top:12px}
  .grille>.t8,.grille>.t9{--phone-r:6}
  .grille>.t10{--phone-c:6;--phone-r:7}
  .grille>.t12{--phone-r:6;padding:36px 15px 18px}
  .t12>p:not(.tag){font-size:clamp(22px,6.2vw,34px)}
  .grille>.t13{--phone-r:6}
  .t13 .rail{top:27px}.t13 .rail span{font-size:24px;padding:8px 13px}
  .grille>.t11{--phone-r:6}
  .grille>.t16{--phone-c:6;--phone-r:7}
  /* Les gestes du téléphone servent au défilement, les outils d'édition restent sur ordinateur. */
  body:not(.edition) .rz,body:not(.edition) .mv,body:not(.edition) .rz-bar{display:none!important}
  .rz-mode{display:block}
  .pied{font-size:9px;letter-spacing:.12em;padding:24px 12px}
}
@media (min-width:560px) and (max-width:820px){
  .grille{--gw:min(calc(100vw - 32px),680px);width:var(--gw);margin:58px auto 0}
}
@media (max-width:350px){
  .grille>.k-liste{--phone-r:12!important}
  .grille>.t[style*="--phone-c:3"]{--phone-r:9!important}
  .grille>.k-score{--phone-r:12!important}
  .grille>.k-rapport{--phone-r:11!important}
  .k-cycle .cy-t{font-size:22px}.k-cycle .cy-x{font-size:12px}
}

/* Mobile : le cadre de texte en haut de chaque page de service a la même taille partout (avant, sa hauteur suivait le texte et l'animation de chaque page). */
@media (max-width:820px){
  .fond-texte{height:520px;overflow:hidden}
  .fond-texte .scenes{flex:1 1 auto;min-height:0}
  .fond-texte .radar{max-height:140px}
  .fond-texte .radar svg{max-height:140px;width:auto;margin-inline:auto}
}