/* usine:socle : le SOCLE FIXE de l'usine 1000 (Cedia 26/09). Posé en CODE après chaque build (astro_site.pose_socle, dernière feuille du de chaque page), vérifié par verif_en_ligne (points socle:*, verif_socle.py). Aucun appel à un LLM. Chaque règle a son seuil chiffré. */ /* S1 logo du header : 52 px de haut en bureau (48 à 64), 38 px en mobile (≥ 32). Cedia 27/09, actu-pme.com : à 44 px le logo « peut être plus gros ». */ header [data-usine="logo"] img, header img[data-usine="logo"] { height: 52px !important; width: auto !important; max-width: min(60vw, 340px); object-fit: contain; } /* S2 pages internes (contact, à propos, auteurs...) : conteneur à la largeur du site, jamais une colonne de 700 px encadrée. Le conteneur porte data-usine-page="interne". */ [data-usine-page="interne"] { min-width: min(100%, 60rem); margin-inline: auto; } /* S3 ... mais un texte courant de page interne reste une colonne lisible (≤ 75 caractères). */ /* 54ch, pas 60ch : le seuil de verif_socle est cpl_max = 80 caractères par ligne et 60ch en valait 86 sur la-gazette-assurance (ch = chasse du « 0 » ≈ 8,8 px en Inter Tight, soit 528 px de colonne pour 6,14 px par caractère moyen ; 54ch ≈ 475 px ≈ 77 car.). Le socle ne tenait pas son propre seuil. */ [data-usine-page="interne"] p { max-width: min(54ch, 31em); } [data-usine-page="interne"] .text-center p, [data-usine-page="interne"] p.text-center { margin-inline: auto; } /* ... jamais dans un article : le texte remplit la colonne du kit, la mesure se règle sur la colonne (Cedia 27/09, blog-business-entreprise : paragraphes de 432 px dans une colonne de 896, encadré auteur écrasé). */ /* !important : une règle de thème ou de retouche (« p, li { max-width: 68ch } ») faisait le même effet. */ .ka-cadre .ka-corps :is(p, li), .ka-cadre .ka-auteur p { max-width: none !important; } /* S4 images d'un bloc de home hors hero : 480 px de haut au plus (une frise ou un parcours n'étale jamais une photo pleine largeur par étape). */ [data-bh-home] [data-bloc]:not([data-bloc="hero"]) img, [data-usine-bloc]:not([data-usine-bloc="hero"]) img { max-height: 480px; object-fit: cover; } /* sauf l'avant / après : ses deux vues couvrent tout le cadre (blog-mutuelle-sante 27/09, vide de 245 px dessous) */ [data-usine-bloc] [data-avant-apres] img, [data-bh-home] [data-bloc] [data-avant-apres] img { max-height: none; } /* S5 texte courant d'article : 16 px au moins, interligne 1,5 au moins. */ body { font-size: max(16px, 1em); } .ka-corps p, .ka-corps li { font-size: max(16px, 1em); line-height: 1.65; } /* S6 aucun média plus large que son conteneur (débordement horizontal). */ img, video, iframe { max-width: 100%; } pre { overflow-x: auto; } /* S7 quiz : une affirmation à la fois quand le kit_vivant est chargé (sans JS, tout reste lisible). */ [data-quiz] [data-question][hidden] { display: none !important; } @media (max-width: 767px) { header [data-usine="logo"] img, header img[data-usine="logo"] { height: 38px !important; } /* S8 cibles tactiles : 44 px au moins en mobile. */ header a, header button, .kv-bouton, [data-quiz] button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* S9 le menu SUIT le logo (Cedia 27/09, actu-pme.com : logo isolé à gauche, menu collé à droite). Dans la rangée du header qui porte le logo, le premier groupe de liens (≥ 3 liens) se colle au logo ; ce qui suit (bouton de contact) part à droite. Seuil : écart logo → menu ≤ 96 px à 1440 (socle:header-groupe). Un thème qui place son menu autrement (position absolue) se corrige dans sites//socle-site.css. */ @media (min-width: 1024px) { header :is(div, nav):has(> [data-usine="logo"], > * > [data-usine="logo"]) > :not(:has([data-usine="logo"])):is(:has(li ~ li ~ li), :has(a ~ a ~ a)) { margin-inline-start: clamp(24px, 2.5vw, 40px) !important; margin-inline-end: auto !important; flex-grow: 0 !important; justify-content: flex-start !important; } } /* usine:socle-site : maison-bien-etre-com */ /* socle:logo-marge-mobile (27/09) : le .container du thème astro-yi (Tailwind v4) n'a pas de padding */ @media (max-width: 767px) { header .bh-header-bar.container { padding-inline: 1rem; } }