/* =========================================================================== access_mobile.css --------------------------------------------------------------------------- Page /accessPage (accessPage.php). Cible par la classe oc-page-access posee sur . Mesure a 1000px avant correction : #content 0 -> 1450, min-width 1450px (default.css) -> debordement de 465px, page calee a gauche paragraphes 94 -> 1357, deja justifies Appele par css/cssAccessMobile.php =========================================================================== */ @media (max-width: 1449px) { body.oc-page-access #content { min-width: 0 !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box; } body.oc-page-access #content .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } body.oc-page-access { overflow-x: hidden; } } /* =========================================================================== AVERTISSEMENT PETIT ECRAN + LISIBILITE < 767px --------------------------------------------------------------------------- Le bloc .oc-mobile-limit est toujours present dans le HTML : seul son affichage depend de la largeur. Une detection PHP ou user-agent servirait un document different au robot de Google, qui explore en mobile-first. MESURE A 767px AVANT CORRECTION : body font-family : sans-serif, math, roboto body font-size : 12px (le reste du site est a 16px) ul.recommandation padding-left 40px Le 12px du body est la cause principale : les tailles en dur du HTML (2.8em / 2.5em / 1.6em) se calculent dessus. On retablit d'abord la base a 16px, puis on redimensionne titres et texte comme sur les autres pages. ATTENTION AUX em EN CASCADE : une taille en em posee sur un

se calcule sur celle de son

donne 1.05 x cette taille, donc plus gros que les paragraphes. La taille est donc fixee UNE SEULE FOIS, sur le
- la reprend a 1em. =========================================================================== */ .oc-mobile-limit, .oc-mobile-signin-note, .oc-desktop-only-note { display: none; } @media (max-width: 767px) { /* --- Base : police et taille de reference du site --------------------- */ body.oc-page-access { font-size: 16px !important; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; } body.oc-page-access h1, body.oc-page-access h2, body.oc-page-access h3, body.oc-page-access p, body.oc-page-access ul, body.oc-page-access li, body.oc-page-access .oc-mobile-limit { font-family: inherit !important; } /* --- Avertissement ---------------------------------------------------- */ body.oc-page-access .oc-mobile-limit { display: block; margin: 0 0 24px; padding: 14px 16px; background: #fdf3e3; border-left: 4px solid #ff9800; border-radius: 5px; font-size: 1em; /* 16px */ margin-top: 0; line-height: 1.55; color: #333; text-align: left; box-sizing: border-box; } /* --- Rappel place juste avant la liste du quick start ------------------ */ body.oc-page-access .oc-mobile-signin-note { display: block; margin: 0 0 16px !important; font-size: 1em !important; font-style: italic; line-height: 1.5; color: #7a7a7a; text-align: left !important; } /* --- Titres ----------------------------------------------------------- Tailles relatives aux 16px retablis ci-dessus, identiques aux autres pages du site. Les !important sont indispensables : les valeurs d'origine sont dans les attributs style du HTML. */ body.oc-page-access h1 { font-size: 1.6em !important; /* 25.6px */ line-height: 1.25; margin: 0 0 18px !important; } body.oc-page-access h2 { font-size: 1.25em !important; /* 20px */ line-height: 1.3; padding-left: 0 !important; margin: 26px 0 12px !important; } /* --- Paragraphes ------------------------------------------------------ */ body.oc-page-access p { font-size: 1.05em !important; /* 16.8px */ line-height: 1.6; text-align: left !important; /* justification : lignes trop courtes */ } /* --- Listes ----------------------------------------------------------- Taille posee sur le
  - : les deux font donc exactement la meme taille que les paragraphes. Le padding de 40px mesure poussait le texte trop loin de la marge. */ body.oc-page-access ul.recommandation { font-size: 1.05em !important; /* 16.8px, comme les paragraphes */ padding-left: 18px !important; margin-left: 0 !important; margin-bottom: 0; } body.oc-page-access ul.recommandation li { font-size: 1em !important; /* herite du ul, pas de cumul */ line-height: 1.6 !important; text-align: left !important; margin-bottom: 0; padding-left: 0; } /* --- Liens vers des fonctions indisponibles sur petit ecran ------------ Le lien "quick set-up" pointe vers le logiciel optique, inaccessible sous 767px. pointer-events:none le neutralise sans modifier le HTML : le document reste identique pour le robot de Google, qui doit voir le lien et le suivre. */ body.oc-page-access .oc-desktop-link { pointer-events: none; cursor: default; color: #7a7a7a !important; text-decoration: none !important; } body.oc-page-access .oc-desktop-link b { font-weight: 600; } body.oc-page-access .oc-desktop-only-note { display: inline; font-style: italic; color: #7a7a7a; } /* --- Conteneur -------------------------------------------------------- margin-left 5% + width 90% en style inline : le bloc debordait des 15px de padding poses plus haut sur #content. */ body.oc-page-access #content .message.alert { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; padding: 16px !important; } /* Les
    
    en serie du HTML creaient des vides de deux lignes entre chaque bloc : les marges CSS ci-dessus les remplacent. */ body.oc-page-access #content .message.alert br { display: none; } }