/* ---------------- LOT MOBILE (revue design, lentille mobile 390 px) ----------------
   7. Premier ecran mobile : l'action passait sous la ligne de flottaison (gouttiere de 32 px,
      bandeau trop haut). Ordre explicite surtitre > titre > accroche > boutons, gouttiere 18 px. */
@media (max-width:480px){
  #wrapwrap #tu-kit .page-header{padding:36px 0 40px}
  #wrapwrap #tu-kit .page-header__inner,#wrapwrap #tu-kit .o-hero__inner{padding-left:18px;padding-right:18px}
  #wrapwrap #tu-kit .o-hero{padding:56px 0 48px}
  #wrapwrap #tu-kit .page-header__inner:has(>h1){display:flex;flex-direction:column;align-items:flex-start}
  #wrapwrap #tu-kit .page-header__inner:has(>h1)>*{order:5}
  #wrapwrap #tu-kit .page-header__inner:has(>h1)>.eyebrow{order:1}
  #wrapwrap #tu-kit .page-header__inner:has(>h1)>h1{order:2}
  #wrapwrap #tu-kit .page-header__inner:has(>h1)>.lead{order:3}
  #wrapwrap #tu-kit .page-header__inner:has(>h1)>.o-hero__ctas,
  #wrapwrap #tu-kit .page-header__inner:has(>h1)>.tu-direct{order:4;align-self:stretch}
  #wrapwrap #tu-kit .page-header .o-hero__ctas .o-btn.ghost{color:#fff;border-color:rgba(255,255,255,.6)}
  #wrapwrap #tu-kit .o-breadcrumb__inner{padding:9px 18px;font-size:12px;gap:6px}
}

/* 8. Echelle typographique mobile : les accroches criaient a 19-20 px et les details chuchotaient
      a 10-13 px. On resserre l'ecart, sans descendre sous 14 px pour le texte courant. */
@media (max-width:480px){
  #wrapwrap #tu-kit p.lead{font-size:16.5px;line-height:1.58}
  #wrapwrap #tu-kit .o-card p,#wrapwrap #tu-kit .div-card p{font-size:14px;line-height:1.55}
  #wrapwrap #tu-kit .o-stat__lbl{font-size:11.5px}
  html:not([lang^="ar"]) #wrapwrap #tu-kit .o-stat__lbl{letter-spacing:.06em}
}

/* 9. Chiffres et differenciateurs : 7 compteurs empiles sur 991 px passent a deux colonnes. */
@media (max-width:480px){
  #wrapwrap #tu-kit .o-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  #wrapwrap #tu-kit .o-stat__num{font-size:34px}
  #wrapwrap #tu-kit .o-stat:last-child:nth-child(odd){grid-column:1/-1;border-right:none}
  #wrapwrap #tu-kit .diff-item{grid-template-columns:40px 1fr;gap:12px;padding:18px 0}
  #wrapwrap #tu-kit .diff-num{font-size:28px}
}

/* 10. Tableau comparatif : la colonne « cabinet classique » etait rognee (404 px pour 354 dispo). */
@media (max-width:480px){
  #wrapwrap #tu-kit .cmp{table-layout:fixed;font-size:13px}
  #wrapwrap #tu-kit .cmp col:nth-child(1){width:36%}
  #wrapwrap #tu-kit .cmp col:nth-child(2){width:34%}
  #wrapwrap #tu-kit .cmp col:nth-child(3){width:30%}
  #wrapwrap #tu-kit .cmp th,#wrapwrap #tu-kit .cmp td{padding:10px 8px;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;vertical-align:top}
  #wrapwrap #tu-kit .cmp thead th{font-size:11.5px;letter-spacing:.02em}
  html[lang^="ar"] #wrapwrap #tu-kit .cmp thead th{letter-spacing:0}
}

/* 11. Pied de page : 2 400 px sur chaque page, bureaux sur 4 colonnes de 63 px. */
@media (max-width:480px){
  #wrapwrap #tu-kit .o-footer{padding:48px 0 28px}
  #wrapwrap #tu-kit .o-footer__grid{padding:0 18px;gap:26px 20px;margin-bottom:28px}
  #wrapwrap #tu-kit .o-footer__brand{grid-column:1/-1}
  #wrapwrap #tu-kit .o-footer__brand>div:first-child br{display:none}
  #wrapwrap #tu-kit .o-footer__col h5 br{display:none}
  #wrapwrap #tu-kit .o-footer__col ul li{margin:0}
  #wrapwrap #tu-kit .o-footer__col ul li a{display:block;padding:6px 0;font-size:14px}
  #wrapwrap #tu-kit .o-footer__grid+div[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:0 18px 8px!important;gap:18px 16px!important}
  #wrapwrap #tu-kit .o-footer__grid+div[style]+div[style]{padding:14px 18px 0!important;line-height:1.9}
}
/* fin du lot mobile 22/09/2026 */