/* =========================================================================== oc_typography.css --------------------------------------------------------------------------- Charte typographique unique des pages annexes du logiciel : guide, glossary, videos, faq, tutorials. --------------------------------------------------------------------------- MODE D'EMPLOI -- DEUX CONDITIONS OBLIGATOIRES 1. Classe "oc-typo" sur le des CINQ pages : (guide, glossary, faq) 2. Fichier charge EN DERNIER dans le , apres toutes les autres feuilles. Ce fichier est la SEULE source des tailles de police sur ces cinq pages. Les regles de taille ont ete retirees de faq_mobile.css, videos_mobile.css et tutorials_mobile.css. Ne pas les y reintroduire : leurs selecteurs commencent par #content, donc un identifiant, et l'emportent en specificite quel que soit l'ordre de chargement. Seule exception subsistante : .card-text dans tutorials_mobile.css, le titre des vignettes de la grille de tutoriels, propre a cette page. --------------------------------------------------------------------------- ECHELLE -- UNE SEULE TAILLE PAR PALIER POUR TOUT LE TEXTE >= 992px 768-991px < 768px h1 de page 38px 30px 24px 700 #505050 h2 de section 30px 24px 20px 700 #505050 h3 repliable 27.2px 22px 18px 600 #033e75 TEXTE 24px 18px 15px 400 lien de liste 24px 18px 16px 500 Le poste "TEXTE" couvre tout : paragraphes, listes, spans, texte nu dans un .collapse, blocs d'introduction, descriptifs de section et de video. Titres NON cliquables (h1, h2) : gris #505050. Titres cliquables (h3 des paragraphes repliables) : bleu #033e75. --------------------------------------------------------------------------- STRUCTURES COUVERTES Les cinq pages n'ont pas la meme arborescence. Les selecteurs du poste TEXTE couvrent les trois cas : videos, faq .bloc_index > .alert > .collapse -> sur faq, le texte est DIRECTEMENT dans le .collapse, sans balise

. D'ou la presence de .collapse dans la liste des selecteurs. guide .bloc_index > .col-12 > .bloc_tuto tutorials .bloc_index > .row > .bloc_tuto --------------------------------------------------------------------------- ESPACEMENTS VERTICAUX entre deux paragraphes repliables 30px / 20px sous 768px reference : tutorials (.bloc_tuto de tutorials.css) sous le titre h1 30px / 20px sous 768px --------------------------------------------------------------------------- NOTE SUR LES UNITES 1rem = 16px, et non 12px. Le rem se calcule sur l'element racine . Le "font-size: 12px" de default.css porte sur et n'affecte que les tailles heritees, pas les rem. Toutes les valeurs ci-dessous sont en px. La police est traitee directement dans default.css (bloc de reset, ligne 17), donc plus ici. =========================================================================== */ /* =========================================================================== 1. REGLES VALABLES A TOUTES LES LARGEURS =========================================================================== */ /* --- 1.1 Debordement horizontal -------------------------------------------- default.css impose "min-width: 1450px" a #content : toute fenetre plus etroite fait deborder la page. --------------------------------------------------------------------------- */ body.oc-typo #content { min-width: 0 !important; } /* --- 1.2 Couleur, poids et alignement des titres --------------------------- Poses hors media query : ces proprietes ne dependent pas de la largeur. C'est ce qui manquait aux feuilles mobiles de guide et tutorials, ou les h3 restaient gris et maigres sous 992px. text-align:left corrige les titres justifies : .bloc_index (default.css) et .bloc_tuto (tutorials.css) portent tous deux "text-align: justify", dont les h3 heritent. !important est indispensable : les h3 de videos.php et faq.php portent style="...font-weight: normal; color:#033e75" EN DUR dans le HTML. font-variant:normal annule le small-caps de tutorials.css (.bloc_tuto h3). --------------------------------------------------------------------------- */ body.oc-typo #container h1, body.oc-typo .bloc_index h1 { font-weight: 700 !important; color: #505050 !important; text-align: center !important; margin-bottom: 30px !important; } /* Le .bloc_index qui ne contient que le titre ajoute sa propre marge basse sur guide et tutorials, ou les blocs sont ses freres et non ceux du h1. Tout l'espacement est porte par le h1 lui-meme. */ body.oc-typo #content .bloc_index { margin-bottom: 0 !important; padding-bottom: 0 !important; } body.oc-typo #content .guideHandy { margin-top: 0 !important; padding-top: 0 !important; } body.oc-typo .bloc_index h2, body.oc-typo .divParLettre h2 { font-weight: 700 !important; color: #505050 !important; text-align: left !important; } body.oc-typo .div-collapse h3, body.oc-typo .bloc_tuto h3 { font-weight: 600 !important; color: #033e75 !important; font-variant: normal !important; text-transform: none !important; text-align: left !important; margin: 0 0 4px 0 !important; } /* --- 1.3 Couleur et graisse des descriptifs -------------------------------- Maintenant qu'ils ont la meme taille que le texte courant, c'est la couleur et la graisse qui les distinguent du lien qu'ils accompagnent. --------------------------------------------------------------------------- */ body.oc-typo span.oc-video-desc { display: block; color: #666 !important; font-weight: 400 !important; text-transform: none !important; } body.oc-typo p.oc-videos-sectionDesc { font-style: italic; color: #555 !important; font-weight: 400 !important; } /* --- 1.4 Espacement entre paragraphes repliables --------------------------- REFERENCE : la page tutorials, dont tutorials.css impose ".bloc_tuto { margin-bottom: 30px }". Les trois structures sont alignees sur cette valeur : videos, faq .bloc_index > .alert -> 16px Bootstrap => 30px guide .col-12 > .bloc_tuto -> 30px => 30px tutorials .row > .bloc_tuto -> 30px => 30px Les conteneurs intermediaires (.col-12, .row) ajoutent leurs propres marges et gouttieres : ils sont neutralises, et la marge unique est portee par le bloc lui-meme. --------------------------------------------------------------------------- */ body.oc-typo .bloc_tuto, body.oc-typo .bloc_index .alert, body.oc-typo .divParLettre { margin-top: 0 !important; margin-bottom: 30px !important; padding: 0.75rem 1.25rem !important; } body.oc-typo .bloc_index > .col-12, body.oc-typo .bloc_index > .row, body.oc-typo .guideHandy > .col-12, body.oc-typo .guideHandy > .row { margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Un .alert imbrique dans un autre cumulerait les paddings. */ body.oc-typo .alert .alert { padding: 0 !important; margin-bottom: 0 !important; } body.oc-typo .div-collapse { cursor: pointer; padding: 4px 0; } body.oc-typo #content .div-collapse hr { margin: 6px 0 0 0 !important; } /* =========================================================================== 2. GRANDS ECRANS (>= 992px) =========================================================================== */ @media (min-width: 992px) { body.oc-typo #container h1, body.oc-typo .bloc_index h1 { font-size: 38px !important; line-height: 1.2 !important; margin-top: 10px !important; } body.oc-typo .bloc_index h2, body.oc-typo .divParLettre h2 { font-size: 30px !important; line-height: 1.3 !important; } body.oc-typo #content .div-collapse h3, body.oc-typo #content .bloc_tuto h3 { font-size: 27.2px !important; line-height: 1.4 !important; } /* TEXTE : une seule regle pour tous les postes et toutes les structures. Le prefixe #content est INDISPENSABLE : les feuilles mobiles et default.css utilisent des selecteurs a identifiant, qui l'emportent sur les classes seules. */ body.oc-typo #content .bloc_index p, body.oc-typo #content .bloc_index li, body.oc-typo #content .bloc_index span, body.oc-typo #content .bloc_index .collapse, body.oc-typo #content .bloc_tuto p, body.oc-typo #content .bloc_tuto li, body.oc-typo #content .bloc_tuto span, body.oc-typo #content .bloc_tuto .collapse, body.oc-typo #content .oc-videos-intro p, body.oc-typo #content .oc-tutorials-intro p, body.oc-typo #content .oc-glossary-intro p, body.oc-typo #content p.oc-videos-sectionDesc, body.oc-typo #content span.oc-video-desc { font-size: 24px !important; line-height: 1.6 !important; } body.oc-typo #content .bloc_index li a, body.oc-typo #content .bloc_index li.sitemap1 a.niveau1 { font-size: 24px !important; font-weight: 500 !important; text-transform: none !important; } } /* =========================================================================== 3. ECRANS MOYENS (768px - 991px) =========================================================================== */ @media (min-width: 768px) and (max-width: 991px) { body.oc-typo #container h1, body.oc-typo .bloc_index h1 { font-size: 30px !important; line-height: 1.25 !important; margin-top: 10px !important; } body.oc-typo .bloc_index h2, body.oc-typo .divParLettre h2 { font-size: 24px !important; line-height: 1.3 !important; } body.oc-typo #content .div-collapse h3, body.oc-typo #content .bloc_tuto h3 { font-size: 22px !important; line-height: 1.35 !important; } body.oc-typo #content .bloc_index p, body.oc-typo #content .bloc_index li, body.oc-typo #content .bloc_index span, body.oc-typo #content .bloc_index .collapse, body.oc-typo #content .bloc_tuto p, body.oc-typo #content .bloc_tuto li, body.oc-typo #content .bloc_tuto span, body.oc-typo #content .bloc_tuto .collapse, body.oc-typo #content .oc-videos-intro p, body.oc-typo #content .oc-tutorials-intro p, body.oc-typo #content .oc-glossary-intro p, body.oc-typo #content p.oc-videos-sectionDesc, body.oc-typo #content span.oc-video-desc { font-size: 18px !important; line-height: 1.6 !important; } body.oc-typo #content .bloc_index li a, body.oc-typo #content .bloc_index li.sitemap1 a.niveau1 { font-size: 18px !important; font-weight: 500 !important; text-transform: none !important; } } /* =========================================================================== 4. PETITS ECRANS (< 768px) =========================================================================== */ @media (max-width: 767px) { body.oc-typo #container h1, body.oc-typo .bloc_index h1 { font-size: 24px !important; line-height: 1.25 !important; margin-top: 10px !important; margin-bottom: 20px !important; } body.oc-typo .bloc_index h2, body.oc-typo .divParLettre h2 { font-size: 20px !important; line-height: 1.3 !important; } body.oc-typo #content .div-collapse h3, body.oc-typo #content .bloc_tuto h3 { font-size: 18px !important; line-height: 1.3 !important; } body.oc-typo #content .bloc_index p, body.oc-typo #content .bloc_index li, body.oc-typo #content .bloc_index span, body.oc-typo #content .bloc_index .collapse, body.oc-typo #content .bloc_tuto p, body.oc-typo #content .bloc_tuto li, body.oc-typo #content .bloc_tuto span, body.oc-typo #content .bloc_tuto .collapse, body.oc-typo #content .oc-videos-intro p, body.oc-typo #content .oc-tutorials-intro p, body.oc-typo #content .oc-glossary-intro p, body.oc-typo #content p.oc-videos-sectionDesc, body.oc-typo #content span.oc-video-desc { font-size: 15px !important; line-height: 1.6 !important; } body.oc-typo #content .bloc_index li a, body.oc-typo #content .bloc_index li.sitemap1 a.niveau1 { font-size: 16px !important; font-weight: 500 !important; text-transform: none !important; } /* Paddings lateraux reduits. Marge verticale reduite mais conservee proportionnellement a celle des grands ecrans (30px -> 20px). */ body.oc-typo .bloc_tuto, body.oc-typo .bloc_index .alert, body.oc-typo .divParLettre { padding: 8px 10px !important; margin-bottom: 20px !important; } } /* =========================================================================== 5. ALIGNEMENT DES BLOCS D'INTRODUCTION --------------------------------------------------------------------------- Justifie a partir de 768px, aligne a gauche en dessous : sur des lignes courtes, la justification produit des espacements tres irreguliers. =========================================================================== */ @media (min-width: 768px) { body.oc-typo #content .oc-videos-intro p, body.oc-typo #content .oc-tutorials-intro p, body.oc-typo #content .oc-glossary-intro p { text-align: justify !important; } } @media (max-width: 767px) { body.oc-typo #content .oc-videos-intro p, body.oc-typo #content .oc-tutorials-intro p, body.oc-typo #content .oc-glossary-intro p { text-align: left !important; } }