/* ========================================================= TW MICRONICS ACADEMY — système de design de la plateforme. ⚠️ RUPTURE ASSUMÉE AVEC `twm-editorial.css`. La couche éditoriale (fond crème, grain, titres Fraunces, filets d'un pixel) a été conçue pour une VITRINE commerciale ; elle vit désormais sur le site Maya. Une plateforme de formation n'a pas les mêmes besoins : on y compare des catalogues, on y lit des fiches, on y cherche. Cela demande du blanc, de la hiérarchie, des cartes qui se détachent et des repères de couleur — pas une mise en page de magazine. Cette feuille est donc AUTONOME : elle redéfinit ses propres jetons, ne dépend d'aucune variable de la couche éditoriale et neutralise ce dont elle hérite. ========================================================= */ /* --------------------------------------------------------- 1. JETONS --------------------------------------------------------- */ :root { --a-w: #ffffff; --a-50: #f8fafc; --a-100: #f1f5f9; --a-200: #e9eef5; --a-border: #e2e8f0; --a-ink: #0f172a; --a-ink-2: #334155; --a-muted: #64748b; --a-faint: #94a3b8; /* Bleu du logo TW Micronics. */ --a-brand: #1850a0; --a-brand-700: #123d7a; --a-brand-600: #1a5cb8; --a-brand-100: #dbe7f7; --a-brand-50: #eff5fd; --a-r-sm: 8px; --a-r: 14px; --a-r-lg: 22px; --a-r-pill: 999px; --a-sh-1: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .04); --a-sh-2: 0 4px 12px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .07); --a-sh-3: 0 12px 24px rgba(15, 23, 42, .08), 0 28px 60px rgba(15, 23, 42, .10); --a-ease: cubic-bezier(.22, 1, .36, 1); --a-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --a-nav-h: 68px; } /* --------------------------------------------------------- 2. NEUTRALISATION DE L'HÉRITAGE ⚠️ `twm-editorial.css` impose `background` et `font-family` sur avec `!important`. On ne peut donc reprendre la main qu'avec `!important` à notre tour — c'est le seul endroit de cette feuille où il est employé, et il est là pour annuler une autre déclaration forcée, pas pour gagner une spécificité. --------------------------------------------------------- */ body { background: var(--a-w) !important; font-family: var(--a-font) !important; color: var(--a-ink) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Le grain et le curseur d'imitation appartenaient à la vitrine. Ils sont retirés à la source (lib.php) ; cette règle protège des pages non encore rejouées. */ .twm-ed-grain, .twm-ed-cursor { display: none !important; } /* ⚠️ `#page-wrapper` PORTE SON PROPRE FOND CRÈME dans `twm-editorial.css`, et il recouvre le corps de page. Repeindre en blanc ne suffisait donc pas : la page restait beige alors que `getComputedStyle(document.body)` répondait « blanc ». Le fond réellement peint se lit avec `elementsFromPoint`, jamais sur le seul . */ #page-wrapper, #page, #page-content, .twm-page-content { background: transparent !important; } /* --------------------------------------------------------- 3. ACCUEIL : neutralisation de l'ossature Moodle ⚠️ `:not(.editing)` est ESSENTIEL — sans cette réserve, un administrateur qui active le mode édition ne voit plus rien, et c'est la seule personne capable de réparer. Masquage en CSS pur : la page est complète au premier rendu, donc lisible par un moteur de recherche sans exécuter une ligne de JavaScript. --------------------------------------------------------- */ body#page-site-index:not(.editing) #page-header, body#page-site-index:not(.editing) .page-context-header, body#page-site-index:not(.editing) #region-main, body#page-site-index:not(.editing) #region-main-box, body#page-site-index:not(.editing) [role="main"], body#page-site-index:not(.editing) .secondary-navigation, body#page-site-index:not(.editing) nav.breadcrumb-nav, body#page-site-index:not(.editing) .activity-header, body#page-site-index:not(.editing) #page-footer { display: none !important; } body#page-site-index #page, body#page-site-index #page-content, body#page-site-index:not(.editing) .main-inner, body#page-site-index:not(.editing) #page.drawers, body#page-site-index:not(.editing) .drawer-content { padding: 0 !important; margin: 0 !important; background: transparent !important; min-height: 0 !important; } /* --------------------------------------------------------- 4. BARRE DE NAVIGATION --------------------------------------------------------- */ .anav { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s var(--a-ease), box-shadow .25s var(--a-ease); } .anav.is-stuck { border-bottom-color: var(--a-border); box-shadow: 0 1px 3px rgba(15, 23, 42, .05); } .anav-in { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: var(--a-nav-h); display: flex; align-items: center; gap: 8px; } .anav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--a-ink); font-weight: 700; font-size: 16px; letter-spacing: -.01em; margin-right: 18px; flex: 0 0 auto; } .anav-logo img { width: 32px; height: 32px; border-radius: 7px; } .anav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .anav-links > li { position: static; } .anav-links a { display: flex; align-items: center; gap: 5px; padding: 9px 13px; border-radius: var(--a-r-sm); text-decoration: none; color: var(--a-ink-2); font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: background .18s, color .18s; } .anav-links a:hover { background: var(--a-100); color: var(--a-ink); } .anav-spacer { flex: 1; } .anav-cta { background: var(--a-brand) !important; color: #fff !important; font-weight: 600 !important; padding: 10px 18px !important; border-radius: var(--a-r-pill) !important; box-shadow: 0 1px 2px rgba(24, 80, 160, .3); } .anav-cta:hover { background: var(--a-brand-700) !important; } .anav-ghost { border: 1px solid var(--a-border); border-radius: var(--a-r-pill) !important; padding: 9px 16px !important; } /* --- Volet des domaines --------------------------------- Il s'ouvre au survol ET au focus clavier. Le déclencheur reste un VRAI lien vers le catalogue : au toucher, où il n'y a pas de survol, « Formations » mène quand même quelque part au lieu de ne rien faire. */ .anav-mega { position: absolute; left: 0; right: 0; top: var(--a-nav-h); background: var(--a-w); border-top: 1px solid var(--a-border); border-bottom: 1px solid var(--a-border); box-shadow: var(--a-sh-2); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s var(--a-ease), transform .2s var(--a-ease), visibility .2s; max-height: calc(100vh - var(--a-nav-h)); overflow-y: auto; } .anav-has-mega:hover .anav-mega, .anav-has-mega:focus-within .anav-mega, .anav-mega.is-open { opacity: 1; visibility: visible; transform: none; } .anav-mega-in { max-width: 1280px; margin: 0 auto; padding: 26px 24px 30px; display: grid; grid-template-columns: 1fr 300px; gap: 34px; } .anav-mega-titre { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--a-faint); font-weight: 600; margin: 0 0 14px; } .anav-mega-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; } .anav-mega-grille a { display: flex !important; align-items: center; gap: 11px; padding: 9px 11px !important; border-radius: var(--a-r-sm); font-weight: 500 !important; font-size: 14px !important; color: var(--a-ink) !important; white-space: normal !important; line-height: 1.3; } .anav-mega-grille a:hover { background: var(--a-brand-50) !important; } .anav-mega-ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; } .anav-mega-ico svg { width: 16px; height: 16px; } .anav-mega-nb { margin-left: auto; font-size: 12px; color: var(--a-faint); font-weight: 500; } .anav-mega-aside { border-left: 1px solid var(--a-border); padding-left: 30px; } .anav-mega-aside ol { list-style: none; margin: 0; padding: 0; counter-reset: t; } .anav-mega-aside li { counter-increment: t; } .anav-mega-aside li a { display: flex !important; gap: 11px; padding: 9px 0 !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--a-ink-2) !important; white-space: normal !important; line-height: 1.35; border-radius: 0 !important; } .anav-mega-aside li a:hover { background: transparent !important; color: var(--a-brand) !important; } .anav-mega-aside li a::before { content: counter(t, decimal-leading-zero); color: var(--a-faint); font-variant-numeric: tabular-nums; font-size: 11.5px; padding-top: 2px; } .anav-mega-pied { display: inline-flex !important; margin-top: 12px; padding: 0 !important; color: var(--a-brand) !important; font-weight: 600 !important; font-size: 13.5px !important; } .anav-mega-pied:hover { background: transparent !important; text-decoration: underline; } /* --- Menu du compte ------------------------------------- */ .anav-user { position: relative; flex: 0 0 auto; } .anav-user > button { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--a-border); border-radius: var(--a-r-pill); padding: 5px 12px 5px 5px; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--a-ink); } .anav-user > button:hover { background: var(--a-50); } .anav-user img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .anav-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--a-w); border: 1px solid var(--a-border); border-radius: var(--a-r); box-shadow: var(--a-sh-2); min-width: 218px; padding: 6px; display: none; z-index: 1001; } .anav-user.is-open .anav-menu { display: block; } .anav-menu a { display: block; padding: 9px 12px; border-radius: var(--a-r-sm); color: var(--a-ink-2); font-size: 14px; text-decoration: none; } .anav-menu a:hover { background: var(--a-100); } .anav-menu hr { border: 0; border-top: 1px solid var(--a-border); margin: 6px 0; } /* --- Menu mobile ---------------------------------------- */ .anav-burger { display: none; background: none; border: 1px solid var(--a-border); border-radius: var(--a-r-sm); width: 40px; height: 40px; cursor: pointer; padding: 0; align-items: center; justify-content: center; } .anav-burger svg { width: 20px; height: 20px; } @media (max-width: 1024px) { .anav-burger { display: flex; } .anav-links { position: fixed; inset: var(--a-nav-h) 0 auto 0; background: var(--a-w); border-bottom: 1px solid var(--a-border); flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 18px; max-height: calc(100vh - var(--a-nav-h)); overflow-y: auto; display: none; box-shadow: var(--a-sh-2); } .anav-links.is-open { display: flex; } .anav-links a { padding: 12px 10px; font-size: 16px; } .anav-mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; max-height: none; } .anav-mega-in { grid-template-columns: 1fr; padding: 4px 0 10px; gap: 18px; } .anav-mega-grille { grid-template-columns: 1fr; } .anav-mega-aside { border-left: 0; border-top: 1px solid var(--a-border); padding: 14px 0 0; } .anav-spacer { display: none; } } /* --------------------------------------------------------- 5. OSSATURE ET TYPOGRAPHIE --------------------------------------------------------- */ .aw { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .asec { padding: clamp(56px, 7vw, 96px) 0; } .asec-gris { background: var(--a-50); } .asec-bord { border-top: 1px solid var(--a-border); } .ah1, .ah2 { margin: 0; color: var(--a-ink); letter-spacing: -.03em; font-weight: 700; line-height: 1.08; } .ah1 { font-size: clamp(2.15rem, 4.6vw, 3.5rem); letter-spacing: -.035em; } .ah2 { font-size: clamp(1.7rem, 2.9vw, 2.4rem); } .ah3 { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: -.012em; line-height: 1.35; } .alead { margin: 16px 0 0; font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.65; color: var(--a-muted); } .asub { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--a-muted); max-width: 62ch; } .akick { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--a-brand); margin: 0 0 14px; } .akick::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; } .ahead { margin-bottom: clamp(28px, 4vw, 44px); } .ahead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .alien { display: inline-flex; align-items: center; gap: 6px; color: var(--a-brand); font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; } .alien:hover { color: var(--a-brand-700); } .alien svg { width: 16px; height: 16px; transition: transform .2s var(--a-ease); } .alien:hover svg { transform: translateX(3px); } .abtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: var(--a-r-pill); font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s var(--a-ease); } .abtn-p { background: var(--a-brand); color: #fff; box-shadow: 0 2px 6px rgba(24, 80, 160, .28); } .abtn-p:hover { background: var(--a-brand-700); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(24, 80, 160, .32); } /* ⚠️ La couleur est reposée explicitement : la règle générale du thème (`a { color: inherit }`) est plus spécifique qu'une simple classe et reprendrait le dessus sur le bouton clair. */ .abtn-s { background: var(--a-w); color: var(--a-ink); border-color: var(--a-border); box-shadow: var(--a-sh-1); } .abtn-s:hover { background: var(--a-50); color: var(--a-ink); transform: translateY(-1px); } .abtn-b { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .3); } .abtn-b:hover { background: rgba(255, 255, 255, .24); color: #fff; } /* --------------------------------------------------------- 6. OUVERTURE --------------------------------------------------------- */ .ahero { padding: clamp(52px, 7vw, 88px) 0 clamp(44px, 5vw, 68px); text-align: center; position: relative; overflow: hidden; } /* Halo bleu très dilué derrière le titre : il donne de la profondeur sans introduire d'aplat coloré. Purement décoratif, donc invisible aux technologies d'assistance et sans incidence sur la lecture. */ .ahero::before { content: ""; position: absolute; top: -220px; left: 50%; width: 900px; height: 520px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(24, 80, 160, .09), transparent 68%); pointer-events: none; } .ahero > .aw { position: relative; } .ahero .ah1 { max-width: 17ch; margin: 0 auto; } .ahero .alead { max-width: 60ch; margin-left: auto; margin-right: auto; } .apastille { display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px 6px 7px; border: 1px solid var(--a-border); background: var(--a-w); border-radius: var(--a-r-pill); font-size: 13.5px; color: var(--a-ink-2); font-weight: 500; box-shadow: var(--a-sh-1); margin-bottom: 26px; } .apastille b { background: var(--a-brand); color: #fff; font-weight: 650; padding: 3px 10px; border-radius: var(--a-r-pill); font-size: 12px; } /* --- Recherche ------------------------------------------ */ .asearch { display: flex; align-items: center; gap: 8px; max-width: 620px; margin: 30px auto 0; background: var(--a-w); border: 1px solid var(--a-border); border-radius: var(--a-r-pill); padding: 7px 7px 7px 20px; box-shadow: var(--a-sh-2); transition: border-color .2s, box-shadow .2s; } .asearch:focus-within { border-color: var(--a-brand); box-shadow: 0 0 0 4px var(--a-brand-50), var(--a-sh-2); } .asearch svg { width: 19px; height: 19px; color: var(--a-faint); flex: 0 0 19px; } .asearch input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-family: inherit; font-size: 15.5px; color: var(--a-ink); padding: 10px 0; } .asearch input::placeholder { color: var(--a-faint); } .asearch button { flex: 0 0 auto; border: 0; cursor: pointer; background: var(--a-brand); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 600; padding: 11px 22px; border-radius: var(--a-r-pill); transition: background .2s; } .asearch button:hover { background: var(--a-brand-700); } .achips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 0; } .achips span { font-size: 13px; color: var(--a-faint); align-self: center; } .achips a { font-size: 13.5px; color: var(--a-ink-2); text-decoration: none; padding: 6px 13px; border-radius: var(--a-r-pill); border: 1px solid var(--a-border); background: var(--a-w); transition: border-color .18s, color .18s; } .achips a:hover { border-color: var(--a-brand); color: var(--a-brand); } .asr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------- 7. BANDEAU DE CHIFFRES --------------------------------------------------------- */ .astats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--a-border); border: 1px solid var(--a-border); border-radius: var(--a-r); overflow: hidden; margin-top: clamp(38px, 5vw, 58px); } .astats > div { background: var(--a-w); padding: 22px 18px; text-align: center; } .astats dt { font-size: clamp(1.7rem, 2.6vw, 2.15rem); font-weight: 700; letter-spacing: -.03em; color: var(--a-ink); line-height: 1; } .astats dd { margin: 7px 0 0; font-size: 13px; color: var(--a-muted); } /* --------------------------------------------------------- 8. DOMAINES --------------------------------------------------------- */ .adoms { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; } .adom { display: flex; align-items: flex-start; gap: 14px; background: var(--a-w); border: 1px solid var(--a-border); border-radius: var(--a-r); padding: 20px; text-decoration: none; transition: transform .22s var(--a-ease), box-shadow .22s var(--a-ease), border-color .22s; } .adom:hover { transform: translateY(-3px); box-shadow: var(--a-sh-2); border-color: transparent; } .adom-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; } .adom-ico svg { width: 21px; height: 21px; } .adom-nom { display: block; font-size: 15.5px; font-weight: 650; color: var(--a-ink); line-height: 1.32; letter-spacing: -.012em; } .adom-nb { display: block; margin-top: 5px; font-size: 13px; color: var(--a-muted); } /* --------------------------------------------------------- 9. FORMATIONS --------------------------------------------------------- */ /* Filtres par domaine. Sans JavaScript, ils restent des LIENS vers le catalogue filtré ; avec, ils trient la grille sur place. Aucun contenu n'est caché au premier rendu — les moteurs voient les huit fiches. */ .atabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; margin-bottom: 8px; scrollbar-width: none; } .atabs::-webkit-scrollbar { display: none; } .atab { flex: 0 0 auto; border: 1px solid var(--a-border); background: var(--a-w); border-radius: var(--a-r-pill); padding: 8px 16px; font-family: inherit; font-size: 13.5px; font-weight: 550; color: var(--a-ink-2); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .18s, color .18s, border-color .18s; } .atab:hover { border-color: var(--a-brand); color: var(--a-brand); } .atab.is-on { background: var(--a-ink); border-color: var(--a-ink); color: #fff; } .acards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; } .acard { display: flex; flex-direction: column; background: var(--a-w); border: 1px solid var(--a-border); border-radius: var(--a-r); overflow: hidden; text-decoration: none; transition: transform .22s var(--a-ease), box-shadow .22s var(--a-ease), border-color .22s; } .acard:hover { transform: translateY(-4px); box-shadow: var(--a-sh-3); border-color: transparent; } /* Bandeau de couleur du domaine : c'est le seul repère visuel qui permette de reconnaître une famille de formations d'un coup d'œil dans une grille. */ .acard-bande { height: 4px; } .acard-in { padding: 20px; display: flex; flex-direction: column; flex: 1; } .acard-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .acard-dom { font-size: 11.5px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; } .acard-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: #fef3c7; color: #92400e; padding: 3px 8px; border-radius: var(--a-r-pill); } .acard h3 { font-size: 1.02rem; font-weight: 650; color: var(--a-ink); line-height: 1.35; letter-spacing: -.015em; margin: 0; } .acard-res { margin: 10px 0 0; font-size: 13.8px; line-height: 1.6; color: var(--a-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .acard-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--a-border); font-size: 12.5px; color: var(--a-muted); } .acard-meta span { display: inline-flex; align-items: center; gap: 5px; } .acard-meta svg { width: 14px; height: 14px; color: var(--a-faint); flex: 0 0 14px; } .acard-pied { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .acard-cert { font-size: 12.5px; font-weight: 600; color: var(--a-ink-2); } .acard-go { font-size: 13.5px; font-weight: 650; color: var(--a-brand); display: inline-flex; align-items: center; gap: 5px; } .acard-go svg { width: 15px; height: 15px; transition: transform .2s var(--a-ease); } .acard:hover .acard-go svg { transform: translateX(3px); } /* --------------------------------------------------------- 10. CERTIFICATIONS --------------------------------------------------------- */ .acerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; } .acert { background: var(--a-w); border: 1px solid var(--a-border); border-radius: var(--a-r); padding: 20px; text-decoration: none; transition: transform .22s var(--a-ease), box-shadow .22s var(--a-ease); } .acert:hover { transform: translateY(-3px); box-shadow: var(--a-sh-2); } .acert-sigle { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 11px; background: var(--a-brand-50); color: var(--a-brand); font-weight: 750; font-size: 14px; letter-spacing: .02em; } .acert-nom { display: block; margin-top: 14px; font-size: 15px; font-weight: 650; color: var(--a-ink); letter-spacing: -.012em; } .acert-nb { display: block; margin-top: 4px; font-size: 13px; color: var(--a-muted); } /* --------------------------------------------------------- 11. ARGUMENTS --------------------------------------------------------- */ .aargs { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 26px; } .aarg-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--a-brand-50); color: var(--a-brand); display: grid; place-items: center; margin-bottom: 16px; } .aarg-ico svg { width: 22px; height: 22px; } .aarg p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--a-muted); } /* --------------------------------------------------------- 12. ÉTAPES --------------------------------------------------------- */ .asteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; list-style: none; margin: 0; padding: 0; } .astep { position: relative; } .astep-n { width: 40px; height: 40px; border-radius: 50%; background: var(--a-ink); color: #fff; display: grid; place-items: center; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 16px; } .astep p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--a-muted); } /* Trait de liaison entre les étapes — masqué dès qu'elles s'empilent, où il pointerait dans le vide. */ @media (min-width: 860px) { .astep:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: 52px; right: -18px; height: 1px; background: var(--a-border); } } /* --------------------------------------------------------- 13. QUESTIONS FRÉQUENTES --------------------------------------------------------- */ /*

natifs : dépliables sans une ligne de JavaScript, accessibles au clavier par construction, et lisibles par les moteurs même repliés — ce qu'un accordéon fabriqué en JavaScript ne permet pas. */ .afaq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; } .afaq details { background: var(--a-w); border: 1px solid var(--a-border); border-radius: var(--a-r); overflow: hidden; transition: border-color .2s, box-shadow .2s; } .afaq details[open] { border-color: var(--a-brand-100); box-shadow: var(--a-sh-1); } .afaq summary { list-style: none; cursor: pointer; padding: 17px 52px 17px 20px; position: relative; font-size: 15.5px; font-weight: 600; color: var(--a-ink); line-height: 1.45; } .afaq summary::-webkit-details-marker { display: none; } .afaq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; margin-top: -6px; border-right: 2px solid var(--a-brand); border-bottom: 2px solid var(--a-brand); transform: rotate(45deg); transition: transform .22s var(--a-ease); } .afaq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .afaq p { margin: 0; padding: 0 20px 19px; font-size: 14.8px; line-height: 1.7; color: var(--a-muted); } /* --------------------------------------------------------- 14. APPEL FINAL --------------------------------------------------------- */ .acta { background: linear-gradient(135deg, var(--a-brand-700), var(--a-brand) 55%, var(--a-brand-600)); border-radius: var(--a-r-lg); padding: clamp(40px, 6vw, 66px) clamp(24px, 5vw, 60px); text-align: center; position: relative; overflow: hidden; } .acta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% -10%, rgba(255, 255, 255, .18), transparent 55%); pointer-events: none; } .acta > * { position: relative; } .acta .ah2 { color: #fff; } .acta p { margin: 14px auto 0; max-width: 54ch; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .82); } .acta-b { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } /* --------------------------------------------------------- 15. PIED DE PAGE ⚠️ LA SPÉCIFICITÉ, PAS `!important`. `twm-editorial.css` écrit `footer.twm-footer { background: … !important }` — élément + classe, soit 0-1-1. Une règle `.twm-footer { … !important }` (0-1-0) NE GAGNE PAS contre elle : les deux étant `!important`, c'est la spécificité qui tranche. Le pied de page est donc resté sur son dégradé orange malgré un `!important` bien présent. On écrit ici le MÊME sélecteur, et la règle plus tardive l'emporte. ⚠️ Deux ornements sont des PSEUDO-ÉLÉMENTS, invisibles dans le HTML : un halo orange (`::before`) et un mot-symbole « TW Micronics Academy. » en italique serif de 8 rem (`::after`). Chercher leur cause dans le gabarit PHP ne mène nulle part — ils vivent uniquement dans la feuille de style. --------------------------------------------------------- */ footer.twm-footer { background: var(--a-ink) !important; color: rgba(255, 255, 255, .72) !important; padding: clamp(46px, 6vw, 68px) 24px 30px !important; font-family: var(--a-font) !important; margin: 0 !important; } footer.twm-footer::before, footer.twm-footer::after { content: none !important; display: none !important; } .twm-footer-grid { max-width: 1280px; margin: 0 auto !important; display: grid !important; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px !important; } /* ⚠️ Même piège de spécificité que le fond : la feuille éditoriale vise `.twm-footer-col:first-child p` (0-2-1) pour composer la description en italique serif. Une règle `.twm-footer-col p` (0-1-1) ne la remplace pas, `!important` ou non. On reprend donc le sélecteur exact, ET le cas général. */ .twm-footer-col p, .twm-footer-col:first-child p { font-family: var(--a-font) !important; font-style: normal !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.7 !important; letter-spacing: 0 !important; color: rgba(255, 255, 255, .6) !important; margin: 14px 0 0 !important; max-width: 34ch; } .twm-footer h4 { display: block !important; font-family: var(--a-font) !important; font-size: 12px !important; font-weight: 650 !important; letter-spacing: .09em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, .45) !important; margin: 0 0 14px !important; } .twm-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .twm-footer li, .twm-footer a { font-family: var(--a-font) !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(255, 255, 255, .72) !important; text-decoration: none; } .twm-footer a:hover { color: #fff !important; } .twm-footer-logo { width: 40px !important; height: 40px !important; border-radius: 9px; } .twm-footer-bottom { max-width: 1280px; margin: 34px auto 0 !important; padding: 22px 0 0 !important; border-top: 1px solid rgba(255, 255, 255, .12) !important; font-family: var(--a-font) !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(255, 255, 255, .45) !important; } /* « Douala — Cameroun » ajouté par la feuille éditoriale : le pied de page nomme déjà les trois implantations dans sa colonne Contact, et celles-ci viennent de la configuration. Une ville écrite en dur dans une feuille de style ne peut pas suivre l'entreprise qui déménage. */ .twm-footer-bottom::after { content: none !important; } @media (max-width: 860px) { .twm-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .twm-footer-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------- 16. APPARITION AU DÉFILEMENT ⚠️ N'a d'effet que si le script pose `a-anim` sur . Sans JavaScript, tout est visible et à sa place — l'animation est un confort, jamais une condition d'affichage. C'était précisément le défaut de la page précédente. --------------------------------------------------------- */ /* ⚠️ AUCUN ÉTAT MASQUÉ N'EST DÉCLARÉ SUR `.a-rev`, ET C'EST LE POINT ESSENTIEL. La première version posait `opacity: 0` sur tous les blocs dès que le script avait marqué . Résultat mesuré : les 15 domaines, les 8 formations, les certifications et les arguments étaient bien dans la page, à la bonne hauteur — et parfaitement invisibles dès que l'observateur ne les signalait pas. Une animation d'agrément était devenue une CONDITION D'AFFICHAGE, exactement le défaut que cette page était censée corriger. Désormais, seuls les blocs que le script a explicitement ARMÉS (classe `a-armed`, posée uniquement sur ce qui est hors écran au chargement) partent masqués. Tout le reste est visible d'emblée, quoi qu'il arrive au script. */ .a-armed { opacity: 0; transform: translateY(16px); } .a-armed.is-in { opacity: 1; transform: none; transition: opacity .6s var(--a-ease), transform .6s var(--a-ease); } /* Une page imprimée ne défile pas : sans cette règle, tout ce qui n'a pas été vu à l'écran sortirait blanc sur le papier. */ @media print { .a-armed { opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-motion: reduce) { .a-armed { opacity: 1 !important; transform: none !important; } .abtn, .acard, .adom, .acert { transition: none !important; } } @media (max-width: 640px) { .aw { padding: 0 18px; } .asearch { padding-left: 16px; } .asearch button { padding: 11px 16px; } } /* --------------------------------------------------------- 17. CATALOGUE DES FORMATIONS (formations.php) ⚠️ Même neutralisation d'ossature que l'accueil, et même réserve `:not(.editing)`. L'identifiant de corps est posé par Moodle d'après le chemin du fichier : `local/twmicronics/formations.php` → `page-local-twmicronics-formations`. --------------------------------------------------------- */ body#page-local-twmicronics-formations:not(.editing) #page-header, body#page-local-twmicronics-formations:not(.editing) .page-context-header, body#page-local-twmicronics-formations:not(.editing) .secondary-navigation, body#page-local-twmicronics-formations:not(.editing) nav.breadcrumb-nav, body#page-local-twmicronics-formations:not(.editing) #page-footer { display: none !important; } body#page-local-twmicronics-formations #page, body#page-local-twmicronics-formations #page-content, body#page-local-twmicronics-formations #region-main, body#page-local-twmicronics-formations #region-main-box, body#page-local-twmicronics-formations [role="main"], body#page-local-twmicronics-formations .main-inner { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; border: 0 !important; background: transparent !important; } .acat-tete { padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3.5vw, 40px); border-bottom: 1px solid var(--a-border); background: var(--a-50); } .acat-tete .ah1 { max-width: 20ch; } .acat-tete .alead { max-width: 62ch; } .acat-tete .asearch { margin-left: 0; margin-right: 0; } /* Deux colonnes : les filtres restent visibles pendant qu'on parcourt la grille. La colonne colle en haut à partir de la largeur où elle ne gêne plus. */ .acat-corps { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); padding-top: clamp(30px, 4vw, 46px); padding-bottom: clamp(56px, 7vw, 90px); align-items: start; } .acat-filtres { position: sticky; top: calc(var(--a-nav-h) + 18px); } .acat-bloc + .acat-bloc { margin-top: 26px; } .acat-bloc h2 { font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--a-faint); margin: 0 0 10px; } .acat-bloc ul { list-style: none; margin: 0; padding: 0; } .acat-bloc a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--a-r-sm); font-size: 13.8px; line-height: 1.35; color: var(--a-ink-2); text-decoration: none; transition: background .16s, color .16s; } .acat-bloc a:hover { background: var(--a-100); color: var(--a-ink); } .acat-bloc a.is-on { background: var(--a-brand-50); color: var(--a-brand); font-weight: 600; } .acat-bloc a > span:last-child { margin-left: auto; font-size: 12px; color: var(--a-faint); } .acat-bloc a.is-on > span:last-child { color: var(--a-brand); } .acat-pt { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 8px; } .acat-barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .acat-nb { margin: 0; font-size: 14px; color: var(--a-muted); } .acat-nb strong { color: var(--a-ink); font-size: 16px; } .acat-raz { margin-left: 14px; font-size: 13px; color: var(--a-brand); text-decoration: none; border-bottom: 1px solid currentColor; } .acat-vide { padding: 46px 22px; text-align: center; border: 1px dashed var(--a-border); border-radius: var(--a-r); color: var(--a-muted); font-size: 15px; } .acat-pages { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 34px; } .acat-pages a { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--a-border); border-radius: var(--a-r-sm); font-size: 14px; color: var(--a-ink-2); text-decoration: none; transition: border-color .16s, color .16s, background .16s; } .acat-pages a:hover { border-color: var(--a-brand); color: var(--a-brand); } .acat-pages a.is-on { background: var(--a-ink); border-color: var(--a-ink); color: #fff; } @media (max-width: 900px) { .acat-corps { grid-template-columns: 1fr; } /* Empilés, les filtres ne peuvent plus coller : ils occuperaient tout l'écran. */ .acat-filtres { position: static; } .acat-bloc ul { display: flex; flex-wrap: wrap; gap: 6px; } .acat-bloc a { border: 1px solid var(--a-border); border-radius: var(--a-r-pill); padding: 6px 13px; } .acat-bloc a > span:last-child { margin-left: 4px; } } /* --------------------------------------------------------- 18. BOUTONS NATIFS DE MOODLE ⚠️ SEULES LES COULEURS SONT REPRISES, jamais les dimensions ni la structure. Les écrans natifs — connexion, inscription, fiche de cours, profil — sont ceux où l'apprenant passe le plus de temps une fois entré ; les y laisser en turquoise Boost pendant que tout le reste est au bleu de la marque donne l'impression de deux sites cousus ensemble. Constaté sur le formulaire d'inscription, dont le bouton « Annuler » ressortait plus que « Créer mon compte ». Toucher aux tailles ou aux marges reviendrait à redessiner des formulaires que Moodle fait évoluer à chaque version : la moindre mise à jour casserait le rendu. La couleur, elle, ne dépend d'aucune structure. --------------------------------------------------------- */ .btn-primary { background-color: var(--a-brand) !important; border-color: var(--a-brand) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--a-brand-700) !important; border-color: var(--a-brand-700) !important; } .btn-secondary { background-color: var(--a-w) !important; border-color: var(--a-border) !important; color: var(--a-ink-2) !important; } .btn-secondary:hover, .btn-secondary:focus { background-color: var(--a-50) !important; color: var(--a-ink) !important; } /* Liens de contenu : le bleu de la marque plutôt que celui du thème. */ #region-main a:not(.btn):not(.nav-link) { color: var(--a-brand); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--a-brand); outline-offset: 2px; }