/* =====================================================================/* ===================================================================== CSS RESPONSIVE PROPORTIONNEL (rem) - Joomla / Template Creator Version 2 : basée sur ton template.css et ton mobile.css Référence : 1024px de large, 1rem = 16px. A coller dans custom.css (ou le CSS personnalisé de Template Creator), de préférence chargé APRES template.css. Ne pas modifier mobile.css : il est régénéré à chaque enregistrement. Marges négatives trouvées dans ton template.css (hors Bootstrap) : #bloc4 .tck-module margin-left -3rem #bloc5 .tck-module margin-left -8.75rem #block9 .tck-module margin-left -6.25rem #block16 .tck-module margin-left -9rem #block20 > .inner margin-left -6.25rem #block20 .tck-module margin-left -9rem #block21 > .inner margin-right -1.25rem #block22 .tck-module margin-left -6.25rem #block22 > .inner margin-top -2rem (vertical : conservée) #block27 > .inner margin-top -4rem (vertical : conservée) margin-right -6.25rem #block28 > .inner margin-left -1.25rem #block37 .tck-module margin-left -6.25rem ===================================================================== */ /* --------------------------------------------------------------------- 1. TAILLE DE BASE DU REM 16 / 1024 x 100 = 1.5625vw. Plancher à 11px (atteint vers 704px). Ton template.css ne définit aucun font-size sur html : pas de conflit. --------------------------------------------------------------------- */ html { font-size: 16px; } @media (max-width: 1024px) { html { font-size: clamp(11px, 1.5625vw, 16px); } } /* --------------------------------------------------------------------- 2. IMAGES ET DEBORDEMENT --------------------------------------------------------------------- */ img { max-width: 100%; height: auto; } body { overflow-x: clip; /* contrairement à hidden, ne casse pas position: sticky */ } /* --------------------------------------------------------------------- 3. TABLETTES ET GRANDS MOBILES (768px et moins) Le rem est bloqué à 11px sous ~704px alors que l'écran continue de rétrécir. Les marges négatives horizontales passent donc en vw (valeur_rem x 1.5625vw) pour rester proportionnelles. --------------------------------------------------------------------- */ @media (max-width: 768px) { #bloc4 div.moduletable, #bloc4 div.module, #bloc4 .widget, #bloc4 .tck-module, #bloc4 div.moduletable_menu, #bloc4 div.module_menu { margin-left: -4.6875vw; } #bloc5 div.moduletable, #bloc5 div.module, #bloc5 .widget, #bloc5 .tck-module, #bloc5 div.moduletable_menu, #bloc5 div.module_menu { margin-left: -13.6719vw; } #block9 div.moduletable, #block9 div.module, #block9 .widget, #block9 .tck-module, #block9 div.moduletable_menu, #block9 div.module_menu { margin-left: -9.7656vw; } #block16 div.moduletable, #block16 div.module, #block16 .widget, #block16 .tck-module, #block16 div.moduletable_menu, #block16 div.module_menu { margin-left: -14.0625vw; } #block22 div.moduletable, #block22 div.module, #block22 .widget, #block22 .tck-module, #block22 div.moduletable_menu, #block22 div.module_menu { margin-left: -9.7656vw; } #block37 div.moduletable, #block37 div.module, #block37 .widget, #block37 .tck-module, #block37 div.moduletable_menu, #block37 div.module_menu { margin-left: -9.7656vw; } #block20 div.moduletable_menu, #block20 div.module_menu { margin-left: -14.0625vw; } #block20 > .inner { margin-left: -9.7656vw; } #block21 > .inner { margin-right: -1.9531vw; } #block27 > .inner { margin-right: -9.7656vw; } #block28 > .inner { margin-left: -1.9531vw; } } /* --------------------------------------------------------------------- 4. TELEPHONES EN PORTRAIT (480px et moins) Les colonnes sont empilées : on supprime les décalages horizontaux et on remet des marges symétriques pour que les blocs soient centrés. Un Xiaomi 17T fait environ 400px de large en CSS : il tombe ici, alors que les réglages "téléphone portrait" de mobile.css ne s'appliquent qu'à 320px. !important : mobile.css peut être chargé après ce fichier. --------------------------------------------------------------------- */ @media (max-width: 480px) { #bloc4 div.moduletable, #bloc4 div.module, #bloc4 .widget, #bloc4 .tck-module, #bloc4 div.moduletable_menu, #bloc4 div.module_menu { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } #bloc5 div.moduletable, #bloc5 div.module, #bloc5 .widget, #bloc5 .tck-module, #bloc5 div.moduletable_menu, #bloc5 div.module_menu { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } #block9 div.moduletable, #block9 div.module, #block9 .widget, #block9 .tck-module, #block9 div.moduletable_menu, #block9 div.module_menu { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } #block16 div.moduletable, #block16 div.module, #block16 .widget, #block16 .tck-module, #block16 div.moduletable_menu, #block16 div.module_menu { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } #block22 div.moduletable, #block22 div.module, #block22 .widget, #block22 .tck-module, #block22 div.moduletable_menu, #block22 div.module_menu { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } #block37 div.moduletable, #block37 div.module, #block37 .widget, #block37 .tck-module, #block37 div.moduletable_menu, #block37 div.module_menu { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } #block20 div.moduletable_menu, #block20 div.module_menu { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } #block20 > .inner, #block28 > .inner { margin-left: 0 !important; } #block21 > .inner, #block22 > .inner, #block27 > .inner { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } /* mobile.css (320px) : margin-left: 40px sur le texte du bloc 22 */ #block22 .tck-module-text { margin-left: 0 !important; } /* mobile.css (320px) : margin-top: -100px en px, remplacé par du rem */ #block16 > .inner { margin-top: -6rem !important; } @media (max-width: 480px) { /* La colonne du logo passe en pleine largeur */ #row1column1, #row1column2 { width: 100% !important; } /* Logo : taille réglable, centré */ #logo1 > .inner > img { width :100 % ; max-width: 22rem; display: block; margin-left: auto; margin-right: auto; } }