/* =========================================================================== tutorials_mobile.css --------------------------------------------------------------------------- Adaptation mobile de la page /optical_tutorial (tutorials.php) et des pages de tutoriel individuelles. A INCLURE AVEC header_mobile.css, qui fournit le logo et le menu. Ce fichier ne traite que le contenu. PROBLEME TRAITE Les vignettes de tutoriel sont dans des .col-3 sans point de rupture : 4 par ligne quelle que soit la largeur d'ecran, soit environ 85px par vignette sur un mobile -- image et titre illisibles. -> 2 par ligne sous 992px, 1 par ligne sous 400px. PORTEE : tout est dans @media. Au-dessus de 991px, AUCUNE regle ne s'applique. Appele par css/cssTutorialsMobile.php =========================================================================== */ @media (max-width: 991px) { /* --------------------------------------------------------------------------- 1. CONTENEURS --------------------------------------------------------------------------- */ #content .row.margin-0 { margin-left: 0; margin-right: 0; width: 100%; } /* Le bloc de contenu porte style="padding:20px !important" en dur : un style inline avec !important ne peut pas etre surcharge en CSS externe. On compense donc sur le conteneur parent plutot que de tenter de l'ecraser. */ #content .guideHandy { margin-left: 0; margin-right: 0; } #content .bloc_index h1 { font-size: 1.6rem; line-height: 1.25; text-align: center; margin: 10px 0 6px 0; } /* --------------------------------------------------------------------------- 2. VIGNETTES DE TUTORIEL : 2 PAR LIGNE --------------------------------------------------------------------------- Les vignettes sont des
dans un
. --------------------------------------------------------------------------- */ #content .row.margin-20 { display: flex; flex-wrap: wrap; justify-content: center; margin-left: 0; margin-right: 0; } #content .row.margin-20 > .col-3 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 6px !important; min-width: 0; } /* La carte occupe toute la hauteur disponible pour que les vignettes d'une meme ligne soient alignees. */ #content .row.margin-20 .card { height: 100%; display: flex; flex-direction: column; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; } #content .row.margin-20 .card-img-top { width: 100%; height: auto; object-fit: contain; background: #fff; } #content .row.margin-20 .card-block { padding: 6px 4px; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } #content .row.margin-20 .card-text { font-size: 12px; line-height: 1.3; margin: 0; /* Coupe les titres longs plutot que de deformer la grille */ overflow-wrap: break-word; hyphens: auto; } /* --------------------------------------------------------------------------- 3. CONTENU D'UN TUTORIEL --------------------------------------------------------------------------- Les fichiers handy_tutorial/ht_*.php contiennent schemas, formules et tableaux prevus pour le desktop. --------------------------------------------------------------------------- */ #content img, #content svg { max-width: 100%; height: auto; } /* Formules et tableaux larges : defilement dans leur propre bloc, sans elargir la page. */ #content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } #content pre { overflow-x: auto; max-width: 100%; } /* --------------------------------------------------------------------------- 3 bis. CONTENU D'UN TUTORIEL (handy_tutorial/ht_*.php) --------------------------------------------------------------------------- Structure : .bloc_tuto > .div-collapse > h3 + hr, puis .collapse > .row > .col-lg-12.textEtSchema > p Pas de style inline ici : les tailles viennent de cssTutorials.css, donc pas besoin de !important. --------------------------------------------------------------------------- */ #content .bloc_tuto { padding-left: 6px; padding-right: 6px; margin-bottom: 6px; } #content .div-collapse { padding: 4px 0; cursor: pointer; } #content .div-collapse h3 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 4px 0; padding-right: 20px; text-align: left; } #content .div-collapse hr { margin: 4px 0 0 0; } #content .textEtSchema, #content .col-lg-12 { padding-left: 4px; padding-right: 4px; max-width: 100%; flex: 0 0 100%; } #content .collapse p, #content .textEtSchema p { font-size: 13.5px; line-height: 1.5; text-align: left; overflow-wrap: break-word; } #content .collapse .parameters, #content .textEtSchema .parameters { font-size: 13.5px; } #content .collapse ul, #content .collapse ol { padding-left: 18px; font-size: 13.5px; line-height: 1.5; } #content .collapse li { margin-bottom: 6px; } /* Le margin-top calcule du .bloc_index saute a la premiere ouverture d'un paragraphe : valeur figee, comme sur videos.php et faq.php. */ #content .bloc_index { display: flow-root; margin-top: 8px !important; } #content .collapse, #content .collapsing { transition: height 0.35s ease !important; } /* --------------------------------------------------------------------------- 4. FILET DE SECURITE --------------------------------------------------------------------------- */ #content .col-12 { max-width: 100%; } } /* --------------------------------------------------------------------------- TRES PETITS ECRANS : une seule vignette par ligne --------------------------------------------------------------------------- Sous 400px, deux vignettes laissent moins de 180px chacune : l'image devient trop petite pour etre lisible. --------------------------------------------------------------------------- */ @media (max-width: 400px) { #content .row.margin-20 > .col-3 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } #content .row.margin-20 .card-text { font-size: 13px; } }