/* ============================================================
MOBILE — melasagency.com, 03/09/2026
Ce fichier n'en modifie aucun autre. Retirer sa balise
des pages suffit a tout remettre comme avant.
============================================================ */
/* ⛔ 1. LA CAUSE DU DECALAGE GENERAL — mesuree, pas supposee.
`section.tint-violet` deborde : le navigateur elargissait alors le
viewport de 390 a 539 px et DEZOOMAIT toute la page. C'est ce qui
rendait le burger invisible (il tombait a 521 px sur un ecran de
390) et decalait tout le site.
Trouve par masquage successif le 03/09 : masquer cette section
ramene la page de 539 a 390 px.
Le debordement vient tres probablement d'un pseudo-element
decoratif (::before / ::after) — invisible dans le DOM, donc
introuvable par inspection. RESTE A CONFIRMER.
La section contient son decor, comme .ticker-band le fait deja. */
section.tint-violet{overflow-x:hidden}
@media (max-width: 680px) {
/* 2. LES TITRES — le clamp a un plancher de 2.9rem / 2.3rem,
soit 46 px et 37 px sur un ecran de 390. */
html body h1{font-size:clamp(1.75rem,7.4vw,2.35rem)!important;line-height:1.13!important}
html body h2{font-size:clamp(1.38rem,5.9vw,1.8rem)!important;line-height:1.19!important}
html body h3{font-size:1.14rem!important;line-height:1.25!important}
html body .cible-title,
html body .garantie-title{font-size:1.32rem!important;line-height:1.2!important}
html body .svc-title,
html body .sb-title{font-size:1.12rem!important;line-height:1.25!important}
/* 3. LES MARGES — 4rem de cote sur 390 px, c'est un tiers de l'ecran. */
html body .section,
html body .section-full{padding-left:1.15rem!important;padding-right:1.15rem!important}
/* ⛔ ON NE TOUCHE PLUS AU PADDING DU HAUT. Mesure le 03/09 :
le reduire a 2.5rem faisait passer le titre des pages secteurs
SOUS la barre de navigation fixe, qui fait ~90 px. Le hero de
ces pages comptait dessus pour se degager. Les marges laterales
— le vrai gain — n'en dependent pas. */
/* 4. LE PIED DE PAGE reste en DEUX colonnes (il passait a une seule
sous 520 px, d'ou la liste interminable). */
html body .mfoot .fgrid{grid-template-columns:1fr!important;gap:1.7rem!important;text-align:center!important}
html body .mfoot .fh{text-align:center!important}
html body .mfoot .fcol a{text-align:center!important}
}
@media (max-width: 680px) {
/* ⛔ 5. LES TEMOIGNAGES DEVIENNENT UN VRAI CARROUSEL.
`.temo-grid` est en repeat(auto-fit, minmax(300px,1fr)) : elle
tente deux colonnes de 300 px dans 358 px disponibles, et coupe
la seconde carte en deux.
On en fait un carrousel tactile en CSS PUR — pas de JavaScript,
donc le texte reste dans la page et les moteurs le lisent
toujours. C'est le seul endroit du site ou cacher du contenu
ne coute rien : les temoignages sont repetitifs par nature. */
html body .temo-grid{
display:flex!important;
grid-template-columns:none!important;
overflow-x:auto!important;
scroll-snap-type:x mandatory!important;
gap:.7rem!important;
padding-bottom:.9rem!important;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
html body .temo-grid::-webkit-scrollbar{display:none}
html body .temo-grid > *{
flex:0 0 87%!important;
scroll-snap-align:center!important;
min-width:0!important;
}
}
@media (max-width: 680px) {
/* ⛔ 6. LA GRILLE DES TEMOIGNAGES N'A AUCUNE CLASSE.
Mesure le 03/09 : c'est un
nu en display:grid, avec des
colonnes de 217 px et 255 px — soit 472 px de contenu dans un
conteneur de 316 px. La seconde carte est coupee en deux.
Comme elle n'a pas de nom, on la vise par ce qu'elle CONTIENT.
Carrousel tactile en CSS pur : aucun JavaScript, le texte reste
dans la page et les moteurs le lisent toujours. */
html body section.tint-violet div:has(> .temo-card){
display:flex!important;
grid-template-columns:none!important;
overflow-x:auto!important;
scroll-snap-type:x mandatory!important;
gap:.7rem!important;
padding-bottom:.9rem!important;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
html body section.tint-violet div:has(> .temo-card)::-webkit-scrollbar{display:none}
html body .temo-card{
flex:0 0 87%!important;
scroll-snap-align:center!important;
min-width:0!important;
max-width:none!important;
}
}
@media (max-width: 680px) {
/* ⛔ 7. LES ONGLETS DE DEMO S'ECRASENT POUR TENIR.
Mesure le 03/09 sur /demo.html : `.demo-tabs` fait 342 px pour
379 px de contenu. Les quatre onglets se compriment a 94 px et
leur texte part sur trois lignes.
On cesse de les comprimer : chacun garde une largeur lisible et
la barre defile au doigt. */
html body .demo-tabs{
overflow-x:auto!important;
scroll-snap-type:x proximity!important;
gap:.45rem!important;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
html body .demo-tabs::-webkit-scrollbar{display:none}
html body .demo-tab{
flex:0 0 auto!important;
min-width:8.6rem!important;
scroll-snap-align:start!important;
}
}
/* La mention sous le code de demonstration de /demo.html.
Hors media query : elle est utile sur telephone comme sur ordinateur.
Un champ pre-rempli sans explication fait hesiter — le visiteur se
demande s'il doit le remplacer par le sien. */
.mr-demo-note{
display:block;margin:.55rem 0 0;padding:0;
font-size:.82rem;line-height:1.4;font-style:italic;
color:#B79BFF;
}
@media (max-width: 680px) {
/* ⛔ 8. LE CADRE DU LOGO PASSAIT SOUS LE BURGER.
Mesure le 03/09 : `.nav-logo` va de 22 a 342 px, le burger
commence a 326 px — 16 px de chevauchement, sur les 52 pages.
On arrete le cadre avant la zone du burger. La largeur reservee
(4.4rem) couvre le bouton (46 px) et sa marge droite. */
html body .nav-logo{
max-width:calc(100% - 4.4rem)!important;
box-sizing:border-box!important;
}
}
@media (max-width: 680px) {
/* ⛔⛔ 9. LA VRAIE CAUSE, MESUREE LE 03/09 AU CHARGEMENT.
Les 54 elements `.fade` sont DECALES avant d'apparaitre. Ils
debordent le temps de l'animation : la page fait 435 px pour un
ecran de 390. Le navigateur DEZOOME pour tout montrer — et il ne
revient jamais, meme quand les elements ont fini de rentrer.
C'est pourquoi aucune mesure APRES coup ne trouvait rien : le
debordement etait deja passe.
Sur telephone, l'apparition se fait sans deplacement horizontal. */
html body .fade{transform:none!important;min-width:0!important}
/* ⛔ min-width:0 : mesure le 03/09 sur /secteurs/restauration.html.
Les .fade y ont min-width:auto — un enfant de flex ou de grille
avec cette valeur REFUSE de devenir plus etroit que son contenu.
Le conteneur offre 326 px, les enfants en exigent 403, personne
ne cede : la page fait 435 pour un ecran de 390.
Le transform n'y changeait rien — deux causes distinctes. */
}
@media (max-width: 680px) {
/* ⛔ 10. LE BURGER CHEVAUCHAIT ENCORE LE CADRE DU LOGO.
Le max-width pose au point 8 depend de la structure interne du
cadre — trop fragile, il ne prenait pas sur plusieurs pages.
On reserve la place AUTREMENT : la barre entiere recule de 5rem
a droite. Le burger, en position:fixed, n'est pas concerne ;
tout ce qui est DANS la barre s'arrete avant lui.
Mesure du 03/09 : burger de 326 a 372 px sur un ecran de 390. */
html body nav,
html body #nav{padding-right:5rem!important}
}
/* ⛔ 11. LES LIENS SOCIAUX DU PIED DE PAGE — 03/09/2026.
Poses sur les 52 pages, apres « Mentions legales ».
Avant : les 4 mentions de LinkedIn n'existaient QUE dans les
donnees structurees, invisibles pour un visiteur — personne ne
pouvait cliquer. Et rien du tout vers Instagram.
Hors media query : ils doivent se voir sur telephone ET sur
ordinateur. */
.mfoot a.mr-soc,
a.mr-soc{
color:#B79BFF!important;
font-weight:600;
text-decoration:none;
margin-left:1.2rem;
white-space:nowrap;
}
a.mr-soc + a.mr-soc{margin-left:.85rem}
a.mr-soc:hover{text-decoration:underline}
/* 17092026 : pied de page compact sur mobile, 3 colonnes */
@media(max-width:760px){
.mfoot{padding:1rem 1.1rem !important}
.mfoot .fgrid{grid-template-columns:repeat(3,1fr) !important;gap:.7rem !important;max-width:none !important}
.mfoot .fgrid > div:first-child{grid-column:1 / -1}
.mfoot .fh{font-size:.68rem !important;letter-spacing:.06em !important;margin-bottom:.4rem !important}
.mfoot .fcol a{font-size:.78rem !important;padding:.14rem 0 !important;line-height:1.35}
.mfoot p{font-size:.84rem !important;line-height:1.55 !important}
}