, d'ou son fonctionnement. On rattrape par la structure : le

) Open Sans -> 400 (h4) et 600 (h5, h6) Un @font-face non utilise n est pas telecharge par le navigateur, mais autant ne declarer que le necessaire. */ @font-face { font-family:"DM Sans"; src:url("../fonts/dm-sans/DMSans-Regular.woff2") format("woff2"),url("../fonts/dm-sans/DMSans-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"DM Sans"; src:url("../fonts/dm-sans/DMSans-Medium.woff2") format("woff2"),url("../fonts/dm-sans/DMSans-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"DM Sans"; src:url("../fonts/dm-sans/DMSans-SemiBold.woff2") format("woff2"),url("../fonts/dm-sans/DMSans-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:"DM Sans"; src:url("../fonts/dm-sans/DMSans-Bold.woff2") format("woff2"),url("../fonts/dm-sans/DMSans-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"DM Sans"; src:url("../fonts/dm-sans/DMSans-Italic.woff2") format("woff2"),url("../fonts/dm-sans/DMSans-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; } @font-face { font-family:"Open Sans"; src:url("../fonts/open-sans/OpenSans-Regular.woff2") format("woff2"),url("../fonts/open-sans/OpenSans-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Open Sans"; src:url("../fonts/open-sans/OpenSans-SemiBold.woff2") format("woff2"),url("../fonts/open-sans/OpenSans-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; } /* h1 et h2 : Source Serif 4 500 (Helix h1_font / h2_font). */ h1, .h1, h2, .h2 { font-family: "Source Serif 4", "Iowan Old Style", Georgia, serif; font-weight: 500; } /* h3 : DM Sans 400, noir (Helix h3_font). */ h3, .h3 { font-family: "DM Sans", sans-serif; font-weight: 400; color: #000; } /* h4, h5, h6 : Open Sans, comme Helix. h5 et h6 en 600. */ h4, .h4, h5, .h5, h6, .h6 { font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; } /* 400 explicite : Open Sans n a pas de face 500, et h4 heriterait sinon du --cassiopeia-font-weight-headings a 500, que le navigateur devrait synthetiser. */ h4, .h4 { font-weight: 400; } h5, .h5, h6, .h6 { font-weight: 600; } /* Corps de page : DM Sans 400 / 1.1rem (Helix body_font). Interligne des paragraphes : Helix (custom_font, selecteur p) et donc la production sont a 1.8. Choix assume de Roland le 2026-08-17 : 1.5 sur le nouveau template, aligne sur le line-height du , le 1.8 etant juge trop aere sur mobile. C'est donc une DIVERGENCE VOLONTAIRE d'avec la prod, a ne pas "corriger" en reprenant la valeur Helix. .hero-desc garde son 1.8 propre (custom.scss). */ body { font-family: "DM Sans", sans-serif; font-size: 1.1rem; font-weight: 400; } p { line-height: 1.5; } /* Navigation : DM Sans 0.88rem, interlettrage 1px (Helix navigation_font). */ .container-header .mod-menu.metismenu > li > a, .container-header .mod-menu.metismenu > li > button { font-family: "DM Sans", sans-serif; font-size: 0.88rem; letter-spacing: 1px; } /* ================================================================== Bas de page — portage du module SP Page Builder id=151 « Bas des pages » (entree singleceidx_sppagebuilder id=12) vers le module personnalise 230. Valeurs reprises une a une des reglages de l addon : section : id=section-bottom, padding 20px 0 0 0, background var(--bleu-bg-degrade), colonnes centrees colonnes : 33.333333% / 66.666667%, 100% a partir de sm logo : padding-bottom 20px nav : aligne a gauche, 13px, graisse 300, majuscules, couleur var(--bleu-pale) (custom CSS de l addon, qui battait le global_link_color blanc), survol #fefefe social : titre 13px graisse 500 blanc ; bouton Facebook, icone #fff sur #4378f8, rayon 4px, survol #2055d4 ================================================================== */ /* Bouton « remonter en haut » (Cassiopeia, #back-top) : masque sous 480px. Sur les tres petits ecrans il empietait sur le bas de page. Seuil demande par Roland le 2026-08-17 ; il sort volontairement de la grille Bootstrap utilisee ailleurs dans ce fichier, ne pas le « realigner » sur 576px. Le masquage pendant l'ouverture du panneau lateral est gere separement, plus haut (body:has(.offcanvas.show)). */ @media (max-width: 479.98px) { .back-to-top-link { display: none; } } .cc-bottom { background: var(--bleu-bg-degrade); padding: 20px 0 0; color: #fff; } .cc-bottom__inner { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1rem; display: flex; flex-wrap: wrap; align-items: center; } .cc-bottom__logo { flex: 0 0 33.333333%; max-width: 33.333333%; padding-bottom: 20px; } .cc-bottom__logo img { height: auto; max-width: 100%; } .cc-bottom__aside { flex: 0 0 66.666667%; max-width: 66.666667%; } /* Les 3 entrées restent côte à côte en 3 colonnes et cassent leur texte à l'intérieur de leur colonne quand la place manque. Avec « flex-wrap: wrap » c'était la LISTE qui se repliait : 2 entrées sur la première ligne, la 3e seule en dessous. « min-width: 0 » est indispensable — sans lui un élément flex refuse de descendre sous la largeur de son mot le plus long et déborderait au lieu de se couper. */ .cc-bottom__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 1.5rem; } /* Les entrees gardent leur largeur naturelle et se suivent a 1.5rem d'ecart : c'est le rendu de production. Le partage en trois colonnes egales ne vaut que pour les petites largeurs, ci-dessous — applique partout, il etalait les trois liens sur toute la largeur du bas de page. */ .cc-bottom__nav li { flex: 0 0 auto; min-width: 0; } /* Sous 768px les trois entrees ne tiennent plus cote a cote a leur largeur naturelle. Elles se partagent alors la ligne en trois colonnes egales et cassent leur texte a l'interieur de leur colonne, plutot que de laisser la liste se replier avec un lien orphelin sur une seconde ligne. « min-width: 0 » est indispensable : sans lui un element flex refuse de descendre sous la largeur de son mot le plus long et deborderait. */ @media (max-width: 767.98px) { .cc-bottom__nav li { flex: 1 1 0; } } @media (max-width: 575.98px) { .cc-bottom__nav { gap: 1rem; } } .cc-bottom__nav a { color: var(--bleu-pale); font-size: 13px; font-weight: 300; text-transform: uppercase; text-decoration: none; } .cc-bottom__nav a:hover, .cc-bottom__nav a:focus { color: #fefefe; } .cc-bottom__social { margin-top: 1rem; } .cc-bottom__social-title { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: .5rem; } .cc-bottom__social-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; background: #4378f8; color: #fff; } .cc-bottom__social-btn:hover, .cc-bottom__social-btn:focus { background: #2055d4; color: #fff; } /* Bascule en pleine largeur au point de rupture sm, comme les colonnes SPPB. */ @media (max-width: 767.98px) { .cc-bottom__inner { flex-wrap: wrap; } .cc-bottom__logo, .cc-bottom__aside { flex: 0 0 100%; max-width: 100%; } } /* Le bas de page couvre toute la largeur de l ecran. Cassiopeia range bottom-a dans la zone centrale de .site-grid, et .grid-child plafonne a 1320px avec margin-inline auto : on repasse sur les lignes nommees full-start/full-end, on leve le plafond et on annule le flex du grid-child. */ .site-grid > .container-bottom-a { grid-column: full-start / full-end; display: block; max-width: none; margin-inline: 0; padding-inline: 0; } /* Copyright — sous le logo, sur toute la largeur du bloc. Format repris de Helix : .sp-copyright etait en font-size 10px (custom.scss ligne 2267). Helix l affichait sur son bandeau clair footer1 en #034680 ; ici le bloc est sur le degrade sombre, donc la couleur des liens de navigation est reprise pour rester lisible. */ .cc-bottom__copyright { flex: 0 0 100%; max-width: 100%; font-size: 10px; color: var(--bleu-pale); padding: 10px 0 12px; } /* ================================================================== Largeur utile — reprise du comportement Helix. Helix tournait en « layout-fluid » (container_max_width vide, classe layout-fluid sur le body) : le contenu prenait toute la largeur de la fenetre moins une marge laterale, sans plafond. Cassiopeia plafonne a deux endroits : .grid-child a 1320px, et la zone principale de .site-grid a 4 x 19.875rem = 79.5rem. Une seule valeur a ajuster : --cc-marge-laterale. Les zones full-width (banniere, bas de page) restent en full-start/full-end et ne sont donc pas affectees par la marge. ================================================================== */ :root { --cc-marge-laterale: 4.75%; } /* Le reglage « Mise en page » du template pose wrapper-fluid, et Cassiopeia applique alors body.wrapper-fluid .site-grid avec repeat(4, minmax(0,25%)), soit 100% de largeur sans aucune marge. Cette regle a deux classes battait la notre : on la reprend explicitement pour reintroduire la marge laterale. */ body.wrapper-fluid .site-grid, .site-grid { grid-gap: 0 2em; grid-template-columns: [full-start] minmax(0, var(--cc-marge-laterale)) [main-start] repeat(4, minmax(0, 1fr)) [main-end] minmax(0, var(--cc-marge-laterale)) [full-end]; } /* ------------------------------------------------------------------ Au-dessus de 992px, la marge n'est plus un pourcentage mais le conteneur a PALIERS de Bootstrap, celui que Helix utilise en production : max-width 960px des 992, 1140px des 1200, 1320px des 1400, plus 15px de padding de chaque cote. Verifie sur jo.test (Helix), page d'accueil, sur le titre « Que contient Confcardio ? » : 24>954 a 992, 78>1188 a 1280, 68>1358 a 1440. La formule redonne exactement ces valeurs : la marge vaut la moitie de ce qui reste une fois le palier retire, plus les 15px de padding. Le « min() » gere le cas ou la fenetre est plus etroite que le palier — la marge tombe alors aux 15px seuls, comme Bootstrap. Sous 992px : rien ne change, le 4.75% reste (reglage cale pour le mobile). ------------------------------------------------------------------ */ @media (min-width: 992px) { body.wrapper-fluid .site-grid, .site-grid { --cc-marge-laterale: calc((100% - min(100%, 960px) + 30px) / 2); /* Les gouttieres de 2em s'ajoutaient a la piste de marge : le contenu commencait a 59px au lieu de 23.5px et perdait 70px de large (860 mesures contre 930 sous Helix). Elles ne servent a rien ici — le composant occupe les quatre colonnes, ces gouttieres sont interieures a lui — mais les DEUX gouttieres exterieures, elles, decalaient tout. On les supprime : la marge est desormais portee par la seule piste de marge, ce que la formule ci-dessus calcule. */ column-gap: 0; } } @media (min-width: 1200px) { body.wrapper-fluid .site-grid, .site-grid { --cc-marge-laterale: calc((100% - min(100%, 1140px) + 30px) / 2); } } @media (min-width: 1400px) { body.wrapper-fluid .site-grid, .site-grid { --cc-marge-laterale: calc((100% - min(100%, 1320px) + 30px) / 2); } } /* L'exception qui donnait la marge laterale MINIMALE a « Mes cours », « Annales » et « ECG commentes » a ete RETIREE le 2026-08-26, a la demande de Roland : ces trois listes rendaient plus large que toutes les autres pages (contenu 1175 contre 1110 a 1280 de large), et l'ecart grandissait avec l'ecran — bord gauche a 45 px contre 308 px a 1920. Elles suivent desormais les paliers communs, comme n'importe quel article. Les pages a colonne laterale droite ne sont PAS concernees : leur grille est redefinie entierement plus bas et ne passe pas par --cc-marge-laterale. */ /* Fond general de la page. En production il vient de la feuille GENEREE par Helix (/cache/com_templates/shaper_helixultimate/.css), section « default.css » : « body,.sp-preloader{background-color:#f2f8ff} » — global, sans media query, d'ou un fond qui tient a toutes les largeurs. Piege a ne pas refaire : custom.scss porte aussi des regles de fond sur « #sp-main-body » (var(--background-defaut) au-dessus de 768px, #fff en dessous de 480px). Elles ne sont PAS la source du fond de production, et cet identifiant est de toute facon un conteneur HELIX qui n'existe pas sous Cassiopeia : ces regles sont mortes ici. Se caler dessus donnait un fond limite a 768px et une page blanche en dessous. Cassiopeia pose « html { background: #fff } » dans template.min.css : le fond du body ne se propage donc pas au canevas, mais son bloc couvre la page entiere (min-height 100vh herite du coeur), le rendu est identique. */ body { background-color: var(--background-defaut); } /* ------------------------------------------------------------------ Pages a colonne laterale droite (cours, annales) — portage du 8/4 Helix. Mesures relevees sur jo.test (Helix), page /mes-cours/syncope-et-ecg : a 1280 (utile 1265) : #sp-component col-lg-8 = 843px, #sp-right col-lg-4 = 422px, contenu visuel 15>828, panneau 858>1250 ; a 992 (utile 977) : 651px et 326px, panneau visuel 666>962. Soit dans les deux cas : deux tiers / un tiers, 15px de marge exterieure, 30px de gouttiere, et un conteneur plafonne a 1320px au-dela. La grille du template posait ici 4 colonnes egales — le contenu en occupait 3 et le panneau 1, d'ou un panneau a 19% au lieu de 33% — et 4.75% de marge laterale, soit 95px au lieu de 15px. Le « min(100%, 1320px) » reproduit les deux regimes d'un coup : sous 1320 le contenu occupe toute la largeur utile et les pistes de marge tombent a 0 ; au-dela il se fige a 1320 et le surplus part dans les marges, comme le « max-width: 1320px » du conteneur Helix. Le bas de page reste pleine largeur : il s'appuie sur full-start/full-end, inchanges. Le :not() ecarte les rares pages a DEUX colonnes laterales, dont les zones nommees ci-dessous ne prevoient pas le cas. ------------------------------------------------------------------ */ @media (min-width: 992px) { body:has(.container-sidebar-right):not(:has(.container-sidebar-left)) .site-grid { column-gap: 0; grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, calc(min(100%, 1320px) * 2 / 3)) minmax(0, calc(min(100%, 1320px) / 3)) [main-end] minmax(0, 1fr) [full-end]; grid-template-areas: ". banner banner ." ". top-a top-a ." ". top-b top-b ." ". comp side-r ." ". bot-a bot-a ." ". bot-b bot-b ."; } /* Les 15px de padding des colonnes Bootstrap chez Helix : ils forment la marge exterieure de 15px ET, additionnes, la gouttiere de 30px entre les deux colonnes. C'est pour cela que column-gap est mis a 0 ci-dessus : un gap s'ajouterait aussi contre les pistes de marge. */ body:has(.container-sidebar-right) .container-component, body:has(.container-sidebar-right) .container-sidebar-right { padding-inline: 15px; } } /* Colonne laterale droite (module 229 « ConfCardio.com Sidebar », pages de cours). Cassiopeia enveloppe chaque module de cette position dans un « .card » a fond blanc et bordure grise. Ce cadre exterieur n'existe pas en production : il doublait la carte du module (.cc-sidebar, qui porte deja son propre fond blanc et sa bordure) et decoupait un rectangle blanc dans le fond bleu de la page. On l'efface — fond transparent, donc le fond du body traverse — sans toucher a .cc-sidebar. */ .container-sidebar-right > .card { background: transparent; border: 0; } /* Le .card-body de Cassiopeia ajoute 16px de chaque cote, la ou le .sp-module de Helix n'avait aucun padding horizontal (« padding: 20px 0 »). Mesure a 992px avant correction : panneau visuel 682>946 chez nous contre 666>962 sous Helix, soit 32px perdus. On remet le padding vertical seul. */ .container-sidebar-right > .card > .card-body { padding-inline: 0; } .grid-child, .container-header .grid-child, .footer .grid-child { max-width: none; } /* Gouttiere laterale de la page a partir de 576px, hors page d'accueil. Une seule .site-grid existe par page (verifie sur accueil, FAQ, connexion et mes-cours) : enfant direct de , elle contient .container-component et .container-bottom-a. Pas besoin de la qualifier. L'accueil est exclue par « cc-hp-v2 », la classe de page que portent les elements de menu affichant le gabarit accueil — c'est deja le marqueur utilise par home.css et par la regle de margin-top plus haut dans ce fichier. NOTE : entre 576px et 991.98px ces 30px s'AJOUTENT aux 15px que le bloc « max-width: 991.98px » ci-dessous pose sur .container-component et sur la colonne laterale droite, soit 45px de retrait total sur cette plage. */ @media (min-width: 576px) { body:not(.cc-hp-v2) .site-grid { padding-left: 1.875rem; padding-right: 1.875rem; } } /* Sur telephone, ces deux valeurs se cumulent et etranglent le contenu : la colonne de marge (4.75% = 19px a 402px) PLUS la gouttiere de 2em (35px) qui separe cette colonne de la zone principale, soit 54px de chaque cote — le contenu tombait a 293px sur 402. Mesure sur la meme page sous Helix : la zone de contenu occupait toute la largeur (402px) et la gouttiere de 15px venait du padding de .sppb-row-column. On remet donc la grille a plat et on laisse SP Page Builder fournir sa marge, sinon les deux s'ajoutent et le contenu reste 30px trop etroit. */ @media (max-width: 991.98px) { body.wrapper-fluid .site-grid, .site-grid { --cc-marge-laterale: 0%; grid-gap: 0; } /* Les pages qui ne passent pas par SP Page Builder (articles, composants) n'ont aucune marge propre : on leur donne les memes 15px. */ body:not(.com_sppagebuilder) .container-component { padding-inline: 15px; } /* Meme traitement pour la colonne laterale droite (cours, annales, ecg). Sous 992px elle quitte la grille et s'empile sous l'article, mais les 15px du bloc « min-width: 992px » plus haut ne s'appliquent plus et --cc-marge-laterale vient de passer a 0% : le module se retrouvait colle aux deux bords, alors que l'article au-dessus gardait ses 15px. Pas de « :not(.com_sppagebuilder) » ici : le module occupe une position du template, hors de la mise en page SPPB, il n'herite donc d'aucune marge de SP Page Builder quelle que soit la page. */ .container-sidebar-right { padding-inline: 15px; } } /* h4 : 20px au lieu du 1.5rem (24px) de Cassiopeia. La regle d origine est dans media/templates/site/cassiopeia/css/template.min.css, fichier du template core auquel on ne touche pas — on la surcharge avec le meme point de rupture. */ @media (width >= 1200px) { h4, .h4 { font-size: 20px; } }