/* 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; } /* sauf la carte « image seule » d'une mosaïque : l'image EST le cadre. Le kit étire déjà son lien (`flex: 1 1 0%`) et lui demande `height: 100%` ; le plafond la laissait à 480 px et la légende tombait 405 px plus bas, trou mesuré DANS la carte vedette (decorateur-maison.com 28/09, portier home:mosaique). Même exclusion dans verif_socle.py, point images-hors-hero. */ [data-usine-bloc] [class*="cs-image-seule"] img, [data-bh-home] [data-bloc] [class*="cs-image-seule"] 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; } } /* S9 boîtes de tête des articles (boites_article.py, Cedia 29/09) : définition dictionnaire, tuto 50/50 (étapes | ce qu'il faut, cases à cocher, accordéon), avis (note en étoiles + positifs verts | négatifs rouges). Même langage que le bloc « Votre avis compte » du kit : fond doux, bord fin, sur-titre capitales. */ .ub { box-sizing: border-box; margin: 0 0 1.5rem; padding: 1.1rem 1.35rem; background: var(--c-doux, #f4f4f5); border: 1px solid var(--c-bord, #e4e4e7); border-radius: var(--r-carte, 10px); color: var(--c-sur-doux, #18181b); max-width: none !important; } .ub p { margin: 0; max-width: none !important; } .ub-sur { display: block; margin: 0 0 .25rem !important; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-primaire-texte, var(--c-primaire, #3f3f46)); } .ub-t { display: block; font-family: var(--f-titre, inherit); font-size: 1.12rem; font-weight: var(--f-graisse-titre, 700); line-height: 1.3; color: var(--c-sur-doux, #18181b); } /* définition */ .ub-def { border-left: 4px solid var(--c-primaire, #3f3f46); } .ub-terme { font-family: var(--f-titre, inherit); font-size: 1.35rem; line-height: 1.25; margin-bottom: .35rem !important; } .ub-terme b { font-weight: 700; } .ub-nature { margin-left: .4rem; font-family: inherit; font-size: .85rem; font-style: italic; opacity: .7; } .ub-texte { font-size: 1.05em; line-height: 1.6; } .ub-ex { margin-top: .55rem !important; font-size: .93em; font-style: italic; opacity: .85; } .ub-ex span { font-style: normal; font-weight: 700; } /* deux boîtes côte à côte, empilées en mobile */ .ub-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1.5rem; align-items: start; } .ub-duo > .ub { margin: 0; } @media (max-width: 720px) { .ub-duo { grid-template-columns: 1fr; } } /* accordéon */ .ub-box > summary { list-style: none; cursor: pointer; position: relative; padding-right: 1.8rem; } .ub-box > summary::-webkit-details-marker { display: none; } .ub-box > summary::after { content: ""; position: absolute; right: .2rem; top: 50%; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .2s; opacity: .6; } .ub-box:not([open]) > summary::after { transform: translateY(-30%) rotate(-45deg); } .ub-box[open] > summary { margin-bottom: .7rem; } /* listes à cocher */ :is(.ka-corps, body) .ub .ub-check { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: .15rem; } :is(.ka-corps, body) .ub .ub-check li { margin: 0 !important; padding: 0 !important; max-width: none !important; } .ub-check li::before, .ub-check li::marker { content: none !important; display: none !important; } .ub-check label { display: flex; gap: .6rem; align-items: flex-start; padding: .38rem .45rem; border-radius: 6px; cursor: pointer; line-height: 1.45; font-size: .97em; } .ub-check label:hover { background: rgba(0, 0, 0, .04); } .ub-check input { flex: none; width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; accent-color: var(--c-primaire, #3f3f46); cursor: pointer; } .ub-check input:checked + span { text-decoration: line-through; opacity: .5; } .ub-check b { font-weight: 700; } /* avis */ .ub-avis { margin: 0 0 1.5rem; } .ub-note { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; align-items: center; } .ub-note-d { text-align: right; } .ub-verdict { grid-column: 1 / -1; padding-top: .7rem; margin-top: .3rem !important; border-top: 1px dashed var(--c-bord, #e4e4e7); line-height: 1.55; } .ub-etoiles { position: relative; display: inline-block; line-height: 0; } .ub-etoiles svg { width: 24px; height: 24px; display: inline-block; } .ub-etoiles-fond svg { fill: var(--c-bord, #d4d4d8); } .ub-etoiles-plein { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; } .ub-etoiles-plein svg { fill: #f5a623; } .ub-note-v { font-size: .9rem; opacity: .8; margin-top: .2rem !important; } .ub-note-v b { font-size: 1.3rem; opacity: 1; } .ub-plus { background: #ecf8f0; border-color: #b7e4c7; } .ub-moins { background: #fdf0ef; border-color: #f3c3be; } .ub-plus .ub-t, .ub-moins .ub-t { font-size: 1rem; margin-bottom: .55rem; } :is(.ka-corps, body) .ub .ub-pm { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: .45rem; } :is(.ka-corps, body) .ub .ub-pm li { position: relative; margin: 0 !important; padding: 0 0 0 1.7rem !important; line-height: 1.45; max-width: none !important; } .ub-pm li::marker { content: none; } .ub-pm li::before { position: absolute; left: 0; top: .05rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: #fff; } .ub-plus .ub-pm li::before { content: "✓"; background: #1f8a4c; } .ub-moins .ub-pm li::before { content: "✕"; background: #c0392b; }