/* =========================================================================== iframe_form_mobile.css --------------------------------------------------------------------------- Mise en page des blocs 2D / 3D des formulaires du logiciel optique. S'applique a deux contextes : - la page directe centered_and_folded_systems-surfaces-parameters - le meme formulaire charge dans #form-iframe (mode MCP), auquel cas ce fichier doit etre inclus dans core_centered_and_folded_systems.php : le CSS de la page parente n'a AUCUN effet dans une iframe. AUCUNE MEDIA QUERY : le centrage doit valoir a toute largeur d'ecran. PROBLEMES TRAITES ET MESURES - #content garde min-width:1450px (css/default.css) : le document debordait (scrollWidth 1231 pour 1151 d'ecran) et tout centrage se calculait sur cette largeur, pas sur celle de la fenetre. - Un .row porte padding-left:50px en style inline : decalage general. - Le .col-10.offset-0 limitait le conteneur a 967px alors que les blocs en demandent plus de 1100. - Un .row porte margin-left:-15px sans margin-right correspondant : 15px a gauche contre 45 a droite. - Le conteneur interne s'etirait sur toute la largeur : margin:auto n'avait alors rien a repartir et le centrage restait sans effet. =========================================================================== */ /* =========================================================================== 1. LARGEUR DU DOCUMENT =========================================================================== */ body, #content, #content .row, #content .col-12 { min-width: 0 !important; max-width: 100%; } /* =========================================================================== 2. CHAINE DES CONTENEURS --------------------------------------------------------------------------- Un style inline bat toute regle externe : !important est necessaire pour neutraliser les valeurs en dur sans modifier le PHP. =========================================================================== */ /* padding-left:50px en style inline sur un .row de la chaine. */ #content .row[style*="padding-left"] { padding-left: 0 !important; } /* Le col-10 laissait 2/12 inutilises alors que le contenu manque de place. */ #content .col-10.offset-0 { flex: 0 0 100%; max-width: 100%; width: 100%; padding-left: 0 !important; padding-right: 0 !important; } /* margin-left:-15px sans margin-right correspondant : Bootstrap les applique normalement par paire. */ #content .col-12 > .row, #content .col-12.ps-2 > .row, #content .col-10.offset-0 > .row { margin-left: 0 !important; margin-right: 0 !important; } #content .col-12.ps-2 { padding-left: 0 !important; padding-right: 0 !important; width: 100%; max-width: 100%; } /* Le bloc de titre suit la largeur reelle de son parent au lieu de faire 100% de la fenetre. */ #content .overlayTitle-div { max-width: 100%; width: 100%; } /* =========================================================================== 3. BLOCS 2D / 3D : tailles conservees, ecarts symetriques --------------------------------------------------------------------------- Les deux blocs gardent leurs largeurs en dur (400 et 700px) : le canvas 3D ne supporte pas d'etre reduit en CSS -- essai fait, il se retrouve ecrase en une simple barre verticale. L'ensemble est centre dans la page, avec un ecart identique de chaque cote. L'espace ENTRE les deux blocs se reduit quand l'ecran se retrecit, jusqu'a un minimum de 8px ; en dessous, les blocs s'empilent. =========================================================================== */ #content .container.d-flex.justify-content-center { max-width: 100% !important; width: 100%; padding-left: 4px !important; padding-right: 4px !important; margin-left: auto !important; margin-right: auto !important; } /* fit-content est le point cle : le bloc interne fait exactement la largeur des deux cadres plus l'ecart, et margin:auto le centre reellement. Sans cela il s'etire sur toute la largeur disponible et margin:auto n'a plus rien a repartir -- c'est ce qui faisait echouer le centrage. */ #content .container.d-flex.justify-content-center > .d-flex { display: flex; flex-wrap: wrap; justify-content: center !important; align-items: flex-start; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; /* L'ecart suit la place disponible : 40px au large, 8px au plus serre. Cela repousse d'une trentaine de pixels le seuil d'empilement. */ gap: clamp(8px, 3vw, 40px) !important; } /* Tailles conservees. max-width evite un debordement sur tres petit ecran. */ #content .container.d-flex.justify-content-center > .d-flex > .advanced-input { flex: 0 0 auto; max-width: 100%; } /* Le bloc 3D est declare a 700px mais sa scene n'en occupe que 402 : 268px de vide, contre 16 seulement dans le bloc 2D. Les cadres visibles ne sont donc pas a egale distance du centre de la page, meme si les blocs le sont. Reduire le bloc ecrase le canvas WebGL (essai fait : il se retrouve reduit a une barre verticale). On compense donc le vide par des marges negatives, qui ramenent le cadre visible a sa place sans toucher a la largeur reelle. */ #content .container.d-flex.justify-content-center > .d-flex > .advanced-input:nth-child(2) { margin-left: -134px; margin-right: -134px; } /* --------------------------------------------------------------------------- CHAMPS DE SAISIE DES FORMULAIRES --------------------------------------------------------------------------- Les champs portent des largeurs en pourcentage en style inline (width:4% sur "number of surfaces", par exemple). A 800px d'ecran, 4% du conteneur donne 14px : le champ devient inutilisable. min-width en ch : l'unite vaut la largeur du caractere "0" dans la police courante. 4ch garantit qu'un champ a trois chiffres reste lisible, quelle que soit la largeur d'ecran. 16px sur la police : en dessous, iOS zoome automatiquement au clic dans un champ et desaligne toute la page. --------------------------------------------------------------------------- */ #content form input[type="text"], #content form input[type="number"], #content form input:not([type]) { min-width: 4ch; padding: 3px 6px; box-sizing: content-box; } /* --------------------------------------------------------------------------- FORMULAIRE "Number of surfaces" --------------------------------------------------------------------------- Cible par la classe posee sur a partir de input_choice : les autres formulaires du logiciel ne sont pas affectes. PROBLEMES TRAITES - .col-6.numSurf et .col-6.advancedButton portent margin-left:17% en dur, prevu pour un ecran large. Sur ecran etroit, ce decalage repousse le champ et le bouton hors de l'axe du formulaire. - Les .row de Bootstrap portent margin-left:-15px sans colonne pour le compenser : 15px de decalage supplementaire. --------------------------------------------------------------------------- */ body.oc-form-number-of-surfaces #content form .row { margin-left: 0 !important; margin-right: 0 !important; } body.oc-form-number-of-surfaces #content form .col-6 { flex: 0 0 100%; max-width: 100%; margin-left: 0 !important; text-align: center; } /* =========================================================================== FORMULAIRE "Aperture and fields" --------------------------------------------------------------------------- Cible par la classe du : les autres formulaires ne sont pas touches. MESURES DE DEPART (ecran 1400px, centre a 700) table 0 gauche 142 largeur 417 hauteur 236 dans col-4.offset-1 table 1 gauche 700 largeur 417 hauteur 244 dans col-4.offset-1 table 2 gauche 298 largeur 640 hauteur 346 dans col-6 (margin-left:20%) boutons centres a 642 au lieu de 700 OBJECTIFS 1. Les deux tableaux Aperture cote a cote, meme hauteur 2. Leur ensemble centre dans la page 3. Bouton "apply aperture" centre sous les deux 4. Largeur naturelle : les tableaux ne s'etirent pas sur grand ecran 5. Tableau Fields centre, assez large sur petit ecran, bouton centre =========================================================================== */ /* --- Neutralisation des decalages de grille ------------------------------ Les .row portent margin:-15px sans colonne pour compenser, et le .col-6 du tableau Fields porte margin-left:20% en style inline. */ body.oc-form-aperture-and-fields #content form .row { margin-left: 0 !important; margin-right: 0 !important; } body.oc-form-aperture-and-fields #content form .col-6 { margin-left: 0 !important; margin-right: 0 !important; } /* --- 1, 2, 4 : les deux tableaux Aperture -------------------------------- Le .row qui les contient devient un flex centre. Les colonnes prennent leur largeur de contenu (auto) au lieu de 4/12 : les tableaux cessent de s'etirer. L'ecart entre eux suit la place disponible. align-items:stretch (defaut du flex) donne aux deux colonnes la meme hauteur ; height:100% la transmet aux tableaux. */ body.oc-form-aperture-and-fields #content form .row:has(> .col-4) { display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: clamp(12px, 4vw, 60px); overflow-x: auto; max-width: 100%; } body.oc-form-aperture-and-fields #content form .col-4 { flex: 0 0 auto; width: auto; max-width: none; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0; padding-right: 0; display: flex; } body.oc-form-aperture-and-fields #content form .col-4 .table-stripedAdv { width: -moz-fit-content; width: fit-content; height: 100%; margin: 0; } /* --- 5 : le tableau Fields ------------------------------------------------ Largeur naturelle, centre. min-width evite qu'il ne se comprime trop sur petit ecran ; au-dela, il defile dans son bloc. */ body.oc-form-aperture-and-fields #content form .col-6 { flex: 0 0 100%; max-width: 100%; display: flex; justify-content: center; overflow-x: auto; } body.oc-form-aperture-and-fields #content form .col-6 .table-stripedAdv { width: -moz-fit-content; width: fit-content; min-width: 420px; max-width: 100%; margin: 0 auto; } /* --- Cellules : texte sur une ligne -------------------------------------- Sans nowrap, un libelle qui passe sur deux lignes fait grandir son tableau seul, et les deux hauteurs divergent. */ body.oc-form-aperture-and-fields #content form .table-stripedAdv th, body.oc-form-aperture-and-fields #content form .table-stripedAdv td { white-space: nowrap; padding: 4px 10px; } /* Le champ ne doit pas deborder de sa cellule : a 78px dans une cellule de 69, il recouvrait le bord droit du tableau. */ body.oc-form-aperture-and-fields #content form .table-stripedAdv input[type="text"], body.oc-form-aperture-and-fields #content form .table-stripedAdv input:not([type]) { max-width: 100%; box-sizing: border-box; } /* --- 3 : les boutons ------------------------------------------------------ Centres sur toute la largeur du formulaire, sous leur tableau. */ body.oc-form-aperture-and-fields #content form .row.text-center, body.oc-form-aperture-and-fields #content form .advancedButton { flex: 0 0 100%; max-width: 100%; margin-left: 0 !important; text-align: center; } /* --------------------------------------------------------------------------- Sous 1150px, les deux tableaux Aperture ne tiennent plus cote a cote : le premier se retrouve tronque a gauche par le defilement. Ils s'empilent alors, chacun centre. --------------------------------------------------------------------------- */ @media (max-width: 1150px) { body.oc-form-aperture-and-fields #content form .row:has(> .col-4) { flex-wrap: wrap; overflow-x: visible; row-gap: 20px; } body.oc-form-aperture-and-fields #content form .col-4 { flex: 0 0 100%; justify-content: center; } /* Empiles, ils n'ont plus besoin d'une hauteur commune. */ body.oc-form-aperture-and-fields #content form .col-4 .table-stripedAdv { height: auto; } } /* Espace vertical entre la section Aperture et la section Fields. --------------------------------------------------------------------------- Correction 04/09/2026 : l'ancien selecteur visait TOUS les .overlayTitle-div de la page. Le titre "Aperture", premier bloc, recevait lui aussi les 30px et demarrait donc 30px plus bas que le bloc titre + boutons beiges des autres formulaires (surfaces parameters, number of surfaces...). Mesures : les deux .overlayTitle-div sont chacun seul dans un .col-10, donc :first-of-type ne les distingue pas ; en revanche leurs deux .row parentes partagent le meme parent, ce qui rend le combinateur ~ utilisable. Retire du selecteur : "#content h1 + .row". Mesure faite, toutes les .row de la page sont a margin-top:0 -- cette partie ne matchait rien. --------------------------------------------------------------------------- */ body.oc-form-aperture-and-fields #content .row:has(.overlayTitle-div) ~ .row:has(.overlayTitle-div) .overlayTitle-div { margin-top: 30px; } /* =========================================================================== FORMULAIRE "Wavelengths" --------------------------------------------------------------------------- Mesures a 900px : le .col-6 porte margin-left:20% en style inline, d'ou un tableau a 198px du bord gauche contre 312 du droit. Et le champ de la derniere colonne fait 106px dans une cellule de 97 : il deborde et recouvre la bordure droite, d'ou l'impression de tableau inacheve. =========================================================================== */ body.oc-form-wavelengths #content form .row { margin-left: 0 !important; margin-right: 0 !important; } /* Le col-6 prend toute la largeur et centre son tableau. */ body.oc-form-wavelengths #content form .col-6 { flex: 0 0 100%; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; display: flex; justify-content: center; overflow-x: auto; } /* Largeur naturelle : le tableau ne s'etire pas sur grand ecran et ne se comprime pas sur petit -- au-dela, il defile dans son bloc. */ body.oc-form-wavelengths #content form .table-stripedAdv { width: -moz-fit-content; width: fit-content; min-width: 390px; max-width: 100%; margin: 0 auto; } /* Le texte reste sur une ligne : sans cela les rangees grandissent et le tableau se deforme sur ecran etroit. */ body.oc-form-wavelengths #content form .table-stripedAdv th, body.oc-form-wavelengths #content form .table-stripedAdv td { white-space: nowrap; padding: 4px 10px; } /* Le champ ne deborde plus de sa cellule : la bordure droite redevient visible. */ body.oc-form-wavelengths #content form .table-stripedAdv input[type="text"], body.oc-form-wavelengths #content form .table-stripedAdv input:not([type]), body.oc-form-wavelengths #content form .table-stripedAdv select { max-width: 100%; box-sizing: border-box; } /* Bouton centre sous le tableau. */ body.oc-form-wavelengths #content form .row.text-center, body.oc-form-wavelengths #content form .advancedButton { flex: 0 0 100%; max-width: 100%; margin-left: 0 !important; text-align: center; } /* =========================================================================== FORMULAIRE "Laser and light source" --------------------------------------------------------------------------- Mesures a 1800px : table 0 gauche 74 droite 307 parent col-10 margin-left: 2.5% table 1 gauche 361 droite 599 parent col-6 margin-left: 19% table 2 gauche 601 droite 409 parent col-10 margin-left: 28.5% Trois decalages en dur differents : aucun tableau n'est centre. Les champs debordent de 8px de leur cellule (163 dans 155, 353 dans 345, 135 dans 126) et recouvrent la bordure droite. Le second groupe de boutons beiges s'empile verticalement (haut 769, 807, 845) : le