/* accueil-mobile.css - mise a plat de la composition mobile de l'accueil ------------------------------------------------------------------------- Doit rester charge APRES PsyCB.Client.styles.css : les regles d'origine sont scopees [b-l7uy83bqq4] (specificite 0,2,0) et souvent en !important. A poids egal c'est l'ordre de chargement qui trancherait, mais pas contre un !important : les regles ci-dessous sont donc elles-memes en !important la ou elles doivent gagner, et non par confort. CE QUI EST CORRIGE Le bloc "Une psychologie centree sur la personne" (.lngbtn2) affichait son texte a 4,5 px sur telephone (mesure a 390 px) et 11,4 px encore a 1000 px. Cause : toutes ses dimensions sont en unites de viewport sans plancher - font-size:calc(1.05vw + .1vmin), height:23vw, line-height:calc(1.5vw), et un hexagone dessine avec des triangles en bordures de 6vw a 11.5vw. POURQUOI UN SIMPLE REGLAGE DE TAILLE NE SUFFISAIT PAS La police vaut 2,9 % de la largeur du bloc : agrandir le texte le fait deborder d'une forme dont la hauteur est figee en vw. Elargir le bloc le fait sortir de l'ecran, les triangles ajoutant 13vw. Et le rendre extensible le fait recouvrir la photo du cabinet (#faut2, en position:absolute), puis les titres de Clotilde. C'est la SUPERPOSITION qui bride le texte, pas sa taille. LE REMEDE Sous 992 px on cesse de superposer : la rangee passe en colonne, la photo revient dans le flux, le bloc de texte redevient un bloc ordinaire a 16 px. Au-dessus de 992 px, rien ne change : la composition d'origine est conservee telle quelle. Contraste : le texte etait blanc sur le vert sauge #b2b298, soit 2,1:1, sous le minimum WCAG AA (4,5:1). Il passe a #1e2d47 sur le meme fond, soit 6,38:1 - meme choix que celui retenu pour le pied de page : foncer le texte, garder le fond de marque. */ @media (max-width: 991.98px) { /* --- La rangee qui porte le bloc texte et la photo du cabinet --------- #index23 (texte) precede #index22 (photo) dans le DOM. On veut la photo en premier a l'ecran, d'ou l'inversion par `order`. L'id #index-approche a ete ajoute sur cette rangee dans index.html plutot que de la viser par :has(> #index23) : un navigateur sans :has() aurait ignore toute la regle, et l'ordre comme la mise en colonne seraient tombes en silence. */ #index-approche { display: flex !important; flex-direction: column !important; align-items: center !important; height: auto !important; gap: 24px; margin-top: 32px !important; } /* margin:0 obligatoire, et prefixe par #index-approche (specificite 2,0,0). Deux raisons cumulees : - les colonnes portent les classes Bootstrap `m-auto` / `my-auto`, et en colonne flex une marge auto absorbe l'espace libre au lieu de centrer ; - surtout, `#index23[b-l7uy83bqq4]` impose margin-top:-200px !important (1,1,0), le contrepoids du +200px porte par .lngbtn2 dans l'ancienne composition superposee. Un simple `#index23` (1,0,0) perdait contre lui et les blocs se chevauchaient de 176px (mesure). */ #index-approche #index22 { order: 1; width: 100% !important; max-width: 520px; margin: 0 !important; } #index-approche #index23 { order: 2; width: 100% !important; max-width: 620px; margin: 0 !important; padding: 0 16px !important; } /* Cale-espace de 33vw prevu pour degager la composition superposee : sans superposition il ne fait plus qu'ajouter du vide. */ #vide { display: none !important; } /* --- Photo du cabinet : retour dans le flux --------------------------- */ #index22 #faut2 { position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 8px; display: block; } /* --- Bloc de texte : redevient un bloc ordinaire ---------------------- Prefixe par #index23 (specificite 1,1,0) et non `.lngbtn2` seul (0,1,0) : les regles d'origine sont `.lngbtn2[b-l7uy83bqq4]` (0,2,0) et portent elles-memes !important sur width / min-width / max-width. A !important egal c'est la specificite qui tranche, pas l'ordre de chargement - sans ce prefixe le bloc restait bloque a 156px de large (mesure). */ #index23 .lngbtn2 { /* neutralise le positionnement d'origine */ position: static !important; top: auto !important; right: auto !important; left: auto !important; margin: 0 !important; transform: none !important; -moz-transform: none !important; zoom: 1 !important; /* neutralise les dimensions en vw */ width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; /* mise en forme lisible */ display: block !important; background-color: #b2b298; color: #1e2d47 !important; border-radius: 10px; padding: 24px 22px !important; /* En px et non en rem : la racine du site est en calc(60% + 0.8vmin), donc 1rem ne vaut que 12,7px sur un telephone de 390x844 (mesure). Un rem ici aurait reproduit le probleme qu'on corrige. */ font-size: 16px !important; font-weight: 500; text-align: left; box-shadow: 0 2px 10px rgba(0,0,0,0.10); } /* Les deux triangles qui formaient les pointes de l'hexagone : ils sont dimensionnes en vw et n'ont plus de sens sur un bloc rectangulaire. */ #index23 .lngbtn2::before, #index23 .lngbtn2::after { display: none !important; content: none !important; } #index23 .lngbtn2 > ul, #index23 .lngbtn2 ul { font-size: 16px !important; line-height: 1.55 !important; list-style: none; margin: 0 !important; padding: 0 !important; text-align: left !important; } #index23 .lngbtn2 > li, #index23 .lngbtn2 li { margin: 0 0 16px 0 !important; text-align: left !important; } #index23 .lngbtn2 li:last-child { margin-bottom: 0 !important; } /* .text-muted de Bootstrap est un gris clair : sur l'aplat vert il tombe sous le seuil de lisibilite. Les mots-cles restent distingues par la graisse, qui ne depend d'aucun contraste. */ #index23 .lngbtn2 .text-muted { color: #1e2d47 !important; font-weight: 700; } } /* Sous 400px le padding lateral coute trop de largeur utile au texte. */ @media (max-width: 400px) { #index23 .lngbtn2 { padding: 20px 16px !important; } #index23 { padding: 0 12px !important; } }